@dynatrace/strato-components 3.0.1 → 3.1.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/utils/serialize-linear-series-values.ts"],
-  "sourcesContent": ["import { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport type { PointShapeType } from '../../../../core/components/shape/type.js';\nimport type { DataPoint } from '../../../../core/types/data-point.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { AxisIdToScales } from '../../../context/XYChartScales.context.js';\nimport {\n  DOT_ID,\n  DOT_VARIANT,\n  LINE_ID,\n  LINE_VARIANT,\n  type AxisIdToScaleDomain,\n  type DotMetadata,\n  type DotSeriesWithDatapoints,\n  type LineMetadata,\n  type LineSeriesWithDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport type { XYChartSelectionLinearMetadata } from '../../../types/xy-chart-selection.js';\nimport { getCurrentScale } from '../../../utils/get-scale.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { LINEAR_ACCESSORS } from '../../displays/index.js';\n\ntype AnySeries = DotSeriesWithDatapoints | LineSeriesWithDatapoints;\ntype AnyMetadata = DotMetadata | LineMetadata;\n\ntype MetadataGetter =\n  | Map<AnySeries, AnyMetadata>\n  | ((series: AnySeries) => AnyMetadata | undefined);\n\ninterface HighlightedLinearPoint extends DataPoint {\n  shape?: PointShapeType;\n}\n\nfunction getYRangeMinMax(range: number[]) {\n  let min = range[0];\n  let max = range[0];\n  for (let i = 1; i < range.length; i++) {\n    const v = range[i];\n    if (v < min) {\n      min = v;\n    } else if (v > max) {\n      max = v;\n    }\n  }\n  return min < max ? [min, max] : [max, min];\n}\n\nfunction resolveMetadata(\n  getter: MetadataGetter,\n  series: AnySeries,\n): AnyMetadata | undefined {\n  if (typeof getter === 'function') {\n    return getter(series);\n  }\n  return safeGet(getter as Map<AnySeries, AnyMetadata>, series);\n}\n\nconst idMap: Record<string, string> = {\n  [DOT_VARIANT]: DOT_ID,\n  [LINE_VARIANT]: LINE_ID,\n};\n\nexport const serializeLinearSeriesValues =\n  (\n    linearMetadata: MetadataGetter,\n    axisIdToScales: AxisIdToScales,\n    axisIdToScaleDomain: AxisIdToScaleDomain,\n  ) =>\n  (point: XYChartSelectionLinearMetadata): HighlightedLinearPoint | null => {\n    const meta = resolveMetadata(linearMetadata, point.series as AnySeries);\n    if (!meta) {\n      return null;\n    }\n\n    const xScale = getCurrentScale(axisIdToScales, point.series.xAxisId);\n    const yScale = getCurrentScale(axisIdToScales, point.series.yAxisId);\n\n    const accessors = LINEAR_ACCESSORS[point.series.type];\n\n    const { xAxis, yAxis } = meta;\n    const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);\n    const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);\n\n    const xPos =\n      accessors.x(xScale, xRelAccessor)(point.datapoint) +\n      POINT_OVERLAY_PADDING;\n    const yBase = accessors.y(yScale, yRelAccessor)(point.datapoint);\n\n    const [yMin, yMax] = getYRangeMinMax(yScale.range());\n    if (yBase < yMin || yBase > yMax) {\n      return null;\n    }\n\n    const id = idMap[point.series.type];\n\n    const shape =\n      point.series.type === DOT_VARIANT\n        ? (meta as DotMetadata).shape\n        : undefined;\n\n    return {\n      id,\n      x: xPos,\n      y: yBase + POINT_OVERLAY_PADDING,\n      color: meta.color,\n      shape,\n    };\n  };\n"],
-  "mappings": "AAAA,SAAS,6BAA6B;AAGtC,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAMK;AAEP,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAajC,SAAS,gBAAgB,OAAiB;AACxC,MAAI,MAAM,MAAM,CAAC;AACjB,MAAI,MAAM,MAAM,CAAC;AACjB,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,UAAM,IAAI,MAAM,CAAC;AACjB,QAAI,IAAI,KAAK;AACX,YAAM;AAAA,IACR,WAAW,IAAI,KAAK;AAClB,YAAM;AAAA,IACR;AAAA,EACF;AACA,SAAO,MAAM,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG;AAC3C;AAEA,SAAS,gBACP,QACA,QACyB;AACzB,MAAI,OAAO,WAAW,YAAY;AAChC,WAAO,OAAO,MAAM;AAAA,EACtB;AACA,SAAO,QAAQ,QAAuC,MAAM;AAC9D;AAEA,MAAM,QAAgC;AAAA,EACpC,CAAC,WAAW,GAAG;AAAA,EACf,CAAC,YAAY,GAAG;AAClB;AAEO,MAAM,8BACX,CACE,gBACA,gBACA,wBAEF,CAAC,UAAyE;AACxE,QAAM,OAAO,gBAAgB,gBAAgB,MAAM,MAAmB;AACtE,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,gBAAgB,gBAAgB,MAAM,OAAO,OAAO;AACnE,QAAM,SAAS,gBAAgB,gBAAgB,MAAM,OAAO,OAAO;AAEnE,QAAM,YAAY,iBAAiB,MAAM,OAAO,IAAI;AAEpD,QAAM,EAAE,OAAO,MAAM,IAAI;AACzB,QAAM,eAAe,YAAY,OAAO,mBAAmB;AAC3D,QAAM,eAAe,YAAY,OAAO,mBAAmB;AAE3D,QAAM,OACJ,UAAU,EAAE,QAAQ,YAAY,EAAE,MAAM,SAAS,IACjD;AACF,QAAM,QAAQ,UAAU,EAAE,QAAQ,YAAY,EAAE,MAAM,SAAS;AAE/D,QAAM,CAAC,MAAM,IAAI,IAAI,gBAAgB,OAAO,MAAM,CAAC;AACnD,MAAI,QAAQ,QAAQ,QAAQ,MAAM;AAChC,WAAO;AAAA,EACT;AAEA,QAAM,KAAK,MAAM,MAAM,OAAO,IAAI;AAElC,QAAM,QACJ,MAAM,OAAO,SAAS,cACjB,KAAqB,QACtB;AAEN,SAAO;AAAA,IACL;AAAA,IACA,GAAG;AAAA,IACH,GAAG,QAAQ;AAAA,IACX,OAAO,KAAK;AAAA,IACZ;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { POINT_OVERLAY_PADDING } from '../../../../core/components/data-point/constants.js';\nimport type { PointShapeType } from '../../../../core/components/shape/type.js';\nimport type { DataPoint } from '../../../../core/types/data-point.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { AxisIdToScales } from '../../../context/XYChartScales.context.js';\nimport { isDotOrLineSelection } from '../../../types/guards.js';\nimport {\n  DOT_ID,\n  DOT_VARIANT,\n  LINE_ID,\n  LINE_VARIANT,\n  AREA_ID,\n  AREA_VARIANT,\n  type AxisIdToScaleDomain,\n  type DotMetadata,\n  type DotSeriesWithDatapoints,\n  type LineMetadata,\n  type LineSeriesWithDatapoints,\n  type AreaMetadata,\n  type AreaSeriesWithDatapoints,\n  type MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport type { XYChartSelectionLinearMetadata } from '../../../types/xy-chart-selection.js';\nimport {\n  getAreaAccessors,\n  getBandAccessors,\n} from '../../../utils/get-area-series-accessors.js';\nimport { getCurrentScale } from '../../../utils/get-scale.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { LINEAR_ACCESSORS } from '../../displays/index.js';\n\ntype AnySeries =\n  | DotSeriesWithDatapoints\n  | LineSeriesWithDatapoints\n  | AreaSeriesWithDatapoints;\ntype AnyMetadata = DotMetadata | LineMetadata | AreaMetadata;\n\ntype MetadataGetter =\n  | Map<AnySeries, AnyMetadata>\n  | ((series: AnySeries) => AnyMetadata | undefined);\n\ninterface HighlightedLinearPoint extends DataPoint {\n  shape?: PointShapeType;\n}\n\nfunction getYRangeMinMax(range: number[]) {\n  let min = range[0];\n  let max = range[0];\n  for (let i = 1; i < range.length; i++) {\n    const v = range[i];\n    if (v < min) {\n      min = v;\n    } else if (v > max) {\n      max = v;\n    }\n  }\n  return min < max ? [min, max] : [max, min];\n}\n\nfunction resolveMetadata(\n  getter: MetadataGetter,\n  series: AnySeries,\n): AnyMetadata | undefined {\n  if (typeof getter === 'function') {\n    return getter(series);\n  }\n  return safeGet(getter as Map<AnySeries, AnyMetadata>, series);\n}\n\nconst idMap: Record<string, string> = {\n  [DOT_VARIANT]: DOT_ID,\n  [LINE_VARIANT]: LINE_ID,\n  [AREA_VARIANT]: AREA_ID,\n};\n\nexport const serializeLinearSeriesValues =\n  (\n    linearMetadata: MetadataGetter,\n    axisIdToScales: AxisIdToScales,\n    axisIdToScaleDomain: AxisIdToScaleDomain,\n    datapointMetadataMap: MapDatapoints,\n  ) =>\n  (\n    point: XYChartSelectionLinearMetadata,\n  ): HighlightedLinearPoint | HighlightedLinearPoint[] | null => {\n    const meta = resolveMetadata(linearMetadata, point.series as AnySeries);\n    if (!meta) {\n      return null;\n    }\n\n    const xScale = getCurrentScale(axisIdToScales, point.series.xAxisId);\n    const yScale = getCurrentScale(axisIdToScales, point.series.yAxisId);\n\n    if (!xScale || !yScale) {\n      return null;\n    }\n\n    if (isDotOrLineSelection(point)) {\n      const accessors = LINEAR_ACCESSORS[point.series.type];\n      const { xAxis, yAxis } = meta;\n      const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);\n      const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);\n\n      const xPos =\n        accessors.x(xScale, xRelAccessor)(point.datapoint) +\n        POINT_OVERLAY_PADDING;\n      const yBase = accessors.y(yScale, yRelAccessor)(point.datapoint);\n\n      const [yMin, yMax] = getYRangeMinMax(yScale.range());\n      if (yBase < yMin || yBase > yMax) {\n        return null;\n      }\n\n      const id = idMap[point.series.type];\n      const shape =\n        point.series.type === DOT_VARIANT\n          ? (meta as DotMetadata).shape\n          : undefined;\n\n      return {\n        id,\n        x: xPos,\n        y: yBase + POINT_OVERLAY_PADDING,\n        color: meta.color,\n        shape,\n      };\n    } else {\n      const areaMeta = meta as AreaMetadata;\n      const { xAxis, yAxis, variant, orientation, isStacked } = areaMeta;\n\n      const isBand = variant === 'band';\n      const isHorizontal = orientation === 'horizontal';\n\n      const xRelAccessor = relAccessor(xAxis, axisIdToScaleDomain);\n      const yRelAccessor = relAccessor(yAxis, axisIdToScaleDomain);\n\n      const [yMin, yMax] = getYRangeMinMax(yScale.range());\n\n      if (isBand) {\n        const [[x0Accessor, y0Accessor], [x1Accessor, y1Accessor]] =\n          getBandAccessors(\n            isHorizontal,\n            xScale,\n            yScale,\n            xRelAccessor,\n            yRelAccessor,\n          );\n\n        const coords = [\n          { x: x0Accessor(point.datapoint), y: y0Accessor(point.datapoint) },\n          { x: x1Accessor(point.datapoint), y: y1Accessor(point.datapoint) },\n        ];\n\n        const points: HighlightedLinearPoint[] = coords\n          .filter(({ y }) => y >= yMin && y <= yMax)\n          .map(({ x, y }) => ({\n            id: AREA_ID,\n            x: x + POINT_OVERLAY_PADDING,\n            y: y + POINT_OVERLAY_PADDING,\n            color: areaMeta.color,\n            shape: undefined,\n          }));\n\n        return points.length > 0 ? points : null;\n      }\n\n      const [xAreaAccessor, yAreaAccessor] = getAreaAccessors(\n        isHorizontal,\n        false,\n        xScale,\n        yScale,\n        datapointMetadataMap,\n        xRelAccessor,\n        yRelAccessor,\n        isStacked,\n      );\n      const xCoord = xAreaAccessor(point.datapoint);\n      const yCoord = yAreaAccessor(point.datapoint);\n\n      if (yCoord < yMin || yCoord > yMax) {\n        return null;\n      }\n\n      return {\n        id: AREA_ID,\n        x: xCoord + POINT_OVERLAY_PADDING,\n        y: yCoord + POINT_OVERLAY_PADDING,\n        color: areaMeta.color,\n        shape: undefined,\n      };\n    }\n  };\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

