SERV-2286 - linked backend/frontend data to js file. (parameters) WIP

src/Views/Limitless/Linechart/Attachments/linechart.init.js

@@ -22,13 +22,16 @@ function init_chart(chartId) {
 
     if (lineChartElement) {
 
-        let titles = ['A', 'B', 'C'];
-        let multichart = (titles && titles.length > 1);
-        let numberOfCharts = titles ? titles.length : 1;
+        let elementObject = $(lineChartElement);
+        let numberOfCharts = elementObject.attr('charts') ?? 1;
+        let multichart = (numberOfCharts > 1);
+
+        console.log(numberOfCharts);
+        console.log(multichart);
 
         // adjust container height before initialising the chart.
         if (multichart) {
-            let height = (titles.length * 240); // (chart height = 160 | charts spacing = 80)
+            let height = (numberOfCharts * 240); // (chart height = 160 | charts spacing = 80)
             lineChartElement.style.height = height + 'px';
             console.log('adjusted container height', height + 'px');
         }
@@ -43,7 +46,7 @@ function init_chart(chartId) {
             fontSize: 15
         });
 
-        set_data(titles, multichart, numberOfCharts, function(options) {
+        set_data(elementObject, multichart, numberOfCharts, function(options) {
             lineChart.hideLoading();
             lineChart.setOption(options);
             setResizeEvent(lineChartElement, lineChart);
@@ -51,47 +54,57 @@ function init_chart(chartId) {
     }
 }
 
-function set_data(titles, multichart, numberOfCharts, callback) {
+function set_data(elementObject, multichart, numberOfCharts, callback) {
 
     setTimeout(function() {
 
+        const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
+
         // variables (this will be set by user)
-        let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
-        let animationDuration = 750;
-        let seriesNames = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
-        let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
-        let yAxisLabelValueFormat = '{value}'; // ex '{value} users'  - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
-        let showPointValues = false;
-        let boundaryGap = true;
-        let inverted = false;
-        let showDataZoom = true;
-        let stacked = false;
-        let markLine = 'average'; // min | max | average
-        let series = [];
-
-        seriesNames.forEach(function (val, idx, arr) {
-
-            let chartindex = Math.floor(Math.random() * titles.length);
-
-            series.push(setLineChartSeries(val, [
-                Math.floor(Math.random() * 100),
-                Math.floor(Math.random() * 100),
-                Math.floor(Math.random() * 100),
-                Math.floor(Math.random() * 100),
-                Math.floor(Math.random() * 100),
-                Math.floor(Math.random() * 100),
-                Math.floor(Math.random() * 100),
-            ], showPointValues, markLine, stacked, chartindex));
-        });
+        let titles = JSON.parse(elementObject.attr('titles')) ?? [];
+        let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
+
+        let showPointValues = (elementObject.attr('point-values') == 'true' || elementObject.attr('point-values') == true); // default false
+        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 stacked = (elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == 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') ?? '{value}';
+        // min | max | average
+        let markLine = elementObject.attr('mark-line') ?? 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, showPointValues, markLine, stacked);
+
+        console.log('titles', titles);
+        console.log('colors', colors);
+        console.log('point-values', showPointValues);
+        console.log('boundary-gap', boundaryGap);
+        console.log('inverted', inverted);
+        console.log('data-zoom', showDataZoom);
+        console.log('stacked', stacked);
+        console.log('animation-duration', animationDuration);
+        console.log('y-axis-label-value-format', yAxisLabelValueFormat);
+        console.log('mark-line', markLine);
+        console.log('categories', categories);
+        console.log('series', series);
+        console.log('series names', seriesNames);
+        console.log('series object', seriesObject);
+
 
         // Options
         let options = {
 
             // Chart title
-            title: setTitles(titles),
+            title: setTitles(titles, numberOfCharts),
 
             // Define colors
-            color: color,
+            color: colors,
 
             // Global text styles
             textStyle: setGlobalTextStyle(),
@@ -109,21 +122,22 @@ function set_data(titles, multichart, numberOfCharts, callback) {
             tooltip: setTooltip(),
 
             // Horizontal axis
-            xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(xAxisData, boundaryGap, numberOfCharts),
+            xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(categories, boundaryGap, numberOfCharts),
 
             // Vertical axis
-            yAxis: inverted ? setXAxis(xAxisData, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
+            yAxis: inverted ? setXAxis(categories, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
 
             // Axis pointer
             axisPointer: setAxisPointer(multichart),
 
-            // Zoom control
-            dataZoom: setDataZoom(showDataZoom, multichart),
-
             // Add series
-            series: series
+            series: seriesObject
         };
 
+        if(showDataZoom == true) {
+            options.dataZoom = setDataZoom(showDataZoom, multichart);
+        }
+
         callback(options);
 
     }, 1000);
@@ -131,40 +145,63 @@ function set_data(titles, multichart, numberOfCharts, callback) {
 }
 
 // sub functions
-function setLineChartSeries(name, data = [], showPointValues  = false, markLineDataType = null, stack = false, index = 0) {
-
-    let series = {
-        name: name,
-        type: 'line',
-        data: data,
-        stack: stack,
-        smooth: true,
-        symbol: 'circle',
-        symbolSize: 7,
-        label: {
-            normal: {
-                show: showPointValues
-            }
-        },
-        markLine: {
-            data: [{
-                type: markLineDataType,
-                name: markLineDataType !== null ? (markLineDataType[0].toUpperCase() + markLineDataType.substring(1)) : null,
-            }]
-        },
-        itemStyle: {
-            normal: {
-                borderWidth: 2
-            }
-        },
-        xAxisIndex: index,
-        yAxisIndex: index
+function setSeries(seriesData, showPointValues  = false, markLineDataType = null, stack = false) {
+
+    // uses series options if available else use global options.
+
+    let seriesArray = [];
+    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].stack ?? stack,
+            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
+        }
+
+        if(seriesData[i].markline != undefined && ['min', 'max', 'average'].includes(markLineDataType)) {
+
+            series.markLine = {
+                data: [{
+                    type: seriesData[i].markline,
+                    name: seriesData[i].markline[0].toUpperCase() + seriesData[i].markline.substring(1),
+                }]
+            };
+
+        } else if(markLineDataType != null && ['min', 'max', 'average'].includes(markLineDataType)) {
+
+            series.markLine = {
+                data: [{
+                    type: markLineDataType,
+                    name: markLineDataType[0].toUpperCase() + markLineDataType.substring(1),
+                }]
+            };
+
+        }
+
+        seriesArray.push(series);
+
     }
 
-    return series;
+    return seriesArray;
 }
 
-function setXAxis(xAxisData, boundaryGap = true, numberOfCharts = 1) {
+function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
 
     let xAxisArray = [];
     for (let i = 0; i < numberOfCharts; i++) {
@@ -172,7 +209,6 @@ function setXAxis(xAxisData, boundaryGap = true, numberOfCharts = 1) {
         let x = {
             type: 'category',
             boundaryGap: boundaryGap,
-            data: xAxisData,
             axisLabel: {
                 color: '#fff'
             },
@@ -189,9 +225,15 @@ function setXAxis(xAxisData, boundaryGap = true, numberOfCharts = 1) {
             gridIndex: i
         };
 
+        if(categories != null) {
+            x.data = categories;
+        }
+
         xAxisArray.push(x);
     }
 
+    console.log('xaxisarray', xAxisArray);
+
     return xAxisArray;
 }
 
@@ -243,17 +285,25 @@ function setLegend(legendData, multichart = false) {
     }
 }
 
-function setTitles(titles) {
+function setTitles(titles, numberOfCharts = 1) {
+
+    // if not array.
+    if(!Array.isArray(titles)) {
+        let temp = titles;
+        titles = [];
+        titles.push(temp);
+    }
 
     let arrayTitles = [];
-    titles.forEach(function(val, idx, arr) {
+
+    for(i = 0; i < numberOfCharts; i++) {
 
         let title = {
-            text: val,
+            text: titles[i],
         };
 
         // if single else multichart
-        if(idx == 0 && arr.length == 1) {
+        if(i == 0 && numberOfCharts == 1) {
             title.textStyle = {
                 color: '#fff'
             };
@@ -264,11 +314,11 @@ function setTitles(titles) {
                 color: '#fff'
             };
             title.left = 'center';
-            title.top = 240 * idx; //  (chart height = 160 | charts spacing = 80) * index
+            title.top = 240 * i; //  (chart height = 160 | charts spacing = 80) * index
         }
 
         arrayTitles.push(title);
-    });
+    }
 
     console.log('titles', arrayTitles);
 

src/Views/Limitless/Linechart/Chart.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 }}"
+         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) }}"
+    >

src/Views/Limitless/Linechart/Config.php

@@ -32,8 +32,7 @@
     class Config
     {
         public $methodAllocation = [
-            'Limitless::LineChartStart' => 'lineChartStart',
-            'Limitless::LineChartStop' => 'LineChartStop',
+            'Limitless::Chart' => 'chart'
         ];
 
         public $assetAllocation;
@@ -41,7 +40,7 @@
         public function __construct()
         {
             $this->assetAllocation = [
-                'Limitless::LineChartStart' => [
+                'Limitless::Chart' => [
                     'Attachments/linechart.init.js',
                     secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/visualization/echarts/echarts.min.js'),
                 ]
@@ -51,24 +50,25 @@
 
         /*
         |--------------------------------------------------------------------------------------------
-        | Method "lineChartStart"
+        | Method "chart"
         |--------------------------------------------------------------------------------------------
         */
-        public function lineChartStart($parameters)
+        public function chart($parameters)
         {
-            return View('Limitless::Linechart.Start');
-
-        }
-
-
-        /*
-        |--------------------------------------------------------------------------------------------
-        | Method "LineChartStop"
-        |--------------------------------------------------------------------------------------------
-        */
-        public function LineChartStop($parameters)
-        {
-            return View('Limitless::Linechart.Stop');
+            return View('Limitless::Linechart.Chart')
+                ->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)
+                ->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);;
 
         }
 

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

@@ -3,16 +3,52 @@
 
 @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);
+            $seriesData[] = $data;
+        }
+
+    @endphp
+
+
     @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22' ] )
-        @Limitless::LineChartStart
+        @Limitless::Chart([
+            'titles' => 'Sample 1',
+            'charts' => 1,
+            'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'],
+            'point-values' => true,
+            'boundary-gap' => true,
+            'inverted' => true,
+            'data-zoom' => true,
+            'stacked' => true,
+            'animation-duration' => 1000,
+            'y-axis-label-value-format' => '{value} users',
+            'mark-line' => 'average',
+            'categories' => $categories,
+            'series' => $seriesData
+        ])
     @Limitless::CardStop
 
-    @Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )
-        @Limitless::LineChartStart
-    @Limitless::CardStop
+{{--    @Limitless::CardStart(['title' => "Chart 2", 'icon' => 'icon-info22' ] )--}}
+{{--        @Limitless::Chart--}}
+{{--    @Limitless::CardStop--}}
 
-    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )
-        @Limitless::LineChartStart
-    @Limitless::CardStop
+{{--    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
+{{--        @Limitless::LineChartStart--}}
+{{--        @Limitless::LineChartStop--}}
+{{--    @Limitless::CardStop--}}
 
 @stop

src/Views/Limitless/Linechart/Start.blade.php

-<div class="chart-container">
-    <div class="chart has-fixed-height LimitlessLineChart">
-
-    </div>
-</div>
\ No newline at end of file