@dynatrace/strato-components 3.10.1 → 3.11.0

package/charts/xy-chart/utils/is-in-pixel-range.js

@@ -0,0 +1,25 @@
+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 is_in_pixel_range_exports = {};
+__export(is_in_pixel_range_exports, {
+  isInPixelRange: () => isInPixelRange
+});
+module.exports = __toCommonJS(is_in_pixel_range_exports);
+function isInPixelRange(position, start, span) {
+  return position >= start && position <= start + span;
+}

package/charts/xy-chart/utils/query-hovered-grid.js

@@ -23,14 +23,12 @@ __export(query_hovered_grid_exports, {
 });
 module.exports = __toCommonJS(query_hovered_grid_exports);
 var import_get_scale = require("./get-scale.js");
+var import_is_in_pixel_range = require("./is-in-pixel-range.js");
 var import_query_hovered = require("./query-hovered.js");
 var import_type_guards = require("./type-guards.js");
 var import_value_representation = require("./value-representation.js");
 var import_safe_get = require("../../core/utils/safe-get.js");
 const HOVER_GRID_CELL_SIZE = 32;
-function isInPixelRange(position, start, span) {
-  return position >= start && position <= start + span;
-}
 function buildSingleHoverGrid(series, axisIdToScales, datapointMetadataMap, seriesToMetadata, axisIdToScaleDomain) {
   const { xAxis, yAxis } = (0, import_safe_get.safeGet)(seriesToMetadata, series);
   const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
@@ -57,42 +55,50 @@ function buildSingleHoverGrid(series, axisIdToScales, datapointMetadataMap, seri
     () => []
   );
   const data = (0, import_type_guards.isRectSeries)(series) ? series.filteredData : series.data;
+  const isBar = (0, import_type_guards.isBarSeries)(series);
   for (const datapoint of data) {
-    if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
+    const metadata = (0, import_safe_get.safeGet)(datapointMetadataMap, datapoint);
+    if (metadata.isGap) {
       continue;
     }
-    const { x, y, width, height } = (0, import_query_hovered.getPixelDimensionsForDatapoint)(
+    const {
+      x: hitX,
+      y: hitY,
+      width: hitWidth,
+      height: hitHeight
+    } = (0, import_query_hovered.getHitBoxForDatapoint)(
       datapoint,
-      accessors
+      accessors,
+      isBar,
+      xScale,
+      yScale,
+      metadata.baseline
     );
-    if (width <= 0 || height <= 0) {
-      continue;
-    }
     const colStart = Math.max(
       0,
-      Math.floor((x - originX) / HOVER_GRID_CELL_SIZE)
+      Math.floor((hitX - originX) / HOVER_GRID_CELL_SIZE)
     );
     const colEnd = Math.min(
       cols - 1,
-      Math.floor((x + width - originX) / HOVER_GRID_CELL_SIZE)
+      Math.floor((hitX + hitWidth - originX) / HOVER_GRID_CELL_SIZE)
     );
     const rowStart = Math.max(
       0,
-      Math.floor((y - originY) / HOVER_GRID_CELL_SIZE)
+      Math.floor((hitY - originY) / HOVER_GRID_CELL_SIZE)
     );
     const rowEnd = Math.min(
       rows - 1,
-      Math.floor((y + height - originY) / HOVER_GRID_CELL_SIZE)
+      Math.floor((hitY + hitHeight - originY) / HOVER_GRID_CELL_SIZE)
     );
     if (colStart > colEnd || rowStart > rowEnd) {
       continue;
     }
     const entry = {
       datapoint,
-      x,
-      y,
-      width,
-      height
+      x: hitX,
+      y: hitY,
+      width: hitWidth,
+      height: hitHeight
     };
     for (let row = rowStart; row <= rowEnd; row++) {
       for (let col = colStart; col <= colEnd; col++) {
@@ -132,7 +138,7 @@ function findInGrid(grid, position) {
   }
   const candidates = cells[row * cols + col];
   for (const entry of candidates) {
-    if (isInPixelRange(position.x, entry.x, entry.width) && isInPixelRange(position.y, entry.y, entry.height)) {
+    if ((0, import_is_in_pixel_range.isInPixelRange)(position.x, entry.x, entry.width) && (0, import_is_in_pixel_range.isInPixelRange)(position.y, entry.y, entry.height)) {
       return entry.datapoint;
     }
   }

package/charts/xy-chart/utils/query-hovered.d.ts

@@ -1,7 +1,7 @@
 import type { Point } from '../../core/types/point.js';
 import type { BarSeriesQueryResult, RectSeriesQueryResult, SeriesQueryResult } from '../context/XYChartOverlayPerformance.context.js';
 import type { AxisIdToScales } from '../context/XYChartScales.context.js';
-import { type AxisIdToScaleDomain, type BarSeriesWithDatapoints, type RectDatapointInternal, type RectSeriesWithDatapoints, type SeriesToMetadata, type MapDatapoints } from '../types/xy-chart-internals.js';
+import { type AnyXYChartScale, type AxisIdToScaleDomain, type BarSeriesWithDatapoints, type RectDatapointInternal, type RectSeriesWithDatapoints, type SeriesToMetadata, type MapDatapoints, type XYChartAxisDirection } from '../types/xy-chart-internals.js';
 import type { BarDatapoint } from '../types/xy-chart.js';
 interface RectAccessors {
     xAccessor: (datapoint: RectDatapointInternal) => number;
@@ -20,11 +20,6 @@ export declare function getAccessors(series: RectSeriesWithDatapoints | BarSerie
     yAccessor: (datapoint: RectDatapointInternal) => number;
     widthAccessor: (datapoint: RectDatapointInternal) => number;
     heightAccessor: (datapoint: RectDatapointInternal) => number;
-} | {
-    xAccessor: (datapoint: BarDatapoint) => number;
-    yAccessor: (datapoint: BarDatapoint) => number;
-    widthAccessor: (datapoint: BarDatapoint) => number;
-    heightAccessor: (datapoint: BarDatapoint) => number;
 };
 export declare const getPixelDimensionsForDatapoint: (datapoint: RectDatapointInternal | BarDatapoint, genAccessors: RectAccessors | BarAccessors) => {
     x: number;
@@ -32,10 +27,21 @@ export declare const getPixelDimensionsForDatapoint: (datapoint: RectDatapointIn
     width: number;
     height: number;
 };
+/**
+ * Resolves a datapoint's pixel bounding box, expanded to `getBarHitBox`'s
+ * minimum hit-target size for bar series. Shared between the linear-scan
+ * and grid-based hover queries so they stay in sync.
+ */
+export declare function getHitBoxForDatapoint(datapoint: RectDatapointInternal | BarDatapoint, accessors: RectAccessors | BarAccessors, isBar: boolean, xScale: AnyXYChartScale, yScale: AnyXYChartScale, baseline: XYChartAxisDirection): {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
 /**
  * Retrieves the datapoint that is currently being hovered over based on the given position.
  */
-export declare function getHoveredDatapoint(position: Point, series: RectSeriesWithDatapoints | BarSeriesWithDatapoints, axisIdToScales: AxisIdToScales, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain): BarDatapoint | RectDatapointInternal | undefined;
+export declare function getHoveredDatapoint(position: Point, series: RectSeriesWithDatapoints | BarSeriesWithDatapoints, axisIdToScales: AxisIdToScales, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain): BarDatapoint | undefined;
 export declare function buildQueryHovered(axisIdToScales: AxisIdToScales, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain): {
     (arrayOfSeries: RectSeriesWithDatapoints[], position: Point): RectSeriesQueryResult | undefined;
     (arrayOfSeries: BarSeriesWithDatapoints[], position: Point): BarSeriesQueryResult | undefined;

package/charts/xy-chart/utils/query-hovered.js

@@ -20,20 +20,21 @@ __export(query_hovered_exports, {
   buildQueryAllHovered: () => buildQueryAllHovered,
   buildQueryHovered: () => buildQueryHovered,
   getAccessors: () => getAccessors,
+  getHitBoxForDatapoint: () => getHitBoxForDatapoint,
   getHoveredDatapoint: () => getHoveredDatapoint,
   getPixelDimensionsForDatapoint: () => getPixelDimensionsForDatapoint
 });
 module.exports = __toCommonJS(query_hovered_exports);
+var import_get_bar_hit_box = require("./get-bar-hit-box.js");
 var import_get_scale = require("./get-scale.js");
+var import_is_in_pixel_range = require("./is-in-pixel-range.js");
 var import_type_guards = require("./type-guards.js");
 var import_value_representation = require("./value-representation.js");
 var import_safe_get = require("../../core/utils/safe-get.js");
 var import_bar_accessors = require("../components/displays/bar-accessors.js");
 var import_rect_accessors = require("../components/displays/rect-accessors.js");
+var import_defaults = require("../constants/defaults.js");
 var import_xy_chart_internals = require("../types/xy-chart-internals.js");
-function isInPixelRange(position, start, span) {
-  return position >= start && position <= start + span;
-}
 function getAccessors(series, axisIdToScales, datapointMetadataMap, xRelAccessor, yRelAccessor) {
   const { type, xAxisId, yAxisId } = series;
   const xScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, xAxisId, type);
@@ -95,6 +96,20 @@ const getPixelDimensionsForDatapoint = (datapoint, genAccessors) => {
     height: accessors.heightAccessor(datapoint)
   };
 };
+function getHitBoxForDatapoint(datapoint, accessors, isBar, xScale, yScale, baseline) {
+  const rect = getPixelDimensionsForDatapoint(datapoint, accessors);
+  if (!isBar) {
+    return rect;
+  }
+  return (0, import_get_bar_hit_box.getBarHitBox)(
+    rect,
+    datapoint,
+    import_defaults.MIN_BAR_HIT_TARGET_PX,
+    xScale,
+    yScale,
+    baseline
+  );
+}
 function getHoveredDatapoint(position, series, axisIdToScales, datapointMetadataMap, seriesToMetadata, axisIdToScaleDomain) {
   const data = (0, import_type_guards.isRectSeries)(series) ? series.filteredData : series.data;
   if (position.x < 0 || position.y < 0) {
@@ -110,15 +125,28 @@ function getHoveredDatapoint(position, series, axisIdToScales, datapointMetadata
     xRelAccessor,
     yRelAccessor
   );
+  const isBar = (0, import_type_guards.isBarSeries)(series);
+  const xScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.xAxisId, series.type);
+  const yScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.yAxisId, series.type);
   for (const datapoint of data) {
-    if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
+    const metadata = (0, import_safe_get.safeGet)(datapointMetadataMap, datapoint);
+    if (metadata.isGap) {
       continue;
     }
-    const { x, y, width, height } = getPixelDimensionsForDatapoint(
+    const {
+      x: hitX,
+      y: hitY,
+      width: hitWidth,
+      height: hitHeight
+    } = getHitBoxForDatapoint(
       datapoint,
-      accessors
+      accessors,
+      isBar,
+      xScale,
+      yScale,
+      metadata.baseline
     );
-    if (isInPixelRange(position.x, x, width) && isInPixelRange(position.y, y, height)) {
+    if ((0, import_is_in_pixel_range.isInPixelRange)(position.x, hitX, hitWidth) && (0, import_is_in_pixel_range.isInPixelRange)(position.y, hitY, hitHeight)) {
       return datapoint;
     }
   }

package/charts/xy-chart/utils/query-shared.d.ts

@@ -2,5 +2,5 @@ import type { GetBarPixelCenter, GetLinearSeriesPixelCenter, SortedEntriesPerSha
 import type { QueryAllHovered } from './query-hovered.js';
 import type { HoverQuery } from '../context/XYChartOverlayPerformance.context.js';
 import { type MapDatapoints } from '../types/xy-chart-internals.js';
-export declare function buildQueryShared(sortedEntries: SortedEntriesPerShape | undefined, queryAllHovered: QueryAllHovered, getBarPixelCenter: GetBarPixelCenter, getLinearSeriesPixelCenter: GetLinearSeriesPixelCenter, datapointMetadataMap: MapDatapoints): HoverQuery;
+export declare function buildQueryShared(sortedEntries: SortedEntriesPerShape | undefined, queryAllHovered: QueryAllHovered, getBarPixelCenter: GetBarPixelCenter, getLinearSeriesPixelCenter: GetLinearSeriesPixelCenter, datapointMetadataMap: MapDatapoints, hasGroupedBars: boolean): HoverQuery;
 //# sourceMappingURL=query-shared.d.ts.map

package/charts/xy-chart/utils/query-shared.js

@@ -24,7 +24,8 @@ var import_constants = require("../../core/constants.js");
 var import_binary_search = require("../../core/utils/binary-search.js");
 var import_safe_get = require("../../core/utils/safe-get.js");
 var import_xy_chart_internals = require("../types/xy-chart-internals.js");
-function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, getLinearSeriesPixelCenter, datapointMetadataMap) {
+function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, getLinearSeriesPixelCenter, datapointMetadataMap, hasGroupedBars) {
+  const getClusterKey = hasGroupedBars ? (e) => e.boundaries : (e) => Math.round(e.baselinePixel);
   return function queryShared({
     position,
     rectSeriesData,
@@ -45,28 +46,39 @@ function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, get
       relative
     );
     const lastHovered = allBarsHovered.at(-1);
-    const searchX = lastHovered ? getBarPixelCenter(lastHovered.series, lastHovered.datapoint).xPixel : relative.x;
-    const clusterEntries = sortedEntries ? findClosestClusterBinary(sortedEntries.combined, searchX) : findClosestClusterLinear(
+    const lastHoveredCenter = lastHovered ? getBarPixelCenter(lastHovered.series, lastHovered.datapoint) : void 0;
+    const firstBarSeries = barSeriesData[0];
+    const firstBarDatapoint = firstBarSeries?.data[0];
+    const isHorizontal = lastHoveredCenter?.isHorizontal ?? (firstBarSeries !== void 0 && firstBarDatapoint !== void 0 ? getBarPixelCenter(firstBarSeries, firstBarDatapoint).isHorizontal : false);
+    const searchBaselinePixel = lastHoveredCenter?.baselinePixel ?? (isHorizontal ? relative.y : relative.x);
+    const clusterEntries = sortedEntries ? findClosestClusterBinary(
+      sortedEntries.combined,
+      searchBaselinePixel,
+      getClusterKey
+    ) : findClosestClusterLinear(
       barSeriesData,
       lineSeriesData,
       areaSeriesData,
       datapointMetadataMap,
       getBarPixelCenter,
       getLinearSeriesPixelCenter,
-      searchX
+      searchBaselinePixel
     );
     if (clusterEntries.length === 0) {
       return { preferred: void 0, datapoints: [] };
     }
     const topmostHovered = allBarsHovered.at(-1);
-    const cursorY = relative.y;
+    const cursorValue = clusterEntries[0].isHorizontal ? relative.x : relative.y;
     const distanceToCursor = (entry) => Math.min(
-      Math.abs(entry.y0Pixel - cursorY),
-      Math.abs(entry.y1Pixel - cursorY)
-    );
-    const euclideanDistanceToCursor = (entry) => Math.sqrt(
-      Math.pow(entry.xPixel - relative.x, 2) + Math.pow(entry.y0Pixel - cursorY, 2)
+      Math.abs(entry.value0Pixel - cursorValue),
+      Math.abs(entry.value1Pixel - cursorValue)
     );
+    const euclideanDistanceToCursor = (entry) => {
+      const [cursorDomain, cursorVal] = entry.isHorizontal ? [relative.y, relative.x] : [relative.x, relative.y];
+      return Math.sqrt(
+        Math.pow(entry.baselinePixel - cursorDomain, 2) + Math.pow(entry.value0Pixel - cursorVal, 2)
+      );
+    };
     const closestEntry = clusterEntries.reduce(
       (closest, entry) => {
         if (closest === void 0) {
@@ -96,13 +108,22 @@ function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, get
     if (allBarsHovered.length > 0) {
       allowedBoundaries = new Set(
         allBarsHovered.map(
-          (b) => `${String(b.datapoint.x0)}-${String(b.datapoint.x1)}`
+          (b) => getBarPixelCenter(b.series, b.datapoint).boundaries
         )
       );
     } else if (preferred) {
-      allowedBoundaries = /* @__PURE__ */ new Set([
-        `${String(preferred.datapoint.x0)}-${String(preferred.datapoint.x1)}`
-      ]);
+      if (preferred.type === import_xy_chart_internals.BAR_VARIANT) {
+        allowedBoundaries = /* @__PURE__ */ new Set([
+          getBarPixelCenter(
+            preferred.series,
+            preferred.datapoint
+          ).boundaries
+        ]);
+      } else {
+        allowedBoundaries = /* @__PURE__ */ new Set([
+          `${String(preferred.datapoint.x0)}-${String(preferred.datapoint.x1)}`
+        ]);
+      }
     }
     const filteredEntries = clusterEntries.filter(
       (e) => allowedBoundaries === void 0 || allowedBoundaries.has(e.boundaries)
@@ -113,31 +134,31 @@ function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, get
     return { preferred, datapoints };
   };
 }
-function findClosestClusterBinary(sorted, searchX) {
+function findClosestClusterBinary(sorted, searchBaselinePixel, getClusterKey) {
   if (sorted.length === 0) {
     return [];
   }
   const [left, right] = (0, import_binary_search.getClusterBoundariesAtPosition)(
-    searchX,
+    searchBaselinePixel,
     sorted,
-    (e) => e.xPixel,
-    (e) => Math.round(e.xPixel)
+    (e) => e.baselinePixel,
+    getClusterKey
   );
   if (left === -1) {
     return [];
   }
   return sorted.slice(left, right + 1);
 }
-function findClosestClusterLinear(barSeriesData, lineSeriesData, areaSeriesData, datapointMetadataMap, getBarPixelCenter, getLinearSeriesPixelCenter, searchX) {
+function findClosestClusterLinear(barSeriesData, lineSeriesData, areaSeriesData, datapointMetadataMap, getBarPixelCenter, getLinearSeriesPixelCenter, searchBaselinePixel) {
   const entries = [];
   let closestKey;
   let closestDistance = Infinity;
-  function visit(xPixel, y0Pixel, y1Pixel, boundaries, result) {
-    entries.push({ xPixel, y0Pixel, y1Pixel, boundaries, result });
-    const distance = Math.abs(xPixel - searchX);
+  function visit(entry) {
+    entries.push(entry);
+    const distance = Math.abs(entry.baselinePixel - searchBaselinePixel);
     if (distance < closestDistance) {
       closestDistance = distance;
-      closestKey = Math.round(xPixel);
+      closestKey = Math.round(entry.baselinePixel);
     }
   }
   for (const series of barSeriesData) {
@@ -145,15 +166,15 @@ function findClosestClusterLinear(barSeriesData, lineSeriesData, areaSeriesData,
       if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
         continue;
       }
-      const { xPixel, y0Pixel, y1Pixel, boundaries } = getBarPixelCenter(
-        series,
-        datapoint
-      );
-      visit(xPixel, y0Pixel, y1Pixel, boundaries, {
-        type: series.type,
-        distance: 0,
-        datapoint,
-        series
+      const center = getBarPixelCenter(series, datapoint);
+      visit({
+        ...center,
+        result: {
+          type: series.type,
+          distance: 0,
+          datapoint,
+          series
+        }
       });
     }
   }
@@ -162,17 +183,20 @@ function findClosestClusterLinear(barSeriesData, lineSeriesData, areaSeriesData,
       if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
         continue;
       }
-      const { xPixel, y0Pixel, y1Pixel, boundaries } = getLinearSeriesPixelCenter(series, datapoint);
-      visit(xPixel, y0Pixel, y1Pixel, boundaries, {
-        type: series.type,
-        distance: 0,
-        datapoint,
-        series
+      const center = getLinearSeriesPixelCenter(series, datapoint);
+      visit({
+        ...center,
+        result: {
+          type: series.type,
+          distance: 0,
+          datapoint,
+          series
+        }
       });
     }
   }
   if (closestKey === void 0) {
     return [];
   }
-  return entries.filter((e) => Math.round(e.xPixel) === closestKey);
+  return entries.filter((e) => Math.round(e.baselinePixel) === closestKey);
 }

package/charts/xy-chart-adoption/categorical-bar/CategoricalBarToXY.js

@@ -21,19 +21,25 @@ __export(CategoricalBarToXY_exports, {
 });
 module.exports = __toCommonJS(CategoricalBarToXY_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_bar_series_accessors = require("./bar-series-accessors.js");
 var import_iterate_slots = require("./iterate-slots.js");
 var import_resolve_categorical_color_support = require("./resolve-categorical-color-support.js");
 var import_transformer_data_to_xy = require("./transformer-data-to-xy.js");
+var import_transformer_series_actions_to_xy = require("./transformer-series-actions-to-xy.js");
 var import_format_csv = require("./utils/format-csv.js");
+var import_map_axes_to_xy = require("./utils/map-axes-to-xy.js");
 var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
 var import_download = require("../../../core/utils/download.js");
+var import_defaults = require("../../categorical-bar/types/defaults.js");
 var import_constants = require("../../core/constants.js");
 var import_chart_types = require("../../core/types/chart-types.js");
+var import_get_unit_as_string = require("../../core/utils/get-unit-as-string.js");
 var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
-const X_AXIS_ID = "x-axis";
-const Y_AXIS_ID = "y-axis";
+const CATEGORY_AXIS_ID = "x-axis";
+const Y_NUMERICAL_AXIS_ID = "y-axis-default";
+const toNumericalAxisId = (unit) => `y-axis-${(0, import_get_unit_as_string.getUnitAsString)(unit)}`;
 const CategoricalBarToXY = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     data,
@@ -47,34 +53,52 @@ const CategoricalBarToXY = (0, import_react.forwardRef)((props, forwardedRef) =>
     height,
     loading,
     truncationMode,
+    seriesActions,
     layout,
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow
   } = props;
+  const xyRef = (0, import_react.useRef)(null);
+  const mappedSeriesActions = (0, import_react.useMemo)(
+    () => seriesActions ? (0, import_transformer_series_actions_to_xy.mapCategoricalSeriesActionsToXY)(seriesActions, data) : void 0,
+    [seriesActions, data]
+  );
   const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const {
     variant,
     data: xyData,
-    seriesByDimension
+    seriesByDimension,
+    unitPerSeries
   } = (0, import_transformer_data_to_xy.transformCategoricalBarDataToXY)(data, groupMode);
   const {
     colorRules: userColorRules,
+    categoryAxis: slotCategoryAxis,
+    valueAxis: slotValueAxis,
     legend,
     emptyState,
     errorState,
-    intents
+    intents,
+    toolbar,
+    tooltip
   } = (0, import_iterate_slots.iterateSlots)(children);
+  const resolvedTooltipVariant = tooltip?.variant === "single" ? "single" : "shared";
   const resolvedColorRules = (0, import_resolve_categorical_color_support.resolveCategoricalColorSupport)(
+    data,
     xyData,
     colorPalette,
     colorPaletteMode,
     userColorRules,
     groupMode
   );
-  const xyRef = (0, import_react.useRef)(null);
+  const resolvedCategoryAxis = (0, import_lodash_es.merge)(
+    {},
+    import_defaults.defaultConfig.categoryAxis,
+    slotCategoryAxis
+  );
+  const resolvedValueAxis = (0, import_lodash_es.merge)({}, import_defaults.defaultConfig.valueAxis, slotValueAxis);
   const downloadDataCallback = (0, import_react.useCallback)(() => {
-    const csvString = (0, import_format_csv.formatCSV)(data);
-    (0, import_download.downloadCSV)(csvString, import_constants.CSS_DOWNLOAD_FILENAME);
+    const csv = (0, import_format_csv.formatCSV)(data);
+    (0, import_download.downloadCSV)(csv, import_constants.CSS_DOWNLOAD_FILENAME);
   }, [data]);
   (0, import_react.useImperativeHandle)(
     forwardedRef,
@@ -88,13 +112,38 @@ const CategoricalBarToXY = (0, import_react.forwardRef)((props, forwardedRef) =>
     []
   );
   const isHorizontal = layout === "horizontal";
-  const xAxisType = isHorizontal ? "numerical" : "categorical";
-  const yAxisType = isHorizontal ? "categorical" : "numerical";
+  const barSeriesAccessors = (0, import_bar_series_accessors.getBarSeriesAccessors)(isHorizontal);
+  const xAxisProps = (0, import_map_axes_to_xy.mapCategoryAxisToXAxis)(resolvedCategoryAxis);
+  const yAxisProps = (0, import_map_axes_to_xy.mapValueAxisToYAxis)(resolvedValueAxis);
+  const dimToAxisId = /* @__PURE__ */ new Map();
+  const numericalAxisGroups = /* @__PURE__ */ new Map();
+  if (seriesByDimension !== null) {
+    for (const [dim] of seriesByDimension) {
+      const unit = unitPerSeries.get(dim);
+      const axisId = unit !== void 0 ? toNumericalAxisId(unit) : Y_NUMERICAL_AXIS_ID;
+      dimToAxisId.set(dim, axisId);
+      if (!numericalAxisGroups.has(axisId)) {
+        numericalAxisGroups.set(axisId, { data: [], unit });
+      }
+    }
+  } else {
+    for (const dataPoint of xyData) {
+      const unit = unitPerSeries.get(String(dataPoint.seriesId));
+      const axisId = unit !== void 0 ? toNumericalAxisId(unit) : Y_NUMERICAL_AXIS_ID;
+      let group = numericalAxisGroups.get(axisId);
+      if (group === void 0) {
+        group = { data: [], unit };
+        numericalAxisGroups.set(axisId, group);
+      }
+      group.data.push(dataPoint);
+    }
+  }
+  const numericalAxisEntries = [...numericalAxisGroups.entries()];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_XYChartRoot.XYChart,
     {
-      data: [],
       ref: xyRef,
+      data: [],
       width,
       height,
       className,
@@ -108,34 +157,79 @@ const CategoricalBarToXY = (0, import_react.forwardRef)((props, forwardedRef) =>
       __downloadDataCallback: downloadDataCallback,
       ...behaviorTrackingProps,
       children: [
-        seriesByDimension ? [...seriesByDimension.entries()].map(([dim, dimData]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        seriesByDimension !== null ? [...seriesByDimension.entries()].map(([dim, dimData]) => {
+          const axisId = dimToAxisId.get(dim) ?? Y_NUMERICAL_AXIS_ID;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_XYChartRoot.XYChart.BarSeries,
+            {
+              variant,
+              data: dimData,
+              xAxisId: isHorizontal ? axisId : CATEGORY_AXIS_ID,
+              yAxisId: isHorizontal ? CATEGORY_AXIS_ID : axisId,
+              ...barSeriesAccessors,
+              seriesIdAccessor: "seriesId",
+              nameAccessor: "seriesName",
+              actions: mappedSeriesActions
+            },
+            dim
+          );
+        }) : numericalAxisEntries.map(([axisId, { data: seriesData }]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_XYChartRoot.XYChart.BarSeries,
           {
             variant,
-            data: dimData,
-            xAxisId: X_AXIS_ID,
-            yAxisId: Y_AXIS_ID,
-            ...(0, import_bar_series_accessors.getBarSeriesAccessors)(isHorizontal),
+            data: seriesData,
+            xAxisId: isHorizontal ? axisId : CATEGORY_AXIS_ID,
+            yAxisId: isHorizontal ? CATEGORY_AXIS_ID : axisId,
+            ...barSeriesAccessors,
             seriesIdAccessor: "seriesId",
-            nameAccessor: "seriesName"
+            nameAccessor: "seriesName",
+            actions: mappedSeriesActions
           },
-          dim
-        )) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_XYChartRoot.XYChart.BarSeries,
+          axisId
+        )),
+        isHorizontal ? numericalAxisEntries.map(([axisId, { unit }]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.XAxis,
           {
-            variant: "single",
-            data: xyData,
-            xAxisId: X_AXIS_ID,
-            yAxisId: Y_AXIS_ID,
-            ...(0, import_bar_series_accessors.getBarSeriesAccessors)(isHorizontal),
-            seriesIdAccessor: "seriesId",
-            nameAccessor: "seriesName"
+            id: axisId,
+            ...yAxisProps,
+            position: "bottom",
+            unit
+          },
+          axisId
+        )) : numericalAxisEntries.map(([axisId, { unit }]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.YAxis,
+          {
+            id: axisId,
+            position: "left",
+            unit,
+            ...yAxisProps
+          },
+          axisId
+        )),
+        isHorizontal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.YAxis,
+          {
+            id: CATEGORY_AXIS_ID,
+            type: "categorical",
+            position: "left",
+            label: xAxisProps.label,
+            tickLabelMaxSize: xAxisProps.tickLabelMaxSize
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_XYChartRoot.XYChart.XAxis,
+          {
+            id: CATEGORY_AXIS_ID,
+            type: "categorical",
+            position: "bottom",
+            ...xAxisProps,
+            disableZoom: true,
+            disablePan: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.XAxis, { id: X_AXIS_ID, type: xAxisType, position: "bottom" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.YAxis, { id: Y_AXIS_ID, type: yAxisType, position: "left" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Tooltip, { _variant: resolvedTooltipVariant }),
         resolvedColorRules.map((rule, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.ColorRule, { ...rule }, i)),
         legend && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { ...legend }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Toolbar, { ...toolbar ?? {} }),
         errorState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.ErrorState, { children: errorState.children }),
         emptyState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.EmptyState, { children: emptyState.children }),
         intents.map((intent, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Intent, { ...intent }, i))