@dynatrace/strato-components 3.7.1 → 3.8.0

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/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/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;
+};

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

@@ -0,0 +1,191 @@
+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 query_hovered_grid_exports = {};
+__export(query_hovered_grid_exports, {
+  buildHoverGrids: () => buildHoverGrids,
+  buildQueryAllHoveredFromGrid: () => buildQueryAllHoveredFromGrid,
+  buildQueryHoveredFromGrid: () => buildQueryHoveredFromGrid
+});
+module.exports = __toCommonJS(query_hovered_grid_exports);
+var import_get_scale = require("./get-scale.js");
+var import_query_hovered = require("./query-hovered.js");
+var import_type_guards = require("./type-guards.js");
+var import_value_representation = require("./value-representation.js");
+var import_safe_get = require("../../core/utils/safe-get.js");
+const HOVER_GRID_CELL_SIZE = 32;
+function isInPixelRange(position, start, span) {
+  return position >= start && position <= start + span;
+}
+function buildSingleHoverGrid(series, axisIdToScales, datapointMetadataMap, seriesToMetadata, axisIdToScaleDomain) {
+  const { xAxis, yAxis } = (0, import_safe_get.safeGet)(seriesToMetadata, series);
+  const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
+  const yRelAccessor = (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain);
+  const accessors = (0, import_query_hovered.getAccessors)(
+    series,
+    axisIdToScales,
+    datapointMetadataMap,
+    xRelAccessor,
+    yRelAccessor
+  );
+  const xScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.xAxisId, series.type);
+  const yScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.yAxisId, series.type);
+  const [xRangeA, xRangeB] = xScale.range();
+  const [yRangeA, yRangeB] = yScale.range();
+  const originX = Math.min(xRangeA, xRangeB);
+  const originY = Math.min(yRangeA, yRangeB);
+  const maxX = Math.max(xRangeA, xRangeB);
+  const maxY = Math.max(yRangeA, yRangeB);
+  const cols = Math.max(1, Math.ceil((maxX - originX) / HOVER_GRID_CELL_SIZE));
+  const rows = Math.max(1, Math.ceil((maxY - originY) / HOVER_GRID_CELL_SIZE));
+  const cells = Array.from(
+    { length: cols * rows },
+    () => []
+  );
+  const data = (0, import_type_guards.isRectSeries)(series) ? series.filteredData : series.data;
+  for (const datapoint of data) {
+    if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
+      continue;
+    }
+    const { x, y, width, height } = (0, import_query_hovered.getPixelDimensionsForDatapoint)(
+      datapoint,
+      accessors
+    );
+    if (width <= 0 || height <= 0) {
+      continue;
+    }
+    const colStart = Math.max(
+      0,
+      Math.floor((x - originX) / HOVER_GRID_CELL_SIZE)
+    );
+    const colEnd = Math.min(
+      cols - 1,
+      Math.floor((x + width - originX) / HOVER_GRID_CELL_SIZE)
+    );
+    const rowStart = Math.max(
+      0,
+      Math.floor((y - originY) / HOVER_GRID_CELL_SIZE)
+    );
+    const rowEnd = Math.min(
+      rows - 1,
+      Math.floor((y + height - originY) / HOVER_GRID_CELL_SIZE)
+    );
+    if (colStart > colEnd || rowStart > rowEnd) {
+      continue;
+    }
+    const entry = {
+      datapoint,
+      x,
+      y,
+      width,
+      height
+    };
+    for (let row = rowStart; row <= rowEnd; row++) {
+      for (let col = colStart; col <= colEnd; col++) {
+        cells[row * cols + col].push(entry);
+      }
+    }
+  }
+  return {
+    cells,
+    cellSize: HOVER_GRID_CELL_SIZE,
+    originX,
+    originY,
+    cols,
+    rows
+  };
+}
+function buildHoverGrids(seriesWithDatapoints, axisIdToScales, datapointMetadataMap, seriesToMetadata, axisIdToScaleDomain) {
+  const seriesToGrids = /* @__PURE__ */ new Map();
+  for (const series of seriesWithDatapoints) {
+    const grid = buildSingleHoverGrid(
+      series,
+      axisIdToScales,
+      datapointMetadataMap,
+      seriesToMetadata,
+      axisIdToScaleDomain
+    );
+    seriesToGrids.set(series.id, grid);
+  }
+  return seriesToGrids;
+}
+function findInGrid(grid, position) {
+  const { cells, cellSize, originX, originY, cols, rows } = grid;
+  const col = Math.floor((position.x - originX) / cellSize);
+  const row = Math.floor((position.y - originY) / cellSize);
+  if (col < 0 || col >= cols || row < 0 || row >= rows) {
+    return void 0;
+  }
+  const candidates = cells[row * cols + col];
+  for (const entry of candidates) {
+    if (isInPixelRange(position.x, entry.x, entry.width) && isInPixelRange(position.y, entry.y, entry.height)) {
+      return entry.datapoint;
+    }
+  }
+  return void 0;
+}
+function buildQueryAllHoveredFromGrid(seriesIdToGrid) {
+  return (arrayOfSeries, position) => {
+    if (position.x < 0 || position.y < 0) {
+      return [];
+    }
+    const results = [];
+    for (const series of arrayOfSeries) {
+      const grid = seriesIdToGrid.get(series.id);
+      if (!grid) {
+        continue;
+      }
+      const datapoint = findInGrid(grid, position);
+      if (!datapoint) {
+        continue;
+      }
+      results.push({
+        type: series.type,
+        distance: 0,
+        datapoint,
+        series
+      });
+    }
+    return results;
+  };
+}
+function buildQueryHoveredFromGrid(seriesIdToGrid) {
+  function query(arrayOfSeries, position) {
+    if (position.x < 0 || position.y < 0) {
+      return void 0;
+    }
+    for (let i = arrayOfSeries.length - 1; i >= 0; i--) {
+      const series = arrayOfSeries[i];
+      const grid = seriesIdToGrid.get(series.id);
+      if (!grid) {
+        continue;
+      }
+      const datapoint = findInGrid(grid, position);
+      if (!datapoint) {
+        continue;
+      }
+      return {
+        type: series.type,
+        distance: 0,
+        datapoint,
+        series
+      };
+    }
+    return void 0;
+  }
+  return query;
+}

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

