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 = React.DetailedHTMLProps + /** Штриховка графика */ + dash?: string | number | number[] /** Параметры плагинов */ plugins?: { /** Параметры контекстного меню */ @@ -111,6 +113,7 @@ const _D3Chart = >({ backgroundColor = 'transparent', ticks, plugins, + dash, ...other }: D3ChartProps) => { const xAxisConfig = usePartialProps>(_xAxisConfig, getDefaultXAxisConfig) @@ -334,6 +337,8 @@ const _D3Chart = >({ if (chart.point) renderPoint(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> = Reac } /** Настройки рисок и цен деления вертикальной шкалы */ yTicks?: ChartTick + /** Штриховка графика */ + dash?: string | number | number[] /** Диапозон отображаемых значений по вертикальной оси (сверху вниз) */ yDomain?: MinMax /** Событие, вызываемое при прокрутке колёсика мышки над графиком */ @@ -162,6 +164,7 @@ const _D3MonitoringCharts = >({ yTicks: _yTicks, axisHeight = 20, spaceBetweenGroups = 30, + dash, className = '', ...other @@ -454,6 +457,8 @@ const _D3MonitoringCharts = >({ if (chart.point) renderPoint(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 = {