From 1b6768be905cfc9a1df0f2d12af847f3b233a1c0 Mon Sep 17 00:00:00 2001
From: goodmice <hamel2517@gmail.com>
Date: Sat, 30 Jul 2022 22:45:08 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BD=D0=B0=D1=81=D1=82=D1=80=D0=BE=D0=B9=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D1=88=D1=82=D1=80=D0=B8=D1=85=D0=BE=D0=B2=D0=BA=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d3/D3Chart.tsx                      | 5 +++++
 src/components/d3/D3MonitoringCharts.tsx           | 5 +++++
 src/pages/Telemetry/Operations/OperationsChart.jsx | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/d3/D3Chart.tsx b/src/components/d3/D3Chart.tsx
index 968c9fc..f818215 100644
--- a/src/components/d3/D3Chart.tsx
+++ b/src/components/d3/D3Chart.tsx
@@ -79,6 +79,8 @@ export type D3ChartProps<DataType> = React.DetailedHTMLProps<React.HTMLAttribute
     backgroundColor?: Property.Color
     /** Настройки рисок и цен деления графика */
     ticks?: ChartTicks<DataType>
+    /** Штриховка графика */
+    dash?: string | number | number[]
     /** Параметры плагинов */
     plugins?: {
         /** Параметры контекстного меню */
@@ -111,6 +113,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
     backgroundColor = 'transparent',
     ticks,
     plugins,
+    dash,
     ...other
 }: D3ChartProps<DataType>) => {
     const xAxisConfig = usePartialProps<ChartAxis<DataType>>(_xAxisConfig, getDefaultXAxisConfig)
@@ -334,6 +337,8 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
             if (chart.point)
                 renderPoint<DataType>(xAxis, yAxis, chart, chartData, true)
 
+            if (dash) chart().attr('stroke-dasharray', dash)
+
             chart.afterDraw?.(chart)
         })
     }, [charts, data, xAxis, yAxis, height, offset])
diff --git a/src/components/d3/D3MonitoringCharts.tsx b/src/components/d3/D3MonitoringCharts.tsx
index f92c3a3..2ff5abf 100644
--- a/src/components/d3/D3MonitoringCharts.tsx
+++ b/src/components/d3/D3MonitoringCharts.tsx
@@ -111,6 +111,8 @@ export type D3MonitoringChartsProps<DataType extends Record<string, any>> = Reac
     }
     /** Настройки рисок и цен деления вертикальной шкалы */
     yTicks?: ChartTick<DataType>
+    /** Штриховка графика */
+    dash?: string | number | number[]
     /** Диапозон отображаемых значений по вертикальной оси (сверху вниз) */
     yDomain?: MinMax
     /** Событие, вызываемое при прокрутке колёсика мышки над графиком */
@@ -162,6 +164,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
     yTicks: _yTicks,
     axisHeight = 20,
     spaceBetweenGroups = 30,
+    dash,
 
     className = '',
     ...other
@@ -454,6 +457,8 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
     
                 if (chart.point)
                     renderPoint<DataType>(xAxis, yAxis, chart, chartData, true)
+
+                if (dash) chart().attr('stroke-dasharray', dash)
     
                 chart.afterDraw?.(chart)
             })
diff --git a/src/pages/Telemetry/Operations/OperationsChart.jsx b/src/pages/Telemetry/Operations/OperationsChart.jsx
index 776bc00..2726654 100644
--- a/src/pages/Telemetry/Operations/OperationsChart.jsx
+++ b/src/pages/Telemetry/Operations/OperationsChart.jsx
@@ -70,7 +70,7 @@ const chartDatasets = [{
     yAxis: {
         type: 'linear',
         accessor: (row) => row.operationValue?.targetValue ?? null,
-    }
+    },
 }]
 
 const xAxis = {