@dynatrace/strato-components 3.10.4 → 3.11.1

package/charts/xy-chart/components/toolbar/ZoomModeButton.js

@@ -24,6 +24,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
+var import_KeyboardShortcut = require("../../../../content/keyboard-shortcut/KeyboardShortcut.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_constants = require("../../../core/components/interactions-overlay/constants.js");
 var import_types = require("../../../core/components/interactions-overlay/types.js");
@@ -33,9 +34,10 @@ var import_OverlayContext = require("../../../core/components/overlay-tooltip/co
 var import_useSynchronizedSelection = require("../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_ChartToolbarRenderer = require("../../../core/components/toolbar/ChartToolbarRenderer.js");
 var import_messages = require("../../../core/components/toolbar/messages.js");
+var import_styles_css = require("../../../core/components/toolbar/styles.sty.js");
 var import_useA11yToolbarTabIndex = require("../../../core/hooks/useA11yToolbarTabIndex.js");
-var import_get_key_shortcut_by_agent = require("../../../core/utils/get-key-shortcut-by-agent.js");
 var import_get_percentage_from_pixel = require("../../../core/utils/get-percentage-from-pixel.js");
+var import_get_primary_modifier_key = require("../../../core/utils/get-primary-modifier-key.js");
 var import_messages2 = require("../../messages/messages.js");
 var import_reduce_interaction_mode = require("../../store/reduce-interaction-mode.js");
 var import_reducer_explorer = require("../../store/reducer-explorer.js");
@@ -85,9 +87,6 @@ const ZoomModeButton = () => {
       }
     }
   };
-  const tooltipKeyShortcut = `${(0, import_get_key_shortcut_by_agent.getKeyShortcutByAgent)(
-    "CONTROL"
-  )} ${intl.formatMessage(import_messages.TOOLBAR_MESSAGES.or)} ${import_constants.KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartToolbarRenderer.ChartToolbarRenderer.Control,
     {
@@ -97,7 +96,17 @@ const ZoomModeButton = () => {
       onClick: handleZoomMode,
       onKeyDown: handleKeyDown,
       tabIndex,
-      tooltipKeyShortcut,
+      menuShortcut: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_KeyboardShortcut.KeyboardShortcut, { keys: (0, import_get_primary_modifier_key.getPrimaryModifierKey)(), variant: "minimal" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_styles_css.styledOrText, children: ` ${intl.formatMessage(import_messages.TOOLBAR_MESSAGES.or)} ` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_KeyboardShortcut.KeyboardShortcut,
+          {
+            keys: import_constants.KeyboardControls.KEYBOARD_ZOOM_MODE_SHORTCUT_ALTERNATIVE,
+            variant: "minimal"
+          }
+        )
+      ] }),
       placement: "menu",
       "data-dt-name": "ToolbarZoomMode"
     }

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-10-4 {
+._1u58xor0-3-11-1 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-10-4 {
+._1u58xor1-3-11-1 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-10-4::after {
+._1u58xor1-3-11-1::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-10-4 {
+._1u58xor2-3-11-1 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-10-4 {
+._1u58xor3-3-11-1 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -24,7 +24,7 @@ __export(tooltip_styles_css_exports, {
 });
 module.exports = __toCommonJS(tooltip_styles_css_exports);
 var import_tooltip_styles_css_ts_vanilla = require("./tooltip-styles.css");
-var axisName = "_1u58xor1-3-10-4";
-var axisValue = "_1u58xor2-3-10-4";
-var duration = "_1u58xor3-3-10-4";
-var wrapper = "_1u58xor0-3-10-4";
+var axisName = "_1u58xor1-3-11-1";
+var axisValue = "_1u58xor2-3-11-1";
+var duration = "_1u58xor3-3-11-1";
+var wrapper = "_1u58xor0-3-11-1";

package/charts/xy-chart/constants/defaults.d.ts

@@ -19,5 +19,7 @@ export declare const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 export declare const XY_CHART_TOP_AXIS_LABEL = "Top axis";
 export declare const DISPLAY_NAME = "XYChart";
 export declare const MIN_LABELED_BAR_SIZE = 25;
+export declare const MIN_BAR_HIGHLIGHT_SIZE_PX = 4;
+export declare const MIN_BAR_HIT_TARGET_PX = 6;
 export {};
 //# sourceMappingURL=defaults.d.ts.map

package/charts/xy-chart/constants/defaults.js

@@ -25,6 +25,8 @@ __export(defaults_exports, {
   DEFAULT_LOADING_STATE: () => DEFAULT_LOADING_STATE,
   DEFAULT_POINTS_DISPLAY: () => DEFAULT_POINTS_DISPLAY,
   DISPLAY_NAME: () => DISPLAY_NAME,
+  MIN_BAR_HIGHLIGHT_SIZE_PX: () => MIN_BAR_HIGHLIGHT_SIZE_PX,
+  MIN_BAR_HIT_TARGET_PX: () => MIN_BAR_HIT_TARGET_PX,
   MIN_LABELED_BAR_SIZE: () => MIN_LABELED_BAR_SIZE,
   RECT_STROKE_WIDTH: () => RECT_STROKE_WIDTH,
   XY_CHART_ARIA_LABEL: () => XY_CHART_ARIA_LABEL,
@@ -91,3 +93,5 @@ const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 const XY_CHART_TOP_AXIS_LABEL = "Top axis";
 const DISPLAY_NAME = "XYChart";
 const MIN_LABELED_BAR_SIZE = 25;
+const MIN_BAR_HIGHLIGHT_SIZE_PX = 4;
+const MIN_BAR_HIT_TARGET_PX = 6;

package/charts/xy-chart/hooks/useColorRule.js

@@ -64,7 +64,8 @@ const useColorRule = ({
         isValid,
         datapointMetadataMap,
         seriesToMetadata,
-        seriesMetadata
+        seriesMetadata,
+        index
       );
     } else {
       const validColorRule = reversedRules.find(

package/charts/xy-chart/layout/XYChartLayout.css

@@ -1,10 +1,10 @@
-._1ru1qe70-3-10-4 {
+._1ru1qe70-3-11-1 {
   pointer-events: none;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
-._1ru1qe71-3-10-4 {
+._1ru1qe71-3-11-1 {
   top: -5.5px;
   left: -5.5px;
   width: calc(100% + 11px);

package/charts/xy-chart/layout/XYChartLayout.sty.js

@@ -23,5 +23,5 @@ __export(XYChartLayout_css_exports, {
 module.exports = __toCommonJS(XYChartLayout_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartLayout_css_ts_vanilla = require("./XYChartLayout.css");
-var datapointCanvasPlot = "_1ru1qe71-3-10-4 _13lzg4k0-3-10-4 _1ru1qe70-3-10-4";
-var rectangleCanvasPlot = "_13lzg4k0-3-10-4 _1ru1qe70-3-10-4";
+var datapointCanvasPlot = "_1ru1qe71-3-11-1 _13lzg4k0-3-11-1 _1ru1qe70-3-11-1";
+var rectangleCanvasPlot = "_13lzg4k0-3-11-1 _1ru1qe70-3-11-1";

package/charts/xy-chart/processing-strategies/strategies/rect-series.d.ts

@@ -15,6 +15,7 @@ export declare class RectSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
         filteredData: never[];
         xAxisId: string;
         yAxisId: string;
+        labelAccessor: string | undefined;
     };
     protected createSeriesMetadata(_datum: XYChartData, seriesProps: XYChartRectSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext): {
         name: string;

package/charts/xy-chart/processing-strategies/strategies/rect-series.js

@@ -49,7 +49,8 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       data: [],
       filteredData: [],
       xAxisId: xAxis.id,
-      yAxisId: yAxis.id
+      yAxisId: yAxis.id,
+      labelAccessor: seriesProps._labelAccessor
     };
   }
   createSeriesMetadata(_datum, seriesProps, xAxis, yAxis, seriesId, context) {
@@ -110,6 +111,9 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       datapointMetadata.isVisible = isDatapointVisible;
       tempSeriesMetadata.isVisible ||= isDatapointVisible;
     }
+    if (datapoint.label) {
+      currentSeries.hasLabels = true;
+    }
     this.registerDatapoint(
       datapoint,
       datapointMetadata,

package/charts/xy-chart/processing-strategies/utils/access-datapoint/get-datapoints.js

@@ -100,7 +100,7 @@ function getRectDatapoint(datum, seriesProps, xAxis, yAxis) {
     datum,
     seriesProps.valueAccessor
   );
-  return {
+  const datapoint = {
     ...datum,
     value,
     x0,
@@ -108,6 +108,16 @@ function getRectDatapoint(datum, seriesProps, xAxis, yAxis) {
     y0,
     y1
   };
+  if (seriesProps._labelAccessor !== void 0) {
+    const rawLabel = getDatumValue(datum, seriesProps._labelAccessor);
+    if (rawLabel !== void 0 && rawLabel !== null) {
+      const label = String(rawLabel);
+      if (label.length > 0) {
+        datapoint.label = label;
+      }
+    }
+  }
+  return datapoint;
 }
 function getLineDatapoint(datum, seriesProps, xAxis, yAxis) {
   return getBaseDatapoint(datum, seriesProps, xAxis, yAxis);

package/charts/xy-chart/providers/XYChartOverlayPerformanceProvider.js

@@ -23,6 +23,7 @@ module.exports = __toCommonJS(XYChartOverlayPerformanceProvider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_XYChartOverlayPerformance_context = require("../context/XYChartOverlayPerformance.context.js");
+var import_useBarData = require("../hooks/useBarData.js");
 var import_useBuildHoverGrid = require("../hooks/useBuildHoverGrid.js");
 var import_useBuildOverlayStrategy = require("../hooks/useBuildOverlayStrategy.js");
 var import_useXYChartData = require("../hooks/useXYChartData.js");
@@ -40,6 +41,8 @@ const XYChartOverlayPerformanceProvider = ({
   const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
   const { datapointMetadataMap, axisIdToScaleDomain, seriesToMetadata } = (0, import_useXYChartData.useXYChartData)();
   const { variant } = (0, import_useXYChartTooltip.useXYChartTooltip)();
+  const { hasXGroups, hasYGroups } = (0, import_useBarData.useBarData)();
+  const hasGroupedBars = hasXGroups || hasYGroups;
   const isSharedVariant = variant === "shared";
   const { buildResult, getBarPixelCenter, getLinearSeriesPixelCenter } = (0, import_useBuildOverlayStrategy.useBuildOverlayStrategy)();
   const seriesIdToHoverGrid = (0, import_useBuildHoverGrid.useBuildHoverGrid)();
@@ -59,7 +62,8 @@ const XYChartOverlayPerformanceProvider = ({
           queryAllHovered,
           getBarPixelCenter,
           getLinearSeriesPixelCenter,
-          datapointMetadataMap
+          datapointMetadataMap,
+          hasGroupedBars
         )
       };
     }
@@ -94,7 +98,8 @@ const XYChartOverlayPerformanceProvider = ({
     getBarPixelCenter,
     getLinearSeriesPixelCenter,
     seriesIdToTree,
-    seriesIdToHoverGrid
+    seriesIdToHoverGrid,
+    hasGroupedBars
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartOverlayPerformance_context.XYChartOverlayPerformanceContext.Provider, { value: context, children });
 };

package/charts/xy-chart/types/xy-chart-internals.d.ts

@@ -261,6 +261,7 @@ export interface RectDatapointInternal extends BaseDatapoint {
     x1?: XYAccessorDataTypes;
     y1?: XYAccessorDataTypes;
     value: XYValueAccessorDataTypes;
+    label?: string;
 }
 export type XYChartSeriesWithDatapoints = RectSeriesWithDatapoints | DotSeriesWithDatapoints | LineSeriesWithDatapoints | BarSeriesWithDatapoints | AreaSeriesWithDatapoints;
 export interface RectSeriesWithDatapoints {
@@ -270,6 +271,8 @@ export interface RectSeriesWithDatapoints {
     filteredData: RectDatapointInternal[];
     xAxisId: string;
     yAxisId: string;
+    hasLabels?: boolean;
+    labelAccessor?: string;
 }
 export interface DotSeriesWithDatapoints {
     id: SeriesId;

package/charts/xy-chart/types/xy-chart-props.d.ts

@@ -143,6 +143,17 @@ export interface XYChartRectSeriesProps extends XYChartSeriesBaseProps {
      * For legend, the first parameter returns the first datapoint of the series and the second parameter returns the series object.
      */
     actions?: (datapoint: XYChartRectSeriesActionItem, series?: XYChartRectSeries) => SeriesActionsTemplate;
+    /**
+     * Accessor to retrieve the text label rendered inside each rect. The label
+     * is clipped to the rect's bounds — any part that would overflow is hidden
+     * (unlike bar labels, which are allowed to extend past the bar).
+     *
+     * Currently consumed only by the internal FlameGraph and FlameChart wrappers;
+     * kept private until we decide whether rect labels become part of the public
+     * XYChart API.
+     * @internal
+     */
+    _labelAccessor?: string;
 }
 /**
  * Color selection prop for the xy chart ensures that either a color or a color palette is used, but not both simultaneously.

package/charts/xy-chart/utils/build-sorted-entries.d.ts

@@ -3,12 +3,13 @@ import type { AxisIdToScales } from '../context/XYChartScales.context.js';
 import type { AreaSeriesWithDatapoints, AxisIdToScaleDomain, BarSeriesWithDatapoints, LineSeriesWithDatapoints, MapDatapoints, SeriesToMetadata } from '../types/xy-chart-internals.js';
 import type { AreaDatapoint, BarDatapoint, LineDatapoint } from '../types/xy-chart.js';
 export type SortedEntry = {
-    xPixel: number;
-    y0Pixel: number;
-    y1Pixel: number;
+    baselinePixel: number;
+    value0Pixel: number;
+    value1Pixel: number;
+    isHorizontal: boolean;
     /**
-     * Stable cluster identifier built from the datapoint's x-domain
-     * (`x0-x1`). Entries sharing the same `boundaries` belong to the same
+     * Stable cluster identifier built from the datapoint's domain-axis
+     * coordinates. Entries sharing the same `boundaries` belong to the same
      * stack / same start-end domain group.
      */
     boundaries: string;
@@ -16,9 +17,9 @@ export type SortedEntry = {
 };
 /**
  * Sorted-entry buckets keyed by shape. `bar`, `line`, and `area` are each
- * sorted ascending by `xPixel`. `combined` is the concatenation of all three,
- * also sorted ascending by `xPixel`, and is used for the cross-shape binary-
- * search cluster lookup that spans all shapes.
+ * sorted ascending by `baselinePixel`. `combined` is the concatenation of all
+ * three, also sorted ascending by `baselinePixel`, and is used for the
+ * cross-shape binary-search cluster lookup that spans all shapes.
  *
  * Selection state in the shared tooltip is tracked per shape, so the
  * underlying data structure separates entries by shape even when only one is
@@ -31,9 +32,10 @@ export type SortedEntriesPerShape = {
     combined: SortedEntry[];
 };
 export type BarPixelCenter = {
-    xPixel: number;
-    y0Pixel: number;
-    y1Pixel: number;
+    baselinePixel: number;
+    value0Pixel: number;
+    value1Pixel: number;
+    isHorizontal: boolean;
     boundaries: string;
 };
 /**
@@ -52,6 +54,10 @@ export type GetLinearSeriesPixelCenter = (series: LineSeriesWithDatapoints | Are
 /**
  * Build a per-series-cached `GetBarPixelCenter`. Accessor construction
  * is non-trivial, so we memoize per series id to keep tight loops fast.
+ *
+ * For horizontal bars (y0Accessor + x1Accessor): the domain axis is Y, so
+ * `baselinePixel` is the bar's vertical center and `value0/1Pixel` are the
+ * left/right X edges. For vertical bars the roles are reversed.
  */
 export declare function buildGetBarPixelCenter(axisIdToScales: AxisIdToScales, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain, datapointMetadataMap: MapDatapoints): GetBarPixelCenter;
 /**
@@ -72,9 +78,9 @@ export declare function buildGetLinearSeriesPixelCenter(axisIdToScales: AxisIdTo
  * with a `boundaries` key that groups entries sharing the same `x0-x1`.
  * Gap datapoints are skipped.
  *
- * Each per-shape bucket is sorted ascending by `xPixel`. `combined` merges
- * all three buckets and is also sorted ascending by `xPixel`, ready for a
- * cross-shape binary search cluster lookup.
+ * Each per-shape bucket is sorted ascending by `baselinePixel`. `combined`
+ * merges all three buckets and is also sorted ascending by `baselinePixel`,
+ * ready for a cross-shape binary search cluster lookup.
  */
 export declare function buildSortedEntries(barSeries: BarSeriesWithDatapoints[], lineSeries: LineSeriesWithDatapoints[], areaSeries: AreaSeriesWithDatapoints[], datapointMetadataMap: MapDatapoints, getBarPixelCenter: GetBarPixelCenter, getLinearSeriesPixelCenter: GetLinearSeriesPixelCenter): SortedEntriesPerShape;
 //# sourceMappingURL=build-sorted-entries.d.ts.map

package/charts/xy-chart/utils/build-sorted-entries.js

@@ -30,30 +30,44 @@ var import_safe_get = require("../../core/utils/safe-get.js");
 var import_band_accessors = require("../components/displays/band-accessors.js");
 var import_xy_chart_internals = require("../types/xy-chart-internals.js");
 function buildGetBarPixelCenter(axisIdToScales, seriesToMetadata, axisIdToScaleDomain, datapointMetadataMap) {
-  const accessorsBySeries = /* @__PURE__ */ new Map();
+  const cachesBySeries = /* @__PURE__ */ new Map();
   return (series, datapoint) => {
-    let accessors = accessorsBySeries.get(series.id);
-    if (!accessors) {
+    let cached = cachesBySeries.get(series.id);
+    if (!cached) {
       const metadata = (0, import_safe_get.safeGet)(seriesToMetadata, series);
       const xRelAccessor = (0, import_value_representation.relAccessor)(metadata.xAxis, axisIdToScaleDomain);
       const yRelAccessor = (0, import_value_representation.relAccessor)(metadata.yAxis, axisIdToScaleDomain);
-      accessors = (0, import_query_hovered.getAccessors)(
+      const accessors = (0, import_query_hovered.getAccessors)(
         series,
         axisIdToScales,
         datapointMetadataMap,
         xRelAccessor,
         yRelAccessor
       );
-      accessorsBySeries.set(series.id, accessors);
+      cached = {
+        accessors,
+        isHorizontal: metadata.chartOrientation === "horizontal"
+      };
+      cachesBySeries.set(series.id, cached);
     }
     const { x, y, width, height } = (0, import_query_hovered.getPixelDimensionsForDatapoint)(
       datapoint,
-      accessors
+      cached.accessors
     );
+    if (cached.isHorizontal) {
+      return {
+        baselinePixel: y + height / 2,
+        value0Pixel: x,
+        value1Pixel: x + width,
+        isHorizontal: true,
+        boundaries: `${String(datapoint.y0)}-${String(datapoint.y1)}`
+      };
+    }
     return {
-      xPixel: x + width / 2,
-      y0Pixel: y,
-      y1Pixel: y + height,
+      baselinePixel: x + width / 2,
+      value0Pixel: y,
+      value1Pixel: y + height,
+      isHorizontal: false,
       boundaries: `${String(datapoint.x0)}-${String(datapoint.x1)}`
     };
   };
@@ -88,9 +102,10 @@ function buildGetLinearSeriesPixelCenter(axisIdToScales, seriesToMetadata, axisI
     }
     const yPixel = cached.yPixelFn(datapoint);
     return {
-      xPixel: cached.xPixelFn(datapoint),
-      y0Pixel: cached.y0PixelFn?.(datapoint) ?? yPixel,
-      y1Pixel: cached.y1PixelFn?.(datapoint) ?? yPixel,
+      baselinePixel: cached.xPixelFn(datapoint),
+      value0Pixel: cached.y0PixelFn?.(datapoint) ?? yPixel,
+      value1Pixel: cached.y1PixelFn?.(datapoint) ?? yPixel,
+      isHorizontal: false,
       boundaries: `${String(datapoint.x0)}-${String(datapoint.x1)}`
     };
   };
@@ -103,11 +118,18 @@ function collectSortedEntries(seriesArray, datapointMetadataMap, getPixelCenter)
       if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
         continue;
       }
-      const { xPixel, y0Pixel, y1Pixel, boundaries } = fn(series, datapoint);
+      const {
+        baselinePixel,
+        value0Pixel,
+        value1Pixel,
+        isHorizontal,
+        boundaries
+      } = fn(series, datapoint);
       entries.push({
-        xPixel,
-        y0Pixel,
-        y1Pixel,
+        baselinePixel,
+        value0Pixel,
+        value1Pixel,
+        isHorizontal,
         boundaries,
         result: {
           type: series.type,
@@ -136,10 +158,10 @@ function buildSortedEntries(barSeries, lineSeries, areaSeries, datapointMetadata
     datapointMetadataMap,
     getLinearSeriesPixelCenter
   );
-  const byX = (a, b) => a.xPixel - b.xPixel;
-  bar.sort(byX);
-  line.sort(byX);
-  area.sort(byX);
-  const combined = [...bar, ...line, ...area].sort(byX);
+  const byDomain = (a, b) => a.baselinePixel - b.baselinePixel;
+  bar.sort(byDomain);
+  line.sort(byDomain);
+  area.sort(byDomain);
+  const combined = [...bar, ...line, ...area].sort(byDomain);
   return { bar, line, area, combined };
 }

package/charts/xy-chart/utils/coloring/apply-color-rule-to-bar-series.d.ts

@@ -1,4 +1,4 @@
 import { ColorRuleProps } from '../../../core/types/color-rule.js';
 import type { BarMetadata, BarSeriesWithDatapoints, ColorRuleValidator, MapDatapoints, SeriesToMetadata } from '../../types/xy-chart-internals.js';
-export declare const applyColorRuleToBarSeries: (series: BarSeriesWithDatapoints, rules: ColorRuleProps[], isValid: ColorRuleValidator, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, seriesMetadata: BarMetadata) => void;
+export declare const applyColorRuleToBarSeries: (series: BarSeriesWithDatapoints, rules: ColorRuleProps[], isValid: ColorRuleValidator, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, seriesMetadata: BarMetadata, seriesIndex: number) => void;
 //# sourceMappingURL=apply-color-rule-to-bar-series.d.ts.map

package/charts/xy-chart/utils/coloring/apply-color-rule-to-bar-series.js

@@ -23,7 +23,7 @@ module.exports = __toCommonJS(apply_color_rule_to_bar_series_exports);
 var import_bar_datapoint_matches_color_rule = require("./bar-datapoint-matches-color-rule.js");
 var import_get_color_from_rule = require("./get-color-from-rule.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
-const applyColorRuleToBarSeries = (series, rules, isValid, datapointMetadataMap, seriesToMetadata, seriesMetadata) => {
+const applyColorRuleToBarSeries = (series, rules, isValid, datapointMetadataMap, seriesToMetadata, seriesMetadata, seriesIndex) => {
   const datapointCount = series.data.length;
   let matchedCount = 0;
   const matchedColors = /* @__PURE__ */ new Set();
@@ -34,7 +34,11 @@ const applyColorRuleToBarSeries = (series, rules, isValid, datapointMetadataMap,
     if (!matchingRule) {
       return;
     }
-    const color = (0, import_get_color_from_rule.getColorFromRule)(matchingRule);
+    const color = (0, import_get_color_from_rule.getColorFromRule)(
+      matchingRule,
+      seriesMetadata.name,
+      seriesIndex
+    );
     if (!color) {
       return;
     }

package/charts/xy-chart/utils/coloring/get-color-from-rule.d.ts

@@ -1,3 +1,3 @@
 import { ColorRuleProps } from '../../../core/types/color-rule.js';
-export declare const getColorFromRule: (rule: ColorRuleProps) => string | undefined;
+export declare const getColorFromRule: (rule: ColorRuleProps, seriesName?: string, seriesIndex?: number) => string | undefined;
 //# sourceMappingURL=get-color-from-rule.d.ts.map

package/charts/xy-chart/utils/coloring/get-color-from-rule.js

@@ -21,12 +21,12 @@ __export(get_color_from_rule_exports, {
 });
 module.exports = __toCommonJS(get_color_from_rule_exports);
 var import_get_color_palette = require("../../../core/utils/get-color-palette.js");
-const getColorFromRule = (rule) => {
+const getColorFromRule = (rule, seriesName = "", seriesIndex = 0) => {
   if (rule.color) {
     return rule.color;
   }
   if (rule.colorPalette) {
-    const palette = (0, import_get_color_palette.getColorPalette)("", 0, rule.colorPalette);
+    const palette = (0, import_get_color_palette.getColorPalette)(seriesName, seriesIndex, rule.colorPalette);
     return palette.Default;
   }
   return void 0;

package/charts/xy-chart/utils/get-bar-hit-box.d.ts

@@ -0,0 +1,20 @@
+import type { AnyXYChartScale, XYChartAxisDirection } from '../types/xy-chart-internals.js';
+import type { BarDatapoint } from '../types/xy-chart.js';
+export interface HitBoxRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Expands a bar's hit-box to `min` while keeping its baseline edge fixed,
+ * so growth stays anchored on reversed axes (TTB/RTL) too.
+ *
+ * `baseline` identifies which coordinate is the bar's fixed positional axis
+ * (`'x'` for vertical bars, `'y'` for horizontal, `undefined` for bars with
+ * no single categorical axis) — it's derived from the chart's orientation
+ * rather than the datapoint's field types, so this works the same whether
+ * the axes are numeric, categorical, or time-based.
+ */
+export declare function getBarHitBox(rect: HitBoxRect, datapoint: BarDatapoint, min: number, xScale: AnyXYChartScale, yScale: AnyXYChartScale, baseline: XYChartAxisDirection): HitBoxRect;
+//# sourceMappingURL=get-bar-hit-box.d.ts.map

package/charts/xy-chart/utils/get-bar-hit-box.js

@@ -0,0 +1,94 @@
+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 get_bar_hit_box_exports = {};
+__export(get_bar_hit_box_exports, {
+  getBarHitBox: () => getBarHitBox
+});
+module.exports = __toCommonJS(get_bar_hit_box_exports);
+function isValueIncreasingTowardSmallerPixel(scale) {
+  const domain = scale.domain();
+  const a = Number(domain[0]);
+  const b = Number(domain[domain.length - 1]);
+  const lo = Math.min(a, b);
+  const hi = Math.max(a, b);
+  const numericScale = scale;
+  return numericScale(lo) > numericScale(hi);
+}
+function toNumeric(value) {
+  return value === void 0 || typeof value === "string" ? void 0 : +value;
+}
+function getHorizontalBarHitBox(rect, datapoint, min, xScale) {
+  const { x, y, width, height } = rect;
+  const numericXScale = xScale;
+  const hitWidth = Math.max(width, min);
+  const baselineX = toNumeric(datapoint.x0) ?? 0;
+  const numericX1 = toNumeric(datapoint.x1);
+  let growsRight;
+  if (numericX1 === void 0) {
+    growsRight = true;
+  } else {
+    const scaledX1 = numericXScale(numericX1);
+    const scaledBaseline = numericXScale(baselineX);
+    growsRight = scaledX1 === scaledBaseline ? !isValueIncreasingTowardSmallerPixel(xScale) : scaledBaseline <= scaledX1;
+  }
+  return {
+    x: growsRight ? x : x + width - hitWidth,
+    y,
+    width: hitWidth,
+    height
+  };
+}
+function getVerticalBarHitBox(rect, datapoint, min, yScale) {
+  const { x, y, width, height } = rect;
+  const numericYScale = yScale;
+  const hitHeight = Math.max(height, min);
+  const baselineY = toNumeric(datapoint.y0) ?? 0;
+  const numericY1 = toNumeric(datapoint.y1);
+  let growsUp;
+  if (numericY1 === void 0) {
+    growsUp = true;
+  } else {
+    const scaledY1 = numericYScale(numericY1);
+    const scaledBaseline = numericYScale(baselineY);
+    growsUp = scaledY1 === scaledBaseline ? isValueIncreasingTowardSmallerPixel(yScale) : scaledY1 <= scaledBaseline;
+  }
+  return {
+    x,
+    y: growsUp ? y + height - hitHeight : y,
+    width,
+    height: hitHeight
+  };
+}
+function getCornerAnchoredHitBox(rect, min) {
+  const { x, y, width, height } = rect;
+  return {
+    x: x - Math.max(0, min - width),
+    y: y - Math.max(0, min - height),
+    width: Math.max(width, min),
+    height: Math.max(height, min)
+  };
+}
+function getBarHitBox(rect, datapoint, min, xScale, yScale, baseline) {
+  if (baseline === "y") {
+    return getHorizontalBarHitBox(rect, datapoint, min, xScale);
+  }
+  if (baseline === "x") {
+    return getVerticalBarHitBox(rect, datapoint, min, yScale);
+  }
+  return getCornerAnchoredHitBox(rect, min);
+}

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

@@ -0,0 +1,5 @@
+/**
+ * Check if a pixel position is within the defined range.
+ */
+export declare function isInPixelRange(position: number, start: number, span: number): boolean;
+//# sourceMappingURL=is-in-pixel-range.d.ts.map