From cf274028104d63e6ad6e6eb058190f4379275a16 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Mon, 15 Aug 2022 12:28:07 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B3=D0=BE=D1=80=D0=B8=D0=B7=D0=BE=D0=BD=D1=82?=
 =?UTF-8?q?=D0=B0=D0=BB=D1=8C=D0=BD=D0=B0=D1=8F=20=D0=B7=D0=BE=D0=BD=D0=B0?=
 =?UTF-8?q?=20=D1=80=D0=B5=D0=B3=D1=83=D0=BB=D1=8F=D1=82=D0=BE=D1=80=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/monitoring/D3MonitoringCharts.tsx      |  1 +
 .../d3/monitoring/D3MonitoringLimitChart.tsx  | 75 ++++++++++++-------
 2 files changed, 51 insertions(+), 25 deletions(-)

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 = <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
diff --git a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx
index 9017b05..e5f9be0 100644
--- a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx
+++ b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx
@@ -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>
     )
 }