From 17c388c0b7ad9c122b6c244515dfbbdf294b6869 Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Tue, 1 Nov 2022 13:54:45 +0400
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=20=D0=B7=D1=83=D0=BC=20=D0=B4=D0=BB=D1=8F=20=D0=B3?=
 =?UTF-8?q?=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0=20D3Chart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/d3/D3Chart.tsx                 | 23 ++++++++++++-------
 .../Telemetry/Operations/OperationsChart.jsx  |  5 ++++
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/d3/D3Chart.tsx b/src/components/d3/D3Chart.tsx
index dff01e6..2aedeab 100644
--- a/src/components/d3/D3Chart.tsx
+++ b/src/components/d3/D3Chart.tsx
@@ -93,6 +93,11 @@ export type D3ChartProps<DataType extends BaseDataType> = React.DetailedHTMLProp
         /** Параметры блока легенды */
         legend?: BasePluginSettings & D3LegendSettings
     }
+    /** Добавление зума графику */
+    zoom?: {
+        /** Массив коэффициентов приближения k0 - минимальный k1 - максимальный коэффициент */
+        scaleExtent: [k0: number, k1: number]
+    }
 }
 
 const getDefaultXAxisConfig = <DataType extends BaseDataType>(): ChartAxis<DataType> => ({
@@ -115,6 +120,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
     ticks,
     plugins,
     dash,
+    zoom,
     ...other
 }: D3ChartProps<DataType>) => {
     const xAxisConfig = usePartialProps<ChartAxis<DataType>>(_xAxisConfig, getDefaultXAxisConfig)
@@ -360,17 +366,18 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
     }, [redrawCharts])
 
     useEffect(() => {
-        if (!svgRef) return
-        const zoom = d3.zoom<SVGSVGElement, unknown>()
-            .scaleExtent([1, 5])
-            .translateExtent([[0, 0], [width, height]])
+        if (!svgRef || !zoom) return
+        const zoomBehavior = d3.zoom<SVGSVGElement, unknown>()
+            .scaleExtent(zoom.scaleExtent)
+            .translateExtent([[0, 0], [width - offset.left - offset.right, height - offset.top - offset.bottom]])
+            .extent([[0, 0], [width - offset.left - offset.right, height - offset.top - offset.bottom]])
             .on('zoom', () => {
                 const zoomState = d3.zoomTransform(svgRef)
                 setCurrentZoomState(zoomState)
             })
 
-        d3.select(svgRef).call(zoom)
-    }, [svgRef, width, height, offset])
+        d3.select(svgRef).call(zoomBehavior)
+    }, [svgRef, zoom, width, height, offset])
 
     return (
         <LoaderPortal
@@ -391,7 +398,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
                             <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})`} />
                             <defs>
-                                <clipPath id={'clipPath'}>
+                                <clipPath id={'clipZoomData'}>
                                     <rect
                                         x={0}
                                         y={0}
@@ -400,7 +407,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
                                     />
                                 </clipPath>
                             </defs>
-                            <g clipPath={'url(#clipPath)'} ref={setChartAreaRef} className={'chart-area'} transform={`translate(${offset.left}, ${offset.top})`}>
+                            <g clipPath={'url(#clipZoomData)'} 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)}
diff --git a/src/pages/Well/Telemetry/Operations/OperationsChart.jsx b/src/pages/Well/Telemetry/Operations/OperationsChart.jsx
index 3a20be2..e560a67 100644
--- a/src/pages/Well/Telemetry/Operations/OperationsChart.jsx
+++ b/src/pages/Well/Telemetry/Operations/OperationsChart.jsx
@@ -100,6 +100,10 @@ export const OperationsChart = memo(({ data, yDomain, height, category, onDomain
         },
     }), [category])
 
+    const zoom = useMemo(() => ({
+        scaleExtent: [1, 5]
+    }), [])
+
     return (
         <D3Chart
             xAxis={xAxis}
@@ -109,6 +113,7 @@ export const OperationsChart = memo(({ data, yDomain, height, category, onDomain
             height={height}
             plugins={plugins}
             ticks={ticks}
+            zoom={zoom}
         />
     )
 })