diff --git a/src/pages/Telemetry/Operations/OperationsChart.jsx b/src/pages/Telemetry/Operations/OperationsChart.jsx index 0e54acd..a04d0ba 100644 --- a/src/pages/Telemetry/Operations/OperationsChart.jsx +++ b/src/pages/Telemetry/Operations/OperationsChart.jsx @@ -1,10 +1,36 @@ import { memo, useMemo } from 'react' import { D3Chart } from '@components/d3' -import { formatDate } from '@utils' +import { Grid, GridItem } from '@components/Grid' +import { formatDate, makeDisplayValue } from '@utils' import '@styles/detected_operations.less' +const displayNumber = makeDisplayValue({ fixed: 2 }) + +const makeTooltipRender = (category) => ([{ data: [data] }]) => ( +
+ {data.operationCategory?.name} + {formatDate(data.dateStart, undefined, 'DD.MM.YYYY')} + + С: + {formatDate(data.dateStart, undefined, 'HH:mm:ss') ?? '----'} + {displayNumber(data.depthStart)} м + По: + {formatDate(data.dateEnd, undefined, 'HH:mm:ss') ?? '----'} + {displayNumber(data.depthEnd)} м + + + {category?.name ?? 'Ключ'}: + {displayNumber(data.value)} + {category?.unit ?? '----'} + Цель: + {displayNumber(data.operationValue?.targetValue)} + {category?.unit ?? '----'} + +
+) + // Палитра: https://colorhunt.co/palette/f9f2ed3ab0ffffb562f87474 const chartDatasets = [{ @@ -48,24 +74,24 @@ const ticks = { y: { visible: true }, } -const plugins = { - tooltip: { - enabled: true, - type: 'nearest', - height: 150, - limit: 4, - }, - cursor: { - enabled: true, - } -} - -export const OperationsChart = memo(({ data, yDomain, height, onDomainChanged }) => { +export const OperationsChart = memo(({ data, yDomain, height, category, onDomainChanged }) => { const domain = useMemo(() => ({ y: { min: 0, max: yDomain }, // x: { min: new Date('2021-11-04 03:57'), max: new Date('2022-06-17 13:16') } }), [yDomain]) + const plugins = useMemo(() => ({ + menu: { enabled: false }, + cursor: { enabled: true }, + tooltip: { + enabled: true, + type: 'nearest', + height: 200, + limit: 4, + render: makeTooltipRender(category), + }, + }), [category]) + return ( {
- +
diff --git a/src/styles/detected_operations.less b/src/styles/detected_operations.less index 5084ee1..42e001b 100644 --- a/src/styles/detected_operations.less +++ b/src/styles/detected_operations.less @@ -24,3 +24,13 @@ } } } + +.detected-operations-tooltip { + display: flex; + flex-direction: column; + align-items: stretch; + + & > .tooltip-label { + text-align: center; + } +} \ No newline at end of file