SERV-2286 - refactor charts

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

@@ -18,15 +18,15 @@ function set_chart() {
 function init_chart(chartId) {
 
     // Define element
-    let lineChartElement = document.getElementById(chartId);
+    let chartElement = document.getElementById(chartId);
 
-    if (lineChartElement) {
+    if (chartElement) {
 
-        let elementObject = $(lineChartElement);
+        let elementObject = $(chartElement);
 
-        let lineChart = echarts.init(lineChartElement);
+        let chartInstance = echarts.init(chartElement);
 
-        lineChart.showLoading({
+        chartInstance.showLoading({
             text: 'LADE DATEN',
             maskColor: '#353f53',
             color: '#fff',
@@ -35,9 +35,9 @@ function init_chart(chartId) {
         });
 
         set_data(elementObject, function(options) {
-            lineChart.hideLoading();
-            lineChart.setOption(options);
-            setResizeEvent(lineChartElement, lineChart);
+            chartInstance.hideLoading();
+            chartInstance.setOption(options);
+            setResizeEvent(chartElement, chartInstance);
         })
     }
 }
@@ -295,10 +295,10 @@ function setMarkLine(series, seriesData, markLine) {
 }
 //#endregion
 
-function setResizeEvent(lineChartElement, lineChart) {
+function setResizeEvent(chartElement, chartInstance) {
     // Resize function
     let triggerChartResize = function() {
-        lineChartElement && lineChart.resize();
+        chartElement && chartInstance.resize();
     };
 
     // On sidebar width change

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

@@ -18,17 +18,17 @@ function set_chart() {
 function init_chart(chartId) {
 
     // Define element
-    let lineChartElement = document.getElementById(chartId);
+    let chartElement = document.getElementById(chartId);
 
-    if (lineChartElement) {
+    if (chartElement) {
 
-        let elementObject = $(lineChartElement);
+        let elementObject = $(chartElement);
         let numberOfCharts = elementObject.attr('charts') ?? 1;
-        set_chart_height(numberOfCharts, lineChartElement)
+        set_chart_height(numberOfCharts, chartElement)
 
-        let lineChart = echarts.init(lineChartElement);
+        let chartInstance = echarts.init(chartElement);
 
-        lineChart.showLoading({
+        chartInstance.showLoading({
             text: 'LADE DATEN',
             maskColor: '#353f53',
             color: '#fff',
@@ -37,9 +37,9 @@ function init_chart(chartId) {
         });
 
         set_data(elementObject, numberOfCharts, function(options) {
-            lineChart.hideLoading();
-            lineChart.setOption(options);
-            setResizeEvent(lineChartElement, lineChart);
+            chartInstance.hideLoading();
+            chartInstance.setOption(options);
+            setResizeEvent(chartElement, chartInstance);
         })
     }
 }
@@ -125,15 +125,15 @@ function set_data(elementObject, numberOfCharts, callback) {
 
 }
 
-function set_chart_height(numberOfCharts, lineChartElement) {
+function set_chart_height(numberOfCharts, chartElement) {
 
     // 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';
+        chartElement.style.height = height + 'px';
     }
 
-    return lineChartElement;
+    return chartElement;
 }
 //#endregion
 
@@ -440,10 +440,10 @@ function setArea(series, seriesData, isArea) {
 }
 //#endregion
 
-function setResizeEvent(lineChartElement, lineChart) {
+function setResizeEvent(chartElement, chartInstance) {
     // Resize function
     let triggerChartResize = function() {
-        lineChartElement && lineChart.resize();
+        chartElement && chartInstance.resize();
     };
 
     // On sidebar width change