SERV-2286 - line chart element. (on multichart)

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

@@ -11,7 +11,7 @@ function init_line_chart() {
     if(lineChartElement) {
 
         // variables (this will be set by user)
-        let titles = ['A', 'B', 'C'];
+        let titles = ['A', 'B', 'C', 'D'];
         let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
         let animationDuration = 750;
         let seriesNames = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
@@ -26,6 +26,9 @@ function init_line_chart() {
         let series = [];
 
         seriesNames.forEach(function (val, idx,arr) {
+
+            let chartindex = Math.floor(Math.random() * titles.length);
+
             series.push(setLineChartSeries(val, [
                 Math.floor(Math.random() * 100),
                 Math.floor(Math.random() * 100),
@@ -34,39 +37,33 @@ function init_line_chart() {
                 Math.floor(Math.random() * 100),
                 Math.floor(Math.random() * 100),
                 Math.floor(Math.random() * 100),
-            ], showPointValues, markLine, stacked, Math.random() < 0.5)); // for current testing - Math.random() * 3
+            ], showPointValues, markLine, stacked, chartindex));
         });
 
 
-        // how to know if multichart?
-        // if title param is multiple.
-        // if multichart.
-        // new chart title top = 240 * chart index.
-        // new chart grid top = prev top + 160 (chart height) + 80 (margin of every chart)
-        // charts container height adjustment
-        // start with 440px for the first multichart then current height + 240 for the preceeding.
-        // add x and y axis
-        // add series for the new chart.
-
+        // multichart is true if title param is multiple.
         // legends and datazoom are disabled if multichart.
 
         let multichart = (titles && titles.length > 1);
+        let numberOfCharts = titles ? titles.length : 1;
 
         // adjust container height before initialising the chart.
         if(multichart) {
-            let height = 440 + (titles.length * 240); // 440px initial height of container if multichart + (chart height = 160 | charts spacing = 80))
+            let height = (titles.length * 240); // (chart height = 160 | charts spacing = 80)
             lineChartElement.style.height = height + 'px';
             console.log('adjusted container height', height + 'px');
         }
 
 
+
+
         let lineChart = echarts.init(lineChartElement);
 
         // Options
         lineChart.setOption({
 
             // Chart title
-            title: setTitles(titles, multichart),
+            title: setTitles(titles),
 
             // Define colors
             color: color,
@@ -78,7 +75,7 @@ function init_line_chart() {
             animationDuration: animationDuration,
 
             // Setup grid
-            grid: setGrid(showDataZoom, titles ? titles.length : 1),
+            grid: setGrid(showDataZoom, numberOfCharts),
 
             // Add legend
             legend: setLegend(seriesNames, multichart),
@@ -87,10 +84,10 @@ function init_line_chart() {
             tooltip: setTooltip(),
 
             // Horizontal axis
-            xAxis: inverted ? setYAxis(yAxisLabelValueFormat, multichart) : setXAxis(xAxisData, boundaryGap, multichart),
+            xAxis: inverted ? setYAxis(yAxisLabelValueFormat, numberOfCharts) : setXAxis(xAxisData, boundaryGap, numberOfCharts),
 
             // Vertical axis
-            yAxis: inverted ? setXAxis(xAxisData, boundaryGap, multichart) : setYAxis(yAxisLabelValueFormat, multichart),
+            yAxis: inverted ? setXAxis(xAxisData, boundaryGap, numberOfCharts) : setYAxis(yAxisLabelValueFormat, numberOfCharts),
 
             // Axis pointer
             axisPointer: setAxisPointer(multichart),
@@ -132,77 +129,75 @@ function setLineChartSeries(name, data = [], showPointValues  = false, markLineD
                 borderWidth: 2
             }
         },
-    }
-
-    // modify this
-    if(index == 1) {
-        series.xAxisIndex = index;
-        series.yAxisIndex = index;
+        xAxisIndex: index,
+        yAxisIndex: index
     }
 
     return series;
 }
 
-function setXAxis(xAxisData, boundaryGap = true, multichart = false) {
-    let xAxisArray = [{
-        type: 'category',
-        boundaryGap: boundaryGap,
-        data: xAxisData,
-        axisLabel: {
-            color: '#fff'
-        },
-        axisLine: {
-            lineStyle: {
-                color: 'rgba(255,255,255,0.25)'
-            }
-        },
-        splitLine: {
-            lineStyle: {
-                color: 'rgba(255,255,255,0.1)'
-            }
-        }
-    }];
+function setXAxis(xAxisData, boundaryGap = true, numberOfCharts = 1) {
 
-    if(multichart) {
-        let index1 = Object.assign({}, xAxisArray[0]); // copy index 0
-        index1.gridIndex = 1;
+    let xAxisArray = [];
+    for (let i = 0; i < numberOfCharts; i++) {
+
+        let x = {
+            type: 'category',
+            boundaryGap: boundaryGap,
+            data: xAxisData,
+            axisLabel: {
+                color: '#fff'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.25)'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.1)'
+                }
+            },
+            gridIndex: i
+        };
 
-        xAxisArray.push(index1);
+        xAxisArray.push(x);
     }
 
     return xAxisArray;
 }
 
-function setYAxis(yAxisLabelValueFormat,  multichart = false) {
-    let yAxisArray = [{
-        type: 'value',
-        axisLabel: {
-            formatter: yAxisLabelValueFormat,
-            color: '#fff'
-        },
-        axisLine: {
-            lineStyle: {
-                color: 'rgba(255,255,255,0.25)'
-            }
-        },
-        splitLine: {
-            lineStyle: {
-                color: 'rgba(255,255,255,0.1)'
-            }
-        },
-        splitArea: {
-            show: true,
-            areaStyle: {
-                color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
-            }
-        }
-    }];
+function setYAxis(yAxisLabelValueFormat,  numberOfCharts = 1) {
 
-    if(multichart) {
-        let index1 = Object.assign({}, yAxisArray[0]); // copy index 0
-        index1.gridIndex = 1;
+    let yAxisArray = [];
+    for (let i = 0; i < numberOfCharts; i++) {
+
+        let y = {
+            type: 'value',
+            axisLabel: {
+                formatter: yAxisLabelValueFormat,
+                color: '#fff'
+            },
+            axisLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.25)'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.1)'
+                }
+            },
+            splitArea: {
+                show: true,
+                areaStyle: {
+                    color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
+                }
+            },
+            gridIndex: i
+        };
 
-        yAxisArray.push(index1);
+        yAxisArray.push(y);
     }
 
     return yAxisArray;
@@ -219,7 +214,7 @@ function setLegend(legendData, multichart = false) {
     }
 }
 
-function setTitles(titles, multichart = false) {
+function setTitles(titles) {
 
     let arrayTitles = [];
     titles.forEach(function(val, idx, arr) {
@@ -229,7 +224,7 @@ function setTitles(titles, multichart = false) {
         };
 
         // if single else multichart
-        if(idx == 0 && !multichart) {
+        if(idx == 0 && arr.length == 1) {
             title.textStyle = {
                 color: '#fff'
             };