@dynatrace/strato-components 3.5.0 → 3.6.0

package/charts/xy-chart/components/displays/BarDisplay/HorizontalBarLabel.js

@@ -0,0 +1,81 @@
+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 HorizontalBarLabel_exports = {};
+__export(HorizontalBarLabel_exports, {
+  HorizontalBarLabel: () => HorizontalBarLabel
+});
+module.exports = __toCommonJS(HorizontalBarLabel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_BarLabelOverlay_css = require("./BarLabelOverlay.sty.js");
+var import_label_utils = require("./label-utils.js");
+var import_chars_font_width_map = require("../../../../core/components/text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../../../core/components/text-ellipsis/truncate-string.js");
+function HorizontalBarLabel({
+  x,
+  y,
+  barWidth,
+  barHeight,
+  canvasWidth,
+  isReversed,
+  text,
+  insideColor,
+  outsideColor,
+  truncationMode
+}) {
+  if (barHeight < import_label_utils.BAR_LABEL_MIN_SIZE) {
+    return null;
+  }
+  const centerY = y + barHeight / 2;
+  const availLength = isReversed ? x + barWidth - 2 * import_label_utils.BAR_LABEL_PADDING : canvasWidth - x - 2 * import_label_utils.BAR_LABEL_PADDING;
+  if (availLength < import_label_utils.BAR_LABEL_MIN_SIZE) {
+    return null;
+  }
+  const truncated = (0, import_truncate_string.truncateString)(
+    text,
+    availLength,
+    import_chars_font_width_map.charsFontWidth12pixelsSize400Map,
+    truncationMode
+  );
+  const anchor = isReversed ? { right: import_label_utils.BAR_LABEL_PADDING, textAlign: "right" } : { left: x + import_label_utils.BAR_LABEL_PADDING };
+  const outerStyle = {
+    ...anchor,
+    top: centerY,
+    transform: "translateY(-50%)",
+    width: availLength,
+    color: outsideColor
+  };
+  const wrapperStyle = {
+    left: x,
+    top: y,
+    width: barWidth,
+    height: barHeight
+  };
+  const innerStyle = {
+    ...isReversed ? anchor : { left: import_label_utils.BAR_LABEL_PADDING },
+    top: barHeight / 2,
+    transform: "translateY(-50%)",
+    width: availLength,
+    color: insideColor
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style: outerStyle, children: truncated }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_BarLabelOverlay_css.labelClipWrapper, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style: innerStyle, children: truncated }) })
+  ] });
+}
+HorizontalBarLabel["displayName"] = "HorizontalBarLabel";

package/charts/xy-chart/components/displays/BarDisplay/VerticalBarLabel.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
+interface VerticalBarLabelProps {
+    x: number;
+    y: number;
+    barWidth: number;
+    barHeight: number;
+    canvasHeight: number;
+    isReversed: boolean;
+    text: string;
+    insideColor: string;
+    outsideColor: string;
+    truncationMode: TruncationMode;
+}
+/**
+ * HTML "split-clip" label for a single vertical bar.
+ *
+ * Mirrors the horizontal split-clip pattern but rotated. The constraining
+ * dimension is the bar's WIDTH (perpendicular to the rotated text's reading
+ * direction); the bar's height does not constrain a rotated label — the
+ * available text length runs the full chart height minus padding.
+ *
+ * When `isReversed` is false (BTT, normal) the bar grows upward and the label
+ * is rotated −90°, reading bottom-to-top.
+ *
+ * When `isReversed` is true (the numerical Y axis has `reversed` set, i.e.
+ * TTB) the bar grows downward from the chart top and the label is rotated
+ * +90°, reading top-to-bottom.
+ */
+export declare function VerticalBarLabel({ x, y, barWidth, barHeight, canvasHeight, isReversed, text, insideColor, outsideColor, truncationMode, }: Readonly<VerticalBarLabelProps>): ReactNode;
+export declare namespace VerticalBarLabel {
+    var displayName: string;
+}
+export {};

package/charts/xy-chart/components/displays/BarDisplay/VerticalBarLabel.js

