@dynatrace/strato-components 3.1.1 → 3.2.0

package/charts/xy-chart/components/overlay/utils/serialize-linear-series-values.js

@@ -23,12 +23,11 @@ __export(serialize_linear_series_values_exports, {
 module.exports = __toCommonJS(serialize_linear_series_values_exports);
 var import_constants = require("../../../../core/components/data-point/constants.js");
 var import_safe_get = require("../../../../core/utils/safe-get.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_value_representation = require("../../../utils/value-representation.js");
-var import_displays = require("../../displays/index.js");
+var import_band_accessors = require("../../displays/band-accessors.js");
 function getYRangeMinMax(range) {
   let min = range[0];
   let max = range[0];
@@ -53,6 +52,35 @@ const idMap = {
   [import_xy_chart_internals.LINE_VARIANT]: import_xy_chart_internals.LINE_ID,
   [import_xy_chart_internals.AREA_VARIANT]: import_xy_chart_internals.AREA_ID
 };
+function serializeBandArea(meta, point, xScale, yScale, xRelAcc, yRelAcc, yMin, yMax) {
+  const coords = meta.orientation === "horizontal" ? [
+    {
+      x: (0, import_band_accessors.bandX0Accessor)(xScale, xRelAcc)(point.datapoint),
+      y: (0, import_band_accessors.bandY0Accessor)(yScale, yRelAcc)(point.datapoint)
+    },
+    {
+      x: (0, import_band_accessors.bandX1Accessor)(xScale, xRelAcc)(point.datapoint),
+      y: (0, import_band_accessors.bandY0Accessor)(yScale, yRelAcc)(point.datapoint)
+    }
+  ] : [
+    {
+      x: (0, import_band_accessors.bandX0Accessor)(xScale, xRelAcc)(point.datapoint),
+      y: (0, import_band_accessors.bandY0Accessor)(yScale, yRelAcc)(point.datapoint)
+    },
+    {
+      x: (0, import_band_accessors.bandX0Accessor)(xScale, xRelAcc)(point.datapoint),
+      y: (0, import_band_accessors.bandY1Accessor)(yScale, yRelAcc)(point.datapoint)
+    }
+  ];
+  const visiblePoints = coords.filter(({ y }) => y >= yMin && y <= yMax).map(({ x, y }) => ({
+    id: import_xy_chart_internals.AREA_ID,
+    x: x + import_constants.POINT_OVERLAY_PADDING,
+    y: y + import_constants.POINT_OVERLAY_PADDING,
+    color: meta.color,
+    shape: void 0
+  }));
+  return visiblePoints.length > 0 ? visiblePoints : null;
+}
 const serializeLinearSeriesValues = (linearMetadata, axisIdToScales, axisIdToScaleDomain, datapointMetadataMap) => (point) => {
   const meta = resolveMetadata(linearMetadata, point.series);
   if (!meta) {
@@ -63,76 +91,41 @@ const serializeLinearSeriesValues = (linearMetadata, axisIdToScales, axisIdToSca
   if (!xScale || !yScale) {
     return null;
   }
-  if ((0, import_guards.isDotOrLineSelection)(point)) {
-    const accessors = import_displays.LINEAR_ACCESSORS[point.series.type];
-    const { xAxis, yAxis } = meta;
-    const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
-    const yRelAccessor = (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain);
-    const xPos = accessors.x(xScale, xRelAccessor)(point.datapoint) + import_constants.POINT_OVERLAY_PADDING;
-    const yBase = accessors.y(yScale, yRelAccessor)(point.datapoint);
-    const [yMin, yMax] = getYRangeMinMax(yScale.range());
-    if (yBase < yMin || yBase > yMax) {
-      return null;
-    }
-    const id = idMap[point.series.type];
-    const shape = point.series.type === import_xy_chart_internals.DOT_VARIANT ? meta.shape : void 0;
-    return {
-      id,
-      x: xPos,
-      y: yBase + import_constants.POINT_OVERLAY_PADDING,
-      color: meta.color,
-      shape
-    };
-  } else {
-    const areaMeta = meta;
-    const { xAxis, yAxis, variant, orientation, isStacked } = areaMeta;
-    const isBand = variant === "band";
-    const isHorizontal = orientation === "horizontal";
-    const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
-    const yRelAccessor = (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain);
-    const [yMin, yMax] = getYRangeMinMax(yScale.range());
-    if (isBand) {
-      const [[x0Accessor, y0Accessor], [x1Accessor, y1Accessor]] = (0, import_get_area_series_accessors.getBandAccessors)(
-        isHorizontal,
-        xScale,
-        yScale,
-        xRelAccessor,
-        yRelAccessor
-      );
-      const coords = [
-        { x: x0Accessor(point.datapoint), y: y0Accessor(point.datapoint) },
-        { x: x1Accessor(point.datapoint), y: y1Accessor(point.datapoint) }
-      ];
-      const points = coords.filter(({ y }) => y >= yMin && y <= yMax).map(({ x, y }) => ({
-        id: import_xy_chart_internals.AREA_ID,
-        x: x + import_constants.POINT_OVERLAY_PADDING,
-        y: y + import_constants.POINT_OVERLAY_PADDING,
-        color: areaMeta.color,
-        shape: void 0
-      }));
-      return points.length > 0 ? points : null;
-    }
-    const [xAreaAccessor, yAreaAccessor] = (0, import_get_area_series_accessors.getAreaAccessors)(
-      isHorizontal,
-      false,
+  const { xAxis, yAxis } = meta;
+  const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
+  const yRelAccessor = (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain);
+  const { xAccessor, yAccessor } = (0, import_get_linear_accessors.getLinearAccessors)(
+    point.series.type,
+    meta,
+    datapointMetadataMap,
+    xRelAccessor,
+    yRelAccessor
+  );
+  const yBase = yAccessor(yScale)(point.datapoint);
+  const [yMin, yMax] = getYRangeMinMax(yScale.range());
+  if (yBase < yMin || yBase > yMax) {
+    return null;
+  }
+  const areaMeta = point.series.type === import_xy_chart_internals.AREA_VARIANT ? meta : void 0;
+  if (areaMeta?.variant === import_xy_chart_internals.BAND_VARIANT) {
+    return serializeBandArea(
+      areaMeta,
+      point,
       xScale,
       yScale,
-      datapointMetadataMap,
       xRelAccessor,
       yRelAccessor,
-      isStacked
+      yMin,
+      yMax
     );
-    const xCoord = xAreaAccessor(point.datapoint);
-    const yCoord = yAreaAccessor(point.datapoint);
-    if (yCoord < yMin || yCoord > yMax) {
-      return null;
-    }
-    return {
-      id: import_xy_chart_internals.AREA_ID,
-      x: xCoord + import_constants.POINT_OVERLAY_PADDING,
-      y: yCoord + import_constants.POINT_OVERLAY_PADDING,
-      color: areaMeta.color,
-      shape: void 0
-    };
   }
+  const xPos = xAccessor(xScale)(point.datapoint);
+  return {
+    id: idMap[point.series.type],
+    x: xPos + import_constants.POINT_OVERLAY_PADDING,
+    y: yBase + import_constants.POINT_OVERLAY_PADDING,
+    color: meta.color,
+    // shape is only defined for dot series
+    shape: point.series.type === import_xy_chart_internals.DOT_VARIANT ? meta.shape : void 0
+  };
 };

package/charts/xy-chart/components/selection/TooltipHeader.css

@@ -1,7 +1,7 @@
-._biijte0-3-1-1 {
+._biijte0-3-2-0 {
   margin-bottom: var(--dt-spacings-size-2, 2px);
 }
-._biijte1-3-1-1 {
+._biijte1-3-2-0 {
   width: auto;
   white-space: nowrap;
   overflow: hidden;

package/charts/xy-chart/components/selection/TooltipHeader.sty.js

@@ -23,5 +23,5 @@ __export(TooltipHeader_css_exports, {
 });
 module.exports = __toCommonJS(TooltipHeader_css_exports);
 var import_TooltipHeader_css_ts_vanilla = require("./TooltipHeader.css");
-var formattedTimeframe = "_biijte1-3-1-1";
-var headerItem = "_biijte0-3-1-1";
+var formattedTimeframe = "_biijte1-3-2-0";
+var headerItem = "_biijte0-3-2-0";

package/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-1-1 {
+._1mfu0sw0-3-2-0 {
   z-index: 2;
 }

package/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.sty.js

@@ -23,4 +23,4 @@ __export(XYChartThresholdIndicators_css_exports, {
 module.exports = __toCommonJS(XYChartThresholdIndicators_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartThresholdIndicators_css_ts_vanilla = require("./XYChartThresholdIndicators.css");
-var thresholdPlot = "_1mfu0sw0-3-1-1 _13lzg4k0-3-1-1";
+var thresholdPlot = "_1mfu0sw0-3-2-0 _13lzg4k0-3-2-0";

package/charts/xy-chart/components/toolbar/XYChartToolbar.js

@@ -29,6 +29,7 @@ var import_PanButton = require("./PanButton.js");
 var import_ResetButton = require("./ResetButton.js");
 var import_ZoomInOutButtons = require("./ZoomInOutButtons.js");
 var import_ZoomModeButton = require("./ZoomModeButton.js");
+var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_ChartToolbarRenderer = require("../../../core/components/toolbar/ChartToolbarRenderer.js");
 var import_get_menu_trigger_display_mode = require("../../../core/components/toolbar/utils/get-menu-trigger-display-mode.js");
 var import_get_menu_trigger_icon = require("../../../core/components/toolbar/utils/get-menu-trigger-icon.js");
@@ -46,7 +47,8 @@ const XYChartToolbar = ({
   onMouseLeave,
   handlerRef
 }) => {
-  const { collapsed, placement, hidden, intents } = (0, import_useToolbar.useToolbar)();
+  const toolbarContext = (0, import_useToolbar.useToolbar)();
+  const { collapsed, placement, hidden, intents } = toolbarContext;
   const interactionMode = (0, import_selectors.useInteractionModeState)();
   const { axesMetadata } = (0, import_useXYChartData.useXYChartData)();
   const intl = (0, import_react_intl.useIntl)();
@@ -77,6 +79,7 @@ const XYChartToolbar = ({
   const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents;
   const showMenuToolbarButton = isDownloadEnabled && !!intents?.length;
   const onClose = () => selectionAreaRef ? selectionAreaRef.current?.focus() : void 0;
+  const behaviorTrackingProps = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(toolbarContext)[0];
   return !hidden ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ChartToolbarRenderer.ChartToolbarRenderer,
     {
@@ -97,6 +100,7 @@ const XYChartToolbar = ({
       intents,
       handleDownloadDataToolbar,
       onClose,
+      ...behaviorTrackingProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExploreButton.ExploreButton, { placement: exploreBtnPlace }),

package/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.css

@@ -1,4 +1,4 @@
-._fnoz5j0-3-1-1 {
+._fnoz5j0-3-2-0 {
   min-width: 225px;
   max-width: 300px;
 }

package/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.d.ts

@@ -5,4 +5,4 @@ import { type ChartTooltipProps } from '../../../../core/components/tooltip/Char
  */
 export declare const XYChartTooltipTemplate: (props: ChartTooltipProps & {
     children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+} & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;

package/charts/xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.sty.js

@@ -22,4 +22,4 @@ __export(XYChartTooltipTemplate_css_exports, {
 });
 module.exports = __toCommonJS(XYChartTooltipTemplate_css_exports);
 var import_XYChartTooltipTemplate_css_ts_vanilla = require("./XYChartTooltipTemplate.css");
-var body = "_fnoz5j0-3-1-1";
+var body = "_fnoz5j0-3-2-0";

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-1-1 {
+._1u58xor0-3-2-0 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-1-1 {
+._1u58xor1-3-2-0 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-1-1::after {
+._1u58xor1-3-2-0::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-1-1 {
+._1u58xor2-3-2-0 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-1-1 {
+._1u58xor3-3-2-0 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -25,7 +25,7 @@ __export(tooltip_styles_css_exports, {
 });
 module.exports = __toCommonJS(tooltip_styles_css_exports);
 var import_tooltip_styles_css_ts_vanilla = require("./tooltip-styles.css");
-var axisName = "_1u58xor1-3-1-1";
-var axisValue = "_1u58xor2-3-1-1";
-var duration = "_1u58xor3-3-1-1";
-var wrapper = "_1u58xor0-3-1-1";
+var axisName = "_1u58xor1-3-2-0";
+var axisValue = "_1u58xor2-3-2-0";
+var duration = "_1u58xor3-3-2-0";
+var wrapper = "_1u58xor0-3-2-0";

package/charts/xy-chart/layout/XYChartCanvasPlot.d.ts

@@ -4,5 +4,5 @@ interface XYChartCanvasPlotProps {
     children: ReactNode;
     shifted?: boolean;
 }
-export declare const XYChartCanvasPlot: (props: XYChartCanvasPlotProps & import("react").RefAttributes<CanvasRef>) => React.ReactElement | null;
+export declare const XYChartCanvasPlot: (props: XYChartCanvasPlotProps & import("react").RefAttributes<CanvasRef>) => import("react").ReactElement | null;
 export {};

package/charts/xy-chart/layout/XYChartGenericCanvasLayout.d.ts

@@ -4,5 +4,5 @@ interface XYChartGenericCanvasProps {
     seriesWithDatapoints: XYChartSeriesWithDatapoints[];
     rectFilterCallback?: (d: RectDatapointInternal) => boolean;
 }
-export declare const XYChartGenericCanvasLayout: (props: XYChartGenericCanvasProps & import("react").RefAttributes<CanvasRef[]>) => React.ReactElement | null;
+export declare const XYChartGenericCanvasLayout: (props: XYChartGenericCanvasProps & import("react").RefAttributes<CanvasRef[]>) => import("react").ReactElement | null;
 export {};

package/charts/xy-chart/layout/XYChartLayout.css

@@ -1,10 +1,10 @@
-._1ru1qe70-3-1-1 {
+._1ru1qe70-3-2-0 {
   pointer-events: none;
   width: 100%;
   height: 100%;
   z-index: 1;
 }
-._1ru1qe71-3-1-1 {
+._1ru1qe71-3-2-0 {
   top: -5.5px;
   left: -5.5px;
   width: calc(100% + 11px);

package/charts/xy-chart/layout/XYChartLayout.sty.js

@@ -24,5 +24,5 @@ __export(XYChartLayout_css_exports, {
 module.exports = __toCommonJS(XYChartLayout_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartLayout_css_ts_vanilla = require("./XYChartLayout.css");
-var datapointCanvasPlot = "_1ru1qe71-3-1-1 _13lzg4k0-3-1-1 _1ru1qe70-3-1-1";
-var rectangleCanvasPlot = "_13lzg4k0-3-1-1 _1ru1qe70-3-1-1";
+var datapointCanvasPlot = "_1ru1qe71-3-2-0 _13lzg4k0-3-2-0 _1ru1qe70-3-2-0";
+var rectangleCanvasPlot = "_13lzg4k0-3-2-0 _1ru1qe70-3-2-0";

package/charts/xy-chart/processing-strategies/strategies/groupable-series.d.ts

@@ -19,7 +19,7 @@ export declare class GroupableSeriesHelper {
     processGroupDomain(datapoint: BarDatapoint, chartOrientation: 'vertical' | 'horizontal', xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): void;
     /**
      * Returns the total bin domain for a given group key.
-     * The bin domain is the maximum of total positive and total negative values.
+     * The bin domain is the total height of the group, including both positive and negative values.
      * Note: totalNegative is already stored as an absolute value.
      */
     getGroupBinDomain(groupKey: string): number | undefined;

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

@@ -56,7 +56,7 @@ class GroupableSeriesHelper {
   }
   /**
    * Returns the total bin domain for a given group key.
-   * The bin domain is the maximum of total positive and total negative values.
+   * The bin domain is the total height of the group, including both positive and negative values.
    * Note: totalNegative is already stored as an absolute value.
    */
   getGroupBinDomain(groupKey) {
@@ -64,7 +64,7 @@ class GroupableSeriesHelper {
     if (!groupDomainObj) {
       return void 0;
     }
-    return Math.max(groupDomainObj.totalPositive, groupDomainObj.totalNegative);
+    return groupDomainObj.totalPositive + groupDomainObj.totalNegative;
   }
   /**
    * Processes a datapoint for grouping, calculating the bin domain metadata.

package/charts/xy-chart/processing-strategies/strategies/stackable-series.d.ts

@@ -18,7 +18,7 @@ export declare class StackableSeriesHelper {
     processStackDomain(datapoint: BarDatapoint | AreaDatapoint, chartOrientation: 'vertical' | 'horizontal', xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal): void;
     /**
      * Returns the total bin domain for a given stack key.
-     * The bin domain is the maximum of total positive and total negative values.
+     * The bin domain is the total height of the stack, including both positive and negative values.
      * Note: totalNegative is already stored as an absolute value.
      */
     getStackBinDomain(stackKey: string): number | undefined;

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

@@ -57,7 +57,7 @@ class StackableSeriesHelper {
   }
   /**
    * Returns the total bin domain for a given stack key.
-   * The bin domain is the maximum of total positive and total negative values.
+   * The bin domain is the total height of the stack, including both positive and negative values.
    * Note: totalNegative is already stored as an absolute value.
    */
   getStackBinDomain(stackKey) {
@@ -65,7 +65,7 @@ class StackableSeriesHelper {
     if (!domainData) {
       return void 0;
     }
-    return Math.max(domainData.totalPositive, domainData.totalNegative);
+    return domainData.totalPositive + domainData.totalNegative;
   }
   /**
    * Processes a datapoint for stacking, calculating the offset and updating stack groups.

package/charts/xy-chart/providers/XYChartAxesTicksProvider.d.ts

@@ -1,2 +1,13 @@
 import { type PropsWithChildren } from 'react';
+import type { TickAxis } from '../../core/utils/formatter-by-ticks.js';
+import type { AnyXYChartScale, AxisIdToFormatter, XYChartAxisInternal } from '../types/xy-chart-internals.js';
+declare function getFormatter(numTicks: number, axisIdToFormatter: AxisIdToFormatter, config: XYChartAxisInternal, scale?: AnyXYChartScale): import("../../index.js")._FormatterWithPrecision;
+/**
+ * @internal
+ * Resolves the tick data for a single axis. Uses nice unit ticks when the axis
+ * is linear with a unit-converting formatter; otherwise falls back to the
+ * standard formatted-ticks path.
+ */
+export declare function getTicksForAxis(config: XYChartAxisInternal | undefined, numTicks: number, scale: AnyXYChartScale | undefined, formatter: ReturnType<typeof getFormatter> | undefined, availableSize: number, orientation: 'horizontal' | 'vertical'): TickAxis;
 export declare function XYChartAxesTicksProvider({ children, }: Readonly<PropsWithChildren>): import("react/jsx-runtime.js").JSX.Element;
+export {};

package/charts/xy-chart/providers/XYChartAxesTicksProvider.js

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var XYChartAxesTicksProvider_exports = {};
 __export(XYChartAxesTicksProvider_exports, {
-  XYChartAxesTicksProvider: () => XYChartAxesTicksProvider
+  XYChartAxesTicksProvider: () => XYChartAxesTicksProvider,
+  getTicksForAxis: () => getTicksForAxis
 });
 module.exports = __toCommonJS(XYChartAxesTicksProvider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -31,10 +32,27 @@ var import_XYChartAxesTicks_context = require("../context/axes/XYChartAxesTicks.
 var import_useAxesFormatter = require("../hooks/useAxesFormatter.js");
 var import_useVisibleAxesConfig = require("../hooks/useVisibleAxesConfig.js");
 var import_useVisibleAxesScales = require("../hooks/useVisibleAxesScales.js");
+var import_generate_nice_unit_ticks = require("../utils/generate-nice-unit-ticks.js");
 var import_get_ticks_formatted_by_config = require("../utils/get-ticks-formatted-by-config.js");
 function getFormatter(numTicks, axisIdToFormatter, config, scale) {
   return config?.isRelative ? (0, import_formatter_by_ticks.getFormatterByTicks)(numTicks, scale, import_units.units.percentage.percent) : (0, import_safe_get.safeGet)(axisIdToFormatter, config.id);
 }
+function getTicksForAxis(config, numTicks, scale, formatter, availableSize, orientation) {
+  if ((0, import_generate_nice_unit_ticks.shouldUseNiceUnitTicks)(config) && scale !== void 0 && formatter !== void 0) {
+    const domain = scale.domain();
+    const niceTicks = (0, import_generate_nice_unit_ticks.computeNiceUnitTicks)(
+      domain,
+      config.formatter,
+      availableSize,
+      orientation,
+      formatter
+    );
+    if (niceTicks !== null) {
+      return niceTicks;
+    }
+  }
+  return (0, import_get_ticks_formatted_by_config.getTicksFormattedByConfig)(config, numTicks, scale, formatter);
+}
 function XYChartAxesTicksProvider({
   children
 }) {
@@ -47,11 +65,13 @@ function XYChartAxesTicksProvider({
   const topScale = scales.top;
   const topConfig = config.top;
   const topFormatter = topConfig ? getFormatter(horizontalNumTicks, axisIdToFormatter, topConfig, topScale) : void 0;
-  const topTicks = (0, import_get_ticks_formatted_by_config.getTicksFormattedByConfig)(
+  const topTicks = getTicksForAxis(
     topConfig,
     horizontalNumTicks,
     topScale,
-    topFormatter
+    topFormatter,
+    width,
+    "horizontal"
   );
   const bottomScale = scales.bottom;
   const bottomConfig = config.bottom;
@@ -61,29 +81,35 @@ function XYChartAxesTicksProvider({
     bottomConfig,
     bottomScale
   ) : void 0;
-  const bottomTicks = (0, import_get_ticks_formatted_by_config.getTicksFormattedByConfig)(
+  const bottomTicks = getTicksForAxis(
     bottomConfig,
     horizontalNumTicks,
     bottomScale,
-    bottomFormatter
+    bottomFormatter,
+    width,
+    "horizontal"
   );
   const leftScale = scales.left;
   const leftConfig = config.left;
   const leftFormatter = leftConfig ? getFormatter(verticalNumTicks, axisIdToFormatter, leftConfig, leftScale) : void 0;
-  const leftTicks = (0, import_get_ticks_formatted_by_config.getTicksFormattedByConfig)(
+  const leftTicks = getTicksForAxis(
     leftConfig,
     verticalNumTicks,
     leftScale,
-    leftFormatter
+    leftFormatter,
+    height,
+    "vertical"
   );
   const rightScale = scales.right;
   const rightConfig = config.right;
   const rightFormatter = rightConfig ? getFormatter(verticalNumTicks, axisIdToFormatter, rightConfig, rightScale) : void 0;
-  const rightTicks = (0, import_get_ticks_formatted_by_config.getTicksFormattedByConfig)(
+  const rightTicks = getTicksForAxis(
     rightConfig,
     verticalNumTicks,
     rightScale,
-    rightFormatter
+    rightFormatter,
+    height,
+    "vertical"
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_XYChartAxesTicks_context.XYChartAxesTicksContext.Provider,

package/charts/xy-chart/providers/XYChartOverlayPerformanceProvider.js

@@ -46,7 +46,8 @@ const XYChartOverlayPerformanceProvider = ({
     ) : (0, import_query_get_closest_point.buildQueryGetClosestPoint)(
       axisIdToScales,
       seriesToMetadata,
-      datapointMetadataMap
+      datapointMetadataMap,
+      axisIdToScaleDomain
     );
     const queryHovered = (0, import_query_hovered.buildQueryHovered)(
       axisIdToScales,

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

@@ -4,7 +4,7 @@ import type { XYAxisTypeLinear, XYAxisTypeLog } from './axis.js';
 import type { XYChartAreaSeriesProps, XYChartBarSeriesProps, XYChartCategoricalAxisProps, XYChartChartLegendProps, XYChartCustomTooltipProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartProps, XYChartRectSeriesProps, XYChartSelectConfig, XYChartSeriesBaseProps, XYChartThresholdIndicatorProps, XYChartTimeAxisProps, XYChartToolbarConfigProps, XYChartXAxisProps, XYChartYAxisProps, XYShapeColorPaletteProp } from './xy-chart-props.js';
 import type { XYChartAreaSeries, XYChartBarSeries, XYChartDotSeries, XYChartLineSeries, XYChartRectSeries, AreaDatapoint, BarDatapoint, BarSeriesVariant, BaseDatapoint, DotDatapoint, LineDatapoint, SeriesCurve, XYAccessorDataTypes, XYChartAreaSeriesActionItem, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
 import type { TickLabelLayout } from '../../core/components/axes/types.js';
-import type { Orientation, PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';
+import { type Orientation, type PointsDisplay } from '../../core/components/canvas/types/canvas-shape.js';
 import type { PointShapeType } from '../../core/components/shape/type.js';
 import type { THRESHOLD_BAR_THICKNESS } from '../../core/components/threshold-bar/types/constants.js';
 import { ChartUnit } from '../../core/types/chart-unit.js';
@@ -377,13 +377,18 @@ export declare const DOT_VARIANT = "dot";
 export declare const LINE_VARIANT = "line";
 export declare const BAR_VARIANT = "bar";
 export declare const AREA_VARIANT = "area";
+export declare const BAND_VARIANT = "band";
+export declare const AREA_HORIZONTAL: "areahorizontal";
+export declare const AREA_VERTICAL: "areavertical";
+export declare const BAND_HORIZONTAL: "bandhorizontal";
+export declare const BAND_VERTICAL: "bandvertical";
 export declare const DOT_ID = "dot_id";
 export declare const LINE_ID = "line_id";
 export declare const AREA_ID = "area_id";
 export declare const RECT_ID = "rect_id";
 export declare const BAR_ID = "bar_id";
 export type LegendType = typeof RANGE_LEGEND_TYPE | typeof CATEGORICAL_LEGEND_TYPE;
-export type SeriesVariantType = typeof RECT_VARIANT | typeof DOT_VARIANT | typeof LINE_VARIANT | typeof BAR_VARIANT | typeof AREA_VARIANT;
+export type SeriesVariantType = typeof RECT_VARIANT | typeof DOT_VARIANT | typeof LINE_VARIANT | typeof BAR_VARIANT | typeof AREA_VARIANT | typeof AREA_HORIZONTAL | typeof AREA_VERTICAL | typeof BAND_HORIZONTAL | typeof BAND_VERTICAL;
 /**
  * @internal
  *

package/charts/xy-chart/types/xy-chart-internals.js

@@ -18,8 +18,13 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var xy_chart_internals_exports = {};
 __export(xy_chart_internals_exports, {
+  AREA_HORIZONTAL: () => AREA_HORIZONTAL,
   AREA_ID: () => AREA_ID,
   AREA_VARIANT: () => AREA_VARIANT,
+  AREA_VERTICAL: () => AREA_VERTICAL,
+  BAND_HORIZONTAL: () => BAND_HORIZONTAL,
+  BAND_VARIANT: () => BAND_VARIANT,
+  BAND_VERTICAL: () => BAND_VERTICAL,
   BAR_ID: () => BAR_ID,
   BAR_VARIANT: () => BAR_VARIANT,
   CATEGORICAL_LEGEND_TYPE: () => CATEGORICAL_LEGEND_TYPE,
@@ -32,6 +37,7 @@ __export(xy_chart_internals_exports, {
   RECT_VARIANT: () => RECT_VARIANT
 });
 module.exports = __toCommonJS(xy_chart_internals_exports);
+var import_canvas_shape = require("../../core/components/canvas/types/canvas-shape.js");
 const RANGE_LEGEND_TYPE = "range";
 const CATEGORICAL_LEGEND_TYPE = "categorical";
 const RECT_VARIANT = "rect";
@@ -39,6 +45,11 @@ const DOT_VARIANT = "dot";
 const LINE_VARIANT = "line";
 const BAR_VARIANT = "bar";
 const AREA_VARIANT = "area";
+const BAND_VARIANT = "band";
+const AREA_HORIZONTAL = `${AREA_VARIANT}${import_canvas_shape.ORIENTATION_HORIZONTAL}`;
+const AREA_VERTICAL = `${AREA_VARIANT}${import_canvas_shape.ORIENTATION_VERTICAL}`;
+const BAND_HORIZONTAL = `${BAND_VARIANT}${import_canvas_shape.ORIENTATION_HORIZONTAL}`;
+const BAND_VERTICAL = `${BAND_VARIANT}${import_canvas_shape.ORIENTATION_VERTICAL}`;
 const DOT_ID = "dot_id";
 const LINE_ID = "line_id";
 const AREA_ID = "area_id";

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

@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
 import type { ConvertibleUnit, FormatDateOptions, FormatOptions, Unit } from '@dynatrace-sdk/units';
-import type { XYChartAreaSeries, XYChartBarSeries, XYChartDotSeries, XYChartLineSeries, XYChartRectSeries, BAR_VARIANT_GROUP, BAR_VARIANT_SINGLE, BAR_VARIANT_STACK, BarSeriesVariant, SeriesCurve, XYChartAreaSeriesActionItem, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartTooltipPayload, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
+import type { BAR_VARIANT_GROUP, BAR_VARIANT_SINGLE, BAR_VARIANT_STACK, BarSeriesVariant, SeriesCurve, XYChartAreaSeries, XYChartAreaSeriesActionItem, XYChartBarSeries, XYChartBarSeriesActionItem, XYChartColorPalette, XYChartData, XYChartDotSeries, XYChartDotSeriesActionItem, XYChartLineSeries, XYChartLineSeriesActionItem, XYChartRectSeries, XYChartRectSeriesActionItem, XYChartThresholdDynamicData, XYChartThresholdStaticData, XYChartTooltipPayload, XYChartXAxisPosition, XYChartYAxisPosition } from './xy-chart.js';
 import { IntentProps } from '../../../core/slots/Intent/Intent.js';
+import type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
@@ -25,7 +26,7 @@ import type { XYChartSelectProps } from '../slots/Select.js';
  * Props for the xy chart.
  * @public
  */
-export interface XYChartProps extends StylingProps, MaskingProps {
+export interface XYChartProps extends StylingProps, MaskingProps, BehaviorTrackingProps {
     /**
      * Data object for the xy chart.
      */
@@ -386,7 +387,7 @@ export type XYChartAxisProps = XYChartAxisBaseProps & (XYChartNumericalAxisProps
  * Props definition for the XYChart toolbar
  * @internal
  */
-export type XYChartToolbar = Omit<XYChartToolbarConfigProps, 'intents'> & {
+export type XYChartToolbar = Omit<XYChartToolbarConfigProps, 'intents'> & BehaviorTrackingProps & {
     intents?: Array<IntentProps>;
 };
 /**
@@ -644,7 +645,7 @@ export type XYChartToolbarProps = Omit<ChartToolbarConfig, 'downloadData'> & {
  * Props for the XYChart.Toolbar slot component
  * @public
  */
-export interface XYChartToolbarSlotProps extends Omit<XYChartToolbarConfigProps, 'collapsed'> {
+export interface XYChartToolbarSlotProps extends Omit<XYChartToolbarConfigProps, 'collapsed'>, BehaviorTrackingProps {
     /**
      * When enabled show the toolbar in collapsed state
      * @deprecated - This key will be removed in a future release