[charts] Add minTickLabelGap to x-axis

Author: bernardobelchior

packages/x-charts/src/ChartsXAxis/ChartsXAxis.tsx

@@ -5,7 +5,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, Theme, styled } from '@mui/material/styles';
 import { useTicks, TickItemType } from '../hooks/useTicks';
-import { AxisDefaultized, ChartsXAxisProps } from '../models/axis';
+import { AxisDefaultized, ChartsXAxisProps, ScaleName } from '../models/axis';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
 import { ChartsText, ChartsTextProps } from '../ChartsText';
@@ -37,18 +37,29 @@ type LabelExtraData = { width: number; height: number; skipLabel?: boolean };
 function addLabelDimension(
   xTicks: TickItemType[],
   {
+    tickLabelClassName: className,
     tickLabelStyle: style,
     tickLabelInterval,
+    // FIXME: Define the default value in the correct place
+    minTickLabelGap = 8,
     reverse,
     isMounted,
   }: Pick<ChartsXAxisProps, 'tickLabelInterval' | 'tickLabelStyle'> &
-    Pick<AxisDefaultized, 'reverse'> & { isMounted: boolean },
+    Pick<AxisDefaultized<ScaleName, any, ChartsXAxisProps>, 'reverse' | 'minTickLabelGap'> & {
+      tickLabelClassName?: string;
+      isMounted: boolean;
+    },
 ): (TickItemType & LabelExtraData)[] {
   const withDimension = xTicks.map((tick) => {
     if (!isMounted || tick.formattedValue === undefined) {
       return { ...tick, width: 0, height: 0 };
     }
-    const tickSizes = getWordsByLines({ style, needsComputation: true, text: tick.formattedValue });
+    const tickSizes = getWordsByLines({
+      className,
+      style,
+      needsComputation: true,
+      text: tick.formattedValue,
+    });
     return {
       ...tick,
       width: Math.max(...tickSizes.map((size) => size.width)),
@@ -64,23 +75,24 @@ function addLabelDimension(
   }
 
   // Filter label to avoid overlap
-  let currentTextLimit = 0;
   let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
   return withDimension.map((item, labelIndex) => {
     const { width, offset, labelOffset, height } = item;
 
     const distance = getMinXTranslation(width, height, style?.angle);
     const textPosition = offset + labelOffset;
-    const gapRatio = 1.2; // Ratio applied to the minimal distance to add some margin.
 
-    currentTextLimit = textPosition - (direction * (gapRatio * distance)) / 2;
-    if (labelIndex > 0 && direction * currentTextLimit < direction * previousTextLimit) {
+    const currentTextLimit = textPosition - (direction * distance) / 2;
+    if (
+      labelIndex > 0 &&
+      direction * currentTextLimit < direction * (previousTextLimit + minTickLabelGap)
+    ) {
       // Except for the first label, we skip all label that overlap with the last accepted.
       // Notice that the early return prevents `previousTextLimit` from being updated.
       return { ...item, skipLabel: true };
     }
-    previousTextLimit = textPosition + (direction * (gapRatio * distance)) / 2;
+    previousTextLimit = textPosition + (direction * distance) / 2;
     return item;
   });
 }
@@ -157,6 +169,11 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: {
+        fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+        fontWeight: 400,
+        lineHeight: 1.66,
+        letterSpacing: '0.03333em',
+        fill: 'rgba(0, 0, 0, 0.87)',
         fontSize: 12,
         textAnchor: 'middle',
         dominantBaseline: position === 'bottom' ? 'hanging' : 'auto',
@@ -177,6 +194,7 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
   });
 
   const xTicksWithDimension = addLabelDimension(xTicks, {
+    tickLabelClassName: axisTickLabelProps.className,
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval,
     reverse,

packages/x-charts/src/internals/domUtils.ts

@@ -104,13 +104,18 @@ let domCleanTimeout: NodeJS.Timeout | undefined;
  * @param style The style applied
  * @returns width and height of the text
  */
-export const getStringSize = (text: string | number, style: React.CSSProperties = {}) => {
+export const getStringSize = (
+  text: string | number,
+  { className = '', style = {} }: { className?: string; style?: React.CSSProperties },
+) => {
   if (text === undefined || text === null || isSsr()) {
     return { width: 0, height: 0 };
   }
 
   const str = `${text}`;
   const styleString = getStyleString(style);
+  // FIXME: How to handle the className in cache? The class name be the same, but the style it's applying can change,
+  //        however this wouldn't cause the cache to be invalidated, resulting in wrong sizes.
   const cacheKey = `${str}-${styleString}`;
 
   if (stringCache.widthCache[cacheKey]) {
@@ -129,6 +134,7 @@ export const getStringSize = (text: string | number, style: React.CSSProperties
     // https://en.wikipedia.org/wiki/Content_Security_Policy
     const measurementSpanStyle: Record<string, any> = { ...SPAN_STYLE, ...style };
 
+    measurementSpan.className = className;
     Object.keys(measurementSpanStyle).map((styleKey) => {
       (measurementSpan!.style as Record<string, any>)[camelToMiddleLine(styleKey)] =
         autoCompleteStyle(styleKey, measurementSpanStyle[styleKey]);

packages/x-charts/src/internals/getWordsByLines.ts

@@ -12,6 +12,10 @@ export interface ChartsTextStyle extends React.CSSProperties {
 }
 
 export interface GetWordsByLinesParams {
+  /**
+   * CSS class applied to text elements.
+   */
+  className?: string;
   /**
    * Text displayed.
    */
@@ -27,9 +31,14 @@ export interface GetWordsByLinesParams {
   needsComputation?: boolean;
 }
 
-export function getWordsByLines({ style, needsComputation, text }: GetWordsByLinesParams) {
+export function getWordsByLines({
+  className,
+  style,
+  needsComputation,
+  text,
+}: GetWordsByLinesParams) {
   return text.split('\n').map((subText) => ({
     text: subText,
-    ...(needsComputation ? getStringSize(subText, style) : { width: 0, height: 0 }),
+    ...(needsComputation ? getStringSize(subText, { className, style }) : { width: 0, height: 0 }),
   }));
 }

packages/x-charts/src/models/axis.ts

@@ -140,6 +140,11 @@ export interface ChartsYAxisProps extends ChartsAxisProps {
 }
 
 export interface ChartsXAxisProps extends ChartsAxisProps {
+  /**
+   * The minimum gap in pixels between two tick labels.
+   * @default 8
+   */
+  minTickLabelGap?: number;
   /**
    * Position of the axis.
    */