@dynatrace/strato-components 3.4.1 → 3.5.2

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

@@ -22,7 +22,6 @@ __export(get_indicators_from_annotations_exports, {
 module.exports = __toCommonJS(get_indicators_from_annotations_exports);
 var import_indicator_visibility_helpers = require("../../../../core/components/annotations/components/indicators/utils/indicator-visibility-helpers.js");
 var import_constants = require("../../../../core/components/annotations/constants.js");
-var import_AnnotationsDataInitialState = require("../../../../core/components/annotations/providers/AnnotationsDataInitialState.js");
 var import_get_min_max_as_number = require("../../../../core/components/annotations/utils/get-min-max-as-number.js");
 var import_populate_missing_marker_props = require("../../../../core/components/annotations/utils/populate-missing-marker-props.js");
 var import_populate_missing_track_props = require("../../../../core/components/annotations/utils/populate-missing-track-props.js");
@@ -62,7 +61,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;
@@ -108,7 +107,7 @@ const getIndicatorsFromAnnotations = (data, tracksConfig, markersConfig) => {
         const color = markerColor ?? trackColor ?? import_constants.DEFAULT_MARKER_COLOR;
         const indicator = (0, import_indicator_visibility_helpers.buildIndicator)(
           color,
-          import_AnnotationsDataInitialState.initialSelectionState,
+          selection,
           markerId,
           markerStart,
           markerEnd,

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

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

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

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

package/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/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -23,6 +23,6 @@ __export(AxisTickWithTruncation_css_exports, {
 });
 module.exports = __toCommonJS(AxisTickWithTruncation_css_exports);
 var import_AxisTickWithTruncation_css_ts_vanilla = require("./AxisTickWithTruncation.css");
-var directionValue = "var(--_z2zz8y0-3-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)";

package/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/charts/xy-chart/components/legend/XYLegend/xy-legend.sty.js

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

package/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/charts/xy-chart/components/overlay/explore/XYChartCrosshair.js

@@ -42,6 +42,7 @@ var import_selectors = require("../../../../core/components/overlay-tooltip/sele
 var import_useTooltipReducer = require("../../../../core/components/overlay-tooltip/useTooltipReducer.js");
 var import_useApplyCallbackOnScroll = require("../../../../core/hooks/useApplyCallbackOnScroll.js");
 var import_useAxesFormatter = require("../../../hooks/useAxesFormatter.js");
+var import_useFormatCategory = require("../../../hooks/useFormatCategory.js");
 var import_useGetThresholds = require("../../../hooks/useGetThresholds.js");
 var import_useVisibleAxesConfig = require("../../../hooks/useVisibleAxesConfig.js");
 var import_useVisibleAxesScales = require("../../../hooks/useVisibleAxesScales.js");
@@ -156,6 +157,7 @@ function XYChartCrosshair({
   const axesScale = (0, import_useVisibleAxesScales.useVisibleAxesScales)();
   const axesConfig = (0, import_useVisibleAxesConfig.useVisibleAxesConfig)();
   const axesIdToFormatter = (0, import_useAxesFormatter.useAxesFormatter)();
+  const formatCategory = (0, import_useFormatCategory.useFormatCategory)();
   const { width, height } = (0, import_useGridPlotSize.useGridPlotSize)();
   const { offset: thresholdOffset, yAxes: thresholdYAxes } = (0, import_useGetThresholds.useGetThresholds)();
   const { axisIdToScaleDomain, seriesToMetadata, datapointMetadataMap } = (0, import_useXYChartData.useXYChartData)();
@@ -183,7 +185,8 @@ function XYChartCrosshair({
     axesScale,
     axesConfig,
     axesIdToFormatter,
-    width
+    width,
+    formatCategory
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     XYChartCrosshairLines,

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

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

package/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/charts/xy-chart/components/overlay/explore/XYChartExplore.sty.js

@@ -23,5 +23,5 @@ __export(XYChartExplore_css_exports, {
 module.exports = __toCommonJS(XYChartExplore_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../../core/components/chart-grid/ChartGrid.css");
 var import_XYChartExplore_css_ts_vanilla = require("./XYChartExplore.css");
-var datapointIndicatorLayout = "_cd1yys1-3-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";

package/charts/xy-chart/components/overlay/utils/chartCrosshairDataTransformer.d.ts

@@ -1,3 +1,4 @@
+import type { FormatCategory } from '../../../hooks/useFormatCategory.js';
 import { AxisIdToFormatter, XYChartAxisInternal, XYChartVisibleAxesConfig, XYChartVisibleAxesScales } from '../../../types/xy-chart-internals.js';
 type AXIS = 'left' | 'right' | 'bottom' | 'top';
 type AXES = AXIS[];
@@ -16,6 +17,7 @@ export type ChartCrosshairDataTransformer = (args: {
     axesIdToFormatter: AxisIdToFormatter;
     width: number;
     axes?: AXES;
+    formatCategory?: FormatCategory;
 }) => CrosshairLabelsGetter;
 export type CrosshairLabelsGetter = (args: {
     position: {

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

@@ -56,7 +56,8 @@ const chartCrosshairDataTransformer = ({
   axesConfig,
   axesIdToFormatter,
   width,
-  axes = ["left", "right", "bottom", "top"]
+  axes = ["left", "right", "bottom", "top"],
+  formatCategory
 }) => {
   const getFormatter = (axis) => {
     const axisConfig = axesConfig[axis];
@@ -82,13 +83,19 @@ const chartCrosshairDataTransformer = ({
     if (pinned) {
       return defaultLabels();
     }
-    const getLabel = (axis, formatter) => (0, import_get_magnifier_label.getMagnifierLabel)(
-      axesConfig[axis]?.unit,
-      coordinates[axis],
-      formatter,
-      position,
-      axesScale[axis]
-    );
+    const getLabel = (axis, formatter) => {
+      const raw = (0, import_get_magnifier_label.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/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/charts/xy-chart/components/selection/TooltipHeader.d.ts

@@ -1 +1,3 @@
-export declare const TooltipHeader: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const TooltipHeader: (props: {
+    subheader: string;
+}) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -22,9 +22,9 @@ __export(TooltipHeader_exports, {
 module.exports = __toCommonJS(TooltipHeader_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_units = require("@dynatrace-sdk/units");
-var import_Duration = require("./Duration.js");
-var import_TooltipHeader_css = require("./TooltipHeader.sty.js");
+var import_get_header_props = require("./get-header-props.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
+var import_OverlayTooltip = require("../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_defaultUnitFormatter = require("../../../core/utils/defaultUnitFormatter.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
 var import_useAxesFormatter = require("../../hooks/useAxesFormatter.js");
@@ -40,7 +40,7 @@ function getAxisFormatter(axesIdToFormatter, axisConfig) {
   }
   return (0, import_safe_get.safeGet)(axesIdToFormatter, axisConfig.id);
 }
-const TooltipHeader = () => {
+const TooltipHeader = (props) => {
   const selectState = (0, import_selectors.useSelectState)();
   const axesIdToFormatter = (0, import_useAxesFormatter.useAxesFormatter)();
   const { top: topScale, bottom: bottomScale } = (0, import_useVisibleAxesScales.useVisibleAxesScales)();
@@ -55,28 +55,28 @@ 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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: "100%" }, children: [
-    topDuration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_Duration.Duration,
-      {
-        axisConfig: topConfig,
-        scale: topScale,
-        formatter: topFormatter,
-        startPixels: start,
-        endPixels: end
-      }
-    ),
-    bothDuration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_TooltipHeader_css.headerItem }),
-    bottomDuration && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_Duration.Duration,
-      {
-        axisConfig: bottomConfig,
-        scale: bottomScale,
-        formatter: bottomFormatter,
-        startPixels: start,
-        endPixels: end
-      }
-    )
-  ] });
+  const header1Props = topDuration ? (0, import_get_header_props.getHeaderProps)({
+    axisConfig: topConfig,
+    scale: topScale,
+    formatter: topFormatter,
+    startPixels: start,
+    endPixels: end,
+    suffix: "1"
+  }) : {};
+  const header2Props = bottomDuration ? (0, import_get_header_props.getHeaderProps)({
+    axisConfig: bottomConfig,
+    scale: bottomScale,
+    formatter: bottomFormatter,
+    startPixels: start,
+    endPixels: end,
+    suffix: "2"
+  }) : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_OverlayTooltip.OverlayTooltip.Header,
+    {
+      ...header1Props,
+      ...header2Props,
+      subheader: props.subheader
+    }
+  );
 };

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

@@ -22,5 +22,5 @@ __export(TooltipHeader_css_exports, {
 });
 module.exports = __toCommonJS(TooltipHeader_css_exports);
 var import_TooltipHeader_css_ts_vanilla = require("./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";

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

@@ -34,6 +34,7 @@ var import_useAreaData = require("../../hooks/useAreaData.js");
 var import_useAxesFormatter = require("../../hooks/useAxesFormatter.js");
 var import_useBarData = require("../../hooks/useBarData.js");
 var import_useDotData = require("../../hooks/useDotData.js");
+var import_useFormatCategory = require("../../hooks/useFormatCategory.js");
 var import_useLineData = require("../../hooks/useLineData.js");
 var import_useRectData = require("../../hooks/useRectData.js");
 var import_useSyncedXScaleByPriority = require("../../hooks/useSyncedXScaleByPriority.js");
@@ -75,6 +76,7 @@ const XYChartSelectionArea = () => {
   const { seriesToMetadata: rectSeriesToMetadata } = (0, import_useRectData.useRectData)();
   const { seriesToMetadata: barSeriesToMetadata } = (0, import_useBarData.useBarData)();
   const { seriesToMetadata: areaSeriesToMetadata } = (0, import_useAreaData.useAreaData)();
+  const formatCategory = (0, import_useFormatCategory.useFormatCategory)();
   const canZoom = axesMetadata.isZoomEnabled;
   if ((0, import_lodash_es.isUndefined)(selectState) || !chartRef.current) {
     return null;
@@ -123,7 +125,10 @@ const XYChartSelectionArea = () => {
         width
       );
     } else if ((0, import_guards.isCategoricalScale)(axisConfig)) {
-      return (value) => (0, import_scale.scaleBandInvert)(axisConfig.axisScale)(value);
+      return (value) => {
+        const raw = (0, import_scale.scaleBandInvert)(axisConfig.axisScale)(value);
+        return (raw && formatCategory(config, raw)) ?? raw;
+      };
     }
   };
   const selectionStart = selectState.selectionPercentage ? width * selectState.selectionPercentage[0] / 100 : start.relative.x;

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

@@ -27,10 +27,10 @@ var import_strato_icons = require("@dynatrace/strato-icons");
 var import_TooltipHeader = require("./TooltipHeader.js");
 var import_get_custom_context_menu_items = require("../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js");
 var import_OverlayContext = require("../../../core/components/overlay-tooltip/contexts/OverlayContext.js");
+var import_OverlayTooltip = require("../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_SelectionTooltipWithAsyncActions = require("../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js");
 var import_get_selection_tooltip_position = require("../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js");
-var import_ChartTooltip = require("../../../core/components/tooltip/ChartTooltip/ChartTooltip.js");
-var import_useScrollResponsiveChartBounds = require("../../../core/hooks/useScrollResponsiveChartBounds.js");
+var import_usePointerAndScrollResponsiveChartBounds = require("../../../core/hooks/usePointerAndScrollResponsiveChartBounds.js");
 var import_useSelectConfig = require("../../hooks/useSelectConfig.js");
 var import_useXYChartData = require("../../hooks/useXYChartData.js");
 var import_messages = require("../../messages/messages.js");
@@ -97,7 +97,10 @@ const DynamicSelectionAreaTooltip = ({
   const intl = (0, import_react_intl.useIntl)();
   const zoomToSelection = (0, import_useZoomToSelection.useZoomToSelection)();
   const { overlayRef: chartRef } = (0, import_OverlayContext.useOverlay)();
-  const chartBounds = (0, import_useScrollResponsiveChartBounds.useScrollResponsiveChartBounds)(chartRef, true)();
+  const chartBounds = (0, import_usePointerAndScrollResponsiveChartBounds.usePointerAndScrollResponsiveChartBounds)(
+    chartRef,
+    true
+  )();
   if ((0, import_lodash_es.isUndefined)(selectState) || !chartBounds) {
     return null;
   }
@@ -112,24 +115,25 @@ const DynamicSelectionAreaTooltip = ({
         );
       },
       selectFinished: selectState.finished,
-      header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipHeader.TooltipHeader, {}),
-      headerSubtext: intl.formatMessage(datapointsMessage, {
-        count: selectedDatapoints,
-        seriesCount: seriesCount + categoriesCount
-      }),
+      header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TooltipHeader.TooltipHeader,
+        {
+          subheader: intl.formatMessage(datapointsMessage, {
+            count: selectedDatapoints,
+            seriesCount: seriesCount + categoriesCount
+          })
+        }
+      ),
       position: tooltipPosition,
       zoomEnabled: axesMetadata.isZoomEnabled,
       range: selectState.selectionPercentage || [0, 0],
       children: axesMetadata.isZoomEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ChartTooltip.ChartTooltip.ActionItem,
+        import_OverlayTooltip.OverlayTooltip.Action,
         {
-          text: intl.formatMessage(import_messages.XYCHART_MESSAGES.zoomToSelection),
+          label: intl.formatMessage(import_messages.XYCHART_MESSAGES.zoomToSelection),
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ZoomToSelectionIcon, {}),
-          onMouseUp: (event) => {
-            event.stopPropagation();
-            zoomToSelection();
-          },
-          shortcut: "\u23CE"
+          onSelect: zoomToSelection,
+          trailingIcon: "\u23CE"
         }
       ) : null
     }

package/charts/xy-chart/components/selection/{Duration.d.ts → get-header-props.d.ts}

@@ -1,9 +1,14 @@
 import type { DateTimeFormatter, FormatterWithPrecision } from '../../../core/types/formatter.js';
 import { type AnyXYChartScale, type XYChartAxisInternal } from '../../types/xy-chart-internals.js';
-export declare const Duration: ({ axisConfig, scale, formatter, startPixels, endPixels, }: {
+export declare const getHeaderProps: ({ axisConfig, scale, formatter, startPixels, endPixels, suffix, }: {
     axisConfig: XYChartAxisInternal;
     scale: AnyXYChartScale;
     formatter: FormatterWithPrecision | DateTimeFormatter;
     startPixels: number;
     endPixels: number;
-}) => import("react/jsx-runtime").JSX.Element;
+    suffix: "1" | "2";
+}) => {
+    [x: string]: string | string[];
+} | {
+    [x: string]: boolean | (Date | undefined)[];
+} | undefined;

package/charts/xy-chart/components/selection/get-header-props.js

@@ -0,0 +1,69 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var get_header_props_exports = {};
+__export(get_header_props_exports, {
+  getHeaderProps: () => getHeaderProps
+});
+module.exports = __toCommonJS(get_header_props_exports);
+var import_get_duration_content = require("../../../core/components/overlay-tooltip/components/header/utils/get-duration-content.js");
+var import_scale = require("../../../core/utils/scale.js");
+var import_guards = require("../../types/guards.js");
+var import_get_timeframe = require("../overlay/utils/get-timeframe.js");
+const getHeaderProps = ({
+  axisConfig,
+  scale,
+  formatter,
+  startPixels,
+  endPixels,
+  suffix
+}) => {
+  const config = {
+    axisType: axisConfig.type,
+    axisScale: scale
+  };
+  const timeframe = (0, import_get_timeframe.getTimeframe)(
+    startPixels,
+    endPixels,
+    !axisConfig?.reversed,
+    scale
+  );
+  if ((0, import_guards.isAnyNumericalScale)(config) && !(0, import_guards.isTimeScale)(config)) {
+    const from = config.axisScale.invert(startPixels);
+    const to = config.axisScale.invert(endPixels);
+    return {
+      [`header${suffix}`]: [formatter(from), formatter(to)],
+      [`duration${suffix}`]: formatter(
+        (0, import_get_duration_content.getDurationContent)(true, [from, to])
+      )
+    };
+  }
+  if ((0, import_guards.isTimeScale)(config)) {
+    return {
+      [`header${suffix}`]: [timeframe.start, timeframe.end],
+      [`showRangeDuration${suffix}`]: true
+    };
+  }
+  if ((0, import_guards.isCategoricalScale)(config)) {
+    return {
+      [`header${suffix}`]: [
+        (0, import_scale.scaleBandInvert)(config.axisScale)(startPixels),
+        (0, import_scale.scaleBandInvert)(config.axisScale)(endPixels)
+      ]
+    };
+  }
+};

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

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

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

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

package/charts/xy-chart/components/tooltip/ClosestPointTooltip/ClosestPointTooltip.js

@@ -69,7 +69,7 @@ function ClosestPointTooltip({
       import_OverlayTooltip.OverlayTooltip.Header,
       {
         header1: xAxisValue,
-        duration: xAxisDuration,
+        duration1: xAxisDuration,
         label
       }
     ),

package/charts/xy-chart/components/tooltip/HoveredPointTooltip/HoveredPointTooltip.js

@@ -27,6 +27,7 @@ var import_hoveredPointTooltipHeaderUtils = require("./hoveredPointTooltipHeader
 var import_OverlayTooltip = require("../../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_useAxesFormatter = require("../../../hooks/useAxesFormatter.js");
 var import_useBarData = require("../../../hooks/useBarData.js");
+var import_useFormatCategory = require("../../../hooks/useFormatCategory.js");
 var import_useXYChartColorScales = require("../../../hooks/useXYChartColorScales.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartTruncationMode = require("../../../hooks/useXYChartTruncationMode.js");
@@ -40,6 +41,7 @@ function HoveredPointTooltip({
   const colorScaleMap = (0, import_useXYChartColorScales.useXYChartColorScales)();
   const { truncationMode } = (0, import_useXYChartTruncationMode.useXYChartTruncationMode)();
   const axisIdToFormatter = (0, import_useAxesFormatter.useAxesFormatter)();
+  const formatCategory = (0, import_useFormatCategory.useFormatCategory)();
   const intl = (0, import_react_intl.useIntl)();
   const { name, value, color, actions } = (0, import_hoveredPointTooltipHeaderUtils.buildHoveredPointTooltipHeaderProps)({
     datapoint,
@@ -56,6 +58,7 @@ function HoveredPointTooltip({
     axisIdToFormatter,
     axisIdToScaleDomain,
     datapointMetadataMap,
+    formatCategory,
     intl
   });
   const isRect = series.type === "rect";
@@ -73,7 +76,7 @@ function HoveredPointTooltip({
       import_OverlayTooltip.OverlayTooltip.Header,
       {
         header1: xAxisValue,
-        duration: xAxisDuration,
+        duration1: xAxisDuration,
         label
       }
     ),

package/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.d.ts

@@ -1,11 +1,15 @@
 import type { IntlShape } from 'react-intl';
-import type { FormatterWithPrecision, TimeFrameFormatter } from '../../../../../core/types/formatter.js';
+import type { FormatterWithPrecision, StringFormatter, TimeFrameFormatter } from '../../../../../core/types/formatter.js';
 import type { XYAccessorDataTypes } from '../../../../types/xy-chart.js';
 /**
- * Pure function that formats tooltip header content.
+ * Pure function that formats tooltip body content.
  * This can be called from non-React contexts (like utility functions).
+ *
+ * `formatter` is discriminated by the value type: a `StringFormatter` for
+ * categorical axes, a `FormatterWithPrecision` for numerical axes, and a
+ * `TimeFrameFormatter` for time axes.
  */
-export declare function getHoveredPointTooltipBodyContent(intl: IntlShape, v0?: XYAccessorDataTypes | undefined, v1?: XYAccessorDataTypes | undefined, formatter?: FormatterWithPrecision | TimeFrameFormatter, toPercentage?: (value: number) => number): {
+export declare function getHoveredPointTooltipBodyContent(intl: IntlShape, v0?: XYAccessorDataTypes | undefined, v1?: XYAccessorDataTypes | undefined, formatter?: FormatterWithPrecision | TimeFrameFormatter | StringFormatter, toPercentage?: (value: number) => number): {
     duration: string | undefined;
     text: string;
 };

package/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js

@@ -38,16 +38,21 @@ function getHoveredPointTooltipBodyContent(intl, v0, v1, formatter, toPercentage
     v1: secondaryValue
   };
   if ((0, import_type_guards.isCategoricalTooltip)(args)) {
-    const startText = String(args.v0);
-    const endText = args.v1 !== void 0 ? String(args.v1) : startText;
-    text = args.v1 !== void 0 ? `${startText} ${separator} ${endText}` : startText;
+    const format = formatter;
+    const formatValue = (v) => format ? format(v) : v;
+    const startText = formatValue(String(args.v0));
+    const endText = args.v1 === void 0 ? startText : formatValue(String(args.v1));
+    text = args.v1 === void 0 ? startText : `${startText} ${separator} ${endText}`;
     return { duration, text };
   }
   if ((0, import_type_guards.isNumericalToolTip)(args) && formatter) {
     const format = formatter;
-    const formattedStart = `${format(args.v0)}${toPercentage ? " (" + toPercentage(args.v0) + "%)" : ""}`;
-    const formattedEnd = args.v1 !== void 0 ? `${format(args.v1)}${toPercentage ? " (" + toPercentage(args.v1) + "%)" : ""}` : formattedStart;
-    text = args.v1 !== void 0 ? `${formattedStart} ${separator} ${formattedEnd}` : formattedStart;
+    const percentageSuffix = (v) => toPercentage ? ` (${toPercentage(v)}%)` : "";
+    const formattedStart = `${format(args.v0)}${percentageSuffix(
+      args.v0
+    )}`;
+    const formattedEnd = args.v1 === void 0 ? formattedStart : `${format(args.v1)}${percentageSuffix(args.v1)}`;
+    text = args.v1 === void 0 ? formattedStart : `${formattedStart} ${separator} ${formattedEnd}`;
     return { duration, text };
   }
   if ((0, import_type_guards.isTimeTooltip)(args) && formatter) {

package/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipBodyUtils.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl';
+import type { FormatCategory } from '../../../hooks/useFormatCategory.js';
 import type { AxisIdToFormatter, AxisIdToScaleDomain, MapDatapoints } from '../../../types/xy-chart-internals.js';
 import type { HoveredDatapoint, HoveredSeries, HoveredSeriesToMetadata } from '../../../utils/type-guards.js';
 import type { XYChartTooltipBodyProps } from '../XYChartTooltipBody/XYChartTooltipBody.js';
@@ -9,6 +10,7 @@ export interface BuildHoveredPointTooltipBodyPropsArgs<T extends HoveredSeries,
     axisIdToFormatter: AxisIdToFormatter;
     axisIdToScaleDomain: AxisIdToScaleDomain;
     datapointMetadataMap: MapDatapoints;
+    formatCategory: FormatCategory;
     intl: IntlShape;
 }
-export declare const buildHoveredPointTooltipBodyProps: <T extends HoveredSeries, K extends HoveredDatapoint<T>>({ datapoint, series, seriesToMetadata, axisIdToFormatter, axisIdToScaleDomain, datapointMetadataMap, intl, }: BuildHoveredPointTooltipBodyPropsArgs<T, K>) => XYChartTooltipBodyProps;
+export declare const buildHoveredPointTooltipBodyProps: <T extends HoveredSeries, K extends HoveredDatapoint<T>>({ datapoint, series, seriesToMetadata, axisIdToFormatter, axisIdToScaleDomain, datapointMetadataMap, formatCategory, intl, }: BuildHoveredPointTooltipBodyPropsArgs<T, K>) => XYChartTooltipBodyProps;