From fc91cfc6ff74039a4ffba8e4b8875853b59367a3 Mon Sep 17 00:00:00 2001
From: goodmice <hamel2517@gmail.com>
Date: Mon, 21 Nov 2022 08:49:03 +0500
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D1=80=D0=B5=D0=B3=D1=83=D0=BB=D1=8F=D1=82=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../d3/monitoring/D3MonitoringCharts.tsx      | 12 +++----
 .../d3/monitoring/D3MonitoringLimitChart.tsx  | 31 +++++++++++++++----
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/d3/monitoring/D3MonitoringCharts.tsx b/src/components/d3/monitoring/D3MonitoringCharts.tsx
index 0f6b320..8215cce 100644
--- a/src/components/d3/monitoring/D3MonitoringCharts.tsx
+++ b/src/components/d3/monitoring/D3MonitoringCharts.tsx
@@ -242,7 +242,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
         if (!data) return
 
         const yAxis = d3.scaleTime()
-            .domain([yDomain?.min ?? 0, yDomain?.max ?? 0])
+            .domain([yDomain?.min || 0, yDomain?.max || 0])
             .range([0, sizes.chartsHeight])
 
         return yAxis
@@ -453,7 +453,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                 .tickSize(yTicks.visible ? -width + offset.left + offset.right : 0)
                 .ticks(yTicks.count) as any // TODO: Исправить тип
             )
-        
+
         yAxisArea().selectAll('.tick line').attr('stroke', yTicks.color)
     }, [yAxisArea, yAxis, animDurationMs, width, offset, yTicks])
 
@@ -463,8 +463,8 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
         groups.forEach((group, i) => {
             group()
                 .attr('transform', `translate(${sizes.groupLeft(group.key)}, 0)`)
-                .attr('clip-path', `url(#chart-clip)`)
-            
+                .attr('clip-path', `url(#chart-group-clip)`)
+
             group.charts.forEach((chart) => {
                 chart()
                     .attr('color', chart.color || null)
@@ -506,7 +506,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                 chart.afterDraw?.(chart)
             })
         })
-    }, [data, groups, height, offset, sizes, chartDomains])
+    }, [data, groups, height, offset, sizes, chartDomains, yAxis])
 
     return (
         <LoaderPortal
@@ -530,7 +530,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
                     >
                         <svg ref={setSvgRef} width={'100%'} height={'100%'}>
                             <defs>
-                                <clipPath id={`chart-clip`}>
+                                <clipPath id={`chart-group-clip`}>
                                     {/*  Сдвиг во все стороны на 1 px чтобы линии на краях было видно */}
                                     <rect x={-1} y={-1} width={sizes.groupWidth + 2} height={sizes.chartsHeight + 2} />
                                 </clipPath>
diff --git a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx
index d58bdde..7e2aaec 100644
--- a/src/components/d3/monitoring/D3MonitoringLimitChart.tsx
+++ b/src/components/d3/monitoring/D3MonitoringLimitChart.tsx
@@ -92,6 +92,15 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
     const [ref, setRef] = useState<SVGGElement | null>(null)
     const [selected, setSelected] = useState<LimitChartData & { x: number, y: number, visible: boolean }>()
 
+    const selectedRegulator = useMemo(() => {
+        if (!selected) return null
+        const out = regulators[selected.id] || {
+            label: `ID = ${selected.id}`,
+            color: 'black',
+        }
+        return out
+    }, [selected, regulators])
+
     const data = useMemo(() => calcualteData(chartData), [chartData])
 
     useEffect(() => {
@@ -105,7 +114,7 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
             .attr('width', width)
             .attr('height', (d) => Math.max(yAxis(d.dateEnd) - yAxis(d.dateStart), 1))
             .attr('y', (d) => yAxis(d.dateStart))
-            .attr('fill', (d) => regulators[d.id].color)
+            .attr('fill', (d) => regulators[d.id]?.color || 'black')
             .on('mouseover', (_, d) => {
                 const y = yAxis(d.dateStart) - tooltipHeight
                 setSelected({ ...d, y, x: -tooltipWidth - 10, visible: true })
@@ -130,14 +139,24 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
 
     return (
         <g transform={`translate(${left}, ${top})`} stroke={'#333'} strokeWidth={1} fill={'none'}>
-            <g ref={setRef} >
-                <g className={'bars'} strokeWidth={0} />
+            <defs>
+                <clipPath id={`chart-limit-clip`}>
+                    {/*  Сдвиг во все стороны на 1 px чтобы линии на краях было видно */}
+                    <rect x={0} y={0} width={width} height={height} />
+                </clipPath>
+                <clipPath id={`chart-limit-fill-clip`}>
+                    <rect x={-zoneWidth} y={0} width={zoneWidth} height={height} />
+                </clipPath>
+            </defs>
+            <g ref={setRef}>
+                <g className={'bars'} strokeWidth={0} clipPath={`url(#chart-limit-clip)`} />
                 {selected && (
                     <g
                         style={opacityStyle}
                         pointerEvents={'none'}
                         strokeOpacity={0.4}
-                        stroke={regulators[selected.id].color}
+                        stroke={selectedRegulator?.color}
+                        clipPath={`url(#chart-limit-fill-clip)`}
                     >
                         <line x1={-zoneWidth} x2={0} y1={zoneY1} y2={zoneY1} />
                         <line x1={-zoneWidth} x2={0} y1={zoneY2} y2={zoneY2} />
@@ -148,7 +167,7 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
                             y={zoneY1}
                             width={zoneWidth}
                             height={zoneY2 - zoneY1}
-                            fill={regulators[selected.id].color}
+                            fill={selectedRegulator?.color}
                         />
                     </g>
                 )}
@@ -158,7 +177,7 @@ const _D3MonitoringLimitChart = <DataType extends TelemetryDataSaubDto>({
                 <foreignObject width={tooltipWidth} height={tooltipHeight} x={selected.x} y={selected.y} pointerEvents={'none'}>
                     <div className={'tooltip bottom'} style={tooltipStyle}>
                         <span>Ограничивающий параметр</span>
-                        <span>{regulators[selected.id].label}</span>
+                        <span>{selectedRegulator?.label}</span>
                         <Grid style={{ margin: 0, padding: 0 }}>
                             <GridItem row={1} col={1}>Начало:</GridItem>
                             <GridItem row={1} col={2}>{formatDate(selected.dateStart)}</GridItem>