[charts] Add initial Zoom&Pan to the Pro charts (mui#13405)

Signed-off-by: Jose C Quintas Jr <[email protected]> Co-authored-by: alexandre <[email protected]> Co-authored-by: Alexandre Fauquette <[email protected]> Co-authored-by: Flavien DELANGLE <[email protected]>
DungTiger · Jul 23, 2024 · 6a3adbf · 6a3adbf
1 parent 78e48cf
commit 6a3adbf
Show file tree

Hide file tree

Showing 30 changed files with 1,586 additions and 82 deletions.
diff --git a/docs/data/charts/zoom-and-pan/ZoomBarChart.js b/docs/data/charts/zoom-and-pan/ZoomBarChart.js
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
+
+export default function ZoomBarChart() {
+  return (
+    <BarChartPro
+      width={600}
+      height={300}
+      zoom
+      series={[
+        {
+          label: 'Series A',
+          data: data.map((v) => v.y1),
+        },
+        {
+          label: 'Series B',
+          data: data.map((v) => v.y2),
+        },
+      ]}
+    />
+  );
+}
+
+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,
+  },
+];
diff --git a/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx b/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { BarChartPro } from '@mui/x-charts-pro/BarChartPro';
+
+export default function ZoomBarChart() {
+  return (
+    <BarChartPro
+      width={600}
+      height={300}
+      zoom
+      series={[
+        {
+          label: 'Series A',
+          data: data.map((v) => v.y1),
+        },
+        {
+          label: 'Series B',
+          data: data.map((v) => v.y2),
+        },
+      ]}
+    />
+  );
+}
+
+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,
+  },
+];
diff --git a/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx.preview b/docs/data/charts/zoom-and-pan/ZoomBarChart.tsx.preview
@@ -0,0 +1,15 @@
+<BarChartPro
+  width={600}
+  height={300}
+  zoom
+  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/ZoomLineChart.js b/docs/data/charts/zoom-and-pan/ZoomLineChart.js
@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { LineChartPro } from '@mui/x-charts-pro/LineChartPro';
+
+export default function ZoomLineChart() {
+  return (
+    <LineChartPro
+      width={600}
+      height={300}
+      zoom
+      series={[
+        {
+          label: 'Series A',
+          data: data.map((v) => v.y1),
+        },
+        {
+          label: 'Series B',
+          data: data.map((v) => v.y2),
+        },
+      ]}
+    />
+  );
+}
+
+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,
+  },
+];