Improving labels further by leveraging css and following DRY

ankit-thesys · ankit-thesys · commit 405c6e1f9803 · 2025-07-04T01:57:43.000+05:30
diff --git a/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx b/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx
@@ -19,7 +19,6 @@ import { LabelTooltipProvider } from "../shared/LabelTooltip/LabelTooltip";
 import { LegendItem, XAxisTickVariant } from "../types";
 import {
   findNearestSnapPosition,
-  getOptimalXAxisTickFormatter,
   getSnapPositions,
   getWidthOfData,
   getWidthOfGroup,
@@ -138,11 +137,6 @@ const AreaChartComponent = <T extends AreaChartData>({
     return height ?? 296 + maxLabelHeight;
   }, [height, maxLabelHeight]);
 
-  // Calculate optimal tick formatter for collision detection and truncation
-  const xAxisTickFormatter = useMemo(() => {
-    return getOptimalXAxisTickFormatter(data, effectiveContainerWidth);
-  }, [data, effectiveContainerWidth]);
-
   // Check scroll boundaries
   const updateScrollState = useCallback(() => {
     if (mainContainerRef.current) {
@@ -337,7 +331,6 @@ const AreaChartComponent = <T extends AreaChartData>({
                     axisLine={false}
                     textAnchor="middle"
                     interval={0}
-                    tickFormatter={xAxisTickFormatter}
                     height={maxLabelHeight}
                     tick={
                       <XAxisTick
diff --git a/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx b/js/packages/react-ui/src/components/Charts/BarChart/BarChart.tsx
@@ -32,7 +32,6 @@ import { BarChartData, BarChartVariant } from "./types";
 import {
   BAR_WIDTH,
   findNearestSnapPosition,
-  getOptimalXAxisTickFormatter,
   getPadding,
   getRadiusArray,
   getSnapPositions,
@@ -247,11 +246,6 @@ const BarChartComponent = <T extends BarChartData>({
 
   const id = useId();
 
-  // Get the optimal X-axis tick formatter based on available space
-  const xAxisTickFormatter = useMemo(() => {
-    return getOptimalXAxisTickFormatter(data, categoryKey as string, variant);
-  }, [data, categoryKey, variant]);
-
   const yAxis = useMemo(() => {
     if (!showYAxis) {
       return null;
@@ -379,7 +373,6 @@ const BarChartComponent = <T extends BarChartData>({
                     tickLine={false}
                     axisLine={false}
                     textAnchor={"middle"}
-                    tickFormatter={xAxisTickFormatter}
                     interval={0}
                     height={maxLabelHeight}
                     tick={
diff --git a/js/packages/react-ui/src/components/Charts/BarChart/utils/BarChartUtils.ts b/js/packages/react-ui/src/components/Charts/BarChart/utils/BarChartUtils.ts
@@ -1,5 +1,4 @@
 import { getDataKeys } from "../../utils/dataUtils";
-import { getCanvasContext } from "../../utils/styleUtils";
 import { BarChartVariant } from "../types";
 
 export const BAR_WIDTH = 16;
@@ -115,76 +114,6 @@ const getRadiusArray = (
   return [radius, radius, radius, radius];
 };
 
-/**
- * INTERNAL HELPER FUNCTION
- * This function returns the formatter for the X-axis tick values with intelligent truncation.
- * @param groupWidth - The width available for each group/category (optional)
- * @param variant - The chart variant (affects truncation logic)
- * @returns The formatter for the X-axis tick values.
- * internally used by the XAxis component reCharts
- */
-const getXAxisTickFormatter = (groupWidth?: number, variant: BarChartVariant = "grouped") => {
-  const PADDING = 2; // Safety padding for better visual spacing
-  const context = getCanvasContext();
-
-  return (value: string) => {
-    const stringValue = String(value);
-
-    // Fallback for SSR, or if canvas/groupWidth is not available.
-    if (!context || !groupWidth) {
-      if (variant === "stacked") {
-        return stringValue.slice(0, 3);
-      } else {
-        return stringValue.length > 3 ? `${stringValue.slice(0, 3)}...` : stringValue;
-      }
-    }
-
-    const availableWidth = Math.max(0, groupWidth - PADDING);
-
-    if (context.measureText(stringValue).width <= availableWidth) {
-      return stringValue; // Full text fits.
-    }
-
-    // If text overflows, find the best truncation point with ellipsis.
-    let low = 0;
-    let high = stringValue.length;
-    let result = "";
-    while (low <= high) {
-      const mid = Math.floor((low + high) / 2);
-      if (mid === 0) {
-        low = mid + 1;
-        continue;
-      }
-      const truncated = stringValue.substring(0, mid) + "...";
-      if (context.measureText(truncated).width <= availableWidth) {
-        result = truncated;
-        low = mid + 1;
-      } else {
-        high = mid - 1;
-      }
-    }
-
-    return result;
-  };
-};
-
-/**
- * Helper function to get the optimal X-axis tick formatter with calculated group width
- * @param data - The chart data
- * @param categoryKey - The category key
- * @param variant - The chart variant
- * @returns The optimized formatter function
- */
-const getOptimalXAxisTickFormatter = (
-  data: Array<Record<string, string | number>>,
-  categoryKey: string,
-  variant: BarChartVariant,
-) => {
-  // Calculate the available width per group
-  const groupWidth = getWidthOfGroup(data, categoryKey, variant);
-  return getXAxisTickFormatter(groupWidth, variant);
-};
-
 /**
  * This function returns the scroll amount for the chart, used for the scroll amount of the chart.
  * This can also be used to calculate the width of each group/category.
@@ -287,7 +216,6 @@ const getChartHeight = (containerWidth: number): number => {
 export {
   findNearestSnapPosition,
   getChartHeight,
-  getOptimalXAxisTickFormatter,
   getPadding,
   getRadiusArray,
   getSnapPositions,
diff --git a/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx b/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx
@@ -19,7 +19,6 @@ import { LabelTooltipProvider } from "../shared/LabelTooltip/LabelTooltip";
 import { LegendItem, XAxisTickVariant } from "../types";
 import {
   findNearestSnapPosition,
-  getOptimalXAxisTickFormatter,
   getSnapPositions,
   getWidthOfData,
   getWidthOfGroup,
@@ -138,11 +137,6 @@ export const LineChart = <T extends LineChartData>({
     return height ?? 296 + maxLabelHeight;
   }, [height, maxLabelHeight]);
 
-  // Calculate optimal tick formatter for collision detection and truncation
-  const xAxisTickFormatter = useMemo(() => {
-    return getOptimalXAxisTickFormatter(data, effectiveContainerWidth);
-  }, [data, effectiveContainerWidth]);
-
   // Check scroll boundaries
   const updateScrollState = useCallback(() => {
     if (mainContainerRef.current) {
@@ -347,7 +341,6 @@ export const LineChart = <T extends LineChartData>({
                     height={maxLabelHeight}
                     textAnchor="middle"
                     interval={0}
-                    tickFormatter={xAxisTickFormatter}
                     tick={
                       <XAxisTick
                         variant={tickVariant}
diff --git a/js/packages/react-ui/src/components/Charts/shared/XAxisTick/XAxisTick.tsx b/js/packages/react-ui/src/components/Charts/shared/XAxisTick/XAxisTick.tsx
@@ -24,94 +24,78 @@ interface XAxisTickProps {
   tickFormatter?: (value: any) => string;
   index?: number;
   visibleTicksCount?: number;
-  variant?: XAxisTickVariant;
-  widthOfGroup?: number;
-  labelHeight?: number;
+  variant: XAxisTickVariant;
+  widthOfGroup: number;
+  labelHeight: number;
 }
 
 const XAxisTick = React.forwardRef<SVGGElement, XAxisTickProps>((props, ref) => {
   const {
     x,
     y,
     payload,
-    tickFormatter,
     className,
     variant = "multiLine",
     widthOfGroup = 70,
     labelHeight = 20,
   } = props;
 
-  const value = String(payload?.value || "");
+  const rawValue = payload?.value;
+  const value = String(rawValue || "");
 
   const foreignObjectRef = useRef<SVGForeignObjectElement>(null);
   const spanRef = useRef<HTMLSpanElement>(null);
-  const [isMultiLineTruncated, setIsMultiLineTruncated] = useState(false);
+  const [isTruncated, setIsTruncated] = useState(false);
 
-  // Check if multiLine text is truncated
+  // Check if text is truncated
   useLayoutEffect(() => {
-    if (variant === "multiLine" && spanRef.current) {
+    if (spanRef.current) {
       const element = spanRef.current;
-      // Check if the text is clamped by comparing scrollHeight with clientHeight
-      const isTruncated = element.scrollHeight > element.clientHeight;
-      setIsMultiLineTruncated(isTruncated);
+      const isCurrentlyTruncated =
+        variant === "multiLine"
+          ? element.scrollHeight > element.clientHeight
+          : element.scrollWidth > element.clientWidth;
+      setIsTruncated(isCurrentlyTruncated);
     }
   }, [value, variant, widthOfGroup]);
 
   if (x === undefined || y === undefined) {
     return null;
   }
 
-  if (variant === "multiLine") {
-    // The x position from Recharts is the center of the group
-    // To center the foreignObject, we need to offset by half of widthOfGroup
-    const calX = x - widthOfGroup / 2;
-    const calWidth = widthOfGroup - 4;
+  // The x position from Recharts is the center of the group
+  // To center the foreignObject, we need to offset by half of widthOfGroup
+  const calX = x - widthOfGroup / 2;
+  const calWidth = variant === "multiLine" ? widthOfGroup - 4 : widthOfGroup - 10;
 
-    return (
-      <g ref={ref} transform={`translate(${calX},${y})`}>
-        <foreignObject
-          ref={foreignObjectRef}
-          transform="translate(0, 0)"
-          width={calWidth}
-          height={labelHeight} // Initial height, will be updated by useLayoutEffect
-          className="crayon-chart-x-axis-tick-foreign"
-        >
-          <div
-            style={{
-              width: "100%",
-              height: "100%",
-              boxSizing: "border-box",
-            }}
-          >
-            <LabelTooltip content={value} side="top" disabled={!isMultiLineTruncated}>
-              <span
-                ref={spanRef}
-                style={{
-                  textAlign: "center",
-                  wordBreak: "break-word",
-                }}
-                className="crayon-chart-x-axis-tick-multi-line"
-              >
-                {value}
-              </span>
-            </LabelTooltip>
-          </div>
-        </foreignObject>
-      </g>
-    );
-  }
-
-  const displayValue = tickFormatter ? tickFormatter(payload?.value) : value;
-  // Check if displayValue ends with dots (indicating truncation)
-  const isTruncated = displayValue.endsWith("...");
+  const spanClassName =
+    variant === "multiLine"
+      ? "crayon-chart-x-axis-tick-multi-line"
+      : "crayon-chart-x-axis-tick-single-line";
 
   return (
-    <g ref={ref} transform={`translate(${x},${y})`} className={className}>
-      <LabelTooltip content={value} side="top" disabled={!isTruncated}>
-        <text x={0} y={0} dy={12} textAnchor={"middle"} className="crayon-chart-x-axis-tick">
-          {displayValue}
-        </text>
-      </LabelTooltip>
+    <g ref={ref} transform={`translate(${calX},${y})`} className={className}>
+      <foreignObject
+        ref={foreignObjectRef}
+        transform="translate(0, 0)"
+        width={calWidth}
+        height={labelHeight}
+        className="crayon-chart-x-axis-tick-foreign"
+      >
+        <div className="crayon-chart-x-axis-tick-container">
+          <LabelTooltip content={value} side="top" disabled={!isTruncated}>
+            <span
+              ref={spanRef}
+              style={{
+                textAlign: "center",
+              }}
+              className={spanClassName}
+            >
+              {value}
+            </span>
+          </LabelTooltip>
+        </div>
+      </foreignObject>
     </g>
   );
 });
diff --git a/js/packages/react-ui/src/components/Charts/shared/XAxisTick/xAxisTick.scss b/js/packages/react-ui/src/components/Charts/shared/XAxisTick/xAxisTick.scss
@@ -1,18 +1,15 @@
 @use "../../../../cssUtils" as cssUtils;
 
-.crayon-chart-x-axis-tick {
-  @include cssUtils.typography(label, extra-small);
-  fill: cssUtils.$secondary-text;
-}
-
-.crayon-chart-x-axis-tick-multi-line-container {
+.crayon-chart-x-axis-tick-container {
   // this is the div inside foreignObject
   @include cssUtils.typography(label, extra-small);
   color: cssUtils.$secondary-text;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 .crayon-chart-x-axis-tick-multi-line {
-  color: cssUtils.$secondary-text;
   margin: 0;
   padding: 0;
   display: -webkit-box;
@@ -24,3 +21,11 @@
   word-break: break-word;
   min-width: 0;
 }
+
+.crayon-chart-x-axis-tick-single-line {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  display: block;
+}
diff --git a/js/packages/react-ui/src/components/Charts/utils/AreaAndLine/AreaAndLineUtils.ts b/js/packages/react-ui/src/components/Charts/utils/AreaAndLine/AreaAndLineUtils.ts
