From feb93d7f66b40f12d6fb1904c7c35220b48a9402 Mon Sep 17 00:00:00 2001
From: "v.terekhov" <v.terekhov@iportal.ru>
Date: Thu, 7 Apr 2022 00:17:15 +0400
Subject: [PATCH] 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
---
 legacy/src/Charts.js | 57 ++++++++++++++++++++++++++++++++------------
 1 file changed, 42 insertions(+), 15 deletions(-)

diff --git a/legacy/src/Charts.js b/legacy/src/Charts.js
index be4b2163..306f360f 100644
--- 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,19 +119,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 !== 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)
             }
 
@@ -129,8 +148,12 @@ export function generateChart(chartId, chartType, chartController) {
             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)
       }
     },