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

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
}
const tooltipWidth = 300
const tooltipWidth = 270
const tooltipHeight = 120
const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
@ -139,18 +139,18 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
<rect x={0} y={0} width={width} height={height} />
{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>
<div className={'tooltip bottom'} style={{ ...tooltipStyle, display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
<span>Ограничивающий параметр</span>
<span>{regulators[selected.id].label}</span>
<Grid style={{ margin: 0 }}>
<GridItem row={1} col={1}>Начало:</GridItem>
<GridItem row={1} col={2}>{formatDate(selected.dateStart)}</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={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>