[docs] Group demos data into the dataset folder (#19549)

Author: alexfauquette

docs/data/charts/lines/GDPperCapita.js renamed to docs/data/charts/dataset/gdpPerCapitaEvolution.js

@@ -0,0 +1,22 @@
+[
+  { "id": "data-1", "x1": 21, "y1": 201, "x2": 144, "y2": 17 },
+  { "id": "data-2", "x1": 242, "y1": 428, "x2": 159, "y2": 85 },
+  { "id": "data-3", "x1": 156, "y1": 324, "x2": 292, "y2": 196 },
+  { "id": "data-4", "x1": 42, "y1": 254, "x2": 226, "y2": 190 },
+  { "id": "data-5", "x1": 23, "y1": 209, "x2": 150, "y2": 38 },
+  { "id": "data-6", "x1": 228, "y1": 418, "x2": 297, "y2": 206 },
+  { "id": "data-7", "x1": 16, "y1": 194, "x2": 181, "y2": 110 },
+  { "id": "data-8", "x1": 145, "y1": 326, "x2": 295, "y2": 213 },
+  { "id": "data-9", "x1": 0, "y1": 241, "x2": 368, "y2": 282 },
+  { "id": "data-10", "x1": 133, "y1": 311, "x2": 314, "y2": 201 },
+  { "id": "data-11", "x1": 182, "y1": 362, "x2": 309, "y2": 224 },
+  { "id": "data-12", "x1": 14, "y1": 212, "x2": 353, "y2": 301 },
+  { "id": "data-13", "x1": 95, "y1": 321, "x2": 225, "y2": 128 },
+  { "id": "data-14", "x1": 27, "y1": 209, "x2": 330, "y2": 294 },
+  { "id": "data-15", "x1": 153, "y1": 382, "x2": 181, "y2": 74 },
+  { "id": "data-16", "x1": 180, "y1": 342, "x2": 196, "y2": 154 },
+  { "id": "data-17", "x1": 15, "y1": 197, "x2": 268, "y2": 177 },
+  { "id": "data-18", "x1": 94, "y1": 311, "x2": 348, "y2": 224 },
+  { "id": "data-19", "x1": 125, "y1": 270, "x2": 370, "y2": 281 },
+  { "id": "data-20", "x1": 241, "y1": 476, "x2": 280, "y2": 228 }
+]

docs/data/charts/lines/GDPperCapita.ts renamed to docs/data/charts/dataset/gdpPerCapitaEvolution.ts

@@ -3,6 +3,27 @@
  * Updated: Jun 6, 2025 7:46 AM CDT
  */
 
+export const dateAxisFormatter = (value, context) =>
+  value.toLocaleDateString(undefined, {
+    month:
+      // eslint-disable-next-line no-nested-ternary
+      context.location === 'tick'
+        ? undefined
+        : context.location === 'tooltip'
+          ? 'long'
+          : 'short',
+    year: 'numeric',
+  });
+
+export const percentageFormatter = (value) =>
+  value === null
+    ? ''
+    : new Intl.NumberFormat(undefined, {
+        style: 'percent',
+        minimumSignificantDigits: 1,
+        maximumSignificantDigits: 3,
+      }).format(value / 100);
+
 export const usUnemploymentRate = [
   { date: new Date('1948-01-01'), rate: 3.4 },
   { date: new Date('1948-02-01'), rate: 3.8 },

docs/data/charts/dataset/random/scatterParallel.json

@@ -3,6 +3,25 @@
  * Updated: Jun 6, 2025 7:46 AM CDT
  */
 
+import { AxisValueFormatterContext } from '@mui/x-charts/models';
+
+export const dateAxisFormatter = (value: Date, context: AxisValueFormatterContext<'time'>) =>
+  value.toLocaleDateString(undefined, {
+    month:
+      // eslint-disable-next-line no-nested-ternary
+      context.location === 'tick' ? undefined : context.location === 'tooltip' ? 'long' : 'short',
+    year: 'numeric',
+  });
+
+export const percentageFormatter = (value: number | null) =>
+  value === null
+    ? ''
+    : new Intl.NumberFormat(undefined, {
+        style: 'percent',
+        minimumSignificantDigits: 1,
+        maximumSignificantDigits: 3,
+      }).format(value / 100);
+
 export const usUnemploymentRate = [
   { date: new Date('1948-01-01'), rate: 3.4 },
   { date: new Date('1948-02-01'), rate: 3.8 },

docs/data/charts/dataset/usUnemploymentRate.js

@@ -71,7 +71,6 @@ export default function ExportChartToolbarCustomization() {
               if (context.location === 'tick' && context.defaultTickLabel === '') {
                 return '';
               }
-
               return populationFormatter.format(value);
             },
             zoom: true,

docs/data/charts/dataset/usUnemploymentRate.ts

@@ -74,7 +74,6 @@ export default function ExportChartToolbarCustomization() {
               if (context.location === 'tick' && context.defaultTickLabel === '') {
                 return '';
               }
-
               return populationFormatter.format(value);
             },
             zoom: true,

docs/data/charts/lines/worldElectricityProduction.js renamed to docs/data/charts/dataset/worldElectricityProduction.js

@@ -12,6 +12,8 @@ import { LineChart } from '@mui/x-charts/LineChart';
 import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { PieChart } from '@mui/x-charts/PieChart';
 
+import scatterDataset from '../dataset/random/scatterParallel.json';
+
 const barChartsParams = {
   series: [
     { data: [3, 4, 1, 6, 5], label: 'A' },
@@ -31,37 +33,10 @@ const lineChartsParams = {
 };
 
 const scatterChartsParams = {
+  dataset: scatterDataset,
   series: [
-    {
-      data: [
-        { x: 6.5e-2, y: -1.3, id: 0 },
-        { x: -2.1, y: -7.0e-1, id: 1 },
-        { x: -7.6e-1, y: -6.7e-1, id: 2 },
-        { x: -1.5e-2, y: -2.0e-1, id: 3 },
-        { x: -1.4, y: -9.9e-1, id: 4 },
-        { x: -1.1, y: -1.5, id: 5 },
-        { x: -7.0e-1, y: -2.7e-1, id: 6 },
-        { x: -5.1e-1, y: -8.8e-1, id: 7 },
-        { x: -4.0e-3, y: -1.4, id: 8 },
-        { x: -1.3, y: -2.2, id: 9 },
-      ],
-      label: 'A',
-    },
-    {
-      data: [
-        { x: 1.8, y: -1.7e-2, id: 0 },
-        { x: 7.1e-1, y: 2.6e-1, id: 1 },
-        { x: -1.2, y: 9.8e-1, id: 2 },
-        { x: 2.0, y: -2.0e-1, id: 3 },
-        { x: 9.4e-1, y: -2.7e-1, id: 4 },
-        { x: -4.8e-1, y: -1.6e-1, id: 5 },
-        { x: -1.5, y: 1.1, id: 6 },
-        { x: 1.3, y: 3.4e-1, id: 7 },
-        { x: -4.2e-1, y: 1.0e-1, id: 8 },
-        { x: 5.4e-2, y: 4.0e-1, id: 9 },
-      ],
-      label: 'B',
-    },
+    { datasetKeys: { id: 'id', x: 'x1', y: 'y1' }, label: 'A' },
+    { datasetKeys: { id: 'id', x: 'x2', y: 'y2' }, label: 'B' },
   ],
   height: 400,
 };