@dynatrace/strato-components 3.5.2 → 3.7.0

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

@@ -0,0 +1,172 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var BarLabelOverlay_exports = {};
+__export(BarLabelOverlay_exports, {
+  BarLabelOverlay: () => BarLabelOverlay
+});
+module.exports = __toCommonJS(BarLabelOverlay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
+var import_BarDisplay = require("./BarDisplay.js");
+var import_BarLabelOverlay_css = require("./BarLabelOverlay.sty.js");
+var import_HorizontalBarLabel = require("./HorizontalBarLabel.js");
+var import_VerticalBarLabel = require("./VerticalBarLabel.js");
+var import_canvas_color = require("../../../../core/components/canvas/utils/canvas-color.js");
+var import_useGridPlotSize = require("../../../../core/components/chart-grid/hooks/useGridPlotSize.js");
+var import_color_contrast = require("../../../../core/utils/color-contrast.js");
+var import_safe_get = require("../../../../core/utils/safe-get.js");
+var import_useBarData = require("../../../hooks/useBarData.js");
+var import_useXYChartData = require("../../../hooks/useXYChartData.js");
+var import_useXYChartTruncationMode = require("../../../hooks/useXYChartTruncationMode.js");
+var import_axis = require("../../../types/axis.js");
+var import_get_scale = require("../../../utils/get-scale.js");
+var import_value_representation = require("../../../utils/value-representation.js");
+var import_bar_accessors = require("../bar-accessors.js");
+function filterToScaleDomain(data, scale, isVertical) {
+  const domainFn = scale?.domain;
+  if (typeof domainFn !== "function") {
+    return data;
+  }
+  const domain = domainFn.call(scale);
+  if (!Array.isArray(domain)) {
+    return data;
+  }
+  const allowed = new Set(domain);
+  return data.filter((d) => {
+    const key = isVertical ? d.x0 : d.y0;
+    return typeof key === "string" ? allowed.has(key) : true;
+  });
+}
+function BarLabelOverlay({
+  axisIdToScales,
+  series,
+  metadata,
+  opacity
+}) {
+  const { width: canvasWidth, height: canvasHeight } = (0, import_useGridPlotSize.useGridPlotSize)();
+  const { datapointMetadataMap, axisIdToScaleDomain } = (0, import_useXYChartData.useXYChartData)();
+  const { seriesToMetadata } = (0, import_useBarData.useBarData)();
+  const { truncationMode } = (0, import_useXYChartTruncationMode.useXYChartTruncationMode)();
+  if (!series.hasLabels) {
+    return null;
+  }
+  const xScale = (0, import_get_scale.getCurrentScale)(
+    axisIdToScales,
+    series.xAxisId,
+    (0, import_BarDisplay.isXBaselineAccessor)(series.data[0]) ? series.type : void 0
+  );
+  const dimensionXScale = (0, import_get_scale.getDimensionScale)(axisIdToScales, series.xAxisId);
+  const yScale = (0, import_get_scale.getCurrentScale)(
+    axisIdToScales,
+    series.yAxisId,
+    (0, import_BarDisplay.isYBaselineAccessor)(series.data[0]) ? series.type : void 0
+  );
+  const dimensionYScale = (0, import_get_scale.getDimensionScale)(axisIdToScales, series.yAxisId);
+  const { xAxis, yAxis } = (0, import_safe_get.safeGet)(seriesToMetadata, series);
+  const isVertical = xAxis.type === import_axis.XYAxisTypeCategorical;
+  const isRTL = !isVertical && Boolean(xAxis.reversed);
+  const isTTB = isVertical && Boolean(yAxis.reversed);
+  const xFn = (0, import_bar_accessors.xAccessor)(
+    xScale,
+    datapointMetadataMap,
+    dimensionXScale,
+    series.id,
+    (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain)
+  );
+  const yFn = (0, import_bar_accessors.yAccessor)(
+    yScale,
+    datapointMetadataMap,
+    dimensionYScale,
+    series.id,
+    (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain)
+  );
+  const wFn = (0, import_bar_accessors.widthAccessor)(
+    xScale,
+    datapointMetadataMap,
+    dimensionXScale,
+    (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain)
+  );
+  const hFn = (0, import_bar_accessors.heightAccessor)(
+    yScale,
+    datapointMetadataMap,
+    dimensionYScale,
+    (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain)
+  );
+  const fillHex = (0, import_canvas_color.getCanvasColor)(metadata.color.Default);
+  const insideColor = (0, import_color_contrast.getColorByContrast)(fillHex);
+  const outsideColor = import_colors.default.Text.Neutral.Default;
+  const data = filterToScaleDomain(
+    series.data,
+    isVertical ? xScale : yScale,
+    isVertical
+  );
+  const dimStyle = opacity !== void 0 ? { opacity } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_BarLabelOverlay_css.overlayContainer, style: dimStyle, children: data.map((datum, index) => {
+    const text = datum.label;
+    if (!text) {
+      return null;
+    }
+    const x = xFn(datum);
+    const y = yFn(datum);
+    const w = wFn(datum);
+    const h = hFn(datum);
+    const barWidth = Math.abs(w);
+    const barHeight = Math.abs(h);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isVertical ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_VerticalBarLabel.VerticalBarLabel,
+      {
+        x,
+        y,
+        barWidth,
+        barHeight,
+        canvasHeight,
+        isReversed: isTTB,
+        text,
+        insideColor,
+        outsideColor,
+        truncationMode
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_HorizontalBarLabel.HorizontalBarLabel,
+      {
+        x,
+        y,
+        barWidth,
+        barHeight,
+        canvasWidth,
+        isReversed: isRTL,
+        text,
+        insideColor,
+        outsideColor,
+        truncationMode
+      }
+    ) }, index);
+  }) });
+}
+BarLabelOverlay["displayName"] = "BarLabelOverlay";

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

