@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -1,28 +1,33 @@
-import type { BarSeriesQueryResult } from '../context/XYChartOverlayPerformance.context.js';
+import type { SeriesQueryResult } from '../context/XYChartOverlayPerformance.context.js';
 import type { AxisIdToScales } from '../context/XYChartScales.context.js';
-import type { AxisIdToScaleDomain, BarSeriesWithDatapoints, MapDatapoints, SeriesToMetadata } from '../types/xy-chart-internals.js';
-import type { BarDatapoint } from '../types/xy-chart.js';
-export type BarSortedEntry = {
+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;
     yPixel: number;
     /**
      * Stable cluster identifier built from the datapoint's x-domain
-     * (`x0-x1`). Bars sharing the same `boundaries` belong to the same
+     * (`x0-x1`). Entries sharing the same `boundaries` belong to the same
      * stack / same start-end domain group.
      */
     boundaries: string;
-    result: BarSeriesQueryResult;
+    result: SeriesQueryResult;
 };
 /**
- * Sorted-entry buckets keyed by shape. Only `bar` is populated today;
- * follow-up stories add other shapes (rect, dot, line, area).
+ * 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.
  *
- * Selection state in the shared tooltip is expected to be tracked per
- * shape, so the underlying data structure separates entries by shape
- * even when only one is in use.
+ * Selection state in the shared tooltip is tracked per shape, so the
+ * underlying data structure separates entries by shape even when only one is
+ * in use.
  */
 export type SortedEntriesPerShape = {
-    bar: BarSortedEntry[];
+    bar: SortedEntry[];
+    line: SortedEntry[];
+    area: SortedEntry[];
+    combined: SortedEntry[];
 };
 export type BarPixelCenter = {
     xPixel: number;
@@ -35,19 +40,36 @@ export type BarPixelCenter = {
  * hovered bar's exact pixel position instead of the cursor's.
  */
 export type GetBarPixelCenter = (series: BarSeriesWithDatapoints, datapoint: BarDatapoint) => BarPixelCenter;
+/**
+ * Maps a (series, datapoint) pair to its line or area pixel center.
+ * Handles both line and area series with a single builder — the accessor
+ * selection (`yMiddleBandAccessor` for bands, `y1AreaAccessor` for plain
+ * areas, etc.) is delegated to `getLinearAccessors`.
+ */
+export type GetLinearSeriesPixelCenter = (series: LineSeriesWithDatapoints | AreaSeriesWithDatapoints, datapoint: LineDatapoint | AreaDatapoint) => BarPixelCenter;
 /**
  * Build a per-series-cached `GetBarPixelCenter`. Accessor construction
  * is non-trivial, so we memoize per series id to keep tight loops fast.
  */
 export declare function buildGetBarPixelCenter(axisIdToScales: AxisIdToScales, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain, datapointMetadataMap: MapDatapoints): GetBarPixelCenter;
+/**
+ * Build a per-series-cached `GetLinearSeriesPixelCenter` for both line and
+ * area series. Uses the display accessors from `getLinearAccessors` — x
+ * centers time bands and uses x0 for numeric/categorical; y resolves to
+ * `yMiddleBandAccessor` for bands (AC4 mid(y0,y1)) or `y1AreaAccessor` for
+ * plain areas. Memoizes per series id to keep tight loops fast.
+ */
+export declare function buildGetLinearSeriesPixelCenter(axisIdToScales: AxisIdToScales, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain, datapointMetadataMap: MapDatapoints): GetLinearSeriesPixelCenter;
 /**
  * Build the per-shape sorted entries used by the shared tooltip query.
  *
- * Only bar series are processed. Each bar datapoint becomes one entry
- * positioned at the bar's pixel center, with a `boundaries` key that
- * groups bars sharing the same `x0-x1` (stacks and start-end clusters).
+ * Bar, line, and area series are each processed into their own bucket.
+ * Each datapoint becomes one entry positioned at the series' pixel center,
+ * with a `boundaries` key that groups entries sharing the same `x0-x1`.
+ * Gap datapoints are skipped.
  *
- * Entries are returned sorted ascending by `xPixel` so callers can run a
- * binary search by x-position.
+ * 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.
  */
-export declare function buildSortedEntries(barSeries: BarSeriesWithDatapoints[], datapointMetadataMap: MapDatapoints, getBarPixelCenter: GetBarPixelCenter): SortedEntriesPerShape;
+export declare function buildSortedEntries(barSeries: BarSeriesWithDatapoints[], lineSeries: LineSeriesWithDatapoints[], areaSeries: AreaSeriesWithDatapoints[], datapointMetadataMap: MapDatapoints, getBarPixelCenter: GetBarPixelCenter, getLinearSeriesPixelCenter: GetLinearSeriesPixelCenter): SortedEntriesPerShape;

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

@@ -18,9 +18,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var build_sorted_entries_exports = {};
 __export(build_sorted_entries_exports, {
   buildGetBarPixelCenter: () => buildGetBarPixelCenter,
+  buildGetLinearSeriesPixelCenter: () => buildGetLinearSeriesPixelCenter,
   buildSortedEntries: () => buildSortedEntries
 });
 module.exports = __toCommonJS(build_sorted_entries_exports);
+var import_get_linear_accessors = require("./get-linear-accessors.js");
+var import_get_scale = require("./get-scale.js");
 var import_query_hovered = require("./query-hovered.js");
 var import_value_representation = require("./value-representation.js");
 var import_safe_get = require("../../core/utils/safe-get.js");
@@ -52,18 +55,46 @@ function buildGetBarPixelCenter(axisIdToScales, seriesToMetadata, axisIdToScaleD
     };
   };
 }
