[charts-pro] Add tapAndDrag zoom gesture

docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.js

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+
+const knobs = {
+  // Zoom interactions
+  wheel: {
+    displayName: 'Wheel',
+    knob: 'switch',
+    defaultValue: true,
+  },
+  pinch: {
+    displayName: 'Pinch',
+    knob: 'switch',
+    defaultValue: true,
+  },
+  tapAndDrag: {
+    displayName: 'Tap and drag',
+    knob: 'switch',
+    defaultValue: false,
+  },
+  // Pan interactions
+  drag: {
+    displayName: 'Drag',
+    knob: 'switch',
+    defaultValue: true,
+  },
+};
+
+export default function ZoomAndPanInteractions() {
+  return (
+    <ChartsUsageDemo
+      componentName="Zoom and Pan Interactions demo"
+      data={knobs}
+      renderDemo={(props) => {
+        // Build zoom interactions array
+        const zoomInteractions = [];
+        if (props.wheel) {
+          zoomInteractions.push('wheel');
+        }
+        if (props.pinch) {
+          zoomInteractions.push('pinch');
+        }
+        if (props.tapAndDrag) {
+          zoomInteractions.push('tapAndDrag');
+        }
+
+        // Build pan interactions array
+        const panInteractions = [];
+        if (props.drag) {
+          panInteractions.push('drag');
+        }
+
+        const zoomInteractionConfig = {
+          zoom: zoomInteractions,
+          pan: panInteractions,
+        };
+
+        return (
+          <div style={{ width: '100%' }}>
+            <ScatterChartPro
+              height={300}
+              xAxis={[
+                {
+                  data: data.map((v, i) => i),
+                  zoom: true,
+                },
+              ]}
+              yAxis={[
+                {
+                  zoom: true,
+                  width: 40,
+                },
+              ]}
+              series={series}
+              zoomInteractionConfig={zoomInteractionConfig}
+            />
+          </div>
+        );
+      }}
+      getCode={({ props }) => {
+        // Build zoom interactions array for code generation
+        const zoomInteractions = [];
+        if (props.wheel) {
+          zoomInteractions.push('wheel');
+        }
+        if (props.pinch) {
+          zoomInteractions.push('pinch');
+        }
+        if (props.tapAndDrag) {
+          zoomInteractions.push('tapAndDrag');
+        }
+
+        // Build pan interactions array
+        const panInteractions = [];
+        if (props.drag) {
+          panInteractions.push('drag');
+        }
+
+        const zoomConfig =
+          zoomInteractions.length > 0
+            ? `["${zoomInteractions.join('", "')}"]`
+            : '[]';
+        const panConfig =
+          panInteractions.length > 0 ? `["${panInteractions.join('", "')}"]` : '[]';
+
+        return `import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
+
+<ScatterChartPro
+  // ...
+  zoomInteractionConfig={{
+    zoom: ${zoomConfig},
+    pan: ${panConfig},
+  }}
+/>`;
+      }}
+    />
+  );
+}
+
+const data = [
+  {
+    x: 443,
+    y: 153,
+  },
+  {
+    x: 110,
+    y: 217,
+  },
+  {
+    x: 175,
+    y: 286,
+  },
+  {
+    x: 195,
+    y: 325,
+  },
+  {
+    x: 351,
+    y: 144,
+  },
+  {
+    x: 43,
+    y: 146,
+  },
+  {
+    x: 376,
+    y: 309,
+  },
+  {
+    x: 31,
+    y: 236,
+  },
+  {
+    x: 231,
+    y: 440,
+  },
+  {
+    x: 108,
+    y: 20,
+  },
+];
+
+const series = [
+  {
+    label: 'Series A',
+    data,
+  },
+];

