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

* 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

* fix: change syntax

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,8 @@ export function generateChart(chartId, chartType, chartController) {
     },
     methods: {
       renderChart(data, options) {
-        if (_chart !== null) {
-          chartDestroy(_chart)
+        if (_chartRef?.current !== null) {
+          chartDestroy(_chartRef.current)
           this.$emit(ChartEmits.ChartDestroyed)
         }
 
@@ -93,7 +95,7 @@ export function generateChart(chartId, chartType, chartController) {
           const canvasEl2DContext = this.$refs.canvas.getContext('2d')
 
           if (canvasEl2DContext !== null) {
-            _chart = new ChartJS(canvasEl2DContext, {
+            _chartRef.current = new ChartJS(canvasEl2DContext, {
               type: chartType,
               data: chartData,
               options,
@@ -109,28 +111,28 @@ 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?.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?.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?.current !== null) {
+            chartDestroy(_chartRef.current)
             this.$emit(ChartEmits.ChartDestroyed)
           }
 
@@ -140,8 +142,8 @@ export function generateChart(chartId, chartType, chartController) {
       }
     },
     beforeDestroy() {
-      if (_chart !== null) {
-        chartDestroy(_chart)
+      if (_chartRef?.current !== null) {
+        chartDestroy(_chartRef.current)
         this.$emit(ChartEmits.ChartDestroyed)
       }
     },