-function buildSortedEntries(barSeries, datapointMetadataMap, getBarPixelCenter) {
-  const bar = [];
-  for (const series of barSeries) {
+function buildGetLinearSeriesPixelCenter(axisIdToScales, seriesToMetadata, axisIdToScaleDomain, datapointMetadataMap) {
+  const accessorsBySeries = /* @__PURE__ */ new Map();
+  return (series, datapoint) => {
+    let cached = accessorsBySeries.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);
+      const { xAccessor, yAccessor } = (0, import_get_linear_accessors.getLinearAccessors)(
+        series.type,
+        metadata,
+        datapointMetadataMap,
+        xRelAccessor,
+        yRelAccessor
+      );
+      const xScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.xAxisId);
+      const yScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.yAxisId);
+      cached = {
+        xPixelFn: xAccessor(xScale),
+        yPixelFn: yAccessor(yScale)
+      };
+      accessorsBySeries.set(series.id, cached);
+    }
+    return {
+      xPixel: cached.xPixelFn(datapoint),
+      yPixel: cached.yPixelFn(datapoint),
+      boundaries: `${String(datapoint.x0)}-${String(datapoint.x1)}`
+    };
+  };
+}
+function collectSortedEntries(seriesArray, datapointMetadataMap, getPixelCenter) {
+  const fn = getPixelCenter;
+  const entries = [];
+  for (const series of seriesArray) {
     for (const datapoint of series.data) {
       if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
         continue;
       }
-      const { xPixel, yPixel, boundaries } = getBarPixelCenter(
-        series,
-        datapoint
-      );
-      bar.push({
+      const { xPixel, yPixel, boundaries } = fn(series, datapoint);
+      entries.push({
         xPixel,
         yPixel,
         boundaries,
@@ -76,6 +107,28 @@ function buildSortedEntries(barSeries, datapointMetadataMap, getBarPixelCenter)
       });
     }
   }
-  bar.sort((a, b) => a.xPixel - b.xPixel);
-  return { bar };
+  return entries;
+}
+function buildSortedEntries(barSeries, lineSeries, areaSeries, datapointMetadataMap, getBarPixelCenter, getLinearSeriesPixelCenter) {
+  const bar = collectSortedEntries(
+    barSeries,
+    datapointMetadataMap,
+    getBarPixelCenter
+  );
+  const line = collectSortedEntries(
+    lineSeries,
+    datapointMetadataMap,
+    getLinearSeriesPixelCenter
+  );
+  const area = collectSortedEntries(
+    areaSeries,
+    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);
+  return { bar, line, area, combined };
 }

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

@@ -0,0 +1,3 @@
+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;

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

@@ -0,0 +1,58 @@
+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 apply_color_rule_to_bar_series_exports = {};
+__export(apply_color_rule_to_bar_series_exports, {
+  applyColorRuleToBarSeries: () => applyColorRuleToBarSeries
+});
+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 datapointCount = series.data.length;
+  let matchedCount = 0;
+  const matchedColors = /* @__PURE__ */ new Set();
+  series.data.forEach((datapoint) => {
+    const matchingRule = rules.find(
+      (rule) => (0, import_bar_datapoint_matches_color_rule.barDatapointMatchesColorRule)(datapoint, rule, isValid, series)
+    );
+    if (!matchingRule) {
+      return;
+    }
+    const color = (0, import_get_color_from_rule.getColorFromRule)(matchingRule);
+    if (!color) {
+      return;
+    }
+    matchedCount += 1;
+    matchedColors.add(color);
+    const metadata = (0, import_safe_get.safeGet)(datapointMetadataMap, datapoint);
+    if (metadata) {
+      datapointMetadataMap.set(datapoint, {
+        ...metadata,
+        colorOverride: color
+      });
+    }
+  });
+  if (datapointCount > 0 && matchedCount === datapointCount && matchedColors.size === 1) {
+    const [sharedColor] = matchedColors;
+    seriesToMetadata.set(series, {
+      ...seriesMetadata,
+      color: { Default: sharedColor }
+    });
+  }
+};

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

