[add] auto-resize real-time grid

src/components/task/content/chart/CanvasChart.vue

@@ -293,6 +293,20 @@ export default {
     showFilterPopup (params) {
       this.$refs.filter_popup_ref.showPanel(params)
     },
+    legendChange (params) {
+      const activeLegendLen = Object.values(params.selected).filter(val => val === true).length
+      let index = 0
+      for (const [gridIndex, value] of Object.values(params.selected).entries()) { // [TODO] 技術債，目前real time chart一個grid只對應一條series
+        if (value === true) {
+          this.data.grid[gridIndex].height = (85 / activeLegendLen) + '%'
+          this.data.grid[gridIndex].top = index * (85 / activeLegendLen) + 1 + '%'
+          index++
+        } else {
+          this.data.grid[gridIndex].height = '0%'
+          this.data.grid[gridIndex].top = '0%'
+        }
+      }
+    },
   },
   async mounted () {
     this.resizeTimer = setInterval(this.resize, 1000)
@@ -301,6 +315,7 @@ export default {
     this.initDone = true
     if (this.$refs.chart_ref != null) {
       this.$refs.chart_ref.chart._zr.on('click', this.showFilterPopup)
+      this.$refs.chart_ref.chart.on('legendselectchanged', this.legendChange)
     }
     // this.timeIntervalInput = '500'
     // this.timeIntervalChange('500')

src/components/task/content/chart/CanvasChartFilterPopup.vue

@@ -47,15 +47,17 @@ export default {
   methods: {
     showPanel (params) {
       // console.log(this.data)
-      let _gridIndex = 0
-      for (_gridIndex = 0; _gridIndex < this.data.grid.length; _gridIndex++) {
-        if (this.chartRef.containPixel({ gridIndex: _gridIndex }, [params.offsetX, params.offsetY])) {
-          this.position = 'left'
-          this.showModal = true
-          break
+      if (this.chartRef != null) {
+        let _gridIndex = 0
+        for (_gridIndex = 0; _gridIndex < this.data.grid.length; _gridIndex++) {
+          if (this.chartRef.containPixel({ gridIndex: _gridIndex }, [params.offsetX, params.offsetY])) {
+            this.position = 'left'
+            this.showModal = true
+            break
+          }
         }
+        this.gridIndex = _gridIndex
       }
-      this.gridIndex = _gridIndex
     },
   },
   mounted () {

src/factories/chart/chartFactory.js

@@ -15,6 +15,7 @@ function newChart (chartID) {
     run: false,
     timer: 0,
     legend: {
+      type: 'scroll',
       data: [],
       x: 'center',
       y: '92%',