@@ -1,6 +1,6 @@
 import "./TooltipHeader.css";
-var formattedTimeframe = "_biijte1-3-0-1";
-var headerItem = "_biijte0-3-0-1";
+var formattedTimeframe = "_biijte1-3-1-0";
+var headerItem = "_biijte0-3-1-0";
 export {
   formattedTimeframe,
   headerItem

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/selection/TooltipHeader.css.ts"],
-  "sourcesContent": ["import './TooltipHeader.css';\nexport var formattedTimeframe = '_biijte1-3-0-1';\nexport var headerItem = '_biijte0-3-0-1';"],
+  "sourcesContent": ["import './TooltipHeader.css';\nexport var formattedTimeframe = '_biijte1-3-1-0';\nexport var headerItem = '_biijte0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,aAAa;",
   "names": []
 }

package/esm/charts/xy-chart/components/selection/XYChartSelectionArea.js

@@ -8,6 +8,7 @@ import { useSynchronizedSelection } from "../../../core/components/shared-chart-
 import { getPercentageFromPixel } from "../../../core/utils/get-percentage-from-pixel.js";
 import { getSelectionPixels } from "../../../core/utils/get-selection-pixels.js";
 import { scaleBandInvert } from "../../../core/utils/scale.js";
+import { useAreaData } from "../../hooks/useAreaData.js";
 import { useAxesFormatter } from "../../hooks/useAxesFormatter.js";
 import { useBarData } from "../../hooks/useBarData.js";
 import { useDotData } from "../../hooks/useDotData.js";
@@ -39,7 +40,13 @@ const XYChartSelectionArea = () => {
   const selectState = useSelectState();
   const { width } = useGridPlotSize();
   const selectionAreaRef = useXYChartSelectionAreaRef();
-  const { seriesWithDatapoints, axes, axesMetadata } = useXYChartData();
+  const {
+    filteredSeriesWithDatapoints,
+    axes,
+    axesMetadata,
+    datapointMetadataMap,
+    axisIdToScaleDomain
+  } = useXYChartData();
   const axisIdToScales = useXYChartScales();
   const mode = useInteractionModeState();
   const { updateSelectionState } = useSynchronizedSelection();
@@ -48,8 +55,8 @@ const XYChartSelectionArea = () => {
   const { seriesToMetadata: dotSeriesToMetadata } = useDotData();
   const { seriesToMetadata: lineSeriesToMetadata } = useLineData();
   const { seriesToMetadata: rectSeriesToMetadata } = useRectData();
-  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();
   const { seriesToMetadata: barSeriesToMetadata } = useBarData();
+  const { seriesToMetadata: areaSeriesToMetadata } = useAreaData();
   const canZoom = axesMetadata.isZoomEnabled;
   if (isUndefined(selectState) || !chartRef.current) {
     return null;
@@ -104,7 +111,7 @@ const XYChartSelectionArea = () => {
   const selectionStart = selectState.selectionPercentage ? width * selectState.selectionPercentage[0] / 100 : start.relative.x;
   const selectionEnd = selectState.selectionPercentage ? width * selectState.selectionPercentage[1] / 100 : end.relative.x;
   const selectedDatapointsPerSeries = getSelectedDatapoints(
-    seriesWithDatapoints,
+    filteredSeriesWithDatapoints,
     axisIdToScales,
     axes,
     {
@@ -116,7 +123,8 @@ const XYChartSelectionArea = () => {
     rectSeriesToMetadata,
     datapointMetadataMap,
     axisIdToScaleDomain,
-    barSeriesToMetadata
+    barSeriesToMetadata,
+    areaSeriesToMetadata
   );
   const selectionPosition = finished ? getSelectionPixels(selectionPercentage, width, [start, end]) : [start, end];
   const selectedDatapoints = selectedDatapointsPerSeries.map(
@@ -124,7 +132,7 @@ const XYChartSelectionArea = () => {
   );
   const datapointCounts = countDatapointsWithSeriesAndCategories(
     selectedDatapoints,
-    seriesWithDatapoints,
+    filteredSeriesWithDatapoints,
     axes
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/esm/charts/xy-chart/components/selection/XYChartSelectionArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/selection/XYChartSelectionArea.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { KeyboardEvent } from 'react';\n\nimport { XYChartSelectionAreaTooltip } from './XYChartSelectionAreaTooltip.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { reduceExploreSelect } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { DynamicSelectionArea } from '../../../core/components/selection-area/DynamicSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { getSelectionPixels } from '../../../core/utils/get-selection-pixels.js';\nimport { scaleBandInvert } from '../../../core/utils/scale.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../hooks/useBarData.js';\nimport { useDotData } from '../../hooks/useDotData.js';\nimport { useLineData } from '../../hooks/useLineData.js';\nimport { useRectData } from '../../hooks/useRectData.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\nimport { isAnyNumericalScale, isCategoricalScale } from '../../types/guards.js';\nimport {\n  AnyXYChartScale,\n  XYChartAxisInternal,\n} from '../../types/xy-chart-internals.js';\nimport { countDatapointsWithSeriesAndCategories } from '../../utils/count-datapoints-with-series-and-categories.js';\nimport { getSelectedDatapoints } from '../overlay/utils/get-selected-datapoints.js';\nimport { handleFormatter } from '../overlay/utils/handleFormatter.js';\n\nexport const XYChartSelectionArea = () => {\n  const setState = useSetState();\n  const chartRef = useXYChartOverlayRef();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const axesScales = useVisibleAxesScales();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n  const selectionAreaRef = useXYChartSelectionAreaRef();\n  const { seriesWithDatapoints, axes, axesMetadata } = useXYChartData();\n  const axisIdToScales = useXYChartScales();\n  const mode = useInteractionModeState();\n  const { updateSelectionState } = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { seriesToMetadata: dotSeriesToMetadata } = useDotData();\n  const { seriesToMetadata: lineSeriesToMetadata } = useLineData();\n  const { seriesToMetadata: rectSeriesToMetadata } = useRectData();\n  const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();\n  const { seriesToMetadata: barSeriesToMetadata } = useBarData();\n\n  const canZoom = axesMetadata.isZoomEnabled;\n\n  if (isUndefined(selectState) || !chartRef.current) {\n    return null;\n  }\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const { start, end, selectionPercentage, finished, accessible, variant } =\n    selectState;\n\n  const handleWrapperKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' && canZoom) {\n      chartRef.current?.focus();\n    }\n  };\n\n  const handleSelectionChange = ({\n    selection,\n    accessible,\n  }: {\n    selection: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n    accessible: boolean;\n  }) => {\n    setState(\n      reduceExploreSelect({\n        start: selection[0],\n        end: selection[1],\n        finished: true,\n        accessible,\n        variant,\n        selectionPercentage: getPercentageFromPixel(selection, width),\n      }),\n    );\n    if (mode === 'explore' && syncedXScale) {\n      updateSelectionState?.({\n        selection,\n        chartId,\n        scale: syncedXScale,\n      });\n    }\n  };\n\n  const formatterHandler = (\n    config?: XYChartAxisInternal,\n    scale?: AnyXYChartScale,\n  ) => {\n    const axisConfig = {\n      axisType: config?.type,\n      axisScale: scale,\n    };\n    if (config && isAnyNumericalScale(axisConfig)) {\n      return (value: number) =>\n        handleFormatter(\n          config,\n          axesIdToFormatter,\n          axisConfig.axisScale,\n          value,\n          width,\n        );\n    } else if (isCategoricalScale(axisConfig)) {\n      return (value: number) => scaleBandInvert(axisConfig.axisScale)(value);\n    }\n  };\n\n  const selectionStart = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : start.relative.x;\n  const selectionEnd = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : end.relative.x;\n\n  const selectedDatapointsPerSeries = getSelectedDatapoints(\n    seriesWithDatapoints,\n    axisIdToScales,\n    axes,\n    {\n      start: selectionStart,\n      end: selectionEnd,\n    },\n    dotSeriesToMetadata,\n    lineSeriesToMetadata,\n    rectSeriesToMetadata,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n    barSeriesToMetadata,\n  );\n\n  const selectionPosition: [\n    RelativeAbsolutePosition,\n    RelativeAbsolutePosition,\n  ] = finished\n    ? getSelectionPixels(selectionPercentage, width, [start, end])\n    : [start, end];\n\n  const selectedDatapoints = selectedDatapointsPerSeries.map(\n    (data) => data.datapoints,\n  );\n\n  const datapointCounts = countDatapointsWithSeriesAndCategories(\n    selectedDatapoints,\n    seriesWithDatapoints,\n    axes,\n  );\n\n  return (\n    <>\n      {variant === 'select' ? (\n        <XYChartSelectionAreaTooltip\n          {...datapointCounts}\n          selectedDatapointsPerSeries={selectedDatapointsPerSeries}\n        />\n      ) : null}\n      <DynamicSelectionArea\n        selection={selectionPosition}\n        chartRef={chartRef}\n        variant={variant}\n        focusable={accessible}\n        interactable={finished}\n        bottomFormatter={formatterHandler(axesConfig.bottom, axesScales.bottom)}\n        topFormatter={formatterHandler(axesConfig.top, axesScales.top)}\n        onKeyDown={handleWrapperKeyDown}\n        onSelectionChange={handleSelectionChange}\n        isBottomLabelRotated={isBottomLabelRotated}\n        isTopLabelRotated={isTopLabelRotated}\n        selectionAreaRef={selectionAreaRef}\n        hasMagnifiers={\n          !isUndefined(axesConfig.bottom) || !isUndefined(axesConfig.top)\n        }\n      />\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport type { KeyboardEvent } from 'react';\n\nimport { XYChartSelectionAreaTooltip } from './XYChartSelectionAreaTooltip.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { reduceExploreSelect } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { DynamicSelectionArea } from '../../../core/components/selection-area/DynamicSelectionArea.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { getSelectionPixels } from '../../../core/utils/get-selection-pixels.js';\nimport { scaleBandInvert } from '../../../core/utils/scale.js';\nimport { useAreaData } from '../../hooks/useAreaData.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../hooks/useBarData.js';\nimport { useDotData } from '../../hooks/useDotData.js';\nimport { useLineData } from '../../hooks/useLineData.js';\nimport { useRectData } from '../../hooks/useRectData.js';\nimport { useSyncedXScaleByPriority } from '../../hooks/useSyncedXScaleByPriority.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartId } from '../../hooks/useXYChartId.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\nimport { isAnyNumericalScale, isCategoricalScale } from '../../types/guards.js';\nimport {\n  AnyXYChartScale,\n  XYChartAxisInternal,\n} from '../../types/xy-chart-internals.js';\nimport { countDatapointsWithSeriesAndCategories } from '../../utils/count-datapoints-with-series-and-categories.js';\nimport { getSelectedDatapoints } from '../overlay/utils/get-selected-datapoints.js';\nimport { handleFormatter } from '../overlay/utils/handleFormatter.js';\n\nexport const XYChartSelectionArea = () => {\n  const setState = useSetState();\n  const chartRef = useXYChartOverlayRef();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const axesScales = useVisibleAxesScales();\n  const selectState = useSelectState();\n  const { width } = useGridPlotSize();\n  const selectionAreaRef = useXYChartSelectionAreaRef();\n  const {\n    filteredSeriesWithDatapoints,\n    axes,\n    axesMetadata,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n  } = useXYChartData();\n  const axisIdToScales = useXYChartScales();\n  const mode = useInteractionModeState();\n  const { updateSelectionState } = useSynchronizedSelection();\n  const chartId = useXYChartId();\n  const syncedXScale = useSyncedXScaleByPriority();\n  const { seriesToMetadata: dotSeriesToMetadata } = useDotData();\n  const { seriesToMetadata: lineSeriesToMetadata } = useLineData();\n  const { seriesToMetadata: rectSeriesToMetadata } = useRectData();\n  const { seriesToMetadata: barSeriesToMetadata } = useBarData();\n  const { seriesToMetadata: areaSeriesToMetadata } = useAreaData();\n\n  const canZoom = axesMetadata.isZoomEnabled;\n\n  if (isUndefined(selectState) || !chartRef.current) {\n    return null;\n  }\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const { start, end, selectionPercentage, finished, accessible, variant } =\n    selectState;\n\n  const handleWrapperKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter' && canZoom) {\n      chartRef.current?.focus();\n    }\n  };\n\n  const handleSelectionChange = ({\n    selection,\n    accessible,\n  }: {\n    selection: [RelativeAbsolutePosition, RelativeAbsolutePosition];\n    accessible: boolean;\n  }) => {\n    setState(\n      reduceExploreSelect({\n        start: selection[0],\n        end: selection[1],\n        finished: true,\n        accessible,\n        variant,\n        selectionPercentage: getPercentageFromPixel(selection, width),\n      }),\n    );\n    if (mode === 'explore' && syncedXScale) {\n      updateSelectionState?.({\n        selection,\n        chartId,\n        scale: syncedXScale,\n      });\n    }\n  };\n\n  const formatterHandler = (\n    config?: XYChartAxisInternal,\n    scale?: AnyXYChartScale,\n  ) => {\n    const axisConfig = {\n      axisType: config?.type,\n      axisScale: scale,\n    };\n    if (config && isAnyNumericalScale(axisConfig)) {\n      return (value: number) =>\n        handleFormatter(\n          config,\n          axesIdToFormatter,\n          axisConfig.axisScale,\n          value,\n          width,\n        );\n    } else if (isCategoricalScale(axisConfig)) {\n      return (value: number) => scaleBandInvert(axisConfig.axisScale)(value);\n    }\n  };\n\n  const selectionStart = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : start.relative.x;\n  const selectionEnd = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : end.relative.x;\n\n  const selectedDatapointsPerSeries = getSelectedDatapoints(\n    filteredSeriesWithDatapoints,\n    axisIdToScales,\n    axes,\n    {\n      start: selectionStart,\n      end: selectionEnd,\n    },\n    dotSeriesToMetadata,\n    lineSeriesToMetadata,\n    rectSeriesToMetadata,\n    datapointMetadataMap,\n    axisIdToScaleDomain,\n    barSeriesToMetadata,\n    areaSeriesToMetadata,\n  );\n\n  const selectionPosition: [\n    RelativeAbsolutePosition,\n    RelativeAbsolutePosition,\n  ] = finished\n    ? getSelectionPixels(selectionPercentage, width, [start, end])\n    : [start, end];\n\n  const selectedDatapoints = selectedDatapointsPerSeries.map(\n    (data) => data.datapoints,\n  );\n\n  const datapointCounts = countDatapointsWithSeriesAndCategories(\n    selectedDatapoints,\n    filteredSeriesWithDatapoints,\n    axes,\n  );\n\n  return (\n    <>\n      {variant === 'select' ? (\n        <XYChartSelectionAreaTooltip\n          {...datapointCounts}\n          selectedDatapointsPerSeries={selectedDatapointsPerSeries}\n        />\n      ) : null}\n      <DynamicSelectionArea\n        selection={selectionPosition}\n        chartRef={chartRef}\n        variant={variant}\n        focusable={accessible}\n        interactable={finished}\n        bottomFormatter={formatterHandler(axesConfig.bottom, axesScales.bottom)}\n        topFormatter={formatterHandler(axesConfig.top, axesScales.top)}\n        onKeyDown={handleWrapperKeyDown}\n        onSelectionChange={handleSelectionChange}\n        isBottomLabelRotated={isBottomLabelRotated}\n        isTopLabelRotated={isTopLabelRotated}\n        selectionAreaRef={selectionAreaRef}\n        hasMagnifiers={\n          !isUndefined(axesConfig.bottom) || !isUndefined(axesConfig.top)\n        }\n      />\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["accessible"]
 }

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdArea.js

@@ -7,6 +7,7 @@ import { ThresholdBar } from "../../../core/components/threshold-bar/ThresholdBa
 import { useAxesFormatter } from "../../hooks/useAxesFormatter.js";
 import { useGetThresholds } from "../../hooks/useGetThresholds.js";
 import { useVisibleAxesConfig } from "../../hooks/useVisibleAxesConfig.js";
+import { useXYChartData } from "../../hooks/useXYChartData.js";
 import { useXYChartScales } from "../../hooks/useXYChartScales.js";
 import { useSetState } from "../../store/selectors.js";
 import { AREAS } from "../../utils/grid-templates.js";
@@ -18,6 +19,7 @@ const XYChartThresholdArea = () => {
   const { width } = useGridPlotSize();
   const { left: leftConfig, right: rightConfig } = useVisibleAxesConfig();
   const setState = useSetState();
+  const { axes } = useXYChartData();
   if (none) {
     return null;
   }
@@ -27,7 +29,8 @@ const XYChartThresholdArea = () => {
       axisConfig: leftConfig,
       axesIdToScales,
       axesIdToFormatter,
-      width
+      width,
+      axes
     }),
     []
   );
@@ -37,7 +40,8 @@ const XYChartThresholdArea = () => {
       axisConfig: rightConfig,
       axesIdToScales,
       axesIdToFormatter,
-      width
+      width,
+      axes
     }),
     []
   );

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdArea.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdArea.tsx"],
-  "sourcesContent": ["import { getBorderThreshold } from './get-border-threshold.js';\nimport { markersReducer } from './utils.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ThresholdBar } from '../../../core/components/threshold-bar/ThresholdBar.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useGetThresholds } from '../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useSetState } from '../../store/selectors.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport const XYChartThresholdArea = () => {\n  const { thresholds, none } = useGetThresholds();\n  const { left, right } = useVisibleAxesConfig();\n  const axesIdToScales = useXYChartScales();\n  const axesIdToFormatter = useAxesFormatter();\n  const { width } = useGridPlotSize();\n  const { left: leftConfig, right: rightConfig } = useVisibleAxesConfig();\n  const setState = useSetState();\n\n  if (none) {\n    return null;\n  }\n\n  const leftMarkers = thresholds.reduce(\n    markersReducer({\n      axis: 'left',\n      axisConfig: leftConfig,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n    }),\n    [],\n  );\n\n  const rightMarkers = thresholds.reduce(\n    markersReducer({\n      axis: 'right',\n      axisConfig: rightConfig,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n    }),\n    [],\n  );\n\n  const handleHover = (id: string | undefined) => {\n    setState((prev) => ({\n      ...prev,\n      thresholds: {\n        ...prev.thresholds,\n        hoveredThresholdId: id,\n      },\n    }));\n  };\n\n  const { leftBorder, rightBorder } = getBorderThreshold(left, right);\n\n  return (\n    <>\n      {leftMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.leftThreshold}\n          key=\"leftThreshold\"\n          data-testid=\"left-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={leftBorder}\n                markers={leftMarkers}\n                length={args.availableHeight}\n                layout=\"vertical\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n      {rightMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.rightThreshold}\n          key=\"rightThreshold\"\n          data-testid=\"right-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={rightBorder}\n                markers={rightMarkers}\n                length={args.availableHeight}\n                layout=\"vertical\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n    </>\n  );\n};\n\nXYChartThresholdArea['displayName'] = 'XYChartThresholdArea';\n"],
-  "mappings": "AA4DI,mBASU,KATV;AA5DJ,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AAEf,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,YAAY,KAAK,IAAI,iBAAiB;AAC9C,QAAM,EAAE,MAAM,MAAM,IAAI,qBAAqB;AAC7C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,MAAM,YAAY,OAAO,YAAY,IAAI,qBAAqB;AACtE,QAAM,WAAW,YAAY;AAE7B,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW;AAAA,IAC7B,eAAe;AAAA,MACb,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,WAAW;AAAA,IAC9B,eAAe;AAAA,MACb,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,cAAc,CAAC,OAA2B;AAC9C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,YAAY;AAAA,QACV,GAAG,KAAK;AAAA,QACR,oBAAoB;AAAA,MACtB;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,QAAM,EAAE,YAAY,YAAY,IAAI,mBAAmB,MAAM,KAAK;AAElE,SACE,iCACG;AAAA,gBAAY,SACX;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,IACH,aAAa,SACZ;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,KACN;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import { getBorderThreshold } from './get-border-threshold.js';\nimport { markersReducer } from './utils.js';\nimport { ChartGrid } from '../../../core/components/chart-grid/ChartGridRoot.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ThresholdBar } from '../../../core/components/threshold-bar/ThresholdBar.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useGetThresholds } from '../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useSetState } from '../../store/selectors.js';\nimport { AREAS } from '../../utils/grid-templates.js';\n\nexport const XYChartThresholdArea = () => {\n  const { thresholds, none } = useGetThresholds();\n  const { left, right } = useVisibleAxesConfig();\n  const axesIdToScales = useXYChartScales();\n  const axesIdToFormatter = useAxesFormatter();\n  const { width } = useGridPlotSize();\n  const { left: leftConfig, right: rightConfig } = useVisibleAxesConfig();\n  const setState = useSetState();\n  const { axes } = useXYChartData();\n\n  if (none) {\n    return null;\n  }\n\n  const leftMarkers = thresholds.reduce(\n    markersReducer({\n      axis: 'left',\n      axisConfig: leftConfig,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n      axes,\n    }),\n    [],\n  );\n\n  const rightMarkers = thresholds.reduce(\n    markersReducer({\n      axis: 'right',\n      axisConfig: rightConfig,\n      axesIdToScales,\n      axesIdToFormatter,\n      width,\n      axes,\n    }),\n    [],\n  );\n\n  const handleHover = (id: string | undefined) => {\n    setState((prev) => ({\n      ...prev,\n      thresholds: {\n        ...prev.thresholds,\n        hoveredThresholdId: id,\n      },\n    }));\n  };\n\n  const { leftBorder, rightBorder } = getBorderThreshold(left, right);\n\n  return (\n    <>\n      {leftMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.leftThreshold}\n          key=\"leftThreshold\"\n          data-testid=\"left-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={leftBorder}\n                markers={leftMarkers}\n                length={args.availableHeight}\n                layout=\"vertical\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n      {rightMarkers.length ? (\n        <ChartGrid.GridArea\n          gridArea={AREAS.rightThreshold}\n          key=\"rightThreshold\"\n          data-testid=\"right-threshold-area\"\n        >\n          {(args) => {\n            return (\n              <ThresholdBar\n                borderArea={rightBorder}\n                markers={rightMarkers}\n                length={args.availableHeight}\n                layout=\"vertical\"\n                onHover={handleHover}\n              />\n            );\n          }}\n        </ChartGrid.GridArea>\n      ) : null}\n    </>\n  );\n};\n\nXYChartThresholdArea['displayName'] = 'XYChartThresholdArea';\n"],
+  "mappings": "AAgEI,mBASU,KATV;AAhEJ,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AAEf,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,YAAY,KAAK,IAAI,iBAAiB;AAC9C,QAAM,EAAE,MAAM,MAAM,IAAI,qBAAqB;AAC7C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,MAAM,YAAY,OAAO,YAAY,IAAI,qBAAqB;AACtE,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,QAAM,cAAc,WAAW;AAAA,IAC7B,eAAe;AAAA,MACb,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,eAAe,WAAW;AAAA,IAC9B,eAAe;AAAA,MACb,MAAM;AAAA,MACN,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,IACD,CAAC;AAAA,EACH;AAEA,QAAM,cAAc,CAAC,OAA2B;AAC9C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,YAAY;AAAA,QACV,GAAG,KAAK;AAAA,QACR,oBAAoB;AAAA,MACtB;AAAA,IACF,EAAE;AAAA,EACJ;AAEA,QAAM,EAAE,YAAY,YAAY,IAAI,mBAAmB,MAAM,KAAK;AAElE,SACE,iCACG;AAAA,gBAAY,SACX;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,IACH,aAAa,SACZ;AAAA,MAAC,UAAU;AAAA,MAAV;AAAA,QACC,UAAU,MAAM;AAAA,QAEhB,eAAY;AAAA,QAEX,WAAC,SAAS;AACT,iBACE;AAAA,YAAC;AAAA;AAAA,cACC,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,QAAQ,KAAK;AAAA,cACb,QAAO;AAAA,cACP,SAAS;AAAA;AAAA,UACX;AAAA,QAEJ;AAAA;AAAA,MAbI;AAAA,IAcN,IACE;AAAA,KACN;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

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

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

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

@@ -4,6 +4,7 @@ import { thresholdPlot } from "./XYChartThresholdIndicators.sty.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { ThresholdIndicator } from "../../../core/components/threshold-bar/indicators/ThresholdIndicator.js";
 import { useGetThresholds } from "../../hooks/useGetThresholds.js";
+import { useXYChartData } from "../../hooks/useXYChartData.js";
 import { useXYChartScales } from "../../hooks/useXYChartScales.js";
 import { useHoveredThresholdState } from "../../store/selectors.js";
 const XYChartThresholdIndicators = () => {
@@ -11,10 +12,14 @@ const XYChartThresholdIndicators = () => {
   const { width } = useGridPlotSize();
   const axisIdToScales = useXYChartScales();
   const hoveredThresholdId = useHoveredThresholdState();
+  const { axes } = useXYChartData();
   if (none) {
     return null;
   }
   return /* @__PURE__ */ jsx("svg", { className: thresholdPlot, children: thresholds.map((threshold) => {
+    if (!axes.find((axis) => axis.id === threshold.yAxisId)) {
+      return void 0;
+    }
     const data = mapIndicatorDataFrom({
       axisIdToScales,
       threshold,

package/esm/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.tsx"],
-  "sourcesContent": ["import { mapIndicatorDataFrom } from './utils.js';\nimport { thresholdPlot } from './XYChartThresholdIndicators.sty.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ThresholdIndicator } from '../../../core/components/threshold-bar/indicators/ThresholdIndicator.js';\nimport { useGetThresholds } from '../../hooks/useGetThresholds.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useHoveredThresholdState } from '../../store/selectors.js';\n\nexport const XYChartThresholdIndicators = () => {\n  const { thresholds, none } = useGetThresholds();\n  const { width } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const hoveredThresholdId = useHoveredThresholdState();\n\n  if (none) {\n    return null;\n  }\n\n  return (\n    <svg className={thresholdPlot}>\n      {thresholds.map((threshold) => {\n        const data = mapIndicatorDataFrom({\n          axisIdToScales,\n          threshold,\n          width,\n        });\n\n        return (\n          <ThresholdIndicator\n            key={`threshold-indicator-${threshold.id}`}\n            data={data}\n            color={threshold.color}\n            strokeOnly={threshold.strokeOnly}\n            isActive={hoveredThresholdId === threshold.id}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],
-  "mappings": "AA4BU;AA5BV,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAElC,MAAM,6BAA6B,MAAM;AAC9C,QAAM,EAAE,YAAY,KAAK,IAAI,iBAAiB;AAC9C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,qBAAqB,yBAAyB;AAEpD,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,eACb,qBAAW,IAAI,CAAC,cAAc;AAC7B,UAAM,OAAO,qBAAqB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO,UAAU;AAAA,QACjB,YAAY,UAAU;AAAA,QACtB,UAAU,uBAAuB,UAAU;AAAA;AAAA,MAJtC,uBAAuB,UAAU,EAAE;AAAA,IAK1C;AAAA,EAEJ,CAAC,GACH;AAEJ;",
+  "sourcesContent": ["import { mapIndicatorDataFrom } from './utils.js';\nimport { thresholdPlot } from './XYChartThresholdIndicators.sty.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { ThresholdIndicator } from '../../../core/components/threshold-bar/indicators/ThresholdIndicator.js';\nimport { useGetThresholds } from '../../hooks/useGetThresholds.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useHoveredThresholdState } from '../../store/selectors.js';\n\nexport const XYChartThresholdIndicators = () => {\n  const { thresholds, none } = useGetThresholds();\n  const { width } = useGridPlotSize();\n  const axisIdToScales = useXYChartScales();\n  const hoveredThresholdId = useHoveredThresholdState();\n  const { axes } = useXYChartData();\n\n  if (none) {\n    return null;\n  }\n\n  return (\n    <svg className={thresholdPlot}>\n      {thresholds.map((threshold) => {\n        // TODO: workaround to dont let chart break. follow up APPDEV-16553\n        // workaround applied after adding the new filtering series | toggling visible axis\n        // we should refactor how we manage the threshold instead\n\n        if (!axes.find((axis) => axis.id === threshold.yAxisId)) {\n          return undefined;\n        }\n\n        const data = mapIndicatorDataFrom({\n          axisIdToScales,\n          threshold,\n          width,\n        });\n\n        return (\n          <ThresholdIndicator\n            key={`threshold-indicator-${threshold.id}`}\n            data={data}\n            color={threshold.color}\n            strokeOnly={threshold.strokeOnly}\n            isActive={hoveredThresholdId === threshold.id}\n          />\n        );\n      })}\n    </svg>\n  );\n};\n"],
+  "mappings": "AAsCU;AAtCV,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,gCAAgC;AAElC,MAAM,6BAA6B,MAAM;AAC9C,QAAM,EAAE,YAAY,KAAK,IAAI,iBAAiB;AAC9C,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,qBAAqB,yBAAyB;AACpD,QAAM,EAAE,KAAK,IAAI,eAAe;AAEhC,MAAI,MAAM;AACR,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,SAAI,WAAW,eACb,qBAAW,IAAI,CAAC,cAAc;AAK7B,QAAI,CAAC,KAAK,KAAK,CAAC,SAAS,KAAK,OAAO,UAAU,OAAO,GAAG;AACvD,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,qBAAqB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WACE;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,OAAO,UAAU;AAAA,QACjB,YAAY,UAAU;AAAA,QACtB,UAAU,uBAAuB,UAAU;AAAA;AAAA,MAJtC,uBAAuB,UAAU,EAAE;AAAA,IAK1C;AAAA,EAEJ,CAAC,GACH;AAEJ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartThresholdIndicators.css";
-var thresholdPlot = "_1mfu0sw0-3-0-1 _13lzg4k0-3-0-1";
+var thresholdPlot = "_1mfu0sw0-3-1-0 _13lzg4k0-3-1-0";
 export {
   thresholdPlot
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/XYChartThresholdIndicators.css.ts"],
-  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-0-1 _13lzg4k0-3-0-1';"],
+  "sourcesContent": ["import '../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartThresholdIndicators.css';\nexport var thresholdPlot = '_1mfu0sw0-3-1-0 _13lzg4k0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/xy-chart/components/thresholds/utils.js

@@ -47,9 +47,13 @@ function markersReducer({
   axisConfig,
   axesIdToScales,
   axesIdToFormatter,
-  width
+  width,
+  axes
 }) {
   return (acc, threshold) => {
+    if (!axes.find((axis2) => axis2.id === threshold.yAxisId)) {
+      return acc;
+    }
     if (axisPositionIncludes(axis)(threshold.position)) {
       const yScale = getCurrentScale(
         axesIdToScales,

package/esm/charts/xy-chart/components/thresholds/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/thresholds/utils.ts"],
-  "sourcesContent": ["import { scaleLinear } from 'd3-scale';\nimport { minBy, maxBy } from 'lodash-es';\n\nimport { getYValue } from './get-y-value.js';\nimport { isThresholdDynamic } from './type-guards.js';\nimport { type ThresholdIndicatorData } from '../../../core/components/threshold-bar/indicators/ThresholdIndicator.js';\nimport type { ThresholdMarker } from '../../../core/components/threshold-bar/types.js';\nimport { getMarkerValue } from '../../../core/components/threshold-bar/utils/get-marker-value.js';\nimport { getThresholdPixel } from '../../../core/components/threshold-bar/utils/get-threshold-pixel.ts.js';\nimport { THRESHOLD } from '../../../core/messages.js';\nimport type { MinMax } from '../../../core/types/min-max.js';\nimport type { AnyNumberScale } from '../../../core/types/scales.js';\nimport type { AxisIdToScales } from '../../context/XYChartScales.context.js';\nimport type {\n  AxisIdToFormatter,\n  XYChartAxisInternal,\n  XYChartThresholdsPropsInternal,\n} from '../../types/xy-chart-internals.js';\nimport type {\n  XYChartThresholdDataLineStatic,\n  XYChartThresholdDataRangeStatic,\n  XYChartThresholdDynamicData,\n  XYChartYAxisPosition,\n} from '../../types/xy-chart.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { getAxisFormatterWithTimeFallback } from '../overlay/utils/get-axis-formatter-with-time-fallback.js';\n\ninterface ThresholdMarkersReducerConfig {\n  axis: 'left' | 'right';\n  axisConfig?: XYChartAxisInternal;\n  axesIdToScales: AxisIdToScales;\n  axesIdToFormatter: AxisIdToFormatter;\n  width: number;\n}\n\nexport function getDynamicThresholdDomain(\n  data: XYChartThresholdDynamicData[],\n  side: 'left' | 'right',\n  visibleDomain: MinMax,\n) {\n  const minXPoint = findPointWithMinX(data);\n  const maxXPoint = findPointWithMaxX(data);\n\n  const targetXDomain = side === 'left' ? visibleDomain.min : visibleDomain.max;\n\n  if (targetXDomain <= minXPoint.x.valueOf()) {\n    return getYRangeFromPoint(minXPoint);\n  }\n  if (targetXDomain >= maxXPoint.x.valueOf()) {\n    return getYRangeFromPoint(maxXPoint);\n  }\n  return interpolateYRange(data, targetXDomain);\n}\n\nfunction findPointWithMinX(data: XYChartThresholdDynamicData[]) {\n  return minBy(data, (point) => point.x.valueOf()) ?? data[0];\n}\n\nfunction findPointWithMaxX(data: XYChartThresholdDynamicData[]) {\n  return maxBy(data, (point) => point.x.valueOf()) ?? data[data.length - 1];\n}\n\nfunction getYRangeFromPoint(point: XYChartThresholdDynamicData) {\n  return {\n    y0: getYValue(point, 'min'),\n    y1: getYValue(point, 'max'),\n  };\n}\nfunction interpolateYRange(\n  data: XYChartThresholdDynamicData[],\n  targetX: number,\n) {\n  const xValues = data.map((point) => Number(point.x));\n  const minYValues = data.map((point) => getYValue(point, 'min'));\n  const maxYValues = data.map((point) => getYValue(point, 'max'));\n  const minYScale = scaleLinear(xValues, minYValues).clamp(true);\n  const maxYScale = scaleLinear(xValues, maxYValues).clamp(true);\n\n  return {\n    y0: minYScale(targetX),\n    y1: maxYScale(targetX),\n  };\n}\n\n/**\n * Returns a reducer function to accumulate threshold markers with scale and formatted value.\n */\nexport function markersReducer({\n  axis,\n  axisConfig,\n  axesIdToScales,\n  axesIdToFormatter,\n  width,\n}: ThresholdMarkersReducerConfig) {\n  return (\n    acc: ThresholdMarker[],\n    threshold: XYChartThresholdsPropsInternal[number],\n  ) => {\n    if (axisPositionIncludes(axis)(threshold.position)) {\n      const yScale = getCurrentScale(\n        axesIdToScales,\n        threshold.yAxisId,\n      ) as AnyNumberScale;\n\n      if (isThresholdDynamic(threshold)) {\n        const xScale = getCurrentScale(\n          axesIdToScales,\n          threshold.xAxisId,\n        ) as AnyNumberScale;\n        const data = threshold.data;\n        const minElement = minBy(data, (e) => getYValue(e, 'min'));\n        const maxElement = maxBy(data, (e) => getYValue(e, 'max'));\n\n        if (!minElement || !maxElement) {\n          return acc;\n        }\n\n        acc.push({\n          ...threshold,\n          y0: getThresholdPixel(getYValue(minElement, 'min'), yScale),\n          y1: getThresholdPixel(getYValue(maxElement, 'max'), yScale),\n          value: 'dynamic',\n          isShadow: true,\n        });\n\n        const domain = xScale.domain();\n        const xMinMax = {\n          min: domain[0].valueOf(),\n          max: domain[1].valueOf(),\n        };\n\n        const { y0, y1 } = getDynamicThresholdDomain(data, axis, xMinMax);\n\n        acc.push({\n          ...threshold,\n          y0: getThresholdPixel(y0, yScale),\n          y1: getThresholdPixel(y1, yScale),\n          value: THRESHOLD.dynamic.defaultMessage,\n        });\n      } else {\n        const markerDomain = {\n          y0: getYValue(threshold.data, 'min'),\n          y1: getYValue(threshold.data, 'max'),\n        };\n\n        acc.push({\n          ...threshold,\n          y0: getThresholdPixel(markerDomain.y0, yScale),\n          y1: getThresholdPixel(markerDomain.y1, yScale),\n          value: getMarkerValue(\n            markerDomain,\n            getAxisFormatterWithTimeFallback({\n              axisConfig,\n              axisId: threshold.yAxisId,\n              scale: yScale,\n              axesIdToFormatter,\n              width,\n            }),\n          ),\n        });\n      }\n    }\n    return acc;\n  };\n}\n\nexport const axesPositionsIncludes = (\n  axisPosition: 'left' | 'right',\n  axesPositions: { position: XYChartYAxisPosition }[],\n) => {\n  const expectedPositionsIncludes = axisPositionIncludes(axisPosition);\n\n  return !!axesPositions.find(({ position }) =>\n    expectedPositionsIncludes(position),\n  );\n};\n\nconst axisPositionIncludes =\n  (expectedPosition: 'left' | 'right') =>\n  (actualPosition: 'left' | 'right' | 'both') => {\n    return [expectedPosition, 'both'].includes(actualPosition);\n  };\n\ntype IndicatorData = (args: {\n  axisIdToScales: AxisIdToScales;\n  threshold: XYChartThresholdsPropsInternal[number];\n  width: number;\n}) => ThresholdIndicatorData[];\n\nexport const mapIndicatorDataFrom: IndicatorData = ({\n  axisIdToScales,\n  threshold,\n  width,\n}) => {\n  const yScale = getCurrentScale(\n    axisIdToScales,\n    threshold.yAxisId,\n  ) as AnyNumberScale;\n\n  if (isThresholdDynamic(threshold)) {\n    const data: XYChartThresholdDynamicData[] = threshold.data;\n\n    const xScale = getCurrentScale(\n      axisIdToScales,\n      threshold.xAxisId,\n    ) as AnyNumberScale;\n\n    const initialSegment = {\n      x0: 0,\n      x1: 0,\n      y0: getThresholdPixel(getYValue(data[0], 'min'), yScale),\n      y1: getThresholdPixel(getYValue(data[0], 'max'), yScale),\n    };\n\n    const finalSegment = {\n      x0: width,\n      x1: width,\n      y0: getThresholdPixel(getYValue(data[data.length - 1], 'min'), yScale),\n      y1: getThresholdPixel(getYValue(data[data.length - 1], 'max'), yScale),\n    };\n\n    const segments = data.map((coordinate) => ({\n      x0: getThresholdPixel(coordinate.x, xScale),\n      x1: getThresholdPixel(coordinate.x, xScale),\n      y0: getThresholdPixel(getYValue(coordinate, 'min'), yScale),\n      y1: getThresholdPixel(getYValue(coordinate, 'max'), yScale),\n    }));\n\n    return [initialSegment, ...segments, finalSegment];\n  } else {\n    const data = threshold.data as\n      | XYChartThresholdDataRangeStatic\n      | XYChartThresholdDataLineStatic;\n\n    const yMinScaleValue = getThresholdPixel(getYValue(data, 'min'), yScale);\n    const yMaxScaleValue = getThresholdPixel(getYValue(data, 'max'), yScale);\n\n    return [\n      {\n        x0: 0,\n        x1: 0,\n        y0: yMinScaleValue,\n        y1: yMaxScaleValue,\n      },\n      {\n        x0: width,\n        x1: width,\n        y0: yMinScaleValue,\n        y1: yMaxScaleValue,\n      },\n    ];\n  }\n};\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { scaleLinear } from 'd3-scale';\nimport { minBy, maxBy } from 'lodash-es';\n\nimport { getYValue } from './get-y-value.js';\nimport { isThresholdDynamic } from './type-guards.js';\nimport { type ThresholdIndicatorData } from '../../../core/components/threshold-bar/indicators/ThresholdIndicator.js';\nimport type { ThresholdMarker } from '../../../core/components/threshold-bar/types.js';\nimport { getMarkerValue } from '../../../core/components/threshold-bar/utils/get-marker-value.js';\nimport { getThresholdPixel } from '../../../core/components/threshold-bar/utils/get-threshold-pixel.ts.js';\nimport { THRESHOLD } from '../../../core/messages.js';\nimport type { MinMax } from '../../../core/types/min-max.js';\nimport type { AnyNumberScale } from '../../../core/types/scales.js';\nimport type { AxisIdToScales } from '../../context/XYChartScales.context.js';\nimport type {\n  AxisIdToFormatter,\n  XYChartAxisInternal,\n  XYChartThresholdsPropsInternal,\n} from '../../types/xy-chart-internals.js';\nimport type {\n  XYChartThresholdDataLineStatic,\n  XYChartThresholdDataRangeStatic,\n  XYChartThresholdDynamicData,\n  XYChartYAxisPosition,\n} from '../../types/xy-chart.js';\nimport { getCurrentScale } from '../../utils/get-scale.js';\nimport { getAxisFormatterWithTimeFallback } from '../overlay/utils/get-axis-formatter-with-time-fallback.js';\n\ninterface ThresholdMarkersReducerConfig {\n  axis: 'left' | 'right';\n  axisConfig?: XYChartAxisInternal;\n  axesIdToScales: AxisIdToScales;\n  axesIdToFormatter: AxisIdToFormatter;\n  width: number;\n  axes: XYChartAxisInternal[];\n}\n\nexport function getDynamicThresholdDomain(\n  data: XYChartThresholdDynamicData[],\n  side: 'left' | 'right',\n  visibleDomain: MinMax,\n) {\n  const minXPoint = findPointWithMinX(data);\n  const maxXPoint = findPointWithMaxX(data);\n\n  const targetXDomain = side === 'left' ? visibleDomain.min : visibleDomain.max;\n\n  if (targetXDomain <= minXPoint.x.valueOf()) {\n    return getYRangeFromPoint(minXPoint);\n  }\n  if (targetXDomain >= maxXPoint.x.valueOf()) {\n    return getYRangeFromPoint(maxXPoint);\n  }\n  return interpolateYRange(data, targetXDomain);\n}\n\nfunction findPointWithMinX(data: XYChartThresholdDynamicData[]) {\n  return minBy(data, (point) => point.x.valueOf()) ?? data[0];\n}\n\nfunction findPointWithMaxX(data: XYChartThresholdDynamicData[]) {\n  return maxBy(data, (point) => point.x.valueOf()) ?? data[data.length - 1];\n}\n\nfunction getYRangeFromPoint(point: XYChartThresholdDynamicData) {\n  return {\n    y0: getYValue(point, 'min'),\n    y1: getYValue(point, 'max'),\n  };\n}\nfunction interpolateYRange(\n  data: XYChartThresholdDynamicData[],\n  targetX: number,\n) {\n  const xValues = data.map((point) => Number(point.x));\n  const minYValues = data.map((point) => getYValue(point, 'min'));\n  const maxYValues = data.map((point) => getYValue(point, 'max'));\n  const minYScale = scaleLinear(xValues, minYValues).clamp(true);\n  const maxYScale = scaleLinear(xValues, maxYValues).clamp(true);\n\n  return {\n    y0: minYScale(targetX),\n    y1: maxYScale(targetX),\n  };\n}\n\n/**\n * Returns a reducer function to accumulate threshold markers with scale and formatted value.\n */\nexport function markersReducer({\n  axis,\n  axisConfig,\n  axesIdToScales,\n  axesIdToFormatter,\n  width,\n  axes,\n}: ThresholdMarkersReducerConfig) {\n  return (\n    acc: ThresholdMarker[],\n    threshold: XYChartThresholdsPropsInternal[number],\n  ) => {\n    // TODO: workaround to dont let chart break. follow up APPDEV-16553\n    // workaround applied after adding the new filtering series | toggling visible axis\n    // we should refactor how we manage the threshold instead\n\n    if (!axes.find((axis) => axis.id === threshold.yAxisId)) {\n      return acc;\n    }\n\n    if (axisPositionIncludes(axis)(threshold.position)) {\n      const yScale = getCurrentScale(\n        axesIdToScales,\n        threshold.yAxisId,\n      ) as AnyNumberScale;\n\n      if (isThresholdDynamic(threshold)) {\n        const xScale = getCurrentScale(\n          axesIdToScales,\n          threshold.xAxisId,\n        ) as AnyNumberScale;\n        const data = threshold.data;\n        const minElement = minBy(data, (e) => getYValue(e, 'min'));\n        const maxElement = maxBy(data, (e) => getYValue(e, 'max'));\n\n        if (!minElement || !maxElement) {\n          return acc;\n        }\n\n        acc.push({\n          ...threshold,\n          y0: getThresholdPixel(getYValue(minElement, 'min'), yScale),\n          y1: getThresholdPixel(getYValue(maxElement, 'max'), yScale),\n          value: 'dynamic',\n          isShadow: true,\n        });\n\n        const domain = xScale.domain();\n        const xMinMax = {\n          min: domain[0].valueOf(),\n          max: domain[1].valueOf(),\n        };\n\n        const { y0, y1 } = getDynamicThresholdDomain(data, axis, xMinMax);\n\n        acc.push({\n          ...threshold,\n          y0: getThresholdPixel(y0, yScale),\n          y1: getThresholdPixel(y1, yScale),\n          value: THRESHOLD.dynamic.defaultMessage,\n        });\n      } else {\n        const markerDomain = {\n          y0: getYValue(threshold.data, 'min'),\n          y1: getYValue(threshold.data, 'max'),\n        };\n\n        acc.push({\n          ...threshold,\n          y0: getThresholdPixel(markerDomain.y0, yScale),\n          y1: getThresholdPixel(markerDomain.y1, yScale),\n          value: getMarkerValue(\n            markerDomain,\n            getAxisFormatterWithTimeFallback({\n              axisConfig,\n              axisId: threshold.yAxisId,\n              scale: yScale,\n              axesIdToFormatter,\n              width,\n            }),\n          ),\n        });\n      }\n    }\n    return acc;\n  };\n}\n\nexport const axesPositionsIncludes = (\n  axisPosition: 'left' | 'right',\n  axesPositions: { position: XYChartYAxisPosition }[],\n) => {\n  const expectedPositionsIncludes = axisPositionIncludes(axisPosition);\n\n  return !!axesPositions.find(({ position }) =>\n    expectedPositionsIncludes(position),\n  );\n};\n\nconst axisPositionIncludes =\n  (expectedPosition: 'left' | 'right') =>\n  (actualPosition: 'left' | 'right' | 'both') => {\n    return [expectedPosition, 'both'].includes(actualPosition);\n  };\n\ntype IndicatorData = (args: {\n  axisIdToScales: AxisIdToScales;\n  threshold: XYChartThresholdsPropsInternal[number];\n  width: number;\n}) => ThresholdIndicatorData[];\n\nexport const mapIndicatorDataFrom: IndicatorData = ({\n  axisIdToScales,\n  threshold,\n  width,\n}) => {\n  const yScale = getCurrentScale(\n    axisIdToScales,\n    threshold.yAxisId,\n  ) as AnyNumberScale;\n\n  if (isThresholdDynamic(threshold)) {\n    const data: XYChartThresholdDynamicData[] = threshold.data;\n\n    const xScale = getCurrentScale(\n      axisIdToScales,\n      threshold.xAxisId,\n    ) as AnyNumberScale;\n\n    const initialSegment = {\n      x0: 0,\n      x1: 0,\n      y0: getThresholdPixel(getYValue(data[0], 'min'), yScale),\n      y1: getThresholdPixel(getYValue(data[0], 'max'), yScale),\n    };\n\n    const finalSegment = {\n      x0: width,\n      x1: width,\n      y0: getThresholdPixel(getYValue(data[data.length - 1], 'min'), yScale),\n      y1: getThresholdPixel(getYValue(data[data.length - 1], 'max'), yScale),\n    };\n\n    const segments = data.map((coordinate) => ({\n      x0: getThresholdPixel(coordinate.x, xScale),\n      x1: getThresholdPixel(coordinate.x, xScale),\n      y0: getThresholdPixel(getYValue(coordinate, 'min'), yScale),\n      y1: getThresholdPixel(getYValue(coordinate, 'max'), yScale),\n    }));\n\n    return [initialSegment, ...segments, finalSegment];\n  } else {\n    const data = threshold.data as\n      | XYChartThresholdDataRangeStatic\n      | XYChartThresholdDataLineStatic;\n\n    const yMinScaleValue = getThresholdPixel(getYValue(data, 'min'), yScale);\n    const yMaxScaleValue = getThresholdPixel(getYValue(data, 'max'), yScale);\n\n    return [\n      {\n        x0: 0,\n        x1: 0,\n        y0: yMinScaleValue,\n        y1: yMaxScaleValue,\n      },\n      {\n        x0: width,\n        x1: width,\n        y0: yMinScaleValue,\n        y1: yMaxScaleValue,\n      },\n    ];\n  }\n};\n"],
+  "mappings": "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",
+  "names": ["axis"]
 }

package/esm/charts/xy-chart/components/toolbar/DownloadDataButton.js

@@ -37,7 +37,8 @@ const DownloadDataButton = () => {
       onKeyDown: handleDownloadDataKeyboard,
       onClick: handleDownloadDataToolbar,
       tabIndex,
-      divider: "left"
+      divider: "left",
+      "data-dt-name": "ToolbarDownloadData"
     }
   );
 };

package/esm/charts/xy-chart/components/toolbar/DownloadDataButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/DownloadDataButton.tsx"],
-  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\nexport const DownloadDataButton = () => {\n  const downloadDataButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex('download');\n  const intl = useIntl();\n  const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } =\n    useXYChartData();\n\n  const handleDownloadDataKeyboard = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      buildAndDownloadCsv(\n        seriesWithDatapoints,\n        seriesToMetadata,\n        datapointMetadataMap,\n      );\n    }\n  };\n\n  const handleDownloadDataToolbar = () => {\n    buildAndDownloadCsv(\n      seriesWithDatapoints,\n      seriesToMetadata,\n      datapointMetadataMap,\n    );\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={downloadDataButtonRef}\n      prefixIcon={<DownloadIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.downloadAsCsv)}\n      onKeyDown={handleDownloadDataKeyboard}\n      onClick={handleDownloadDataToolbar}\n      tabIndex={tabIndex}\n      divider=\"left\"\n    />\n  );\n};\n\nDownloadDataButton['displayName'] = 'DownloadDataButton';\n"],
-  "mappings": "AAuCkB;AAvClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAE7B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAE7B,MAAM,qBAAqB,MAAM;AACtC,QAAM,wBAAwB,OAA0B,IAAI;AAC5D,QAAM,WAAW,uBAAuB,UAAU;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,sBAAsB,sBAAsB,iBAAiB,IACnE,eAAe;AAEjB,QAAM,6BAA6B,CAAC,UAA8B;AAChE,QAAI,MAAM,QAAQ,SAAS;AACzB;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,4BAA4B,MAAM;AACtC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,gBAAa;AAAA,MAC1B,aAAa,KAAK,cAAc,iBAAiB,aAAa;AAAA,MAC9D,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,SAAQ;AAAA;AAAA,EACV;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\nexport const DownloadDataButton = () => {\n  const downloadDataButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex('download');\n  const intl = useIntl();\n  const { seriesWithDatapoints, datapointMetadataMap, seriesToMetadata } =\n    useXYChartData();\n\n  const handleDownloadDataKeyboard = (event: ReactKeyboardEvent) => {\n    if (event.key === 'Enter') {\n      buildAndDownloadCsv(\n        seriesWithDatapoints,\n        seriesToMetadata,\n        datapointMetadataMap,\n      );\n    }\n  };\n\n  const handleDownloadDataToolbar = () => {\n    buildAndDownloadCsv(\n      seriesWithDatapoints,\n      seriesToMetadata,\n      datapointMetadataMap,\n    );\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={downloadDataButtonRef}\n      prefixIcon={<DownloadIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.downloadAsCsv)}\n      onKeyDown={handleDownloadDataKeyboard}\n      onClick={handleDownloadDataToolbar}\n      tabIndex={tabIndex}\n      divider=\"left\"\n      data-dt-name=\"ToolbarDownloadData\"\n    />\n  );\n};\n\nDownloadDataButton['displayName'] = 'DownloadDataButton';\n"],
+  "mappings": "AAuCkB;AAvClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAE7B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AAE7B,MAAM,qBAAqB,MAAM;AACtC,QAAM,wBAAwB,OAA0B,IAAI;AAC5D,QAAM,WAAW,uBAAuB,UAAU;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,sBAAsB,sBAAsB,iBAAiB,IACnE,eAAe;AAEjB,QAAM,6BAA6B,CAAC,UAA8B;AAChE,QAAI,MAAM,QAAQ,SAAS;AACzB;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,4BAA4B,MAAM;AACtC;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,gBAAa;AAAA,MAC1B,aAAa,KAAK,cAAc,iBAAiB,aAAa;AAAA,MAC9D,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,SAAQ;AAAA,MACR,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/ExploreButton.js

@@ -86,7 +86,8 @@ const ExploreButton = (props) => {
       onKeyDown: allowWhenKeyIsEnter(handleKeyDown),
       onClick: handleClick,
       tabIndex,
-      placement: props.placement
+      placement: props.placement,
+      "data-dt-name": "ToolbarExploreMode"
     }
   );
 };

package/esm/charts/xy-chart/components/toolbar/ExploreButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/ExploreButton.tsx"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CrosshairIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport {\n  reduceInteractionMode,\n  reduceSelectionAreaVariant,\n} from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useToolbarContext } from '../../../core/components/toolbar/hooks/useToolbarContext.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ExploreButton = (props: { placement: 'menu' | 'auto' }) => {\n  const setState = useSetState();\n  const exploreButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Explore);\n  const intl = useIntl();\n  const interactionMode = useInteractionModeState();\n  const chartRef = useXYChartOverlayRef();\n  const { width } = useGridPlotSize();\n  const { resetSelectionState } = useSynchronizedSelection();\n  const { updateLastItemSelected } = useToolbarContext();\n  const selectState = useSelectState();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Explore;\n\n  const createInitialSelectionArea = () => {\n    if (!isNil(chartRef.current)) {\n      const bounds = chartRef.current.getBoundingClientRect();\n\n      const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n      setState(\n        reduceExploreSelect({\n          start,\n          end,\n          finished: true,\n          accessible: true,\n          variant: 'select',\n          isKeyboardCreated: true,\n          selectionPercentage: getPercentageFromPixel([start, end], width),\n        }),\n      );\n    }\n  };\n\n  const handleClick = () => {\n    if (interactionMode !== 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('select');\n      } else {\n        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    updateLastItemSelected(INTERACTION_MODE.Explore);\n  };\n\n  const handleKeyDown = () => {\n    setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    createInitialSelectionArea();\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={exploreButtonRef}\n      prefixIcon={<CrosshairIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore)}\n      tooltipKeyShortcut={\n        KeyboardControls.KEYBOARD_EXPLORE_MODE_SHORTCUT_ALTERNATIVE\n      }\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(handleKeyDown)}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      placement={props.placement}\n    />\n  );\n};\n\nExploreButton['displayName'] = 'ExploreButton';\n"],
-  "mappings": "AA2FkB;AA3FlB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,gBAAgB,CAAC,UAA0C;AACtE,QAAM,WAAW,YAAY;AAC7B,QAAM,mBAAmB,OAA0B,IAAI;AACvD,QAAM,WAAW,uBAAuB,iBAAiB,OAAO;AAChE,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,qBAAqB;AACtC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,EAAE,uBAAuB,IAAI,kBAAkB;AACrD,QAAM,cAAc,eAAe;AAEnC,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,6BAA6B,MAAM;AACvC,QAAI,CAAC,MAAM,SAAS,OAAO,GAAG;AAC5B,YAAM,SAAS,SAAS,QAAQ,sBAAsB;AAEtD,YAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE;AAAA,QACE,oBAAoB;AAAA,UAClB;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,mBAAmB;AAAA,UACnB,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,QACjE,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,oBAAoB,WAAW;AACjC,eAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,IAC1D;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,QAAQ;AAAA,MACrC,OAAO;AACL,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,2BAAuB,iBAAiB,OAAO;AAAA,EACjD;AAEA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,sBAAsB,iBAAiB,OAAO,CAAC;AACxD,+BAA2B;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,iBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,oBACE,iBAAiB;AAAA,MAEnB,UAAU;AAAA,MACV,WAAW,oBAAoB,aAAa;AAAA,MAC5C,SAAS;AAAA,MACT;AAAA,MACA,WAAW,MAAM;AAAA;AAAA,EACnB;AAEJ;AAEA,cAAc,aAAa,IAAI;",
+  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CrosshairIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { calculateInitialSelectionAreaPositions } from '../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js';\nimport {\n  reduceExploreCancelAll,\n  reduceExploreSelect,\n} from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport {\n  reduceInteractionMode,\n  reduceSelectionAreaVariant,\n} from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useToolbarContext } from '../../../core/components/toolbar/hooks/useToolbarContext.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getPercentageFromPixel } from '../../../core/utils/get-percentage-from-pixel.js';\nimport { useXYChartOverlayRef } from '../../hooks/useXYChartOverlayRef.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSelectState,\n  useSetState,\n} from '../../store/selectors.js';\n\nexport const ExploreButton = (props: { placement: 'menu' | 'auto' }) => {\n  const setState = useSetState();\n  const exploreButtonRef = useRef<HTMLButtonElement>(null);\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Explore);\n  const intl = useIntl();\n  const interactionMode = useInteractionModeState();\n  const chartRef = useXYChartOverlayRef();\n  const { width } = useGridPlotSize();\n  const { resetSelectionState } = useSynchronizedSelection();\n  const { updateLastItemSelected } = useToolbarContext();\n  const selectState = useSelectState();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Explore;\n\n  const createInitialSelectionArea = () => {\n    if (!isNil(chartRef.current)) {\n      const bounds = chartRef.current.getBoundingClientRect();\n\n      const [start, end] = calculateInitialSelectionAreaPositions(bounds);\n\n      setState(\n        reduceExploreSelect({\n          start,\n          end,\n          finished: true,\n          accessible: true,\n          variant: 'select',\n          isKeyboardCreated: true,\n          selectionPercentage: getPercentageFromPixel([start, end], width),\n        }),\n      );\n    }\n  };\n\n  const handleClick = () => {\n    if (interactionMode !== 'explore') {\n      setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    }\n\n    if (selectState?.start && selectState?.end) {\n      if (selectState?.isKeyboardCreated) {\n        reduceSelectionAreaVariant('select');\n      } else {\n        resetSelectionState?.();\n        setState(reduceExploreCancelAll);\n      }\n    }\n\n    updateLastItemSelected(INTERACTION_MODE.Explore);\n  };\n\n  const handleKeyDown = () => {\n    setState(reduceInteractionMode(INTERACTION_MODE.Explore));\n    createInitialSelectionArea();\n  };\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={exploreButtonRef}\n      prefixIcon={<CrosshairIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModeExplore)}\n      tooltipKeyShortcut={\n        KeyboardControls.KEYBOARD_EXPLORE_MODE_SHORTCUT_ALTERNATIVE\n      }\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(handleKeyDown)}\n      onClick={handleClick}\n      tabIndex={tabIndex}\n      placement={props.placement}\n      data-dt-name=\"ToolbarExploreMode\"\n    />\n  );\n};\n\nExploreButton['displayName'] = 'ExploreButton';\n"],
+  "mappings": "AA2FkB;AA3FlB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,qBAAqB;AAE9B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8CAA8C;AACvD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,gBAAgB,CAAC,UAA0C;AACtE,QAAM,WAAW,YAAY;AAC7B,QAAM,mBAAmB,OAA0B,IAAI;AACvD,QAAM,WAAW,uBAAuB,iBAAiB,OAAO;AAChE,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,WAAW,qBAAqB;AACtC,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AACzD,QAAM,EAAE,uBAAuB,IAAI,kBAAkB;AACrD,QAAM,cAAc,eAAe;AAEnC,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,6BAA6B,MAAM;AACvC,QAAI,CAAC,MAAM,SAAS,OAAO,GAAG;AAC5B,YAAM,SAAS,SAAS,QAAQ,sBAAsB;AAEtD,YAAM,CAAC,OAAO,GAAG,IAAI,uCAAuC,MAAM;AAElE;AAAA,QACE,oBAAoB;AAAA,UAClB;AAAA,UACA;AAAA,UACA,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,mBAAmB;AAAA,UACnB,qBAAqB,uBAAuB,CAAC,OAAO,GAAG,GAAG,KAAK;AAAA,QACjE,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAAc,MAAM;AACxB,QAAI,oBAAoB,WAAW;AACjC,eAAS,sBAAsB,iBAAiB,OAAO,CAAC;AAAA,IAC1D;AAEA,QAAI,aAAa,SAAS,aAAa,KAAK;AAC1C,UAAI,aAAa,mBAAmB;AAClC,mCAA2B,QAAQ;AAAA,MACrC,OAAO;AACL,8BAAsB;AACtB,iBAAS,sBAAsB;AAAA,MACjC;AAAA,IACF;AAEA,2BAAuB,iBAAiB,OAAO;AAAA,EACjD;AAEA,QAAM,gBAAgB,MAAM;AAC1B,aAAS,sBAAsB,iBAAiB,OAAO,CAAC;AACxD,+BAA2B;AAAA,EAC7B;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,iBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,oBACE,iBAAiB;AAAA,MAEnB,UAAU;AAAA,MACV,WAAW,oBAAoB,aAAa;AAAA,MAC5C,SAAS;AAAA,MACT;AAAA,MACA,WAAW,MAAM;AAAA,MACjB,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,cAAc,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/PanButton.js

@@ -47,7 +47,8 @@ const PanButton = () => {
       onClick: action,
       tabIndex,
       disabled: !zoomOutEnabled,
-      placement: "menu"
+      placement: "menu",
+      "data-dt-name": "ToolbarPanMode"
     }
   );
 };

package/esm/charts/xy-chart/components/toolbar/PanButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/PanButton.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { reduceExploreCancelAll } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\n\nexport const PanButton = () => {\n  const setState = useSetState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { zoomOutEnabled } = useZoomState();\n  const interactionMode = useInteractionModeState();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const action = () => {\n    resetSelectionState?.();\n    setState(reduceExploreCancelAll);\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'ALT',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModePan)}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(action)}\n      onClick={action}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n    />\n  );\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
-  "mappings": "AAgDkB;AAhDlB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,SAAS,MAAM;AACnB,0BAAsB;AACtB,aAAS,sBAAsB;AAC/B,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AAAA,EACtD;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,sCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,iBAAiB,WAAW;AAAA,MAC5D;AAAA,MACA,UAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA;AAAA,EACZ;AAEJ;AAEA,UAAU,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { PanHorizontalIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter } from './utils.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { INTERACTION_MODE } from '../../../core/components/interactions-overlay/types.js';\nimport { reduceExploreCancelAll } from '../../../core/components/interactions-state-helpers/reducers/explore-reducers.js';\nimport { reduceInteractionMode } from '../../../core/components/interactions-state-helpers/reducers/mode-reducers.js';\nimport { useSynchronizedSelection } from '../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { TOOLBAR_MESSAGES } from '../../../core/components/toolbar/messages.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { getKeyShortcutByAgent } from '../../../core/utils/get-key-shortcut-by-agent.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport {\n  useInteractionModeState,\n  useSetState,\n  useZoomState,\n} from '../../store/selectors.js';\n\nexport const PanButton = () => {\n  const setState = useSetState();\n  const panButtonRef = useRef<HTMLButtonElement>(null);\n  const intl = useIntl();\n  const tabIndex = useA11yToolbarTabIndex(INTERACTION_MODE.Pan);\n  const { zoomOutEnabled } = useZoomState();\n  const interactionMode = useInteractionModeState();\n  const { resetSelectionState } = useSynchronizedSelection();\n\n  const isSelected = interactionMode === INTERACTION_MODE.Pan;\n\n  const action = () => {\n    resetSelectionState?.();\n    setState(reduceExploreCancelAll);\n    setState(reduceInteractionMode(INTERACTION_MODE.Pan));\n  };\n\n  const tooltipKeyShortcut = `${getKeyShortcutByAgent(\n    'ALT',\n  )} ${intl.formatMessage(TOOLBAR_MESSAGES.or)} ${\n    KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE\n  }`;\n\n  return (\n    <ChartToolbarRenderer.Control\n      ref={panButtonRef}\n      prefixIcon={<PanHorizontalIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.zoomModePan)}\n      tooltipKeyShortcut={tooltipKeyShortcut}\n      selected={isSelected}\n      onKeyDown={allowWhenKeyIsEnter(action)}\n      onClick={action}\n      tabIndex={tabIndex}\n      disabled={!zoomOutEnabled}\n      placement=\"menu\"\n      data-dt-name=\"ToolbarPanMode\"\n    />\n  );\n};\n\nPanButton['displayName'] = 'PanButton';\n"],
+  "mappings": "AAgDkB;AAhDlB,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAElC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,YAAY,MAAM;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,OAA0B,IAAI;AACnD,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,iBAAiB,GAAG;AAC5D,QAAM,EAAE,eAAe,IAAI,aAAa;AACxC,QAAM,kBAAkB,wBAAwB;AAChD,QAAM,EAAE,oBAAoB,IAAI,yBAAyB;AAEzD,QAAM,aAAa,oBAAoB,iBAAiB;AAExD,QAAM,SAAS,MAAM;AACnB,0BAAsB;AACtB,aAAS,sBAAsB;AAC/B,aAAS,sBAAsB,iBAAiB,GAAG,CAAC;AAAA,EACtD;AAEA,QAAM,qBAAqB,GAAG;AAAA,IAC5B;AAAA,EACF,CAAC,IAAI,KAAK,cAAc,iBAAiB,EAAE,CAAC,IAC1C,iBAAiB,sCACnB;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,qBAAkB;AAAA,MAC/B,aAAa,KAAK,cAAc,iBAAiB,WAAW;AAAA,MAC5D;AAAA,MACA,UAAU;AAAA,MACV,WAAW,oBAAoB,MAAM;AAAA,MACrC,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA,MACX,WAAU;AAAA,MACV,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,UAAU,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/ResetButton.js

