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

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

@@ -10,42 +10,63 @@ function init_line_chart() {
 
     if(lineChartElement) {
 
-        let lineChart = echarts.init(lineChartElement);
-
         // variables (this will be set by user)
-        let title = 'Usage';
+        let titles = ['A', 'B', 'C'];
         let color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc', '#a1887f'];
         let animationDuration = 750;
-        let legendData = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
+        let seriesNames = ['ONC', 'APR', 'SPR', 'PHX', 'SIG', 'BRG', 'MNT', 'SDK', 'OCT'];
         let xAxisData = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
         let yAxisLabelValueFormat = '{value}'; // ex '{value} users'  - https://echarts.apache.org/en/option.html#yAxis.axisLabel.formatter
         let showPointValues = false;
+        let boundaryGap = true;
         let inverted = false;
         let showDataZoom = true;
         let stacked = false;
         let markLine = 'average'; // min | max | average
         let series = [];
 
-
-        legendData.forEach(function (val, idx,arr) {
+        seriesNames.forEach(function (val, idx,arr) {
             series.push(setLineChartSeries(val, [
-                    Math.floor(Math.random() * 100),
-                    Math.floor(Math.random() * 100),
-                    Math.floor(Math.random() * 100),
-                    Math.floor(Math.random() * 100),
-                    Math.floor(Math.random() * 100),
-                    Math.floor(Math.random() * 100),
-                    Math.floor(Math.random() * 100),
-            ], showPointValues, markLine, stacked));
+                Math.floor(Math.random() * 100),
+                Math.floor(Math.random() * 100),
+                Math.floor(Math.random() * 100),
+                Math.floor(Math.random() * 100),
+                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
         });
 
 
+        // 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.
+
+        // legends and datazoom are disabled if multichart.
+
+        let multichart = (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))
+            lineChartElement.style.height = height + 'px';
+            console.log('adjusted container height', height + 'px');
+        }
+
+
+        let lineChart = echarts.init(lineChartElement);
 
         // Options
         lineChart.setOption({
 
             // Chart title
-            title: setTitle(title),
+            title: setTitles(titles, multichart),
 
             // Define colors
             color: color,
@@ -57,25 +78,25 @@ function init_line_chart() {
             animationDuration: animationDuration,
 
             // Setup grid
-            grid: setGrid(showDataZoom),
+            grid: setGrid(showDataZoom, titles ? titles.length : 1),
 
             // Add legend
-            legend: setLegend(legendData),
+            legend: setLegend(seriesNames, multichart),
 
             // Add tooltip
             tooltip: setTooltip(),
 
             // Horizontal axis
-            xAxis: inverted ? setYAxis(yAxisLabelValueFormat) : setXAxis(xAxisData),
+            xAxis: inverted ? setYAxis(yAxisLabelValueFormat, multichart) : setXAxis(xAxisData, boundaryGap, multichart),
 
             // Vertical axis
-            yAxis: inverted ? setXAxis(xAxisData) : setYAxis(yAxisLabelValueFormat),
+            yAxis: inverted ? setXAxis(xAxisData, boundaryGap, multichart) : setYAxis(yAxisLabelValueFormat, multichart),
 
             // Axis pointer
-            axisPointer: setAxisPointer(),
+            axisPointer: setAxisPointer(multichart),
 
             // Zoom control
-            dataZoom: setDataZoom(showDataZoom),
+            dataZoom: setDataZoom(showDataZoom, multichart),
 
             // Add series
             series: series
@@ -85,9 +106,9 @@ function init_line_chart() {
     }
 }
 
-function setLineChartSeries(name, data = [], showPointValues  = false, markLineDataType = null, stack = false) {
+function setLineChartSeries(name, data = [], showPointValues  = false, markLineDataType = null, stack = false, index = 0) {
 
-    return {
+    let series = {
         name: name,
         type: 'line',
         data: data,
@@ -110,14 +131,22 @@ function setLineChartSeries(name, data = [], showPointValues  = false, markLineD
             normal: {
                 borderWidth: 2
             }
-        }
+        },
     }
+
+    // modify this
+    if(index == 1) {
+        series.xAxisIndex = index;
+        series.yAxisIndex = index;
+    }
+
+    return series;
 }
 
-function setXAxis(xAxisData) {
-    return [{
+function setXAxis(xAxisData, boundaryGap = true, multichart = false) {
+    let xAxisArray = [{
         type: 'category',
-        boundaryGap: true,
+        boundaryGap: boundaryGap,
         data: xAxisData,
         axisLabel: {
             color: '#fff'
@@ -132,11 +161,20 @@ function setXAxis(xAxisData) {
                 color: 'rgba(255,255,255,0.1)'
             }
         }
-    }]
+    }];
+
+    if(multichart) {
+        let index1 = Object.assign({}, xAxisArray[0]); // copy index 0
+        index1.gridIndex = 1;
+
+        xAxisArray.push(index1);
+    }
+
+    return xAxisArray;
 }
 
-function setYAxis(yAxisLabelValueFormat) {
-    return [{
+function setYAxis(yAxisLabelValueFormat,  multichart = false) {
+    let yAxisArray = [{
         type: 'value',
         axisLabel: {
             formatter: yAxisLabelValueFormat,
@@ -158,11 +196,20 @@ function setYAxis(yAxisLabelValueFormat) {
                 color: ['rgba(255,255,255,0.01)', 'rgba(0,0,0,0.01)']
             }
         }
-    }]
+    }];
+
+    if(multichart) {
+        let index1 = Object.assign({}, yAxisArray[0]); // copy index 0
+        index1.gridIndex = 1;
+
+        yAxisArray.push(index1);
+    }
+
+    return yAxisArray;
 }
 
-function setLegend(legendData) {
-    return {
+function setLegend(legendData, multichart = false) {
+    return multichart ? null : {
         data: legendData,
         itemHeight: 8,
         itemGap: 20,
@@ -172,17 +219,40 @@ function setLegend(legendData) {
     }
 }
 
-function setTitle(title) {
-    return {
-        text: title,
-        textStyle: {
-            color: '#fff'
+function setTitles(titles, multichart = false) {
+
+    let arrayTitles = [];
+    titles.forEach(function(val, idx, arr) {
+
+        let title = {
+            text: val,
+        };
+
+        // if single else multichart
+        if(idx == 0 && !multichart) {
+            title.textStyle = {
+                color: '#fff'
+            };
+        } else {
+            title.textStyle = {
+                fontSize: 15,
+                fontWeight: 500,
+                color: '#fff'
+            };
+            title.left = 'center';
+            title.top = 240 * idx; //  (chart height = 160 | charts spacing = 80) * index
         }
-    }
+
+        arrayTitles.push(title);
+    });
+
+    console.log('titles', arrayTitles);
+
+    return arrayTitles;
 }
 
-function setDataZoom(show) {
-    return [
+function setDataZoom(show, multichart = false) {
+    return multichart ? null : [
         {
             type: 'inside',
             start: 30,
@@ -228,14 +298,33 @@ function setTooltip() {
     }
 }
 
-function setGrid(showDataZoom) {
-    return {
-        left: 0,
-        right: 40,
-        top: 50,
-        bottom: showDataZoom ? 60 : 0,
-        containLabel: true
-    };
+function setGrid(showDataZoom = false, numberOfCharts = 1) {
+
+    let arrayGrids = [];
+    for (let i = 0; i < numberOfCharts; i++) {
+
+        let grid = {
+            left: 0,
+            containLabel: true
+        };
+
+        // if single else multichart
+        if(i == 0 && numberOfCharts == 1) {
+            grid.right = 40;
+            grid.top = 50;
+            grid.bottom = showDataZoom ? 60 : 0;
+        } else {
+            grid.right = 20;
+            grid.top = (i == 0) ? 40 : (arrayGrids[i-1].top + 240); // previous top + chart height = 160 + charts spacing = 80
+            grid.height = 160;
+        }
+
+        arrayGrids.push(grid);
+    }
+
+    console.log('grids', arrayGrids);
+
+    return arrayGrids;
 }
 
 function setGlobalTextStyle() {
@@ -245,12 +334,20 @@ function setGlobalTextStyle() {
     };
 }
 
-function setAxisPointer() {
-    return [{
+function setAxisPointer(multichart = false) {
+    let pointer =  {
         lineStyle: {
             color: 'rgba(255,255,255,0.25)'
         }
-    }];
+    };
+
+    if(multichart) {
+        pointer.link = {
+            xAxisIndex: 'all'
+        };
+    }
+
+    return pointer;
 }
 
 function setResizeEvent(lineChartElement, lineChart) {