Revert performance improvements in this PR. Fix text measuring bugs.

Author: bernardobelchior

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

@@ -37,80 +37,63 @@ 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,
-    isPointInside,
   }: Pick<ChartsXAxisProps, 'tickLabelInterval' | 'tickLabelStyle'> &
     Pick<AxisDefaultized<ScaleName, any, ChartsXAxisProps>, 'reverse' | 'minTickLabelGap'> & {
+      tickLabelClassName?: string;
       isMounted: boolean;
-      isPointInside: (position: number) => boolean;
     },
 ): (TickItemType & LabelExtraData)[] {
-  const getTickLabelSize = (tick: TickItemType) => {
+  const withDimension = xTicks.map((tick) => {
     if (!isMounted || tick.formattedValue === undefined) {
-      return { width: 0, height: 0 };
+      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)),
       height: Math.max(tickSizes.length * tickSizes[0].height),
     };
-  };
+  });
 
   if (typeof tickLabelInterval === 'function') {
-    return xTicks.map((item, index) => {
-      const skipLabel = !tickLabelInterval(item.value, index);
-      const size = skipLabel ? { width: 0, height: 0 } : getTickLabelSize(item);
-
-      return {
-        ...item,
-        ...size,
-        skipLabel,
-      };
-    });
+    return withDimension.map((item, index) => ({
+      ...item,
+      skipLabel: !tickLabelInterval(item.value, index),
+    }));
   }
 
   // Filter label to avoid overlap
   let previousTextLimit = 0;
   const direction = reverse ? -1 : 1;
-
-  return xTicks.map((item, labelIndex) => {
-    const { offset, labelOffset } = item;
-    const textPosition = offset + labelOffset;
-
-    if (
-      labelIndex > 0 &&
-      direction * (textPosition - minTickLabelGap) < direction * previousTextLimit
-    ) {
-      return { ...item, width: 0, height: 0, skipLabel: true };
-    }
-
-    if (!isPointInside(textPosition)) {
-      return { ...item, width: 0, height: 0, skipLabel: true };
-    }
-
-    const { width, height } = getTickLabelSize(item);
+  return withDimension.map((item, labelIndex) => {
+    const { width, offset, labelOffset, height } = item;
 
     const distance = getMinXTranslation(width, height, style?.angle);
+    const textPosition = offset + labelOffset;
 
     const currentTextLimit = textPosition - (direction * distance) / 2;
     if (
       labelIndex > 0 &&
-      direction * (currentTextLimit - minTickLabelGap) < direction * previousTextLimit
+      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, width, height, skipLabel: true };
+      return { ...item, skipLabel: true };
     }
-
     previousTextLimit = textPosition + (direction * distance) / 2;
-    return { ...item, width, height };
+    return item;
   });
 }
 
@@ -186,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',
@@ -206,12 +194,11 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
   });
 
   const xTicksWithDimension = addLabelDimension(xTicks, {
+    tickLabelClassName: axisTickLabelProps.className,
     tickLabelStyle: axisTickLabelProps.style,
     tickLabelInterval,
     reverse,
     isMounted,
-    isPointInside: (offset: number) =>
-      instance.isPointInside({ x: offset, y: -1 }, { direction: 'x' }),
   });
 
   const labelRefPoint = {

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

@@ -98,20 +98,24 @@ export const getStyleString = (style: React.CSSProperties) =>
     );
 
 let domCleanTimeout: NodeJS.Timeout | undefined;
-
 /**
  *
  * @param text The string to estimate
  * @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]) {
@@ -130,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 }),
   }));
 }