docs/data/charts/zoom-and-pan/ZoomAndPanInteractions.tsx

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+
+const knobs = {
+  // Zoom interactions
+  wheel: {
+    displayName: 'Wheel',
+    knob: 'switch',
+    defaultValue: true,
+  },
+  pinch: {
+    displayName: 'Pinch',
+    knob: 'switch',
+    defaultValue: true,
+  },
+  tapAndDrag: {
+    displayName: 'Tap and drag',
+    knob: 'switch',
+    defaultValue: false,
+  },
+
+  // Pan interactions
+  drag: {
+    displayName: 'Drag',
+    knob: 'switch',
+    defaultValue: true,
+  },
+} as const;
+
+export default function ZoomAndPanInteractions() {
+  return (
+    <ChartsUsageDemo
+      componentName="Zoom and Pan Interactions demo"
+      data={knobs}
+      renderDemo={(props) => {
+        // Build zoom interactions array
+        const zoomInteractions: any[] = [];
+        if (props.wheel) {
+          zoomInteractions.push('wheel');
+        }
+        if (props.pinch) {
+          zoomInteractions.push('pinch');
+        }
+        if (props.tapAndDrag) {
+          zoomInteractions.push('tapAndDrag');
+        }
+
+        // Build pan interactions array
+        const panInteractions: any[] = [];
+        if (props.drag) {
+          panInteractions.push('drag');
+        }
+
+        const zoomInteractionConfig = {
+          zoom: zoomInteractions,
+          pan: panInteractions,
+        };
+
+        return (
+          <div style={{ width: '100%' }}>
+            <ScatterChartPro
+              height={300}
+              xAxis={[
+                {
+                  data: data.map((v, i) => i),
+                  zoom: true,
+                },
+              ]}
+              yAxis={[
+                {
+                  zoom: true,
+                  width: 40,
+                },
+              ]}
+              series={series}
+              zoomInteractionConfig={zoomInteractionConfig}
+            />
+          </div>
+        );
+      }}
+      getCode={({ props }) => {
+        // Build zoom interactions array for code generation
+        const zoomInteractions: any[] = [];
+        if (props.wheel) {
+          zoomInteractions.push('wheel');
+        }
+        if (props.pinch) {
+          zoomInteractions.push('pinch');
+        }
+        if (props.tapAndDrag) {
+          zoomInteractions.push('tapAndDrag');
+        }
+
+        // Build pan interactions array
+        const panInteractions: any[] = [];
+        if (props.drag) {
+          panInteractions.push('drag');
+        }
+
+        const zoomConfig =
+          zoomInteractions.length > 0
+            ? `["${zoomInteractions.join('", "')}"]`
+            : '[]';
+        const panConfig =
+          panInteractions.length > 0 ? `["${panInteractions.join('", "')}"]` : '[]';
+
+        return `import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
+
+<ScatterChartPro
+  // ...
+  zoomInteractionConfig={{
+    zoom: ${zoomConfig},
+    pan: ${panConfig},
+  }}
+/>`;
+      }}
+    />
+  );
+}
+
+const data = [
+  {
+    x: 443,
+    y: 153,
+  },
+  {
+    x: 110,
+    y: 217,
+  },
+  {
+    x: 175,
+    y: 286,
+  },
+  {
+    x: 195,
+    y: 325,
+  },
+  {
+    x: 351,
+    y: 144,
+  },
+  {
+    x: 43,
+    y: 146,
+  },
+  {
+    x: 376,
+    y: 309,
+  },
+  {
+    x: 31,
+    y: 236,
+  },
+  {
+    x: 231,
+    y: 440,
+  },
+  {
+    x: 108,
+    y: 20,
+  },
+];
+
+const series = [
+  {
+    label: 'Series A',
+    data,
+  },
+];

docs/data/charts/zoom-and-pan/zoom-and-pan.md

@@ -16,12 +16,16 @@ To enable zooming and panning, set the `zoom` prop to `true` on the wanted axis.
 
 Enabling zoom will enable all the interactions, which are made to be as intuitive as possible.
 
-The following actions are supported:
+The following actions are enabled by default:
 
 - **Scroll**: Zoom in/out by scrolling the mouse wheel.
 - **Drag**: Pan the chart by dragging the mouse.
 - **Pinch**: Zoom in/out by pinching the chart.
 
+Additional zoom interactions can be enabled through configuration:
+
+- **Tap and drag**: Zoom in/out by tapping twice and then dragging vertically.
+
 {{"demo": "ZoomScatterChart.js"}}
 {{"demo": "ZoomBarChart.js"}}
 {{"demo": "ZoomLineChart.js"}}
@@ -143,14 +147,26 @@ The `zoomInteractionConfig` prop allows you to specify which interactions are en
 ```jsx
 <BarChartPro
   zoomInteractionConfig={{
-    // Enable both wheel and pinch zoom
-    zoom: ['wheel', 'pinch'],
+    // Enable wheel, pinch, and tap-and-drag zoom
+    zoom: ['wheel', 'pinch', 'tapAndDrag'],
     // Enable drag panning
     pan: ['drag'],
   }}
 />
 ```
 
+**Zoom** interactions:
+
+- **`wheel`**: Zoom in/out by scrolling the mouse wheel (default)
+- **`pinch`**: Zoom in/out by pinching on touch devices (default)
+- **`tapAndDrag`**: Zoom in/out by tapping twice and then dragging vertically. Dragging up zooms in, dragging down zooms out.
+
+**Pan** interactions:
+
+- **`drag`**: Pan the chart by dragging with the mouse or touch (default)
+
+{{"demo": "ZoomAndPanInteractions.js"}}
+
 ### Key modifiers
 
 Some interactions allow setting up required keys to be pressed to enable the interaction.

docs/pages/x/api/charts/bar-chart-pro.json

@@ -129,7 +129,7 @@
     "zoomInteractionConfig": {
       "type": {
         "name": "shape",
-        "description": "{ pan?: Array&lt;'drag'<br>&#124;&nbsp;{ pointerMode?: 'mouse'<br>&#124;&nbsp;'touch', requiredKeys?: Array&lt;string&gt;, type: 'drag' }&gt;, zoom?: Array&lt;'pinch'<br>&#124;&nbsp;'wheel'<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: Array&lt;string&gt;, type: 'wheel' }<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: array, type: 'pinch' }&gt; }"
+        "description": "{ pan?: Array&lt;'drag'<br>&#124;&nbsp;{ pointerMode?: 'mouse'<br>&#124;&nbsp;'touch', requiredKeys?: Array&lt;string&gt;, type: 'drag' }&gt;, zoom?: Array&lt;'pinch'<br>&#124;&nbsp;'tapAndDrag'<br>&#124;&nbsp;'wheel'<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: Array&lt;string&gt;, type: 'wheel' }<br>&#124;&nbsp;{ pointerMode?: any, requiredKeys?: array, type: 'pinch' }<br>&#124;&nbsp;{ pointerMode?: 'mouse'<br>&#124;&nbsp;'touch', requiredKeys?: Array&lt;string&gt;, type: 'tapAndDrag' }&gt; }"
       }
     }
   },