Изменён вид тултипа

This commit is contained in:
goodmice 2022-08-15 12:35:31 +05:00
parent cf27402810
commit 8ade639e0e

View File

@ -74,7 +74,7 @@ export type D3MonitoringLimitChartProps<DataType> = {
zoneWidth?: number zoneWidth?: number
} }
const tooltipWidth = 300 const tooltipWidth = 270
const tooltipHeight = 120 const tooltipHeight = 120
const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
@ -139,18 +139,18 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
<rect x={0} y={0} width={width} height={height} /> <rect x={0} y={0} width={width} height={height} />
{selected && ( {selected && (
<foreignObject width={tooltipWidth} height={tooltipHeight} x={selected.x} y={selected.y} pointerEvents={'none'}> <foreignObject width={tooltipWidth} height={tooltipHeight} x={selected.x} y={selected.y} pointerEvents={'none'}>
<div className={'tooltip bottom'} style={tooltipStyle}> <div className={'tooltip bottom'} style={{ ...tooltipStyle, display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<Grid> <span>Ограничивающий параметр</span>
<GridItem row={1} col={1}>Регулятор:</GridItem> <span>{regulators[selected.id].label}</span>
<GridItem row={1} col={2}>{regulators[selected.id].label}</GridItem> <Grid style={{ margin: 0 }}>
<GridItem row={2} col={1}>Начало:</GridItem> <GridItem row={1} col={1}>Начало:</GridItem>
<GridItem row={2} col={2}>{formatDate(selected.dateStart)}</GridItem> <GridItem row={1} col={2}>{formatDate(selected.dateStart)}</GridItem>
<GridItem row={2} col={3}>{selected.depthStart?.toFixed(2) ?? '---'}</GridItem> <GridItem row={1} col={3}>{selected.depthStart?.toFixed(2) ?? '---'}</GridItem>
<GridItem row={1} col={4}>м.</GridItem>
<GridItem row={2} col={1}>Конец:</GridItem>
<GridItem row={2} col={2}>{formatDate(selected.dateEnd)}</GridItem>
<GridItem row={2} col={3}>{selected.depthEnd?.toFixed(2) ?? '---'}</GridItem>
<GridItem row={2} col={4}>м.</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> </Grid>
</div> </div>
</foreignObject> </foreignObject>