From b44d796ad078be09dc2c4831b7897b7fd4aefcc2 Mon Sep 17 00:00:00 2001 From: goodmice Date: Mon, 22 Aug 2022 06:32:05 +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=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=82=D0=B5=D0=BA=D1=83=D1=89=D0=B8=D1=85?= =?UTF-8?q?=20=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=B4?= =?UTF-8?q?=D0=BB=D1=8F=20=D0=B2=D1=8B=D0=B1=D1=80=D0=B0=D0=BD=D0=BD=D1=8B?= =?UTF-8?q?=D1=85=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=BE=D0=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/monitoring/D3MonitoringChartEditor.tsx | 20 +++++++++--- .../d3/monitoring/D3MonitoringCharts.tsx | 19 ++++++++--- .../monitoring/D3MonitoringCurrentValues.tsx | 32 +++++++++++++++++++ 3 files changed, 61 insertions(+), 10 deletions(-) create mode 100644 src/components/d3/monitoring/D3MonitoringCurrentValues.tsx diff --git a/src/components/d3/monitoring/D3MonitoringChartEditor.tsx b/src/components/d3/monitoring/D3MonitoringChartEditor.tsx index 86ffdeb..05601a9 100644 --- a/src/components/d3/monitoring/D3MonitoringChartEditor.tsx +++ b/src/components/d3/monitoring/D3MonitoringChartEditor.tsx @@ -1,4 +1,4 @@ -import { Button, Form, FormItemProps, Input, InputNumber, Select, Tooltip } from 'antd' +import { Button, Checkbox, Form, FormItemProps, Input, InputNumber, Select, Tooltip } from 'antd' import { memo, useCallback, useEffect, useMemo } from 'react' import { MinMax } from '@components/d3/types' @@ -43,10 +43,12 @@ const _D3MonitoringChartEditor = ({ }, [value]) const onDomainChange = useCallback((mm: MinMax) => { - onSave({ xDomain: { - min: ('min' in mm) ? mm.min : value.xDomain?.min, - max: ('max' in mm) ? mm.max : value.xDomain?.max, - }}) + onSave({ + xDomain: { + min: ('min' in mm) ? mm.min : value.xDomain?.min, + max: ('max' in mm) ? mm.max : value.xDomain?.max, + } + }) }, [value]) const onColorChange = useCallback((color: Color) => { @@ -100,6 +102,14 @@ const _D3MonitoringChartEditor = ({ + + onSave({ showCurrentValue: e.target.checked })} + > + Показать текущее значение сверху + + ) } diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index 5d7f582..cc27838 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx @@ -25,6 +25,7 @@ import { getByAccessor, getChartClass, getGroupClass, getTicks } from '@componen import { renderArea, renderLine, renderNeedle, renderPoint, renderRectArea } from '@components/d3/renders' import D3MonitoringEditor from './D3MonitoringEditor' +import D3MonitoringCurrentValues from './D3MonitoringCurrentValues' import { D3HorizontalCursor, D3HorizontalCursorSettings } from './D3HorizontalCursor' import D3MonitoringLimitChart, { TelemetryRegulators } from './D3MonitoringLimitChart' @@ -55,6 +56,8 @@ export type ExtendedChartDataset = ChartDataset & { xDomain: MinMax /** Скрыть отображение шкалы графика */ hideLabel?: boolean + /** Показать последнее значение сверху графика */ + showCurrentValue?: boolean } export type ExtendedChartRegistry = ChartRegistry & ExtendedChartDataset @@ -291,9 +294,9 @@ const _D3MonitoringCharts = >({ resetDatasets() }, [resetDatasets, resetRegulators]) - useEffect(() => methods?.({ setSettingsVisible }), [methods]) + useEffect(() => methods?.({ setSettingsVisible }), [methods]) /// Возвращаем в делегат доступные методы - useEffect(() => { + useEffect(() => { /// Обновляем группы if (isDev()) { datasets.forEach((sets, i) => { sets.forEach((set, j) => { @@ -366,7 +369,7 @@ const _D3MonitoringCharts = >({ }) }, [yAxisConfig, chartArea, datasets, animDurationMs, createAxesGroup]) - useEffect(() => { + useEffect(() => { /// Обновляем группы и горизонтальные оси const axesGroups = axesArea() .selectAll('.charts-group') .data(groups) @@ -542,7 +545,7 @@ const _D3MonitoringCharts = >({ return })} - regulators={regulators} data={data} yAxis={yAxis} @@ -552,6 +555,12 @@ const _D3MonitoringCharts = >({ top={sizes.chartsTop} zoneWidth={sizes.inlineWidth} /> + + groups={groups} + data={data} + left={offset.left} + sizes={sizes} + /> >({ ) } -export const D3MonitoringCharts = memo(_D3MonitoringCharts) +export const D3MonitoringCharts = memo(_D3MonitoringCharts) as typeof _D3MonitoringCharts export default D3MonitoringCharts diff --git a/src/components/d3/monitoring/D3MonitoringCurrentValues.tsx b/src/components/d3/monitoring/D3MonitoringCurrentValues.tsx new file mode 100644 index 0000000..77b2d52 --- /dev/null +++ b/src/components/d3/monitoring/D3MonitoringCurrentValues.tsx @@ -0,0 +1,32 @@ +import { memo } from 'react' + +import { ChartGroup, ChartSizes } from '@components/d3/monitoring/D3MonitoringCharts' +import { makeDisplayValue } from '@utils' + +export type D3MonitoringCurrentValuesProps = { + groups: ChartGroup[] + data: DataType[] + left: number + sizes: ChartSizes +} + +const display = makeDisplayValue({ def: '---', fixed: 2 }) + +const _D3MonitoringCurrentValues = ({ groups, data, left, sizes }: D3MonitoringCurrentValuesProps) => ( + + {groups.map((group) => ( + + {group.charts.filter((chart) => chart.showCurrentValue).map((chart, i) => ( + + {chart.shortLabel ?? chart.label}: + {display(chart.x((data.at(-1) ?? {}) as any))} + + ))} + + ))} + +) + +export const D3MonitoringCurrentValues = memo(_D3MonitoringCurrentValues) as typeof _D3MonitoringCurrentValues + +export default D3MonitoringCurrentValues