SERV-2286 - barchart element WIP

src/Views/Limitless/Barchart/Attachments/barchart.init.js

+//#region MAIN FUNCTIONS
+function set_chart() {
+
+    let chartCounter = 0;
+
+    $('.LimitlessLineChart').each(function() {
+
+        chartCounter++;
+        let elementChart = $(this);
+        elementChart.attr('id', 'LimitlessLineChart' + chartCounter);
+
+        init_chart(elementChart[0].id);
+
+    });
+
+}
+
+function init_chart(chartId) {
+
+    // Define element
+    let lineChartElement = document.getElementById(chartId);
+
+    if (lineChartElement) {
+
+        let elementObject = $(lineChartElement);
+        let numberOfCharts = elementObject.attr('charts') ?? 1;
+        set_chart_height(numberOfCharts, lineChartElement)
+
+        let lineChart = echarts.init(lineChartElement);
+
+        lineChart.showLoading({
+            text: 'LADE DATEN',
+            maskColor: '#353f53',
+            color: '#fff',
+            textColor: '#fff',
+            fontSize: 15
+        });
+
+        set_data(elementObject, numberOfCharts, function(options) {
+            lineChart.hideLoading();
+            lineChart.setOption(options);
+            setResizeEvent(lineChartElement, lineChart);
+        })
+    }
+}
+
+function set_data(elementObject, numberOfCharts, callback) {
+
+    setTimeout(function() {
+
+        // lightcolors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f'];
+        const defaultColors = ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99', '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a', '#ffff99', '#b15928'];;
+        let options;
+        let rawData = elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null;
+
+        if(rawData == null) {
+
+            let multichart = (numberOfCharts > 1);
+
+            // variables (this will be set by user)
+            let titles = JSON.parse(elementObject.attr('titles')) ?? [];
+            let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
+
+            let boundaryGap = (elementObject.attr('boundary-gap') == 'true' || elementObject.attr('boundary-gap') == true); // default true
+            let inverted = (elementObject.attr('inverted') == 'true' || elementObject.attr('inverted') == true); // default false
+            let showDataZoom = (elementObject.attr('data-zoom') == 'true' || elementObject.attr('data-zoom') == true); // default false
+
+            let animationDuration = elementObject.attr('animation-duration') ?? 750;
+            // ex '{value} users'  - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
+            let yAxisLabelValueFormat = elementObject.attr('y-axis-label-value-format') ?? null;
+            let categories = JSON.parse(elementObject.attr('categories')) ?? null;
+
+            let series = JSON.parse(elementObject.attr('series')) ?? null;
+            let seriesNames = series && series.map(function(item){ return item.name });
+            let seriesObject = setSeries(series, elementObject);
+
+            // Options
+            options = {
+
+                // Chart title
+                title: setTitles(titles, numberOfCharts),
+
+                // Define colors
+                color: colors,
+
+                // Global text styles
+                textStyle: setGlobalTextStyle(),
+
+                // Chart animation duration
+                animationDuration: animationDuration,
+
+                // Setup grid
+                grid: setGrid(showDataZoom, numberOfCharts),
+
+                // Add legend
+                legend: setLegend(seriesNames, multichart),
+
+                // Add tooltip
+                tooltip: setTooltip(),
+
+                // Horizontal axis
+                xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(categories, boundaryGap, numberOfCharts),
+
+                // Vertical axis
+                yAxis: inverted ? setXAxis(categories, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
+
+                // Axis pointer
+                axisPointer: setAxisPointer(multichart),
+
+                // Add series
+                series: seriesObject
+            };
+
+            if(showDataZoom == true) {
+                options.dataZoom = setDataZoom(showDataZoom, multichart);
+            }
+
+        } else {
+            options = rawData;
+        }
+
+        callback(options);
+
+    }, 1000);
+
+}
+
+function set_chart_height(numberOfCharts, lineChartElement) {
+
+    // adjust container height before initialising the chart.
+    if (numberOfCharts > 1) {
+        let height = (numberOfCharts * 240); // (chart height = 160 | charts spacing = 80)
+        lineChartElement.style.height = height + 'px';
+    }
+
+    return lineChartElement;
+}
+//#endregion
+
+//#region FUNCTIONS FOR OPTIONS
+function setSeries(seriesData, elementObject) {
+
+    // uses series options if available else use global options.
+    let seriesArray = [];
+
+    if(!seriesData || seriesData.length == 0) return [];
+
+    let showPointValues = (elementObject.attr('point-values') == 'true' || elementObject.attr('point-values') == true) ?? false;
+    let stacked = (elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false;
+    let isArea = (elementObject.attr('is-area') == 'true' || elementObject.attr('is-area') == true) ?? false;
+    let markLine = elementObject.attr('mark-line') ?? null; // min | max | average
+
+    for(let i = 0; i < seriesData.length; i++) {
+
+        let series = {
+            name: seriesData[i].name,
+            type: seriesData[i].type ?? 'line',
+            data: seriesData[i].data,
+            stack: seriesData[i].stacked ?? stacked,
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 7,
+            label: {
+                normal: {
+                    show: seriesData[i].showPointValues ?? showPointValues
+                }
+            },
+            itemStyle: {
+                normal: {
+                    borderWidth: 2
+                }
+            },
+            xAxisIndex: seriesData[i].index ?? 0,
+            yAxisIndex: seriesData[i].index ?? 0
+        }
+
+        setMarkLine(series, seriesData[i], markLine);
+        setArea(series, seriesData[i], isArea);
+
+        seriesArray.push(series);
+
+    }
+
+    return seriesArray;
+}
+
+function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
+
+    let xAxisArray = [];
+    for (let i = 0; i < numberOfCharts; i++) {
+
+        let x = {
+            type: 'category',
+            boundaryGap: boundaryGap,
+            axisLabel: {
+                color: '#fff'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.25)'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.1)'
+                }
+            },
+            gridIndex: i
+        };
+
+        if(categories != null) {
+            x.data = categories;
+        }
+
+        xAxisArray.push(x);
+    }
+
+    console.log('xaxisarray', xAxisArray);
+
+    return xAxisArray;
+}
+
+function setYAxis(yAxisLabelValueFormat,  numberOfCharts = 1) {
+
+    let yAxisArray = [];
+    for (let i = 0; i < numberOfCharts; i++) {
+
+        let y = {
+            type: 'value',
+            axisLabel: {
+                formatter: yAxisLabelValueFormat,
+                color: '#fff'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.25)'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.1)'
+                }
+            },
+            splitArea: {
+                show: true,
+                areaStyle: {
+                    color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
+                }
+            },
+            gridIndex: i
+        };
+
+        yAxisArray.push(y);
+    }
+
+    return yAxisArray;
+}
+
+// disabled when multichart is true
+function setLegend(legendData, multichart = false) {
+    return multichart ? null : {
+        data: legendData,
+        itemHeight: 8,
+        itemGap: 20,
+        textStyle: {
+            color: '#fff'
+        }
+    }
+}
+
+function setTitles(titles, numberOfCharts = 1) {
+
+    // if not array.
+    if(!Array.isArray(titles)) {
+        let temp = titles;
+        titles = [];
+        titles.push(temp);
+    }
+
+    let arrayTitles = [];
+
+    for(i = 0; i < numberOfCharts; i++) {
+
+        let title = {
+            text: titles[i],
+        };
+
+        // if single else multichart
+        if(i == 0 && numberOfCharts == 1) {
+            title.textStyle = {
+                color: '#fff'
+            };
+        } else {
+            title.textStyle = {
+                fontSize: 15,
+                fontWeight: 500,
+                color: '#fff'
+            };
+            title.left = 'center';
+            title.top = 240 * i; //  (chart height = 160 | charts spacing = 80) * index
+        }
+
+        arrayTitles.push(title);
+    }
+
+    console.log('titles', arrayTitles);
+
+    return arrayTitles;
+}
+
+// disabled when multichart is true
+function setDataZoom(show, multichart = false) {
+    return multichart ? null : [
+        {
+            type: 'inside',
+            start: 30,
+            end: 70
+        },
+        {
+            show: show,
+            type: 'slider',
+            start: 30,
+            end: 70,
+            height: 40,
+            bottom: 0,
+            borderColor: 'rgba(255,255,255,0.1)',
+            fillerColor: 'rgba(0,0,0,0.1)',
+            handleStyle: {
+                color: '#585f63'
+            },
+            textStyle: {
+                color: '#fff'
+            },
+            handleStyle: {
+                color: '#8893a9'
+            },
+            dataBackground: {
+                areaStyle: {
+                    color: 'rgba(0,0,0,0.5)'
+                }
+            }
+        }
+    ]
+}
+
+function setTooltip() {
+    return {
+        trigger: 'axis',
+        backgroundColor: 'rgba(255,255,255,0.9)',
+        padding: [10, 15],
+        textStyle: {
+            color: '#222',
+            fontSize: 13,
+            fontFamily: 'Roboto, sans-serif'
+        }
+    }
+}
+
+function setGrid(showDataZoom = false, numberOfCharts = 1) {
+
+    let arrayGrids = [];
+    for (let i = 0; i < numberOfCharts; i++) {
+
+        let grid = {
+            left: 0,
+            containLabel: true
+        };
+
+        // if single else multichart
+        if(i == 0 && numberOfCharts == 1) {
+            grid.right = 40;
+            grid.top = 50;
+            grid.bottom = showDataZoom ? 60 : 0;
+        } else {
+            grid.right = 20;
+            grid.top = (i == 0) ? 40 : (arrayGrids[i-1].top + 240); // previous top + chart height = 160 + charts spacing = 80
+            grid.height = 160;
+        }
+
+        arrayGrids.push(grid);
+    }
+
+    console.log('grids', arrayGrids);
+
+    return arrayGrids;
+}
+
+function setGlobalTextStyle() {
+    return {
+        fontFamily: 'Roboto, Arial, Verdana, sans-serif',
+        fontSize: 13
+    };
+}
+
+function setAxisPointer(multichart = false) {
+    let pointer =  {
+        lineStyle: {
+            color: 'rgba(255,255,255,0.25)'
+        }
+    };
+
+    if(multichart) {
+        pointer.link = {
+            xAxisIndex: 'all'
+        };
+    }
+
+    return pointer;
+}
+//#endregion
+
+//#region SUB FUNCTIONS FOR SERIES
+function setMarkLine(series, seriesData, markLine) {
+    if(seriesData.markLine != undefined && ['min', 'max', 'average'].includes(markLine)) {
+
+        series.markLine = {
+            data: [{
+                type: seriesData.markLine,
+                name: seriesData.markLine[0].toUpperCase() + seriesData.markLine.substring(1),
+            }]
+        };
+
+    } else if(markLine != null && ['min', 'max', 'average'].includes(markLine)) {
+
+        series.markLine = {
+            data: [{
+                type: markLine,
+                name: markLine[0].toUpperCase() + markLine.substring(1),
+            }]
+        };
+
+    }
+}
+
+function setArea(series, seriesData, isArea) {
+
+    let area = seriesData.isArea ?? isArea;
+
+    if(area == true) {
+        series.areaStyle = {};
+    }
+
+}
+//#endregion
+
+function setResizeEvent(lineChartElement, lineChart) {
+    // Resize function
+    let triggerChartResize = function() {
+        lineChartElement && lineChart.resize();
+    };
+
+    // On sidebar width change
+    let sidebarToggle = document.querySelector('.sidebar-control');
+    sidebarToggle && sidebarToggle.addEventListener('click', triggerChartResize);
+
+    // On window resize
+    let resizeCharts;
+    window.addEventListener('resize', function() {
+        clearTimeout(resizeCharts);
+        resizeCharts = setTimeout(function () {
+            triggerChartResize();
+        }, 200);
+    });
+}
+
+$(document).ready(function() {
+
+    if (typeof echarts == 'undefined') {
+        console.warn('Warning - echarts.min.js is not loaded.');
+        return;
+    }
+
+    set_chart();
+});
\ No newline at end of file

