SERV-2286 - bar chart element configuration WIP

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

@@ -3,11 +3,11 @@ function set_chart() {
 
     let chartCounter = 0;
 
-    $('.LimitlessLineChart').each(function() {
+    $('.LimitlessBarChart').each(function() {
 
         chartCounter++;
         let elementChart = $(this);
-        elementChart.attr('id', 'LimitlessLineChart' + chartCounter);
+        elementChart.attr('id', 'LimitlessBarChart' + chartCounter);
 
         init_chart(elementChart[0].id);
 
@@ -23,8 +23,6 @@ function init_chart(chartId) {
     if (lineChartElement) {
 
         let elementObject = $(lineChartElement);
-        let numberOfCharts = elementObject.attr('charts') ?? 1;
-        set_chart_height(numberOfCharts, lineChartElement)
 
         let lineChart = echarts.init(lineChartElement);
 
@@ -36,7 +34,7 @@ function init_chart(chartId) {
             fontSize: 15
         });
 
-        set_data(elementObject, numberOfCharts, function(options) {
+        set_data(elementObject, function(options) {
             lineChart.hideLoading();
             lineChart.setOption(options);
             setResizeEvent(lineChartElement, lineChart);
@@ -44,26 +42,22 @@ function init_chart(chartId) {
     }
 }
 
-function set_data(elementObject, numberOfCharts, callback) {
+function set_data(elementObject, 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'];;
+        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 title = elementObject.attr('title') ?? null;
             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
@@ -78,7 +72,7 @@ function set_data(elementObject, numberOfCharts, callback) {
             options = {
 
                 // Chart title
-                title: setTitles(titles, numberOfCharts),
+                title: setTitle(title),
 
                 // Define colors
                 color: colors,
@@ -90,31 +84,24 @@ function set_data(elementObject, numberOfCharts, callback) {
                 animationDuration: animationDuration,
 
                 // Setup grid
-                grid: setGrid(showDataZoom, numberOfCharts),
+                grid: setGrid(),
 
                 // Add legend
-                legend: setLegend(seriesNames, multichart),
+                legend: setLegend(seriesNames),
 
                 // Add tooltip
                 tooltip: setTooltip(),
 
                 // Horizontal axis
-                xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(categories, boundaryGap, numberOfCharts),
+                xAxis: inverted ? setYAxis(yAxisLabelValueFormat) : setXAxis(categories),
 
                 // Vertical axis
-                yAxis: inverted ? setXAxis(categories, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
-
-                // Axis pointer
-                axisPointer: setAxisPointer(multichart),
+                yAxis: inverted ? setXAxis(categories) : setYAxis(yAxisLabelValueFormat),
 
                 // Add series
                 series: seriesObject
             };
 
-            if(showDataZoom == true) {
-                options.dataZoom = setDataZoom(showDataZoom, multichart);
-            }
-
         } else {
             options = rawData;
         }
@@ -124,17 +111,6 @@ function set_data(elementObject, numberOfCharts, callback) {
     }, 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
@@ -145,37 +121,31 @@ function setSeries(seriesData, elementObject) {
 
     if(!seriesData || seriesData.length == 0) return [];
 
-    let showPointValues = (elementObject.attr('point-values') == 'true' || elementObject.attr('point-values') == true) ?? false;
+    let showBarValues = (elementObject.attr('bar-values') == 'true' || elementObject.attr('bar-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',
+            type: seriesData[i].type ?? 'bar',
             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
+                    label: {
+                        show: seriesData[i].showBarValues ?? showBarValues,
+                        position: 'top',
+                        textStyle: {
+                            fontWeight: 500
+                        }
+                    }
                 }
             },
-            xAxisIndex: seriesData[i].index ?? 0,
-            yAxisIndex: seriesData[i].index ?? 0
         }
 
         setMarkLine(series, seriesData[i], markLine);
-        setArea(series, seriesData[i], isArea);
 
         seriesArray.push(series);
 
@@ -184,14 +154,10 @@ function setSeries(seriesData, elementObject) {
     return seriesArray;
 }
 
-function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
-
-    let xAxisArray = [];
-    for (let i = 0; i < numberOfCharts; i++) {
+function setXAxis(categories) {
 
     let x = {
         type: 'category',
-            boundaryGap: boundaryGap,
         axisLabel: {
             color: '#fff'
         },
@@ -201,31 +167,24 @@ function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
             }
         },
         splitLine: {
+            show: true,
             lineStyle: {
-                    color: 'rgba(255,255,255,0.1)'
+                color: 'rgba(255,255,255,0.1)',
+                type: 'dashed'
+            }
         }
-            },
-            gridIndex: i
     };
 
     if(categories != null) {
         x.data = categories;
     }
 
-        xAxisArray.push(x);
-    }
-
-    console.log('xaxisarray', xAxisArray);
-
-    return xAxisArray;
+    return x;
 }
 
-function setYAxis(yAxisLabelValueFormat,  numberOfCharts = 1) {
+function setYAxis(yAxisLabelValueFormat) {
 
-    let yAxisArray = [];
-    for (let i = 0; i < numberOfCharts; i++) {
-
-        let y = {
+    return {
         type: 'value',
         axisLabel: {
             formatter: yAxisLabelValueFormat,
@@ -246,19 +205,12 @@ function setYAxis(yAxisLabelValueFormat,  numberOfCharts = 1) {
                 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 : {
+function setLegend(legendData) {
+    return {
         data: legendData,
         itemHeight: 8,
         itemGap: 20,
@@ -268,79 +220,17 @@ function setLegend(legendData, multichart = false) {
     }
 }
 
-function setTitles(titles, numberOfCharts = 1) {
+function setTitle(title) {
 
-    // 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(title == null) return null;
 
-        // 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'
-            },
+    return {
+        text: title,
         textStyle: {
             color: '#fff'
-            },
-            handleStyle: {
-                color: '#8893a9'
-            },
-            dataBackground: {
-                areaStyle: {
-                    color: 'rgba(0,0,0,0.5)'
-                }
         }
     }
-    ]
+
 }
 
 function setTooltip() {
@@ -352,37 +242,25 @@ function setTooltip() {
             color: '#222',
             fontSize: 13,
             fontFamily: 'Roboto, sans-serif'
+        },
+        axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+                color: 'rgba(255,255,255,0.1)'
+            }
         }
     }
 }
 
-function setGrid(showDataZoom = false, numberOfCharts = 1) {
-
-    let arrayGrids = [];
-    for (let i = 0; i < numberOfCharts; i++) {
+function setGrid() {
 
-        let grid = {
+    return {
         left: 0,
+        right: 40,
+        top: 50,
         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() {
@@ -391,22 +269,6 @@ function setGlobalTextStyle() {
         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
@@ -431,16 +293,6 @@ function setMarkLine(series, seriesData, markLine) {
 
     }
 }
-
-function setArea(series, seriesData, isArea) {
-
-    let area = seriesData.isArea ?? isArea;
-
-    if(area == true) {
-        series.areaStyle = {};
-    }
-
-}
 //#endregion
 
 function setResizeEvent(lineChartElement, lineChart) {

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

 <div class="chart-container">
-    <div class="chart has-fixed-height LimitlessLineChart"
-         charts="{{ $charts }}"
-         titles="{{ json_encode($titles) }}"
+    <div class="chart has-fixed-height LimitlessBarChart"
+         title="{{ $title }}"
          colors="{{ json_encode($colors) }}"
-         point-values="{{ $pointValues }}"
-         boundary-gap="{{ $boundaryGap }}"
+         bar-values="{{ $barValues }}"
          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 }}"
+         raw="{{ json_encode(json_decode($raw)) }}"
     >
     </div>
 </div>
\ No newline at end of file

src/Views/Limitless/Barchart/Config.php

@@ -63,16 +63,12 @@
         */
         public function barChart($parameters)
         {
-            return View('Limitless::Barchart.barChart')
-            ->withCharts($parameters['charts'] ?? 1)
-            ->withTitles($parameters['titles'] ?? null)
+            return View('Limitless::Barchart.BarChart')
+            ->withTitle($parameters['title'] ?? null)
             ->withColors($parameters['colors'] ?? null)
-            ->withPointValues($parameters['point-values'] ?? false)
-            ->withBoundaryGap($parameters['boundary-gap'] ?? true)
+            ->withBarValues($parameters['bar-values'] ?? false)
             ->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)

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

@@ -7,7 +7,7 @@
 
         // 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'];
+        $series = ['ONC', 'APR', 'PHX', 'BRG'];
 
         $seriesData = [];
         foreach ($series as $s) {
@@ -43,21 +43,27 @@
     @endphp
 
     @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
-        @Limitless::LineChart([
+        @Limitless::BarChart([
+            'mark-line' => 'average',
             'categories' => $categories,
             'series' => $seriesData,
         ])
     @Limitless::CardStop
 
-    @Limitless::CardStart(['title' => "Chart 2  (raw)", 'icon' => 'icon-info22' ] )
-        @Limitless::LineChart([
-            'raw' => $rawData
+    @Limitless::CardStart(['title' => "Stacked Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'stacked' => true,
+            'categories' => $categories,
+            'series' => $seriesData,
         ])
     @Limitless::CardStop
 
-{{--    @Limitless::CardStart(['title' => "Chart 3", 'icon' => 'icon-info22' ] )--}}
-{{--        @Limitless::LineChartStart--}}
-{{--        @Limitless::LineChartStop--}}
-{{--    @Limitless::CardStop--}}
+    @Limitless::CardStart(['title' => "Stacked Setup", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'stacked' => true,
+            'categories' => $categories,
+            'series' => $seriesData,
+        ])
+    @Limitless::CardStop
 
 @stop

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

@@ -144,7 +144,7 @@
         ])
     @Limitless::CardStop
 
-    @Limitless::CardStart(['title' => "Area Setup", 'icon' => 'icon-info22' ] )
+    @Limitless::CardStart(['title' => "Stacked Area Setup", 'icon' => 'icon-info22' ] )
         @Limitless::LineChart([
             'is-area' => true,
             'stacked' => true,