Добавлен хук состояния с сохранением в базе

src/components/d3/monitoring/D3MonitoringCharts.tsx

@@ -5,9 +5,7 @@ import { Empty } from 'antd'
 import * as d3 from 'd3'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { invokeWebApiWrapperAsync } from '@components/factory'
+import { isDev, usePartialProps, useUserSettings } from '@utils'
-import { isDev, usePartialProps } from '@utils'
-import { UserSettingsService } from '@api'
 
 import {
     ChartAxis,
@@ -193,14 +191,14 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
     className = '',
     ...other
 }: D3MonitoringChartsProps<DataType>) => {
-    const [datasets, setDatasets] = useState<ExtendedChartDataset<DataType>[][]>([])
+    const [datasets, setDatasets, resetDatasets] = useUserSettings(chartName, datasetGroups)
+    const [regulators, setRegulators, resetRegulators] = useUserSettings(`${chartName}_regulators`, defaultRegulators)
     const [groups, setGroups] = useState<ChartGroup<DataType>[]>([])
     const [svgRef, setSvgRef] = useState<SVGSVGElement | null>(null)
     const [yAxisRef, setYAxisRef] = useState<SVGGElement | null>(null)
     const [chartAreaRef, setChartAreaRef] = useState<SVGGElement | null>(null)
     const [axesAreaRef, setAxesAreaRef] = useState<SVGGElement | null>(null)
     const [settingsVisible, setSettingsVisible] = useState<boolean>(false)
-    const [regulators, setRegulators] = useState<TelemetryRegulators>(defaultRegulators)
 
     const offset = usePartialProps(_offset, defaultOffsets)
     const yTicks = usePartialProps<Required<ChartTick<DataType>>>(_yTicks, getDefaultYTicks)
@@ -282,69 +280,19 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
     ), [chartArea])
 
     const onGroupsChange = useCallback((settings: ExtendedChartDataset<DataType>[][], regulators: TelemetryRegulators) => {
-        if (chartName) {
-            invokeWebApiWrapperAsync(
-                async () => {
-                    await UserSettingsService.update(chartName, {
-                        settings,
-                        regulators,
-                    })
-                },
-                undefined,
-                'Не удалось сохранить параметры графиков'
-            )
-        }
-        setDatasets(settings)
-        setRegulators(regulators)
         setSettingsVisible(false)
-    }, [chartName])
+        setRegulators(regulators)
+        setDatasets(settings)
+    }, [setDatasets, setRegulators])
 
     const onGroupsReset = useCallback(() => {
         setSettingsVisible(false)
-        setDatasets(datasetGroups)
+        resetRegulators()
-        setRegulators(defaultRegulators)
+        resetDatasets()
-        if (chartName) {
+    }, [resetDatasets, resetRegulators])
-            invokeWebApiWrapperAsync(
-                async () => await UserSettingsService.delete(chartName),
-                undefined,
-                'Не удалось удалить настройки графиков'
-            )
-        }
-    }, [datasetGroups, chartName])
 
     useEffect(() => methods?.({ setSettingsVisible }), [methods])
 
-    useEffect(() => {
-        invokeWebApiWrapperAsync(
-            async () => {
-                let sets = chartName ? await UserSettingsService.get(chartName) : null
-                if (typeof sets === 'string')
-                    sets = JSON.parse(sets)
-                if (sets && Array.isArray(sets.settings)) {
-                    if (sets.regulators)
-                        setRegulators(sets.regulators)
-                    if (Array.isArray(sets.settings)) {
-                        setDatasets(sets.settings)
-                    }
-                } else if (Array.isArray(datasetGroups)) {
-                    setDatasets(datasetGroups)
-                    if (chartName) {
-                        invokeWebApiWrapperAsync(
-                            async () => await UserSettingsService.insert(chartName, {
-                                settings: datasetGroups,
-                                regulators: defaultRegulators,
-                            }),
-                            undefined,
-                            'Не удалось сохранить настройки графиков'
-                        )
-                    }
-                }
-            },
-            undefined,
-            'Не удалось загрузить настройки графиков'
-        )
-    }, [datasetGroups, chartName])
-
     useEffect(() => {
         if (isDev()) {
             datasets.forEach((sets, i) => {

src/components/d3/monitoring/D3MonitoringLimitChart.tsx

@@ -136,7 +136,7 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
                     <g
                         style={opacityStyle}
                         pointerEvents={'none'}
-                        strokeDasharray={'6, 3, 3, 3'}
+                        strokeOpacity={0.4}
                         stroke={regulators[selected.id].color}
                     >
                         <line x1={-zoneWidth} x2={0} y1={zoneY1} y2={zoneY1} />

src/utils/hooks/index.ts

@@ -4,3 +4,5 @@ export * from './functionalValue'
 export type { FunctionalValue } from './functionalValue'
 
 export * from './usePartialProps'
+
+export * from './useUserSettings'

src/utils/hooks/useUserSettings.ts

@@ -0,0 +1,51 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import { UserSettingsService } from '@api'
+
+export function useUserSettings<T>(): [T | undefined, (value: T) => void, () => void]
+export function useUserSettings<T>(name: string, defaultValue: T | (() => T)): [T, (value: T) => void, () => void]
+export function useUserSettings<T>(name: string | undefined, defaultValue: T | (() => T)): [T, (value: T) => void, () => void]
+export function useUserSettings<T>(name: string, defaultValue?: T | (() => T)): [T | undefined, (value: T) => void, () => void]
+export function useUserSettings<T>(name?: string, defaultValue?: T | (() => T)): [T | undefined, (value: T) => void, () => void]
+
+export function useUserSettings<T>(name?: string, defaultValue?: T | (() => T)): [T | undefined, (value: T) => void, () => void] {
+    const [settings, setSettings] = useState<T | undefined>(defaultValue)
+
+    useEffect(() => {
+        if (!name) return
+        invokeWebApiWrapperAsync(
+            async () => {
+                const data = await UserSettingsService.get(name)
+                if (data)
+                    setSettings(data)
+            },
+            undefined,
+            `Не удалось загрузить настройки "${name}"`
+        )
+    }, [name])
+
+    const onSettingChange = useCallback((value: T) => {
+        setSettings(value)
+        if (!name) return
+        invokeWebApiWrapperAsync(
+            async () => await UserSettingsService.upsert(name, value),
+            undefined,
+            `Не удалось сохранить настройки "${name}"`
+        )
+    }, [name])
+
+    const onSettingsReset = useCallback(() => {
+        setSettings(defaultValue)
+        if (!name) return
+        invokeWebApiWrapperAsync(
+            async () => await UserSettingsService.delete(name),
+            undefined,
+            `Не удалось удалить настройки "${name}"`
+        )
+    }, [name, defaultValue])
+
+    return [settings, onSettingChange, onSettingsReset]
+}
+
+export default useUserSettings