src/Views/Limitless/Barchart/BarChart.blade.php

+<div class="chart-container">
+    <div class="chart has-fixed-height LimitlessLineChart"
+         charts="{{ $charts }}"
+         titles="{{ json_encode($titles) }}"
+         colors="{{ json_encode($colors) }}"
+         point-values="{{ $pointValues }}"
+         boundary-gap="{{ $boundaryGap }}"
+         inverted="{{ $inverted }}"
+         data-zoom="{{ $dataZoom }}"
+         stacked="{{ $stacked }}"
+         is-area="{{ $isArea }}"
+         animation-duration="{{ $animationDuration }}"
+         @if($yAxisLabelValueFormat != null) y-axis-label-value-format="{{ $yAxisLabelValueFormat }}" @endif
+         @if($markLine != null) mark-line="{{ $markLine }}" @endif
+         categories="{{ json_encode($categories) }}"
+         series="{{ json_encode($series) }}"
+         raw="{{ $raw }}"
+    >
+    </div>
+</div>
\ No newline at end of file

src/Views/Limitless/Barchart/Config.php

+<?php
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Information
+    |------------------------------------------------------------------------------------------------
+    |
+    | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
+    | sidekick package.
+    |
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-07-21 01:27:31
+    |
+    */
+    namespace Ceetrox\Sidekick\Views\Limitless\Barchart;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Dependencies
+    |------------------------------------------------------------------------------------------------
+    */
+    use View;
+
+
+    /*
+    |------------------------------------------------------------------------------------------------
+    | Class "Config"
+    |------------------------------------------------------------------------------------------------
+    */
+    class Config 
+    {
+        public $methodAllocation = [
+        'Limitless::BarChart' => 'barChart'
+        ];
+
+        
+        public $assetAllocation;
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "__construct"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function __construct()
+        {
+            $this->assetAllocation = [
+            'Limitless::LineChart' => [
+            'Attachments/barchart.init.js',
+            secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
+            ]
+            ];
+
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "barChart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function barChart($parameters)
+        {
+            return View('Limitless::Barchart.barChart')
+            ->withCharts($parameters['charts'] ?? 1)
+            ->withTitles($parameters['titles'] ?? null)
+            ->withColors($parameters['colors'] ?? null)
+            ->withPointValues($parameters['point-values'] ?? false)
+            ->withBoundaryGap($parameters['boundary-gap'] ?? true)
+            ->withInverted($parameters['inverted'] ?? false)
+            ->withDataZoom($parameters['data-zoom'] ?? false)
+            ->withStacked($parameters['stacked'] ?? false)
+            ->withIsArea($parameters['is-area'] ?? false)
+            ->withAnimationDuration($parameters['animation-duration'] ?? 750)
+            ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
+            ->withMarkLine($parameters['mark-line'] ?? null)
+            ->withCategories($parameters['categories'] ?? null)
+            ->withSeries($parameters['series'] ?? null)
+            ->withRaw($parameters['raw'] ?? null);
+
+        }
+
+    }
+
+
+

src/Views/Limitless/Barchart/Documentation/Index.blade.php

+{{-- Layout Reference --}}
+@extends('Limitless::Help.Layout.Master')
+
+@section('Limitless::Content')
+
+    @php
+
+        // sample backend data
+        $categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        $series = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
+
+        $seriesData = [];
+        foreach ($series as $s) {
+            $data['name'] = $s;
+            $dataArray = [];
+            foreach ($categories as $c) {
+               $dataArray[] = rand(1,100);
+            }
+            $data['data'] = $dataArray;
+            $data['index'] = 0; //rand(0,1); on what chart index to add.
+            $seriesData[] = $data;
+        }
+
+        // json string data should be valid else it will return null
+        $rawData = '{
+           "xAxis":{
+              "type":"category",
+              "boundaryGap":false,
+              "data":["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]
+           },
+           "yAxis":{
+              "type":"value"
+           },
+           "series":[
+              {
+                 "data":[820,932,901,934,1290,1330,1320],
+                 "type":"line",
+                 "areaStyle":{}
+              }
+           ]
+        }';
+
+    @endphp
+
+    @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::LineChart([
+            'categories' => $categories,
+            'series' => $seriesData,
+        ])
+    @Limitless::CardStop
+
+    @Limitless::CardStart(['title' => "Chart 2  (raw)", 'icon' => 'icon-info22' ] )
+        @Limitless::LineChart([
+            'raw' => $rawData
+        ])
+    @Limitless::CardStop
+
+{{--    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
+{{--        @Limitless::LineChartStart--}}
+{{--        @Limitless::LineChartStop--}}
+{{--    @Limitless::CardStop--}}
+
+@stop

src/Views/Limitless/Linechart/Config.php

@@ -9,8 +9,8 @@
     | This file is beautified by the command "sidekick:CodebeautifierCommand" of the ceetrox
     | sidekick package.
     |
-    | Author: Marco Schmiedel <marco.schmiedel@itmax.email>
-    | Update: 2022-06-15 10:07:09
+    | Author: Kevin Almond Roe Yumang <kevin.yumang@itmax.email>
+    | Update: 2022-07-21 01:24:33
     |
     */
     namespace Ceetrox\Sidekick\Views\Limitless\Linechart;
@@ -29,22 +29,29 @@
     | Class "Config"
     |------------------------------------------------------------------------------------------------
     */
-    class Config
+    class Config 
     {
         public $methodAllocation = [
-            'Limitless::LineChart' => 'lineChart'
+        'Limitless::LineChart' => 'lineChart'
         ];
 
         public $assetAllocation;
 
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "__construct"
+        |--------------------------------------------------------------------------------------------
+        */
         public function __construct()
         {
             $this->assetAllocation = [
-                'Limitless::LineChart' => [
-                    'Attachments/linechart.init.js',
-                    secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
-                ]
+            'Limitless::LineChart' => [
+            'Attachments/linechart.init.js',
+            secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
+            ]
             ];
+
         }
 
 
@@ -56,21 +63,21 @@
         public function lineChart($parameters)
         {
             return View('Limitless::Linechart.LineChart')
-                ->withCharts($parameters['charts'] ?? 1)
-                ->withTitles($parameters['titles'] ?? null)
-                ->withColors($parameters['colors'] ?? null)
-                ->withPointValues($parameters['point-values'] ?? false)
-                ->withBoundaryGap($parameters['boundary-gap'] ?? true)
-                ->withInverted($parameters['inverted'] ?? false)
-                ->withDataZoom($parameters['data-zoom'] ?? false)
-                ->withStacked($parameters['stacked'] ?? false)
-                ->withIsArea($parameters['is-area'] ?? false)
-                ->withAnimationDuration($parameters['animation-duration'] ?? 750)
-                ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
-                ->withMarkLine($parameters['mark-line'] ?? null)
-                ->withCategories($parameters['categories'] ?? null)
-                ->withSeries($parameters['series'] ?? null)
-                ->withRaw($parameters['raw'] ?? null);
+            ->withCharts($parameters['charts'] ?? 1)
+            ->withTitles($parameters['titles'] ?? null)
+            ->withColors($parameters['colors'] ?? null)
+            ->withPointValues($parameters['point-values'] ?? false)
+            ->withBoundaryGap($parameters['boundary-gap'] ?? true)
+            ->withInverted($parameters['inverted'] ?? false)
+            ->withDataZoom($parameters['data-zoom'] ?? false)
+            ->withStacked($parameters['stacked'] ?? false)
+            ->withIsArea($parameters['is-area'] ?? false)
+            ->withAnimationDuration($parameters['animation-duration'] ?? 750)
+            ->withYAxisLabelValueFormat($parameters['y-axis-label-value-format'] ?? null)
+            ->withMarkLine($parameters['mark-line'] ?? null)
+            ->withCategories($parameters['categories'] ?? null)
+            ->withSeries($parameters['series'] ?? null)
+            ->withRaw($parameters['raw'] ?? null);
 
         }