SERV-2286 - bar chart manager object WIP

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

@@ -60,24 +60,32 @@ function set_data(elementObject, callback) {
         ];
 
         let options;
-        let rawData = elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null;
+
+        let objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null;
+        let rawData = objectData?.rawData ?? (elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null);
 
         if(rawData == null) {
 
             // variables (this will be set by user)
-            let title = elementObject.attr('title') ?? null;
-            let colors = JSON.parse(elementObject.attr('colors')) ?? defaultColors;
 
-            let horizontal = (elementObject.attr('horizontal') == 'true' || elementObject.attr('horizontal') == true); // default false
+            // unique attributes of bar chart
+            let title = objectData?.title ?? (elementObject.attr('title') ?? null);
+            let horizontal = objectData?.horizontal ?? (elementObject.attr('horizontal') == 'true' || elementObject.attr('horizontal') == true); // default false
+            let showBarValues = objectData?.barValues ?? ((elementObject.attr('bar-values') == 'true' || elementObject.attr('bar-values') == true) ?? false); // series data option
 
-            let animationDuration = elementObject.attr('animation-duration') ?? 750;
+            let colors =  objectData?.colors ?? (JSON.parse(elementObject.attr('colors')) ?? defaultColors);
+            let animationDuration = objectData?.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 yAxisLabelValueFormat = objectData?.yAxisLabelValueFormat ?? (elementObject.attr('y-axis-label-value-format') ?? null);
+
+            let stacked = objectData?.stacked ?? ((elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false); // series data option
+            let markLine = objectData?.markLine ?? (elementObject.attr('mark-line') ?? null); // min | max | average - series data option
+
+            let categories = objectData?.categories ?? (JSON.parse(elementObject.attr('categories')) ?? null);
+            let series = objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null);
 
-            let series = JSON.parse(elementObject.attr('series')) ?? null;
             let seriesNames = series && series.map(function(item){ return item.name });
-            let seriesObject = setSeries(series, elementObject, horizontal);
+            let seriesObject = setSeries(series, stacked, markLine, showBarValues, horizontal);
 
             // Options
             options = {
@@ -125,17 +133,13 @@ function set_data(elementObject, callback) {
 //#endregion
 
 //#region FUNCTIONS FOR OPTIONS
-function setSeries(seriesData, elementObject, horizontal = false) {
+function setSeries(seriesData, stacked, markLine, showBarValues, horizontal = false) {
 
     // uses series options if available else use global options.
     let seriesArray = [];
 
     if(!seriesData || seriesData.length == 0) return [];
 
-    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 markLine = elementObject.attr('mark-line') ?? null; // min | max | average
-
     for(let i = 0; i < seriesData.length; i++) {
 
         let series = {

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

@@ -11,6 +11,7 @@
          categories="{{ json_encode($categories) }}"
          series="{{ json_encode($series) }}"
          raw="{{ json_encode(json_decode($raw)) }}"
+         data="{{ $data }}"
     >
     </div>
 </div>
\ No newline at end of file

src/Views/Limitless/Barchart/Config.php

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

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

@@ -5,6 +5,33 @@
 
     @php
 
+        $chartDataManager = SidekickChartDataManager::getInstance();
+        // or $chartDataManager = new SidekickChartDataManager();
+
+         // accepts string or array.
+        $chartDataManager->addCategories('Mon');
+        $chartDataManager->addCategories(['Tue', 'Wed', 'Thu', 'Fri']);
+
+        $sd = $chartDataManager::getSeriesDataInstance();
+        $sd->setName('ONC');
+        $sd->setCategoryValues(10);
+        $sd->setCategoryValues([100, 50, 80, 60]);
+        $sd->setIndex(0); // 0 as default.
+
+        $chartDataManager->addSeries($sd);
+
+        $sd = $chartDataManager::getSeriesDataInstance();
+        $sd->setName('APR');
+        $sd->setCategoryValues([90,40,70,20,90]);
+        $sd->setIndex(0);
+
+        $chartDataManager->addSeries($sd);
+
+//        $chartDataManager->setIsStacked(false);
+//        $chartDataManager->setShowPointValues(true);
+
+        $dataObject = $chartDataManager->toJson();
+
         // sample backend data
         $categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
         $series = ['ONC', 'APR', 'PHX', 'BRG'];
@@ -192,6 +219,12 @@
 
     @endphp
 
+    @Limitless::CardStart(['title' => "Basic Setup using Chart Manager Object", 'icon' => 'icon-info22' ] )
+        @Limitless::BarChart([
+            'data' => $dataObject
+        ])
+    @Limitless::CardStop
+
     @Limitless::CardStart(['title' => "Basic Setup", 'icon' => 'icon-info22' ] )
         @Limitless::BarChart([
             'title' => 'Basic',