Улучшено отображение РТК в подсказке мониторинга

src/components/d3/monitoring/D3HorizontalCursor.tsx

@@ -11,7 +11,7 @@ import { ChartGroup, ChartSizes } from './D3MonitoringCharts'
 
 import '@styles/d3.less'
 
-type D3GroupRenderFunction<DataType extends BaseDataType> = (group: ChartGroup<DataType>, data: DataType[]) => ReactNode
+type D3GroupRenderFunction<DataType extends BaseDataType> = (group: ChartGroup<DataType>, data: DataType[], flowData: DataType[] | undefined) => ReactNode
 
 export type D3HorizontalCursorSettings<DataType extends BaseDataType> = {
     width?: number
@@ -27,6 +27,7 @@ export type D3HorizontalCursorSettings<DataType extends BaseDataType> = {
 export type D3HorizontalCursorProps<DataType extends BaseDataType> = D3HorizontalCursorSettings<DataType> & {
     groups: ChartGroup<DataType>[]
     data: DataType[]
+    flowData: DataType[] | undefined
     sizes: ChartSizes
     yAxis?: d3.ScaleTime<number, number>
     spaceBetweenGroups?: number
@@ -38,7 +39,7 @@ const defaultLineStyle: SVGProps<SVGLineElement> = {
 
 const offsetY = 5
 
-const makeDefaultRender = <DataType extends BaseDataType>(): D3GroupRenderFunction<DataType> => (group, data) => (
+const makeDefaultRender = <DataType extends BaseDataType>(): D3GroupRenderFunction<DataType> => (group, data, flowData) => (
     <>
         {data.length > 0 ? group.charts.map((chart) => {
             const xFormat = (d: number | Date) => chart.xAxis.format?.(d) ?? `${(+d).toFixed(2)} ${chart.xAxis.unit ?? ''}`
@@ -74,6 +75,7 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
     lineStyle: _lineStyle,
 
     data,
+    flowData,
     groups,
     sizes,
     yAxis,
@@ -167,7 +169,7 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
             return (date >= currentDate - limitInS) && (date <= currentDate + limitInS)
         })
 
-        const bodies = groups.map((group) => render(group, chartData))
+        const bodies = groups.map((group) => render(group, chartData, flowData))
 
         setTooltipBodies(bodies)
     }, [groups, data, yAxis, lineY, fixed, mouseState.visible])
@@ -190,7 +192,7 @@ const _D3HorizontalCursor = <DataType extends BaseDataType>({
                 >
                     <div className={'tooltip-wrapper'}>
                         <div className={`adaptive-tooltip tooltip ${position} ${className}`}
-                             style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
+                            style={{height: 'auto', bottom: `${position === 'bottom' ? '0' : ''}`}}
                         >
                             <div className={'tooltip-content'}>
                                 {tooltipBodies[i]}

src/components/d3/monitoring/D3MonitoringCharts.tsx

@@ -250,7 +250,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
             .range([0, sizes.chartsHeight])
 
         return yAxis
-    }, [groups, data, yDomain, sizes.chartsHeight])
+    }, [groups, data, yDomain, sizes])
 
     const chartDomains = useMemo(() => groups.map((group) => {
         const out: [string | number, ChartDomain][] = group.charts.map((chart) => {
@@ -575,6 +575,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                                     sizes={sizes}
                                     spaceBetweenGroups={spaceBetweenGroups}
                                     data={data}
+                                    flowData={flowData}
                                     height={height}
                                 />
                             </D3MouseZone>

src/pages/Well/Telemetry/TelemetryView/cursorRender.jsx

@@ -1,38 +1,64 @@
 import { Fragment } from 'react'
 
+import { getByAccessor } from '@components/d3'
 import { Grid, GridItem } from '@components/Grid'
 import { getChartIcon, makeDisplayValue } from '@utils'
+import moment from 'moment'
 
 const defaultFormater = makeDisplayValue({ def: '---', fixed: 2 })
 const defaultValueRender = (v, unit) => (
     <>{defaultFormater(v)} {unit ?? ''}</>
 )
 
-export const cursorRender = (group, data) => {
+export const cursorRender = (group, data, flowData) => {
     const d = data.length > 0 ? data[0] : {}
 
     if (group.charts.length <= 0) return <></>
     const firstChart = group.charts[0]
     const y = firstChart.y(d)
+    const yDate = moment(y)
+    const flow = flowData.filter((row) => yDate.isBetween(row.dateStart, row.dateEnd, 's', '[]'))
     const yValue = firstChart.yAxis.format?.(y) ?? defaultValueRender(y, firstChart.yAxis.unit)
     const xFormat = (chart) => {
         const v = chart.x(d)
         return chart.xAxis.format?.(v) ?? defaultValueRender(v, chart.xAxis.unit)
     }
 
+    let j = 0
+
     return (
-        <Grid>
+        <>
-            <GridItem row={1} col={1} colSpan={4}>{yValue}</GridItem>
+            <Grid>
-            {group.charts.map((chart, i) => {
+                <GridItem row={1} col={1} colSpan={4} style={{ textAlign: 'center' }}>{yValue}</GridItem>
-                return (
+                {group.charts.filter((chart) => chart.type !== 'rect_area').map((chart, i) => (
                     <Fragment key={chart.key}>
-                        <GridItem row={i+2} col={1} style={{ padding: '4px 0' }}>{getChartIcon(chart)}</GridItem>
+                        <GridItem row={i+2} col={1} style={{ padding: '2px 0' }}>{getChartIcon(chart)}</GridItem>
                         <GridItem row={i+2} col={2}>{chart.shortLabel || chart.label}</GridItem>
                         <GridItem row={i+2} col={3} style={{ paddingRight: 0, textAlign: 'end' }}>{xFormat(chart)}</GridItem>
                     </Fragment>
-                )
+                ))}
-            })}
+            </Grid>
-        </Grid>
+            <Grid>
+                {group.charts.filter((chart) => chart.type === 'rect_area').map((chart, i) => {
+                    const minX = getByAccessor(chart.minXAccessor)
+                    const maxX = getByAccessor(chart.maxXAccessor)
+                    const value = (row) => <span>{defaultFormater(minX(row))} - {defaultFormater(maxX(row))}</span>
+
+                    return (
+                        <Fragment key={chart.key}>
+                            <GridItem row={i+2} col={1} style={{ padding: '2px 0' }}>{getChartIcon(chart)}</GridItem>
+                            <GridItem row={i+2} col={2}>{chart.shortLabel || chart.label}</GridItem>
+                            {flow.map((row) => (
+                                <GridItem row={i+2+(j++)} col={3} style={{ paddingRight: 0, textAlign: 'end' }}>
+                                    {chart.xAxis.format?.(row) ?? value(row)}
+                                </GridItem>
+                            ))}
+                            <GridItem row={i+2} col={4} style={{ textAlign: 'end' }}>{chart.xAxis.unit}</GridItem>
+                        </Fragment>
+                    )
+                })}
+            </Grid>
+        </>
     )
 }