@dynatrace/strato-components 3.11.2 → 3.12.0

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

@@ -153,10 +153,10 @@ class StackableSeriesHelper {
     const binDomain = this.getStackBinDomain(stackKey);
     const updatedMetadata = {
       ...datapointMetadata,
-      accumulator: value > 0 ? prevValue.maxBoundary : prevValue.minBoundary,
+      accumulator: value >= 0 ? prevValue.maxBoundary : prevValue.minBoundary,
       binDomain
     };
-    const stackingOffset = value > 0 ? prevValue.maxBoundary : prevValue.minBoundary;
+    const stackingOffset = value >= 0 ? prevValue.maxBoundary : prevValue.minBoundary;
     const calcDatapoint = {
       x0: chartOrientation === "horizontal" && typeof datapoint.x0 === "number" ? datapoint.x0 + stackingOffset : datapoint.x0,
       x1: chartOrientation === "horizontal" && typeof datapoint.x1 === "number" ? datapoint.x1 + stackingOffset : datapoint.x1,

package/charts/xy-chart/processing-strategies/utils/cast-data/cast-data-types.d.ts

@@ -1,5 +1,6 @@
 import { type XYAxisAnyNumericalType } from '../../../types/axis.js';
 import { ScaleTypesMap } from '../../../types/scale-types-map.js';
+import type { _XYChartThresholdXStaticData } from '../../../types/xy-chart-props.js';
 import { XYAccessorDataTypes, type XYChartThresholdDataLineDynamic, type XYChartThresholdDataRangeDynamic, type XYChartThresholdDynamicData, type XYChartThresholdStaticData } from '../../../types/xy-chart.js';
 export declare function castDataType<T extends keyof ScaleTypesMap>(value: XYAccessorDataTypes | undefined, axisType: T): ScaleTypesMap[T]['castDataType'];
 export declare function castDynamicThresholdsDataType(data: XYChartThresholdDynamicData[], xAxisType: XYAxisAnyNumericalType, yAxisType: XYAxisAnyNumericalType): (XYChartThresholdDataLineDynamic | XYChartThresholdDataRangeDynamic)[];
@@ -12,4 +13,5 @@ export declare function castStaticThresholdsDataType(data: XYChartThresholdStati
     yMin: number | Date;
     yMax: number | Date;
 } | undefined;
+export declare function castStaticXThresholdsDataType(data: _XYChartThresholdXStaticData, xAxisType: XYAxisAnyNumericalType): _XYChartThresholdXStaticData | undefined;
 //# sourceMappingURL=cast-data-types.d.ts.map

package/charts/xy-chart/processing-strategies/utils/cast-data/cast-data-types.js

@@ -19,10 +19,12 @@ var cast_data_types_exports = {};
 __export(cast_data_types_exports, {
   castDataType: () => castDataType,
   castDynamicThresholdsDataType: () => castDynamicThresholdsDataType,
-  castStaticThresholdsDataType: () => castStaticThresholdsDataType
+  castStaticThresholdsDataType: () => castStaticThresholdsDataType,
+  castStaticXThresholdsDataType: () => castStaticXThresholdsDataType
 });
 module.exports = __toCommonJS(cast_data_types_exports);
 var import_type_guards = require("../../../../core/types/type-guards.js");
+var import_get_x_value = require("../../../components/thresholds/get-x-value.js");
 var import_get_y_value = require("../../../components/thresholds/get-y-value.js");
 var import_axis = require("../../../types/axis.js");
 function isValidDate(d) {
@@ -104,3 +106,16 @@ function castStaticThresholdsDataType(data, yAxisType) {
   }
   return void 0;
 }
+function castStaticXThresholdsDataType(data, xAxisType) {
+  const xMin = castDataType((0, import_get_x_value.getXValue)(data, "min"), xAxisType);
+  const xMax = castDataType((0, import_get_x_value.getXValue)(data, "max"), xAxisType);
+  const isValidThreshold = xMin !== void 0 && xMax !== void 0;
+  if (isValidThreshold) {
+    if ((0, import_type_guards.isPointThreshold)(xMin, xMax)) {
+      return { x: xMin };
+    } else {
+      return { xMin, xMax };
+    }
+  }
+  return void 0;
+}

package/charts/xy-chart/slots/Select.d.ts

@@ -5,6 +5,12 @@ import type { XYChartSelectedDomains, XYChartSelectedSeries } from '../types/xy-
  * @public
  */
 export interface XYChartSelectProps {
+    /**
+     * When `true`, suppresses pointer-based drag-to-select gestures.
+     * No selection tooltip appears while the prop is set.
+     * @defaultValue false
+     */
+    disabled?: boolean;
     /**
      * Custom actions handler
      * @param selectedSeries - A record mapping series keys to their data points.

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

@@ -1,8 +1,10 @@
 import { type ScaleBand, type ScaleLinear, type ScaleOrdinal, ScaleQuantize, type ScaleSymLog, ScaleThreshold, type ScaleTime } from 'd3-scale';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 import type { XYAxisTypeLinear, XYAxisTypeLog } from './axis.js';
-import type { XYChartAreaSeriesProps, XYChartBarSeriesProps, XYChartCategoricalAxisProps, XYChartChartLegendProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartProps, XYChartRectSeriesProps, XYChartSelectConfig, XYChartSeriesBaseProps, XYChartThresholdIndicatorProps, XYChartTimeAxisProps, XYChartToolbarConfigProps, XYChartXAxisProps, XYChartYAxisProps, XYShapeColorPaletteProp } from './xy-chart-props.js';
-import type { XYChartAreaSeries, XYChartBarSeries, XYChartDotSeries, XYChartLineSeries, XYChartRectSeries, AreaDatapoint, BarDatapoint, BarSeriesVariant, BaseDatapoint, DotDatapoint, LineDatapoint, SeriesCurve, XYAccessorDataTypes, XYChartAreaSeriesActionItem, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
+import type { _XYChartThresholdStaticXProps, _XYChartThresholdXStaticData, XYChartAreaSeriesProps, XYChartBarSeriesProps, XYChartCategoricalAxisProps, XYChartChartLegendProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartProps, XYChartRectSeriesProps, XYChartSelectConfig, XYChartSeriesBaseProps, XYChartThresholdIndicatorProps, XYChartTimeAxisProps, XYChartToolbarConfigProps, XYChartXAxisProps, XYChartYAxisProps, XYShapeColorPaletteProp } from './xy-chart-props.js';
+import type { AreaDatapoint, BarDatapoint, BarSeriesVariant, BaseDatapoint, DotDatapoint, LineDatapoint, SeriesCurve, XYAccessorDataTypes, XYChartAreaSeries, XYChartAreaSeriesActionItem, XYChartBarSeries, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeries, XYChartDotSeriesActionItem, XYChartLineSeries, XYChartLineSeriesActionItem, XYChartRectSeries, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
+import type { IntentProps } from '../../../core/slots/Intent/Intent.js';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import type { TickLabelLayout } from '../../core/components/axes/types.js';
 import { type Orientation, type PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';
 import type { PointShapeType } from '../../core/components/shape/type.js';
@@ -151,7 +153,7 @@ export interface XYChartSlots {
     xAxes: XYChartXAxisProps[];
     legend: XYChartChartLegendProps;
     toolbar: XYChartToolbarConfigProps;
-    thresholds: XYChartThresholdIndicatorProps[];
+    thresholds: (XYChartThresholdIndicatorProps | _XYChartThresholdStaticXProps)[];
     annotations?: XYChartAnnotationsConfigProps;
     select?: XYChartSelectConfig;
     colorRules?: ColorRuleProps[];
@@ -168,22 +170,34 @@ export type XYChartThresholdsInternal = {
     offset: {
         left: 0;
         right: 0;
+        top: 0;
+        bottom: 0;
     };
     yAxes: {
         left: Set<string>;
         right: Set<string>;
     };
+    xAxes: {
+        top: Set<string>;
+        bottom: Set<string>;
+    };
 } | {
     thresholds: XYChartThresholdsPropsInternal;
     none: false;
     offset: {
         left: typeof THRESHOLD_BAR_THICKNESS | 0;
         right: typeof THRESHOLD_BAR_THICKNESS | 0;
+        top: typeof THRESHOLD_BAR_THICKNESS | 0;
+        bottom: typeof THRESHOLD_BAR_THICKNESS | 0;
     };
     yAxes: {
         left: Set<string>;
         right: Set<string>;
     };
+    xAxes: {
+        top: Set<string>;
+        bottom: Set<string>;
+    };
 };
 type XYChartThresholdPropsInternal = {
     id: string;
@@ -199,7 +213,16 @@ export type XYChartThresholdDynamicPropsInternal = {
     data: XYChartThresholdDynamicData[];
 } & Omit<XYChartThresholdPropsInternal, 'data'>;
 export type XYChartThresholdStaticPropsInternal = XYChartThresholdPropsInternal;
-export type XYChartThresholdsPropsInternal = (XYChartThresholdDynamicPropsInternal | XYChartThresholdStaticPropsInternal)[];
+export type XYChartThresholdXStaticPropsInternal = {
+    id: string;
+    xAxisId: string;
+    data: _XYChartThresholdXStaticData;
+    color: string;
+    position: XYChartXAxisPosition;
+    label?: string;
+    strokeOnly?: boolean;
+};
+export type XYChartThresholdsPropsInternal = (XYChartThresholdDynamicPropsInternal | XYChartThresholdStaticPropsInternal | XYChartThresholdXStaticPropsInternal)[];
 export interface XYChartVisibleAxesScales {
     top: AnyXYChartScale | undefined;
     bottom: AnyXYChartScale | undefined;
@@ -424,5 +447,11 @@ export type AnyLinearMetadata = DotMetadata | LineMetadata | AreaMetadata;
  * Shape types compatible with gap strategies
  */
 export type ShapeDatapointWithGapPolicy = LineDatapoint | RectDatapointInternal | AreaDatapoint;
+/**
+ * @internal
+ */
+export type XYChartToolbar = Omit<XYChartToolbarConfigProps, 'intents'> & BehaviorTrackingProps & {
+    intents?: Array<IntentProps>;
+};
 export {};
 //# sourceMappingURL=xy-chart-internals.d.ts.map

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ConvertibleUnit, FormatDateOptions, FormatOptions, Unit } from '@dynatrace-sdk/units';
-import type { BAR_VARIANT_GROUP, BAR_VARIANT_SINGLE, BAR_VARIANT_STACK, BarSeriesVariant, SeriesCurve, XYChartAreaSeries, XYChartAreaSeriesActionItem, XYChartBarSeries, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeries, XYChartDotSeriesActionItem, XYChartLineSeries, XYChartLineSeriesActionItem, XYChartRectSeries, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartTooltipPayload, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
-import { IntentProps } from '../../../core/slots/Intent/Intent.js';
+import type { BAR_VARIANT_GROUP, BAR_VARIANT_SINGLE, BAR_VARIANT_STACK, BarSeriesVariant, SeriesCurve, XYChartAreaSeries, XYChartAreaSeriesActionItem, XYChartBarSeries, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeries, XYChartDotSeriesActionItem, XYChartLineSeries, XYChartLineSeriesActionItem, XYChartRectSeries, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartThresholdValue, XYChartTooltipPayload, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
+import type { AriaLabelingProps } from '../../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
@@ -27,7 +27,7 @@ import type { XYChartSelectProps } from '../slots/Select.js';
  * Props for the xy chart.
  * @public
  */
-export interface XYChartProps extends StylingProps, MaskingProps, BehaviorTrackingProps {
+export interface XYChartProps extends StylingProps, MaskingProps, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * Data object for the xy chart.
      */
@@ -403,13 +403,6 @@ export type XYChartAreaSeriesProps = Omit<XYChartSeriesBaseProps, 'colorPalette'
  * @public
  */
 export type XYChartAxisProps = XYChartAxisBaseProps & (XYChartNumericalAxisProps | XYChartLogAxisProps | XYChartCategoricalAxisProps | XYChartTimeAxisProps);
-/**
- * Props definition for the XYChart toolbar
- * @internal
- */
-export type XYChartToolbar = Omit<XYChartToolbarConfigProps, 'intents'> & BehaviorTrackingProps & {
-    intents?: Array<IntentProps>;
-};
 /**
  * XYChart Log Axis Props
  * @public
@@ -470,6 +463,18 @@ export interface XYChartAxisBaseProps {
      *  If there's not enough space for this tickLabelMaxSize, the axis will only take the available space for it.
      */
     tickLabelMaxSize?: number;
+    /**
+     * If true, suppresses the crosshair line and magnifier associated with this axis during
+     * local hover interactions. Has no effect on the synchronized crosshair rendered by a
+     * `SharedChartInteractions` group.
+     *
+     * Note: the crosshair is a single shared element per orientation. When multiple axes
+     * share the same orientation (e.g. two YAxes), suppressing it on any one of them suppresses
+     * it for all.
+     *
+     * @defaultValue false
+     */
+    hideCrosshair?: boolean;
 }
 /**
  * XYChart Numerical Axis Props
@@ -745,4 +750,23 @@ export type XYChartThresholdStaticProps = BaseThresholdConfig & {
     data: XYChartThresholdStaticData;
     yAxisId: string;
 };
+/** @internal */
+export type _XYChartThresholdDataXLineStatic = {
+    x: XYChartThresholdValue;
+};
+/** @internal */
+export type _XYChartThresholdDataXRangeStatic = {
+    xMin: number | Date;
+    xMax: number | Date;
+};
+/** @internal */
+export type _XYChartThresholdXStaticData = _XYChartThresholdDataXLineStatic | _XYChartThresholdDataXRangeStatic;
+/**
+ * Props for the X-axis-bound Static XYChart.ThresholdIndicator slot component
+ * @internal
+ */
+export type _XYChartThresholdStaticXProps = BaseThresholdConfig & {
+    data: _XYChartThresholdXStaticData;
+    xAxisId: string;
+};
 //# sourceMappingURL=xy-chart-props.d.ts.map

package/charts/xy-chart/utils/grid-templates.d.ts

@@ -8,6 +8,8 @@ export declare const AREAS: {
     rightAxis: string;
     leftThreshold: string;
     rightThreshold: string;
+    topThreshold: string;
+    bottomThreshold: string;
 };
 export declare const gridTemplateAreas: string;
 //# sourceMappingURL=grid-templates.d.ts.map

package/charts/xy-chart/utils/grid-templates.js

@@ -33,7 +33,7 @@ const gridTemplateRows = (bottomAxisMaxHeight = "auto", topAxisMaxHeight = "auto
   const maxTop = typeof topAxisMaxHeight === "number" ? `${Math.max(topAxisMaxHeight, import_constants.MIN_AXIS_TRUNCATION_SIZE)}px` : topAxisMaxHeight;
   const maxBottom = typeof bottomAxisMaxHeight === "number" ? `${Math.max(bottomAxisMaxHeight, import_constants.MIN_AXIS_TRUNCATION_SIZE)}px` : bottomAxisMaxHeight;
   const annotationsAreaSize = typeof annotationsArea === "number" ? `${annotationsArea}px` : "auto";
-  return `minmax(0, ${annotationsAreaSize}) minmax(0, ${maxTop}) minmax(60%, 1fr) minmax(0, ${maxBottom})`;
+  return `minmax(0, ${annotationsAreaSize}) minmax(0, ${maxTop}) auto minmax(60%, 1fr) auto minmax(0, ${maxBottom})`;
 };
 const AREAS = {
   annotations: "annotations",
@@ -42,11 +42,15 @@ const AREAS = {
   leftAxis: "left-axis",
   rightAxis: "right-axis",
   leftThreshold: "left-threshold",
-  rightThreshold: "right-threshold"
+  rightThreshold: "right-threshold",
+  topThreshold: "top-threshold",
+  bottomThreshold: "bottom-threshold"
 };
 const gridTemplateAreas = `
   "${AREAS.annotations} ${AREAS.annotations} ${AREAS.annotations} . ."
   ". . ${AREAS.topAxis} . ."
+  ". . ${AREAS.topThreshold} . ."
   "${AREAS.leftAxis} ${AREAS.leftThreshold} plot ${AREAS.rightThreshold} ${AREAS.rightAxis}"
+  ". . ${AREAS.bottomThreshold} . ."
   ". . ${AREAS.bottomAxis} . ."
 `;

package/charts/xy-chart/utils/query-get-closest-point.d.ts

@@ -16,6 +16,6 @@ export declare function buildQueryGetClosestPoint(axisIdToScales: AxisIdToScales
 };
 export type ExactMatchIndex = Map<string, SeriesQueryResult[]>;
 export declare function buildExactMatchIndex(allSeries: XYChartSeriesWithDatapoints[], datapointMetadataMap?: MapDatapoints): ExactMatchIndex;
-export declare function findExactMatchFromIndex(preferred: SeriesQueryResult, index: ExactMatchIndex): SeriesQueryResult[];
+export declare function findExactMatchFromIndex(preferred: SeriesQueryResult, index: ExactMatchIndex, datapointMetadataMap?: MapDatapoints): SeriesQueryResult[];
 export declare function findExactMatchDatapoints(preferred: SeriesQueryResult, allSeries: XYChartSeriesWithDatapoints[]): SeriesQueryResult[];
 //# sourceMappingURL=query-get-closest-point.d.ts.map

package/charts/xy-chart/utils/query-get-closest-point.js

@@ -194,20 +194,38 @@ function serializeBoundingBoxValue(value) {
   }
   return `other:${String(value)}`;
 }
-function boundingBoxKey(datapoint) {
-  return [datapoint.x0, datapoint.x1, datapoint.y0, datapoint.y1].map(serializeBoundingBoxValue).join("|");
+function boundingBoxKey(datapoint, metadata) {
+  const accumulator = metadata?.accumulator;
+  const baseline = metadata?.baseline;
+  const x0 = datapoint.x0;
+  let x1 = datapoint.x1;
+  const y0 = datapoint.y0;
+  let y1 = datapoint.y1;
+  if (accumulator !== void 0) {
+    if (baseline === "x") {
+      y1 = typeof datapoint.y1 === "number" ? datapoint.y1 + accumulator : datapoint.y1;
+    } else if (baseline === "y") {
+      x1 = typeof datapoint.x1 === "number" ? datapoint.x1 + accumulator : datapoint.x1;
+    }
+  }
+  return [x0, x1, y0, y1].map(serializeBoundingBoxValue).join("|");
 }
-function exactMatchKey(series, datapoint) {
-  return `${series.xAxisId}|${series.yAxisId}|${boundingBoxKey(datapoint)}`;
+function exactMatchKey(series, datapoint, metadata) {
+  return `${series.xAxisId}|${series.yAxisId}|${boundingBoxKey(datapoint, metadata)}`;
 }
 function buildExactMatchIndex(allSeries, datapointMetadataMap) {
   const index = /* @__PURE__ */ new Map();
   for (const series of allSeries) {
     for (const dp of series.data) {
-      if (datapointMetadataMap?.get(dp)?.isGap) {
+      const metadata = datapointMetadataMap?.get(dp);
+      if (metadata?.isGap) {
         continue;
       }
-      const key = exactMatchKey(series, dp);
+      const key = exactMatchKey(
+        series,
+        dp,
+        metadata
+      );
       const entry = {
         type: series.type,
         distance: 0,
@@ -224,10 +242,14 @@ function buildExactMatchIndex(allSeries, datapointMetadataMap) {
   }
   return index;
 }
-function findExactMatchFromIndex(preferred, index) {
+function findExactMatchFromIndex(preferred, index, datapointMetadataMap) {
+  const metadata = datapointMetadataMap?.get(
+    preferred.datapoint
+  );
   const key = exactMatchKey(
     preferred.series,
-    preferred.datapoint
+    preferred.datapoint,
+    metadata
   );
   const matches = index.get(key);
   return matches && matches.length > 0 ? matches : [preferred];

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

@@ -55,14 +55,17 @@ function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, get
       sortedEntries.combined,
       searchBaselinePixel,
       getClusterKey
-    ) : findClosestClusterLinear(
-      barSeriesData,
-      lineSeriesData,
-      areaSeriesData,
-      datapointMetadataMap,
-      getBarPixelCenter,
-      getLinearSeriesPixelCenter,
-      searchBaselinePixel
+    ) : filterToClosestCluster(
+      collectLinearEntries(
+        barSeriesData,
+        lineSeriesData,
+        areaSeriesData,
+        datapointMetadataMap,
+        getBarPixelCenter,
+        getLinearSeriesPixelCenter
+      ),
+      searchBaselinePixel,
+      getClusterKey
     );
     if (clusterEntries.length === 0) {
       return { preferred: void 0, datapoints: [] };
@@ -79,18 +82,48 @@ function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, get
         Math.pow(entry.baselinePixel - cursorDomain, 2) + Math.pow(entry.value0Pixel - cursorVal, 2)
       );
     };
+    const deltasCache = /* @__PURE__ */ new WeakMap();
+    const groupedBarAxisDeltas = (entry) => {
+      const cached = deltasCache.get(entry);
+      if (cached !== void 0) {
+        return cached;
+      }
+      const [cursorDomain, cursorVal] = entry.isHorizontal ? [relative.y, relative.x] : [relative.x, relative.y];
+      const valueSpanStart = Math.min(entry.value0Pixel, entry.value1Pixel);
+      const valueSpanEnd = Math.max(entry.value0Pixel, entry.value1Pixel);
+      const valueDelta = Math.max(
+        valueSpanStart - cursorVal,
+        cursorVal - valueSpanEnd,
+        0
+      );
+      const baselineDelta = Math.abs(entry.baselinePixel - cursorDomain);
+      const result = { baselineDelta, valueDelta };
+      deltasCache.set(entry, result);
+      return result;
+    };
+    const compareGroupedBarDistance = (a, b) => {
+      const deltaA = groupedBarAxisDeltas(a);
+      const deltaB = groupedBarAxisDeltas(b);
+      if (deltaA.baselineDelta !== deltaB.baselineDelta) {
+        return deltaA.baselineDelta - deltaB.baselineDelta;
+      }
+      const valueA = Number.isNaN(deltaA.valueDelta) ? Infinity : deltaA.valueDelta;
+      const valueB = Number.isNaN(deltaB.valueDelta) ? Infinity : deltaB.valueDelta;
+      return valueA - valueB;
+    };
+    const compareEntries = hasGroupedBars ? compareGroupedBarDistance : (a, b) => distanceToCursor(a) - distanceToCursor(b);
     const closestEntry = clusterEntries.reduce(
       (closest, entry) => {
         if (closest === void 0) {
           return entry;
         }
         if (entry.result.type === import_xy_chart_internals.BAR_VARIANT && topmostHovered && entry.result.datapoint === topmostHovered.datapoint) {
-          if (closest.result.type === import_xy_chart_internals.BAR_VARIANT || distanceToCursor(entry) <= distanceToCursor(closest)) {
+          if (closest.result.type === import_xy_chart_internals.BAR_VARIANT || compareEntries(entry, closest) <= 0) {
             return entry;
           }
           return closest;
         }
-        const diff = distanceToCursor(entry) - distanceToCursor(closest);
+        const diff = compareEntries(entry, closest);
         if (diff !== 0) {
           return diff < 0 ? entry : closest;
         }
@@ -149,25 +182,15 @@ function findClosestClusterBinary(sorted, searchBaselinePixel, getClusterKey) {
   }
   return sorted.slice(left, right + 1);
 }
-function findClosestClusterLinear(barSeriesData, lineSeriesData, areaSeriesData, datapointMetadataMap, getBarPixelCenter, getLinearSeriesPixelCenter, searchBaselinePixel) {
+function collectLinearEntries(barSeriesData, lineSeriesData, areaSeriesData, datapointMetadataMap, getBarPixelCenter, getLinearSeriesPixelCenter) {
   const entries = [];
-  let closestKey;
-  let closestDistance = Infinity;
-  function visit(entry) {
-    entries.push(entry);
-    const distance = Math.abs(entry.baselinePixel - searchBaselinePixel);
-    if (distance < closestDistance) {
-      closestDistance = distance;
-      closestKey = Math.round(entry.baselinePixel);
-    }
-  }
   for (const series of barSeriesData) {
     for (const datapoint of series.data) {
       if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
         continue;
       }
       const center = getBarPixelCenter(series, datapoint);
-      visit({
+      entries.push({
         ...center,
         result: {
           type: series.type,
@@ -184,7 +207,7 @@ function findClosestClusterLinear(barSeriesData, lineSeriesData, areaSeriesData,
         continue;
       }
       const center = getLinearSeriesPixelCenter(series, datapoint);
-      visit({
+      entries.push({
         ...center,
         result: {
           type: series.type,
@@ -195,8 +218,20 @@ function findClosestClusterLinear(barSeriesData, lineSeriesData, areaSeriesData,
       });
     }
   }
+  return entries;
+}
+function filterToClosestCluster(entries, searchBaselinePixel, getClusterKey) {
+  let closestKey;
+  let closestDistance = Infinity;
+  for (const entry of entries) {
+    const distance = Math.abs(entry.baselinePixel - searchBaselinePixel);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestKey = getClusterKey(entry);
+    }
+  }
   if (closestKey === void 0) {
     return [];
   }
-  return entries.filter((e) => Math.round(e.baselinePixel) === closestKey);
+  return entries.filter((e) => getClusterKey(e) === closestKey);
 }

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

@@ -63,7 +63,11 @@ function buildQuerySingle(queryClosest, queryHovered, datapointMetadataMap) {
       );
     }
     const preferred = results[prevailingShape];
-    const datapoints = (0, import_query_get_closest_point.findExactMatchFromIndex)(preferred, cachedIndex);
+    const datapoints = (0, import_query_get_closest_point.findExactMatchFromIndex)(
+      preferred,
+      cachedIndex,
+      datapointMetadataMap
+    );
     return { preferred, datapoints };
   };
 }

package/charts/xy-chart/utils/xy-chart-configuration.d.ts

@@ -13,11 +13,12 @@ export declare function getXYChartAnnotationsConfiguration(slotsAnnotations?: XY
  * @param contextConfig - config pass in config context
  * @param rootProps - Config props passed in root component level
  */
-export type XYChartConfig = Omit<Required<XYChartConfigProperties>, 'annotations' | 'select' | 'colorPalette' | 'tooltip'> & {
+export type XYChartConfig = Omit<Required<XYChartConfigProperties>, 'annotations' | 'select' | 'colorPalette' | 'tooltip' | 'thresholdIndicators'> & {
     annotations?: XYChartAnnotationsConfigProps;
     select?: XYChartSelectConfig;
     colorPalette?: XYChartColorPalette;
     tooltip: XYChartTooltipConfig;
+    thresholdIndicators: XYChartSlots['thresholds'];
 };
 export declare const createXYChartConfiguration: (slots: XYChartSlots, contextConfig: XYChartConfigProperties, rootProps: ExportableXYChartProps) => XYChartConfig;
 export declare function getAxes<T extends XYChartAxisProps>(slotAxes: T[], contextAxes: T[] | undefined): T[];

package/charts/xy-chart/utils/xy-chart-configuration.js

@@ -117,7 +117,7 @@ const createXYChartConfiguration = (slots, contextConfig, rootProps) => {
     slots.annotations,
     contextConfig.annotations
   );
-  const select = slots.select || void 0;
+  const select = slots.select !== void 0 || contextConfig.select !== void 0 ? (0, import_lodash_es.merge)({}, contextConfig.select, slots.select) : void 0;
   const thresholdIndicators = [
     ...slots.thresholds,
     ...contextConfig.thresholdIndicators || []

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

@@ -24,6 +24,7 @@ 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_constants = require("./constants.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");
@@ -33,9 +34,10 @@ 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_constants2 = 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_is_valid_value_representation = require("../../core/utils/is-valid-value-representation.js");
 var import_XYChartRoot = require("../../xy-chart/XYChartRoot.js");
 const CATEGORY_AXIS_ID = "x-axis";
 const Y_NUMERICAL_AXIS_ID = "y-axis-default";
@@ -55,8 +57,13 @@ const CategoricalBarToXY = (0, import_react.forwardRef)((props, forwardedRef) =>
     truncationMode,
     seriesActions,
     layout,
+    valueRepresentation,
     "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow
+    "data-dtrum-allow": dataDtrumAllow,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails
   } = props;
   const xyRef = (0, import_react.useRef)(null);
   const mappedSeriesActions = (0, import_react.useMemo)(
@@ -98,7 +105,7 @@ const CategoricalBarToXY = (0, import_react.forwardRef)((props, forwardedRef) =>
   const resolvedValueAxis = (0, import_lodash_es.merge)({}, import_defaults.defaultConfig.valueAxis, slotValueAxis);
   const downloadDataCallback = (0, import_react.useCallback)(() => {
     const csv = (0, import_format_csv.formatCSV)(data);
-    (0, import_download.downloadCSV)(csv, import_constants.CSS_DOWNLOAD_FILENAME);
+    (0, import_download.downloadCSV)(csv, import_constants2.CSS_DOWNLOAD_FILENAME);
   }, [data]);
   (0, import_react.useImperativeHandle)(
     forwardedRef,
@@ -113,8 +120,12 @@ const CategoricalBarToXY = (0, import_react.forwardRef)((props, forwardedRef) =>
   );
   const isHorizontal = layout === "horizontal";
   const barSeriesAccessors = (0, import_bar_series_accessors.getBarSeriesAccessors)(isHorizontal);
+  const resolvedValueRepresentation = valueRepresentation !== void 0 && (0, import_is_valid_value_representation.isValidValueRepresentation)(valueRepresentation) ? valueRepresentation : "absolute";
   const xAxisProps = (0, import_map_axes_to_xy.mapCategoryAxisToXAxis)(resolvedCategoryAxis);
-  const yAxisProps = (0, import_map_axes_to_xy.mapValueAxisToYAxis)(resolvedValueAxis);
+  const yAxisProps = (0, import_map_axes_to_xy.mapValueAxisToYAxis)(
+    resolvedValueAxis,
+    resolvedValueRepresentation
+  );
   const dimToAxisId = /* @__PURE__ */ new Map();
   const numericalAxisGroups = /* @__PURE__ */ new Map();
   if (seriesByDimension !== null) {
@@ -155,6 +166,10 @@ const CategoricalBarToXY = (0, import_react.forwardRef)((props, forwardedRef) =>
       "data-dtrum-allow": dataDtrumAllow,
       "data-dt-component": "CategoricalBarChart",
       __downloadDataCallback: downloadDataCallback,
+      "aria-label": ariaLabel ?? import_constants.CATEGORICAL_BAR_CHART_ARIA_LABEL,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails,
       ...behaviorTrackingProps,
       children: [
         seriesByDimension !== null ? [...seriesByDimension.entries()].map(([dim, dimData]) => {

package/charts/xy-chart-adoption/categorical-bar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const CATEGORICAL_BAR_CHART_ARIA_LABEL = "Categorical Bar Chart";
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1,23 @@
+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 constants_exports = {};
+__export(constants_exports, {
+  CATEGORICAL_BAR_CHART_ARIA_LABEL: () => CATEGORICAL_BAR_CHART_ARIA_LABEL
+});
+module.exports = __toCommonJS(constants_exports);
+const CATEGORICAL_BAR_CHART_ARIA_LABEL = "Categorical Bar Chart";

package/charts/xy-chart-adoption/categorical-bar/utils/map-axes-to-xy.d.ts

@@ -1,3 +1,4 @@
+import type { ValueRepresentation } from '../../../core/types/scales.js';
 import type { XYChartNumericalAxisProps, XYChartXAxisProps } from '../../../xy-chart/types/xy-chart-props.js';
 import type { CategoricalSlotsConfig } from '../iterate-slots.js';
 export declare function mapCategoryAxisToXAxis(config: CategoricalSlotsConfig['categoryAxis']): {
@@ -5,7 +6,7 @@ export declare function mapCategoryAxisToXAxis(config: CategoricalSlotsConfig['c
     tickLabelLayout?: XYChartXAxisProps['tickLabelLayout'];
     tickLabelMaxSize?: number;
 };
-export declare function mapValueAxisToYAxis(config: CategoricalSlotsConfig['valueAxis']): {
+export declare function mapValueAxisToYAxis(config: CategoricalSlotsConfig['valueAxis'], valueRepresentation: ValueRepresentation): {
     type: 'numerical' | 'log';
     label?: string;
     min?: number | 'auto';
@@ -13,5 +14,6 @@ export declare function mapValueAxisToYAxis(config: CategoricalSlotsConfig['valu
     formatter?: XYChartNumericalAxisProps['formatter'];
     disableZoom?: boolean;
     disablePan?: boolean;
+    valueRepresentation: ValueRepresentation;
 };
 //# sourceMappingURL=map-axes-to-xy.d.ts.map