@@ -1,5 +1,5 @@
-import type { GetBarPixelCenter, SortedEntriesPerShape } from './build-sorted-entries.js';
+import type { GetBarPixelCenter, GetLinearSeriesPixelCenter, SortedEntriesPerShape } from './build-sorted-entries.js';
 import type { QueryAllHovered } from './query-hovered.js';
 import type { HoverQuery } from '../context/XYChartOverlayPerformance.context.js';
 import type { MapDatapoints } from '../types/xy-chart-internals.js';
-export declare function buildQueryShared(sortedEntries: SortedEntriesPerShape | undefined, queryAllHovered: QueryAllHovered, getBarPixelCenter: GetBarPixelCenter, datapointMetadataMap: MapDatapoints): HoverQuery;
+export declare function buildQueryShared(sortedEntries: SortedEntriesPerShape | undefined, queryAllHovered: QueryAllHovered, getBarPixelCenter: GetBarPixelCenter, getLinearSeriesPixelCenter: GetLinearSeriesPixelCenter, datapointMetadataMap: MapDatapoints): HoverQuery;

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

@@ -22,11 +22,13 @@ __export(query_shared_exports, {
 module.exports = __toCommonJS(query_shared_exports);
 var import_binary_search = require("../../core/utils/binary-search.js");
 var import_safe_get = require("../../core/utils/safe-get.js");
-function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, datapointMetadataMap) {
+function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, getLinearSeriesPixelCenter, datapointMetadataMap) {
   return function queryShared({
     position,
     rectSeriesData,
-    barSeriesData
+    barSeriesData,
+    lineSeriesData,
+    areaSeriesData
   }) {
     const relative = position.relative;
     const allRectsHovered = queryAllHovered(rectSeriesData, relative);
@@ -42,31 +44,39 @@ function buildQueryShared(sortedEntries, queryAllHovered, getBarPixelCenter, dat
     );
     const lastHovered = allBarsHovered.at(-1);
     const searchX = lastHovered ? getBarPixelCenter(lastHovered.series, lastHovered.datapoint).xPixel : relative.x;
-    const clusterEntries = sortedEntries ? findClosestClusterBinary(sortedEntries.bar, searchX) : findClosestClusterLinear(
+    const clusterEntries = sortedEntries ? findClosestClusterBinary(sortedEntries.combined, searchX) : findClosestClusterLinear(
       barSeriesData,
+      lineSeriesData,
+      areaSeriesData,
       datapointMetadataMap,
       getBarPixelCenter,
+      getLinearSeriesPixelCenter,
       searchX
     );
     if (clusterEntries.length === 0) {
       return { preferred: void 0, datapoints: [] };
     }
+    let closestEntry;
     if (allBarsHovered.length === 0) {
       const cursorY = relative.y;
-      const closestEntry = clusterEntries.reduce(
+      closestEntry = clusterEntries.reduce(
         (closest, entry) => closest === void 0 || Math.abs(entry.yPixel - cursorY) < Math.abs(closest.yPixel - cursorY) ? entry : closest,
         void 0
       );
-      if (closestEntry?.result) {
-        allBarsHovered.push(closestEntry.result);
-      }
     }
-    const preferred = allBarsHovered.at(-1);
-    const allowedBoundaries = allBarsHovered.length > 0 ? new Set(
-      allBarsHovered.map(
-        (b) => `${String(b.datapoint.x0)}-${String(b.datapoint.x1)}`
-      )
-    ) : void 0;
+    const preferred = closestEntry?.result ?? allBarsHovered.at(-1);
+    let allowedBoundaries;
+    if (allBarsHovered.length > 0) {
+      allowedBoundaries = new Set(
+        allBarsHovered.map(
+          (b) => `${String(b.datapoint.x0)}-${String(b.datapoint.x1)}`
+        )
+      );
+    } else if (preferred) {
+      allowedBoundaries = /* @__PURE__ */ new Set([
+        `${String(preferred.datapoint.x0)}-${String(preferred.datapoint.x1)}`
+      ]);
+    }
     const filteredEntries = clusterEntries.filter(
       (e) => allowedBoundaries === void 0 || allowedBoundaries.has(e.boundaries)
     );
@@ -91,10 +101,18 @@ function findClosestClusterBinary(sorted, searchX) {
   }
   return sorted.slice(left, right + 1);
 }
-function findClosestClusterLinear(barSeriesData, datapointMetadataMap, getBarPixelCenter, searchX) {
+function findClosestClusterLinear(barSeriesData, lineSeriesData, areaSeriesData, datapointMetadataMap, getBarPixelCenter, getLinearSeriesPixelCenter, searchX) {
   const entries = [];
   let closestKey;
   let closestDistance = Infinity;
+  function visit(xPixel, yPixel, boundaries, result) {
+    entries.push({ xPixel, yPixel, boundaries, result });
+    const distance = Math.abs(xPixel - searchX);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestKey = Math.round(xPixel);
+    }
+  }
   for (const series of barSeriesData) {
     for (const datapoint of series.data) {
       if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
@@ -104,17 +122,29 @@ function findClosestClusterLinear(barSeriesData, datapointMetadataMap, getBarPix
         series,
         datapoint
       );
-      entries.push({
-        xPixel,
-        yPixel,
-        boundaries,
-        result: { type: series.type, distance: 0, datapoint, series }
+      visit(xPixel, yPixel, boundaries, {
+        type: series.type,
+        distance: 0,
+        datapoint,
+        series
       });
-      const distance = Math.abs(xPixel - searchX);
-      if (distance < closestDistance) {
-        closestDistance = distance;
-        closestKey = Math.round(xPixel);
+    }
+  }
+  for (const series of [...lineSeriesData, ...areaSeriesData]) {
+    for (const datapoint of series.data) {
+      if ((0, import_safe_get.safeGet)(datapointMetadataMap, datapoint).isGap) {
+        continue;
       }
+      const { xPixel, yPixel, boundaries } = getLinearSeriesPixelCenter(
+        series,
+        datapoint
+      );
+      visit(xPixel, yPixel, boundaries, {
+        type: series.type,
+        distance: 0,
+        datapoint,
+        series
+      });
     }
   }
   if (closestKey === void 0) {

package/charts/xy-chart-adoption/histogram/HistogramToXY.d.ts

@@ -1,6 +1,5 @@
-import { type ReactNode } from 'react';
 import type { HistogramChartProps } from '../../histogram/types/histogram-props.js';
 import type { HistogramChartRef } from '../../histogram/types/histogram-ref.js';
 export declare const HistogramToXY: (props: HistogramChartProps & {
-    children?: ReactNode | undefined;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HistogramChartRef>) => import("react").ReactElement | null;