@@ -0,0 +1,3 @@
+export declare const overlayContainer: string;
+export declare const labelSpan: string;
+export declare const labelClipWrapper: string;

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

@@ -0,0 +1,28 @@
+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 BarLabelOverlay_css_exports = {};
+__export(BarLabelOverlay_css_exports, {
+  labelClipWrapper: () => labelClipWrapper,
+  labelSpan: () => labelSpan,
+  overlayContainer: () => overlayContainer
+});
+module.exports = __toCommonJS(BarLabelOverlay_css_exports);
+var import_BarLabelOverlay_css_ts_vanilla = require("./BarLabelOverlay.css");
+var labelClipWrapper = "_b76tm82-3-7-0";
+var labelSpan = "_b76tm81-3-7-0";
+var overlayContainer = "_b76tm80-3-7-0";

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

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';
+interface HorizontalBarLabelProps {
+    x: number;
+    y: number;
+    barWidth: number;
+    barHeight: number;
+    canvasWidth: number;
+    isReversed: boolean;
+    text: string;
+    insideColor: string;
+    outsideColor: string;
+    truncationMode: TruncationMode;
+}
+/**
+ * HTML "split-clip" label for a single horizontal bar.
+ *
+ * The label renders twice: an outer copy (`outsideColor`) spans from the bar's
+ * leading edge to the chart's opposite edge so long labels overflow the bar
+ * up to the chart bounds; a wrapper at the bar's bounds clips an inner copy
+ * (`insideColor`) via `overflow: hidden`. Where the two overlap, the inner
+ * copy paints on top so the section *inside the bar* picks up the contrast
+ * color while the section *outside the bar* keeps the neutral text color.
+ *
+ * When `isReversed` is true (the numerical X axis has `reversed` set, i.e.
+ * RTL bars) the layout mirrors: bars grow right-to-left and the label anchors
+ * at the bar's right edge (the zero-baseline side), allowing overflow toward
+ * the left edge.
+ */
+export declare function HorizontalBarLabel({ x, y, barWidth, barHeight, canvasWidth, isReversed, text, insideColor, outsideColor, truncationMode, }: Readonly<HorizontalBarLabelProps>): ReactNode;
+export declare namespace HorizontalBarLabel {
+    var displayName: string;
+}
+export {};

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

@@ -25,6 +25,7 @@ __export(bar_accessors_exports, {
 });
 module.exports = __toCommonJS(bar_accessors_exports);
 var import_lodash_es = require("lodash");
