From 747f15095ae2994b3b0394bbf053c7feef265b99 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Wed, 15 Jun 2022 10:12:21 +0500
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20TVD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/WellOperations/Tvd/index.jsx | 54 +++++++++++++-------------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/pages/WellOperations/Tvd/index.jsx b/src/pages/WellOperations/Tvd/index.jsx
index 0ae94a8..8a4d57c 100755
--- a/src/pages/WellOperations/Tvd/index.jsx
+++ b/src/pages/WellOperations/Tvd/index.jsx
@@ -148,7 +148,7 @@ const Tvd = memo(({ idWell: wellId, title, ...other }) => {
         )
     }, [idWell])
 
-	useEffect(() => {
+    const chartData = useMemo(() => {
         const withoutNpt = []
         operations?.fact?.forEach((row) => {
             if (row?.isNPT !== false) return
@@ -160,39 +160,41 @@ const Tvd = memo(({ idWell: wellId, title, ...other }) => {
             })
         })
 
-        const data = { datasets: [
+        return { datasets: [
             makeDataset(operations?.fact, 'Факт', '#0A0', 3),
             makeDataset(operations?.predict, 'Прогноз', 'purple', 1, [7, 3]),
             makeDataset(operations?.plan, 'План', '#F00', 3),
             makeDataset(withoutNpt, 'Факт без НПВ', '#00F', 3)
         ]}
+    }, [operations])
 
-		if (chartRef.current && !chart) {
-			const thisOptions = {}
-			Object.assign(thisOptions, defaultOptions)
-            thisOptions.onClick = onPointClick
-            thisOptions.scales.x = scaleTypes[xLabel]
-            thisOptions.parsing.xAxisKey = xLabel
+    useEffect(() => {
+        if (!chartRef.current) return
+        const options = {}
+        Object.assign(options, defaultOptions)
 
-			const newChart = new Chart(chartRef.current, {
-				type: 'line',
-				plugins: [ChartDataLabels],
-				options: thisOptions,
-				data: data
-			})
-			setChart(newChart)
+        const newChart = new Chart(chartRef.current, {
+            type: 'line',
+            plugins: [ChartDataLabels],
+            options: options,
+            data: { datasets: [] },
+        })
+        setChart(newChart)
 
-			return () => chart?.destroy()
-		} else {
-            chart.data = data
-            chart.options.scales.x = scaleTypes[xLabel]
-            chart.options.parsing.xAxisKey = xLabel
-            chart.update()
-            // Обнуление ширины необходимо для уменьшения размена при resize после появления элементов
-            chart.canvas.parentNode.style.width = '0'
-            chart.resize()
-        }
-	}, [chart, operations, xLabel, onPointClick, other])
+        return () => newChart?.destroy()
+    }, [chartRef])
+
+    useEffect(() => {
+        if (!chart) return
+        chart.data = chartData
+        chart.options.onClick = onPointClick
+        chart.options.scales.x = scaleTypes[xLabel]
+        chart.options.parsing.xAxisKey = xLabel
+        chart.update()
+        // Обнуление ширины необходимо для уменьшения размена при resize после появления элементов
+        chart.canvas.parentNode.style.width = '0'
+        chart.resize()
+    }, [chart, chartData, xLabel, onPointClick])
 
     const toogleTable = useCallback(() => {
         setOperations(pre => ({ ...pre }))