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