SERV-2286 - link chart data manager object attributes with javascript chart initialization WIP

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

@@ -27,11 +27,12 @@ function init_chart(chartId) {
 
     if (chartElement) {
 
+        // elementObject for the charts parameters
+        // objectData for the chart data manager
         let elementObject = $(chartElement);
-
         let objectData = elementObject.attr('data') ? JSON.parse(elementObject.attr('data')) : null;
 
-        let numberOfCharts = (objectData && objectData.charts) ?? elementObject.attr('charts') ?? 1;
+        let numberOfCharts = objectData?.charts ?? (elementObject.attr('charts') ?? 1);
         set_chart_height(numberOfCharts, chartElement)
 
         let chartInstance = echarts.init(chartElement);
@@ -52,6 +53,7 @@ function init_chart(chartId) {
     }
 }
 
+// setting the data first checks for the data chart manager object and if not set then will use the chart element parameters. else defaults.
 function set_data(objectData, elementObject, numberOfCharts, callback) {
 
     setTimeout(function() {
@@ -67,30 +69,30 @@ function set_data(objectData, elementObject, numberOfCharts, callback) {
         console.log(objectData);
 
         let options;
-        let rawData = (objectData && objectData.rawData) ?? (elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null);
+        let rawData = objectData?.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 titles = objectData?.titles ?? (JSON.parse(elementObject.attr('titles')) ?? []);
+            let colors = objectData?.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 boundaryGap = objectData?.boundaryGap ?? (elementObject.attr('boundary-gap') == 'true' || elementObject.attr('boundary-gap') == true); // default true
+            let inverted = objectData?.inverted ?? (elementObject.attr('inverted') == 'true' || elementObject.attr('inverted') == true); // default false
+            let showDataZoom = objectData?.dataZoom ?? (elementObject.attr('data-zoom') == 'true' || elementObject.attr('data-zoom') == true); // default false
 
-            let animationDuration = elementObject.attr('animation-duration') ?? 750;
+            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 yAxisLabelValueFormat = objectData?.yAxisLabelValueFormat ?? (elementObject.attr('y-axis-label-value-format') ?? 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 categories = objectData?.categories ?? (JSON.parse(elementObject.attr('categories')) ?? null);
+            let series = objectData?.series ?? (JSON.parse(elementObject.attr('series')) ?? null);
 
             let seriesNames = series && series.map(function(item){ return item.name });
-            let seriesObject = setSeries(series, elementObject);
+            let seriesObject = setSeries(series, elementObject, objectData);
 
             // Options
             options = {
@@ -156,17 +158,19 @@ function set_chart_height(numberOfCharts, chartElement) {
 //#endregion
 
 //#region FUNCTIONS FOR OPTIONS
-function setSeries(seriesData, elementObject) {
 
+function setSeries(seriesData, elementObject, objectData) {
+
+    // setting the data first checks for the data chart manager object and if not set then will use the chart element parameters. else defaults.
     // 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
+    let showPointValues = objectData?.pointValues ?? ((elementObject.attr('point-values') == 'true' || elementObject.attr('point-values') == true) ?? false);
+    let stacked = objectData?.stacked ?? ((elementObject.attr('stacked') == 'true' || elementObject.attr('stacked') == true) ?? false);
+    let isArea = objectData?.isArea ?? ((elementObject.attr('is-area') == 'true' || elementObject.attr('is-area') == true) ?? false);
+    let markLine = objectData?.markLine ?? (elementObject.attr('mark-line') ?? null); // min | max | average
 
     for(let i = 0; i < seriesData.length; i++) {
 

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

@@ -25,18 +25,18 @@ Class ChartDataManager {
     {
         $this->categories = [];
         $this->series = new Series();
-        $this->numberOfCharts = 1;
+        $this->numberOfCharts = null;
         $this->colors = [];
-        $this->hasBoundaryGap = false;
-        $this->isInverted = false;
-        $this->hasDataZoom = false;
-        $this->animationDuration = 750;
+        $this->hasBoundaryGap = null;
+        $this->isInverted = null;
+        $this->hasDataZoom = null;
+        $this->animationDuration = null;
         $this->yAxisLabelValueFormat = null;
         $this->rawData = null;
 
-        $this->showPointValues = false;
-        $this->isStacked = false;
-        $this->isArea = false;
+        $this->showPointValues = null;
+        $this->isStacked = null;
+        $this->isArea = null;
         $this->markLine = null;
     }
 
@@ -75,22 +75,22 @@ Class ChartDataManager {
         return $this->colors;
     }
 
-    private function getHasBoundaryGap() : bool
+    private function getHasBoundaryGap() : ?bool
     {
         return $this->hasBoundaryGap;
     }
 
-    private function getIsInverted() : bool
+    private function getIsInverted() : ?bool
     {
         return $this->isInverted;
     }
 
-    private function getHasDataZoom() : bool
+    private function getHasDataZoom() : ?bool
     {
         return $this->hasDataZoom;
     }
 
-    private function getAnimationDuration() : int
+    private function getAnimationDuration() : ?int
     {
         return $this->animationDuration;
     }
@@ -105,17 +105,17 @@ Class ChartDataManager {
         return $this->rawData;
     }
 
-    private function getShowPointValues() : bool
+    private function getShowPointValues() : ?bool
     {
         return $this->showPointValues;
     }
 
-    private function getIsStacked() : bool
+    private function getIsStacked() : ?bool
     {
         return $this->isStacked;
     }
 
-    private function getIsArea() : bool
+    private function getIsArea() : ?bool
     {
         return $this->isArea;
     }
@@ -221,6 +221,7 @@ Class ChartDataManager {
     public function addSeries(SeriesData $series) : ChartDataManager
     {
         $this->getSeries()->push($series);
+        $this->numberOfCharts = $this->getSeries()->numberOfCharts();
         return $this;
     }
 
@@ -231,22 +232,27 @@ Class ChartDataManager {
 
     public function toArray(): array
     {
-        $data['series']                 = $this->getSeries()->toArray();
-        $data['categories']             = $this->getCategories();
-        $data['charts']                 = $this->getNumberOfCharts();
-        $data['titles']                 = $this->getTitles();
-        $data['colors']                 = $this->getColors();
-        $data['boundaryGap']            = $this->getHasBoundaryGap();
-        $data['inverted']               = $this->getIsInverted();
-        $data['dataZoom']               = $this->getHasDataZoom();
-        $data['animationDuration']      = $this->getAnimationDuration();
-        $data['yAxisLabelValueFormat']  = $this->getYAxisLabelValueFormat();
-        $data['raw']                    = $this->getRawData() == null ? null : json_encode(json_decode($this->getRawData()));
-
-        $data['pointValues']            = $this->getShowPointValues();
-        $data['stacked']                = $this->getIsStacked();
-        $data['isArea']                 = $this->getIsArea();
-        $data['markLine']               = $this->getMarkLine();
+        // set if conditions so we can only pass attributes that are set.
+        // if attributes are not set then we can check and use the manual parameters of the charts.
+
+        if(!is_null($this->numberOfCharts))             $data['charts'] = $this->numberOfCharts;
+
+        if(count($this->series) > 0)                    $data['series'] = $this->getSeries()->toArray();
+        if(count($this->categories) > 0)                $data['categories'] = $this->getCategories();
+        if(!is_null($this->titles))                     $data['titles'] = $this->getTitles();
+        if(count($this->colors) > 0)                    $data['colors'] = $this->getColors();
+
+        if(!is_null($this->hasBoundaryGap))             $data['boundaryGap'] = $this->getHasBoundaryGap();
+        if(!is_null($this->isInverted))                 $data['inverted'] = $this->getIsInverted();
+        if(!is_null($this->hasDataZoom))                $data['dataZoom'] = $this->getHasDataZoom();
+        if(!is_null($this->animationDuration))          $data['animationDuration'] = $this->getAnimationDuration();
+        if(!is_null($this->yAxisLabelValueFormat))      $data['yAxisLabelValueFormat'] = $this->getYAxisLabelValueFormat();
+        if(!is_null($this->rawData))                    $data['raw'] = json_encode(json_decode($this->getRawData()));
+
+        if(!is_null($this->showPointValues))            $data['pointValues'] = $this->getShowPointValues();
+        if(!is_null($this->isStacked))                  $data['stacked'] = $this->getIsStacked();
+        if(!is_null($this->isArea))                     $data['isArea'] = $this->getIsArea();
+        if(!is_null($this->markLine))                   $data['markLine'] = $this->getMarkLine();
 
         return $data;
     }

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

@@ -17,10 +17,8 @@ class Series extends Collection
 
     public function numberOfCharts(): int
     {
-        $count = $this->unique(function (SeriesData $entry) {
+        return $this->unique(function (SeriesData $entry) {
            return $entry->getIndex();
         })->count();
-
-        return $count;
     }
 }

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

@@ -27,6 +27,12 @@
 
         $chartDataManager->addSeries($sd);
 
+        $chartDataManager->setHasDataZoom(true);
+        $chartDataManager->setHasBoundaryGap(false);
+
+        $chartDataManager->setIsStacked(true);
+        $chartDataManager->setIsArea(true);
+
         $dataObject = $chartDataManager->toJson();
 
         // if data manager object is used, should only pass the main object to the chart parameter 'data'