@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisTickWithTruncation.css.ts"],
-  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-4-0)';\nexport var tickStyle = '_z2zz8y2-3-4-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-4-0)';"],
+  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-5-0)';\nexport var tickStyle = '_z2zz8y2-3-5-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-5-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,YAAY;AAChB,IAAI,iBAAiB;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./xy-legend.css";
-var shapeIconWrapper = "_1lwufqz0-3-4-0";
+var shapeIconWrapper = "_1lwufqz0-3-5-0";
 export {
   shapeIconWrapper
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/legend/XYLegend/xy-legend.css.ts"],
-  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-4-0';"],
+  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

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

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

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

@@ -13,6 +13,7 @@ import {
 import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
 import { useApplyCallbackOnScroll } from "../../../../core/hooks/useApplyCallbackOnScroll.js";
 import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
+import { useFormatCategory } from "../../../hooks/useFormatCategory.js";
 import { useGetThresholds } from "../../../hooks/useGetThresholds.js";
 import { useVisibleAxesConfig } from "../../../hooks/useVisibleAxesConfig.js";
 import { useVisibleAxesScales } from "../../../hooks/useVisibleAxesScales.js";
@@ -133,6 +134,7 @@ function XYChartCrosshair({
   const axesScale = useVisibleAxesScales();
   const axesConfig = useVisibleAxesConfig();
   const axesIdToFormatter = useAxesFormatter();
+  const formatCategory = useFormatCategory();
   const { width, height } = useGridPlotSize();
   const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();
   const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } = useXYChartData();
@@ -160,7 +162,8 @@ function XYChartCrosshair({
     axesScale,
     axesConfig,
     axesIdToFormatter,
-    width
+    width,
+    formatCategory
   });
   return /* @__PURE__ */ jsx(
     XYChartCrosshairLines,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useFilteredSeriesIdsState } from '../../../store/selectors.js';\nimport { UndefinedContent, type TooltipContent } from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport {\n  chartCrosshairDataTransformer,\n  type CrosshairLabelsGetter,\n} from '../utils/chartCrosshairDataTransformer.js';\n\ntype XYChartCrosshairLinesProps = Readonly<{\n  getLabels: CrosshairLabelsGetter;\n  height: number;\n  thresholdOffset: ReturnType<typeof useGetThresholds>['offset'];\n  thresholdYAxes: ReturnType<typeof useGetThresholds>['yAxes'];\n  axisIdToScaleDomain: ReturnType<typeof useXYChartData>['axisIdToScaleDomain'];\n  seriesToMetadata: ReturnType<typeof useXYChartData>['seriesToMetadata'];\n  datapointMetadataMap: ReturnType<\n    typeof useXYChartData\n  >['datapointMetadataMap'];\n  axisIdToScales: ReturnType<typeof useXYChartScales>;\n  hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) => boolean;\n  chartBounds: DOMRect | undefined;\n  isBottomLabelRotated: boolean;\n  isTopLabelRotated: boolean;\n  widthWithBaseOffset: number;\n}>;\n\nfunction XYChartCrosshairLines({\n  getLabels,\n  height,\n  thresholdOffset,\n  thresholdYAxes,\n  axisIdToScaleDomain,\n  seriesToMetadata,\n  datapointMetadataMap,\n  axisIdToScales,\n  hasVisibleSeriesOnThresholdAxis,\n  chartBounds,\n  isBottomLabelRotated,\n  isTopLabelRotated,\n  widthWithBaseOffset,\n}: XYChartCrosshairLinesProps) {\n  useSelector(({ relativeX, relativeY }) => `${relativeX}-${relativeY}`);\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const tooltipContent = (data.metadata as TooltipContent) || UndefinedContent;\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const labels = getLabels({ position, pinned });\n\n  const leftOffset =\n    labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left)\n      ? thresholdOffset.left\n      : 0;\n  const rightOffset =\n    labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right)\n      ? thresholdOffset.right\n      : 0;\n  const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair = !isBand || isHorizontal || !pinned;\n  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const filteredSeriesIds = useFilteredSeriesIdsState();\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToScales = useXYChartScales();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n\n  const dispatch = useTooltipReducer();\n  const pinned = useSelector(({ pinned }) => pinned);\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const hasVisibleSeriesOnThresholdAxis = (() => {\n    if (!filteredSeriesIds) {\n      return (_axisIds: Set<string>) => true;\n    }\n    const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(\n      ([series]) => filteredSeriesIds.has(series.id),\n    );\n    return (axisIds: Set<string>) => {\n      return visibleSeriesEntries.some(([, series]) =>\n        axisIds.has(series.yAxis?.id ?? ''),\n      );\n    };\n  })();\n\n  const getLabels = chartCrosshairDataTransformer({\n    axesScale,\n    axesConfig,\n    axesIdToFormatter,\n    width,\n  });\n\n  return (\n    <XYChartCrosshairLines\n      getLabels={getLabels}\n      height={height}\n      thresholdOffset={thresholdOffset}\n      thresholdYAxes={thresholdYAxes}\n      axisIdToScaleDomain={axisIdToScaleDomain}\n      seriesToMetadata={seriesToMetadata}\n      datapointMetadataMap={datapointMetadataMap}\n      axisIdToScales={axisIdToScales}\n      hasVisibleSeriesOnThresholdAxis={hasVisibleSeriesOnThresholdAxis}\n      chartBounds={chartBounds}\n      isBottomLabelRotated={isBottomLabelRotated}\n      isTopLabelRotated={isTopLabelRotated}\n      widthWithBaseOffset={width}\n    />\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type RefObject, useMemo } from 'react';\n\nimport { crosshair } from './XYChartCrosshair.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../../core/components/overlay-tooltip/selectors.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useGetThresholds } from '../../../hooks/useGetThresholds.js';\nimport { useVisibleAxesConfig } from '../../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../../hooks/useVisibleAxesScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useFilteredSeriesIdsState } from '../../../store/selectors.js';\nimport { type TooltipContent, UndefinedContent } from '../../../types/state.js';\nimport {\n  isAreaTooltipContent,\n  isDotTooltipContent,\n  isLineTooltipContent,\n} from '../../../utils/type-guards.js';\nimport { relAccessor } from '../../../utils/value-representation.js';\nimport { calculateCrosshairCoordinates } from '../utils/calculate-crosshair-coordinates.js';\nimport {\n  chartCrosshairDataTransformer,\n  type CrosshairLabelsGetter,\n} from '../utils/chartCrosshairDataTransformer.js';\n\ntype XYChartCrosshairLinesProps = Readonly<{\n  getLabels: CrosshairLabelsGetter;\n  height: number;\n  thresholdOffset: ReturnType<typeof useGetThresholds>['offset'];\n  thresholdYAxes: ReturnType<typeof useGetThresholds>['yAxes'];\n  axisIdToScaleDomain: ReturnType<typeof useXYChartData>['axisIdToScaleDomain'];\n  seriesToMetadata: ReturnType<typeof useXYChartData>['seriesToMetadata'];\n  datapointMetadataMap: ReturnType<\n    typeof useXYChartData\n  >['datapointMetadataMap'];\n  axisIdToScales: ReturnType<typeof useXYChartScales>;\n  hasVisibleSeriesOnThresholdAxis: (axisIds: Set<string>) => boolean;\n  chartBounds: DOMRect | undefined;\n  isBottomLabelRotated: boolean;\n  isTopLabelRotated: boolean;\n  widthWithBaseOffset: number;\n}>;\n\nfunction XYChartCrosshairLines({\n  getLabels,\n  height,\n  thresholdOffset,\n  thresholdYAxes,\n  axisIdToScaleDomain,\n  seriesToMetadata,\n  datapointMetadataMap,\n  axisIdToScales,\n  hasVisibleSeriesOnThresholdAxis,\n  chartBounds,\n  isBottomLabelRotated,\n  isTopLabelRotated,\n  widthWithBaseOffset,\n}: XYChartCrosshairLinesProps) {\n  useSelector(({ relativeX, relativeY }) => `${relativeX}-${relativeY}`);\n  const { relativeX, relativeY, pinned, data } = useTooltipSnapshot();\n  const position =\n    relativeX !== null && relativeY !== null\n      ? { x: relativeX, y: relativeY }\n      : undefined;\n\n  const tooltipContent = (data.metadata as TooltipContent) || UndefinedContent;\n\n  const { xAxis, yAxis, variant, orientation, isStacked } =\n    seriesToMetadata.get(tooltipContent?.series) ?? {};\n\n  const isArea = isAreaTooltipContent(tooltipContent);\n  const isHorizontal = orientation === 'horizontal';\n\n  const calculatedCoordinates = useMemo(() => {\n    const tooltipContentHasCenteredCrosshair =\n      isDotTooltipContent(tooltipContent) ||\n      isLineTooltipContent(tooltipContent) ||\n      isAreaTooltipContent(tooltipContent);\n\n    if (\n      !pinned ||\n      !tooltipContentHasCenteredCrosshair ||\n      !tooltipContent.series ||\n      !tooltipContent.datapoint\n    ) {\n      return null;\n    }\n\n    const xRelAccessor = xAxis\n      ? relAccessor(xAxis, axisIdToScaleDomain)\n      : undefined;\n    const yRelAccessor = yAxis\n      ? relAccessor(yAxis, axisIdToScaleDomain)\n      : undefined;\n\n    return calculateCrosshairCoordinates({\n      pinned,\n      tooltipContentHasCenteredCrosshair,\n      tooltipContentSeries: tooltipContent.series,\n      datapoint: tooltipContent.datapoint,\n      axisIdToScales,\n      datapointMetadataMap,\n      xRelAccessor,\n      yRelAccessor,\n      isArea,\n      isHorizontal,\n      isStacked,\n    });\n  }, [\n    tooltipContent,\n    xAxis,\n    yAxis,\n    axisIdToScaleDomain,\n    pinned,\n    axisIdToScales,\n    datapointMetadataMap,\n    isArea,\n    isHorizontal,\n    isStacked,\n  ]);\n\n  const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };\n\n  if (!position) {\n    return null;\n  }\n\n  const labels = getLabels({ position, pinned });\n\n  const leftOffset =\n    labels.left && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.left)\n      ? thresholdOffset.left\n      : 0;\n  const rightOffset =\n    labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right)\n      ? thresholdOffset.right\n      : 0;\n  const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;\n\n  const isBand = variant === 'band';\n  const showHorizontalCrosshair = !isBand || isHorizontal || !pinned;\n  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;\n\n  return (\n    <svg className={clsx(plotLayout, crosshair)}>\n      {showHorizontalCrosshair && (\n        <HorizontalCrosshair\n          dashed={!pinned}\n          leftLabel={labels.left}\n          rightLabel={labels.right}\n          y={coordinates.y}\n          width={widthWithOffset}\n          height={height}\n          chartBounds={chartBounds}\n          leftOffset={leftOffset}\n          rightOffset={rightOffset}\n        />\n      )}\n      {showVerticalCrosshair && (\n        <VerticalCrosshair\n          dashed={!pinned}\n          bottomLabel={labels.bottom}\n          topLabel={labels.top}\n          isBottomLabelRotated={isBottomLabelRotated}\n          isTopLabelRotated={isTopLabelRotated}\n          x={coordinates.x}\n          height={height}\n          width={widthWithOffset}\n          chartBounds={chartBounds}\n        />\n      )}\n    </svg>\n  );\n}\n\nexport function XYChartCrosshair({\n  chartRef,\n}: Readonly<{\n  chartRef: RefObject<HTMLDivElement | null>;\n}>) {\n  const filteredSeriesIds = useFilteredSeriesIdsState();\n  const axesScale = useVisibleAxesScales();\n  const axesConfig = useVisibleAxesConfig();\n  const axesIdToFormatter = useAxesFormatter();\n  const formatCategory = useFormatCategory();\n  const { width, height } = useGridPlotSize();\n  const { offset: thresholdOffset, yAxes: thresholdYAxes } = useGetThresholds();\n  const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToScales = useXYChartScales();\n\n  const chartBounds = chartRef.current?.getBoundingClientRect();\n\n  const dispatch = useTooltipReducer();\n  const pinned = useSelector(({ pinned }) => pinned);\n  useApplyCallbackOnScroll(pinned, dispatch({ type: 'RESET_TOOLTIP' }));\n\n  const isBottomLabelRotated =\n    axesConfig['bottom']?.tickLabelLayout === 'vertical';\n  const isTopLabelRotated = axesConfig['top']?.tickLabelLayout === 'vertical';\n\n  const hasVisibleSeriesOnThresholdAxis = (() => {\n    if (!filteredSeriesIds) {\n      return (_axisIds: Set<string>) => true;\n    }\n    const visibleSeriesEntries = [...seriesToMetadata.entries()].filter(\n      ([series]) => filteredSeriesIds.has(series.id),\n    );\n    return (axisIds: Set<string>) => {\n      return visibleSeriesEntries.some(([, series]) =>\n        axisIds.has(series.yAxis?.id ?? ''),\n      );\n    };\n  })();\n\n  const getLabels = chartCrosshairDataTransformer({\n    axesScale,\n    axesConfig,\n    axesIdToFormatter,\n    width,\n    formatCategory,\n  });\n\n  return (\n    <XYChartCrosshairLines\n      getLabels={getLabels}\n      height={height}\n      thresholdOffset={thresholdOffset}\n      thresholdYAxes={thresholdYAxes}\n      axisIdToScaleDomain={axisIdToScaleDomain}\n      seriesToMetadata={seriesToMetadata}\n      datapointMetadataMap={datapointMetadataMap}\n      axisIdToScales={axisIdToScales}\n      hasVisibleSeriesOnThresholdAxis={hasVisibleSeriesOnThresholdAxis}\n      chartBounds={chartBounds}\n      isBottomLabelRotated={isBottomLabelRotated}\n      isTopLabelRotated={isTopLabelRotated}\n      widthWithBaseOffset={width}\n    />\n  );\n}\n"],
