ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Александр Сироткин 2022-11-28 05:18:55 +05:00
parent 0aeef42811
commit 7acb7ce2b2
3 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/d3/monitoring/D3HorizontalCursor.tsx
View File

@ -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]}

3
src/components/d3/monitoring/D3MonitoringCharts.tsx
View File

@ -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>

44
src/pages/Well/Telemetry/TelemetryView/cursorRender.jsx
View File

@ -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>
{group.charts.map((chart, i) => {
return (
<>
<Grid>
<GridItem row={1} col={1} colSpan={4} style={{ textAlign: 'center' }}>{yValue}</GridItem>
{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>
</>
)
}