SERV-2286 - data chart manager object (series & categories implemented) WIP

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

@@ -28,7 +28,10 @@ function init_chart(chartId) {
     if (chartElement) {
 
         let elementObject = $(chartElement);
-        let numberOfCharts = elementObject.attr('charts') ?? 1;
+
+        let objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null;
+
+        let numberOfCharts = (objectData && objectData.charts) ?? elementObject.attr('charts') ?? 1;
         set_chart_height(numberOfCharts, chartElement)
 
         let chartInstance = echarts.init(chartElement);
@@ -41,7 +44,7 @@ function init_chart(chartId) {
             fontSize: 15
         });
 
-        set_data(elementObject, numberOfCharts, function(options) {
+        set_data(objectData, elementObject, numberOfCharts, function(options) {
             chartInstance.hideLoading();
             chartInstance.setOption(options);
             setResizeEvent(chartElement, chartInstance);
@@ -49,7 +52,7 @@ function init_chart(chartId) {
     }
 }
 
-function set_data(elementObject, numberOfCharts, callback) {
+function set_data(objectData, elementObject, numberOfCharts, callback) {
 
     setTimeout(function() {
 
@@ -79,9 +82,11 @@ function set_data(elementObject, numberOfCharts, callback) {
             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;
+            // priority is objectData.
+            let categories = (objectData && objectData.categories) ?? JSON.parse(elementObject.attr('categories')) ?? null;
+            let series = (objectData && objectData.series) ?? JSON.parse(elementObject.attr('series')) ?? null;
+
             let seriesNames = series && series.map(function(item){ return item.name });
             let seriesObject = setSeries(series, elementObject);
 
@@ -226,8 +231,6 @@ function setXAxis(categories, boundaryGap = true, numberOfCharts = 1) {
         xAxisArray.push(x);
     }
 
-    console.log('xaxisarray', xAxisArray);
-
     return xAxisArray;
 }
 
@@ -314,8 +317,6 @@ function setTitles(titles, numberOfCharts = 1) {
         arrayTitles.push(title);
     }
 
-    console.log('titles', arrayTitles);
-
     return arrayTitles;
 }
 
@@ -388,8 +389,6 @@ function setGrid(showDataZoom = false, numberOfCharts = 1) {
         arrayGrids.push(grid);
     }
 
-    console.log('grids', arrayGrids);
-
     return arrayGrids;
 }
 

src/Views/Limitless/Linechart/DataManager/ChartDataManager.php → src/Views/Limitless/Linechart/ChartManager/ChartDataManager.php

 <?php
-namespace Ceetrox\Sidekick\Views\Limitless\Linechart\DataManager;
+namespace Ceetrox\Sidekick\Views\Limitless\Linechart\ChartManager;
 
 Class ChartDataManager {
 
@@ -58,6 +58,7 @@ Class ChartDataManager {
     {
         $data['series'] = $this->getSeries()->toArray();
         $data['categories'] = $this->getCategories();
+        $data['charts'] = $this->getSeries()->numberOfCharts();
 
         return $data;
     }

src/Views/Limitless/Linechart/DataManager/Series.php → src/Views/Limitless/Linechart/ChartManager/Series.php

 <?php
-namespace Ceetrox\Sidekick\Views\Limitless\Linechart\DataManager;
+namespace Ceetrox\Sidekick\Views\Limitless\Linechart\ChartManager;
 
 use Illuminate\Support\Collection;
 
 class Series extends Collection
 {
-    /**
-     * @return array
-     */
     public function toArray(): array
     {
         $return = [];
@@ -18,5 +15,12 @@ class Series extends Collection
         return $return;
     }
 
+    public function numberOfCharts(): int
+    {
+        $count = $this->unique(function (SeriesData $entry) {
+           return $entry->getIndex();
+        })->count();
 
+        return $count;
+    }
 }

src/Views/Limitless/Linechart/DataManager/SeriesData.php → src/Views/Limitless/Linechart/ChartManager/SeriesData.php

 <?php
-namespace Ceetrox\Sidekick\Views\Limitless\Linechart\DataManager;
+namespace Ceetrox\Sidekick\Views\Limitless\Linechart\ChartManager;
 
 class SeriesData
 {
@@ -23,7 +23,7 @@ class SeriesData
         return $this->categoryValues;
     }
 
-    private function getIndex() : int
+    public function getIndex() : int
     {
         return $this->index;
     }

src/Views/Limitless/Linechart/Config.php

@@ -77,6 +77,7 @@
             ->withMarkLine($parameters['mark-line'] ?? null)
             ->withCategories($parameters['categories'] ?? null)
             ->withSeries($parameters['series'] ?? null)
+            ->withData($parameters['data'] ?? null)
             ->withRaw($parameters['raw'] ?? null);
 
         }

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

@@ -5,8 +5,8 @@
 
     @php
 
-        $chartDataManager = \Ceetrox\Sidekick\Views\Limitless\Linechart\DataManager\ChartDataManager::getInstance();
-        // or $chartDataManager = new \Ceetrox\Sidekick\Views\Limitless\Linechart\DataManager\ChartDataManager();
+        $chartDataManager = \Ceetrox\Sidekick\Views\Limitless\Linechart\ChartManager\ChartDataManager::getInstance();
+        // or $chartDataManager = new \Ceetrox\Sidekick\Views\Limitless\Linechart\ChartManager\ChartDataManager();
 
          // accepts string or array.
         $chartDataManager->addCategories('Mon');
@@ -16,17 +16,21 @@
         $sd->setName('ONC');
         $sd->setCategoryValues(100);
         $sd->setCategoryValues([200, 300, 400, 500]);
+        $sd->setIndex(0); // 0 as default.
 
         $chartDataManager->addSeries($sd);
 
         $sd = $chartDataManager::getSeriesDataInstance();
         $sd->setName('APR');
         $sd->setCategoryValues([10,20,30,40,50]);
+        $sd->setIndex(0);
 
         $chartDataManager->addSeries($sd);
 
-        $output = $chartDataManager->toArray();
+        $dataObject = $chartDataManager->toJson();
+
         // if data manager object is used, should only pass the main object to the chart parameter 'data'
+        // automatically detects if the chart is multiple by number of unique indexes.
 
         // sample backend data
         $categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -157,10 +161,16 @@
 
     @endphp
 
+    @Limitless::CardStart(['title' => "Basic Setup using Chart Manager Object", 'icon' => 'icon-info22' ] )
+        @Limitless::LineChart([
+            'data' => $dataObject
+        ])
+    @Limitless::CardStop
+
     @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
         @Limitless::LineChart([
-            'categories' => $output['categories'],
-            'series' => $output['series'],
+            'categories' => $categories,
+            'series' => $seriesData,
         ])
     @Limitless::CardStop
 
@@ -168,8 +178,7 @@
         @Limitless::LineChart([
             'is-area' => true,
             'stacked' => true,
-            'categories' => $categories,
-            'series' => $seriesData,
+            'data' => $dataObject
         ])
     @Limitless::CardStop
 

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

@@ -14,6 +14,7 @@
          @if($markLine != null) mark-line="{{ $markLine }}" @endif
          categories="{{ json_encode($categories) }}"
          series="{{ json_encode($series) }}"
+         data="{{ $data }}"
          raw="{{ json_encode(json_decode($raw)) }}"
     >
     </div>