- {tooltipBodies[i]}
+
diff --git a/src/components/d3/monitoring/D3MonitoringChartEditor.tsx b/src/components/d3/monitoring/D3MonitoringChartEditor.tsx
index 86ffdeb..fef519a 100644
--- a/src/components/d3/monitoring/D3MonitoringChartEditor.tsx
+++ b/src/components/d3/monitoring/D3MonitoringChartEditor.tsx
@@ -1,7 +1,7 @@
-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'
+import { BaseDataType, MinMax } from '@components/d3/types'
import { ColorPicker, Color } from '@components/ColorPicker'
import { ExtendedChartDataset } from './D3MonitoringCharts'
@@ -18,13 +18,13 @@ const lineTypes = [
{ value: 'needle', label: 'Иглы' },
]
-export type D3MonitoringChartEditorProps
= {
+export type D3MonitoringChartEditorProps = {
group: ExtendedChartDataset[]
chart: ExtendedChartDataset
onChange: (value: ExtendedChartDataset) => boolean
}
-const _D3MonitoringChartEditor = ({
+const _D3MonitoringChartEditor = ({
group,
chart: value,
onChange,
@@ -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) => {
@@ -91,8 +93,8 @@ const _D3MonitoringChartEditor = ({
-
- onDomainChange({ min })} placeholder={'Мин'} />
- onDomainChange({ max })} placeholder={'Макс'} />
+ onDomainChange({ min: min ?? undefined })} placeholder={'Мин'} />
+ onDomainChange({ max: max ?? undefined })} placeholder={'Макс'} />
+ -
+ onSave({ showCurrentValue: e.target.checked })}
+ >
+ Показать текущее значение сверху
+
+
)
}
diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx
index 5d7f582..dbc2a54 100644
--- a/src/components/d3/monitoring/D3MonitoringCharts.tsx
+++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx
@@ -8,6 +8,7 @@ import LoaderPortal from '@components/LoaderPortal'
import { isDev, usePartialProps, useUserSettings } from '@utils'
import {
+ BaseDataType,
ChartAxis,
ChartDataset,
ChartOffset,
@@ -25,6 +26,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'
@@ -50,16 +52,18 @@ const calculateDomain = (mm: MinMax): Required => {
return { min, max }
}
-export type ExtendedChartDataset = ChartDataset & {
+export type ExtendedChartDataset = ChartDataset & {
/** Диапазон отображаемых значений по горизонтальной оси */
xDomain: MinMax
/** Скрыть отображение шкалы графика */
hideLabel?: boolean
+ /** Показать последнее значение сверху графика */
+ showCurrentValue?: boolean
}
-export type ExtendedChartRegistry = ChartRegistry & ExtendedChartDataset
+export type ExtendedChartRegistry = ChartRegistry & ExtendedChartDataset
-export type ChartGroup = {
+export type ChartGroup = {
/** Получить D3 выборку, содержащую корневой G-элемент группы */
(): d3.Selection
/** Уникальный ключ группы (индекс) */
@@ -83,12 +87,12 @@ const defaultRegulators: TelemetryRegulators = {
5: { color: '#007070', label: 'Расход' },
}
-const getDefaultYAxisConfig = (): ChartAxis => ({
+const getDefaultYAxisConfig = (): ChartAxis => ({
type: 'time',
accessor: (d: any) => new Date(d.date)
})
-const getDefaultYTicks = (): Required> => ({
+const getDefaultYTicks = (): Required> => ({
visible: false,
format: (d: d3.NumberValue, idx: number, data?: DataType) => String(d),
color: 'lightgray',
@@ -98,7 +102,7 @@ const getDefaultYTicks = (): Required> => ({
/**
* @template DataType тип данных отображаемых записей
*/
-export type D3MonitoringChartsProps> = Omit, HTMLDivElement>, 'ref'> & {
+export type D3MonitoringChartsProps = Omit, HTMLDivElement>, 'ref'> & {
/** Двумерный массив датасетов (группа-график) */
datasetGroups: ExtendedChartDataset[][]
/** Ширина графика числом пикселей или CSS-значением (px/%/em/rem) */
@@ -291,9 +295,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 +370,7 @@ const _D3MonitoringCharts = >({
})
}, [yAxisConfig, chartArea, datasets, animDurationMs, createAxesGroup])
- useEffect(() => {
+ useEffect(() => { /// Обновляем группы и горизонтальные оси
const axesGroups = axesArea()
.selectAll('.charts-group')
.data(groups)
@@ -542,7 +546,7 @@ const _D3MonitoringCharts = >({
return
})}
-
regulators={regulators}
data={data}
yAxis={yAxis}
@@ -552,13 +556,20 @@ const _D3MonitoringCharts = >({
top={sizes.chartsTop}
zoneWidth={sizes.inlineWidth}
/>
+
+ groups={groups}
+ data={data}
+ sizes={sizes}
+ />
@@ -581,6 +592,6 @@ const _D3MonitoringCharts = >({
)
}
-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..ccc2a6c
--- /dev/null
+++ b/src/components/d3/monitoring/D3MonitoringCurrentValues.tsx
@@ -0,0 +1,46 @@
+import { memo } from 'react'
+
+import { BaseDataType } from '@components/d3/types'
+import { ChartGroup, ChartSizes } from '@components/d3/monitoring/D3MonitoringCharts'
+import { makeDisplayValue } from '@utils'
+
+export type D3MonitoringCurrentValuesProps = {
+ /** Группы графиков */
+ groups: ChartGroup[]
+ /** Массив данных графика */
+ data: DataType[]
+ /** Объект, хранящий полезные размеры и отступы графика (нужен только groupWidth, chartsTop и groupLeft) */
+ sizes: ChartSizes
+}
+
+const display = makeDisplayValue({ def: '---', fixed: 2 })
+
+/// `Array.at` вместе с `??` возвращает странный тип, поэтому его пока пришлось пометить как `any`
+/// TODO: Исправить тип
+const _D3MonitoringCurrentValues = ({ groups, data, sizes }: D3MonitoringCurrentValuesProps