@@ -0,0 +1,82 @@
+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 VerticalBarLabel_exports = {};
+__export(VerticalBarLabel_exports, {
+  VerticalBarLabel: () => VerticalBarLabel
+});
+module.exports = __toCommonJS(VerticalBarLabel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_BarLabelOverlay_css = require("./BarLabelOverlay.sty.js");
+var import_label_utils = require("./label-utils.js");
+var import_chars_font_width_map = require("../../../../core/components/text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../../../core/components/text-ellipsis/truncate-string.js");
+function VerticalBarLabel({
+  x,
+  y,
+  barWidth,
+  barHeight,
+  canvasHeight,
+  isReversed,
+  text,
+  insideColor,
+  outsideColor,
+  truncationMode
+}) {
+  if (barWidth < import_label_utils.BAR_LABEL_MIN_SIZE) {
+    return null;
+  }
+  const availLength = canvasHeight - 2 * import_label_utils.BAR_LABEL_PADDING;
+  if (availLength < import_label_utils.BAR_LABEL_MIN_SIZE) {
+    return null;
+  }
+  const truncated = (0, import_truncate_string.truncateString)(
+    text,
+    availLength,
+    import_chars_font_width_map.charsFontWidth12pixelsSize400Map,
+    truncationMode
+  );
+  const centerX = x + barWidth / 2;
+  const centerY = canvasHeight / 2;
+  const rotation = isReversed ? "rotate(90deg)" : "rotate(-90deg)";
+  const outerStyle = {
+    left: centerX,
+    top: centerY,
+    transform: `translate(-50%, -50%) ${rotation}`,
+    width: availLength,
+    color: outsideColor
+  };
+  const wrapperStyle = {
+    left: x,
+    top: y,
+    width: barWidth,
+    height: barHeight
+  };
+  const innerStyle = {
+    left: barWidth / 2,
+    top: centerY - y,
+    transform: `translate(-50%, -50%) ${rotation}`,
+    width: availLength,
+    color: insideColor
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style: outerStyle, children: truncated }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_BarLabelOverlay_css.labelClipWrapper, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_BarLabelOverlay_css.labelSpan, style: innerStyle, children: truncated }) })
+  ] });
+}
+VerticalBarLabel["displayName"] = "VerticalBarLabel";

package/charts/xy-chart/components/displays/BarDisplay/label-utils.d.ts

@@ -0,0 +1,8 @@
+/** Horizontal padding between bar edge and label text. */
+export declare const BAR_LABEL_PADDING = 4;
+/**
+ * Minimum size (in pixels) for the bar dimension perpendicular to the text
+ * reading direction (bar height for horizontal text, bar width for rotated
+ * vertical text). Below this there is no readable space for text.
+ */
+export declare const BAR_LABEL_MIN_SIZE = 16;

package/charts/xy-chart/components/displays/BarDisplay/label-utils.js

@@ -0,0 +1,25 @@
+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 label_utils_exports = {};
+__export(label_utils_exports, {
+  BAR_LABEL_MIN_SIZE: () => BAR_LABEL_MIN_SIZE,
+  BAR_LABEL_PADDING: () => BAR_LABEL_PADDING
+});
+module.exports = __toCommonJS(label_utils_exports);
+const BAR_LABEL_PADDING = 4;
+const BAR_LABEL_MIN_SIZE = 16;

package/charts/xy-chart/components/displays/bar-accessors.js