@@ -28,7 +28,8 @@ const ResetButton = () => {
       tabIndex,
       disabled: resetDisabled,
       placement: "toolbar",
-      showWhenCollapsed: !resetDisabled
+      showWhenCollapsed: !resetDisabled,
+      "data-dt-name": "ToolbarReset"
     }
   );
 };

package/esm/charts/xy-chart/components/toolbar/ResetButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/toolbar/ResetButton.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter, areAllDomainsUnchanged } from './utils.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../core/types/zoom.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useResetInteractions } from '../overlay/hooks/useResetInteractions.js';\n\nexport const ResetButton = () => {\n  const tabIndex = useA11yToolbarTabIndex(ZOOM_CHANGE_TYPE.Reset);\n  const { axesMetadata, axes } = useXYChartData();\n  const axisIdToScales = useXYChartScales();\n  const intl = useIntl();\n  const action = useResetInteractions();\n\n  const resetDisabled =\n    axesMetadata.isZoomEnabled && areAllDomainsUnchanged(axes, axisIdToScales);\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ResetIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.resetMode)}\n      tooltipKeyShortcut={KeyboardControls.KEYBOARD_RESET_SHORTCUT_ALTERNATIVE}\n      onClick={action}\n      onKeyDown={allowWhenKeyIsEnter(action)}\n      tabIndex={tabIndex}\n      disabled={resetDisabled}\n      placement=\"toolbar\"\n      showWhenCollapsed={!resetDisabled}\n    />\n  );\n};\n\nResetButton['displayName'] = 'ResetButton';\n"],
-  "mappings": "AA0BkB;AA1BlB,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB,8BAA8B;AAC5D,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAE9B,MAAM,cAAc,MAAM;AAC/B,QAAM,WAAW,uBAAuB,iBAAiB,KAAK;AAC9D,QAAM,EAAE,cAAc,KAAK,IAAI,eAAe;AAC9C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,qBAAqB;AAEpC,QAAM,gBACJ,aAAa,iBAAiB,uBAAuB,MAAM,cAAc;AAE3E,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,aAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,SAAS;AAAA,MAC1D,oBAAoB,iBAAiB;AAAA,MACrC,SAAS;AAAA,MACT,WAAW,oBAAoB,MAAM;AAAA,MACrC;AAAA,MACA,UAAU;AAAA,MACV,WAAU;AAAA,MACV,mBAAmB,CAAC;AAAA;AAAA,EACtB;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { allowWhenKeyIsEnter, areAllDomainsUnchanged } from './utils.js';\nimport { KeyboardControls } from '../../../core/components/interactions-overlay/constants.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { useA11yToolbarTabIndex } from '../../../core/hooks/useA11yToolbarTabIndex.js';\nimport { ZOOM_CHANGE_TYPE } from '../../../core/types/zoom.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useResetInteractions } from '../overlay/hooks/useResetInteractions.js';\n\nexport const ResetButton = () => {\n  const tabIndex = useA11yToolbarTabIndex(ZOOM_CHANGE_TYPE.Reset);\n  const { axesMetadata, axes } = useXYChartData();\n  const axisIdToScales = useXYChartScales();\n  const intl = useIntl();\n  const action = useResetInteractions();\n\n  const resetDisabled =\n    axesMetadata.isZoomEnabled && areAllDomainsUnchanged(axes, axisIdToScales);\n\n  return (\n    <ChartToolbarRenderer.Control\n      prefixIcon={<ResetIcon />}\n      tooltipText={intl.formatMessage(XYCHART_MESSAGES.resetMode)}\n      tooltipKeyShortcut={KeyboardControls.KEYBOARD_RESET_SHORTCUT_ALTERNATIVE}\n      onClick={action}\n      onKeyDown={allowWhenKeyIsEnter(action)}\n      tabIndex={tabIndex}\n      disabled={resetDisabled}\n      placement=\"toolbar\"\n      showWhenCollapsed={!resetDisabled}\n      data-dt-name=\"ToolbarReset\"\n    />\n  );\n};\n\nResetButton['displayName'] = 'ResetButton';\n"],
+  "mappings": "AA0BkB;AA1BlB,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB,8BAA8B;AAC5D,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAE9B,MAAM,cAAc,MAAM;AAC/B,QAAM,WAAW,uBAAuB,iBAAiB,KAAK;AAC9D,QAAM,EAAE,cAAc,KAAK,IAAI,eAAe;AAC9C,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,OAAO,QAAQ;AACrB,QAAM,SAAS,qBAAqB;AAEpC,QAAM,gBACJ,aAAa,iBAAiB,uBAAuB,MAAM,cAAc;AAE3E,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,YAAY,oBAAC,aAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,SAAS;AAAA,MAC1D,oBAAoB,iBAAiB;AAAA,MACrC,SAAS;AAAA,MACT,WAAW,oBAAoB,MAAM;AAAA,MACrC;AAAA,MACA,UAAU;AAAA,MACV,WAAU;AAAA,MACV,mBAAmB,CAAC;AAAA,MACpB,gBAAa;AAAA;AAAA,EACf;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/toolbar/ZoomInOutButtons.js

@@ -44,7 +44,8 @@ const ZoomInOutButtons = () => {
         tabIndex: tabIndexIn,
         disabled: !zoomInEnabled,
         divider: "left",
-        style: controlStyle
+        style: controlStyle,
+        "data-dt-name": "ToolbarZoomIn"
       }
     ),
     /* @__PURE__ */ jsx(
@@ -57,7 +58,8 @@ const ZoomInOutButtons = () => {
         onClick: zoomOutAction,
         tabIndex: tabIndexOut,
         disabled: !zoomOutEnabled,
-        style: controlStyle
+        style: controlStyle,
+        "data-dt-name": "ToolbarZoomOut"
       }
     )
   ] });