Use default text placement fns

Author: bernardobelchior

packages/x-charts/src/ChartsText/defaultTextPlacement.ts

@@ -0,0 +1,44 @@
+import { clampAngle } from '../internals/clampAngle';
+import { ChartsTextStyle } from '../internals/getWordsByLines';
+
+/**
+ * Provide the text-anchor based on the angle between the text and the associated element.
+ * - 0 means the element is on top of the text, 180 bellow, and 90 on the right of the text.
+ * @param {number} angle The angle between the text and the element.
+ * @returns
+ */
+export function getDefaultTextAnchor(angle: number): ChartsTextStyle['textAnchor'] {
+  const adjustedAngle = clampAngle(angle);
+
+  if (adjustedAngle <= 30 || adjustedAngle >= 330) {
+    // +/-30° around 0°
+    return 'middle';
+  }
+
+  if (adjustedAngle <= 210 && adjustedAngle >= 150) {
+    // +/-30° around 180°
+    return 'middle';
+  }
+
+  if (adjustedAngle <= 180) {
+    return 'end';
+  }
+
+  return 'start';
+}
+
+export function getDefaultBaseline(angle: number): ChartsTextStyle['dominantBaseline'] {
+  const adjustedAngle = clampAngle(angle);
+
+  if (adjustedAngle <= 30 || adjustedAngle >= 330) {
+    // +/-60° around 0°
+    return 'hanging';
+  }
+
+  if (adjustedAngle <= 210 && adjustedAngle >= 150) {
+    // +/-60° around 180°
+    return 'auto';
+  }
+
+  return 'central';
+}

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

@@ -5,6 +5,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme, styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
+import { getDefaultBaseline, getDefaultTextAnchor } from '../ChartsText/defaultTextPlacement';
 import { clampAngle } from '../internals/clampAngle';
 import { useIsClient } from '../hooks/useIsClient';
 import { ellipsize } from '../internals/ellipsize';
@@ -13,7 +14,7 @@ import { useTicks, TickItemType } from '../hooks/useTicks';
 import { AxisConfig, AxisDefaultized, ChartsXAxisProps, ScaleName } from '../models/axis';
 import { getAxisUtilityClass } from '../ChartsAxis/axisClasses';
 import { AxisRoot } from '../internals/components/AxisSharedComponents';
-import { ChartsText, ChartsTextProps, ChartsTextStyle } from '../ChartsText';
+import { ChartsText, ChartsTextProps } from '../ChartsText';
 import { getMinXTranslation } from '../internals/geometry';
 import { useMounted } from '../hooks/useMounted';
 import { ChartDrawingArea, useDrawingArea } from '../hooks/useDrawingArea';
@@ -118,37 +119,6 @@ function getVisibleLabels(
   );
 }
 
