@dynatrace/strato-components 3.4.1 → 3.5.2

package/esm/charts/xy-chart/components/annotations/utils/get-indicators-from-annotations.js

@@ -4,7 +4,6 @@ import {
   isAlwaysShown
 } from "../../../../core/components/annotations/components/indicators/utils/indicator-visibility-helpers.js";
 import { DEFAULT_MARKER_COLOR } from "../../../../core/components/annotations/constants.js";
-import { initialSelectionState } from "../../../../core/components/annotations/providers/AnnotationsDataInitialState.js";
 import { getMinMaxAsNumber } from "../../../../core/components/annotations/utils/get-min-max-as-number.js";
 import { populateMissingMarkerProps } from "../../../../core/components/annotations/utils/populate-missing-marker-props.js";
 import { populateMissingTrackProps } from "../../../../core/components/annotations/utils/populate-missing-track-props.js";
@@ -44,7 +43,7 @@ const serializeAnnotationsTrackFromXYChartData = (data, trackConfig) => {
     markers: []
   };
 };
-const getIndicatorsFromAnnotations = (data, tracksConfig, markersConfig) => {
+const getIndicatorsFromAnnotations = (data, tracksConfig, markersConfig, selection) => {
   const alwaysVisible = [];
   const selectable = /* @__PURE__ */ new Map();
   const trackIdTroughAccesor = tracksConfig.trackIdAccessor;
@@ -90,7 +89,7 @@ const getIndicatorsFromAnnotations = (data, tracksConfig, markersConfig) => {
         const color = markerColor ?? trackColor ?? DEFAULT_MARKER_COLOR;
         const indicator = buildIndicator(
           color,
-          initialSelectionState,
+          selection,
           markerId,
           markerStart,
           markerEnd,

package/esm/charts/xy-chart/components/annotations/utils/get-indicators-from-annotations.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/annotations/utils/get-indicators-from-annotations.ts"],
-  "sourcesContent": ["import {\n  AnnotationsIntegrationMarkerConfig,\n  AnnotationsIntegrationTrackConfig,\n  IndicatorData,\n} from '../../../../core/components/annotations/components/indicators/types.js';\nimport {\n  buildIndicator,\n  isAlwaysHidden,\n  isAlwaysShown,\n} from '../../../../core/components/annotations/components/indicators/utils/indicator-visibility-helpers.js';\nimport { DEFAULT_MARKER_COLOR } from '../../../../core/components/annotations/constants.js';\nimport { initialSelectionState } from '../../../../core/components/annotations/providers/AnnotationsDataInitialState.js';\nimport { AnnotationsTrackConfig } from '../../../../core/components/annotations/types/annotations-track-props.js';\nimport { getMinMaxAsNumber } from '../../../../core/components/annotations/utils/get-min-max-as-number.js';\nimport { populateMissingMarkerProps } from '../../../../core/components/annotations/utils/populate-missing-marker-props.js';\nimport { populateMissingTrackProps } from '../../../../core/components/annotations/utils/populate-missing-track-props.js';\nimport { serializeMarkerRange } from '../../../../core/components/annotations/utils/serialize-marker-range.js';\nimport { getDatumValue } from '../../../processing-strategies/utils/access-datapoint/get-datapoints.js';\nimport { XYChartAnnotationsMarkerProps } from '../../../slots/Annotations/Marker.js';\nimport { XYChartAnnotationsTrackProps } from '../../../slots/Annotations/Track.js';\nimport { XYChartData } from '../../../types/xy-chart.js';\nimport { evaluateOptionalAttribute } from '../../../utils/evaluate-with-data.js';\n\nconst serializeAnnotationsMarkerFromXYChartData = (\n  data: XYChartData,\n  markerConfig: XYChartAnnotationsMarkerProps,\n): AnnotationsIntegrationMarkerConfig => {\n  const response = {\n    ...data,\n    start: getDatumValue(data, markerConfig.startAccessor),\n    end: getDatumValue(data, markerConfig.endAccessor),\n    symbol: evaluateOptionalAttribute(markerConfig.symbol, data, undefined),\n    hidden: evaluateOptionalAttribute(markerConfig.hidden, data, false),\n    priority: evaluateOptionalAttribute(markerConfig.priority, data, 0),\n    color: markerConfig.colorAccessor\n      ? (getDatumValue(data, markerConfig.colorAccessor) as string)\n      : undefined,\n    title: markerConfig.titleAccessor\n      ? (getDatumValue(data, markerConfig.titleAccessor) as string)\n      : undefined,\n    description: markerConfig.descriptionAccessor\n      ? (getDatumValue(data, markerConfig.descriptionAccessor) as string)\n      : undefined,\n    indicatorsDisplay: evaluateOptionalAttribute(\n      markerConfig.indicatorsDisplay,\n      data,\n      undefined,\n    ),\n  };\n\n  return response as AnnotationsIntegrationMarkerConfig;\n};\n\nconst serializeAnnotationsTrackFromXYChartData = (\n  data: XYChartData,\n  trackConfig: XYChartAnnotationsTrackProps,\n): AnnotationsIntegrationTrackConfig => {\n  return {\n    hidden: evaluateOptionalAttribute(trackConfig.hidden, data, false),\n    symbol: evaluateOptionalAttribute(trackConfig.symbol, data, undefined),\n    color: trackConfig.colorAccessor\n      ? (getDatumValue(data, trackConfig.colorAccessor) as string)\n      : undefined,\n    label: trackConfig.labelAccessor\n      ? (getDatumValue(data, trackConfig.labelAccessor) as string)\n      : undefined,\n    indicatorsDisplay: evaluateOptionalAttribute(\n      trackConfig.indicatorsDisplay,\n      data,\n      'auto',\n    ),\n    markers: [],\n  };\n};\n\nexport const getIndicatorsFromAnnotations = (\n  data: XYChartData[],\n  tracksConfig: XYChartAnnotationsTrackProps,\n  markersConfig: XYChartAnnotationsMarkerProps,\n) => {\n  const alwaysVisible: IndicatorData[] = [];\n  const selectable: Map<string, IndicatorData> = new Map();\n  const trackIdTroughAccesor = tracksConfig.trackIdAccessor;\n  const hiddenTracks = new Set<string>();\n  const annotationsByTrack: Map<string, AnnotationsTrackConfig> = data.reduce(\n    (trackMap, datum) => {\n      const trackId = getDatumValue(datum, trackIdTroughAccesor) as string;\n      const annotationsTrack: AnnotationsIntegrationTrackConfig = trackMap.has(\n        trackId,\n      )\n        ? trackMap.get(trackId)\n        : populateMissingTrackProps(\n            serializeAnnotationsTrackFromXYChartData(datum, tracksConfig),\n          );\n      if (annotationsTrack?.hidden) {\n        hiddenTracks.add(trackId);\n      }\n\n      const marker = serializeAnnotationsMarkerFromXYChartData(\n        datum,\n        markersConfig,\n      );\n\n      const populatedMarker: AnnotationsIntegrationMarkerConfig =\n        populateMissingMarkerProps(marker, annotationsTrack);\n\n      annotationsTrack.markers.push(populatedMarker);\n      trackMap.set(trackId, annotationsTrack);\n\n      const { color: trackColor, indicatorsDisplay: trackIndicatorDisplay } =\n        annotationsTrack;\n      const {\n        color: markerColor,\n        start: markerStartRaw,\n        end: markerEndRaw,\n        indicatorsDisplay: markerIndicatorDisplay,\n        priority,\n      } = populatedMarker;\n\n      const { min: markerStart, max: markerEnd } = getMinMaxAsNumber(\n        markerStartRaw,\n        markerEndRaw,\n      );\n\n      if (!isAlwaysHidden(markerIndicatorDisplay, trackIndicatorDisplay)) {\n        const trackIndex = Array.from(trackMap.keys()).findIndex(\n          (name) => name === trackId,\n        );\n        const markerId = serializeMarkerRange(\n          { ...populatedMarker, start: markerStart, end: markerEnd },\n          trackIndex,\n        );\n        const color = markerColor ?? trackColor ?? DEFAULT_MARKER_COLOR;\n        const indicator = buildIndicator(\n          color,\n          initialSelectionState,\n          markerId,\n          markerStart,\n          markerEnd,\n          priority,\n        );\n\n        if (isAlwaysShown(markerIndicatorDisplay, trackIndicatorDisplay)) {\n          alwaysVisible.push(indicator);\n        } else {\n          selectable.set(markerId, indicator);\n        }\n      }\n      return trackMap;\n    },\n    new Map(),\n  );\n  return {\n    indicators: { alwaysVisible, selectable },\n    annotationsByTrack,\n    hiddenTracks,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  AnnotationsIntegrationMarkerConfig,\n  AnnotationsIntegrationTrackConfig,\n  IndicatorData,\n} from '../../../../core/components/annotations/components/indicators/types.js';\nimport {\n  buildIndicator,\n  isAlwaysHidden,\n  isAlwaysShown,\n} from '../../../../core/components/annotations/components/indicators/utils/indicator-visibility-helpers.js';\nimport { DEFAULT_MARKER_COLOR } from '../../../../core/components/annotations/constants.js';\nimport { AnnotationsTrackConfig } from '../../../../core/components/annotations/types/annotations-track-props.js';\nimport { SelectionState } from '../../../../core/components/annotations/types/state.js';\nimport { getMinMaxAsNumber } from '../../../../core/components/annotations/utils/get-min-max-as-number.js';\nimport { populateMissingMarkerProps } from '../../../../core/components/annotations/utils/populate-missing-marker-props.js';\nimport { populateMissingTrackProps } from '../../../../core/components/annotations/utils/populate-missing-track-props.js';\nimport { serializeMarkerRange } from '../../../../core/components/annotations/utils/serialize-marker-range.js';\nimport { getDatumValue } from '../../../processing-strategies/utils/access-datapoint/get-datapoints.js';\nimport { XYChartAnnotationsMarkerProps } from '../../../slots/Annotations/Marker.js';\nimport { XYChartAnnotationsTrackProps } from '../../../slots/Annotations/Track.js';\nimport { XYChartData } from '../../../types/xy-chart.js';\nimport { evaluateOptionalAttribute } from '../../../utils/evaluate-with-data.js';\n\nconst serializeAnnotationsMarkerFromXYChartData = (\n  data: XYChartData,\n  markerConfig: XYChartAnnotationsMarkerProps,\n): AnnotationsIntegrationMarkerConfig => {\n  const response = {\n    ...data,\n    start: getDatumValue(data, markerConfig.startAccessor),\n    end: getDatumValue(data, markerConfig.endAccessor),\n    symbol: evaluateOptionalAttribute(markerConfig.symbol, data, undefined),\n    hidden: evaluateOptionalAttribute(markerConfig.hidden, data, false),\n    priority: evaluateOptionalAttribute(markerConfig.priority, data, 0),\n    color: markerConfig.colorAccessor\n      ? (getDatumValue(data, markerConfig.colorAccessor) as string)\n      : undefined,\n    title: markerConfig.titleAccessor\n      ? (getDatumValue(data, markerConfig.titleAccessor) as string)\n      : undefined,\n    description: markerConfig.descriptionAccessor\n      ? (getDatumValue(data, markerConfig.descriptionAccessor) as string)\n      : undefined,\n    indicatorsDisplay: evaluateOptionalAttribute(\n      markerConfig.indicatorsDisplay,\n      data,\n      undefined,\n    ),\n  };\n\n  return response as AnnotationsIntegrationMarkerConfig;\n};\n\nconst serializeAnnotationsTrackFromXYChartData = (\n  data: XYChartData,\n  trackConfig: XYChartAnnotationsTrackProps,\n): AnnotationsIntegrationTrackConfig => {\n  return {\n    hidden: evaluateOptionalAttribute(trackConfig.hidden, data, false),\n    symbol: evaluateOptionalAttribute(trackConfig.symbol, data, undefined),\n    color: trackConfig.colorAccessor\n      ? (getDatumValue(data, trackConfig.colorAccessor) as string)\n      : undefined,\n    label: trackConfig.labelAccessor\n      ? (getDatumValue(data, trackConfig.labelAccessor) as string)\n      : undefined,\n    indicatorsDisplay: evaluateOptionalAttribute(\n      trackConfig.indicatorsDisplay,\n      data,\n      'auto',\n    ),\n    markers: [],\n  };\n};\n\nexport const getIndicatorsFromAnnotations = (\n  data: XYChartData[],\n  tracksConfig: XYChartAnnotationsTrackProps,\n  markersConfig: XYChartAnnotationsMarkerProps,\n  selection: SelectionState,\n) => {\n  const alwaysVisible: IndicatorData[] = [];\n  const selectable: Map<string, IndicatorData> = new Map();\n  const trackIdTroughAccesor = tracksConfig.trackIdAccessor;\n  const hiddenTracks = new Set<string>();\n  const annotationsByTrack: Map<string, AnnotationsTrackConfig> = data.reduce(\n    (trackMap, datum) => {\n      const trackId = getDatumValue(datum, trackIdTroughAccesor) as string;\n      const annotationsTrack: AnnotationsIntegrationTrackConfig = trackMap.has(\n        trackId,\n      )\n        ? trackMap.get(trackId)\n        : populateMissingTrackProps(\n            serializeAnnotationsTrackFromXYChartData(datum, tracksConfig),\n          );\n      if (annotationsTrack?.hidden) {\n        hiddenTracks.add(trackId);\n      }\n\n      const marker = serializeAnnotationsMarkerFromXYChartData(\n        datum,\n        markersConfig,\n      );\n\n      const populatedMarker: AnnotationsIntegrationMarkerConfig =\n        populateMissingMarkerProps(marker, annotationsTrack);\n\n      annotationsTrack.markers.push(populatedMarker);\n      trackMap.set(trackId, annotationsTrack);\n\n      const { color: trackColor, indicatorsDisplay: trackIndicatorDisplay } =\n        annotationsTrack;\n      const {\n        color: markerColor,\n        start: markerStartRaw,\n        end: markerEndRaw,\n        indicatorsDisplay: markerIndicatorDisplay,\n        priority,\n      } = populatedMarker;\n\n      const { min: markerStart, max: markerEnd } = getMinMaxAsNumber(\n        markerStartRaw,\n        markerEndRaw,\n      );\n\n      if (!isAlwaysHidden(markerIndicatorDisplay, trackIndicatorDisplay)) {\n        const trackIndex = Array.from(trackMap.keys()).findIndex(\n          (name) => name === trackId,\n        );\n        const markerId = serializeMarkerRange(\n          { ...populatedMarker, start: markerStart, end: markerEnd },\n          trackIndex,\n        );\n        const color = markerColor ?? trackColor ?? DEFAULT_MARKER_COLOR;\n        const indicator = buildIndicator(\n          color,\n          selection,\n          markerId,\n          markerStart,\n          markerEnd,\n          priority,\n        );\n\n        if (isAlwaysShown(markerIndicatorDisplay, trackIndicatorDisplay)) {\n          alwaysVisible.push(indicator);\n        } else {\n          selectable.set(markerId, indicator);\n        }\n      }\n      return trackMap;\n    },\n    new Map(),\n  );\n  return {\n    indicators: { alwaysVisible, selectable },\n    annotationsByTrack,\n    hiddenTracks,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./AxisArea.css";
-var axisContainerStyle = "_bidc430-3-4-1";
+var axisContainerStyle = "_bidc430-3-5-2";
 export {
   axisContainerStyle
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisArea.css.ts"],
-  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-4-1';"],
+  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 import "./AxisTickWithTruncation.css";
-var directionValue = "var(--_z2zz8y0-3-4-1)";
-var tickStyle = "_z2zz8y2-3-4-1";
-var widthContainer = "var(--_z2zz8y1-3-4-1)";
+var directionValue = "var(--_z2zz8y0-3-5-2)";
+var tickStyle = "_z2zz8y2-3-5-2";
+var widthContainer = "var(--_z2zz8y1-3-5-2)";
 export {
   directionValue,
   tickStyle,

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-1)';\nexport var tickStyle = '_z2zz8y2-3-4-1';\nexport var widthContainer = 'var(--_z2zz8y1-3-4-1)';"],
+  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-5-2)';\nexport var tickStyle = '_z2zz8y2-3-5-2';\nexport var widthContainer = 'var(--_z2zz8y1-3-5-2)';"],
   "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-1 {
+._1lwufqz0-3-5-2 {
   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-1";
+var shapeIconWrapper = "_1lwufqz0-3-5-2";
 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-1';"],
+  "sourcesContent": ["import './xy-legend.css';\nexport var shapeIconWrapper = '_1lwufqz0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-4-1 {
+._1bbe5uo0-3-5-2 {
   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-1";
+var crosshair = "_1bbe5uo0-3-5-2";
 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-1';"],
+  "sourcesContent": ["import './XYChartCrosshair.css';\nexport var crosshair = '_1bbe5uo0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._cd1yys0-3-4-1 {
+._cd1yys0-3-5-2 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-4-1 {
+._cd1yys1-3-5-2 {
   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-1 _13lzg4k0-3-4-1";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-4-1 _13lzg4k0-3-4-1";
+var datapointIndicatorLayout = "_cd1yys1-3-5-2 _13lzg4k0-3-5-2";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-5-2 _13lzg4k0-3-5-2";
 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-1 _13lzg4k0-3-4-1';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-4-1 _13lzg4k0-3-4-1';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './XYChartExplore.css';\nexport var datapointIndicatorLayout = '_cd1yys1-3-5-2 _13lzg4k0-3-5-2';\nexport var datapointIndicatorShiftedLayout = '_cd1yys0-3-5-2 _13lzg4k0-3-5-2';"],
   "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-1 {
+._biijte0-3-5-2 {
   margin-bottom: var(--dt-spacings-size-2, 2px);
 }
-._biijte1-3-4-1 {
+._biijte1-3-5-2 {
   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-1";
-var headerItem = "_biijte0-3-4-1";
+var formattedTimeframe = "_biijte1-3-5-2";
+var headerItem = "_biijte0-3-5-2";
 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-1';\nexport var headerItem = '_biijte0-3-4-1';"],
+  "sourcesContent": ["import './TooltipHeader.css';\nexport var formattedTimeframe = '_biijte1-3-5-2';\nexport var headerItem = '_biijte0-3-5-2';"],
   "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;