@dynatrace/strato-components 3.1.3 → 3.2.1

package/charts/xy-chart/utils/generate-nice-unit-ticks.d.ts

@@ -0,0 +1,54 @@
+import { type ConvertibleUnit, type FormatOptions, type Unit } from '@dynatrace-sdk/units';
+import { type AnyNumericFormatter, type FormatterWithPrecision } from '../../core/types/formatter.js';
+interface AxisFormatterConfig {
+    isRelative: boolean;
+    type: string;
+    formatter?: AnyNumericFormatter;
+}
+/**
+ * Returns true when the axis should use nice unit-converted ticks.
+ * Works with any axis shape that exposes isRelative, type and formatter.
+ */
+export declare function shouldUseNiceUnitTicks(config: AxisFormatterConfig | undefined): config is AxisFormatterConfig & {
+    formatter: FormatOptions<Unit, ConvertibleUnit>;
+};
+/**
+ * Finds the best divisor (between 4 and 8) for dividing the total domain
+ * into tick steps that produce the least remainder.
+ */
+export declare function getBestModulusDivisor(totalDomain: number): number;
+/**
+ * Generates tick values from 0 outward in both directions based on step size.
+ */
+export declare function generateTicks(domain: [number, number], step: number): number[];
+/**
+ * Nices a scale domain in the target (output) unit space.
+ *
+ * Converts the domain to the output unit, computes a nice step,
+ * rounds boundaries to step multiples, and converts back.
+ *
+ * Returns null when the step is 0 (sub-unit domain), signaling
+ * the caller should fall back to d3 nicing.
+ */
+export declare function niceUnitDomain(domain: [number, number], formatterOptions: FormatOptions<Unit, ConvertibleUnit>, niceMin: boolean, niceMax: boolean): {
+    min: number;
+    max: number;
+} | null;
+export interface NiceUnitTicksResult {
+    ticks: string[];
+    formattedTicks: string[];
+    numericTicks: number[];
+}
+/** Returned when the domain is too small for nice unit rounding; caller should fall back to default ticks. */
+export type NiceUnitTicksResultOrNull = NiceUnitTicksResult | null;
+/**
+ * Computes "nice" round ticks for a unit-converted numerical axis.
+ *
+ * Uses convert() for precise domain conversion to the target unit,
+ * then generates ticks from 0 outward (staying within domain boundaries),
+ * and converts back to base unit for scale positioning.
+ *
+ * Requires explicit input and output units in formatterOptions.
+ */
+export declare function computeNiceUnitTicks(domain: [number, number], formatterOptions: FormatOptions<Unit, ConvertibleUnit>, availableSize: number, orientation: 'horizontal' | 'vertical', formatter: FormatterWithPrecision): NiceUnitTicksResultOrNull;
+export {};

package/charts/xy-chart/utils/generate-nice-unit-ticks.js