@@ -22,7 +22,8 @@ __export(apply_color_rule_to_series_metadata_exports, {
 module.exports = __toCommonJS(apply_color_rule_to_series_metadata_exports);
 var import_get_color_palette = require("../../../core/utils/get-color-palette.js");
 const applyColorRuleToSeriesMetadata = (seriesToMetadata, series, seriesMetadata, rule, index) => {
-  const colorOverride = rule.colorPalette ? (0, import_get_color_palette.getColorPalette)(seriesMetadata.name, index, rule.colorPalette) : { Default: rule.color };
+  const seriesName = seriesMetadata.name ?? "";
+  const colorOverride = rule.colorPalette ? (0, import_get_color_palette.getColorPalette)(seriesName, index, rule.colorPalette) : { Default: rule.color };
   if (colorOverride) {
     seriesToMetadata.set(series, {
       ...seriesMetadata,

package/charts/xy-chart/utils/coloring/bar-datapoint-matches-color-rule.d.ts

@@ -0,0 +1,4 @@
+import { ColorRuleProps } from '../../../core/types/color-rule.js';
+import type { BarSeriesWithDatapoints, ColorRuleValidator } from '../../types/xy-chart-internals.js';
+import type { BarDatapoint } from '../../types/xy-chart.js';
+export declare const barDatapointMatchesColorRule: (datapoint: BarDatapoint, rule: ColorRuleProps, isValid: ColorRuleValidator, series: BarSeriesWithDatapoints) => boolean;

package/charts/xy-chart/utils/coloring/bar-datapoint-matches-color-rule.js

@@ -0,0 +1,29 @@
+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 bar_datapoint_matches_color_rule_exports = {};
+__export(bar_datapoint_matches_color_rule_exports, {
+  barDatapointMatchesColorRule: () => barDatapointMatchesColorRule
+});
+module.exports = __toCommonJS(bar_datapoint_matches_color_rule_exports);
+var import_lodash_es = require("lodash");
+var import_get_fallback_value_accessor = require("../get-fallback-value-accessor.js");
+const barDatapointMatchesColorRule = (datapoint, rule, isValid, series) => {
+  const accessor = rule.valueAccessor ?? (0, import_get_fallback_value_accessor.getFallbackValueAccessor)(series);
+  const subject = (0, import_lodash_es.get)(datapoint, accessor);
+  return !(0, import_lodash_es.isNil)(subject) && isValid(subject, rule.comparator, rule.matchValue);
+};

package/charts/xy-chart/utils/coloring/has-series-matching-datapoint.js

@@ -21,11 +21,13 @@ __export(has_series_matching_datapoint_exports, {
 });
 module.exports = __toCommonJS(has_series_matching_datapoint_exports);
 var import_lodash_es = require("lodash");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_get_fallback_value_accessor = require("../get-fallback-value-accessor.js");
 const hasSeriesMatchingDatapoint = (series, rule, isValid) => {
   const accessor = rule.valueAccessor ?? (0, import_get_fallback_value_accessor.getFallbackValueAccessor)(series);
   return series.data.some((datapoint) => {
-    const subject = (0, import_lodash_es.get)(datapoint, accessor);
+    const rawSubject = (0, import_lodash_es.get)(datapoint, accessor);
+    const subject = Array.isArray(rawSubject) ? (0, import_single_line_name.singleLineName)(rawSubject) : rawSubject;
     return !(0, import_lodash_es.isNil)(subject) && isValid(subject, rule.comparator, rule.matchValue);
   });
 };

package/charts/xy-chart/utils/filter-out-of-range-ticks.d.ts

@@ -0,0 +1,3 @@
+import type { TickAxis } from '../../core/utils/formatter-by-ticks.js';
+import type { AnyXYChartScale } from '../types/xy-chart-internals.js';
+export declare function filterOutOfRangeTicks(tickAxis: TickAxis, scale: AnyXYChartScale | undefined, maxDim: number): TickAxis;

package/charts/xy-chart/utils/filter-out-of-range-ticks.js

@@ -0,0 +1,46 @@
+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 filter_out_of_range_ticks_exports = {};
+__export(filter_out_of_range_ticks_exports, {
+  filterOutOfRangeTicks: () => filterOutOfRangeTicks
+});
+module.exports = __toCommonJS(filter_out_of_range_ticks_exports);
+function filterOutOfRangeTicks(tickAxis, scale, maxDim) {
+  if (!scale || !("bandwidth" in scale)) {
+    return tickAxis;
+  }
+  const { ticks, formattedTicks, numericTicks } = tickAxis;
+  const filteredTicks = [];
+  const filteredFormatted = [];
+  const filteredNumeric = numericTicks ? [] : void 0;
+  for (let i = 0; i < ticks.length; i++) {
+    const pos = scale(ticks[i]);
+    if (pos !== void 0 && pos < maxDim) {
+      filteredTicks.push(ticks[i]);
+      filteredFormatted.push(formattedTicks[i]);
+      if (filteredNumeric && numericTicks) {
+        filteredNumeric.push(numericTicks[i]);
+      }
+    }
+  }
+  return {
+    ticks: filteredTicks,
+    formattedTicks: filteredFormatted,
+    numericTicks: filteredNumeric
+  };
+}

package/charts/xy-chart/utils/generate-scales-by-axis-id.d.ts

@@ -14,4 +14,4 @@ export declare function generateInitialTimeScale(initialDomain: MinMax, axis: XY
  * @param height - The height of the chart area.
  * @returns - A map of axis IDs to their corresponding scales | AxisIdToScale.
  */
-export declare function generateScalesByAxisId(axes: XYChartAxisInternal[], axisIdToScaleDomain: AxisIdToScaleDomain, axisIdToZoomedDomain: XYChartState['currentDomain'] | undefined, axisToDimension: AxisIdToDimension, width: number, height: number): AxisIdToScales;
+export declare function generateScalesByAxisId(axes: XYChartAxisInternal[], axisIdToScaleDomain: AxisIdToScaleDomain, axisIdToZoomedDomain: XYChartState['currentDomain'] | undefined, axisToDimension: AxisIdToDimension, width: number, height: number, axisIdToMinBarSize?: ReadonlyMap<string, number>): AxisIdToScales;

package/charts/xy-chart/utils/generate-scales-by-axis-id.js

@@ -105,7 +105,7 @@ function generateCategoricalScale(categoricalValues, axis, isXCoordinate, width,
   const domain = axis.reversed ? Array.from(categoricalValues).reverse() : categoricalValues;
   return (0, import_d3_scale.scaleBand)(domain, range);
 }
-function generateScalesByAxisId(axes, axisIdToScaleDomain, axisIdToZoomedDomain, axisToDimension, width, height) {
+function generateScalesByAxisId(axes, axisIdToScaleDomain, axisIdToZoomedDomain, axisToDimension, width, height, axisIdToMinBarSize) {
   const axisIdToScales = /* @__PURE__ */ new Map();
   axes.forEach((axis) => {
     const isXCoordinate = (0, import_is_axis.isXAxis)(axis);
@@ -153,12 +153,28 @@ function generateScalesByAxisId(axes, axisIdToScaleDomain, axisIdToZoomedDomain,
         axisIdToScaleDomain,
         axis.id
       );
+      const minBarSize = axisIdToMinBarSize?.get(axis.id) ?? 0;
+      let effectiveWidth = width;
+      let effectiveHeight = height;
+      if (minBarSize > 0) {
+        const numCats = initialDomain.size;
+        const measuredDim = isXCoordinate ? width : height;
+        const numBarsThatFit = Math.max(
+          1,
+          Math.floor(measuredDim / minBarSize)
+        );
+        if (numCats > numBarsThatFit) {
+          const scaledDim = measuredDim * numCats / numBarsThatFit;
+          effectiveWidth = isXCoordinate ? scaledDim : width;
+          effectiveHeight = isXCoordinate ? height : scaledDim;
+        }
+      }
       const scale = generateCategoricalScale(
         initialDomain,
         axis,
         isXCoordinate,
-        width,
-        height
+        effectiveWidth,
+        effectiveHeight
       );
       const dimensions = axisToDimension.get(axis.id);
       axisIdToScales.set(axis.id, {

package/charts/xy-chart/utils/get-ticks-formatted-by-config.d.ts

@@ -3,8 +3,12 @@ import type { DateTimeFormatter, FormatterWithPrecision, StringFormatter } from
 import { type TickAxis } from '../../core/utils/formatter-by-ticks.js';
 import type { AnyXYChartScale, XYChartAxisInternal } from '../types/xy-chart-internals.js';
 export declare function getTicksFormattedByConfig(config: XYChartAxisInternal | undefined, numTicks: number, scale: AnyXYChartScale | undefined, formatter: FormatterWithPrecision | DateTimeFormatter | StringFormatter | undefined, availableWidth?: number): {
-    ticks: any[];
+    ticks: string[];
     formattedTicks: string[];
+} | {
+    ticks: string[];
+    formattedTicks: string[];
+    numericTicks: number[];
 } | {
     numericTicks: number[];
     ticks: string[];

package/charts/xy-chart/utils/get-ticks-formatted-by-config.js

@@ -42,6 +42,17 @@ function getTicksFormattedByConfig(config, numTicks, scale, formatter, available
     formatter
   );
   const result = getTicksForCount(numTicks);
+  if ((0, import_guards.isLinear)(axisType) && config && "allowDecimals" in config && config.allowDecimals === false) {
+    const integerIndices = result.ticks.map((t, i) => Number.isInteger(Number(t)) ? i : -1).filter((i) => i !== -1);
+    if (integerIndices.length >= MIN_TICK_COUNT) {
+      const filteredTicks = integerIndices.map((i) => result.ticks[i]);
+      return {
+        ticks: filteredTicks,
+        formattedTicks: integerIndices.map((i) => result.formattedTicks[i]),
+        numericTicks: filteredTicks.map(Number)
+      };
+    }
+  }
   if (availableWidth === void 0 || scale === void 0) {
     return result;
   }

package/charts/xy-chart/utils/iterate-slots.js

@@ -117,7 +117,8 @@ const iterateSlots = (children) => {
       slots.tooltip = {
         hidden: child.props.hidden ?? false,
         template: child.props.children,
-        variant: child.props._variant ?? "single"
+        variant: child.props._variant ?? "single",
+        seriesDisplayMode: child.props._seriesDisplayMode
       };
     }
   });

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

@@ -1,8 +1,8 @@
 import { type AnyLinearDatapoint } from './get-linear-accessors.js';
 import type { Point } from '../../core/types/point.js';
-import type { AreaSeriesQueryResult, DotSeriesQueryResult, LineSeriesQueryResult } from '../context/XYChartOverlayPerformance.context.js';
+import type { AreaSeriesQueryResult, DotSeriesQueryResult, LineSeriesQueryResult, SeriesQueryResult } from '../context/XYChartOverlayPerformance.context.js';
 import type { AxisIdToScales } from '../context/XYChartScales.context.js';
-import { type AnyLinearSeries, type AnyXYChartScale, type AreaSeriesWithDatapoints, type AxisIdToScaleDomain, type DotSeriesWithDatapoints, type LineSeriesWithDatapoints, type MapDatapoints, type SeriesToMetadata } from '../types/xy-chart-internals.js';
+import { type AnyLinearSeries, type AnyXYChartScale, type AreaSeriesWithDatapoints, type AxisIdToScaleDomain, type DotSeriesWithDatapoints, type LineSeriesWithDatapoints, type MapDatapoints, type SeriesToMetadata, type XYChartSeriesWithDatapoints } from '../types/xy-chart-internals.js';
 export declare function getDistance(datapoint: AnyLinearDatapoint, xScale: AnyXYChartScale, yScale: AnyXYChartScale, relativePosition: Point, xAccessor: (scale: AnyXYChartScale) => (d: AnyLinearDatapoint) => number, yAccessor: (scale: AnyXYChartScale) => (d: AnyLinearDatapoint) => number): number;
 export declare function getClosestDatapoint(relativePosition: Point, series: AnyLinearSeries[], axisIdToScales: AxisIdToScales, seriesToMetadata: SeriesToMetadata, datapointToMetadata: MapDatapoints, axisIdToScaleDomain?: AxisIdToScaleDomain): {
     datapoint: AnyLinearDatapoint;
@@ -14,3 +14,7 @@ export declare function buildQueryGetClosestPoint(axisIdToScales: AxisIdToScales
     (arrayOfSeries: LineSeriesWithDatapoints[], position: Point): LineSeriesQueryResult | undefined;
     (arrayOfSeries: AreaSeriesWithDatapoints[], position: Point): AreaSeriesQueryResult | undefined;
 };
+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 findExactMatchDatapoints(preferred: SeriesQueryResult, allSeries: XYChartSeriesWithDatapoints[]): SeriesQueryResult[];

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

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var query_get_closest_point_exports = {};
 __export(query_get_closest_point_exports, {
+  buildExactMatchIndex: () => buildExactMatchIndex,
   buildQueryGetClosestPoint: () => buildQueryGetClosestPoint,
+  findExactMatchDatapoints: () => findExactMatchDatapoints,
+  findExactMatchFromIndex: () => findExactMatchFromIndex,
   getClosestDatapoint: () => getClosestDatapoint,
   getDistance: () => getDistance
 });
@@ -176,3 +179,59 @@ function buildQueryGetClosestPoint(axisIdToScales, seriesToMetadata, datapointTo
   }
   return query;
 }
+function serializeBoundingBoxValue(value) {
+  if (value === void 0) {
+    return "undefined";
+  }
+  if (value instanceof Date) {
+    return `d:${value.getTime()}`;
+  }
+  if (typeof value === "number") {
+    return `n:${value}`;
+  }
+  if (typeof value === "string") {
+    return `s:${value}`;
+  }
+  return `other:${String(value)}`;
+}
+function boundingBoxKey(datapoint) {
+  return [datapoint.x0, datapoint.x1, datapoint.y0, datapoint.y1].map(serializeBoundingBoxValue).join("|");
+}
+function exactMatchKey(series, datapoint) {
+  return `${series.xAxisId}|${series.yAxisId}|${boundingBoxKey(datapoint)}`;
+}
+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) {
+        continue;
+      }
+      const key = exactMatchKey(series, dp);
+      const entry = {
+        type: series.type,
+        distance: 0,
+        datapoint: dp,
+        series
+      };
+      const existing = index.get(key);
+      if (existing) {
+        existing.push(entry);
+      } else {
+        index.set(key, [entry]);
+      }
+    }
+  }
+  return index;
+}
+function findExactMatchFromIndex(preferred, index) {
+  const key = exactMatchKey(
+    preferred.series,
+    preferred.datapoint
+  );
+  const matches = index.get(key);
+  return matches && matches.length > 0 ? matches : [preferred];
+}
+function findExactMatchDatapoints(preferred, allSeries) {
+  return findExactMatchFromIndex(preferred, buildExactMatchIndex(allSeries));
+}

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

@@ -0,0 +1,31 @@
+import type { Point } from '../../core/types/point.js';
+import type { BarSeriesQueryResult, RectSeriesQueryResult, SeriesQueryResult, SeriesToHoverGrid } from '../context/XYChartOverlayPerformance.context.js';
+import type { AxisIdToScales } from '../context/XYChartScales.context.js';
+import { type AxisIdToScaleDomain, type BarSeriesWithDatapoints, type MapDatapoints, type RectSeriesWithDatapoints, type SeriesToMetadata } from '../types/xy-chart-internals.js';
+/**
+ * Build per-series hover grids for fast point-in-rect queries.
+ *
+ * Each cell holds entries for datapoints whose pixel bounding box
+ * intersects that cell, enabling near-constant-time lookup at hover
+ * time regardless of total datapoint count.
+ */
+export declare function buildHoverGrids(seriesWithDatapoints: (RectSeriesWithDatapoints | BarSeriesWithDatapoints)[], axisIdToScales: AxisIdToScales, datapointMetadataMap: MapDatapoints, seriesToMetadata: SeriesToMetadata, axisIdToScaleDomain: AxisIdToScaleDomain): SeriesToHoverGrid;
+/**
+ * Build a query that returns every series whose hovered datapoint
+ * sits under the cursor, backed by the same per-series grids used by
+ * the single-tooltip path. Mirrors `buildQueryAllHovered` but trades
+ * the O(series × datapoints) linear scan for an O(series) cell
+ * lookup — the hot path the shared tooltip walks on every mouse
+ * move.
+ */
+export declare function buildQueryAllHoveredFromGrid(seriesIdToGrid: SeriesToHoverGrid): (arrayOfSeries: (RectSeriesWithDatapoints | BarSeriesWithDatapoints)[], position: Point) => SeriesQueryResult[];
+/**
+ * Build a hovered-datapoint query backed by pre-computed per-series
+ * grids. Iterates the input series in reverse so the topmost
+ * (last-rendered) overlapping datapoint wins, matching the legacy
+ * `buildQueryHovered` behaviour.
+ */
+export declare function buildQueryHoveredFromGrid(seriesIdToGrid: SeriesToHoverGrid): {
+    (arrayOfSeries: RectSeriesWithDatapoints[], position: Point): RectSeriesQueryResult | undefined;
+    (arrayOfSeries: BarSeriesWithDatapoints[], position: Point): BarSeriesQueryResult | undefined;
+};