From 7acb7ce2b2a5c085ed53a819302f79537ec48e42 Mon Sep 17 00:00:00 2001 From: goodmice Date: Mon, 28 Nov 2022 05:18:55 +0500 Subject: [PATCH] =?UTF-8?q?=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD?= =?UTF-8?q?=D0=BE=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD?= =?UTF-8?q?=D0=B8=D0=B5=20=D0=A0=D0=A2=D0=9A=20=D0=B2=20=D0=BF=D0=BE=D0=B4?= =?UTF-8?q?=D1=81=D0=BA=D0=B0=D0=B7=D0=BA=D0=B5=20=D0=BC=D0=BE=D0=BD=D0=B8?= =?UTF-8?q?=D1=82=D0=BE=D1=80=D0=B8=D0=BD=D0=B3=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../d3/monitoring/D3HorizontalCursor.tsx | 10 +++-- .../d3/monitoring/D3MonitoringCharts.tsx | 3 +- .../Telemetry/TelemetryView/cursorRender.jsx | 44 +++++++++++++++---- 3 files changed, 43 insertions(+), 14 deletions(-) diff --git a/src/components/d3/monitoring/D3HorizontalCursor.tsx b/src/components/d3/monitoring/D3HorizontalCursor.tsx index c2ee50d..97dea97 100644 --- a/src/components/d3/monitoring/D3HorizontalCursor.tsx +++ b/src/components/d3/monitoring/D3HorizontalCursor.tsx @@ -11,7 +11,7 @@ import { ChartGroup, ChartSizes } from './D3MonitoringCharts' import '@styles/d3.less' -type D3GroupRenderFunction = (group: ChartGroup, data: DataType[]) => ReactNode +type D3GroupRenderFunction = (group: ChartGroup, data: DataType[], flowData: DataType[] | undefined) => ReactNode export type D3HorizontalCursorSettings = { width?: number @@ -27,6 +27,7 @@ export type D3HorizontalCursorSettings = { export type D3HorizontalCursorProps = D3HorizontalCursorSettings & { groups: ChartGroup[] data: DataType[] + flowData: DataType[] | undefined sizes: ChartSizes yAxis?: d3.ScaleTime spaceBetweenGroups?: number @@ -38,7 +39,7 @@ const defaultLineStyle: SVGProps = { const offsetY = 5 -const makeDefaultRender = (): D3GroupRenderFunction => (group, data) => ( +const makeDefaultRender = (): D3GroupRenderFunction => (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 = ({ lineStyle: _lineStyle, data, + flowData, groups, sizes, yAxis, @@ -167,7 +169,7 @@ const _D3HorizontalCursor = ({ 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 = ({ >
{tooltipBodies[i]} diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index df06431..9fc9c3b 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx @@ -250,7 +250,7 @@ const _D3MonitoringCharts = >({ .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 = >({ sizes={sizes} spaceBetweenGroups={spaceBetweenGroups} data={data} + flowData={flowData} height={height} /> diff --git a/src/pages/Well/Telemetry/TelemetryView/cursorRender.jsx b/src/pages/Well/Telemetry/TelemetryView/cursorRender.jsx index ad96f61..4a14358 100644 --- a/src/pages/Well/Telemetry/TelemetryView/cursorRender.jsx +++ b/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 ( - - {yValue} - {group.charts.map((chart, i) => { - return ( + <> + + {yValue} + {group.charts.filter((chart) => chart.type !== 'rect_area').map((chart, i) => ( - {getChartIcon(chart)} + {getChartIcon(chart)} {chart.shortLabel || chart.label} {xFormat(chart)} - ) - })} - + ))} + + + {group.charts.filter((chart) => chart.type === 'rect_area').map((chart, i) => { + const minX = getByAccessor(chart.minXAccessor) + const maxX = getByAccessor(chart.maxXAccessor) + const value = (row) => {defaultFormater(minX(row))} - {defaultFormater(maxX(row))} + + return ( + + {getChartIcon(chart)} + {chart.shortLabel || chart.label} + {flow.map((row) => ( + + {chart.xAxis.format?.(row) ?? value(row)} + + ))} + {chart.xAxis.unit} + + ) + })} + + ) }