diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx index 57dcde6..ae37671 100644 --- a/src/components/d3/monitoring/D3MonitoringCharts.tsx +++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx @@ -602,6 +602,7 @@ const _D3MonitoringCharts = >({ height={sizes.chartsHeight} left={sizes.inlineWidth + sizes.left} top={sizes.chartsTop} + zoneWidth={sizes.inlineWidth} /> = { height: number left: number top: number + zoneWidth?: number } const tooltipWidth = 300 -const tooltipHeight = 130 +const tooltipHeight = 120 const _D3MonitoringLimitChart = ({ yAxis, @@ -83,17 +84,17 @@ const _D3MonitoringLimitChart = ({ height, left, top, - regulators + regulators, + zoneWidth = 0 }: D3MonitoringLimitChartProps) => { const [ref, setRef] = useState(null) - const [tooltipRef, setTooltipRef] = useState(null) - const [selected, setSelected] = useState>({}) + const [selected, setSelected] = useState() const data = useMemo(() => calcualteData(chartData), [chartData]) useEffect(() => { if (!ref || !yAxis) return - const elms = d3.select(ref).selectAll('rect').data(data) + const elms = d3.select(ref).select('.bars').selectAll('rect').data(data) elms.exit().remove() const newElms = elms.enter().append('rect') @@ -104,32 +105,56 @@ const _D3MonitoringLimitChart = ({ .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 ( - + + + {selected && ( + + + + + + )} + - -
- - Регулятор: - {selected?.id ? regulators[selected.id].label : '---'} - Начало: - {formatDate(selected?.dateStart) ?? '---'} - {selected?.depthStart?.toFixed(2) ?? '---'} - м. - Конец: - {formatDate(selected?.dateEnd) ?? '---'} - {selected?.depthEnd?.toFixed(2) ?? '---'} - м. - -
-
+ {selected && ( + +
+ + Регулятор: + {regulators[selected.id].label} + Начало: + {formatDate(selected.dateStart)} + {selected.depthStart?.toFixed(2) ?? '---'} + м. + Конец: + {formatDate(selected.dateEnd)} + {selected.depthEnd?.toFixed(2) ?? '---'} + м. + +
+
+ )}
) }