@dynatrace/strato-components 3.7.1 → 3.8.0

package/charts/xy-chart/components/axes/XYChartLeftAxisArea.js

@@ -34,13 +34,17 @@ var import_useVisibleAxesConfig = require("../../hooks/useVisibleAxesConfig.js")
 var import_useVisibleAxesScales = require("../../hooks/useVisibleAxesScales.js");
 var import_guards = require("../../types/guards.js");
 var import_grid_templates = require("../../utils/grid-templates.js");
-const tickLabelProps = (0, import_get_tick_label_props.getTickLabelPropsForValueAxis)("left");
 function XYChartLeftAxisArea() {
   const { leftTicks } = (0, import_useAxesTicks.useAxesTicks)();
   const { left: leftConfig } = (0, import_useVisibleAxesConfig.useVisibleAxesConfig)();
   const { left: leftScale } = (0, import_useVisibleAxesScales.useVisibleAxesScales)();
   const tickFormat = (_, index) => leftTicks.formattedTicks[index];
   const isCategoricalAxis = leftConfig?.type ? (0, import_guards.isCategorical)(leftConfig.type) : false;
+  const tickLabelProps = (0, import_get_tick_label_props.getYAxisTickLabelProps)(
+    "left",
+    isCategoricalAxis,
+    leftScale
+  );
   const areCategoricalTicksNotFittable = leftScale && isCategoricalAxis && !(0, import_is_tick_label_visible.isTickLabelSpaceAvailable)(leftScale.step());
   const hideAxis = leftConfig === void 0 || areCategoricalTicksNotFittable || leftScale === void 0;
   const tickNameHasEmoji = leftTicks.ticks.some(

package/charts/xy-chart/components/axes/XYChartRightAxisArea.js

@@ -34,13 +34,17 @@ var import_useVisibleAxesConfig = require("../../hooks/useVisibleAxesConfig.js")
 var import_useVisibleAxesScales = require("../../hooks/useVisibleAxesScales.js");
 var import_guards = require("../../types/guards.js");
 var import_grid_templates = require("../../utils/grid-templates.js");
-const tickLabelProps = (0, import_get_tick_label_props.getTickLabelPropsForValueAxis)("right");
 function XYChartRightAxisArea() {
   const { rightTicks } = (0, import_useAxesTicks.useAxesTicks)();
   const { right: rightConfig } = (0, import_useVisibleAxesConfig.useVisibleAxesConfig)();
   const { right: rightScale } = (0, import_useVisibleAxesScales.useVisibleAxesScales)();
   const tickFormat = (_, index) => rightTicks.formattedTicks[index];
   const isCategoricalAxis = (0, import_guards.isCategorical)(rightConfig?.type || "");
+  const tickLabelProps = (0, import_get_tick_label_props.getYAxisTickLabelProps)(
+    "right",
+    isCategoricalAxis,
+    rightScale
+  );
   const areCategoricalTicksNotFittable = rightScale && isCategoricalAxis && !(0, import_is_tick_label_visible.isTickLabelSpaceAvailable)(rightScale.step());
   const hideAxis = rightConfig === void 0 || areCategoricalTicksNotFittable || rightScale === void 0;
   const tickNameHasEmoji = rightTicks.ticks.some(

package/charts/xy-chart/components/axes/YTickWithTruncation.d.ts

@@ -1,4 +1,4 @@
-import type { TickRendererProps } from '@visx/axis';
+import type { TickRendererProps } from '../../../core/components/axes/types.js';
 interface YTickWithTruncationProps {
     position: 'left' | 'right';
     renderProps: TickRendererProps;

package/charts/xy-chart/components/axes/hooks/useXTickOffset.d.ts

@@ -1,5 +1,5 @@
-import type { TickRendererProps } from '@visx/axis';
 import type { CSSProperties } from 'react';
+import type { TickRendererProps } from '../../../../core/components/axes/types.js';
 export declare function useXTickOffset(textWidth: number, textHeight: number, renderProps: TickRendererProps, centerTick: boolean, isTickRotated: boolean, position: 'top' | 'bottom', tickNameHasEmoji: boolean): {
     xOffset: number;
     yOffset: number;

package/charts/xy-chart/components/axes/hooks/useYTickOffset.d.ts

@@ -1,5 +1,5 @@
-import type { TickRendererProps } from '@visx/axis';
 import type { CSSProperties } from 'react';
+import type { TickRendererProps } from '../../../../core/components/axes/types.js';
 export declare function useYTickOffset(position: string, textWidth: number, renderProps: TickRendererProps, centerTick: boolean, tickNameHasEmoji: boolean): {
     xOffset: number;
     yOffset: number;

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css

@@ -1,10 +1,10 @@
-._b76tm80-3-7-1 {
+._b76tm80-3-8-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._b76tm81-3-7-1 {
+._b76tm81-3-8-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -12,7 +12,7 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   line-height: 1;
 }
-._b76tm82-3-7-1 {
+._b76tm82-3-8-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

package/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.sty.js

@@ -23,6 +23,6 @@ __export(BarLabelOverlay_css_exports, {
 });
 module.exports = __toCommonJS(BarLabelOverlay_css_exports);
 var import_BarLabelOverlay_css_ts_vanilla = require("./BarLabelOverlay.css");
-var labelClipWrapper = "_b76tm82-3-7-1";
-var labelSpan = "_b76tm81-3-7-1";
-var overlayContainer = "_b76tm80-3-7-1";
+var labelClipWrapper = "_b76tm82-3-8-0";
+var labelSpan = "_b76tm81-3-8-0";
+var overlayContainer = "_b76tm80-3-8-0";

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

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

package/charts/xy-chart/components/overlay/explore/HighlightedPointCanvas.d.ts

@@ -1,6 +1,7 @@
 import { DataPoint } from '../../../../core/types/data-point.js';
 interface HighlightedDatapointCanvasProps {
-    points: DataPoint[];
+    selectionPoints: DataPoint[];
+    hoverGroups: DataPoint[][];
 }
-export declare const HighlightedPointCanvas: ({ points, }: HighlightedDatapointCanvasProps) => null;
+export declare const HighlightedPointCanvas: ({ selectionPoints, hoverGroups, }: HighlightedDatapointCanvasProps) => null;
 export {};

package/charts/xy-chart/components/overlay/explore/HighlightedPointCanvas.js

@@ -27,18 +27,40 @@ var import_data_point = require("../../../../core/components/data-point/utils/da
 var import_constants2 = require("../../../../core/constants.js");
 var import_draw_shape = require("../utils/draw-shape.js");
 const HighlightedPointCanvas = ({
-  points
+  selectionPoints,
+  hoverGroups
 }) => {
   const draw = (0, import_react.useCallback)(
     (ctx) => {
-      const strokeColor = (0, import_data_point.getStrokeColor)(points);
-      for (const point of points) {
-        (0, import_draw_shape.drawShapeStroke)(ctx, point, import_constants.DATA_POINT_OUTER_RADIUS, strokeColor);
+      for (const group of hoverGroups) {
+        if (group.length >= 2) {
+          (0, import_draw_shape.drawPill)(ctx, group, (0, import_data_point.getStrokeColor)(group));
+          for (const point of group) {
+            (0, import_draw_shape.drawShapeFill)(ctx, point, import_constants2.DEFAULT_DATA_POINT_RADIUS);
+          }
+        } else {
+          (0, import_draw_shape.drawShapeStroke)(
+            ctx,
+            group[0],
+            import_constants.DATA_POINT_OUTER_RADIUS,
+            (0, import_data_point.getStrokeColor)(group)
+          );
+          (0, import_draw_shape.drawShapeFill)(ctx, group[0], import_constants2.DEFAULT_DATA_POINT_RADIUS);
+        }
+      }
+      const selectionStrokeColor = (0, import_data_point.getStrokeColor)(selectionPoints);
+      for (const point of selectionPoints) {
+        (0, import_draw_shape.drawShapeStroke)(
+          ctx,
+          point,
+          import_constants.DATA_POINT_OUTER_RADIUS,
+          selectionStrokeColor
+        );
         (0, import_draw_shape.drawShapeFill)(ctx, point, import_constants2.DEFAULT_DATA_POINT_RADIUS);
       }
       return false;
     },
-    [points]
+    [selectionPoints, hoverGroups]
   );
   (0, import_useCanvas.useCanvas)("Highlighted-DataPoints", draw);
   return null;

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

@@ -1,4 +1,4 @@
-._1bbe5uo0-3-7-1 {
+._1bbe5uo0-3-8-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-7-1";
+var crosshair = "_1bbe5uo0-3-8-0";

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

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

package/charts/xy-chart/components/overlay/explore/XYChartLinearPoint.js

@@ -28,17 +28,20 @@ var import_Canvas = require("../../../../core/components/canvas/Canvas.js");
 var import_CanvasContext = require("../../../../core/components/canvas/CanvasContext.js");
 var import_useGridPlotSize = require("../../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_constants = require("../../../../core/components/data-point/constants.js");
+var import_group_by_threshold = require("../../../../core/utils/group-by-threshold.js");
 var import_useAreaData = require("../../../hooks/useAreaData.js");
 var import_useDotData = require("../../../hooks/useDotData.js");
 var import_useLineData = require("../../../hooks/useLineData.js");
 var import_useXYChartData = require("../../../hooks/useXYChartData.js");
 var import_useXYChartLinearSelection = require("../../../hooks/useXYChartLinearSelection.js");
 var import_useXYChartScales = require("../../../hooks/useXYChartScales.js");
+var import_useXYChartTooltip = require("../../../hooks/useXYChartTooltip.js");
 var import_selectors = require("../../../store/selectors.js");
 var import_useTooltipMetadata = require("../hooks/useTooltipMetadata.js");
 var import_get_selected_datapoints = require("../utils/get-selected-datapoints.js");
 const XYChartLinearPoint = (0, import_react.memo)(() => {
   const allLinearDatapoints = (0, import_useTooltipMetadata.useTooltipMetadata)("linear");
+  const { variant } = (0, import_useXYChartTooltip.useXYChartTooltip)();
   const selectState = (0, import_selectors.useSelectState)();
   const { width, height } = (0, import_useGridPlotSize.useGridPlotSize)();
   const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
@@ -88,11 +91,8 @@ const XYChartLinearPoint = (0, import_react.memo)(() => {
       datapointMetadataMap
     })
   );
-  const highlightedPoints = [
-    ...selectionPoints,
-    ...contentPoints
-  ];
-  if (!highlightedPoints.length) {
+  const hoverGroups = variant === "shared" ? (0, import_group_by_threshold.getGroupedDataPointsByCoordinate)(contentPoints, "y") : contentPoints.map((point) => [point]);
+  if (selectionPoints.length === 0 && hoverGroups.length === 0) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_XYChartExplore_css.datapointIndicatorShiftedLayout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -106,7 +106,13 @@ const XYChartLinearPoint = (0, import_react.memo)(() => {
         {
           width: width + 2 * import_constants.POINT_OVERLAY_PADDING,
           height: height + 2 * import_constants.POINT_OVERLAY_PADDING,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HighlightedPointCanvas.HighlightedPointCanvas, { points: highlightedPoints })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_HighlightedPointCanvas.HighlightedPointCanvas,
+            {
+              selectionPoints,
+              hoverGroups
+            }
+          )
         }
       )
     }

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

@@ -31,6 +31,7 @@ var import_useSynchronizedCrosshair = require("../../../../core/components/share
 var import_useSynchronizedSelection = require("../../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_zoom = require("../../../../core/types/zoom.js");
 var import_get_percentage_from_pixel = require("../../../../core/utils/get-percentage-from-pixel.js");
+var import_is_touchable_device = require("../../../../core/utils/is-touchable-device.js");
 var import_useAreaData = require("../../../hooks/useAreaData.js");
 var import_useBarData = require("../../../hooks/useBarData.js");
 var import_useDotData = require("../../../hooks/useDotData.js");
@@ -98,6 +99,9 @@ const useOverlayEvents = () => {
   const handleHover = ({
     position
   }) => {
+    if ((0, import_is_touchable_device.isTouchableDevice)()) {
+      return;
+    }
     if (syncedXScale) {
       const hoveredDate = syncedXScale.invert(position.relative.x);
       disableSynchronizedCrosshair?.(false);

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

@@ -1,5 +1,6 @@
 import { PointShapeType } from '../../../../core/components/shape/type.js';
 import { DataPoint } from '../../../../core/types/data-point.js';
+export declare const drawPill: (ctx: CanvasRenderingContext2D, points: DataPoint[], strokeColor: string) => void;
 export declare const drawShapeFill: (ctx: CanvasRenderingContext2D, point: DataPoint & {
     shape?: PointShapeType;
 }, radius: number) => void;

package/charts/xy-chart/components/overlay/utils/draw-shape.js

@@ -27,13 +27,32 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var draw_shape_exports = {};
 __export(draw_shape_exports, {
+  drawPill: () => drawPill,
   drawShapeFill: () => drawShapeFill,
   drawShapeStroke: () => drawShapeStroke
 });
 module.exports = __toCommonJS(draw_shape_exports);
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_canvas_color = require("../../../../core/components/canvas/utils/canvas-color.js");
+var import_drawRoundRect = require("../../../../core/components/canvas/utils/drawRoundRect.js");
+var import_data_point = require("../../../../core/components/data-point/utils/data-point.js");
+var import_constants = require("../../../../core/constants.js");
 const TRIANGLE_RADIUS_ADJUSTMENT = 1;
+const PILL_BORDER_RADIUS = 7;
+const PILL_BORDER_WIDTH = 1;
+const drawPill = (ctx, points, strokeColor) => {
+  const { x, y, width, height } = (0, import_data_point.getOuterCircleSize)(points, "y");
+  ctx.beginPath();
+  (0, import_drawRoundRect.drawRoundRect)(ctx, x, y, width, height, PILL_BORDER_RADIUS);
+  ctx.globalAlpha = import_constants.DEFAULT_HIGHLIGHTED_OPACITY;
+  ctx.fillStyle = (0, import_canvas_color.getCanvasColor)(import_colors.default.Background.Base.Default);
+  ctx.fill();
+  ctx.globalAlpha = 1;
+  ctx.lineWidth = PILL_BORDER_WIDTH;
+  ctx.strokeStyle = (0, import_canvas_color.getCanvasColor)(strokeColor);
+  ctx.stroke();
+  ctx.closePath();
+};
 const drawShapeFill = (ctx, point, radius) => {
   drawShape(ctx, point, radius, true, false);
 };

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

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

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

@@ -21,10 +21,10 @@ __export(getHoveredPointTooltipBodyContent_exports, {
 });
 module.exports = __toCommonJS(getHoveredPointTooltipBodyContent_exports);
 var import_resolution_formatter = require("../../../../../core/components/tooltip/utils/resolution-formatter.js");
-var import_messages = require("../../../../messages/messages.js");
 var import_type_guards = require("../../../../utils/type-guards.js");
+var import_get_cached_separator = require("../../utils/get-cached-separator.js");
 function getHoveredPointTooltipBodyContent(intl, v0, v1, formatter, toPercentage) {
-  const separator = intl.formatMessage(import_messages.XYCHART_MESSAGES.separatorDash);
+  const separator = (0, import_get_cached_separator.getCachedSeparator)(intl);
   let duration;
   let text = "";
   const primaryValue = v0 ?? v1;

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

@@ -21,16 +21,32 @@ __export(SharedXYChartTooltip_exports, {
 });
 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_safe_get = require("../../../../core/utils/safe-get.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 LazySharedTooltipRow({
+  raw,
+  ctx
+}) {
+  const row = (0, import_sharedXYChartTooltipUtils.buildSharedTooltipRow)(raw.result, ctx);
+  const value = row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_OverlayTooltip.OverlayTooltip.SeriesItem,
+    {
+      name: row.name,
+      value,
+      color: row.color,
+      actions: row.actions
+    }
+  );
+}
 function SharedXYChartTooltip({
   preferred,
   datapoints
@@ -56,25 +72,10 @@ function SharedXYChartTooltip({
     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
-      };
-    });
-  }
+  const rows = datapoints.map((result) => ({
+    name: (0, import_safe_get.safeGet)(seriesToMetadata, result.series).name,
+    result
+  }));
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_OverlayTooltip.OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_OverlayTooltip.OverlayTooltip.Header,
@@ -87,10 +88,10 @@ function SharedXYChartTooltip({
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_OverlayTooltip.OverlayTooltip.Series,
       {
-        data: seriesItemsRef.current,
+        data: rows,
         variant: "shared",
         activeItem: -1,
-        seriesItemTemplate: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip.SeriesItem, { ...item })
+        seriesItemTemplate: (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LazySharedTooltipRow, { raw: item, ctx })
       }
     )
   ] });

package/charts/xy-chart/components/tooltip/utils/get-cached-separator.d.ts

@@ -0,0 +1,12 @@
+import type { IntlShape } from 'react-intl';
+/**
+ * Resolves the static `separatorDash` message via `intl.formatMessage`
+ * the first time it is requested for a given `intl` instance, and
+ * returns the cached string on every subsequent call.
+ *
+ * In shared-tooltip mode this helper is hit O(rows) times per
+ * mouse-move render; the underlying `formatMessage` call walks
+ * formatjs's `deepMergeFormatsAndSetTimeZone` path, which dominated
+ * the recorded profile when invoked uncached.
+ */
+export declare function getCachedSeparator(intl: IntlShape): string;

package/charts/xy-chart/components/tooltip/utils/get-cached-separator.js

@@ -0,0 +1,33 @@
+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_cached_separator_exports = {};
+__export(get_cached_separator_exports, {
+  getCachedSeparator: () => getCachedSeparator
+});
+module.exports = __toCommonJS(get_cached_separator_exports);
+var import_messages = require("../../../messages/messages.js");
+const separatorCache = /* @__PURE__ */ new WeakMap();
+function getCachedSeparator(intl) {
+  const cached = separatorCache.get(intl);
+  if (cached !== void 0) {
+    return cached;
+  }
+  const resolved = intl.formatMessage(import_messages.XYCHART_MESSAGES.separatorDash);
+  separatorCache.set(intl, resolved);
+  return resolved;
+}

package/charts/xy-chart/components/tooltip/utils/get-tooltip-formatter.js

@@ -21,11 +21,11 @@ __export(get_tooltip_formatter_exports, {
 });
 module.exports = __toCommonJS(get_tooltip_formatter_exports);
 var import_units = require("@dynatrace-sdk/units");
+var import_get_cached_separator = require("./get-cached-separator.js");
 var import_safe_get = require("../../../../core/utils/safe-get.js");
 var import_messages = require("../../../messages/messages.js");
 var import_xy_chart = require("../../../types/xy-chart.js");
 function getTooltipFormatter(axisConfig, axisIdToFormatter, intl) {
-  const separator = intl.formatMessage(import_messages.XYCHART_MESSAGES.separatorDash);
   const getFormatter = () => (0, import_safe_get.safeGet)(axisIdToFormatter, axisConfig.id);
   const formatTimeValue = (from, to) => {
     if (to) {
@@ -47,7 +47,9 @@ function getTooltipFormatter(axisConfig, axisIdToFormatter, intl) {
     return (from, to) => {
       const formatter = getFormatter();
       if (to) {
-        return `${formatter(from)} ${separator} ${formatter(to)}`;
+        return `${formatter(from)} ${(0, import_get_cached_separator.getCachedSeparator)(intl)} ${formatter(
+          to
+        )}`;
       }
       return formatter(from);
     };

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-7-1 {
+._1u58xor0-3-8-0 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-7-1 {
+._1u58xor1-3-8-0 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-7-1::after {
+._1u58xor1-3-8-0::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-7-1 {
+._1u58xor2-3-8-0 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-7-1 {
+._1u58xor3-3-8-0 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -24,7 +24,7 @@ __export(tooltip_styles_css_exports, {
 });
 module.exports = __toCommonJS(tooltip_styles_css_exports);
 var import_tooltip_styles_css_ts_vanilla = require("./tooltip-styles.css");
-var axisName = "_1u58xor1-3-7-1";
-var axisValue = "_1u58xor2-3-7-1";
-var duration = "_1u58xor3-3-7-1";
-var wrapper = "_1u58xor0-3-7-1";
+var axisName = "_1u58xor1-3-8-0";
+var axisValue = "_1u58xor2-3-8-0";
+var duration = "_1u58xor3-3-8-0";
+var wrapper = "_1u58xor0-3-8-0";

package/charts/xy-chart/constants/defaults.d.ts

@@ -24,4 +24,5 @@ export declare const BAR_STROKE_WIDTH = 5;
 export declare const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 export declare const XY_CHART_TOP_AXIS_LABEL = "Top axis";
 export declare const DISPLAY_NAME = "XYChart";
+export declare const MIN_LABELED_BAR_SIZE = 25;
 export {};

package/charts/xy-chart/constants/defaults.js

@@ -28,6 +28,7 @@ __export(defaults_exports, {
   DEFAULT_POINTS_DISPLAY: () => DEFAULT_POINTS_DISPLAY,
   DISPLAY_NAME: () => DISPLAY_NAME,
   DISPLAY_UNITS_LIMIT: () => DISPLAY_UNITS_LIMIT,
+  MIN_LABELED_BAR_SIZE: () => MIN_LABELED_BAR_SIZE,
   RECT_STROKE_WIDTH: () => RECT_STROKE_WIDTH,
   XY_CHART_ARIA_LABEL: () => XY_CHART_ARIA_LABEL,
   XY_CHART_BOTTOM_AXIS_LABEL: () => XY_CHART_BOTTOM_AXIS_LABEL,
@@ -97,3 +98,4 @@ const BAR_STROKE_WIDTH = 5;
 const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 const XY_CHART_TOP_AXIS_LABEL = "Top axis";
 const DISPLAY_NAME = "XYChart";
+const MIN_LABELED_BAR_SIZE = 25;

package/charts/xy-chart/context/XYChartOverlayPerformance.context.d.ts

@@ -6,6 +6,23 @@ import { DOT_VARIANT, LINE_VARIANT } from '../types/xy-chart-internals.js';
 import type { AreaDatapoint, BarDatapoint, DotDatapoint, LineDatapoint } from '../types/xy-chart.js';
 export type SeriesQuadtreeDatapoint = DotDatapoint | LineDatapoint | AreaDatapoint;
 export type SeriesToQuadtree = Map<SeriesId, Quadtree<SeriesQuadtreeDatapoint>>;
+export type HoverGridDatapoint = RectDatapointInternal | BarDatapoint;
+export interface HoverGridEntry<D extends HoverGridDatapoint> {
+    datapoint: D;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface HoverGrid<D extends HoverGridDatapoint> {
+    cells: HoverGridEntry<D>[][];
+    cellSize: number;
+    originX: number;
+    originY: number;
+    cols: number;
+    rows: number;
+}
+export type SeriesToHoverGrid = Map<SeriesId, HoverGrid<HoverGridDatapoint>>;
 export type DotSeriesQueryResult = {
     type: typeof DOT_VARIANT;
     distance: number;

package/charts/xy-chart/hooks/useBuildHoverGrid.d.ts

@@ -0,0 +1,12 @@
+import type { SeriesToHoverGrid } from '../context/XYChartOverlayPerformance.context.js';
+/**
+ * Build per-series hover grids for rect and bar series on a debounced
+ * schedule (via `useBuildStrategy`). Returns `undefined` while the
+ * grid is being (re)built; callers should fall back to the linear
+ * `buildQueryHovered` / `buildQueryAllHovered` path in that window.
+ *
+ * Both tooltip variants (single and shared) consume this grid via
+ * `buildQueryHoveredFromGrid` and `buildQueryAllHoveredFromGrid`
+ * respectively.
+ */
+export declare function useBuildHoverGrid(): SeriesToHoverGrid | undefined;