@dynatrace/strato-components 3.6.0 → 3.7.0

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);
@@ -44,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)();
@@ -78,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)();
@@ -93,6 +71,14 @@ const useOverlayEvents = () => {
     updateHoverState: updateSynchronizedCrosshair,
     setDisabled: disableSynchronizedCrosshair
   } = synchronizedCrosshair ?? {};
+  const getDatapoints = (position) => query({
+    position,
+    dotSeriesData,
+    lineSeriesData,
+    areaSeriesData,
+    rectSeriesData,
+    barSeriesData
+  });
   const resetTooltip = () => {
     setState(import_reducer_explorer.reduceExploreCancelHighlight);
     reset();
@@ -117,21 +103,12 @@ 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;
     hover(
       { clientX: position.absolute.x, clientY: position.absolute.y },
@@ -149,25 +126,16 @@ const useOverlayEvents = () => {
   const handleUnPin = (position) => {
     setState(import_reducer_explorer.reduceExploreUnPin);
     if (position) {
-      const hoveredDatapointQueryResult = getHoveredDatapoint(
-        position,
-        dotSeriesData,
-        lineSeriesData,
-        areaSeriesData,
-        rectSeriesData,
-        barSeriesData,
-        queryClosest,
-        queryHovered
-      );
+      const metadata = getDatapoints(position);
       unpin();
-      if (hoveredDatapointQueryResult) {
+      if (metadata.preferred) {
         hover(
           { clientX: position.absolute.x, clientY: position.absolute.y },
           {
-            geometry: hoveredDatapointQueryResult.type,
+            geometry: metadata.preferred.type,
             header1: void 0,
             series: [],
-            metadata: hoveredDatapointQueryResult
+            metadata
           }
         );
       }
@@ -179,25 +147,16 @@ 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));
+    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: hoveredDatapointQueryResult.type,
+          geometry: metadata.preferred.type,
           header1: void 0,
           series: [],
-          metadata: hoveredDatapointQueryResult
+          metadata
         }
       );
     }
@@ -212,24 +171,15 @@ const useOverlayEvents = () => {
       return;
     }
     setState(import_reducer_explorer.reduceExploreCancelAll);
-    const hoveredDatapointQueryResult = getHoveredDatapoint(
-      position,
-      dotSeriesData,
-      lineSeriesData,
-      areaSeriesData,
-      rectSeriesData,
-      barSeriesData,
-      queryClosest,
-      queryHovered
-    );
-    if (hoveredDatapointQueryResult) {
+    const metadata = getDatapoints(position);
+    if (metadata.preferred) {
       hover(
         { clientX: position.absolute.x, clientY: position.absolute.y },
         {
-          geometry: hoveredDatapointQueryResult.type,
+          geometry: metadata.preferred.type,
           header1: void 0,
           series: [],
-          metadata: hoveredDatapointQueryResult
+          metadata
         }
       );
     } else {

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

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

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

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
   };
 };

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

@@ -0,0 +1,6 @@
+import type { SeriesQueryResult } from '../../../context/XYChartOverlayPerformance.context.js';
+import type { TooltipContent } from '../../../types/state.js';
+export declare function SharedXYChartTooltip({ preferred, datapoints, }: Readonly<{
+    preferred: TooltipContent;
+    datapoints: SeriesQueryResult[];
+}>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,97 @@
+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 SharedXYChartTooltip_exports = {};
+__export(SharedXYChartTooltip_exports, {
+  SharedXYChartTooltip: () => SharedXYChartTooltip
+});
+module.exports = __toCommonJS(SharedXYChartTooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_intl = require("react-intl");
+var import_sharedXYChartTooltipUtils = require("./sharedXYChartTooltipUtils.js");
+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");
+function SharedXYChartTooltip({
+  preferred,
+  datapoints
+}) {
+  const { seriesToMetadata, axisIdToScaleDomain, datapointMetadataMap } = (0, import_useXYChartData.useXYChartData)();
+  const axisIdToFormatter = (0, import_useAxesFormatter.useAxesFormatter)();
+  const intl = (0, import_react_intl.useIntl)();
+  const colorScaleMap = (0, import_useXYChartColorScales.useXYChartColorScales)();
+  const { truncationMode } = (0, import_useXYChartTruncationMode.useXYChartTruncationMode)();
+  const formatCategory = (0, import_useFormatCategory.useFormatCategory)();
+  const { filteredSeriesWithDatapoints } = (0, import_useBarData.useBarData)();
+  const ctx = {
+    seriesToMetadata,
+    axisIdToFormatter,
+    axisIdToScaleDomain,
+    datapointMetadataMap,
+    formatCategory,
+    intl,
+    colorScaleMap,
+    allBarSeries: filteredSeriesWithDatapoints
+  };
+  const { xAxisValue, xAxisDuration, label } = (0, import_sharedXYChartTooltipUtils.buildSharedTooltipHeader)(
+    preferred,
+    ctx
+  );
+  const ctxRef = (0, import_react.useRef)(ctx);
+  ctxRef.current = ctx;
+  const prevDatapointsRef = (0, import_react.useRef)([]);
+  const seriesItemsRef = (0, import_react.useRef)([]);
+  if (datapoints.length !== prevDatapointsRef.current.length || datapoints.some((d, i) => d !== prevDatapointsRef.current[i])) {
+    prevDatapointsRef.current = datapoints;
+    seriesItemsRef.current = datapoints.map((result) => {
+      const row = (0, import_sharedXYChartTooltipUtils.buildSharedTooltipRow)(
+        result,
+        ctxRef.current
+      );
+      return {
+        name: row.name,
+        value: row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue,
+        color: row.color,
+        actions: row.actions
+      };
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_OverlayTooltip.OverlayTooltip, { truncation: truncationMode, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_OverlayTooltip.OverlayTooltip.Header,
+      {
+        header1: xAxisValue,
+        duration1: xAxisDuration,
+        label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_OverlayTooltip.OverlayTooltip.Series,
+      {
+        data: seriesItemsRef.current,
+        variant: "shared",
+        activeItem: -1,
+        seriesItemTemplate: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip.SeriesItem, { ...item })
+      }
+    )
+  ] });
+}

package/charts/xy-chart/components/tooltip/SharedXYChartTooltip/sharedXYChartTooltipUtils.d.ts

@@ -0,0 +1,32 @@
+import type { IntlShape } from 'react-intl';
+import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';
+import type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';
+import type { FormatCategory } from '../../../hooks/useFormatCategory.js';
+import type { TooltipContent } from '../../../types/state.js';
+import { type AxisIdToFormatter, type AxisIdToScaleDomain, type BarSeriesWithDatapoints, type MapDatapoints, type SeriesToMetadata } from '../../../types/xy-chart-internals.js';
+type SharedTooltipContext = {
+    seriesToMetadata: SeriesToMetadata;
+    axisIdToFormatter: AxisIdToFormatter;
+    axisIdToScaleDomain: AxisIdToScaleDomain;
+    datapointMetadataMap: MapDatapoints;
+    formatCategory: FormatCategory;
+    intl: IntlShape;
+    allBarSeries: BarSeriesWithDatapoints[];
+};
+export type SharedTooltipRow = {
+    name: string;
+    color: string;
+    yAxisValue: string;
+    yAxisDuration: string | undefined;
+    actions?: () => SeriesActionsTemplate;
+};
+export type SharedTooltipHeader = {
+    xAxisValue: string;
+    xAxisDuration: string | undefined;
+    label: string | undefined;
+};
+export declare function buildSharedTooltipHeader(preferred: TooltipContent, ctx: SharedTooltipContext): SharedTooltipHeader;
+export declare function buildSharedTooltipRow(result: TooltipContent, ctx: SharedTooltipContext & {
+    colorScaleMap: SeriesIdToColorScale;
+}): SharedTooltipRow;
+export {};