@dynatrace/strato-components 3.5.2 → 3.6.0

package/charts/xy-chart/components/axes/XYChartTopAxisArea.js

@@ -35,6 +35,7 @@ var import_react = require("@use-gesture/react");
 var import_clsx = __toESM(require("clsx"));
 var import_react2 = require("react");
 var import_AxisArea_css = require("./AxisArea.sty.js");
+var import_compute_collision_aware_max_space = require("./utils/compute-collision-aware-max-space.js");
 var import_is_axis_pannable = require("./utils/is-axis-pannable.js");
 var import_XTickWithTruncation = require("./XTickWithTruncation.js");
 var import_XYChartPanningControls = require("./XYChartPanningControls.js");
@@ -64,10 +65,16 @@ function XYChartTopAxisArea() {
   const canPan = (0, import_is_axis_pannable.isAxisPannable)(topConfig, scales);
   const tickFormat = (_, index) => topTicks.formattedTicks[index];
   const isCategoricalAxis = topConfig?.type ? (0, import_guards.isCategorical)(topConfig.type) : false;
-  const tickLabelProps = isCategoricalAxis ? (0, import_get_tick_label_props.getTickLabelPropsForCategoryAxis)("top", topConfig?.tickLabelLayout) : (0, import_get_tick_label_props.getTickLabelPropsForValueAxis)("top", topConfig?.tickLabelLayout);
+  const isTickRotated = topConfig?.tickLabelLayout === "vertical";
+  const tickLabelProps = (0, import_get_tick_label_props.getXAxisTickLabelProps)(
+    "top",
+    isCategoricalAxis,
+    isTickRotated,
+    topScale,
+    topConfig?.tickLabelLayout
+  );
   const areCategoricalTicksNotFittable = topScale && isCategoricalAxis && !(0, import_is_tick_label_visible.isTickLabelSpaceAvailable)(topScale.step());
   const hideAxis = topConfig === void 0 || areCategoricalTicksNotFittable || topScale === void 0;
-  const isTickRotated = topConfig?.tickLabelLayout === "vertical";
   const handlePan = (0, import_useApplyPanDelta.useApplyPanDelta)();
   (0, import_react.useGesture)(
     {
@@ -83,65 +90,76 @@ function XYChartTopAxisArea() {
   const tickNameHasEmoji = topTicks.ticks.some(
     (name) => import_constants.EMOJI_REGEX.test(name)
   );
-  return hideAxis ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartGridRoot.ChartGrid.GridArea, { gridArea: import_grid_templates.AREAS.topAxis, children: ({ availableWidth, availableHeight }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx.default)(
-        (0, import_ZoomCursors_css.cursorStyle)({ isPanEnabled: canPan }),
-        import_AxisArea_css.axisContainerStyle
+  return hideAxis ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartGridRoot.ChartGrid.GridArea, { gridArea: import_grid_templates.AREAS.topAxis, children: ({ availableWidth, availableHeight }) => {
+    const maxSpaceForTruncation = (0, import_compute_collision_aware_max_space.computeCollisionAwareMaxSpace)(
+      (0, import_calculate_axis_size.getXTickMaxSize)(
+        availableHeight,
+        availableWidth,
+        isTickRotated,
+        topScale,
+        topConfig.label,
+        topTicks.ticks.length
       ),
-      ref: axisRef,
-      children: [
-        canPan && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_XYChartPanningControls.XYChartPanningControls,
-          {
-            visibleAxis: topConfig,
-            onClickPan: (delta) => handlePan(-delta)
-          }
+      topTicks.formattedTicks,
+      topTicks.ticks,
+      topScale,
+      isCategoricalAxis,
+      isTickRotated
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.default)(
+          (0, import_ZoomCursors_css.cursorStyle)({ isPanEnabled: canPan }),
+          import_AxisArea_css.axisContainerStyle
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_DivAxisWrapper.DivAxisWrapper,
-          {
-            divAxisStyle: import_constants.axisFontProps,
-            ticks: topTicks.formattedTicks,
-            label: topConfig.label,
-            isTickVertical: true,
-            isTickRotated,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_AxisTop.AxisTop,
-              {
-                role: "group",
-                "aria-label": import_defaults.XY_CHART_TOP_AXIS_LABEL,
-                scale: topScale,
-                containerSize: availableWidth,
-                height: availableHeight,
-                tickValues: topTicks.ticks,
-                tickLabelProps,
-                tickFormat,
-                label: topConfig.label,
-                tickComponent: (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_XTickWithTruncation.XTickWithTruncation,
-                  {
-                    renderProps,
-                    maxSpaceForTruncation: (0, import_calculate_axis_size.getXTickMaxSize)(
-                      availableHeight,
-                      availableWidth,
+        ref: axisRef,
+        children: [
+          canPan && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_XYChartPanningControls.XYChartPanningControls,
+            {
+              visibleAxis: topConfig,
+              onClickPan: (delta) => handlePan(-delta)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_DivAxisWrapper.DivAxisWrapper,
+            {
+              divAxisStyle: import_constants.axisFontProps,
+              ticks: topTicks.formattedTicks,
+              label: topConfig.label,
+              isTickVertical: true,
+              isTickRotated,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_AxisTop.AxisTop,
+                {
+                  role: "group",
+                  "aria-label": import_defaults.XY_CHART_TOP_AXIS_LABEL,
+                  scale: topScale,
+                  containerSize: availableWidth,
+                  height: availableHeight,
+                  tickValues: topTicks.ticks,
+                  tickLabelProps,
+                  tickFormat,
+                  label: topConfig.label,
+                  tickComponent: (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_XTickWithTruncation.XTickWithTruncation,
+                    {
+                      renderProps,
+                      maxSpaceForTruncation,
+                      centerTick: isCategoricalAxis,
                       isTickRotated,
-                      topScale,
-                      topConfig.label
-                    ),
-                    centerTick: isCategoricalAxis,
-                    isTickRotated,
-                    position: "top",
-                    tickNameHasEmoji
-                  }
-                )
-              }
-            )
-          }
-        )
-      ]
-    }
-  ) });
+                      position: "top",
+                      tickNameHasEmoji
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  } });
 }
 XYChartTopAxisArea["displayName"] = "XYChartTopAxisArea";

package/charts/xy-chart/components/axes/utils/compute-collision-aware-max-space.d.ts

@@ -0,0 +1,14 @@
+import type { NumberValue } from 'd3-scale';
+import type { AnyScale } from '../../../../core/types/scales.js';
+/**
+ * Applies collision-aware clamping to a tick-label truncation budget.
+ *
+ * When exactly two continuous-scale ticks collide, this function shrinks
+ * `baseMax` so that each label only occupies its fair share of the pixel gap
+ * between the two tick positions. The share depends on domain-boundary
+ * alignment: a boundary-anchored label uses less space than a centered one.
+ *
+ * Returns `baseMax` unchanged whenever the conditions for collision detection
+ * are not met (categorical, rotated, ≠2 ticks, band scale, or no collision).
+ */
+export declare function computeCollisionAwareMaxSpace(baseMax: number, formattedTicks: string[], rawTicks: NumberValue[], scale: AnyScale | undefined, isCategoricalAxis: boolean, isTickRotated: boolean): number;

package/charts/xy-chart/components/axes/utils/compute-collision-aware-max-space.js

@@ -0,0 +1,50 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var compute_collision_aware_max_space_exports = {};
+__export(compute_collision_aware_max_space_exports, {
+  computeCollisionAwareMaxSpace: () => computeCollisionAwareMaxSpace
+});
+module.exports = __toCommonJS(compute_collision_aware_max_space_exports);
+var import_detect_scale = require("../../../../core/utils/detect-scale.js");
+var import_has_horizontal_label_collision = require("../../../../core/utils/has-horizontal-label-collision.js");
+function computeCollisionAwareMaxSpace(baseMax, formattedTicks, rawTicks, scale, isCategoricalAxis, isTickRotated) {
+  if (isCategoricalAxis || isTickRotated || rawTicks.length !== 2 || !scale || (0, import_detect_scale.isBandScale)(scale)) {
+    return baseMax;
+  }
+  const continuousScale = scale;
+  const domain = continuousScale.domain();
+  const domainBounds = [+domain[0], +domain[1]];
+  if (!(0, import_has_horizontal_label_collision.hasHorizontalLabelCollision)(
+    formattedTicks,
+    rawTicks,
+    continuousScale,
+    domainBounds
+  )) {
+    return baseMax;
+  }
+  const pos0 = continuousScale(rawTicks[0]);
+  const pos1 = continuousScale(rawTicks[1]);
+  const pixelGap = pos1 - pos0;
+  const t0IsStart = +rawTicks[0] === domainBounds[0];
+  const t1IsEnd = +rawTicks[1] === domainBounds[1];
+  const bothAtDomainEdges = t0IsStart && t1IsEnd;
+  const oneAtDomainEdge = t0IsStart || t1IsEnd;
+  const gapAfterPadding = pixelGap - import_has_horizontal_label_collision.TICK_LABEL_GAP_PX;
+  const tighterMax = bothAtDomainEdges ? gapAfterPadding / 2 : oneAtDomainEdge ? 2 * gapAfterPadding / 3 : gapAfterPadding;
+  return Math.max(tighterMax, 0);
+}

package/charts/xy-chart/components/displays/{BarDisplay.d.ts → BarDisplay/BarDisplay.d.ts}

@@ -1,6 +1,6 @@
-import type { AxisIdToScales } from '../../context/XYChartScales.context.js';
-import type { BarMetadata, BarSeriesWithDatapoints } from '../../types/xy-chart-internals.js';
-import { type BarDatapoint } from '../../types/xy-chart.js';
+import type { AxisIdToScales } from '../../../context/XYChartScales.context.js';
+import type { BarMetadata, BarSeriesWithDatapoints } from '../../../types/xy-chart-internals.js';
+import { type BarDatapoint } from '../../../types/xy-chart.js';
 interface BarDisplayProps {
     axisIdToScales: AxisIdToScales;
     series: BarSeriesWithDatapoints;

package/charts/xy-chart/components/displays/{BarDisplay.js → BarDisplay/BarDisplay.js}

@@ -23,16 +23,16 @@ __export(BarDisplay_exports, {
 });
 module.exports = __toCommonJS(BarDisplay_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_bar_accessors = require("./bar-accessors.js");
-var import_BarCanvas = require("../../../core/components/canvas/components/BarCanvas.js");
-var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
-var import_constants = require("../../../core/components/data-point/constants.js");
-var import_constants2 = require("../../../core/constants.js");
-var import_safe_get = require("../../../core/utils/safe-get.js");
-var import_useBarData = require("../../hooks/useBarData.js");
-var import_useXYChartData = require("../../hooks/useXYChartData.js");
-var import_get_scale = require("../../utils/get-scale.js");
-var import_value_representation = require("../../utils/value-representation.js");
+var import_BarCanvas = require("../../../../core/components/canvas/components/BarCanvas.js");
+var import_useGridPlotSize = require("../../../../core/components/chart-grid/hooks/useGridPlotSize.js");
+var import_constants = require("../../../../core/components/data-point/constants.js");
+var import_constants2 = require("../../../../core/constants.js");
+var import_safe_get = require("../../../../core/utils/safe-get.js");
+var import_useBarData = require("../../../hooks/useBarData.js");
+var import_useXYChartData = require("../../../hooks/useXYChartData.js");
+var import_get_scale = require("../../../utils/get-scale.js");
+var import_value_representation = require("../../../utils/value-representation.js");
+var import_bar_accessors = require("../bar-accessors.js");
 function isXBaselineAccessor(datapoint) {
   return !!datapoint && datapoint.x0 !== void 0;
 }

package/charts/xy-chart/components/displays/BarDisplay/BarLabelLayout.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Chart-level wrapper that mounts the HTML bar labels for every bar series
+ * with `hasLabels === true`. Rendered as a sibling of the canvas plot inside
+ * `<ChartGrid.PlotArea>` because HTML cannot live inside `<canvas>` — see
+ * `./BarDisplay.tsx` for the canvas-paint counterpart.
+ */
+export declare function BarLabelLayout(): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace BarLabelLayout {
+    var displayName: string;
+}

package/charts/xy-chart/components/displays/BarDisplay/BarLabelLayout.js

@@ -0,0 +1,64 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var BarLabelLayout_exports = {};
+__export(BarLabelLayout_exports, {
+  BarLabelLayout: () => BarLabelLayout
+});
+module.exports = __toCommonJS(BarLabelLayout_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_BarLabelOverlay = require("./BarLabelOverlay.js");
+var import_ChartGrid_css = require("../../../../core/components/chart-grid/ChartGrid.sty.js");
+var import_xy_chart_z_index_areas = require("../../../constants/xy-chart-z-index-areas.js");
+var import_useBarData = require("../../../hooks/useBarData.js");
+var import_useXYChartScales = require("../../../hooks/useXYChartScales.js");
+function BarLabelLayout() {
+  const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
+  const { filteredSeriesWithDatapoints, seriesToMetadata } = (0, import_useBarData.useBarData)();
+  const labelSeries = filteredSeriesWithDatapoints.filter(
+    (s) => s.hasLabels === true
+  );
+  if (labelSeries.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: import_ChartGrid_css.plotLayout,
+      style: {
+        zIndex: import_xy_chart_z_index_areas.zIndicesXYChartAreas.plot + 1,
+        pointerEvents: "none"
+      },
+      children: labelSeries.map((series) => {
+        const metadata = seriesToMetadata.get(series);
+        if (!metadata) {
+          return null;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_BarLabelOverlay.BarLabelOverlay,
+          {
+            axisIdToScales,
+            series,
+            metadata
+          },
+          series.id
+        );
+      })
+    }
+  );
+}
+BarLabelLayout["displayName"] = "BarLabelLayout";

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css

@@ -0,0 +1,19 @@
+._b76tm80-3-6-0 {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+._b76tm81-3-6-0 {
+  position: absolute;
+  white-space: nowrap;
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-weight: var(--dt-typography-text-small-default-weight, 400);
+  line-height: 1;
+}
+._b76tm82-3-6-0 {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+}

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.d.ts

@@ -0,0 +1,24 @@
+import type { AxisIdToScales } from '../../../context/XYChartScales.context.js';
+import type { BarMetadata, BarSeriesWithDatapoints } from '../../../types/xy-chart-internals.js';
+interface BarLabelOverlayProps {
+    axisIdToScales: AxisIdToScales;
+    series: BarSeriesWithDatapoints;
+    metadata: BarMetadata;
+}
+/**
+ * Renders the HTML bar labels for a single bar series. Each datapoint produces
+ * a `HorizontalBarLabel` or `VerticalBarLabel` depending on the chart's
+ * categorical-axis orientation; both use the split-clip pattern to paint the
+ * portion inside the bar with a contrasting color and the portion overflowing
+ * to the chart edge with the neutral text color.
+ *
+ * Rendered as a sibling of the `<Canvas>` element (not inside `BarDisplay`)
+ * because HTML children of `<canvas>` are fallback content, not visible DOM.
+ * See `BarLabelLayout.tsx` for the chart-level wrapper that iterates over
+ * labeled bar series and mounts this component.
+ */
+export declare function BarLabelOverlay({ axisIdToScales, series, metadata, }: Readonly<BarLabelOverlayProps>): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace BarLabelOverlay {
+    var displayName: string;
+}
+export {};

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.js

@@ -0,0 +1,170 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var BarLabelOverlay_exports = {};
+__export(BarLabelOverlay_exports, {
+  BarLabelOverlay: () => BarLabelOverlay
+});
+module.exports = __toCommonJS(BarLabelOverlay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
+var import_BarDisplay = require("./BarDisplay.js");
+var import_BarLabelOverlay_css = require("./BarLabelOverlay.sty.js");
+var import_HorizontalBarLabel = require("./HorizontalBarLabel.js");
+var import_VerticalBarLabel = require("./VerticalBarLabel.js");
+var import_canvas_color = require("../../../../core/components/canvas/utils/canvas-color.js");
+var import_useGridPlotSize = require("../../../../core/components/chart-grid/hooks/useGridPlotSize.js");
+var import_color_contrast = require("../../../../core/utils/color-contrast.js");
+var import_safe_get = require("../../../../core/utils/safe-get.js");
+var import_useBarData = require("../../../hooks/useBarData.js");
+var import_useXYChartData = require("../../../hooks/useXYChartData.js");
+var import_useXYChartTruncationMode = require("../../../hooks/useXYChartTruncationMode.js");
+var import_axis = require("../../../types/axis.js");
+var import_get_scale = require("../../../utils/get-scale.js");
+var import_value_representation = require("../../../utils/value-representation.js");
+var import_bar_accessors = require("../bar-accessors.js");
+function filterToScaleDomain(data, scale, isVertical) {
+  const domainFn = scale?.domain;
+  if (typeof domainFn !== "function") {
+    return data;
+  }
+  const domain = domainFn.call(scale);
+  if (!Array.isArray(domain)) {
+    return data;
+  }
+  const allowed = new Set(domain);
+  return data.filter((d) => {
+    const key = isVertical ? d.x0 : d.y0;
+    return typeof key === "string" ? allowed.has(key) : true;
+  });
+}
+function BarLabelOverlay({
+  axisIdToScales,
+  series,
+  metadata
+}) {
+  const { width: canvasWidth, height: canvasHeight } = (0, import_useGridPlotSize.useGridPlotSize)();
+  const { datapointMetadataMap, axisIdToScaleDomain } = (0, import_useXYChartData.useXYChartData)();
+  const { seriesToMetadata } = (0, import_useBarData.useBarData)();
+  const { truncationMode } = (0, import_useXYChartTruncationMode.useXYChartTruncationMode)();
+  if (!series.hasLabels) {
+    return null;
+  }
+  const xScale = (0, import_get_scale.getCurrentScale)(
+    axisIdToScales,
+    series.xAxisId,
+    (0, import_BarDisplay.isXBaselineAccessor)(series.data[0]) ? series.type : void 0
+  );
+  const dimensionXScale = (0, import_get_scale.getDimensionScale)(axisIdToScales, series.xAxisId);
+  const yScale = (0, import_get_scale.getCurrentScale)(
+    axisIdToScales,
+    series.yAxisId,
+    (0, import_BarDisplay.isYBaselineAccessor)(series.data[0]) ? series.type : void 0
+  );
+  const dimensionYScale = (0, import_get_scale.getDimensionScale)(axisIdToScales, series.yAxisId);
+  const { xAxis, yAxis } = (0, import_safe_get.safeGet)(seriesToMetadata, series);
+  const isVertical = xAxis.type === import_axis.XYAxisTypeCategorical;
+  const isRTL = !isVertical && Boolean(xAxis.reversed);
+  const isTTB = isVertical && Boolean(yAxis.reversed);
+  const xFn = (0, import_bar_accessors.xAccessor)(
+    xScale,
+    datapointMetadataMap,
+    dimensionXScale,
+    series.id,
+    (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain)
+  );
+  const yFn = (0, import_bar_accessors.yAccessor)(
+    yScale,
+    datapointMetadataMap,
+    dimensionYScale,
+    series.id,
+    (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain)
+  );
+  const wFn = (0, import_bar_accessors.widthAccessor)(
+    xScale,
+    datapointMetadataMap,
+    dimensionXScale,
+    (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain)
+  );
+  const hFn = (0, import_bar_accessors.heightAccessor)(
+    yScale,
+    datapointMetadataMap,
+    dimensionYScale,
+    (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain)
+  );
+  const fillHex = (0, import_canvas_color.getCanvasColor)(metadata.color.Default);
+  const insideColor = (0, import_color_contrast.getColorByContrast)(fillHex);
+  const outsideColor = import_colors.default.Text.Neutral.Default;
+  const data = filterToScaleDomain(
+    series.data,
+    isVertical ? xScale : yScale,
+    isVertical
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_BarLabelOverlay_css.overlayContainer, children: data.map((datum, index) => {
+    const text = datum.label;
+    if (!text) {
+      return null;
+    }
+    const x = xFn(datum);
+    const y = yFn(datum);
+    const w = wFn(datum);
+    const h = hFn(datum);
+    const barWidth = Math.abs(w);
+    const barHeight = Math.abs(h);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_VerticalBarLabel.VerticalBarLabel,
+      {
+        x,
+        y,
+        barWidth,
+        barHeight,
+        canvasHeight,
+        isReversed: isTTB,
+        text,
+        insideColor,
+        outsideColor,
+        truncationMode
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_HorizontalBarLabel.HorizontalBarLabel,
+      {
+        x,
+        y,
+        barWidth,
+        barHeight,
+        canvasWidth,
+        isReversed: isRTL,
+        text,
+        insideColor,
+        outsideColor,
+        truncationMode
+      }
+    ) }, index);
+  }) });
+}
+BarLabelOverlay["displayName"] = "BarLabelOverlay";

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.d.ts

@@ -0,0 +1,3 @@
+export declare const overlayContainer: string;
+export declare const labelSpan: string;
+export declare const labelClipWrapper: string;

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var BarLabelOverlay_css_exports = {};
+__export(BarLabelOverlay_css_exports, {
+  labelClipWrapper: () => labelClipWrapper,
+  labelSpan: () => labelSpan,
+  overlayContainer: () => overlayContainer
+});
+module.exports = __toCommonJS(BarLabelOverlay_css_exports);
+var import_BarLabelOverlay_css_ts_vanilla = require("./BarLabelOverlay.css");
+var labelClipWrapper = "_b76tm82-3-6-0";
+var labelSpan = "_b76tm81-3-6-0";
+var overlayContainer = "_b76tm80-3-6-0";

package/charts/xy-chart/components/displays/BarDisplay/HorizontalBarLabel.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
+interface HorizontalBarLabelProps {
+    x: number;
+    y: number;
+    barWidth: number;
+    barHeight: number;
+    canvasWidth: number;
+    isReversed: boolean;
+    text: string;
+    insideColor: string;
+    outsideColor: string;
+    truncationMode: TruncationMode;
+}
+/**
+ * HTML "split-clip" label for a single horizontal bar.
+ *
+ * The label renders twice: an outer copy (`outsideColor`) spans from the bar's
+ * leading edge to the chart's opposite edge so long labels overflow the bar
+ * up to the chart bounds; a wrapper at the bar's bounds clips an inner copy
+ * (`insideColor`) via `overflow: hidden`. Where the two overlap, the inner
+ * copy paints on top so the section *inside the bar* picks up the contrast
+ * color while the section *outside the bar* keeps the neutral text color.
+ *
+ * When `isReversed` is true (the numerical X axis has `reversed` set, i.e.
+ * RTL bars) the layout mirrors: bars grow right-to-left and the label anchors
+ * at the bar's right edge (the zero-baseline side), allowing overflow toward
+ * the left edge.
+ */
+export declare function HorizontalBarLabel({ x, y, barWidth, barHeight, canvasWidth, isReversed, text, insideColor, outsideColor, truncationMode, }: Readonly<HorizontalBarLabelProps>): ReactNode;
+export declare namespace HorizontalBarLabel {
+    var displayName: string;
+}
+export {};