@@ -0,0 +1,135 @@
+"use strict";
+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 generate_nice_unit_ticks_exports = {};
+__export(generate_nice_unit_ticks_exports, {
+  computeNiceUnitTicks: () => computeNiceUnitTicks,
+  generateTicks: () => generateTicks,
+  getBestModulusDivisor: () => getBestModulusDivisor,
+  niceUnitDomain: () => niceUnitDomain,
+  shouldUseNiceUnitTicks: () => shouldUseNiceUnitTicks
+});
+module.exports = __toCommonJS(generate_nice_unit_ticks_exports);
+var import_units = require("@dynatrace-sdk/units");
+var import_formatter = require("../../core/types/formatter.js");
+var import_ticks = require("../../core/utils/ticks.js");
+var import_guards = require("../types/guards.js");
+function shouldUseNiceUnitTicks(config) {
+  return config !== void 0 && !config.isRelative && (0, import_guards.isLinear)(config.type) && (0, import_formatter.isFormatterOptions)(config.formatter) && config.formatter.input !== void 0 && config.formatter.output !== void 0;
+}
+function getBestModulusDivisor(totalDomain) {
+  let bestDivisor = 4;
+  let minMod = totalDomain % 4;
+  for (let divisor = 4; divisor <= 8; divisor++) {
+    const mod = totalDomain % divisor;
+    if (mod === 0) {
+      return divisor;
+    }
+    if (mod < minMod || mod === minMod && divisor < bestDivisor) {
+      minMod = mod;
+      bestDivisor = divisor;
+    }
+  }
+  return bestDivisor;
+}
+function convertDomainToTargetUnit(domain, formatterOptions) {
+  const inputUnit = formatterOptions.input;
+  const outputUnit = formatterOptions.output;
+  return {
+    targetMin: (0, import_units.convert)(domain[0], inputUnit, outputUnit, true),
+    targetMax: (0, import_units.convert)(domain[1], inputUnit, outputUnit, true),
+    inputUnit,
+    outputUnit
+  };
+}
+function computeNiceStep(totalDomain, tickDivisor) {
+  if (totalDomain < 1) {
+    return 0;
+  }
+  const amount = totalDomain / Math.max(tickDivisor, 1);
+  return amount < 10 ? Math.ceil(amount) : Math.floor(amount / 10) * 10;
+}
+function generateTicks(domain, step) {
+  if (step <= 0) {
+    return [0];
+  }
+  const [min, max] = domain;
+  const allTicks = [0];
+  if (Math.sign(min) === Math.sign(max)) {
+    const sign = Math.sign(max) || 1;
+    const absMax = Math.max(Math.abs(min), Math.abs(max));
+    const count = Math.floor(absMax / step);
+    for (let i = 1; i <= count; i++) {
+      allTicks.push(step * i * sign);
+    }
+  } else {
+    const posCount = Math.floor(Math.abs(max) / step);
+    const negCount = Math.floor(Math.abs(min) / step);
+    for (let i = 1; i <= negCount; i++) {
+      allTicks.push(-step * i);
+    }
+    for (let i = 1; i <= posCount; i++) {
+      allTicks.push(step * i);
+    }
+  }
+  return allTicks.sort((a, b) => a - b);
+}
+function niceUnitDomain(domain, formatterOptions, niceMin, niceMax) {
+  const { targetMin, targetMax, inputUnit, outputUnit } = convertDomainToTargetUnit(domain, formatterOptions);
+  const totalDomain = Math.abs(targetMin) + Math.abs(targetMax);
+  const step = computeNiceStep(totalDomain, getBestModulusDivisor(totalDomain));
+  if (step === 0) {
+    return null;
+  }
+  const nicedMin = niceMin ? Math.floor(targetMin / step) * step : targetMin;
+  const nicedMax = niceMax ? Math.ceil(targetMax / step) * step : targetMax;
+  return {
+    min: (0, import_units.convert)(nicedMin, outputUnit, inputUnit, true),
+    max: (0, import_units.convert)(nicedMax, outputUnit, inputUnit, true)
+  };
+}
+function computeNiceUnitTicks(domain, formatterOptions, availableSize, orientation, formatter) {
+  const { targetMin, targetMax, inputUnit, outputUnit } = convertDomainToTargetUnit(domain, formatterOptions);
+  if (targetMin === targetMax) {
+    return {
+      ticks: ["0"],
+      formattedTicks: [formatter(0)],
+      numericTicks: [0]
+    };
+  }
+  const totalDomain = Math.abs(targetMin) + Math.abs(targetMax);
+  let tickDivisor = getBestModulusDivisor(totalDomain);
+  const TICK_SPACING = 20;
+  if (tickDivisor * TICK_SPACING >= availableSize) {
+    tickDivisor = orientation === "vertical" ? (0, import_ticks.getVerticalNumTicks)(availableSize) : (0, import_ticks.getHorizontalNumTicks)(availableSize);
+  }
+  const step = computeNiceStep(totalDomain, tickDivisor);
+  if (step === 0) {
+    return null;
+  }
+  const targetTicks = generateTicks([targetMin, targetMax], step);
+  const baseUnitTicks = targetTicks.map(
+    (tick) => (0, import_units.convert)(tick, outputUnit, inputUnit, true)
+  );
+  const formattedStrings = baseUnitTicks.map((tick) => formatter(tick));
+  return {
+    ticks: baseUnitTicks.map(String),
+    formattedTicks: formattedStrings,
+    numericTicks: baseUnitTicks
+  };
+}

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

@@ -23,6 +23,7 @@ __export(generate_scales_by_axis_id_exports, {
 });
 module.exports = __toCommonJS(generate_scales_by_axis_id_exports);
 var import_d3_scale = require("d3-scale");
