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 }))