+var import_defaults = require("../../constants/defaults.js");
 var import_type_guards = require("../../utils/type-guards.js");
 const applyNumericalBarScaleTransformations = (args, accessorCoord, baseline, relAccessor, accumulator, binDomain) => {
   const isNotBaseline = baseline !== void 0 && accessorCoord !== baseline;
@@ -54,15 +55,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) => {
@@ -136,7 +138,7 @@ const calculateBarDimension = (args) => {
     return Math.abs(zero - scale(v1));
   }
   if (!(0, import_lodash_es.isNil)(v0)) {
-    return scale(v0);
+    return import_defaults.BAR_STROKE_WIDTH;
   }
   return void 0;
 };

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

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

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

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

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

@@ -72,7 +72,7 @@ function XYChartCrosshairLines({
   (0, import_selectors.useSelector)(({ relativeX: relativeX2, relativeY: relativeY2 }) => `${relativeX2}-${relativeY2}`);
   const { relativeX, relativeY, pinned, data } = (0, import_selectors.useTooltipSnapshot)();
   const position = relativeX !== null && relativeY !== null ? { x: relativeX, y: relativeY } : void 0;
-  const tooltipContent = data.metadata || import_state.UndefinedContent;
+  const tooltipContent = data.metadata?.preferred ?? import_state.UndefinedContent;
   const { xAxis, yAxis, variant, orientation, isStacked } = seriesToMetadata.get(tooltipContent?.series) ?? {};
   const isArea = (0, import_type_guards.isAreaTooltipContent)(tooltipContent);
   const isHorizontal = orientation === "horizontal";

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

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

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

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

@@ -38,7 +38,7 @@ 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 contentState = (0, import_useTooltipMetadata.useTooltipMetadata)("linear");
+  const allLinearDatapoints = (0, import_useTooltipMetadata.useTooltipMetadata)("linear");
   const selectState = (0, import_selectors.useSelectState)();
   const { width, height } = (0, import_useGridPlotSize.useGridPlotSize)();
   const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
@@ -57,7 +57,7 @@ const XYChartLinearPoint = (0, import_react.memo)(() => {
     seriesToMetadata: areaSeriesMeta,
     filteredSeriesWithDatapoints: areaSeriesWithDatapoints
   } = (0, import_useAreaData.useAreaData)();
-  const showContentPoint = (0, import_get_selected_datapoints.hasLinearContentPoint)(contentState);
+  const showContentPoint = allLinearDatapoints.length > 0;
   const showPoint = !showContentPoint && (!selectState || linearSelection.selectionConfigByAxisId.size === 0);
   if (showPoint) {
     return null;
@@ -77,15 +77,17 @@ const XYChartLinearPoint = (0, import_react.memo)(() => {
     axes,
     datapointMetadataMap
   });
-  const contentPoints = showContentPoint ? (0, import_get_selected_datapoints.buildContentHighlightedPoint)({
-    contentState,
-    axisIdToScales,
-    dotSeriesMeta,
-    lineSeriesMeta,
-    areaSeriesMeta,
-    axisIdToScaleDomain,
-    datapointMetadataMap
-  }) : [];
+  const contentPoints = allLinearDatapoints.flatMap(
+    (contentState) => (0, import_get_selected_datapoints.buildContentHighlightedPoint)({
+      contentState,
+      axisIdToScales,
+      dotSeriesMeta,
+      lineSeriesMeta,
+      areaSeriesMeta,
+      axisIdToScaleDomain,
+      datapointMetadataMap
+    })
+  );
   const highlightedPoints = [
     ...selectionPoints,
     ...contentPoints

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

@@ -37,7 +37,7 @@ 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 XYChartRectanglePoint = (0, import_react.memo)(() => {
-  const contentState = (0, import_useTooltipMetadata.useTooltipMetadata)("rectangle");
+  const allRectangleDatapoints = (0, import_useTooltipMetadata.useTooltipMetadata)("rectangle");
   const selectState = (0, import_selectors.useSelectState)();
   const { width, height } = (0, import_useGridPlotSize.useGridPlotSize)();
   const axisIdToScales = (0, import_useXYChartScales.useXYChartScales)();
@@ -53,7 +53,7 @@ const XYChartRectanglePoint = (0, import_react.memo)(() => {
     filteredSeriesWithDatapoints: rectSeriesWithDatapoints
   } = (0, import_useRectData.useRectData)();
   const highlightedRects = (0, import_get_selected_datapoints.buildRectangleHighlightedPoints)({
-    contentState,
+    allRectangleDatapoints,
     selectState,
     rectSelection,
     width,