+var import_generate_nice_unit_ticks = require("./generate-nice-unit-ticks.js");
 var import_is_axis = require("./is-axis.js");
 var import_value_representation = require("./value-representation.js");
 var import_constants = require("../../core/constants.js");
@@ -41,16 +42,25 @@ function generateInitialNumericalScale(initialDomain, axis, isXCoordinate, width
     ({ min, max } = initialDomainWithRelativeFilter);
   } else {
     const minMaxByConfig = { min: axis.min, max: axis.max };
-    const minMaxOptions = {
-      niceMin: (0, import_guards.isLogarithmicAxis)(axis) ? false : axis.min === "auto",
-      niceMax: (0, import_guards.isLogarithmicAxis)(axis) ? false : axis.max === "auto"
-    };
-    ({ min, max } = (0, import_core_scale.getMinMax)(
+    const niceMin = (0, import_guards.isLogarithmicAxis)(axis) ? false : axis.min === "auto";
+    const niceMax = (0, import_guards.isLogarithmicAxis)(axis) ? false : axis.max === "auto";
+    const rawMinMax = (0, import_core_scale.getMinMax)(
       scaleType,
       initialDomainWithRelativeFilter,
       minMaxByConfig,
-      minMaxOptions
-    ));
+      { niceMin: false, niceMax: false }
+    );
+    const axisFormatter = axis.formatter;
+    const niceDomain = (0, import_generate_nice_unit_ticks.shouldUseNiceUnitTicks)(axis) && (niceMin || niceMax) ? (0, import_generate_nice_unit_ticks.niceUnitDomain)(
+      [rawMinMax.min, rawMinMax.max],
+      axisFormatter,
+      niceMin,
+      niceMax
+    ) : null;
+    ({ min, max } = niceDomain ?? (0, import_core_scale.getMinMax)(scaleType, initialDomainWithRelativeFilter, minMaxByConfig, {
+      niceMin,
+      niceMax
+    }));
   }
   const domain = axis.reversed ? [max, min] : [min, max];
   const range = isXCoordinate ? [0, width] : [height, 0];

package/charts/xy-chart/utils/get-linear-accessors.d.ts

@@ -0,0 +1,9 @@
+import { type AnyLinearSeries, type AnyXYChartScale, type AreaMetadata, type DotMetadata, type LineMetadata, type MapDatapoints } from '../types/xy-chart-internals.js';
+import type { AreaDatapoint, DotDatapoint, LineDatapoint } from '../types/xy-chart.js';
+export type AnyLinearDatapoint = DotDatapoint | LineDatapoint | AreaDatapoint;
+export type AnyLinearAccessors = {
+    xAccessor: (scale: AnyXYChartScale) => (d: AnyLinearDatapoint) => number;
+    yAccessor: (scale: AnyXYChartScale) => (d: AnyLinearDatapoint) => number;
+};
+export type AnyLinearSeriesMetadata = AreaMetadata | DotMetadata | LineMetadata;
+export declare function getLinearAccessors(seriesType: AnyLinearSeries['type'], metadata: AnyLinearSeriesMetadata, datapointToMetadata: MapDatapoints, xRelAccessor?: (value: number) => number, yRelAccessor?: (value: number) => number): AnyLinearAccessors;

package/charts/xy-chart/utils/get-linear-accessors.js

