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:
goodmice 2022-08-15 12:28:07 +05:00
parent 48ee08acab
commit cf27402810
2 changed files with 51 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -602,6 +602,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
height={sizes.chartsHeight}
left={sizes.inlineWidth + sizes.left}
top={sizes.chartsTop}
zoneWidth={sizes.inlineWidth}
/>
<D3MouseZone width={width} height={height} offset={{ ...offset, top: sizes.chartsTop }}>
<D3HorizontalCursor

75
src/components/d3/monitoring/D3MonitoringLimitChart.tsx
View File

@ -71,10 +71,11 @@ export type D3MonitoringLimitChartProps<DataType> = {
height: number
left: number
top: number
zoneWidth?: number
}
const tooltipWidth = 300
const tooltipHeight = 130
const tooltipHeight = 120
const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
yAxis,
@ -83,17 +84,17 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
height,
left,
top,
regulators
regulators,
zoneWidth = 0
}: D3MonitoringLimitChartProps<DataType>) => {
const [ref, setRef] = useState<SVGGElement | null>(null)
const [tooltipRef, setTooltipRef] = useState<SVGForeignObjectElement | null>(null)
const [selected, setSelected] = useState<Partial<LimitChartData & { x: number, y: number, visible: boolean }>>({})
const [selected, setSelected] = useState<LimitChartData & { x: number, y: number, visible: boolean }>()
const data = useMemo(() => calcualteData(chartData), [chartData])
useEffect(() => {
if (!ref || !yAxis) return
const elms = d3.select(ref).selectAll<SVGRectElement, unknown>('rect').data(data)
const elms = d3.select(ref).select('.bars').selectAll<SVGRectElement, unknown>('rect').data(data)
elms.exit().remove()
const newElms = elms.enter().append('rect')
@ -104,32 +105,56 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
.attr('y', (d) => yAxis(d.dateStart))
.attr('fill', (d) => regulators[d.id].color)
.on('mouseover', (_, d) => {
const y = (yAxis(d.dateStart) + yAxis(d.dateEnd) - tooltipHeight) / 2
setSelected({ ...d, y, x: -tooltipWidth, visible: true })
const y = yAxis(d.dateStart) - tooltipHeight
setSelected({ ...d, y, x: -tooltipWidth - 10, visible: true })
})
.on('mouseout', (_, d) => setSelected((pre) => ({ ...pre, visible: false })))
.on('mouseout', (_, d) => setSelected((pre) => pre ? ({ ...pre, visible: false }) : undefined))
}, [yAxis, data, ref, width])
const zoneY1 = useMemo(() => yAxis && selected ? yAxis(selected.dateStart) : 0, [yAxis, selected])
const zoneY2 = useMemo(() => yAxis && selected ? yAxis(selected.dateEnd) : 0, [yAxis, selected])
const tooltipStyle = useMemo(() => ({ transition: 'opacity .1s ease-in-out', opacity: selected?.visible ? 1 : 0 }), [selected])
return (
<g transform={`translate(${left}, ${top})`} stroke={'#333'} strokeWidth={1} fill={'none'}>
<g ref={setRef} strokeWidth={0} />
<g ref={setRef} >
<g className={'bars'} strokeWidth={0} />
{selected && (
<g strokeDasharray={'6, 3, 3, 3'} style={tooltipStyle} stroke={regulators[selected.id].color}>
<line x1={-zoneWidth} y1={zoneY1} y2={zoneY1} />
<line x1={-zoneWidth} y1={zoneY2} y2={zoneY2} />
<rect
opacity={0.1}
stroke={'none'}
x={-zoneWidth}
y={zoneY1}
width={zoneWidth}
height={zoneY2 - zoneY1}
fill={regulators[selected.id].color}
/>
</g>
)}
</g>
<rect x={0} y={0} width={width} height={height} />
<foreignObject ref={setTooltipRef} width={tooltipWidth} height={tooltipHeight} x={selected.x ?? 0} y={selected.y ?? 0} pointerEvents={'none'}>
<div className={'tooltip right'} style={{ transition: 'opacity .1s ease-in-out', opacity: selected.visible ? 1 : 0 }}>
<Grid>
<GridItem row={1} col={1}>Регулятор:</GridItem>
<GridItem row={1} col={2}>{selected?.id ? regulators[selected.id].label : '---'}</GridItem>
<GridItem row={2} col={1}>Начало:</GridItem>
<GridItem row={2} col={2}>{formatDate(selected?.dateStart) ?? '---'}</GridItem>
<GridItem row={2} col={3}>{selected?.depthStart?.toFixed(2) ?? '---'}</GridItem>
<GridItem row={2} col={4}>м.</GridItem>
<GridItem row={3} col={1}>Конец:</GridItem>
<GridItem row={3} col={2}>{formatDate(selected?.dateEnd) ?? '---'}</GridItem>
<GridItem row={3} col={3}>{selected?.depthEnd?.toFixed(2) ?? '---'}</GridItem>
<GridItem row={3} col={4}>м.</GridItem>
</Grid>
</div>
</foreignObject>
{selected && (
<foreignObject width={tooltipWidth} height={tooltipHeight} x={selected.x} y={selected.y} pointerEvents={'none'}>
<div className={'tooltip bottom'} style={tooltipStyle}>
<Grid>
<GridItem row={1} col={1}>Регулятор:</GridItem>
<GridItem row={1} col={2}>{regulators[selected.id].label}</GridItem>
<GridItem row={2} col={1}>Начало:</GridItem>
<GridItem row={2} col={2}>{formatDate(selected.dateStart)}</GridItem>
<GridItem row={2} col={3}>{selected.depthStart?.toFixed(2) ?? '---'}</GridItem>
<GridItem row={2} col={4}>м.</GridItem>
<GridItem row={3} col={1}>Конец:</GridItem>
<GridItem row={3} col={2}>{formatDate(selected.dateEnd)}</GridItem>
<GridItem row={3} col={3}>{selected.depthEnd?.toFixed(2) ?? '---'}</GridItem>
<GridItem row={3} col={4}>м.</GridItem>
</Grid>
</div>
</foreignObject>
)}
</g>
)
}