[charts] Allow Zoom to be controllable (#13858)

Signed-off-by: Jose C Quintas Jr <[email protected]> Co-authored-by: Alexandre Fauquette <[email protected]>
mui · Jul 23, 2024 · 88b9a96 · 88b9a96
1 parent 613087e
commit 88b9a96
Show file tree

Hide file tree

Showing 29 changed files with 746 additions and 122 deletions.
diff --git a/docs/data/charts/zoom-and-pan/ZoomControlled.js b/docs/data/charts/zoom-and-pan/ZoomControlled.js
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
+
+import { Button } from '@mui/base';
+
+export default function ZoomControlled() {
+  const [zoom, setZoom] = React.useState([
+    {
+      axisId: 'my-x-axis',
+      start: 20,
+      end: 40,
+    },
+  ]);
+
+  return (
+    <div>
+      <Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
+        Reset zoom
+      </Button>
+      <LineChartPro
+        {...chartProps}
+        zoom={zoom}
+        onZoomChange={setZoom}
+        xAxis={[
+          {
+            zoom: true,
+            scaleType: 'point',
+            id: 'my-x-axis',
+            data: data.map((v, i) => i),
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+const data = [
+  {
+    y1: 443.28,
+    y2: 153.9,
+  },
+  {
+    y1: 110.5,
+    y2: 217.8,
+  },
+  {
+    y1: 175.23,
+    y2: 286.32,
+  },
+  {
+    y1: 195.97,
+    y2: 325.12,
+  },
+  {
+    y1: 351.77,
+    y2: 144.58,
+  },
+  {
+    y1: 43.253,
+    y2: 146.51,
+  },
+  {
+    y1: 376.34,
+    y2: 309.69,
+  },
+  {
+    y1: 31.514,
+    y2: 236.38,
+  },
+  {
+    y1: 231.31,
+    y2: 440.72,
+  },
+  {
+    y1: 108.04,
+    y2: 20.29,
+  },
+  {
+    y1: 321.77,
+    y2: 484.17,
+  },
+  {
+    y1: 120.18,
+    y2: 54.962,
+  },
+  {
+    y1: 366.2,
+    y2: 418.5,
+  },
+  {
+    y1: 451.45,
+    y2: 181.32,
+  },
+  {
+    y1: 294.8,
+    y2: 440.9,
+  },
+  {
+    y1: 121.83,
+    y2: 273.52,
+  },
+  {
+    y1: 287.7,
+    y2: 346.7,
+  },
+  {
+    y1: 134.06,
+    y2: 74.528,
+  },
+  {
+    y1: 104.5,
+    y2: 150.9,
+  },
+  {
+    y1: 413.07,
+    y2: 26.483,
+  },
+  {
+    y1: 74.68,
+    y2: 333.2,
+  },
+  {
+    y1: 360.6,
+    y2: 422.0,
+  },
+  {
+    y1: 330.72,
+    y2: 488.06,
+  },
+];
+
+const chartProps = {
+  width: 600,
+  height: 300,
+  series: [
+    {
+      label: 'Series A',
+      data: data.map((v) => v.y1),
+    },
+    {
+      label: 'Series B',
+      data: data.map((v) => v.y2),
+    },
+  ],
+};
diff --git a/docs/data/charts/zoom-and-pan/ZoomControlled.tsx b/docs/data/charts/zoom-and-pan/ZoomControlled.tsx
@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
+import { ZoomData } from '@mui/x-charts-pro/context';
+import { Button } from '@mui/base';
+
+export default function ZoomControlled() {
+  const [zoom, setZoom] = React.useState<ZoomData[]>([
+    {
+      axisId: 'my-x-axis',
+      start: 20,
+      end: 40,
+    },
+  ]);
+
+  return (
+    <div>
+      <Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
+        Reset zoom
+      </Button>
+      <LineChartPro
+        {...chartProps}
+        zoom={zoom}
+        onZoomChange={setZoom}
+        xAxis={[
+          {
+            zoom: true,
+            scaleType: 'point',
+            id: 'my-x-axis',
+            data: data.map((v, i) => i),
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+const data = [
+  {
+    y1: 443.28,
+    y2: 153.9,
+  },
+  {
+    y1: 110.5,
+    y2: 217.8,
+  },
+  {
+    y1: 175.23,
+    y2: 286.32,
+  },
+  {
+    y1: 195.97,
+    y2: 325.12,
+  },
+  {
+    y1: 351.77,
+    y2: 144.58,
+  },
+  {
+    y1: 43.253,
+    y2: 146.51,
+  },
+  {
+    y1: 376.34,
+    y2: 309.69,
+  },
+  {
+    y1: 31.514,
+    y2: 236.38,
+  },
+  {
+    y1: 231.31,
+    y2: 440.72,
+  },
+  {
+    y1: 108.04,
+    y2: 20.29,
+  },
+  {
+    y1: 321.77,
+    y2: 484.17,
+  },
+  {
+    y1: 120.18,
+    y2: 54.962,
+  },
+  {
+    y1: 366.2,
+    y2: 418.5,
+  },
+  {
+    y1: 451.45,
+    y2: 181.32,
+  },
+  {
+    y1: 294.8,
+    y2: 440.9,
+  },
+  {
+    y1: 121.83,
+    y2: 273.52,
+  },
+  {
+    y1: 287.7,
+    y2: 346.7,
+  },
+  {
+    y1: 134.06,
+    y2: 74.528,
+  },
+  {
+    y1: 104.5,
+    y2: 150.9,
+  },
+  {
+    y1: 413.07,
+    y2: 26.483,
+  },
+  {
+    y1: 74.68,
+    y2: 333.2,
+  },
+  {
+    y1: 360.6,
+    y2: 422.0,
+  },
+  {
+    y1: 330.72,
+    y2: 488.06,
+  },
+];
+
+const chartProps = {
+  width: 600,
+  height: 300,
+  series: [
+    {
+      label: 'Series A',
+      data: data.map((v) => v.y1),
+    },
+    {
+      label: 'Series B',
+      data: data.map((v) => v.y2),
+    },
+  ],
+};
diff --git a/docs/data/charts/zoom-and-pan/ZoomControlled.tsx.preview b/docs/data/charts/zoom-and-pan/ZoomControlled.tsx.preview
@@ -0,0 +1,16 @@
+<Button onClick={() => setZoom([{ axisId: 'my-x-axis', start: 0, end: 100 }])}>
+  Reset zoom
+</Button>
+<LineChartPro
+  {...chartProps}
+  zoom={zoom}
+  onZoomChange={setZoom}
+  xAxis={[
+    {
+      zoom: true,
+      scaleType: 'point',
+      id: 'my-x-axis',
+      data: data.map((v, i) => i),
+    },
+  ]}
+/>
diff --git a/docs/data/charts/zoom-and-pan/zoom-and-pan.md b/docs/data/charts/zoom-and-pan/zoom-and-pan.md
@@ -47,3 +47,18 @@ The following options are available:
 - **panning**: Enables or disables panning.
 
 {{"demo": "ZoomOptionsNoSnap.js", "hideToolbar": true, "bg": "playground"}}
+
+## Controlled zoom
+
+You can control the zoom state by setting the `zoom` and `onZoomChange` props.
+This way, you can control the zoom state from outside the chart.
+
+The `onZoomChange` prop is a function that receives the new zoom state.
+
+While the `zoom` prop is an array of objects that define the zoom state for each axis with zoom enabled.
+
+- **axisId**: The id of the axis to control.
+- **start**: The starting percentage of the axis range.
+- **end**: The ending percentage of the zoom range.
+
+{{"demo": "ZoomControlled.js"}}
diff --git a/docs/pages/x/api/charts/chart-container-pro.json b/docs/pages/x/api/charts/chart-container-pro.json
@@ -32,6 +32,13 @@
         "describedArgs": ["highlightedItem"]
       }
     },
+    "onZoomChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(zoomData: Array<ZoomData>) => void",
+        "describedArgs": ["zoomData"]
+      }
+    },
     "plugins": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "xAxis": {
       "type": {
@@ -50,6 +57,12 @@
         "name": "arrayOf",
         "description": "Array&lt;{ colorMap?: { colors: Array&lt;string&gt;, type: 'ordinal', unknownColor?: string, values?: Array&lt;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string&gt; }<br>&#124;&nbsp;{ color: Array&lt;string&gt;<br>&#124;&nbsp;func, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, type: 'continuous' }<br>&#124;&nbsp;{ colors: Array&lt;string&gt;, thresholds: Array&lt;Date<br>&#124;&nbsp;number&gt;, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }&gt;"
       }
+    },
+    "zoom": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ axisId: number<br>&#124;&nbsp;string, end: number, start: number }&gt;"
+      }
     }
   },
   "name": "ChartContainerPro",

diff --git a/docs/pages/x/api/charts/responsive-chart-container-pro.json b/docs/pages/x/api/charts/responsive-chart-container-pro.json
@@ -31,6 +31,13 @@
         "describedArgs": ["highlightedItem"]
       }
     },
+    "onZoomChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(zoomData: Array<ZoomData>) => void",
+        "describedArgs": ["zoomData"]
+      }
+    },
     "plugins": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
     "width": { "type": { "name": "number" } },
     "xAxis": {
@@ -50,6 +57,12 @@
         "name": "arrayOf",
         "description": "Array&lt;{ colorMap?: { colors: Array&lt;string&gt;, type: 'ordinal', unknownColor?: string, values?: Array&lt;Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string&gt; }<br>&#124;&nbsp;{ color: Array&lt;string&gt;<br>&#124;&nbsp;func, max?: Date<br>&#124;&nbsp;number, min?: Date<br>&#124;&nbsp;number, type: 'continuous' }<br>&#124;&nbsp;{ colors: Array&lt;string&gt;, thresholds: Array&lt;Date<br>&#124;&nbsp;number&gt;, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }&gt;"
       }
+    },
+    "zoom": {
+      "type": {
+        "name": "arrayOf",
+        "description": "Array&lt;{ axisId: number<br>&#124;&nbsp;string, end: number, start: number }&gt;"
+      }
     }
   },
   "name": "ResponsiveChartContainerPro",