@@ -0,0 +1,55 @@
+"use strict";
+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_linear_accessors_exports = {};
+__export(get_linear_accessors_exports, {
+  getLinearAccessors: () => getLinearAccessors
+});
+module.exports = __toCommonJS(get_linear_accessors_exports);
+var import_resolve_area_accessor_key = require("./resolve-area-accessor-key.js");
+var import_type_guards = require("./type-guards.js");
+var import_displays = require("../components/displays/index.js");
+var import_xy_chart_internals = require("../types/xy-chart-internals.js");
+function getLinearAccessors(seriesType, metadata, datapointToMetadata, xRelAccessor, yRelAccessor) {
+  let accessKey;
+  if (seriesType === import_xy_chart_internals.AREA_VARIANT) {
+    const { orientation, variant } = metadata;
+    accessKey = (0, import_resolve_area_accessor_key.resolveAreaAccessKey)(variant, orientation);
+  } else {
+    accessKey = seriesType;
+  }
+  const pair = import_displays.LINEAR_ACCESSORS[accessKey];
+  if ((0, import_type_guards.isHorizontalAreaAccessors)(pair)) {
+    const { isStacked } = metadata;
+    return {
+      xAccessor: (scale) => pair.x(scale, datapointToMetadata, xRelAccessor, isStacked),
+      yAccessor: (scale) => pair.y(scale, yRelAccessor)
+    };
+  } else if ((0, import_type_guards.isVerticalAreaAccessors)(pair)) {
+    const { isStacked } = metadata;
+    return {
+      xAccessor: (scale) => pair.x(scale, xRelAccessor),
+      yAccessor: (scale) => pair.y(scale, datapointToMetadata, yRelAccessor, isStacked)
+    };
+  } else {
+    return {
+      xAccessor: (scale) => pair.x(scale, xRelAccessor),
+      yAccessor: (scale) => pair.y(scale, yRelAccessor)
+    };
+  }
+}

package/charts/xy-chart/utils/query-closest-quadtree.js

