SERV-2286 - refactor js file

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

+//#region MAIN FUNCTIONS
 function set_chart() {
 
     let chartCounter = 0;
@@ -14,7 +15,6 @@ function set_chart() {
 
 }
 
-// main function
 function init_chart(chartId) {
 
     // Define element
@@ -24,21 +24,7 @@ function init_chart(chartId) {
 
         let elementObject = $(lineChartElement);
         let numberOfCharts = elementObject.attr('charts') ?? 1;
-        let multichart = (numberOfCharts > 1);
-
-        let rawData = elementObject.attr('raw') ? JSON.parse(elementObject.attr('raw')) : null;
-
-        console.log('raw', rawData);
-
-        console.log(numberOfCharts);
-        console.log(multichart);
-
-        // adjust container height before initialising the chart.
-        if (multichart) {
-            let height = (numberOfCharts * 240); // (chart height = 160 | charts spacing = 80)
-            lineChartElement.style.height = height + 'px';
-            console.log('adjusted container height', height + 'px');
-        }
+        set_chart_height(numberOfCharts, lineChartElement)
 
         let lineChart = echarts.init(lineChartElement);
 
@@ -50,7 +36,7 @@ function init_chart(chartId) {
             fontSize: 15
         });
 
-        set_data(elementObject, multichart, numberOfCharts, rawData, function(options) {
+        set_data(elementObject, numberOfCharts, function(options) {
             lineChart.hideLoading();
             lineChart.setOption(options);
             setResizeEvent(lineChartElement, lineChart);
@@ -58,53 +44,34 @@ function init_chart(chartId) {
     }
 }
 
-function set_data(elementObject, multichart, numberOfCharts, rawData, callback) {
+function set_data(elementObject, numberOfCharts, callback) {
 
     setTimeout(function() {
 
-        let options;
         const defaultColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#a1887f', '#ffb980', '#2ec7c9','#b6a2de','#5ab1ef', '#d87a80', '#ea7ccc'];
+        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 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 isArea = (elementObject.attr('is-area') == 'true' || elementObject.attr('is-area') == 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') ?? null;
-            // 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, isArea);
-
-            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('is-area', isArea);
-            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);
-
+            let seriesObject = setSeries(series, elementObject);
 
             // Options
             options = {
@@ -151,28 +118,44 @@ function set_data(elementObject, multichart, numberOfCharts, rawData, callback)
             options = rawData;
         }
 
-
         callback(options);
 
     }, 1000);
 
 }
 
-// sub functions
-function setSeries(seriesData, showPointValues  = false, markLineDataType = null, stack = false, isArea = false) {
+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
+function setSeries(seriesData, elementObject) {
 
     // 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
+
     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,
+            stack: seriesData[i].stacked ?? stacked,
             smooth: true,
             symbol: 'circle',
             symbolSize: 7,
@@ -190,31 +173,8 @@ function setSeries(seriesData, showPointValues  = false, markLineDataType = null
             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),
-                }]
-            };
-
-        }
-
-        let area = seriesData[i].isArea ?? isArea;
-
-        if(area == true) {
-            series.areaStyle = {};
-        }
+        setMarkLine(series, seriesData[i], markLine);
+        setArea(series, seriesData[i], isArea);
 
         seriesArray.push(series);
 
@@ -446,6 +406,41 @@ function setAxisPointer(multichart = false) {
 
     return pointer;
 }
+//#endregion
+
+//#region SUB FUNCTIONS FOR SERIES
+function setMarkLine(series, seriesData, markLine) {
+    if(seriesData.markLine != undefined && ['min', 'max', 'average'].includes(markLine)) {
+
+        series.markLine = {
+            data: [{
+                type: seriesData.markLine,
+                name: seriesData.markLine[0].toUpperCase() + seriesData.markLine.substring(1),
+            }]
+        };
+
+    } else if(markLine != null && ['min', 'max', 'average'].includes(markLine)) {
+
+        series.markLine = {
+            data: [{
+                type: markLine,
+                name: markLine[0].toUpperCase() + markLine.substring(1),
+            }]
+        };
+
+    }
+}
+
+function setArea(series, seriesData, isArea) {
+
+    let area = seriesData.isArea ?? isArea;
+
+    if(area == true) {
+        series.areaStyle = {};
+    }
+
+}
+//#endregion
 
 function setResizeEvent(lineChartElement, lineChart) {
     // Resize function
@@ -467,7 +462,6 @@ function setResizeEvent(lineChartElement, lineChart) {
     });
 }
 
-
 $(document).ready(function() {
 
     if (typeof echarts == 'undefined') {

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

@@ -14,7 +14,7 @@
             $data['name'] = $s;
             $dataArray = [];
             foreach ($categories as $c) {
-               $dataArray[] =  rand(1,100);
+               $dataArray[] = rand(1,100);
             }
             $data['data'] = $dataArray;
             $data['index'] = 0; //rand(0,1);
@@ -49,11 +49,10 @@
             'charts' => 1,
             'colors' => ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#a1887f', '#ffb980', '#2ec7c9','#b6a2de','#5ab1ef', '#d87a80', '#ea7ccc'],
             'point-values' => true,
-            'boundary-gap' => false,
+            'boundary-gap' => true,
             'inverted' => false,
             'data-zoom' => true,
             'stacked' => false,
-            'is-area' => true,
             'animation-duration' => 500,
             'y-axis-label-value-format' => '{value} users',
             'mark-line' => 'average',