feat: simplify length limit implementation

Author: biamalveiro

packages/charts/api/charts.api.md

@@ -299,7 +299,8 @@ export interface AxisStyle {
         rotation: number;
         offset: TextOffset;
         alignment: TextAlignment;
-        truncation?: Truncate;
+        maxLength?: Pixels | string;
+        truncate?: 'start' | 'middle' | 'end';
     };
     // (undocumented)
     tickLine: TickStyle;
@@ -3540,16 +3541,6 @@ export interface TreeNode extends AngleFromTo {
     y1: TreeLevel;
 }
 
-// @public (undocumented)
-export interface Truncate {
-    // (undocumented)
-    position?: 'end' | 'start' | 'middle';
-    // (undocumented)
-    relative?: Ratio;
-    // (undocumented)
-    width?: Pixels;
-}
-
 // @public
 export interface UnaryAccessorFn<D extends BaseDatum = any, Return = any> {
     // (undocumented)

packages/charts/src/chart_types/xy_chart/state/selectors/axis_tick_formatter.test.ts

@@ -13,7 +13,7 @@ import { fitText } from '../../../../common/text_utils';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
 import type { TextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
-import type { Rotation } from '../../../../utils/common';
+import { getPercentageValue, type Rotation } from '../../../../utils/common';
 import type { SpecId } from '../../../../utils/ids';
 import type { AxisStyle } from '../../../../utils/themes/theme';
 import { defaultTickFormatter, isXDomain } from '../../utils/axis_utils';
@@ -26,28 +26,26 @@ export type AxisLabelFormatter<V = unknown> = (value: V) => string;
 /** @internal */
 export type AxisLabelFormatters = { x: Map<SpecId, AxisLabelFormatter>; y: Map<SpecId, AxisLabelFormatter> };
 
+function resolveSize(value: number | string | undefined, containerWidth: number): number | undefined {
+  if (value === undefined) return undefined;
+
+  const resolved = getPercentageValue(value, containerWidth, NaN);
+  if (!Number.isFinite(resolved) || resolved < 0) return undefined;
+
+  return resolved;
+}
+
 /** @internal */
 export function withTickLabelTruncation(
   measure: TextMeasure,
   tickLabel: AxisStyle['tickLabel'],
-  width: number,
+  containerWidth: number,
 ): <V>(formatter: AxisLabelFormatter<V>) => AxisLabelFormatter<V> {
-  const { truncation, fontSize, fontStyle, fontFamily, fill } = tickLabel;
-
-  let maxWidth;
+  const { fontSize, fontStyle, fontFamily, fill, truncate, maxLength } = tickLabel;
 
-  if (truncation?.width === undefined && truncation?.relative !== undefined) {
-    maxWidth = truncation.relative * width;
-  }
-  if (truncation?.width !== undefined && truncation?.relative === undefined) {
-    maxWidth = truncation.width;
-  }
-  if (truncation?.width !== undefined && truncation?.relative !== undefined) {
-    maxWidth = Math.max(truncation.width, truncation.relative * width);
-  }
-  if (!maxWidth || maxWidth <= 0 || !Number.isFinite(maxWidth)) return (formatter) => formatter;
+  const maxWidth = resolveSize(maxLength, containerWidth);
 
-  const position = truncation?.position ?? 'end';
+  if (maxWidth === undefined || maxWidth <= 0) return (formatter) => formatter;
 
   const font: Font = {
     fontStyle: fontStyle ?? 'normal',
@@ -57,7 +55,7 @@ export function withTickLabelTruncation(
     textColor: fill,
   };
 
-  return (formatter) => (value) => fitText(measure, formatter(value), maxWidth, fontSize, font, position).text;
+  return (formatter) => (value) => fitText(measure, formatter(value), maxWidth, fontSize, font, truncate ?? 'end').text;
 }
 
 /** @internal */

packages/charts/src/chart_types/xy_chart/state/selectors/axis_tick_formatter.ts

@@ -15,7 +15,9 @@ import { ELLIPSIS } from '../renderers/canvas/primitives/text';
 import { integerSnap, monotonicHillClimb } from '../solvers/monotonic_hill_climb';
 import type { TextMeasure } from '../utils/bbox/canvas_text_bbox_calculator';
 import type { Datum } from '../utils/common';
-import type { Truncate } from '../utils/themes/theme';
+
+/** @internal */
+export type Truncate = 'start' | 'middle' | 'end';
 
 const FONT_WEIGHTS_NUMERIC = [100, 200, 300, 400, 450, 500, 600, 700, 800, 900] as const;
 const FONT_WEIGHTS_ALPHA = ['normal', 'bold', 'lighter', 'bolder', 'inherit', 'initial', 'unset'] as const;
@@ -154,7 +156,7 @@ export function fitText(
   allottedWidth: number,
   fontSize: number,
   font: Font,
-  position: Truncate['position'] = 'end',
+  position: Truncate = 'end',
 ) {
   const truncateText = (build: (k: number) => string, min: number) => {
     return truncate(measure, desiredText, allottedWidth, fontSize, font, build, min);

packages/charts/src/common/text_utils.ts

@@ -159,23 +159,6 @@ export interface Opacity {
   opacity: number;
 }
 
-/** @public */
-export interface Truncate {
-  /**
-   * Absolute maximum label width in pixels. When both `width` and `relative` are provided, the greater value is used.
-   */
-  width?: Pixels;
-  /**
-   * Relative maximum label width in `[0, 1]` of chart container width.
-   */
-  relative?: Ratio;
-  /**
-   * Ellipsis placement when truncation is applied.
-   * @defaultValue 'end'
-   */
-  position?: 'end' | 'start' | 'middle';
-}
-
 /** @public */
 export interface AxisStyle {
   axisTitle: TextStyle & Visible;
@@ -193,10 +176,14 @@ export interface AxisStyle {
       offset: TextOffset;
       alignment: TextAlignment;
       /**
-       * When set, tick labels are truncated with an ellipsis so their measured width
-       * does not exceed `width` (unrotated text-direction pixels).
+       * The maximum size of the tick label.
+       * If a number, it is in pixels. If a string, it is relative to the container width, e.g. '20%'.
+       */
+      maxLength?: Pixels | string;
+      /**
+       * The position of the ellipsis when the tick label is truncated. Defaults to 'end'.
        */
-      truncation?: Truncate;
+      truncate?: 'start' | 'middle' | 'end';
     };
   tickLine: TickStyle;
   gridLine: {

packages/charts/src/utils/themes/theme.ts

@@ -6,10 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { boolean, number, select } from '@storybook/addon-knobs';
+import { select, text } from '@storybook/addon-knobs';
 import React from 'react';
 
-import type { Truncate } from '@elastic/charts';
 import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
 
 import type { ChartsStory } from '../../types';
@@ -24,33 +23,34 @@ const data = [
   { x: 'com.example.something.worker.01', y: 4 },
 ];
 
+type EllipsisPosition = 'start' | 'middle' | 'end';
+
+/** Knob helper: empty → unset; plain number → px; value like `25` or `25.5 %` → percentage string. */
+function parseThemeSize(raw: string): number | string | undefined {
+  const s = raw.trim();
+  if (!s) return undefined;
+  const pct = s.match(/^([\d.]+)\s*%$/);
+  if (pct) return `${pct[1]}%`;
+  const n = Number(s);
+  if (Number.isFinite(n)) return n;
+  return s;
+}
+
 export const Example: ChartsStory = (_, { title, description }) => {
-  const widthPx = number('Truncation width', 120, { min: 0, max: 400, step: 10 });
-  const relative = number('Truncation relative', 0.3, { min: 0, max: 1, step: 0.05 });
-  const position = select<NonNullable<Truncate['position']>>(
-    'Truncation position',
-    { end: 'end', start: 'start', middle: 'middle' },
-    'middle',
-  );
+  const maxLength = parseThemeSize(text('maxLength', '120'));
+  const truncate = select<EllipsisPosition>('truncate', { end: 'end', start: 'start', middle: 'middle' }, 'middle');
+  const rotation = select('Chart rotation', { '0°': 0, '90°': 90, '-90°': -90 }, 90);
+
+  const tickLabel = {
+    ...(maxLength !== undefined ? { maxLength } : {}),
+    truncate,
+  };
 
   return (
     <Chart title={title} description={description}>
-      <Settings baseTheme={useBaseTheme()} rotation={90} />
-      <Axis id="bottom" position={Position.Bottom} title="Count" />
-      <Axis
-        id="left"
-        position={Position.Left}
-        title="Team"
-        style={{
-          tickLabel: {
-            truncation: {
-              width: widthPx,
-              relative,
-              position,
-            },
-          },
-        }}
-      />
+      <Settings baseTheme={useBaseTheme()} rotation={rotation} />
+      <Axis id="bottom" position={Position.Bottom} title="Count" style={{ tickLabel }} />
+      <Axis id="left" position={Position.Left} title="Team" style={{ tickLabel }} />
 
       <BarSeries
         id="bars"