Вид тултипа страницы операции улучшен

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] }]) => (
+    <div className={'detected-operations-tooltip'}>
+        <span className={'tooltip-label'}>{data.operationCategory?.name}</span>
+        <span className={'tooltip-label'}>{formatDate(data.dateStart, undefined, 'DD.MM.YYYY')}</span>
+        <Grid>
+            <GridItem row={1} col={1}>С:</GridItem>
+            <GridItem row={1} col={2}>{formatDate(data.dateStart, undefined, 'HH:mm:ss') ?? '----'}</GridItem>
+            <GridItem row={1} col={3}>{displayNumber(data.depthStart)} м</GridItem>
+            <GridItem row={2} col={1}>По:</GridItem>
+            <GridItem row={2} col={2}>{formatDate(data.dateEnd, undefined, 'HH:mm:ss') ?? '----'}</GridItem>
+            <GridItem row={2} col={3}>{displayNumber(data.depthEnd)} м</GridItem>
+        </Grid>
+        <Grid style={{ marginTop: 0 }}>
+            <GridItem row={1} col={1}>{category?.name ?? 'Ключ'}:</GridItem>
+            <GridItem row={1} col={2}>{displayNumber(data.value)}</GridItem>
+            <GridItem row={1} col={3}>{category?.unit ?? '----'}</GridItem>
+            <GridItem row={2} col={1}>Цель:</GridItem>
+            <GridItem row={2} col={2}>{displayNumber(data.operationValue?.targetValue)}</GridItem>
+            <GridItem row={2} col={3}>{category?.unit ?? '----'}</GridItem>
+        </Grid>
+    </div>
+)
+
 // Палитра: https://colorhunt.co/palette/f9f2ed3ab0ffffb562f87474
 
 const chartDatasets = [{
@@ -48,24 +74,24 @@ const ticks = {
     y: { visible: true },
 }
 
-const plugins = {
+export const OperationsChart = memo(({ data, yDomain, height, category, onDomainChanged }) => {
-    tooltip: {
-        enabled: true,
-        type: 'nearest',
-        height: 150,
-        limit: 4,
-    },
-    cursor: {
-        enabled: true,
-    }
-}
-
-export const OperationsChart = memo(({ data, yDomain, height, 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 (
         <D3Chart
             xAxis={xAxis}

src/pages/Telemetry/Operations/index.jsx

@@ -129,7 +129,12 @@ const Operations = memo(() => {
             </div>
             <LoaderPortal show={isLoading}>
                 <div className={'page-main'}>
-                    <OperationsChart data={data.operations} height={'50vh'} yDomain={yDomain} />
+                    <OperationsChart
+                        category={categories?.[selectedCategory]}
+                        data={data.operations}
+                        height={'50vh'}
+                        yDomain={yDomain}
+                    />
                     <OperationsTable data={data.stats} height={'20vh'} />
                 </div>
             </LoaderPortal>

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;
+    }
+}