@dynatrace/strato-components 3.5.2 → 3.7.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

@@ -2,9 +2,6 @@ import type { RefObject } from 'react';
 import { type InteractionMode, type InteractionTriggers, type ZoomBehavior } from '../../../../core/components/interactions-overlay/types.js';
 import type { _SelectionRef } from '../../../../core/components/selection-area/types.js';
 import type { RelativeAbsolutePosition } from '../../../../core/types/pointer-events.js';
-import type { QueryClosest, QueryHovered } from '../../../context/XYChartOverlayPerformance.context.js';
-import { DotSeriesWithDatapoints, LineSeriesWithDatapoints, RectSeriesWithDatapoints, type AreaSeriesWithDatapoints, type BarSeriesWithDatapoints } from '../../../types/xy-chart-internals.js';
-export declare const getHoveredDatapoint: (position: RelativeAbsolutePosition, dotSeriesData: DotSeriesWithDatapoints[], lineSeriesData: LineSeriesWithDatapoints[], areaSeriesData: AreaSeriesWithDatapoints[], rectData: RectSeriesWithDatapoints[], barData: BarSeriesWithDatapoints[], queryClosest: QueryClosest, queryHovered: QueryHovered) => import("../../../context/XYChartOverlayPerformance.context.js").DotSeriesQueryResult | import("../../../context/XYChartOverlayPerformance.context.js").LineSeriesQueryResult | import("../../../context/XYChartOverlayPerformance.context.js").RectSeriesQueryResult | import("../../../context/XYChartOverlayPerformance.context.js").BarSeriesQueryResult | import("../../../context/XYChartOverlayPerformance.context.js").AreaSeriesQueryResult | undefined;
 export declare const useOverlayEvents: () => {
     handleModeChange: (event: {
         mode: InteractionMode;
@@ -14,7 +11,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

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useOverlayEvents_exports = {};
 __export(useOverlayEvents_exports, {
-  getHoveredDatapoint: () => getHoveredDatapoint,
   useOverlayEvents: () => useOverlayEvents
 });
 module.exports = __toCommonJS(useOverlayEvents_exports);
@@ -27,8 +26,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");
@@ -45,27 +43,6 @@ var import_useXYChartId = require("../../../hooks/useXYChartId.js");
 var import_reduce_interaction_mode = require("../../../store/reduce-interaction-mode.js");
 var import_reducer_explorer = require("../../../store/reducer-explorer.js");
 var import_selectors = require("../../../store/selectors.js");
-var import_get_prevailing_shape_type = require("../utils/get-prevailing-shape-type.js");
-const getHoveredDatapoint = (position, dotSeriesData, lineSeriesData, areaSeriesData, rectData, barData, queryClosest, queryHovered) => {
-  const results = {
-    dot: queryClosest(dotSeriesData, position.relative),
-    line: queryClosest(lineSeriesData, position.relative),
-    area: queryClosest(areaSeriesData, position.relative),
-    rect: queryHovered(rectData, position.relative),
-    bar: queryHovered(barData, position.relative)
-  };
-  const prevailingShape = (0, import_get_prevailing_shape_type.getPrevailingShapeType)(
-    results.dot?.distance,
-    results.line?.distance,
-    results.area?.distance,
-    !!results.rect,
-    !!results.bar
-  );
-  if (!prevailingShape) {
-    return void 0;
-  }
-  return results[prevailingShape];
-};
 const useOverlayEvents = () => {
   const { filteredSeriesWithDatapoints: rectSeriesData } = (0, import_useRectData.useRectData)();
   const { filteredSeriesWithDatapoints: barSeriesData } = (0, import_useBarData.useBarData)();
@@ -79,7 +56,7 @@ const useOverlayEvents = () => {
   const applyReset = (0, import_useResetInteractions.useResetInteractions)();
   const applyZoomDelta = (0, import_useApplyZoomDelta.useApplyZoomDelta)();
   const zoomState = (0, import_selectors.useZoomState)();
-  const { queryClosest, queryHovered } = (0, import_useOverlayPerformance.useOverlayPerformance)();
+  const { query } = (0, import_useOverlayPerformance.useOverlayPerformance)();
   const { axesMetadata } = (0, import_useXYChartData.useXYChartData)();
   const chartId = (0, import_useXYChartId.useXYChartId)();
   const synchronizedCrosshair = (0, import_useSynchronizedCrosshair.useSynchronizedCrosshair)();
@@ -89,14 +66,22 @@ 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 getDatapoints = (position) => query({
+    position,
+    dotSeriesData,
+    lineSeriesData,
+    areaSeriesData,
+    rectSeriesData,
+    barSeriesData
+  });
   const resetTooltip = () => {
     setState(import_reducer_explorer.reduceExploreCancelHighlight);
-    dispatch({ type: "RESET_TOOLTIP" })();
+    reset();
   };
   const handleModeChange = (event) => {
     const canPan = axesMetadata.isPanEnabled && zoomState.zoomOutEnabled;
@@ -118,29 +103,20 @@ const useOverlayEvents = () => {
       disableSynchronizedCrosshair?.(false);
       updateSynchronizedCrosshair?.(chartId, hoveredDate.valueOf());
     }
-    const hoveredDatapointQueryResult = getHoveredDatapoint(
-      position,
-      dotSeriesData,
-      lineSeriesData,
-      areaSeriesData,
-      rectSeriesData,
-      barSeriesData,
-      queryClosest,
-      queryHovered
-    );
-    const payload = hoveredDatapointQueryResult ? {
-      geometry: hoveredDatapointQueryResult.type,
+    const metadata = getDatapoints(position);
+    const payload = metadata.preferred ? {
+      geometry: metadata.preferred.type,
       header1: void 0,
       series: [],
-      metadata: hoveredDatapointQueryResult
+      metadata
     } : 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 {
@@ -150,33 +126,18 @@ const useOverlayEvents = () => {
   const handleUnPin = (position) => {
     setState(import_reducer_explorer.reduceExploreUnPin);
     if (position) {
-      const hoveredDatapointQueryResult = getHoveredDatapoint(
-        position,
-        dotSeriesData,
-        lineSeriesData,
-        areaSeriesData,
-        rectSeriesData,
-        barSeriesData,
-        queryClosest,
-        queryHovered
-      );
-      dispatch({
-        type: "SET_PINNED",
-        payload: {
-          pinned: false,
-          data: (0, import_utils.emptyData)()
-        }
-      })();
-      if (hoveredDatapointQueryResult) {
-        dispatch({
-          type: "SET_POSITION",
-          payload: {
-            geometry: hoveredDatapointQueryResult.type,
+      const metadata = getDatapoints(position);
+      unpin();
+      if (metadata.preferred) {
+        hover(
+          { clientX: position.absolute.x, clientY: position.absolute.y },
+          {
+            geometry: metadata.preferred.type,
             header1: void 0,
             series: [],
-            metadata: hoveredDatapointQueryResult
+            metadata
           }
-        })({ clientX: position.absolute.x, clientY: position.absolute.y });
+        );
       }
     } else {
       resetTooltip();
@@ -186,32 +147,18 @@ const useOverlayEvents = () => {
     if (!position) {
       return;
     }
-    const hoveredDatapointQueryResult = getHoveredDatapoint(
-      position,
-      dotSeriesData,
-      lineSeriesData,
-      areaSeriesData,
-      rectSeriesData,
-      barSeriesData,
-      queryClosest,
-      queryHovered
-    );
-    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
-          }
+    const metadata = getDatapoints(position);
+    if (metadata.preferred) {
+      setState((0, import_reducer_explorer.reduceExplorePin)(metadata.preferred.series.id));
+      pin(
+        { clientX: position.absolute.x, clientY: position.absolute.y },
+        {
+          geometry: metadata.preferred.type,
+          header1: void 0,
+          series: [],
+          metadata
         }
-      })();
+      );
     }
   };
   const handleReset = (event) => {
@@ -224,33 +171,24 @@ const useOverlayEvents = () => {
       return;
     }
     setState(import_reducer_explorer.reduceExploreCancelAll);
-    const hoveredDatapointQueryResult = getHoveredDatapoint(
-      position,
-      dotSeriesData,
-      lineSeriesData,
-      areaSeriesData,
-      rectSeriesData,
-      barSeriesData,
-      queryClosest,
-      queryHovered
-    );
-    if (hoveredDatapointQueryResult) {
-      dispatch({
-        type: "SET_POSITION",
-        payload: {
-          geometry: hoveredDatapointQueryResult.type,
+    const metadata = getDatapoints(position);
+    if (metadata.preferred) {
+      hover(
+        { clientX: position.absolute.x, clientY: position.absolute.y },
+        {
+          geometry: metadata.preferred.type,
           header1: void 0,
           series: [],
-          metadata: hoveredDatapointQueryResult
+          metadata
         }
-      })({ 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/hooks/useTooltipMetadata.d.ts

@@ -1,2 +1,2 @@
-import { UndefinedContent, type TooltipContent } from '../../../types/state.js';
-export declare const useTooltipMetadata: (variant: "linear" | "rectangle") => TooltipContent | typeof UndefinedContent;
+import { type TooltipContent } from '../../../types/state.js';
+export declare const useTooltipMetadata: (variant: "linear" | "rectangle") => TooltipContent[];

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

@@ -26,13 +26,22 @@ const VariantToGeometryMap = {
   linear: /* @__PURE__ */ new Set(["dot", "line", "area"]),
   rectangle: /* @__PURE__ */ new Set(["rect", "bar"])
 };
+const getPreferred = (metadata) => metadata?.preferred ?? import_state.UndefinedContent;
+const getDatapoints = (metadata, variant) => {
+  const all = metadata?.datapoints;
+  if (!all) {
+    return [];
+  }
+  return all.filter(
+    (dp) => VariantToGeometryMap[variant].has(dp.type)
+  );
+};
 const useTooltipMetadata = (variant) => {
   (0, import_selectors.useSelector)(({ data: data2 }) => {
-    const metadata = data2?.metadata || import_state.UndefinedContent;
-    if (VariantToGeometryMap[variant].has(metadata.type)) {
-      return (metadata || import_state.UndefinedContent || void 0)?.datapoint;
-    }
+    const preferred = getPreferred(data2?.metadata);
+    const datapoints = getDatapoints(data2?.metadata, variant);
+    return { datapoint: preferred.datapoint, length: datapoints.length };
   });
   const { data } = (0, import_selectors.useTooltipSnapshot)();
-  return data.metadata || import_state.UndefinedContent;
+  return getDatapoints(data.metadata, variant);
 };

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

@@ -6,7 +6,7 @@ import type { useRectData } from '../../../hooks/useRectData.js';
 import type { useXYChartRectSelection } from '../../../hooks/useXYChartRectSelection.js';
 import type { useXYChartScales } from '../../../hooks/useXYChartScales.js';
 import type { useSelectState } from '../../../store/selectors.js';
-import type { XYChartExploreState } from '../../../types/state.js';
+import type { TooltipContent, XYChartExploreState } from '../../../types/state.js';
 import { type AxisIdToScaleDomain, type BarSeriesToMetadata, type BarSeriesWithDatapoints, type DotMetadata, type DotSeriesToMetadata, type DotSeriesWithDatapoints, type HighlightedLinearPoint, type LineMetadata, type LineSeriesToMetadata, type LineSeriesWithDatapoints, type RectDatapointInternal, type RectMetadata, type RectSeriesToMetadata, type RectSeriesWithDatapoints, type AreaMetadata, type AreaSeriesWithDatapoints, type MapDatapoints, type XYChartAxisInternal, type XYChartSeriesWithDatapoints, type AreaSeriesToMetadata } from '../../../types/xy-chart-internals.js';
 import type { AreaDatapoint, BarDatapoint, DotDatapoint, LineDatapoint } from '../../../types/xy-chart.js';
 import { type BinDomain } from '../../../utils/value-representation.js';
@@ -96,11 +96,11 @@ export declare function buildRectangleHighlightedPoints(params: {
     rectSeriesWithDatapoints: RectSeriesList;
     barSeriesWithDatapoints: BarSeriesList;
     axisIdToScales: ReturnType<typeof useXYChartScales>;
-    contentState: XYChartExploreState['content'];
     barSeriesMeta: BarSeriesMeta;
     rectSeriesMeta: RectSeriesMeta;
     datapointMetadataMap: MapDatapoints;
     axisIdToScaleDomain: Map<string, BinDomain>;
     axes: XYChartAxisInternal[];
+    allRectangleDatapoints: TooltipContent[];
 }): RectanglePoint[];
 export {};

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");
@@ -752,6 +752,12 @@ function buildContentHighlightedRectangle(params) {
 }
 function buildRectangleHighlightedPoints(params) {
   const selectionRects = buildSelectionHighlightedRectangles(params);
-  const contentRect = buildContentHighlightedRectangle(params);
-  return contentRect ? [...selectionRects, contentRect] : selectionRects;
+  const contentRects = params.allRectangleDatapoints.flatMap((contentState) => {
+    const rect = buildContentHighlightedRectangle({
+      ...params,
+      contentState
+    });
+    return rect ? [rect] : [];
+  });
+  return [...selectionRects, ...contentRects];
 }

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/thresholds/XYChartThresholdIndicators.css

@@ -1,3 +1,3 @@
-._1mfu0sw0-3-5-2 {
+._1mfu0sw0-3-7-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-2 _13lzg4k0-3-5-2";
+var thresholdPlot = "_1mfu0sw0-3-7-0 _13lzg4k0-3-7-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/ClosestPointTooltip/closestPointTooltipHeaderUtils.d.ts

@@ -1,13 +1,16 @@
+import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';
 import type { AreaSeriesWithDatapoints, MapDatapoints } from '../../../types/xy-chart-internals.js';
 import { type ClosestDatapoint, type ClosestSeries, type ClosestSeriesToMetadata } from '../../../utils/type-guards.js';
-import type { XYChartTooltipHeaderProps } from '../XYChartTooltipHeader/XYChartTooltipHeader.js';
 export interface BuildClosestPointTooltipHeaderPropsArgs<T extends ClosestSeries, K extends ClosestDatapoint<T>> {
     datapoint: K;
     series: T;
     seriesToMetadata: ClosestSeriesToMetadata<T>;
     seriesWithDatapoints: AreaSeriesWithDatapoints[];
     datapointMetadataMap: MapDatapoints;
-    truncationMode?: XYChartTooltipHeaderProps['truncationMode'];
-    idFactory?: () => string;
 }
-export declare const buildClosestPointTooltipHeaderProps: <T extends ClosestSeries, K extends ClosestDatapoint<T>>({ datapoint, series, seriesToMetadata, seriesWithDatapoints, datapointMetadataMap, truncationMode, idFactory, }: BuildClosestPointTooltipHeaderPropsArgs<T, K>) => XYChartTooltipHeaderProps;
+export declare const buildClosestPointTooltipHeaderProps: <T extends ClosestSeries, K extends ClosestDatapoint<T>>({ datapoint, series, seriesToMetadata, seriesWithDatapoints, datapointMetadataMap, }: BuildClosestPointTooltipHeaderPropsArgs<T, K>) => {
+    color: string;
+    name: string;
+    actions: (() => SeriesActionsTemplate) | undefined;
+    shape: import("../../../../index.js").PointShapeType | undefined;
+};

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

@@ -20,7 +20,6 @@ __export(closestPointTooltipHeaderUtils_exports, {
   buildClosestPointTooltipHeaderProps: () => buildClosestPointTooltipHeaderProps
 });
 module.exports = __toCommonJS(closestPointTooltipHeaderUtils_exports);
-var import_useDefaultAction = require("../../../../core/components/series-action/hooks/useDefaultAction.js");
 var import_safe_get = require("../../../../core/utils/safe-get.js");
 var import_build_series_action_item = require("../../../utils/build-series-action-item.js");
 var import_type_guards = require("../../../utils/type-guards.js");
@@ -29,9 +28,7 @@ const buildClosestPointTooltipHeaderProps = ({
   series,
   seriesToMetadata,
   seriesWithDatapoints,
-  datapointMetadataMap,
-  truncationMode,
-  idFactory = () => crypto.randomUUID()
+  datapointMetadataMap
 }) => {
   const metadata = (0, import_safe_get.safeGet)(seriesToMetadata, series);
   const enrichedDatapoint = {
@@ -41,10 +38,6 @@ const buildClosestPointTooltipHeaderProps = ({
   };
   const { name = "", color = { Default: "blue" } } = metadata;
   const shape = "shape" in metadata ? metadata.shape : void 0;
-  const content = {
-    id: idFactory(),
-    name
-  };
   let actions = void 0;
   if ((0, import_type_guards.isAreaTooltipContext)(enrichedDatapoint)) {
     const { actions: seriesActions } = enrichedDatapoint.metadata;
@@ -69,8 +62,6 @@ const buildClosestPointTooltipHeaderProps = ({
     color: color.Default,
     name,
     actions,
-    defaultActions: (0, import_useDefaultAction.getDefaultAction)(content),
-    truncationMode,
     shape
   };
 };

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

@@ -53,6 +53,9 @@ function getHoveredPointTooltipBodyContent(intl, v0, v1, formatter, toPercentage
     )}`;
     const formattedEnd = args.v1 === void 0 ? formattedStart : `${format(args.v1)}${percentageSuffix(args.v1)}`;
     text = args.v1 === void 0 ? formattedStart : `${formattedStart} ${separator} ${formattedEnd}`;
+    if (args.v1 !== void 0) {
+      duration = format(Math.abs(args.v1 - args.v0));
+    }
     return { duration, text };
   }
   if ((0, import_type_guards.isTimeTooltip)(args) && formatter) {

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

@@ -1,8 +1,8 @@
+import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';
 import type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';
 import type { BarSeriesWithDatapoints, RectDatapointInternal, MapDatapoints } from '../../../types/xy-chart-internals.js';
 import type { BarDatapoint } from '../../../types/xy-chart.js';
 import { type HoveredDatapoint, type HoveredSeries, type HoveredSeriesToMetadata } from '../../../utils/type-guards.js';
-import type { XYChartTooltipHeaderProps } from '../XYChartTooltipHeader/XYChartTooltipHeader.js';
 export interface BuildHoveredPointTooltipHeaderPropsArgs<T extends HoveredSeries, K extends HoveredDatapoint<T>> {
     datapoint: K;
     series: T;
@@ -10,7 +10,10 @@ export interface BuildHoveredPointTooltipHeaderPropsArgs<T extends HoveredSeries
     seriesWithDatapoints: BarSeriesWithDatapoints[];
     datapointMetadataMap: MapDatapoints;
     colorScaleMap: SeriesIdToColorScale;
-    truncationMode?: XYChartTooltipHeaderProps['truncationMode'];
-    idFactory?: () => string;
 }
-export declare const buildHoveredPointTooltipHeaderProps: <T extends HoveredSeries, K extends T extends BarSeriesWithDatapoints ? BarDatapoint : RectDatapointInternal>({ datapoint, series, seriesToMetadata, seriesWithDatapoints, datapointMetadataMap, colorScaleMap, truncationMode, idFactory, }: BuildHoveredPointTooltipHeaderPropsArgs<T, K>) => XYChartTooltipHeaderProps;
+export declare const buildHoveredPointTooltipHeaderProps: <T extends HoveredSeries, K extends T extends BarSeriesWithDatapoints ? BarDatapoint : RectDatapointInternal>({ datapoint, series, seriesToMetadata, seriesWithDatapoints, datapointMetadataMap, colorScaleMap, }: BuildHoveredPointTooltipHeaderPropsArgs<T, K>) => {
+    color: string;
+    name: string;
+    value: string;
+    actions: (() => SeriesActionsTemplate) | undefined;
+};

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

@@ -20,7 +20,6 @@ __export(hoveredPointTooltipHeaderUtils_exports, {
   buildHoveredPointTooltipHeaderProps: () => buildHoveredPointTooltipHeaderProps
 });
 module.exports = __toCommonJS(hoveredPointTooltipHeaderUtils_exports);
-var import_useDefaultAction = require("../../../../core/components/series-action/hooks/useDefaultAction.js");
 var import_get_formatter = require("../../../../core/utils/get-formatter.js");
 var import_safe_get = require("../../../../core/utils/safe-get.js");
 var import_build_series_action_item = require("../../../utils/build-series-action-item.js");
@@ -32,11 +31,9 @@ const buildHoveredPointTooltipHeaderProps = ({
   seriesToMetadata,
   seriesWithDatapoints,
   datapointMetadataMap,
-  colorScaleMap,
-  truncationMode,
-  idFactory = () => crypto.randomUUID()
+  colorScaleMap
 }) => {
-  let content;
+  let name = "";
   let valueToDisplay = "";
   let colorToDisplay = "";
   let actions;
@@ -51,11 +48,7 @@ const buildHoveredPointTooltipHeaderProps = ({
     const datapointMetadata = (0, import_safe_get.safeGet)(datapointMetadataMap, datapoint);
     const rawValue = enrichedDatapoint.datapoint.value;
     const { valueAccessorLabel, valueAccessor, valueFormatter, valueUnit } = enrichedDatapoint.metadata;
-    const tooltipName = valueAccessorLabel ?? valueAccessor ?? "";
-    content = {
-      id: idFactory(),
-      name: tooltipName
-    };
+    name = valueAccessorLabel ?? valueAccessor ?? "";
     valueToDisplay = typeof rawValue === "number" ? (0, import_get_formatter.getFormatter)(valueFormatter)(rawValue, valueUnit) : rawValue?.toString() ?? "";
     colorToDisplay = rawValue !== void 0 ? (0, import_get_color_from_scale_and_data.getColorFromScaleAndData)(
       colorScale,
@@ -65,11 +58,8 @@ const buildHoveredPointTooltipHeaderProps = ({
     const metadataActions = enrichedDatapoint.metadata.actions;
     actions = metadataActions ? () => metadataActions(enrichedDatapoint.datapoint) : void 0;
   } else if ((0, import_type_guards.isBarTooltipContext)(enrichedDatapoint)) {
-    const { color, name } = metadata;
-    content = {
-      id: idFactory(),
-      name: name ?? ""
-    };
+    const { color, name: barName } = metadata;
+    name = barName ?? "";
     colorToDisplay = color?.Default ?? "";
     const metadataActions = enrichedDatapoint.metadata.actions;
     actions = metadataActions ? () => {
@@ -82,18 +72,11 @@ const buildHoveredPointTooltipHeaderProps = ({
       });
       return metadataActions(actionItem);
     } : void 0;
-  } else {
-    content = {
-      id: idFactory(),
-      name: ""
-    };
   }
   return {
     color: colorToDisplay,
-    name: content.name,
+    name,
     value: valueToDisplay,
-    actions,
-    defaultActions: (0, import_useDefaultAction.getDefaultAction)(content),
-    truncationMode
+    actions
   };
 };