@dynatrace/strato-components 3.1.3 → 3.2.0

package/charts/tree-map/components/TreeMapChartLayout.js

@@ -26,6 +26,7 @@ var import_react = require("react");
 var import_TreeMapInternal = require("./TreeMapInternal.js");
 var import_TreeMapLegendRenderer = require("./TreeMapLegend/TreeMapLegendRenderer.js");
 var import_TreeMapOverlay = require("./TreeMapOverlay/TreeMapOverlay.js");
+var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
 var import_ChartLayout = require("../../core/components/chart-layout/ChartLayout.js");
 var import_ChartLegendContext = require("../context/ChartLegendContext.js");
 var import_TreeMapAggregationDataProvider = require("../providers/TreeMapAggregationDataProvider.js");
@@ -48,6 +49,7 @@ const TreeMapChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((props,
     "data-testid": dataTestId,
     "data-dt-component": dataDtComponent
   } = props;
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const {
     hidden: legendHidden,
     position: legendPosition,
@@ -60,6 +62,7 @@ const TreeMapChartLayout = /* @__PURE__ */ (0, import_react.forwardRef)((props,
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ChartLayout.ChartLayout,
     {
+      ...behavioralTrackingProps,
       ref: chartLayoutRef,
       chartWidth: width,
       chartHeight: height,

package/charts/tree-map/components/TreeMapInternal.d.ts

@@ -1,3 +1,3 @@
 export declare const TreeMapInternal: (props: {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css

@@ -1,4 +1,4 @@
-._1iqz50a0-3-1-3 {
+._1iqz50a0-3-2-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.sty.js

@@ -22,4 +22,4 @@ __export(TreeMapOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TreeMapOverlay_css_exports);
 var import_TreeMapOverlay_css_ts_vanilla = require("./TreeMapOverlay.css");
-var container = "_1iqz50a0-3-1-3";
+var container = "_1iqz50a0-3-2-0";

package/charts/tree-map/components/TreeMapToolbar/TreeMapToolbar.js

@@ -23,6 +23,7 @@ __export(TreeMapToolbar_exports, {
 module.exports = __toCommonJS(TreeMapToolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_TreeMapDownloadDataButton = require("./TreeMapDownloadDataButton.js");
+var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_ChartToolbarRenderer = require("../../../core/components/toolbar/ChartToolbarRenderer.js");
 var import_constants = require("../../constants.js");
 var import_ToolbarContext = require("../../context/ToolbarContext.js");
@@ -50,6 +51,9 @@ const TreeMapToolbar = () => {
   const showDefaultToolbarDownloadButton = isDownloadEnabled && !toolbarConfig?.intents;
   const showMenuToolbarButton = isDownloadEnabled && !!toolbarConfig?.intents?.length;
   const initialA11yState = showDefaultToolbarDownloadButton ? [{ download: 0 }] : [{ intent: 0 }];
+  const behaviorTrackingProps = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(
+    toolbarConfig ?? {}
+  )[0];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartToolbarRenderer.ChartToolbarRenderer,
     {
@@ -65,6 +69,7 @@ const TreeMapToolbar = () => {
       intents: toolbarConfig?.intents,
       handleDownloadDataToolbar,
       removeDragHandle: true,
+      ...behaviorTrackingProps,
       children: showDefaultToolbarDownloadButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapDownloadDataButton.TreeMapDownloadDataButton, {})
     }
   );

package/charts/tree-map/components/TreeMapTooltip/TreeMapTooltip.css

@@ -1,7 +1,7 @@
-._1j83htq0-3-1-3 {
+._1j83htq0-3-2-0 {
   padding: 0 var(--dt-spacings-size-4, 4px) ;
   text-align: center;
 }
-._1j83htq1-3-1-3 {
+._1j83htq1-3-2-0 {
   padding: var(--dt-spacings-size-4, 4px);
 }

package/charts/tree-map/components/TreeMapTooltip/TreeMapTooltip.d.ts

@@ -2,5 +2,5 @@ import type { TreeMapSeriesActionsLeafNode } from '../../types/treemap.js';
 interface TreeMapTooltipProps {
     series: TreeMapSeriesActionsLeafNode[];
 }
-export declare const TreeMapTooltip: (props: TreeMapTooltipProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+export declare const TreeMapTooltip: (props: TreeMapTooltipProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
 export {};

package/charts/tree-map/components/TreeMapTooltip/TreeMapTooltip.sty.js

@@ -23,5 +23,5 @@ __export(TreeMapTooltip_css_exports, {
 });
 module.exports = __toCommonJS(TreeMapTooltip_css_exports);
 var import_TreeMapTooltip_css_ts_vanilla = require("./TreeMapTooltip.css");
-var headerText = "_1j83htq0-3-1-3";
-var valueChip = "_1j83htq1-3-1-3";
+var headerText = "_1j83htq0-3-2-0";
+var valueChip = "_1j83htq1-3-2-0";

package/charts/tree-map/types/treemap.d.ts

@@ -1,4 +1,5 @@
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import { DataTestId } from '../../../core/types/data-props.js';
 import { MaskingProps } from '../../../core/types/masking-props.js';
 import { StylingProps } from '../../../core/types/styling-props.js';
@@ -59,7 +60,7 @@ export type NameAccessor = 'name' | 'value';
 /**
  * @public
  */
-export interface TreeMapProps extends StylingProps, MaskingProps, DataTestId {
+export interface TreeMapProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
     /** The tree map data to display. */
     data: TreeMapData;
     /**

package/charts/tree-map/utils/iterate-slots.js

@@ -29,6 +29,7 @@ var import_ColorRule = require("../../core/slots/ColorRule.js");
 var import_ChartToolbar = require("../../core/slots/toolbar/ChartToolbar.js");
 var import_CompactToolbar = require("../../core/slots/toolbar/CompactToolbar.js");
 var import_DownloadData = require("../../core/slots/toolbar/DownloadData.js");
+var import_extract_behavior_tracking_props = require("../../core/utils/extract-behavior-tracking-props.js");
 var import_DownloadCSV = require("../slots/DownloadCSV.js");
 var import_Toolbar = require("../slots/Toolbar.js");
 var import_Tooltip = require("../slots/Tooltip.js");
@@ -78,7 +79,8 @@ function iterateSlots(children) {
         ...slots,
         toolbar: {
           ...slots.toolbar,
-          ...(0, import_CompactToolbar.sanitizeProps)(child.props)
+          ...(0, import_CompactToolbar.sanitizeProps)(child.props),
+          ...(0, import_extract_behavior_tracking_props.extractBehaviorTrackingProps)(child.props)
         }
       };
     } else if ((0, import_is_slot.isSlot)(child, import_DownloadCSV.TreeMapDownloadCSVSlot)) {

package/charts/xy-chart/XYChart.d.ts

@@ -5,5 +5,5 @@ interface XYChartProps {
 }
 export declare const XYChart: (props: XYChartProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<XYChartRef>) => React.ReactElement | null;
+} & import("react").RefAttributes<XYChartRef>) => import("react").ReactElement | null;
 export {};

package/charts/xy-chart/XYChartRoot.d.ts

@@ -6,7 +6,7 @@ import { XYChartRef } from './types/xy-chart.js';
  */
 export declare const XYChartRoot: (props: XYChartProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<XYChartRef>) => React.ReactElement | null;
+} & import("react").RefAttributes<XYChartRef>) => import("react").ReactElement | null;
 /**
  * The `XYChart` encompasses various types of charts that utilize both x-axis and
  * y-axis for data representation, designed to visually display and analyze data
@@ -15,7 +15,7 @@ export declare const XYChartRoot: (props: XYChartProps & {
  */
 export declare const XYChart: ((props: XYChartProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<XYChartRef>) => React.ReactElement | null) & {
+} & import("react").RefAttributes<XYChartRef>) => import("react").ReactElement | null) & {
     Annotations: {
         (props: PropsWithChildren<import("./slots/Annotations/Annotations.js").XYChartAnnotationsProps>): null;
         displayName: string;

package/charts/xy-chart/XYChartRoot.js

@@ -63,6 +63,7 @@ var import_is_empty_data = require("./utils/is-empty-data.js");
 var import_iterate_slots = require("./utils/iterate-slots.js");
 var import_xy_chart_configuration = require("./utils/xy-chart-configuration.js");
 var import_XYChart = require("./XYChart.js");
+var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_Intent = require("../../core/slots/Intent/Intent.js");
 var import_ChartLayout = require("../core/components/chart-layout/ChartLayout.js");
@@ -86,6 +87,7 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow
   } = props;
+  const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const slots = (0, import_iterate_slots.iterateSlots)(props.children);
   const config = (0, import_useXYChartConfig.useXYChartConfig)(props, slots);
   const { emptyState, errorState } = (0, import_get_chart_states_template.getChartStatesTemplates)(props.children);
@@ -129,6 +131,7 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
               style,
               "data-dtrum-mask": dataDtrumMask,
               "data-dtrum-allow": dataDtrumAllow,
+              ...behaviorTrackingProps,
               "data-dt-component": COMPONENT_NAME_BEHAVIOURAL_TRACKING,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLayout.ChartLayout.Graph, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/charts/xy-chart/components/axes/AxisArea.css

@@ -1,3 +1,3 @@
-._bidc430-3-1-3 {
+._bidc430-3-2-0 {
   position: relative;
 }

package/charts/xy-chart/components/axes/AxisArea.sty.js

@@ -22,4 +22,4 @@ __export(AxisArea_css_exports, {
 });
 module.exports = __toCommonJS(AxisArea_css_exports);
 var import_AxisArea_css_ts_vanilla = require("./AxisArea.css");
-var axisContainerStyle = "_bidc430-3-1-3";
+var axisContainerStyle = "_bidc430-3-2-0";

package/charts/xy-chart/components/axes/AxisTickWithTruncation.css

@@ -1,8 +1,8 @@
-._z2zz8y2-3-1-3 {
-  direction: var(--_z2zz8y0-3-1-3);
+._z2zz8y2-3-2-0 {
+  direction: var(--_z2zz8y0-3-2-0);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
-  width: var(--_z2zz8y1-3-1-3);
+  width: var(--_z2zz8y1-3-2-0);
 }

package/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -24,6 +24,6 @@ __export(AxisTickWithTruncation_css_exports, {
 });
 module.exports = __toCommonJS(AxisTickWithTruncation_css_exports);
 var import_AxisTickWithTruncation_css_ts_vanilla = require("./AxisTickWithTruncation.css");
-var directionValue = "var(--_z2zz8y0-3-1-3)";
-var tickStyle = "_z2zz8y2-3-1-3";
-var widthContainer = "var(--_z2zz8y1-3-1-3)";
+var directionValue = "var(--_z2zz8y0-3-2-0)";
+var tickStyle = "_z2zz8y2-3-2-0";
+var widthContainer = "var(--_z2zz8y1-3-2-0)";

package/charts/xy-chart/components/displays/band-accessors.d.ts

@@ -16,3 +16,5 @@ export declare const bandY0Accessor: (scale: AnyXYChartScale, relAccessor?: (val
  * Band chart y1 accessor - returns the scaled y1 value directly.
  */
 export declare const bandY1Accessor: (scale: AnyXYChartScale, relAccessor?: (value: number) => number) => (datapoint: AreaDatapoint) => number;
+export declare function xMiddleBandAccessor(scale: AnyXYChartScale, relAccessor?: (value: number) => number): (datapoint: AreaDatapoint) => number;
+export declare function yMiddleBandAccessor(scale: AnyXYChartScale, relAccessor?: (value: number) => number): (datapoint: AreaDatapoint) => number;

package/charts/xy-chart/components/displays/band-accessors.js

@@ -21,7 +21,9 @@ __export(band_accessors_exports, {
   bandX0Accessor: () => bandX0Accessor,
   bandX1Accessor: () => bandX1Accessor,
   bandY0Accessor: () => bandY0Accessor,
-  bandY1Accessor: () => bandY1Accessor
+  bandY1Accessor: () => bandY1Accessor,
+  xMiddleBandAccessor: () => xMiddleBandAccessor,
+  yMiddleBandAccessor: () => yMiddleBandAccessor
 });
 module.exports = __toCommonJS(band_accessors_exports);
 var import_get_band_centered_point = require("../../utils/get-band-centered-point.js");
@@ -63,3 +65,17 @@ const bandX0Accessor = (scale, relAccessor) => getBandValueAccessor("x0")(scale,
 const bandX1Accessor = (scale, relAccessor) => getBandValueAccessor("x1")(scale, relAccessor);
 const bandY0Accessor = (scale, relAccessor) => getBandValueAccessor("y0")(scale, relAccessor);
 const bandY1Accessor = (scale, relAccessor) => getBandValueAccessor("y1")(scale, relAccessor);
+function xMiddleBandAccessor(scale, relAccessor) {
+  return (datapoint) => {
+    const x0 = bandX0Accessor(scale, relAccessor)(datapoint);
+    const x1 = bandX1Accessor(scale, relAccessor)(datapoint);
+    return (x0 + x1) / 2;
+  };
+}
+function yMiddleBandAccessor(scale, relAccessor) {
+  return (datapoint) => {
+    const y0 = bandY0Accessor(scale, relAccessor)(datapoint);
+    const y1 = bandY1Accessor(scale, relAccessor)(datapoint);
+    return (y0 + y1) / 2;
+  };
+}

package/charts/xy-chart/components/displays/index.d.ts

@@ -1,15 +1,2 @@
-import { xAccessor as xDotAccessor, yAccessor as yDotAccessor } from './dot-accessors.js';
-import { xAccessor as xLineAccessor, yAccessor as yLineAccessor } from './line-accessors.js';
-import { DOT_VARIANT, LINE_VARIANT } from '../../types/xy-chart-internals.js';
-type LinearAccessors = {
-    [DOT_VARIANT]: {
-        x: typeof xDotAccessor;
-        y: typeof yDotAccessor;
-    };
-    [LINE_VARIANT]: {
-        x: typeof xLineAccessor;
-        y: typeof yLineAccessor;
-    };
-};
+import type { LinearAccessors } from '../../utils/type-guards.js';
 export declare const LINEAR_ACCESSORS: LinearAccessors;
-export {};

package/charts/xy-chart/components/displays/index.js

@@ -21,10 +21,20 @@ __export(displays_exports, {
   LINEAR_ACCESSORS: () => LINEAR_ACCESSORS
 });
 module.exports = __toCommonJS(displays_exports);
+var import_area_accessors = require("./area-accessors.js");
+var import_band_accessors = require("./band-accessors.js");
 var import_dot_accessors = require("./dot-accessors.js");
 var import_line_accessors = require("./line-accessors.js");
 var import_xy_chart_internals = require("../../types/xy-chart-internals.js");
 const LINEAR_ACCESSORS = {
+  [import_xy_chart_internals.BAND_HORIZONTAL]: {
+    x: import_band_accessors.xMiddleBandAccessor,
+    y: import_band_accessors.bandY0Accessor
+  },
+  [import_xy_chart_internals.BAND_VERTICAL]: {
+    x: import_band_accessors.bandX0Accessor,
+    y: import_band_accessors.yMiddleBandAccessor
+  },
   [import_xy_chart_internals.DOT_VARIANT]: {
     x: import_dot_accessors.xAccessor,
     y: import_dot_accessors.yAccessor
@@ -32,5 +42,13 @@ const LINEAR_ACCESSORS = {
   [import_xy_chart_internals.LINE_VARIANT]: {
     x: import_line_accessors.xAccessor,
     y: import_line_accessors.yAccessor
+  },
+  [import_xy_chart_internals.AREA_HORIZONTAL]: {
+    x: import_area_accessors.x1Accessor,
+    y: import_area_accessors.yAccessor
+  },
+  [import_xy_chart_internals.AREA_VERTICAL]: {
+    x: import_area_accessors.xAccessor,
+    y: import_area_accessors.y1Accessor
   }
 };

package/charts/xy-chart/components/layout/XYChartGridLayout.js

@@ -25,18 +25,22 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_ChartGrid_css = require("../../../core/components/chart-grid/ChartGrid.sty.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_Grid = require("../../../core/components/grid/Grid.js");
+var import_useAxesTicks = require("../../hooks/useAxesTicks.js");
 var import_useGetVisibleAxesScales = require("../../hooks/useGetVisibleAxesScales.js");
 var import_useShouldShowGrid = require("../../hooks/useShouldShowGrid.js");
 const XYChartGridLayout = () => {
   const { width, height } = (0, import_useGridPlotSize.useGridPlotSize)();
   const { shouldShowGrid } = (0, import_useShouldShowGrid.useShouldShowGrid)();
   const visibleAxisScales = (0, import_useGetVisibleAxesScales.useGetVisibleAxesScales)();
+  const { topTicks, bottomTicks, leftTicks, rightTicks } = (0, import_useAxesTicks.useAxesTicks)();
   if (!shouldShowGrid()) {
     return null;
   }
   if (!visibleAxisScales.hasXAndYScale) {
     return null;
   }
+  const xTicks = bottomTicks.numericTicks ?? topTicks.numericTicks;
+  const yTicks = leftTicks.numericTicks ?? rightTicks.numericTicks;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: import_ChartGrid_css.plotLayout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Grid.Grid,
     {
@@ -44,6 +48,8 @@ const XYChartGridLayout = () => {
       yScale: visibleAxisScales.yScale,
       height,
       width,
+      xTicks,
+      yTicks,
       highlightZeroLine: {
         horizontal: false,
         vertical: false

package/charts/xy-chart/components/legend/XYLegend/xy-legend.css

@@ -1,3 +1,3 @@
-._1lwufqz0-3-1-3 {
+._1lwufqz0-3-2-0 {
   margin: var(--dt-spacings-size-2, 2px);
 }

package/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

@@ -22,4 +22,4 @@ __export(xy_legend_css_exports, {
 });
 module.exports = __toCommonJS(xy_legend_css_exports);
 var import_xy_legend_css_ts_vanilla = require("./xy-legend.css");
-var shapeIconWrapper = "_1lwufqz0-3-1-3";
+var shapeIconWrapper = "_1lwufqz0-3-2-0";

package/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-1-3 {
+._1bbe5uo0-3-2-0 {
   overflow: visible;
   cursor: crosshair;
   z-index: 1;

package/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js

@@ -69,7 +69,7 @@ function XYChartCrosshair({
   const setState = (0, import_selectors.useSetState)();
   const onScrollCallback = () => setState(import_reset_reducers.reduceResetExploreVisible);
   (0, import_useApplyCallbackOnScroll.useApplyCallbackOnScroll)(pinned, onScrollCallback);
-  const { xAxis, yAxis, variant, orientation } = seriesToMetadata.get(tooltipContent?.series) ?? {};
+  const { xAxis, yAxis, variant, orientation, isStacked } = seriesToMetadata.get(tooltipContent?.series) ?? {};
   const isArea = (0, import_type_guards.isAreaTooltipContent)(tooltipContent);
   const isHorizontal = orientation === "horizontal";
   const calculatedCoordinates = (0, import_react.useMemo)(() => {
@@ -89,7 +89,8 @@ function XYChartCrosshair({
       xRelAccessor,
       yRelAccessor,
       isArea,
-      isHorizontal
+      isHorizontal,
+      isStacked
     });
   }, [
     tooltipContent,
@@ -100,7 +101,8 @@ function XYChartCrosshair({
     axisIdToScales,
     datapointMetadataMap,
     isArea,
-    isHorizontal
+    isHorizontal,
+    isStacked
   ]);
   const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };
   if (!position) {

package/charts/xy-chart/components/overlay/explore/XYChartCrosshair.sty.js

@@ -22,4 +22,4 @@ __export(XYChartCrosshair_css_exports, {
 });
 module.exports = __toCommonJS(XYChartCrosshair_css_exports);
 var import_XYChartCrosshair_css_ts_vanilla = require("./XYChartCrosshair.css");
-var crosshair = "_1bbe5uo0-3-1-3";
+var crosshair = "_1bbe5uo0-3-2-0";

package/charts/xy-chart/components/overlay/explore/XYChartExplore.css

@@ -1,4 +1,4 @@
-._cd1yys0-3-1-3 {
+._cd1yys0-3-2-0 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-1-3 {
+._cd1yys1-3-2-0 {
   top: 0px;
   left: 0px;
   width: calc(100% + 1px);

package/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js

@@ -24,5 +24,5 @@ __export(XYChartExplore_css_exports, {
 module.exports = __toCommonJS(XYChartExplore_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartExplore_css_ts_vanilla = require("./XYChartExplore.css");
-var datapointIndicatorLayout = "_cd1yys1-3-1-3 _13lzg4k0-3-1-3";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-1-3 _13lzg4k0-3-1-3";
+var datapointIndicatorLayout = "_cd1yys1-3-2-0 _13lzg4k0-3-2-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-2-0 _13lzg4k0-3-2-0";

package/charts/xy-chart/components/overlay/utils/calculate-crosshair-coordinates.d.ts

@@ -20,6 +20,7 @@ export interface CalculateCrosshairCoordinatesInput {
     yRelAccessor: ((value: number) => number) | undefined;
     isArea: boolean;
     isHorizontal: boolean;
+    isStacked: boolean | undefined;
 }
 /**
  * Calculates crosshair coordinates for a datapoint on the chart.
@@ -28,5 +29,5 @@ export interface CalculateCrosshairCoordinatesInput {
  * @param input - Coordinate calculation parameters
  * @returns Position to render the crosshair at
  */
-export declare function calculateCrosshairCoordinates({ tooltipContentSeries, datapoint, axisIdToScales, datapointMetadataMap, xRelAccessor, yRelAccessor, isArea, isHorizontal, }: Readonly<CalculateCrosshairCoordinatesInput>): Position;
+export declare function calculateCrosshairCoordinates({ tooltipContentSeries, datapoint, axisIdToScales, datapointMetadataMap, xRelAccessor, yRelAccessor, isArea, isHorizontal, isStacked, }: Readonly<CalculateCrosshairCoordinatesInput>): Position;
 export {};

package/charts/xy-chart/components/overlay/utils/calculate-crosshair-coordinates.js

@@ -32,7 +32,8 @@ function calculateCrosshairCoordinates({
   xRelAccessor,
   yRelAccessor,
   isArea,
-  isHorizontal
+  isHorizontal,
+  isStacked
 }) {
   const xScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, tooltipContentSeries.xAxisId);
   const yScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, tooltipContentSeries.yAxisId);
@@ -41,7 +42,8 @@ function calculateCrosshairCoordinates({
     x = isHorizontal ? (0, import_area_accessors.x1Accessor)(
       xScale,
       datapointMetadataMap,
-      xRelAccessor
+      xRelAccessor,
+      isStacked
     )(datapoint) : (0, import_area_accessors.xAccessor)(xScale, xRelAccessor)(datapoint);
   } else {
     x = (0, import_dot_accessors.xAccessor)(
@@ -54,7 +56,8 @@ function calculateCrosshairCoordinates({
     y = isHorizontal ? (0, import_area_accessors.yAccessor)(yScale, yRelAccessor)(datapoint) : (0, import_area_accessors.y1Accessor)(
       yScale,
       datapointMetadataMap,
-      yRelAccessor
+      yRelAccessor,
+      isStacked
     )(datapoint);
   } else {
     y = (0, import_dot_accessors.yAccessor)(

package/charts/xy-chart/components/overlay/utils/get-selected-datapoints.js

@@ -38,7 +38,7 @@ var import_safe_get = require("../../../../core/utils/safe-get.js");
 var import_scale = require("../../../../core/utils/scale.js");
 var import_guards = require("../../../types/guards.js");
 var import_xy_chart_internals = require("../../../types/xy-chart-internals.js");
-var import_get_area_series_accessors = require("../../../utils/get-area-series-accessors.js");
+var import_get_linear_accessors = require("../../../utils/get-linear-accessors.js");
 var import_get_scale = require("../../../utils/get-scale.js");
 var import_type_guards = require("../../../utils/type-guards.js");
 var import_validation_datapoint = require("../../../utils/validation-datapoint.js");
@@ -321,29 +321,21 @@ function getAreaSeriesSelection(series, ctx) {
     xRelAccessor,
     yRelAccessor
   } = ctx;
-  const { variant, orientation, name, isStacked } = (0, import_safe_get.safeGet)(
-    areaSeriesToMetadata,
-    series
-  );
-  const isBand = variant === "band";
-  const isHorizontal = orientation === "horizontal";
+  const { name } = (0, import_safe_get.safeGet)(areaSeriesToMetadata, series);
   const [yMin, yMax] = yRange;
-  const [xAreaAccessor, yAreaAccessor] = (0, import_get_area_series_accessors.getAreaAccessors)(
-    isHorizontal,
-    isBand,
-    xScale,
-    yScale,
+  const { xAccessor: xAreaAccessor, yAccessor: yAreaAccessor } = (0, import_get_linear_accessors.getLinearAccessors)(
+    import_xy_chart_internals.AREA_VARIANT,
+    (0, import_safe_get.safeGet)(areaSeriesToMetadata, series),
     datapointMetadataMap,
     xRelAccessor,
-    yRelAccessor,
-    isStacked
+    yRelAccessor
   );
   const filteredData = series.data.filter((datapoint) => {
     if (!isDefined(datapoint)) {
       return false;
     }
-    const xCoord = xAreaAccessor(datapoint);
-    const yCoord = yAreaAccessor(datapoint);
+    const xCoord = xAreaAccessor(xScale)(datapoint);
+    const yCoord = yAreaAccessor(yScale)(datapoint);
     return yCoord >= yMin && yCoord <= yMax && xCoord >= selection.start && xCoord <= selection.end;
   });
   return {