Добавлено отображение текущих значений для выбранных графиков

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 = <DataType,>({
     }, [value])
 
     const onDomainChange = useCallback((mm: MinMax) => {
-        onSave({ xDomain: {
+        onSave({
-            min: ('min' in mm) ? mm.min : value.xDomain?.min,
+            xDomain: {
-            max: ('max' in mm) ? mm.max : value.xDomain?.max,
+                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 = <DataType,>({
                 </Input.Group>
             </Item>
             <Item label={'Цвет линий'}><ColorPicker onChange={onColorChange} value={value.color} /></Item>
+            <Item>
+                <Checkbox
+                    checked={value.showCurrentValue}
+                    onChange={(e) => onSave({ showCurrentValue: e.target.checked })}
+                >
+                    Показать текущее значение сверху
+                </Checkbox>
+            </Item>
         </Form>
     )
 }

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<DataType> = ChartDataset<DataType> & {
     xDomain: MinMax
     /** Скрыть отображение шкалы графика */
     hideLabel?: boolean
+    /** Показать последнее значение сверху графика */
+    showCurrentValue?: boolean
 }
 
 export type ExtendedChartRegistry<DataType> = ChartRegistry<DataType> & ExtendedChartDataset<DataType>
@@ -291,9 +294,9 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
         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 = <DataType extends Record<string, unknown>>({
         })
     }, [yAxisConfig, chartArea, datasets, animDurationMs, createAxesGroup])
 
-    useEffect(() => {
+    useEffect(() => { /// Обновляем группы и горизонтальные оси
         const axesGroups = axesArea()
             .selectAll('.charts-group')
             .data(groups)
@@ -542,7 +545,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                                     return <line key={`${i}`} x1={x} x2={x} y1={sizes.chartsTop} y2={offset.top + sizes.inlineHeight} />
                                 })}
                             </g>
-                            <D3MonitoringLimitChart
+                            <D3MonitoringLimitChart<DataType>
                                 regulators={regulators}
                                 data={data}
                                 yAxis={yAxis}
@@ -552,6 +555,12 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                                 top={sizes.chartsTop}
                                 zoneWidth={sizes.inlineWidth}
                             />
+                            <D3MonitoringCurrentValues<DataType>
+                                groups={groups}
+                                data={data}
+                                left={offset.left}
+                                sizes={sizes}
+                            />
                             <D3MouseZone width={width} height={height} offset={{ ...offset, top: sizes.chartsTop }}>
                                 <D3HorizontalCursor
                                     {...plugins?.cursor}
@@ -581,6 +590,6 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
     )
 }
 
-export const D3MonitoringCharts = memo(_D3MonitoringCharts)
+export const D3MonitoringCharts = memo(_D3MonitoringCharts) as typeof _D3MonitoringCharts
 
 export default D3MonitoringCharts

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<DataType> = {
+    groups: ChartGroup<DataType>[]
+    data: DataType[]
+    left: number
+    sizes: ChartSizes
+}
+
+const display = makeDisplayValue({ def: '---', fixed: 2 })
+
+const _D3MonitoringCurrentValues = <DataType,>({ groups, data, left, sizes }: D3MonitoringCurrentValuesProps<DataType>) => (
+    <g transform={`translate(${left}, ${sizes.chartsTop})`} pointerEvents={'none'}>
+        {groups.map((group) => (
+            <g key={group.key} transform={`translate(${sizes.groupLeft(group.key)}, 0)`}>
+                {group.charts.filter((chart) => chart.showCurrentValue).map((chart, i) => (
+                    <g key={chart.key} stroke={'white'} fill={chart.color} strokeWidth={3} paintOrder={'stroke'}>
+                        <text x={sizes.groupWidth / 2 - 10} textAnchor={'end'} y={15 + i * 20}>{chart.shortLabel ?? chart.label}:</text>
+                        <text x={sizes.groupWidth / 2 + 10} textAnchor={'start'} y={15 + i * 20}>{display(chart.x((data.at(-1) ?? {}) as any))}</text>
+                    </g>
+                ))}
+            </g>
+        ))}
+    </g>
+)
+
+export const D3MonitoringCurrentValues = memo(_D3MonitoringCurrentValues) as typeof _D3MonitoringCurrentValues
+
+export default D3MonitoringCurrentValues