-function getDefaultTextAnchor(angle: number): ChartsTextStyle['textAnchor'] {
-  const adjustedAngle = clampAngle(angle);
-
-  if (adjustedAngle === 0 || adjustedAngle === 180) {
-    return 'middle';
-  }
-
-  if (adjustedAngle < 180) {
-    return 'start';
-  }
-
-  return 'end';
-}
-
-function getDefaultBaseline(
-  angle: number,
-  position: 'top' | 'bottom' | 'none' | undefined,
-): ChartsTextStyle['dominantBaseline'] {
-  const adjustedAngle = clampAngle(angle);
-
-  if (adjustedAngle === 0) {
-    return position === 'bottom' ? 'hanging' : 'auto';
-  }
-
-  if (adjustedAngle === 180) {
-    return position === 'bottom' ? 'auto' : 'hanging';
-  }
-
-  return 'central';
-}
-
 function shortenLabels(
   visibleLabels: Set<TickItemType>,
   drawingArea: Pick<ChartDrawingArea, 'left' | 'width' | 'right'>,
@@ -277,8 +247,13 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
 
-  const defaultTextAnchor = getDefaultTextAnchor(tickLabelStyle?.angle ?? 0);
-  const shouldInvertTextAnchor = (isRtl && position !== 'top') || (!isRtl && position === 'top');
+  const defaultTextAnchor = getDefaultTextAnchor(
+    (position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0),
+  );
+  const defaultDominantBaseline = getDefaultBaseline(
+    (position === 'bottom' ? 0 : 180) - (tickLabelStyle?.angle ?? 0),
+  );
+
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
@@ -287,10 +262,8 @@ function ChartsXAxis(inProps: ChartsXAxisProps) {
         ...theme.typography.caption,
         fontSize: 12,
         lineHeight: 1.25,
-        textAnchor: shouldInvertTextAnchor
-          ? invertTextAnchor(defaultTextAnchor)
-          : defaultTextAnchor,
-        dominantBaseline: getDefaultBaseline(tickLabelStyle?.angle ?? 0, position),
+        textAnchor: isRtl ? invertTextAnchor(defaultTextAnchor) : defaultTextAnchor,
+        dominantBaseline: defaultDominantBaseline,
         ...tickLabelStyle,
       },
     } as Partial<ChartsTextProps>,

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

@@ -5,6 +5,7 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, styled, useTheme } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
+import { getDefaultBaseline, getDefaultTextAnchor } from '../ChartsText/defaultTextPlacement';
 import { ellipsize } from '../internals/ellipsize';
 import { useIsClient } from '../hooks/useIsClient';
 import { getStringSize } from '../internals/domUtils';
@@ -94,41 +95,6 @@ function shortenLabels(
   return shortenedLabels;
 }
 
-function getDefaultTextAnchor(angle: number): ChartsTextStyle['textAnchor'] {
-  const adjustedAngle = clampAngle(angle);
-
-  if (adjustedAngle === 90 || adjustedAngle === 270) {
-    return 'middle';
-  }
-
-  if (adjustedAngle < 90) {
-    return 'end';
-  }
-
-  if (adjustedAngle < 270) {
-    return 'start';
-  }
-
-  return 'end';
-}
-
-function getDefaultBaseline(
-  angle: number,
-  position: 'left' | 'right' | 'none' | undefined,
-): ChartsTextStyle['dominantBaseline'] {
-  const adjustedAngle = clampAngle(angle);
-
-  if (adjustedAngle === 90 || adjustedAngle === 270) {
-    return position === 'left' ? 'auto' : 'hanging';
-  }
-
-  if (adjustedAngle > 270) {
-    return position === 'left' ? 'auto' : 'hanging';
-  }
-
-  return 'central';
-}
-
 function invertTextAnchor(
   textAnchor: ChartsTextStyle['textAnchor'],
 ): ChartsTextStyle['textAnchor'] {
@@ -224,20 +190,22 @@ function ChartsYAxis(inProps: ChartsYAxisProps) {
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
 
-  const defaultTextAnchor = getDefaultTextAnchor(tickLabelStyle?.angle ?? 0);
-  const shouldInvertTextAnchor =
-    (isRtl && position !== 'right') || (!isRtl && position === 'right');
+  const defaultTextAnchor = getDefaultTextAnchor(
+    (position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0),
+  );
+  const defaultDominantBaseline = getDefaultBaseline(
+    (position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0),
+  );
+
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: {
         ...theme.typography.caption,
         fontSize: tickFontSize,
-        textAnchor: shouldInvertTextAnchor
-          ? invertTextAnchor(defaultTextAnchor)
-          : defaultTextAnchor,
-        dominantBaseline: getDefaultBaseline(tickLabelStyle?.angle ?? 0, position),
+        textAnchor: isRtl ? invertTextAnchor(defaultTextAnchor) : defaultTextAnchor,
+        dominantBaseline: defaultDominantBaseline,
         ...tickLabelStyle,
       },
     } as Partial<ChartsTextProps>,