@@ -54,15 +54,16 @@ function calculateBarOrigin(args, accessorCoord) {
   if (!(0, import_lodash_es.isNil)(v0) && !(0, import_lodash_es.isNil)(v1)) {
     return Math.min(scale(v0), scale(v1));
   }
-  if (!(0, import_lodash_es.isNil)(v1)) {
-    if (typeof v1 === "number" && v1 < 0) {
-      return accessorCoord === "x" ? scale(v1) : scale(0);
-    }
-    return accessorCoord === "x" ? typeof v1 === "number" ? scale(0) : scale(scale.invert(0)) : scale(v1);
-  }
   if (!(0, import_lodash_es.isNil)(v0)) {
     return scale(v0);
   }
+  if ((0, import_lodash_es.isNil)(v1)) {
+    return void 0;
+  }
+  if (typeof v1 === "number" && v1 < 0) {
+    return accessorCoord === "x" ? scale(v1) : scale(0);
+  }
+  return typeof v1 === "number" ? Math.min(scale(0), scale(v1)) : Math.min(scale(scale.invert(scale.range()[0])), scale(v1));
 }
 function genericAccessor(scale, datapointsMetadata, accessorCoord, dimensionScale, seriesId, relAccessor) {
   return (datapoint) => {

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

@@ -1,3 +1,3 @@
-._1lwufqz0-3-5-0 {
+._1lwufqz0-3-6-0 {
   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-5-0";
+var shapeIconWrapper = "_1lwufqz0-3-6-0";

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

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

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-5-0";
+var crosshair = "_1bbe5uo0-3-6-0";

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

@@ -1,4 +1,4 @@
-._cd1yys0-3-5-0 {
+._cd1yys0-3-6-0 {
   top: -11px;
   left: -11px;
   width: calc(100% + 22px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._cd1yys1-3-5-0 {
+._cd1yys1-3-6-0 {
   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-5-0 _13lzg4k0-3-5-0";
-var datapointIndicatorShiftedLayout = "_cd1yys0-3-5-0 _13lzg4k0-3-5-0";
+var datapointIndicatorLayout = "_cd1yys1-3-6-0 _13lzg4k0-3-6-0";
+var datapointIndicatorShiftedLayout = "_cd1yys0-3-6-0 _13lzg4k0-3-6-0";

package/charts/xy-chart/components/overlay/hooks/useApplyPanDelta.js

@@ -20,7 +20,7 @@ __export(useApplyPanDelta_exports, {
   useApplyPanDelta: () => useApplyPanDelta
 });
 module.exports = __toCommonJS(useApplyPanDelta_exports);
-var import_useTooltipReducer = require("../../../../core/components/overlay-tooltip/useTooltipReducer.js");
+var import_useTooltipActions = require("../../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_get_next_pan_domain = require("../../../../core/components/zoom/utils/get-next-pan-domain.js");
 var import_zoom = require("../../../../core/types/zoom.js");
@@ -36,7 +36,7 @@ const useApplyPanDelta = () => {
   const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
   const { axes } = (0, import_useXYChartData.useXYChartData)();
   const { resetSelectionState } = (0, import_useSynchronizedSelection.useSynchronizedSelection)();
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const { reset } = (0, import_useTooltipActions.useTooltipActions)();
   return (delta) => {
     const newCurrentDomain = /* @__PURE__ */ new Map();
     const allAxesHaveInfiniteZoom = axes.filter((axis) => (0, import_axis_interactions.isZoomEnabledFor)(axis) && (0, import_axis_interactions.isPanEnabledFor)(axis)).every(import_axis_interactions.isInfiniteZoomEnabledFor);
@@ -64,6 +64,6 @@ const useApplyPanDelta = () => {
     }
     resetSelectionState?.();
     setState((0, import_reducer_pan.reducePanDomain)(newCurrentDomain));
-    dispatch({ type: "RESET_TOOLTIP" })();
+    reset();
   };
 };

package/charts/xy-chart/components/overlay/hooks/useApplyZoomDelta.js

@@ -20,7 +20,7 @@ __export(useApplyZoomDelta_exports, {
   useApplyZoomDelta: () => useApplyZoomDelta
 });
 module.exports = __toCommonJS(useApplyZoomDelta_exports);
-var import_useTooltipReducer = require("../../../../core/components/overlay-tooltip/useTooltipReducer.js");
+var import_useTooltipActions = require("../../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_get_zoom_step = require("../../../../core/components/zoom/utils/get-zoom-step.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
@@ -35,7 +35,7 @@ const useApplyZoomDelta = () => {
   const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
   const { axes } = (0, import_useXYChartData.useXYChartData)();
   const { resetSelectionState } = (0, import_useSynchronizedSelection.useSynchronizedSelection)();
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const { reset } = (0, import_useTooltipActions.useTooltipActions)();
   return (deltaStart, deltaEnd, type) => {
     const newCurrentDomain = /* @__PURE__ */ new Map();
     let zoomInEnabled = false;
@@ -68,6 +68,6 @@ const useApplyZoomDelta = () => {
     }
     resetSelectionState?.();
     setState((0, import_reducer_zoom.reduceZoomDomain)(newCurrentDomain, zoomInEnabled, zoomOutEnabled));
-    dispatch({ type: "RESET_TOOLTIP" })();
+    reset();
   };
 };

package/charts/xy-chart/components/overlay/hooks/useOverlayEvents.d.ts

@@ -14,7 +14,7 @@ export declare const useOverlayEvents: () => {
         triggeredBy: InteractionTriggers;
         position: RelativeAbsolutePosition;
     }) => void;
-    handleTogglePin: (pin: boolean, position: RelativeAbsolutePosition | undefined) => void;
+    handleTogglePin: (shouldPin: boolean, position: RelativeAbsolutePosition | undefined) => void;
     handleReset: (event: {
         triggeredBy: InteractionTriggers;
         mousePosition?: RelativeAbsolutePosition;

package/charts/xy-chart/components/overlay/hooks/useOverlayEvents.js

@@ -27,8 +27,7 @@ var import_useResetInteractions = require("./useResetInteractions.js");
 var import_useZoomToSelection = require("./useZoomToSelection.js");
 var import_useGridPlotSize = require("../../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_types = require("../../../../core/components/interactions-overlay/types.js");
-var import_useTooltipReducer = require("../../../../core/components/overlay-tooltip/useTooltipReducer.js");
-var import_utils = require("../../../../core/components/overlay-tooltip/utils.js");
+var import_useTooltipActions = require("../../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useSynchronizedCrosshair = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedCrosshair.js");
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_zoom = require("../../../../core/types/zoom.js");
@@ -89,14 +88,14 @@ const useOverlayEvents = () => {
     resetSelectionState: resetSynchronizedSelection
   } = (0, import_useSynchronizedSelection.useSynchronizedSelection)();
   const syncedXScale = (0, import_useSyncedXScaleByPriority.useSyncedXScaleByPriority)();
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const { hover, pin, unpin, reset, outOfBounds } = (0, import_useTooltipActions.useTooltipActions)();
   const {
     updateHoverState: updateSynchronizedCrosshair,
     setDisabled: disableSynchronizedCrosshair
   } = synchronizedCrosshair ?? {};
   const resetTooltip = () => {
     setState(import_reducer_explorer.reduceExploreCancelHighlight);
-    dispatch({ type: "RESET_TOOLTIP" })();
+    reset();
   };
   const handleModeChange = (event) => {
     const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;
@@ -134,13 +133,13 @@ const useOverlayEvents = () => {
       series: [],
       metadata: hoveredDatapointQueryResult
     } : void 0;
-    dispatch({
-      type: "SET_POSITION",
+    hover(
+      { clientX: position.absolute.x, clientY: position.absolute.y },
       payload
-    })({ clientX: position.absolute.x, clientY: position.absolute.y });
+    );
   };
-  const handleTogglePin = (pin, position) => {
-    if (pin) {
+  const handleTogglePin = (shouldPin, position) => {
+    if (shouldPin) {
       handlePin(position);
       updateSynchronizedCrosshair?.(void 0);
     } else {
@@ -160,23 +159,17 @@ const useOverlayEvents = () => {
         queryClosest,
         queryHovered
       );
-      dispatch({
-        type: "SET_PINNED",
-        payload: {
-          pinned: false,
-          data: (0, import_utils.emptyData)()
-        }
-      })();
+      unpin();
       if (hoveredDatapointQueryResult) {
-        dispatch({
-          type: "SET_POSITION",
-          payload: {
+        hover(
+          { clientX: position.absolute.x, clientY: position.absolute.y },
+          {
             geometry: hoveredDatapointQueryResult.type,
             header1: void 0,
             series: [],
             metadata: hoveredDatapointQueryResult
           }
-        })({ clientX: position.absolute.x, clientY: position.absolute.y });
+        );
       }
     } else {
       resetTooltip();
@@ -198,20 +191,15 @@ const useOverlayEvents = () => {
     );
     if (hoveredDatapointQueryResult) {
       setState((0, import_reducer_explorer.reduceExplorePin)(hoveredDatapointQueryResult.series.id));
-      dispatch({
-        type: "SET_PINNED",
-        payload: {
-          pinned: true,
-          relativeX: position.relative.x,
-          relativeY: position.relative.y,
-          data: {
-            geometry: hoveredDatapointQueryResult.type,
-            header1: void 0,
-            series: [],
-            metadata: hoveredDatapointQueryResult
-          }
+      pin(
+        { clientX: position.absolute.x, clientY: position.absolute.y },
+        {
+          geometry: hoveredDatapointQueryResult.type,
+          header1: void 0,
+          series: [],
+          metadata: hoveredDatapointQueryResult
         }
-      })();
+      );
     }
   };
   const handleReset = (event) => {
@@ -235,22 +223,22 @@ const useOverlayEvents = () => {
       queryHovered
     );
     if (hoveredDatapointQueryResult) {
-      dispatch({
-        type: "SET_POSITION",
-        payload: {
+      hover(
+        { clientX: position.absolute.x, clientY: position.absolute.y },
+        {
           geometry: hoveredDatapointQueryResult.type,
           header1: void 0,
           series: [],
           metadata: hoveredDatapointQueryResult
         }
-      })({ clientX: position.absolute.x, clientY: position.absolute.y });
+      );
     } else {
-      dispatch({ type: "SET_OUT_BOUNDS" })();
+      outOfBounds();
     }
   };
   const handleLeave = (_) => {
     updateSynchronizedCrosshair?.(void 0);
-    dispatch({ type: "SET_OUT_BOUNDS" })();
+    outOfBounds();
   };
   const handlePanChange = (event) => {
     applyPanDelta(event.delta);

package/charts/xy-chart/components/overlay/hooks/useResetInteractions.js

@@ -20,7 +20,7 @@ __export(useResetInteractions_exports, {
   useResetInteractions: () => useResetInteractions
 });
 module.exports = __toCommonJS(useResetInteractions_exports);
-var import_useTooltipReducer = require("../../../../core/components/overlay-tooltip/useTooltipReducer.js");
+var import_useTooltipActions = require("../../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_zoom = require("../../../../core/types/zoom.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
@@ -31,7 +31,7 @@ var import_axis_interactions = require("../../../utils/axis-interactions.js");
 var import_get_scale = require("../../../utils/get-scale.js");
 var import_zoom_change_handler = require("../utils/zoom-change-handler.js");
 const useResetInteractions = () => {
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const { reset } = (0, import_useTooltipActions.useTooltipActions)();
   const setState = (0, import_selectors.useSetState)();
   const { axes } = (0, import_useXYChartData.useXYChartData)();
   const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
@@ -51,7 +51,7 @@ const useResetInteractions = () => {
     }
     const allZoomablesAxesHaveInfiniteZoom = axes.filter(import_axis_interactions.isZoomEnabledFor).length > 0 && axes.filter(import_axis_interactions.isZoomEnabledFor).every((axis) => axis.interactions.infinite);
     resetSelectionState?.();
-    dispatch({ type: "RESET_TOOLTIP" })();
+    reset();
     setState(
       (0, import_reducer_reset.reduceResetInteractions)({
         position: event?.position,

package/charts/xy-chart/components/overlay/utils/get-selected-datapoints.js

@@ -45,7 +45,7 @@ var import_value_representation = require("../../../utils/value-representation.j
 var import_area_accessors = require("../../displays/area-accessors.js");
 var import_band_accessors = require("../../displays/band-accessors.js");
 var import_bar_accessors = require("../../displays/bar-accessors.js");
-var import_BarDisplay = require("../../displays/BarDisplay.js");
+var import_BarDisplay = require("../../displays/BarDisplay/BarDisplay.js");
 var import_dot_accessors = require("../../displays/dot-accessors.js");
 var import_line_accessors = require("../../displays/line-accessors.js");
 var import_rect_accessors = require("../../displays/rect-accessors.js");

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

@@ -26,7 +26,7 @@ var import_get_scale = require("../../../utils/get-scale.js");
 var import_type_guards = require("../../../utils/type-guards.js");
 var import_value_representation = require("../../../utils/value-representation.js");
 var import_bar_accessors = require("../../displays/bar-accessors.js");
-var import_BarDisplay = require("../../displays/BarDisplay.js");
+var import_BarDisplay = require("../../displays/BarDisplay/BarDisplay.js");
 var import_rect_accessors = require("../../displays/rect-accessors.js");
 const serializeRectangleSeriesValues = (axisIdToScales, rectMetadata, axisIdToScaleDomain, datapointMetadataMap, barMetadata) => {
   return (point) => {

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

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

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-5-0";
-var headerItem = "_biijte0-3-5-0";
+var formattedTimeframe = "_biijte1-3-6-0";
+var headerItem = "_biijte0-3-6-0";

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

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-5-0 {
+._1mfu0sw0-3-6-0 {
   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-5-0 _13lzg4k0-3-5-0";
+var thresholdPlot = "_1mfu0sw0-3-6-0 _13lzg4k0-3-6-0";

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

@@ -22,12 +22,23 @@ __export(BarSeriesTooltip_exports, {
 module.exports = __toCommonJS(BarSeriesTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_HoveredPointTooltip = require("./HoveredPointTooltip/HoveredPointTooltip.js");
+var import_TopListTooltip = require("./TopListTooltip.js");
 var import_useBarData = require("../../hooks/useBarData.js");
 function BarSeriesTooltip({
   datapoint,
   series
 }) {
   const { seriesToMetadata } = (0, import_useBarData.useBarData)();
+  if (series.labelAccessor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TopListTooltip.TopListTooltip,
+      {
+        datapoint,
+        series,
+        seriesToMetadata
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_HoveredPointTooltip.HoveredPointTooltip,
     {

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

@@ -0,0 +1,7 @@
+import type { BarSeriesToMetadata, BarSeriesWithDatapoints } from '../../types/xy-chart-internals.js';
+import type { BarDatapoint } from '../../types/xy-chart.js';
+export declare function TopListTooltip({ datapoint, series, seriesToMetadata, }: Readonly<{
+    datapoint: BarDatapoint;
+    series: BarSeriesWithDatapoints;
+    seriesToMetadata: BarSeriesToMetadata;
+}>): import("react/jsx-runtime").JSX.Element;