@@ -27,43 +27,23 @@ __export(query_closest_quadtree_exports, {
 module.exports = __toCommonJS(query_closest_quadtree_exports);
 var import_d3_quadtree = require("d3-quadtree");
 var import_lodash_es = require("lodash");
-var import_get_area_series_accessors = require("./get-area-series-accessors.js");
+var import_get_linear_accessors = require("./get-linear-accessors.js");
 var import_get_scale = require("./get-scale.js");
 var import_value_representation = require("./value-representation.js");
 var import_constants = require("../../core/constants.js");
 var import_safe_get = require("../../core/utils/safe-get.js");
-var import_displays = require("../components/displays/index.js");
-var import_xy_chart_internals = require("../types/xy-chart-internals.js");
 function getAxisAccessors(series, metadata, xScale, yScale, axisIdToScaleDomain, datapointToMetadata) {
-  if (series.type === import_xy_chart_internals.AREA_VARIANT) {
-    const areaMetadata = metadata;
-    const isHorizontal = areaMetadata.orientation === "horizontal";
-    const isBand = areaMetadata.variant === "band";
-    const { xAxis: xAxis2, yAxis: yAxis2 } = areaMetadata;
-    const xRelAccessor2 = (0, import_value_representation.relAccessor)(xAxis2, axisIdToScaleDomain);
-    const yRelAccessor2 = (0, import_value_representation.relAccessor)(yAxis2, axisIdToScaleDomain);
-    const [xAccessorFn, yAccessorFn] = (0, import_get_area_series_accessors.getAreaAccessors)(
-      isHorizontal,
-      isBand,
-      xScale,
-      yScale,
-      datapointToMetadata,
-      xRelAccessor2,
-      yRelAccessor2
-    );
-    return [xAccessorFn, yAccessorFn];
-  }
   const { xAxis, yAxis } = metadata;
   const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
   const yRelAccessor = (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain);
-  const accessorPair = import_displays.LINEAR_ACCESSORS[series.type];
-  if (!accessorPair) {
-    return void 0;
-  }
-  return [
-    (d) => accessorPair.x(xScale, xRelAccessor)(d),
-    (d) => accessorPair.y(yScale, yRelAccessor)(d)
-  ];
+  const { xAccessor, yAccessor } = (0, import_get_linear_accessors.getLinearAccessors)(
+    series.type,
+    metadata,
+    datapointToMetadata,
+    xRelAccessor,
+    yRelAccessor
+  );
+  return [xAccessor(xScale), yAccessor(yScale)];
 }
 function filterDatapointsInRange(points, xAxisAccessor, yAxisAccessor, bounds, datapointToMetadata) {
   const { xMin, xMax, yMin, yMax } = bounds;
@@ -99,9 +79,6 @@ function buildQuadtrees(seriesWithDatapoints, axisIdToScales, datapointToMetadat
       axisIdToScaleDomain,
       datapointToMetadata
     );
-    if (!accessors) {
-      continue;
-    }
     const [xAxisAccessor, yAxisAccessor] = accessors;
     const [xMin, xMax] = xScale.range();
     const [yMin, yMax] = yScale.range();
@@ -150,38 +127,15 @@ function distanceBetweenTwoPoints(x0, x1, y0, y1) {
   return Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
 }
 function getDatapointAxisValues(datapoint, series, metadata, xScale, yScale, axisIdToScaleDomain, datapointToMetadata) {
-  if (series.type === import_xy_chart_internals.AREA_VARIANT) {
-    const areaMetadata = metadata;
-    const isHorizontal = areaMetadata.orientation === "horizontal";
-    const isBand = areaMetadata.variant === "band";
-    const { xAxis: xAxis2, yAxis: yAxis2, isStacked } = areaMetadata;
-    const xRelAccessor2 = (0, import_value_representation.relAccessor)(xAxis2, axisIdToScaleDomain);
-    const yRelAccessor2 = (0, import_value_representation.relAccessor)(yAxis2, axisIdToScaleDomain);
-    const [xAccessorFn, yAccessorFn] = (0, import_get_area_series_accessors.getAreaAccessors)(
-      isHorizontal,
-      isBand,
-      xScale,
-      yScale,
-      datapointToMetadata,
-      xRelAccessor2,
-      yRelAccessor2,
-      isStacked
-    );
-    return [xAccessorFn(datapoint), yAccessorFn(datapoint)];
-  }
-  const { xAxis, yAxis } = metadata;
-  const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
-  const yRelAccessor = (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain);
-  const accessorPair = import_displays.LINEAR_ACCESSORS[series.type];
-  const xValue = accessorPair.x(
+  const accessors = getAxisAccessors(
+    series,
+    metadata,
     xScale,
-    xRelAccessor
-  )(datapoint);
-  const yValue = accessorPair.y(
     yScale,
-    yRelAccessor
-  )(datapoint);
-  return [xValue, yValue];
+    axisIdToScaleDomain,
+    datapointToMetadata
+  );
+  return [accessors[0](datapoint), accessors[1](datapoint)];
 }
 function findClosestDatapointInSeries(series, tree, position, metadata, queryContext) {
   const datapoint = tree.find(position.x, position.y);

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

@@ -1,18 +1,16 @@
+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 { AxisIdToScales } from '../context/XYChartScales.context.js';
-import { type AnyLinearSeries, type AnyXYChartScale, type AreaSeriesWithDatapoints, type DotSeriesWithDatapoints, type LineSeriesWithDatapoints, type MapDatapoints, type SeriesToMetadata } from '../types/xy-chart-internals.js';
-import type { AreaDatapoint, DotDatapoint, LineDatapoint } from '../types/xy-chart.js';
-type AnyLinearDatapoint = DotDatapoint | LineDatapoint | AreaDatapoint;
+import { type AnyLinearSeries, type AnyXYChartScale, type AreaSeriesWithDatapoints, type AxisIdToScaleDomain, type DotSeriesWithDatapoints, type LineSeriesWithDatapoints, type MapDatapoints, type SeriesToMetadata } 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): {
+export declare function getClosestDatapoint(relativePosition: Point, series: AnyLinearSeries[], axisIdToScales: AxisIdToScales, seriesToMetadata: SeriesToMetadata, datapointToMetadata: MapDatapoints, axisIdToScaleDomain?: AxisIdToScaleDomain): {
     datapoint: AnyLinearDatapoint;
     series: AnyLinearSeries;
     distance: number;
 } | undefined;
-export declare function buildQueryGetClosestPoint(axisIdToScales: AxisIdToScales, seriesToMetadata: SeriesToMetadata, datapointToMetadata: MapDatapoints): {
+export declare function buildQueryGetClosestPoint(axisIdToScales: AxisIdToScales, seriesToMetadata: SeriesToMetadata, datapointToMetadata: MapDatapoints, axisIdToScaleDomain?: AxisIdToScaleDomain): {
     (arrayOfSeries: DotSeriesWithDatapoints[], position: Point): DotSeriesQueryResult | undefined;
     (arrayOfSeries: LineSeriesWithDatapoints[], position: Point): LineSeriesQueryResult | undefined;
     (arrayOfSeries: AreaSeriesWithDatapoints[], position: Point): AreaSeriesQueryResult | undefined;
 };
-export {};

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

@@ -24,14 +24,13 @@ __export(query_get_closest_point_exports, {
 });
 module.exports = __toCommonJS(query_get_closest_point_exports);
 var import_lodash_es = require("lodash");
-var import_get_area_series_accessors = require("./get-area-series-accessors.js");
+var import_get_linear_accessors = require("./get-linear-accessors.js");
 var import_get_scale = require("./get-scale.js");
 var import_query_closest_quadtree = require("./query-closest-quadtree.js");
+var import_value_representation = require("./value-representation.js");
 var import_constants = require("../../core/constants.js");
 var import_detect_scale = require("../../core/utils/detect-scale.js");
 var import_safe_get = require("../../core/utils/safe-get.js");
-var import_displays = require("../components/displays/index.js");
-var import_xy_chart_internals = require("../types/xy-chart-internals.js");
 function getDistance(datapoint, xScale, yScale, relativePosition, xAccessor, yAccessor) {
   const xPixel = xAccessor(xScale)(datapoint);
   const yPixel = yAccessor(yScale)(datapoint);
@@ -48,28 +47,15 @@ function calculateScalesBounds(xScale, yScale) {
   const [minHeight, maxHeight] = (0, import_detect_scale.isBandScale)(yScale) ? [yScaleRange[0], yScaleRange[1]] : [yScaleRange[1], yScaleRange[0]];
   return { minWidth, maxWidth, minHeight, maxHeight };
 }
-function getAccessorsForSeries(seriesType, seriesToMetadata, currentSeries, xScale, yScale, datapointToMetadata) {
-  if (seriesType === import_xy_chart_internals.AREA_VARIANT) {
-    const metadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
-    const areaMetadata = metadata;
-    const isHorizontal = areaMetadata.orientation === "horizontal";
-    const isBand = areaMetadata.variant === "band";
-    const [xAccessorFn, yAccessorFn] = (0, import_get_area_series_accessors.getAreaAccessors)(
-      isHorizontal,
-      isBand,
-      xScale,
-      yScale,
-      datapointToMetadata
-    );
-    return {
-      xAccessor: (_scale) => xAccessorFn,
-      yAccessor: (_scale) => yAccessorFn
-    };
-  }
-  return {
-    xAccessor: import_displays.LINEAR_ACCESSORS[seriesType].x,
-    yAccessor: import_displays.LINEAR_ACCESSORS[seriesType].y
-  };
+function getAccessorsForSeries(seriesType, seriesToMetadata, currentSeries, datapointToMetadata, xRelAccessor, yRelAccessor) {
+  const metadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
+  return (0, import_get_linear_accessors.getLinearAccessors)(
+    seriesType,
+    metadata,
+    datapointToMetadata,
+    xRelAccessor,
+    yRelAccessor
+  );
 }
 function isDatapointOutOfBounds(xPixel, yPixel, bounds) {
   const { minWidth, maxWidth, minHeight, maxHeight } = bounds;
@@ -108,7 +94,7 @@ function findClosestInSeriesData(data, xScale, yScale, relativePosition, accesso
   }
   return bestInSeries.distance < currentAccumulator.distance ? bestInSeries : void 0;
 }
-function getClosestDatapoint(relativePosition, series, axisIdToScales, seriesToMetadata, datapointToMetadata) {
+function getClosestDatapoint(relativePosition, series, axisIdToScales, seriesToMetadata, datapointToMetadata, axisIdToScaleDomain) {
   if (!series.length) {
     return void 0;
   }
@@ -124,13 +110,16 @@ function getClosestDatapoint(relativePosition, series, axisIdToScales, seriesToM
     const { data, xAxisId, yAxisId, type } = currentSeries;
     const xScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, xAxisId);
     const yScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, yAxisId);
+    const seriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
+    const xRelAccessor = axisIdToScaleDomain ? (0, import_value_representation.relAccessor)(seriesMetadata.xAxis, axisIdToScaleDomain) : void 0;
+    const yRelAccessor = axisIdToScaleDomain ? (0, import_value_representation.relAccessor)(seriesMetadata.yAxis, axisIdToScaleDomain) : void 0;
     const accessors = getAccessorsForSeries(
       type,
       seriesToMetadata,
       currentSeries,
-      xScale,
-      yScale,
-      datapointToMetadata
+      datapointToMetadata,
+      xRelAccessor,
+      yRelAccessor
     );
     const bounds = calculateScalesBounds(xScale, yScale);
     const seriesAccumulator = {
@@ -163,7 +152,7 @@ function getClosestDatapoint(relativePosition, series, axisIdToScales, seriesToM
     distance: bestMatch.distance
   };
 }
-function buildQueryGetClosestPoint(axisIdToScales, seriesToMetadata, datapointToMetadata) {
+function buildQueryGetClosestPoint(axisIdToScales, seriesToMetadata, datapointToMetadata, axisIdToScaleDomain) {
   function query(arrayOfSeries, position) {
     if ((0, import_lodash_es.isEmpty)(arrayOfSeries)) {
       return void 0;
@@ -173,7 +162,8 @@ function buildQueryGetClosestPoint(axisIdToScales, seriesToMetadata, datapointTo
       arrayOfSeries,
       axisIdToScales,
       seriesToMetadata,
-      datapointToMetadata
+      datapointToMetadata,
+      axisIdToScaleDomain
     );
     if (!closest) {
       return void 0;

package/charts/xy-chart/utils/resolve-area-accessor-key.d.ts

@@ -0,0 +1,4 @@
+import type { Orientation } from '../../core/components/canvas/types/canvas-shape.js';
+import type { LINEAR_ACCESSORS } from '../components/displays/index.js';
+import type { XYChartAreaVariant } from '../types/xy-chart-internals.js';
+export declare function resolveAreaAccessKey(variant: XYChartAreaVariant, orientation: Orientation): keyof typeof LINEAR_ACCESSORS;

package/charts/{timeseries/components/displays/shared/utils/get-time-range.js → xy-chart/utils/resolve-area-accessor-key.js}

@@ -16,11 +16,11 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var get_time_range_exports = {};
-__export(get_time_range_exports, {
-  getTimeRange: () => getTimeRange
+var resolve_area_accessor_key_exports = {};
+__export(resolve_area_accessor_key_exports, {
+  resolveAreaAccessKey: () => resolveAreaAccessKey
 });
-module.exports = __toCommonJS(get_time_range_exports);
-function getTimeRange(resolution) {
-  return resolution[1].getTime() - resolution[0].getTime();
+module.exports = __toCommonJS(resolve_area_accessor_key_exports);
+function resolveAreaAccessKey(variant, orientation) {
+  return `${variant}${orientation}`;
 }

package/charts/xy-chart/utils/type-guards.d.ts

@@ -1,7 +1,7 @@
 import { DateTimeFormatter, FormatterWithPrecision, type TimeFrameFormatter } from '../../core/types/formatter.js';
 import { ScaleTypesMap } from '../types/scale-types-map.js';
 import type { AreaSeriesContent, DotSeriesContent, LineSeriesContent, XYChartExploreState } from '../types/state.js';
-import { AnyXYChartScale, type AreaMetadata, type AreaSeriesWithDatapoints, type BarMetadata, type BarSeriesWithDatapoints, type BaseMetadata, type DotMetadata, DotSeriesWithDatapoints, type LineMetadata, type LineSeriesWithDatapoints, type RectDatapointInternal, type RectMetadata, RectSeriesWithDatapoints, type XYChartAreaSeriesInternal, type XYChartBarSeriesInternal, XYChartDotSeriesInternal, type XYChartLineSeriesInternal, XYChartRectSeriesInternal, XYChartSeriesWithDatapoints, XYChartVariantsInternal, type XYValueAccessorDataTypes } from '../types/xy-chart-internals.js';
+import { AnyXYChartScale, type AREA_HORIZONTAL, type AREA_VERTICAL, type AreaMetadata, type AreaSeriesWithDatapoints, type BAND_HORIZONTAL, type BAND_VERTICAL, type BarMetadata, type BarSeriesWithDatapoints, type BaseMetadata, DOT_VARIANT, type DotMetadata, DotSeriesWithDatapoints, LINE_VARIANT, type LineMetadata, type LineSeriesWithDatapoints, type MapDatapoints, type RectDatapointInternal, type RectMetadata, RectSeriesWithDatapoints, type XYChartAreaSeriesInternal, type XYChartBarSeriesInternal, XYChartDotSeriesInternal, type XYChartLineSeriesInternal, XYChartRectSeriesInternal, XYChartSeriesWithDatapoints, XYChartVariantsInternal, type XYValueAccessorDataTypes } from '../types/xy-chart-internals.js';
 import { type AreaDatapoint, type BarDatapoint, type DotDatapoint, type LineDatapoint, type RectDatapoint, XYAccessorDataTypes } from '../types/xy-chart.js';
 interface BaseGuard {
     v0: XYAccessorDataTypes;
@@ -110,4 +110,26 @@ export type ClosestSeries = DotSeriesWithDatapoints | LineSeriesWithDatapoints |
 export type ClosestDatapoint<T extends ClosestSeries> = T extends DotSeriesWithDatapoints ? DotDatapoint : T extends LineSeriesWithDatapoints ? LineDatapoint : AreaDatapoint;
 export type ClosestMetadata<T extends ClosestSeries> = T extends DotSeriesWithDatapoints ? BaseMetadata & Partial<DotMetadata> : T extends LineSeriesWithDatapoints ? BaseMetadata & Partial<LineMetadata> : BaseMetadata & Partial<AreaMetadata>;
 export type ClosestSeriesToMetadata<T extends ClosestSeries> = Map<T, ClosestMetadata<T>>;
+export type TwoParameterAccessor<T extends DotDatapoint | LineDatapoint | AreaDatapoint> = {
+    x: (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => (datapoint: T) => number;
+    y: (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => (datapoint: T) => number;
+};
+export type XFourParameterAccessor = {
+    x: (scale: AnyXYChartScale, datapointToMetadata: MapDatapoints, relAccessor?: (value: number) => number, isSeriesStacked?: boolean) => (datapoint: AreaDatapoint) => number;
+    y: (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => (datapoint: AreaDatapoint) => number;
+};
+export type YFourParameterAccessor = {
+    x: (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => (datapoint: AreaDatapoint) => number;
+    y: (scale: AnyXYChartScale, datapointToMetadata: MapDatapoints, relAccessor?: (value: number) => number, isSeriesStacked?: boolean) => (datapoint: AreaDatapoint) => number;
+};
+export type LinearAccessors = {
+    [BAND_HORIZONTAL]: TwoParameterAccessor<AreaDatapoint>;
+    [BAND_VERTICAL]: TwoParameterAccessor<AreaDatapoint>;
+    [DOT_VARIANT]: TwoParameterAccessor<DotDatapoint>;
+    [LINE_VARIANT]: TwoParameterAccessor<LineDatapoint>;
+    [AREA_HORIZONTAL]: XFourParameterAccessor;
+    [AREA_VERTICAL]: YFourParameterAccessor;
+};
+export declare function isHorizontalAreaAccessors(accessors: LinearAccessors[keyof LinearAccessors]): accessors is XFourParameterAccessor;
+export declare function isVerticalAreaAccessors(accessors: LinearAccessors[keyof LinearAccessors]): accessors is YFourParameterAccessor;
 export {};

package/charts/xy-chart/utils/type-guards.js

@@ -32,6 +32,7 @@ __export(type_guards_exports, {
   isCategoricalTooltip: () => isCategoricalTooltip,
   isDotSeries: () => isDotSeries,
   isDotTooltipContent: () => isDotTooltipContent,
+  isHorizontalAreaAccessors: () => isHorizontalAreaAccessors,
   isLineSeries: () => isLineSeries,
   isLineTooltipContent: () => isLineTooltipContent,
   isNumericalAreaScale: () => isNumericalAreaScale,
@@ -52,7 +53,8 @@ __export(type_guards_exports, {
   isTimeLineScale: () => isTimeLineScale,
   isTimeRectScale: () => isTimeRectScale,
   isTimeTooltip: () => isTimeTooltip,
-  isValidName: () => isValidName
+  isValidName: () => isValidName,
+  isVerticalAreaAccessors: () => isVerticalAreaAccessors
 });
 module.exports = __toCommonJS(type_guards_exports);
 var import_xy_chart_internals = require("../types/xy-chart-internals.js");
@@ -170,3 +172,9 @@ const isStringOrValidNumber = (value) => {
 function isValidName(value) {
   return value !== null && value !== void 0 && !Number.isNaN(value);
 }
+function isHorizontalAreaAccessors(accessors) {
+  return accessors.x.length === 4;
+}
+function isVerticalAreaAccessors(accessors) {
+  return accessors.y.length === 4;
+}

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

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