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 7, 2022 · feb93d7 · feb93d7
1 parent 3ad8bc2
commit feb93d7
Showing 1 changed file with 42 additions and 15 deletions.
diff --git a/legacy/src/Charts.js b/legacy/src/Charts.js
@@ -23,7 +23,7 @@ import {
 } from '../../src/utils'
 
 export function generateChart(chartId, chartType, chartController) {
-  let _chart = null
+  let _chartRef = null
 
   return {
     props: {
@@ -68,6 +68,8 @@ export function generateChart(chartId, chartType, chartController) {
       ChartJS.register(chartController)
     },
     mounted() {
+      _chartRef = { current: null }
+
       if ('datasets' in this.chartData && this.chartData.datasets.length > 0) {
         chartCreate(this.renderChart, this.chartData, this.chartOptions)
         this.$emit(ChartEmits.ChartRendered)
@@ -80,8 +82,12 @@ export function generateChart(chartId, chartType, chartController) {
     },
     methods: {
       renderChart(data, options) {
-        if (_chart !== null) {
-          chartDestroy(_chart)
+        if (
+          _chartRef !== null &&
+          'current' in _chartRef &&
+          _chartRef.current !== null
+        ) {
+          chartDestroy(_chartRef.current)
           this.$emit(ChartEmits.ChartDestroyed)
         }
 
@@ -92,8 +98,12 @@ export function generateChart(chartId, chartType, chartController) {
 
           const canvasEl2DContext = this.$refs.canvas.getContext('2d')
 
-          if (canvasEl2DContext !== null) {
-            _chart = new ChartJS(canvasEl2DContext, {
+          if (
+            canvasEl2DContext !== null &&
+            _chartRef !== null &&
+            'current' in _chartRef
+          ) {
+            _chartRef.current = new ChartJS(canvasEl2DContext, {
               type: chartType,
               data: chartData,
               options,
@@ -109,28 +119,41 @@ 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 &&
+            _chartRef !== null &&
+            'current' in _chartRef &&
+            _chartRef.current !== null
+          ) {
+            setChartDatasets(_chartRef.current.data, newData, this.datasetIdKey)
 
             if (newData.labels !== undefined) {
-              setChartLabels(_chart, newData.labels)
+              setChartLabels(_chartRef.current, newData.labels)
               this.$emit(ChartEmits.LabelsUpdated)
             }
 
-            chartUpdate(_chart)
+            chartUpdate(_chartRef.current)
             this.$emit(ChartEmits.ChartUpdated)
           } else {
-            if (_chart !== null) {
-              chartDestroy(_chart)
+            if (
+              _chartRef !== null &&
+              'current' in _chartRef &&
+              _chartRef.current !== null
+            ) {
+              chartDestroy(_chartRef.currentt)
               this.$emit(ChartEmits.ChartDestroyed)
             }
 
             chartCreate(this.renderChart, this.chartData, this.chartOptions)
             this.$emit(ChartEmits.ChartRendered)
           }
         } else {
-          if (_chart !== null) {
-            chartDestroy(_chart)
+          if (
+            _chartRef !== null &&
+            'current' in _chartRef &&
+            _chartRef.current !== null
+          ) {
+            chartDestroy(_chartRef.current)
             this.$emit(ChartEmits.ChartDestroyed)
           }
 
@@ -140,8 +163,12 @@ export function generateChart(chartId, chartType, chartController) {
       }
     },
     beforeDestroy() {
-      if (_chart !== null) {
-        chartDestroy(_chart)
+      if (
+        _chartRef !== null &&
+        'current' in _chartRef &&
+        _chartRef.current !== null
+      ) {
+        chartDestroy(_chartRef.current)
         this.$emit(ChartEmits.ChartDestroyed)
       }
     },