fix(legacy-charts): fix render multiple charts at one page

fix the error, when multiple charts can't render on one page fix #800 #801
apertureless · Apr 6, 2022 · 835e8f8 · 835e8f8
1 parent 3ad8bc2
commit 835e8f8
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 19 deletions.
diff --git a/legacy/src/Charts.js b/legacy/src/Charts.js
@@ -22,8 +22,10 @@ import {
   ChartEmits
 } from '../../src/utils'
 
+import { ComponentStore } from './store.ts'
+
 export function generateChart(chartId, chartType, chartController) {
-  let _chart = null
+  let _store = null
 
   return {
     props: {
@@ -68,6 +70,8 @@ export function generateChart(chartId, chartType, chartController) {
       ChartJS.register(chartController)
     },
     mounted() {
+      _store = new ComponentStore()
+
       if ('datasets' in this.chartData && this.chartData.datasets.length > 0) {
         chartCreate(this.renderChart, this.chartData, this.chartOptions)
         this.$emit(ChartEmits.ChartRendered)
@@ -80,8 +84,8 @@ export function generateChart(chartId, chartType, chartController) {
     },
     methods: {
       renderChart(data, options) {
-        if (_chart !== null) {
-          chartDestroy(_chart)
+        if (_store !== null && _store.componentChart !== null) {
+          chartDestroy(_store.componentChart)
           this.$emit(ChartEmits.ChartDestroyed)
         }
 
@@ -93,12 +97,14 @@ export function generateChart(chartId, chartType, chartController) {
           const canvasEl2DContext = this.$refs.canvas.getContext('2d')
 
           if (canvasEl2DContext !== null) {
-            _chart = new ChartJS(canvasEl2DContext, {
-              type: chartType,
-              data: chartData,
-              options,
-              plugins: this.plugins
-            })
+            _store.setComponentChart(
+              new ChartJS(canvasEl2DContext, {
+                type: chartType,
+                data: chartData,
+                options,
+                plugins: this.plugins
+              })
+            )
           }
         }
       },
@@ -109,28 +115,36 @@ export function generateChart(chartId, chartType, chartController) {
         if (Object.keys(oldData).length > 0) {
           const isEqualLabelsAndDatasetsLength = compareData(newData, oldData)
 
-          if (isEqualLabelsAndDatasetsLength && _chart !== null) {
-            setChartDatasets(_chart.data, newData, this.datasetIdKey)
+          if (
+            isEqualLabelsAndDatasetsLength &&
+            _store !== null &&
+            _store.componentChart !== null
+          ) {
+            setChartDatasets(
+              _store.componentChart.data,
+              newData,
+              this.datasetIdKey
+            )
 
             if (newData.labels !== undefined) {
-              setChartLabels(_chart, newData.labels)
+              setChartLabels(_store.componentChart, newData.labels)
               this.$emit(ChartEmits.LabelsUpdated)
             }
 
-            chartUpdate(_chart)
+            chartUpdate(_store.componentChart)
             this.$emit(ChartEmits.ChartUpdated)
           } else {
-            if (_chart !== null) {
-              chartDestroy(_chart)
+            if (_store !== null && _store.componentChart !== null) {
+              chartDestroy(_store.componentChart)
               this.$emit(ChartEmits.ChartDestroyed)
             }
 
             chartCreate(this.renderChart, this.chartData, this.chartOptions)
             this.$emit(ChartEmits.ChartRendered)
           }
         } else {
-          if (_chart !== null) {
-            chartDestroy(_chart)
+          if (_store !== null && _store.componentChart !== null) {
+            chartDestroy(_store.componentChart)
             this.$emit(ChartEmits.ChartDestroyed)
           }
 
@@ -140,8 +154,8 @@ export function generateChart(chartId, chartType, chartController) {
       }
     },
     beforeDestroy() {
-      if (_chart !== null) {
-        chartDestroy(_chart)
+      if (_store !== null && _store.componentChart !== null) {
+        chartDestroy(_store.componentChart)
         this.$emit(ChartEmits.ChartDestroyed)
       }
     },

diff --git a/legacy/src/store.ts b/legacy/src/store.ts
@@ -0,0 +1,18 @@
+import type { Chart } from 'chart.js'
+
+interface IComponentStore {
+  readonly componentChart: Chart | null
+  setComponentChart(componentChart: Chart): void
+}
+
+export class ComponentStore implements IComponentStore {
+  private _chart = null
+
+  public get componentChart() {
+    return this._chart
+  }
+
+  public setComponentChart(val: Chart) {
+    this._chart = val
+  }
+}