+  "mappings": "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",
   "names": ["relativeX", "relativeY", "pinned"]
 }

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

@@ -1,5 +1,5 @@
 import "./XYChartCrosshair.css";
-var crosshair = "_1bbe5uo0-3-4-0";
+var crosshair = "_1bbe5uo0-3-5-0";
 export {
   crosshair
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartCrosshair.css.ts"],
-  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-4-0';"],
+  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./XYChartExplore.css";
-var datapointIndicatorLayout = "_cd1yys1-3-4-0 _13lzg4k0-3-4-0";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-4-0 _13lzg4k0-3-4-0";
+var datapointIndicatorLayout = "_cd1yys1-3-5-0 _13lzg4k0-3-5-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-5-0 _13lzg4k0-3-5-0";
 export {
   datapointIndicatorLayout,
   datapointIndicatorShiftedLayout

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/explore/XYChartExplore.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-4-0 _13lzg4k0-3-4-0';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-4-0 _13lzg4k0-3-4-0';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-5-0 _13lzg4k0-3-5-0';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-5-0 _13lzg4k0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,2BAA2B;AAC/B,IAAI,kCAAkC;",
   "names": []
 }

package/esm/charts/xy-chart/components/overlay/utils/chartCrosshairDataTransformer.js

@@ -36,7 +36,8 @@ const chartCrosshairDataTransformer = ({
   axesConfig,
   axesIdToFormatter,
   width,
-  axes = ["left", "right", "bottom", "top"]
+  axes = ["left", "right", "bottom", "top"],
+  formatCategory
 }) => {
   const getFormatter = (axis) => {
     const axisConfig = axesConfig[axis];
@@ -62,13 +63,19 @@ const chartCrosshairDataTransformer = ({
     if (pinned) {
       return defaultLabels();
     }
-    const getLabel = (axis, formatter) => getMagnifierLabel(
-      axesConfig[axis]?.unit,
-      coordinates[axis],
-      formatter,
-      position,
-      axesScale[axis]
-    );
+    const getLabel = (axis, formatter) => {
+      const raw = getMagnifierLabel(
+        axesConfig[axis]?.unit,
+        coordinates[axis],
+        formatter,
+        position,
+        axesScale[axis]
+      );
+      if (raw === null || !formatCategory) {
+        return raw;
+      }
+      return formatCategory(axis, raw) ?? raw;
+    };
     return formatters.reduce(accumulateLabels(getLabel), defaultLabels());
   };
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/overlay/utils/chartCrosshairDataTransformer.ts"],
-  "sourcesContent": ["import { units } from '@dynatrace-sdk/units';\n\nimport { getAxisFormatterWithTimeFallback } from './get-axis-formatter-with-time-fallback.js';\nimport {\n  getMagnifierLabel,\n  MagnifierFormatter,\n} from '../../../../core/components/crosshair/utils/get-magnifier-label.js';\nimport {\n  FormatterWithPrecision,\n  TimeFormatter,\n} from '../../../../core/types/formatter.js';\nimport { defaultUnitFormatter } from '../../../../core/utils/defaultUnitFormatter.js';\nimport {\n  AxisIdToFormatter,\n  XYChartAxisInternal,\n  XYChartVisibleAxesConfig,\n  XYChartVisibleAxesScales,\n} from '../../../types/xy-chart-internals.js';\n\ntype AXIS = 'left' | 'right' | 'bottom' | 'top';\ntype AXES = AXIS[];\ntype Formatters = [AXIS, MagnifierFormatter][];\ntype LabelsAccumulator = {\n  left: string | undefined;\n  right: string | undefined;\n  bottom: string | undefined;\n  top: string | undefined;\n};\ntype GetFormatter = (\n  axis: AXIS,\n) => FormatterWithPrecision | TimeFormatter | undefined;\ntype GetLabel = (\n  axis: AxisWithFormatter[0],\n  formatter: AxisWithFormatter[1],\n) => string | undefined;\n\ntype AxisWithFormatter = Formatters[number];\n\nconst coordinates = {\n  top: 'x',\n  bottom: 'x',\n  left: 'y',\n  right: 'y',\n} as const;\n\nconst defaultLabels = () => ({\n  left: undefined,\n  right: undefined,\n  bottom: undefined,\n  top: undefined,\n});\n\ntype PartialAxesConfig = {\n  [key in keyof XYChartVisibleAxesConfig]:\n    | Pick<\n        XYChartAxisInternal,\n        'id' | 'formatter' | 'type' | 'unit' | 'isRelative'\n      >\n    | undefined;\n};\n\nexport type ChartCrosshairDataTransformer = (args: {\n  axesScale: XYChartVisibleAxesScales;\n  axesConfig: PartialAxesConfig;\n  axesIdToFormatter: AxisIdToFormatter;\n  width: number;\n  axes?: AXES;\n}) => CrosshairLabelsGetter;\n\nexport type CrosshairLabelsGetter = (args: {\n  position: { x: number; y: number };\n  pinned: boolean;\n}) => LabelsAccumulator;\n\nconst accumulateFormatters =\n  (getFormatter: GetFormatter) => (acc: Formatters, axis: AXIS) => {\n    const formatter = getFormatter(axis);\n\n    if (formatter) {\n      acc.push([axis, formatter]);\n    }\n    return acc;\n  };\n\nconst accumulateLabels =\n  (getLabel: GetLabel) =>\n  (acc: LabelsAccumulator, axisWithFormatter: AxisWithFormatter) => {\n    const [axis, formatter] = axisWithFormatter;\n    const label = getLabel(axis, formatter);\n\n    if (label) {\n      acc[axis] = label;\n    }\n\n    return acc;\n  };\n\nexport const chartCrosshairDataTransformer: ChartCrosshairDataTransformer = ({\n  axesScale,\n  axesConfig,\n  axesIdToFormatter,\n  width,\n  axes = ['left', 'right', 'bottom', 'top'],\n}) => {\n  const getFormatter: GetFormatter = (axis: AXIS) => {\n    const axisConfig = axesConfig[axis];\n    const scale = axesScale[axis];\n    if (axisConfig) {\n      if (axisConfig.isRelative) {\n        return defaultUnitFormatter(units.percentage.percent);\n      }\n      return getAxisFormatterWithTimeFallback({\n        axisConfig,\n        axisId: axisConfig.id,\n        scale,\n        axesIdToFormatter,\n        width,\n      });\n    }\n  };\n\n  const formatters = axes.reduce(\n    accumulateFormatters(getFormatter),\n    [] as Formatters,\n  );\n\n  return ({ position, pinned }) => {\n    if (pinned) {\n      return defaultLabels();\n    }\n\n    const getLabel: GetLabel = (axis, formatter) =>\n      getMagnifierLabel(\n        axesConfig[axis]?.unit,\n        coordinates[axis],\n        formatter,\n        position,\n        axesScale[axis],\n      );\n\n    return formatters.reduce(accumulateLabels(getLabel), defaultLabels());\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,wCAAwC;AACjD;AAAA,EACE;AAAA,OAEK;AAKP,SAAS,4BAA4B;AA2BrC,MAAM,cAAc;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,gBAAgB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAwBA,MAAM,uBACJ,CAAC,iBAA+B,CAAC,KAAiB,SAAe;AAC/D,QAAM,YAAY,aAAa,IAAI;AAEnC,MAAI,WAAW;AACb,QAAI,KAAK,CAAC,MAAM,SAAS,CAAC;AAAA,EAC5B;AACA,SAAO;AACT;AAEF,MAAM,mBACJ,CAAC,aACD,CAAC,KAAwB,sBAAyC;AAChE,QAAM,CAAC,MAAM,SAAS,IAAI;AAC1B,QAAM,QAAQ,SAAS,MAAM,SAAS;AAEtC,MAAI,OAAO;AACT,QAAI,IAAI,IAAI;AAAA,EACd;AAEA,SAAO;AACT;AAEK,MAAM,gCAA+D,CAAC;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,CAAC,QAAQ,SAAS,UAAU,KAAK;AAC1C,MAAM;AACJ,QAAM,eAA6B,CAAC,SAAe;AACjD,UAAM,aAAa,WAAW,IAAI;AAClC,UAAM,QAAQ,UAAU,IAAI;AAC5B,QAAI,YAAY;AACd,UAAI,WAAW,YAAY;AACzB,eAAO,qBAAqB,MAAM,WAAW,OAAO;AAAA,MACtD;AACA,aAAO,iCAAiC;AAAA,QACtC;AAAA,QACA,QAAQ,WAAW;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAM,aAAa,KAAK;AAAA,IACtB,qBAAqB,YAAY;AAAA,IACjC,CAAC;AAAA,EACH;AAEA,SAAO,CAAC,EAAE,UAAU,OAAO,MAAM;AAC/B,QAAI,QAAQ;AACV,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,WAAqB,CAAC,MAAM,cAChC;AAAA,MACE,WAAW,IAAI,GAAG;AAAA,MAClB,YAAY,IAAI;AAAA,MAChB;AAAA,MACA;AAAA,MACA,UAAU,IAAI;AAAA,IAChB;AAEF,WAAO,WAAW,OAAO,iBAAiB,QAAQ,GAAG,cAAc,CAAC;AAAA,EACtE;AACF;",
+  "sourcesContent": ["import { units } from '@dynatrace-sdk/units';\n\nimport { getAxisFormatterWithTimeFallback } from './get-axis-formatter-with-time-fallback.js';\nimport {\n  getMagnifierLabel,\n  MagnifierFormatter,\n} from '../../../../core/components/crosshair/utils/get-magnifier-label.js';\nimport {\n  FormatterWithPrecision,\n  TimeFormatter,\n} from '../../../../core/types/formatter.js';\nimport { defaultUnitFormatter } from '../../../../core/utils/defaultUnitFormatter.js';\nimport type { FormatCategory } from '../../../hooks/useFormatCategory.js';\nimport {\n  AxisIdToFormatter,\n  XYChartAxisInternal,\n  XYChartVisibleAxesConfig,\n  XYChartVisibleAxesScales,\n} from '../../../types/xy-chart-internals.js';\n\ntype AXIS = 'left' | 'right' | 'bottom' | 'top';\ntype AXES = AXIS[];\ntype Formatters = [AXIS, MagnifierFormatter][];\ntype LabelsAccumulator = {\n  left: string | undefined;\n  right: string | undefined;\n  bottom: string | undefined;\n  top: string | undefined;\n};\ntype GetFormatter = (\n  axis: AXIS,\n) => FormatterWithPrecision | TimeFormatter | undefined;\ntype GetLabel = (\n  axis: AxisWithFormatter[0],\n  formatter: AxisWithFormatter[1],\n) => string | undefined;\n\ntype AxisWithFormatter = Formatters[number];\n\nconst coordinates = {\n  top: 'x',\n  bottom: 'x',\n  left: 'y',\n  right: 'y',\n} as const;\n\nconst defaultLabels = () => ({\n  left: undefined,\n  right: undefined,\n  bottom: undefined,\n  top: undefined,\n});\n\ntype PartialAxesConfig = {\n  [key in keyof XYChartVisibleAxesConfig]:\n    | Pick<\n        XYChartAxisInternal,\n        'id' | 'formatter' | 'type' | 'unit' | 'isRelative'\n      >\n    | undefined;\n};\n\nexport type ChartCrosshairDataTransformer = (args: {\n  axesScale: XYChartVisibleAxesScales;\n  axesConfig: PartialAxesConfig;\n  axesIdToFormatter: AxisIdToFormatter;\n  width: number;\n  axes?: AXES;\n  formatCategory?: FormatCategory;\n}) => CrosshairLabelsGetter;\n\nexport type CrosshairLabelsGetter = (args: {\n  position: { x: number; y: number };\n  pinned: boolean;\n}) => LabelsAccumulator;\n\nconst accumulateFormatters =\n  (getFormatter: GetFormatter) => (acc: Formatters, axis: AXIS) => {\n    const formatter = getFormatter(axis);\n\n    if (formatter) {\n      acc.push([axis, formatter]);\n    }\n    return acc;\n  };\n\nconst accumulateLabels =\n  (getLabel: GetLabel) =>\n  (acc: LabelsAccumulator, axisWithFormatter: AxisWithFormatter) => {\n    const [axis, formatter] = axisWithFormatter;\n    const label = getLabel(axis, formatter);\n\n    if (label) {\n      acc[axis] = label;\n    }\n\n    return acc;\n  };\n\nexport const chartCrosshairDataTransformer: ChartCrosshairDataTransformer = ({\n  axesScale,\n  axesConfig,\n  axesIdToFormatter,\n  width,\n  axes = ['left', 'right', 'bottom', 'top'],\n  formatCategory,\n}) => {\n  const getFormatter: GetFormatter = (axis: AXIS) => {\n    const axisConfig = axesConfig[axis];\n    const scale = axesScale[axis];\n    if (axisConfig) {\n      if (axisConfig.isRelative) {\n        return defaultUnitFormatter(units.percentage.percent);\n      }\n      return getAxisFormatterWithTimeFallback({\n        axisConfig,\n        axisId: axisConfig.id,\n        scale,\n        axesIdToFormatter,\n        width,\n      });\n    }\n  };\n\n  const formatters = axes.reduce(\n    accumulateFormatters(getFormatter),\n    [] as Formatters,\n  );\n\n  return ({ position, pinned }) => {\n    if (pinned) {\n      return defaultLabels();\n    }\n\n    const getLabel: GetLabel = (axis, formatter) => {\n      const raw = getMagnifierLabel(\n        axesConfig[axis]?.unit,\n        coordinates[axis],\n        formatter,\n        position,\n        axesScale[axis],\n      );\n      if (raw === null || !formatCategory) {\n        return raw;\n      }\n      return formatCategory(axis, raw) ?? raw;\n    };\n\n    return formatters.reduce(accumulateLabels(getLabel), defaultLabels());\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,wCAAwC;AACjD;AAAA,EACE;AAAA,OAEK;AAKP,SAAS,4BAA4B;AA4BrC,MAAM,cAAc;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;AAEA,MAAM,gBAAgB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AACP;AAyBA,MAAM,uBACJ,CAAC,iBAA+B,CAAC,KAAiB,SAAe;AAC/D,QAAM,YAAY,aAAa,IAAI;AAEnC,MAAI,WAAW;AACb,QAAI,KAAK,CAAC,MAAM,SAAS,CAAC;AAAA,EAC5B;AACA,SAAO;AACT;AAEF,MAAM,mBACJ,CAAC,aACD,CAAC,KAAwB,sBAAyC;AAChE,QAAM,CAAC,MAAM,SAAS,IAAI;AAC1B,QAAM,QAAQ,SAAS,MAAM,SAAS;AAEtC,MAAI,OAAO;AACT,QAAI,IAAI,IAAI;AAAA,EACd;AAEA,SAAO;AACT;AAEK,MAAM,gCAA+D,CAAC;AAAA,EAC3E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,CAAC,QAAQ,SAAS,UAAU,KAAK;AAAA,EACxC;AACF,MAAM;AACJ,QAAM,eAA6B,CAAC,SAAe;AACjD,UAAM,aAAa,WAAW,IAAI;AAClC,UAAM,QAAQ,UAAU,IAAI;AAC5B,QAAI,YAAY;AACd,UAAI,WAAW,YAAY;AACzB,eAAO,qBAAqB,MAAM,WAAW,OAAO;AAAA,MACtD;AACA,aAAO,iCAAiC;AAAA,QACtC;AAAA,QACA,QAAQ,WAAW;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAM,aAAa,KAAK;AAAA,IACtB,qBAAqB,YAAY;AAAA,IACjC,CAAC;AAAA,EACH;AAEA,SAAO,CAAC,EAAE,UAAU,OAAO,MAAM;AAC/B,QAAI,QAAQ;AACV,aAAO,cAAc;AAAA,IACvB;AAEA,UAAM,WAAqB,CAAC,MAAM,cAAc;AAC9C,YAAM,MAAM;AAAA,QACV,WAAW,IAAI,GAAG;AAAA,QAClB,YAAY,IAAI;AAAA,QAChB;AAAA,QACA;AAAA,QACA,UAAU,IAAI;AAAA,MAChB;AACA,UAAI,QAAQ,QAAQ,CAAC,gBAAgB;AACnC,eAAO;AAAA,MACT;AACA,aAAO,eAAe,MAAM,GAAG,KAAK;AAAA,IACtC;AAEA,WAAO,WAAW,OAAO,iBAAiB,QAAQ,GAAG,cAAc,CAAC;AAAA,EACtE;AACF;",
   "names": []
 }

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

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

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

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { units } from "@dynatrace-sdk/units";
-import { Duration } from "./Duration.js";
-import { headerItem } from "./TooltipHeader.sty.js";
+import { getHeaderProps } from "./get-header-props.js";
 import { useGridPlotSize } from "../../../core/components/chart-grid/hooks/useGridPlotSize.js";
+import { OverlayTooltip } from "../../../core/components/overlay-tooltip/OverlayTooltip.js";
 import { defaultUnitFormatter } from "../../../core/utils/defaultUnitFormatter.js";
 import { safeGet } from "../../../core/utils/safe-get.js";
 import { useAxesFormatter } from "../../hooks/useAxesFormatter.js";
@@ -18,7 +18,7 @@ function getAxisFormatter(axesIdToFormatter, axisConfig) {
   }
   return safeGet(axesIdToFormatter, axisConfig.id);
 }
-const TooltipHeader = () => {
+const TooltipHeader = (props) => {
   const selectState = useSelectState();
   const axesIdToFormatter = useAxesFormatter();
   const { top: topScale, bottom: bottomScale } = useVisibleAxesScales();
@@ -33,30 +33,30 @@ const TooltipHeader = () => {
   const end = selectState.selectionPercentage ? width * selectState.selectionPercentage[1] / 100 : selectState.end.relative.x;
   const topDuration = topConfig && topScale && !!topFormatter;
   const bottomDuration = bottomConfig && bottomScale && !!bottomFormatter;
-  const bothDuration = topDuration && bottomDuration;
-  return /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
-    topDuration && /* @__PURE__ */ jsx(
-      Duration,
-      {
-        axisConfig: topConfig,
-        scale: topScale,
-        formatter: topFormatter,
-        startPixels: start,
-        endPixels: end
-      }
-    ),
-    bothDuration && /* @__PURE__ */ jsx("div", { className: headerItem }),
-    bottomDuration && /* @__PURE__ */ jsx(
-      Duration,
-      {
-        axisConfig: bottomConfig,
-        scale: bottomScale,
-        formatter: bottomFormatter,
-        startPixels: start,
-        endPixels: end
-      }
-    )
-  ] });
+  const header1Props = topDuration ? getHeaderProps({
+    axisConfig: topConfig,
+    scale: topScale,
+    formatter: topFormatter,
+    startPixels: start,
+    endPixels: end,
+    suffix: "1"
+  }) : {};
+  const header2Props = bottomDuration ? getHeaderProps({
+    axisConfig: bottomConfig,
+    scale: bottomScale,
+    formatter: bottomFormatter,
+    startPixels: start,
+    endPixels: end,
+    suffix: "2"
+  }) : {};
+  return /* @__PURE__ */ jsx(
+    OverlayTooltip.Header,
+    {
+      ...header1Props,
+      ...header2Props,
+      subheader: props.subheader
+    }
+  );
 };
 export {
   TooltipHeader

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/selection/TooltipHeader.tsx"],
-  "sourcesContent": ["import { units } from '@dynatrace-sdk/units';\n\nimport { Duration } from './Duration.js';\nimport { headerItem } from './TooltipHeader.sty.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { defaultUnitFormatter } from '../../../core/utils/defaultUnitFormatter.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useSelectState } from '../../store/selectors.js';\nimport type {\n  AxisIdToFormatter,\n  XYChartAxisInternal,\n} from '../../types/xy-chart-internals.js';\n\nfunction getAxisFormatter(\n  axesIdToFormatter: AxisIdToFormatter,\n  axisConfig?: XYChartAxisInternal,\n) {\n  if (!axisConfig) {\n    return undefined;\n  }\n  if (axisConfig.isRelative) {\n    return defaultUnitFormatter(units.percentage.percent);\n  }\n  return safeGet(axesIdToFormatter, axisConfig.id);\n}\n\nexport const TooltipHeader = () => {\n  const selectState = useSelectState();\n  const axesIdToFormatter = useAxesFormatter();\n  const { top: topScale, bottom: bottomScale } = useVisibleAxesScales();\n  const { top: topConfig, bottom: bottomConfig } = useVisibleAxesConfig();\n  const { width } = useGridPlotSize();\n\n  if (!selectState) {\n    return null;\n  }\n\n  const topFormatter = getAxisFormatter(axesIdToFormatter, topConfig);\n  const bottomFormatter = getAxisFormatter(axesIdToFormatter, bottomConfig);\n\n  const start = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : selectState.start.relative.x;\n  const end = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : selectState.end.relative.x;\n\n  const topDuration = topConfig && topScale && !!topFormatter;\n  const bottomDuration = bottomConfig && bottomScale && !!bottomFormatter;\n  const bothDuration = topDuration && bottomDuration;\n\n  return (\n    <div style={{ width: '100%' }}>\n      {topDuration && (\n        <Duration\n          axisConfig={topConfig}\n          scale={topScale}\n          formatter={topFormatter}\n          startPixels={start}\n          endPixels={end}\n        />\n      )}\n      {bothDuration && <div className={headerItem} />}\n      {bottomDuration && (\n        <Duration\n          axisConfig={bottomConfig}\n          scale={bottomScale}\n          formatter={bottomFormatter}\n          startPixels={start}\n          endPixels={end}\n        />\n      )}\n    </div>\n  );\n};\n"],
-  "mappings": "AAuDI,SAEI,KAFJ;AAvDJ,SAAS,aAAa;AAEtB,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAM/B,SAAS,iBACP,mBACA,YACA;AACA,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,MAAI,WAAW,YAAY;AACzB,WAAO,qBAAqB,MAAM,WAAW,OAAO;AAAA,EACtD;AACA,SAAO,QAAQ,mBAAmB,WAAW,EAAE;AACjD;AAEO,MAAM,gBAAgB,MAAM;AACjC,QAAM,cAAc,eAAe;AACnC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,KAAK,UAAU,QAAQ,YAAY,IAAI,qBAAqB;AACpE,QAAM,EAAE,KAAK,WAAW,QAAQ,aAAa,IAAI,qBAAqB;AACtE,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,iBAAiB,mBAAmB,SAAS;AAClE,QAAM,kBAAkB,iBAAiB,mBAAmB,YAAY;AAExE,QAAM,QAAQ,YAAY,sBACrB,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,MAAM,SAAS;AAC/B,QAAM,MAAM,YAAY,sBACnB,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,IAAI,SAAS;AAE7B,QAAM,cAAc,aAAa,YAAY,CAAC,CAAC;AAC/C,QAAM,iBAAiB,gBAAgB,eAAe,CAAC,CAAC;AACxD,QAAM,eAAe,eAAe;AAEpC,SACE,qBAAC,SAAI,OAAO,EAAE,OAAO,OAAO,GACzB;AAAA,mBACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,WAAW;AAAA,QACX,aAAa;AAAA,QACb,WAAW;AAAA;AAAA,IACb;AAAA,IAED,gBAAgB,oBAAC,SAAI,WAAW,YAAY;AAAA,IAC5C,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,WAAW;AAAA,QACX,aAAa;AAAA,QACb,WAAW;AAAA;AAAA,IACb;AAAA,KAEJ;AAEJ;",
+  "sourcesContent": ["import { units } from '@dynatrace-sdk/units';\n\nimport { getHeaderProps } from './get-header-props.js';\nimport { useGridPlotSize } from '../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { defaultUnitFormatter } from '../../../core/utils/defaultUnitFormatter.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useVisibleAxesConfig } from '../../hooks/useVisibleAxesConfig.js';\nimport { useVisibleAxesScales } from '../../hooks/useVisibleAxesScales.js';\nimport { useSelectState } from '../../store/selectors.js';\nimport type {\n  AxisIdToFormatter,\n  XYChartAxisInternal,\n} from '../../types/xy-chart-internals.js';\n\nfunction getAxisFormatter(\n  axesIdToFormatter: AxisIdToFormatter,\n  axisConfig?: XYChartAxisInternal,\n) {\n  if (!axisConfig) {\n    return undefined;\n  }\n  if (axisConfig.isRelative) {\n    return defaultUnitFormatter(units.percentage.percent);\n  }\n  return safeGet(axesIdToFormatter, axisConfig.id);\n}\n\nexport const TooltipHeader = (props: { subheader: string }) => {\n  const selectState = useSelectState();\n  const axesIdToFormatter = useAxesFormatter();\n  const { top: topScale, bottom: bottomScale } = useVisibleAxesScales();\n  const { top: topConfig, bottom: bottomConfig } = useVisibleAxesConfig();\n  const { width } = useGridPlotSize();\n\n  if (!selectState) {\n    return null;\n  }\n\n  const topFormatter = getAxisFormatter(axesIdToFormatter, topConfig);\n  const bottomFormatter = getAxisFormatter(axesIdToFormatter, bottomConfig);\n\n  const start = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[0]) / 100\n    : selectState.start.relative.x;\n  const end = selectState.selectionPercentage\n    ? (width * selectState.selectionPercentage[1]) / 100\n    : selectState.end.relative.x;\n\n  const topDuration = topConfig && topScale && !!topFormatter;\n  const bottomDuration = bottomConfig && bottomScale && !!bottomFormatter;\n\n  const header1Props = topDuration\n    ? getHeaderProps({\n        axisConfig: topConfig,\n        scale: topScale,\n        formatter: topFormatter,\n        startPixels: start,\n        endPixels: end,\n        suffix: '1',\n      })\n    : {};\n  const header2Props = bottomDuration\n    ? getHeaderProps({\n        axisConfig: bottomConfig,\n        scale: bottomScale,\n        formatter: bottomFormatter,\n        startPixels: start,\n        endPixels: end,\n        suffix: '2',\n      })\n    : {};\n\n  return (\n    <OverlayTooltip.Header\n      {...header1Props}\n      {...header2Props}\n      subheader={props.subheader}\n    />\n  );\n};\n"],
+  "mappings": "AA2EI;AA3EJ,SAAS,aAAa;AAEtB,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,sBAAsB;AAM/B,SAAS,iBACP,mBACA,YACA;AACA,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,MAAI,WAAW,YAAY;AACzB,WAAO,qBAAqB,MAAM,WAAW,OAAO;AAAA,EACtD;AACA,SAAO,QAAQ,mBAAmB,WAAW,EAAE;AACjD;AAEO,MAAM,gBAAgB,CAAC,UAAiC;AAC7D,QAAM,cAAc,eAAe;AACnC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,EAAE,KAAK,UAAU,QAAQ,YAAY,IAAI,qBAAqB;AACpE,QAAM,EAAE,KAAK,WAAW,QAAQ,aAAa,IAAI,qBAAqB;AACtE,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,MAAI,CAAC,aAAa;AAChB,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,iBAAiB,mBAAmB,SAAS;AAClE,QAAM,kBAAkB,iBAAiB,mBAAmB,YAAY;AAExE,QAAM,QAAQ,YAAY,sBACrB,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,MAAM,SAAS;AAC/B,QAAM,MAAM,YAAY,sBACnB,QAAQ,YAAY,oBAAoB,CAAC,IAAK,MAC/C,YAAY,IAAI,SAAS;AAE7B,QAAM,cAAc,aAAa,YAAY,CAAC,CAAC;AAC/C,QAAM,iBAAiB,gBAAgB,eAAe,CAAC,CAAC;AAExD,QAAM,eAAe,cACjB,eAAe;AAAA,IACb,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,WAAW;AAAA,IACX,QAAQ;AAAA,EACV,CAAC,IACD,CAAC;AACL,QAAM,eAAe,iBACjB,eAAe;AAAA,IACb,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AAAA,IACX,aAAa;AAAA,IACb,WAAW;AAAA,IACX,QAAQ;AAAA,EACV,CAAC,IACD,CAAC;AAEL,SACE;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,WAAW,MAAM;AAAA;AAAA,EACnB;AAEJ;",
   "names": []
 }

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

@@ -1,6 +1,6 @@
 import "./TooltipHeader.css";
-var formattedTimeframe = "_biijte1-3-4-0";
-var headerItem = "_biijte0-3-4-0";
+var formattedTimeframe = "_biijte1-3-5-0";
+var headerItem = "_biijte0-3-5-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-4-0';\nexport var headerItem = '_biijte0-3-4-0';"],
+  "sourcesContent": ["import './TooltipHeader.css';\nexport var formattedTimeframe = '_biijte1-3-5-0';\nexport var headerItem = '_biijte0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;AACzB,IAAI,aAAa;",
   "names": []
 }

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

@@ -12,6 +12,7 @@ import { useAreaData } from "../../hooks/useAreaData.js";
 import { useAxesFormatter } from "../../hooks/useAxesFormatter.js";
 import { useBarData } from "../../hooks/useBarData.js";
 import { useDotData } from "../../hooks/useDotData.js";
+import { useFormatCategory } from "../../hooks/useFormatCategory.js";
 import { useLineData } from "../../hooks/useLineData.js";
 import { useRectData } from "../../hooks/useRectData.js";
 import { useSyncedXScaleByPriority } from "../../hooks/useSyncedXScaleByPriority.js";
@@ -57,6 +58,7 @@ const XYChartSelectionArea = () => {
   const { seriesToMetadata: rectSeriesToMetadata } = useRectData();
   const { seriesToMetadata: barSeriesToMetadata } = useBarData();
   const { seriesToMetadata: areaSeriesToMetadata } = useAreaData();
+  const formatCategory = useFormatCategory();
   const canZoom = axesMetadata.isZoomEnabled;
   if (isUndefined(selectState) || !chartRef.current) {
     return null;
@@ -105,7 +107,10 @@ const XYChartSelectionArea = () => {
         width
       );
     } else if (isCategoricalScale(axisConfig)) {
-      return (value) => scaleBandInvert(axisConfig.axisScale)(value);
+      return (value) => {
+        const raw = scaleBandInvert(axisConfig.axisScale)(value);
+        return (raw && formatCategory(config, raw)) ?? raw;
+      };
     }
   };
   const selectionStart = selectState.selectionPercentage ? width * selectState.selectionPercentage[0] / 100 : start.relative.x;

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 { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.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 { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport { reduceExploreSelect } from '../../store/reducer-explorer.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 { overlayRef: chartRef } = useOverlay();\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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",
+  "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 { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.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 { useFormatCategory } from '../../hooks/useFormatCategory.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 { useXYChartScales } from '../../hooks/useXYChartScales.js';\nimport { useXYChartSelectionAreaRef } from '../../hooks/useXYChartSelectionAreaRef.js';\nimport { reduceExploreSelect } from '../../store/reducer-explorer.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 { overlayRef: chartRef } = useOverlay();\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  const formatCategory = useFormatCategory();\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) => {\n        const raw = scaleBandInvert(axisConfig.axisScale)(value);\n        return (raw && formatCategory(config, raw)) ?? raw;\n      };\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/selection/XYChartSelectionAreaTooltip.js

@@ -5,10 +5,10 @@ import { ZoomToSelectionIcon } from "@dynatrace/strato-icons";
 import { TooltipHeader } from "./TooltipHeader.js";
 import { getCustomContextMenuItems } from "../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js";
 import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
+import { OverlayTooltip } from "../../../core/components/overlay-tooltip/OverlayTooltip.js";
 import { SelectionTooltipWithAsyncActions } from "../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js";
 import { getSelectionTooltipPosition } from "../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js";
-import { ChartTooltip } from "../../../core/components/tooltip/ChartTooltip/ChartTooltip.js";
-import { useScrollResponsiveChartBounds } from "../../../core/hooks/useScrollResponsiveChartBounds.js";
+import { usePointerAndScrollResponsiveChartBounds } from "../../../core/hooks/usePointerAndScrollResponsiveChartBounds.js";
 import { useSelectConfig } from "../../hooks/useSelectConfig.js";
 import { useXYChartData } from "../../hooks/useXYChartData.js";
 import { XYCHART_MESSAGES } from "../../messages/messages.js";
@@ -75,7 +75,10 @@ const DynamicSelectionAreaTooltip = ({
   const intl = useIntl();
   const zoomToSelection = useZoomToSelection();
   const { overlayRef: chartRef } = useOverlay();
-  const chartBounds = useScrollResponsiveChartBounds(chartRef, true)();
+  const chartBounds = usePointerAndScrollResponsiveChartBounds(
+    chartRef,
+    true
+  )();
   if (isUndefined(selectState) || !chartBounds) {
     return null;
   }
@@ -90,24 +93,25 @@ const DynamicSelectionAreaTooltip = ({
         );
       },
       selectFinished: selectState.finished,
-      header: /* @__PURE__ */ jsx(TooltipHeader, {}),
-      headerSubtext: intl.formatMessage(datapointsMessage, {
-        count: selectedDatapoints,
-        seriesCount: seriesCount + categoriesCount
-      }),
+      header: /* @__PURE__ */ jsx(
+        TooltipHeader,
+        {
+          subheader: intl.formatMessage(datapointsMessage, {
+            count: selectedDatapoints,
+            seriesCount: seriesCount + categoriesCount
+          })
+        }
+      ),
       position: tooltipPosition,
       zoomEnabled: axesMetadata.isZoomEnabled,
       range: selectState.selectionPercentage || [0, 0],
       children: axesMetadata.isZoomEnabled ? /* @__PURE__ */ jsx(
-        ChartTooltip.ActionItem,
+        OverlayTooltip.Action,
         {
-          text: intl.formatMessage(XYCHART_MESSAGES.zoomToSelection),
+          label: intl.formatMessage(XYCHART_MESSAGES.zoomToSelection),
           icon: /* @__PURE__ */ jsx(ZoomToSelectionIcon, {}),
-          onMouseUp: (event) => {
-            event.stopPropagation();
-            zoomToSelection();
-          },
-          shortcut: "\u23CE"
+          onSelect: zoomToSelection,
+          trailingIcon: "\u23CE"
         }
       ) : null
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/selection/XYChartSelectionAreaTooltip.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { TooltipHeader } from './TooltipHeader.js';\nimport { getCustomContextMenuItems } from '../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { SelectionTooltipWithAsyncActions } from '../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js';\nimport { getSelectionTooltipPosition } from '../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { useScrollResponsiveChartBounds } from '../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport { useSelectConfig } from '../../hooks/useSelectConfig.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useSelectState } from '../../store/selectors.js';\nimport type {\n  XYChartSelectedDomains,\n  XYChartSelectedSeries,\n} from '../../types/xy-chart.js';\nimport { getDatapointsMessage } from '../../utils/get-datapoints-message.js';\nimport { useZoomToSelection } from '../overlay/hooks/useZoomToSelection.js';\nimport type { XYChartSelectedDatapointsPerSeries } from '../overlay/utils/get-selected-datapoints.js';\n\nexport const XYChartSelectionAreaTooltip = ({\n  selectedDatapoints,\n  totalSeries: seriesCount,\n  totalCategories: categoriesCount,\n  selectedDatapointsPerSeries,\n}: {\n  selectedDatapoints: number;\n  totalSeries: number;\n  totalCategories: number;\n  selectedDatapointsPerSeries: XYChartSelectedDatapointsPerSeries[];\n}) => {\n  const selectState = useSelectState();\n  const { axesMetadata, seriesWithDatapoints } = useXYChartData();\n  const selectConfig = useSelectConfig();\n\n  if (isUndefined(selectState)) {\n    return null;\n  }\n\n  const selectedDatapointsWithData = selectedDatapointsPerSeries.filter(\n    (data) => data.datapoints.length,\n  );\n\n  const selectedSeries = selectedDatapointsWithData.map((data) => {\n    return {\n      [data.seriesName]:\n        data.datapoints as XYChartSelectedSeries[number][string],\n    };\n  });\n\n  const selectionDomain: XYChartSelectedDomains =\n    selectedDatapointsWithData.map((data) => {\n      return {\n        [data.seriesName]: data.domain as [Date, Date] | [number, number],\n      };\n    });\n\n  const datapointsMessage = getDatapointsMessage(\n    selectedDatapoints,\n    seriesCount,\n    seriesWithDatapoints.length,\n    categoriesCount,\n  );\n\n  return (\n    <DynamicSelectionAreaTooltip\n      selectedDatapoints={selectedDatapoints}\n      selectState={selectState}\n      categoriesCount={categoriesCount}\n      seriesCount={seriesCount}\n      axesMetadata={axesMetadata}\n      selectedSeries={selectedSeries}\n      selectionDomain={selectionDomain}\n      selectConfig={selectConfig}\n      datapointsMessage={datapointsMessage}\n    />\n  );\n};\n\nconst DynamicSelectionAreaTooltip = ({\n  selectedDatapoints,\n  selectState,\n  categoriesCount,\n  seriesCount,\n  axesMetadata,\n  selectedSeries,\n  selectionDomain,\n  selectConfig,\n  datapointsMessage,\n}: {\n  selectedDatapoints: number;\n  selectState: ReturnType<typeof useSelectState>;\n  categoriesCount: number;\n  seriesCount: number;\n  axesMetadata: ReturnType<typeof useXYChartData>['axesMetadata'];\n  selectedSeries: XYChartSelectedSeries;\n  selectionDomain: XYChartSelectedDomains;\n  selectConfig: ReturnType<typeof useSelectConfig>;\n  datapointsMessage: ReturnType<typeof getDatapointsMessage>;\n}) => {\n  const intl = useIntl();\n  const zoomToSelection = useZoomToSelection();\n  const { overlayRef: chartRef } = useOverlay();\n  const chartBounds = useScrollResponsiveChartBounds(chartRef, true)();\n\n  if (isUndefined(selectState) || !chartBounds) {\n    return null;\n  }\n\n  const tooltipPosition = getSelectionTooltipPosition(selectState, chartBounds);\n\n  return (\n    <SelectionTooltipWithAsyncActions\n      actions={() => {\n        const actions = selectConfig?.actions;\n        return (\n          actions &&\n          (async () => actions(selectedSeries, selectionDomain))().then(\n            getCustomContextMenuItems,\n          )\n        );\n      }}\n      selectFinished={selectState.finished}\n      header={<TooltipHeader />}\n      headerSubtext={intl.formatMessage(datapointsMessage, {\n        count: selectedDatapoints,\n        seriesCount: seriesCount + categoriesCount,\n      })}\n      position={tooltipPosition}\n      zoomEnabled={axesMetadata.isZoomEnabled}\n      range={selectState.selectionPercentage || [0, 0]}\n    >\n      {axesMetadata.isZoomEnabled ? (\n        <ChartTooltip.ActionItem\n          text={intl.formatMessage(XYCHART_MESSAGES.zoomToSelection)}\n          icon={<ZoomToSelectionIcon />}\n          onMouseUp={(event) => {\n            event.stopPropagation();\n            zoomToSelection();\n          }}\n          shortcut=\"\u23CE\"\n        />\n      ) : null}\n    </SelectionTooltipWithAsyncActions>\n  );\n};\n"],
-  "mappings": "AAqEI;AArEJ,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,sCAAsC;AAC/C,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAK/B,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAG5B,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AACF,MAKM;AACJ,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,cAAc,qBAAqB,IAAI,eAAe;AAC9D,QAAM,eAAe,gBAAgB;AAErC,MAAI,YAAY,WAAW,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,6BAA6B,4BAA4B;AAAA,IAC7D,CAAC,SAAS,KAAK,WAAW;AAAA,EAC5B;AAEA,QAAM,iBAAiB,2BAA2B,IAAI,CAAC,SAAS;AAC9D,WAAO;AAAA,MACL,CAAC,KAAK,UAAU,GACd,KAAK;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,kBACJ,2BAA2B,IAAI,CAAC,SAAS;AACvC,WAAO;AAAA,MACL,CAAC,KAAK,UAAU,GAAG,KAAK;AAAA,IAC1B;AAAA,EACF,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAUM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,EAAE,YAAY,SAAS,IAAI,WAAW;AAC5C,QAAM,cAAc,+BAA+B,UAAU,IAAI,EAAE;AAEnE,MAAI,YAAY,WAAW,KAAK,CAAC,aAAa;AAC5C,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,4BAA4B,aAAa,WAAW;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM;AACb,cAAM,UAAU,cAAc;AAC9B,eACE,YACC,YAAY,QAAQ,gBAAgB,eAAe,GAAG,EAAE;AAAA,UACvD;AAAA,QACF;AAAA,MAEJ;AAAA,MACA,gBAAgB,YAAY;AAAA,MAC5B,QAAQ,oBAAC,iBAAc;AAAA,MACvB,eAAe,KAAK,cAAc,mBAAmB;AAAA,QACnD,OAAO;AAAA,QACP,aAAa,cAAc;AAAA,MAC7B,CAAC;AAAA,MACD,UAAU;AAAA,MACV,aAAa,aAAa;AAAA,MAC1B,OAAO,YAAY,uBAAuB,CAAC,GAAG,CAAC;AAAA,MAE9C,uBAAa,gBACZ;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACC,MAAM,KAAK,cAAc,iBAAiB,eAAe;AAAA,UACzD,MAAM,oBAAC,uBAAoB;AAAA,UAC3B,WAAW,CAAC,UAAU;AACpB,kBAAM,gBAAgB;AACtB,4BAAgB;AAAA,UAClB;AAAA,UACA,UAAS;AAAA;AAAA,MACX,IACE;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useIntl } from 'react-intl';\n\nimport { ZoomToSelectionIcon } from '@dynatrace/strato-icons';\n\nimport { TooltipHeader } from './TooltipHeader.js';\nimport { getCustomContextMenuItems } from '../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { SelectionTooltipWithAsyncActions } from '../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js';\nimport { getSelectionTooltipPosition } from '../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js';\nimport { usePointerAndScrollResponsiveChartBounds } from '../../../core/hooks/usePointerAndScrollResponsiveChartBounds.js';\nimport { useSelectConfig } from '../../hooks/useSelectConfig.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { XYCHART_MESSAGES } from '../../messages/messages.js';\nimport { useSelectState } from '../../store/selectors.js';\nimport type {\n  XYChartSelectedDomains,\n  XYChartSelectedSeries,\n} from '../../types/xy-chart.js';\nimport { getDatapointsMessage } from '../../utils/get-datapoints-message.js';\nimport { useZoomToSelection } from '../overlay/hooks/useZoomToSelection.js';\nimport type { XYChartSelectedDatapointsPerSeries } from '../overlay/utils/get-selected-datapoints.js';\n\nexport const XYChartSelectionAreaTooltip = ({\n  selectedDatapoints,\n  totalSeries: seriesCount,\n  totalCategories: categoriesCount,\n  selectedDatapointsPerSeries,\n}: {\n  selectedDatapoints: number;\n  totalSeries: number;\n  totalCategories: number;\n  selectedDatapointsPerSeries: XYChartSelectedDatapointsPerSeries[];\n}) => {\n  const selectState = useSelectState();\n  const { axesMetadata, seriesWithDatapoints } = useXYChartData();\n  const selectConfig = useSelectConfig();\n\n  if (isUndefined(selectState)) {\n    return null;\n  }\n\n  const selectedDatapointsWithData = selectedDatapointsPerSeries.filter(\n    (data) => data.datapoints.length,\n  );\n\n  const selectedSeries = selectedDatapointsWithData.map((data) => {\n    return {\n      [data.seriesName]:\n        data.datapoints as XYChartSelectedSeries[number][string],\n    };\n  });\n\n  const selectionDomain: XYChartSelectedDomains =\n    selectedDatapointsWithData.map((data) => {\n      return {\n        [data.seriesName]: data.domain as [Date, Date] | [number, number],\n      };\n    });\n\n  const datapointsMessage = getDatapointsMessage(\n    selectedDatapoints,\n    seriesCount,\n    seriesWithDatapoints.length,\n    categoriesCount,\n  );\n\n  return (\n    <DynamicSelectionAreaTooltip\n      selectedDatapoints={selectedDatapoints}\n      selectState={selectState}\n      categoriesCount={categoriesCount}\n      seriesCount={seriesCount}\n      axesMetadata={axesMetadata}\n      selectedSeries={selectedSeries}\n      selectionDomain={selectionDomain}\n      selectConfig={selectConfig}\n      datapointsMessage={datapointsMessage}\n    />\n  );\n};\n\nconst DynamicSelectionAreaTooltip = ({\n  selectedDatapoints,\n  selectState,\n  categoriesCount,\n  seriesCount,\n  axesMetadata,\n  selectedSeries,\n  selectionDomain,\n  selectConfig,\n  datapointsMessage,\n}: {\n  selectedDatapoints: number;\n  selectState: ReturnType<typeof useSelectState>;\n  categoriesCount: number;\n  seriesCount: number;\n  axesMetadata: ReturnType<typeof useXYChartData>['axesMetadata'];\n  selectedSeries: XYChartSelectedSeries;\n  selectionDomain: XYChartSelectedDomains;\n  selectConfig: ReturnType<typeof useSelectConfig>;\n  datapointsMessage: ReturnType<typeof getDatapointsMessage>;\n}) => {\n  const intl = useIntl();\n  const zoomToSelection = useZoomToSelection();\n  const { overlayRef: chartRef } = useOverlay();\n  const chartBounds = usePointerAndScrollResponsiveChartBounds(\n    chartRef,\n    true,\n  )();\n\n  if (isUndefined(selectState) || !chartBounds) {\n    return null;\n  }\n\n  const tooltipPosition = getSelectionTooltipPosition(selectState, chartBounds);\n\n  return (\n    <SelectionTooltipWithAsyncActions\n      actions={() => {\n        const actions = selectConfig?.actions;\n        return (\n          actions &&\n          (async () => actions(selectedSeries, selectionDomain))().then(\n            getCustomContextMenuItems,\n          )\n        );\n      }}\n      selectFinished={selectState.finished}\n      header={\n        <TooltipHeader\n          subheader={intl.formatMessage(datapointsMessage, {\n            count: selectedDatapoints,\n            seriesCount: seriesCount + categoriesCount,\n          })}\n        />\n      }\n      position={tooltipPosition}\n      zoomEnabled={axesMetadata.isZoomEnabled}\n      range={selectState.selectionPercentage || [0, 0]}\n    >\n      {axesMetadata.isZoomEnabled ? (\n        <OverlayTooltip.Action\n          label={intl.formatMessage(XYCHART_MESSAGES.zoomToSelection)}\n          icon={<ZoomToSelectionIcon />}\n          onSelect={zoomToSelection}\n          trailingIcon=\"\u23CE\"\n        />\n      ) : null}\n    </SelectionTooltipWithAsyncActions>\n  );\n};\n"],
+  "mappings": "AAqEI;AArEJ,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAExB,SAAS,2BAA2B;AAEpC,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,wCAAwC;AACjD,SAAS,mCAAmC;AAC5C,SAAS,gDAAgD;AACzD,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAK/B,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAG5B,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AACF,MAKM;AACJ,QAAM,cAAc,eAAe;AACnC,QAAM,EAAE,cAAc,qBAAqB,IAAI,eAAe;AAC9D,QAAM,eAAe,gBAAgB;AAErC,MAAI,YAAY,WAAW,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,6BAA6B,4BAA4B;AAAA,IAC7D,CAAC,SAAS,KAAK,WAAW;AAAA,EAC5B;AAEA,QAAM,iBAAiB,2BAA2B,IAAI,CAAC,SAAS;AAC9D,WAAO;AAAA,MACL,CAAC,KAAK,UAAU,GACd,KAAK;AAAA,IACT;AAAA,EACF,CAAC;AAED,QAAM,kBACJ,2BAA2B,IAAI,CAAC,SAAS;AACvC,WAAO;AAAA,MACL,CAAC,KAAK,UAAU,GAAG,KAAK;AAAA,IAC1B;AAAA,EACF,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,8BAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAUM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,kBAAkB,mBAAmB;AAC3C,QAAM,EAAE,YAAY,SAAS,IAAI,WAAW;AAC5C,QAAM,cAAc;AAAA,IAClB;AAAA,IACA;AAAA,EACF,EAAE;AAEF,MAAI,YAAY,WAAW,KAAK,CAAC,aAAa;AAC5C,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,4BAA4B,aAAa,WAAW;AAE5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,MAAM;AACb,cAAM,UAAU,cAAc;AAC9B,eACE,YACC,YAAY,QAAQ,gBAAgB,eAAe,GAAG,EAAE;AAAA,UACvD;AAAA,QACF;AAAA,MAEJ;AAAA,MACA,gBAAgB,YAAY;AAAA,MAC5B,QACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,KAAK,cAAc,mBAAmB;AAAA,YAC/C,OAAO;AAAA,YACP,aAAa,cAAc;AAAA,UAC7B,CAAC;AAAA;AAAA,MACH;AAAA,MAEF,UAAU;AAAA,MACV,aAAa,aAAa;AAAA,MAC1B,OAAO,YAAY,uBAAuB,CAAC,GAAG,CAAC;AAAA,MAE9C,uBAAa,gBACZ;AAAA,QAAC,eAAe;AAAA,QAAf;AAAA,UACC,OAAO,KAAK,cAAc,iBAAiB,eAAe;AAAA,UAC1D,MAAM,oBAAC,uBAAoB;AAAA,UAC3B,UAAU;AAAA,UACV,cAAa;AAAA;AAAA,MACf,IACE;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }