[charts] Use new text component to avoid tick label overflow on x-axis (

#10648) Co-authored-by: Lukas <[email protected]> Co-authored-by: Sam Sycamore <[email protected]>
mui · Oct 19, 2023 · 79bbfa6 · 79bbfa6
1 parent a13750b
commit 79bbfa6
Show file tree

Hide file tree

Showing 45 changed files with 1,328 additions and 165 deletions.
diff --git a/docs/data/charts/axis/AxisCustomizationNoSnap.js b/docs/data/charts/axis/AxisCustomizationNoSnap.js
@@ -17,7 +17,6 @@ const defaultXAxis = {
   disableTicks: false,
   fontSize: 12,
   label: 'My axis',
-  labelFontSize: 14,
   tickSize: 6,
 };
 export default function AxisCustomizationNoSnap() {
@@ -27,9 +26,7 @@ export default function AxisCustomizationNoSnap() {
       data={[
         { propName: 'disableLine', knob: 'switch', defaultValue: false },
         { propName: 'disableTicks', knob: 'switch', defaultValue: false },
-        { propName: 'fontSize', knom: 'number', defaultValue: 12 },
         { propName: 'label', knob: 'input', defaultValue: 'my axis' },
-        { propName: 'labelFontSize', knom: 'number', defaultValue: 14 },
         { propName: 'tickSize', knob: 'number', defaultValue: 6 },
       ]}
       renderDemo={(props) => (

diff --git a/docs/data/charts/axis/AxisTextCustomizationNoSnap.js b/docs/data/charts/axis/AxisTextCustomizationNoSnap.js
@@ -0,0 +1,170 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { BarChart } from '@mui/x-charts/BarChart';
+
+const chartSetting = {
+  height: 300,
+};
+const dataset = [
+  {
+    london: 59,
+    paris: 57,
+    newYork: 86,
+    seoul: 21,
+    month: 'Jan',
+  },
+  {
+    london: 50,
+    paris: 52,
+    newYork: 78,
+    seoul: 28,
+    month: 'Fev',
+  },
+  {
+    london: 47,
+    paris: 53,
+    newYork: 106,
+    seoul: 41,
+    month: 'Mar',
+  },
+  {
+    london: 54,
+    paris: 56,
+    newYork: 92,
+    seoul: 73,
+    month: 'Apr',
+  },
+  {
+    london: 57,
+    paris: 69,
+    newYork: 92,
+    seoul: 99,
+    month: 'May',
+  },
+  {
+    london: 60,
+    paris: 63,
+    newYork: 103,
+    seoul: 144,
+    month: 'June',
+  },
+  {
+    london: 59,
+    paris: 60,
+    newYork: 105,
+    seoul: 319,
+    month: 'July',
+  },
+  {
+    london: 65,
+    paris: 60,
+    newYork: 106,
+    seoul: 249,
+    month: 'Aug',
+  },
+  {
+    london: 51,
+    paris: 51,
+    newYork: 95,
+    seoul: 131,
+    month: 'Sept',
+  },
+  {
+    london: 60,
+    paris: 65,
+    newYork: 97,
+    seoul: 55,
+    month: 'Oct',
+  },
+  {
+    london: 67,
+    paris: 64,
+    newYork: 76,
+    seoul: 48,
+    month: 'Nov',
+  },
+  {
+    london: 61,
+    paris: 70,
+    newYork: 103,
+    seoul: 25,
+    month: 'Dec',
+  },
+];
+
+const valueFormatter = (value) => `${value}mm`;
+
+export default function AxisTextCustomizationNoSnap() {
+  return (
+    <ChartsUsageDemo
+      componentName="Alert"
+      data={[
+        { propName: 'angle', knob: 'number', defaultValue: 45, min: -180, max: 180 },
+        {
+          propName: 'textAnchor',
+          knob: 'select',
+          defaultValue: 'start',
+          options: ['start', 'middle', 'end'],
+        },
+        { propName: 'fontSize', knob: 'number', defaultValue: 12 },
+        { propName: 'labelFontSize', knob: 'number', defaultValue: 14 },
+      ]}
+      renderDemo={(props) => (
+        <Box sx={{ width: '100%', maxWidth: 400 }}>
+          <BarChart
+            dataset={dataset}
+            xAxis={[
+              {
+                scaleType: 'band',
+                dataKey: 'month',
+                label: 'months',
+                labelStyle: {
+                  fontSize: props.labelFontSize,
+                  transform: `translateY(${
+                    5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
+                  }px)`,
+                },
+                tickLabelStyle: {
+                  angle: props.angle,
+                  textAnchor: props.textAnchor,
+                  fontSize: props.fontSize,
+                },
+              },
+            ]}
+            series={[
+              { dataKey: 'london', label: 'London', valueFormatter },
+              { dataKey: 'paris', label: 'Paris', valueFormatter },
+              { dataKey: 'newYork', label: 'New York', valueFormatter },
+              { dataKey: 'seoul', label: 'Seoul', valueFormatter },
+            ]}
+            {...chartSetting}
+          />
+        </Box>
+      )}
+      getCode={({ props }) =>
+        [
+          `import { ScatterChart } from '@mui/x-charts/ScatterChart';`,
+          '',
+          `<ScatterChart`,
+          '  {/** ... */}',
+          `  bottomAxis={{`,
+          `    labelStyle: {`,
+          `      fontSize: ${props.labelFontSize},`,
+          `      transform: \`translateY(\${
+            // Hack that should be added in the lib latter.
+            5 * Math.abs(Math.sin((Math.PI * props.angle) / 180))
+          }px)\``,
+          `    },`,
+          `    tickLabelStyle: {`,
+          `      angle: ${props.angle},`,
+          `      textAnchor: '${props.textAnchor}',`,
+          `      fontSize: ${props.fontSize},`,
+          `    },`,
+          '  }}',
+          '/>',
+        ].join('\n')
+      }
+    />
+  );
+}
diff --git a/docs/data/charts/axis/TickLabelPosition.js b/docs/data/charts/axis/TickLabelPosition.js
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+import { LineChart } from '@mui/x-charts/LineChart';
+
+export default function TickLabelPosition() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 800 }}>
+      <LineChart
+        xAxis={[
+          {
+            ...xAxisCommon,
+            id: 'bottomAxis',
+            scaleType: 'point',
+            tickInterval: (time) => [0, 12].includes(time.getHours()),
+            tickLabelInterval: (time) => time.getHours() === 0,
+          },
+          {
+            ...xAxisCommon,
+            id: 'topAxis',
+            scaleType: 'point',
+          },
+        ]}
+        {...config}
+      />
+    </Box>
+  );
+}
+
+const valueFormatter = (date) =>
+  date.toLocaleDateString('fr-FR', {
+    month: '2-digit',
+    day: '2-digit',
+  });
+
+const timeData = [
+  new Date(2023, 7, 31),
+  new Date(2023, 7, 31, 3),
+  new Date(2023, 7, 31, 6),
+  new Date(2023, 7, 31, 9),
+  new Date(2023, 7, 31, 12),
+  new Date(2023, 7, 31, 15),
+  new Date(2023, 7, 31, 18),
+  new Date(2023, 8, 1),
+  new Date(2023, 8, 1, 3),
+  new Date(2023, 8, 1, 6),
+  new Date(2023, 8, 1, 9),
+  new Date(2023, 8, 1, 12),
+  new Date(2023, 8, 1, 15),
+  new Date(2023, 8, 1, 18),
+  new Date(2023, 8, 2),
+  new Date(2023, 8, 2, 3),
+  new Date(2023, 8, 2, 6),
+  new Date(2023, 8, 2, 9),
+  new Date(2023, 8, 2, 12),
+  new Date(2023, 8, 2, 15),
+  new Date(2023, 8, 2, 18),
+  new Date(2023, 8, 3),
+  new Date(2023, 8, 3, 3),
+  new Date(2023, 8, 3, 6),
+  new Date(2023, 8, 3, 9),
+  new Date(2023, 8, 3, 12),
+  new Date(2023, 8, 3, 15),
+  new Date(2023, 8, 3, 18),
+  new Date(2023, 8, 4),
+];
+
+const y1 = [
+  5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50,
+  20, 30, 35, 28, 25, 27, 30, 28, 25,
+];
+
+const y2 = [
+  90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42,
+  45, 46, 42, 39, 40, 41, 43, 50,
+];
+
+const showMark = (params) => {
+  const { position } = params;
+  return position.getHours() === 0;
+};
+
+const config = {
+  series: [
+    { data: y1, showMark },
+    { data: y2, showMark },
+  ],
+  height: 300,
+  topAxis: 'topAxis',
+  bottomAxis: 'bottomAxis',
+  leftAxis: null,
+};
+const xAxisCommon = {
+  data: timeData,
+  scaleType: 'time',
+  valueFormatter,
+};
diff --git a/docs/data/charts/axis/TickLabelPosition.tsx b/docs/data/charts/axis/TickLabelPosition.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { ShowMarkParams } from '@mui/x-charts/models';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+export default function TickLabelPosition() {
+  return (
+    <Box sx={{ width: '100%', maxWidth: 800 }}>
+      <LineChart
+        xAxis={[
+          {
+            ...xAxisCommon,
+            id: 'bottomAxis',
+            scaleType: 'point',
+            tickInterval: (time) => [0, 12].includes(time.getHours()),
+            tickLabelInterval: (time) => time.getHours() === 0,
+          },
+          {
+            ...xAxisCommon,
+            id: 'topAxis',
+            scaleType: 'point',
+          },
+        ]}
+        {...config}
+      />
+    </Box>
+  );
+}
+
+const valueFormatter = (date: Date) =>
+  date.toLocaleDateString('fr-FR', {
+    month: '2-digit',
+    day: '2-digit',
+  });
+
+const timeData = [
+  new Date(2023, 7, 31),
+  new Date(2023, 7, 31, 3),
+  new Date(2023, 7, 31, 6),
+  new Date(2023, 7, 31, 9),
+  new Date(2023, 7, 31, 12),
+  new Date(2023, 7, 31, 15),
+  new Date(2023, 7, 31, 18),
+  new Date(2023, 8, 1),
+  new Date(2023, 8, 1, 3),
+  new Date(2023, 8, 1, 6),
+  new Date(2023, 8, 1, 9),
+  new Date(2023, 8, 1, 12),
+  new Date(2023, 8, 1, 15),
+  new Date(2023, 8, 1, 18),
+  new Date(2023, 8, 2),
+  new Date(2023, 8, 2, 3),
+  new Date(2023, 8, 2, 6),
+  new Date(2023, 8, 2, 9),
+  new Date(2023, 8, 2, 12),
+  new Date(2023, 8, 2, 15),
+  new Date(2023, 8, 2, 18),
+  new Date(2023, 8, 3),
+  new Date(2023, 8, 3, 3),
+  new Date(2023, 8, 3, 6),
+  new Date(2023, 8, 3, 9),
+  new Date(2023, 8, 3, 12),
+  new Date(2023, 8, 3, 15),
+  new Date(2023, 8, 3, 18),
+  new Date(2023, 8, 4),
+];
+
+const y1 = [
+  5, 5.5, 5.3, 4.9, 5, 6.2, 8.9, 10, 15, 30, 80, 90, 94, 93, 85, 86, 75, 70, 68, 50,
+  20, 30, 35, 28, 25, 27, 30, 28, 25,
+];
+const y2 = [
+  90, 93, 89, 84, 85, 83, 73, 70, 63, 32, 30, 25, 18, 19, 23, 30, 32, 36, 40, 40, 42,
+  45, 46, 42, 39, 40, 41, 43, 50,
+];
+
+const showMark = (params: ShowMarkParams) => {
+  const { position } = params as ShowMarkParams<Date>;
+  return position.getHours() === 0;
+};
+
+const config = {
+  series: [
+    { data: y1, showMark },
+    { data: y2, showMark },
+  ],
+  height: 300,
+  topAxis: 'topAxis',
+  bottomAxis: 'bottomAxis',
+  leftAxis: null,
+};
+const xAxisCommon = {
+  data: timeData,
+  scaleType: 'time',
+  valueFormatter,
+} as const;
diff --git a/docs/data/charts/axis/TickNumber.js b/docs/data/charts/axis/TickNumber.js
@@ -29,7 +29,7 @@ const valueFormatter = (date) =>
 
 const config = {
   series: [{ data: y1 }, { data: y2 }],
-  height: 400,
+  height: 300,
   topAxis: 'half days',
   leftAxis: null,
 };