From a924cd0ff1860531fc4783c383831b2a9a06a39f Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Thu, 27 Oct 2022 10:23:24 +0400
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=B7=D1=83=D0=BC=20=D0=B4=D0=BB=D1=8F=20=D0=B3=D1=80?=
 =?UTF-8?q?=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20=D0=BD=D0=B0=20=D1=81=D1=82?=
 =?UTF-8?q?=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5=20=D0=9E=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B0=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d3/D3Chart.tsx | 40 ++++++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/d3/D3Chart.tsx b/src/components/d3/D3Chart.tsx
index fa7822d..dff01e6 100644
--- a/src/components/d3/D3Chart.tsx
+++ b/src/components/d3/D3Chart.tsx
@@ -124,6 +124,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
     const [xAxisRef, setXAxisRef] = useState<SVGGElement | null>(null)
     const [yAxisRef, setYAxisRef] = useState<SVGGElement | null>(null)
     const [chartAreaRef, setChartAreaRef] = useState<SVGGElement | null>(null)
+    const [currentZoomState, setCurrentZoomState] = useState<d3.ZoomTransform | null>(null)
 
     const xAxisArea = useCallback(() => d3.select(xAxisRef), [xAxisRef])
     const yAxisArea = useCallback(() => d3.select(yAxisRef), [yAxisRef])
@@ -159,8 +160,13 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
             xAxis.domain([domain?.x?.min ?? minX, domain?.x?.max ?? maxX])
         }
 
+        if (currentZoomState) {
+            const newXScale = currentZoomState.rescaleX(xAxis)
+            xAxis.domain(newXScale.domain())
+        }
+
         return xAxis
-    }, [xAxisConfig, data, domain, width, offset])
+    }, [xAxisConfig, data, domain, width, offset, currentZoomState])
 
     const yAxis = useMemo(() => {
         if (!data) return
@@ -200,8 +206,13 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
 
         yAxis.range([height - offset.top - offset.bottom, 0])
 
+        if (currentZoomState) {
+            const newYScale = currentZoomState.rescaleY(yAxis)
+            yAxis.domain(newYScale.domain())
+        }
+
         return yAxis
-    }, [charts, data, domain, height, offset])
+    }, [charts, data, domain, height, offset, currentZoomState])
 
     const nTicks = {
         color: 'lightgray',
@@ -348,6 +359,19 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
         redrawCharts()
     }, [redrawCharts])
 
+    useEffect(() => {
+        if (!svgRef) return
+        const zoom = d3.zoom<SVGSVGElement, unknown>()
+            .scaleExtent([1, 5])
+            .translateExtent([[0, 0], [width, height]])
+            .on('zoom', () => {
+                const zoomState = d3.zoomTransform(svgRef)
+                setCurrentZoomState(zoomState)
+            })
+
+        d3.select(svgRef).call(zoom)
+    }, [svgRef, width, height, offset])
+
     return (
         <LoaderPortal
             show={loading}
@@ -366,7 +390,17 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
                         <svg ref={setSvgRef} width={'100%'} height={'100%'}>
                             <g ref={setXAxisRef} className={'axis x'} transform={`translate(${offset.left}, ${height - offset.bottom})`} />
                             <g ref={setYAxisRef} className={'axis y'} transform={`translate(${offset.left}, ${offset.top})`} />
-                            <g ref={setChartAreaRef} className={'chart-area'} transform={`translate(${offset.left}, ${offset.top})`}>
+                            <defs>
+                                <clipPath id={'clipPath'}>
+                                    <rect
+                                        x={0}
+                                        y={0}
+                                        width={Math.max(width - offset.left - offset.right, 0)}
+                                        height={Math.max(height - offset.top - offset.bottom, 0)}
+                                    />
+                                </clipPath>
+                            </defs>
+                            <g clipPath={'url(#clipPath)'} ref={setChartAreaRef} className={'chart-area'} transform={`translate(${offset.left}, ${offset.top})`}>
                                 <rect
                                     width={Math.max(width - offset.left - offset.right, 0)}
                                     height={Math.max(height - offset.top - offset.bottom, 0)}