@dynatrace/strato-components 3.10.4 → 3.11.0

package/charts/xy-chart/components/displays/RectLabelOverlay.css

@@ -0,0 +1,19 @@
+._1a48u8w0-3-11-0 {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+._1a48u8w1-3-11-0 {
+  position: absolute;
+  white-space: nowrap;
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
+  font-weight: var(--dt-typography-text-small-default-weight, 400);
+  line-height: 1;
+}
+._1a48u8w2-3-11-0 {
+  position: absolute;
+  overflow: hidden;
+  pointer-events: none;
+}

package/charts/xy-chart/components/displays/RectLabelOverlay.css.d.ts

@@ -0,0 +1,4 @@
+export declare const rectOverlayContainer: string;
+export declare const rectLabelSpan: string;
+export declare const rectLabelClipWrapper: string;
+//# sourceMappingURL=RectLabelOverlay.css.d.ts.map

package/charts/xy-chart/components/displays/RectLabelOverlay.d.ts

@@ -0,0 +1,32 @@
+import type { AxisIdToScales } from '../../context/XYChartScales.context.js';
+import type { RectSeriesWithDatapoints } from '../../types/xy-chart-internals.js';
+interface RectLabelOverlayProps {
+    axisIdToScales: AxisIdToScales;
+    series: RectSeriesWithDatapoints;
+    opacity?: number;
+}
+/**
+ * Renders the HTML labels for a single rect series. Each datapoint's label is
+ * placed inside the rect and clipped to the rect's bounds — the portion that
+ * would overflow is hidden. This is the key difference from `BarLabelOverlay`,
+ * whose labels are allowed to spill outside the bar toward the chart edge.
+ *
+ * The canvas paints rects in data order, so any rect later in the data appears
+ * on top of earlier ones where they overlap. This overlay mirrors that by
+ * iterating in reverse and, for each rect, clipping the label to the leftmost
+ * horizontal segment that is not covered by an already-drawn (top-most) rect.
+ * If a rect's leading edge is itself covered, or the remaining usable segment
+ * cannot fit at least a couple of real characters, the label is dropped —
+ * this keeps flame graphs readable when siblings share depth and time range.
+ *
+ * Rendered as a sibling of the `<Canvas>` element (not inside `RectDisplay`)
+ * because HTML children of `<canvas>` are fallback content, not visible DOM.
+ * See `RectLabelLayout.tsx` for the chart-level wrapper that iterates over
+ * labeled rect series and mounts this component.
+ */
+export declare function RectLabelOverlay({ axisIdToScales, series, opacity, }: Readonly<RectLabelOverlayProps>): import("react").JSX.Element | null;
+export declare namespace RectLabelOverlay {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=RectLabelOverlay.d.ts.map

package/charts/xy-chart/components/displays/RectLabelOverlay.js

@@ -0,0 +1,121 @@
+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 RectLabelOverlay_exports = {};
+__export(RectLabelOverlay_exports, {
+  RectLabelOverlay: () => RectLabelOverlay
+});
+module.exports = __toCommonJS(RectLabelOverlay_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_rect_accessors = require("./rect-accessors.js");
+var import_rect_label_utils = require("./rect-label-utils.js");
+var import_RectLabelOverlay_css = require("./RectLabelOverlay.sty.js");
+var import_utils = require("../../../../typography/utils.js");
+var import_canvas_color = require("../../../core/components/canvas/utils/canvas-color.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");
+var import_color_contrast = require("../../../core/utils/color-contrast.js");
+var import_safe_get = require("../../../core/utils/safe-get.js");
+var import_useXYChartColorScales = require("../../hooks/useXYChartColorScales.js");
+var import_useXYChartData = require("../../hooks/useXYChartData.js");
+var import_useXYChartTruncationMode = require("../../hooks/useXYChartTruncationMode.js");
+var import_get_scale = require("../../utils/get-scale.js");
+var import_value_representation = require("../../utils/value-representation.js");
+const RECT_LABEL_MIN_SIZE = 16;
+const RECT_LABEL_PADDING = 4;
+const RECT_LABEL_MIN_REAL_CHARS = 2;
+function RectLabelOverlay({
+  axisIdToScales,
+  series,
+  opacity
+}) {
+  const { datapointMetadataMap, axisIdToScaleDomain, seriesToMetadata } = (0, import_useXYChartData.useXYChartData)();
+  const colorScalesMap = (0, import_useXYChartColorScales.useXYChartColorScales)();
+  const { truncationMode } = (0, import_useXYChartTruncationMode.useXYChartTruncationMode)();
+  if (!series.hasLabels) {
+    return null;
+  }
+  const colorScale = colorScalesMap.get(series.id);
+  if (!colorScale) {
+    return null;
+  }
+  const xScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.xAxisId);
+  const yScale = (0, import_get_scale.getCurrentScale)(axisIdToScales, series.yAxisId);
+  const { xAxis, yAxis } = (0, import_safe_get.safeGet)(seriesToMetadata, series);
+  const xRelAccessor = (0, import_value_representation.relAccessor)(xAxis, axisIdToScaleDomain);
+  const yRelAccessor = (0, import_value_representation.relAccessor)(yAxis, axisIdToScaleDomain);
+  const getX = (0, import_rect_accessors.xAccessor)(xScale, xRelAccessor);
+  const getY = (0, import_rect_accessors.yAccessor)(yScale, yRelAccessor);
+  const getW = (0, import_rect_accessors.widthAccessor)(xScale, xRelAccessor);
+  const getH = (0, import_rect_accessors.heightAccessor)(yScale, yRelAccessor);
+  const getFill = (0, import_rect_accessors.colorAccessor)(colorScale, datapointMetadataMap);
+  const containerStyle = opacity !== void 0 ? { opacity } : void 0;
+  const drawnRects = [];
+  const labels = [];
+  for (let i = series.filteredData.length - 1; i >= 0; i--) {
+    const datum = series.filteredData[i];
+    const text = datum?.label;
+    if (!datum || !text) {
+      continue;
+    }
+    const x = getX(datum);
+    const y = getY(datum);
+    const w = getW(datum);
+    const h = getH(datum);
+    if (w < RECT_LABEL_MIN_SIZE || h < RECT_LABEL_MIN_SIZE) {
+      continue;
+    }
+    const bbox = { x, y, w, h };
+    const usableWidth = (0, import_rect_label_utils.usableLeftSegmentWidth)(bbox, drawnRects);
+    drawnRects.push(bbox);
+    if (usableWidth < RECT_LABEL_MIN_SIZE) {
+      continue;
+    }
+    const availLength = usableWidth - 2 * RECT_LABEL_PADDING;
+    if (availLength < RECT_LABEL_MIN_SIZE) {
+      continue;
+    }
+    const truncated = (0, import_truncate_string.truncateString)(
+      text,
+      availLength,
+      import_chars_font_width_map.charsFontWidth12pixelsSize400Map,
+      truncationMode
+    );
+    if (truncated.includes(import_utils.ELLIPSIS_CHARACTER) && (0, import_rect_label_utils.countRealChars)(truncated) < RECT_LABEL_MIN_REAL_CHARS) {
+      continue;
+    }
+    const textColor = (0, import_color_contrast.getColorByContrast)((0, import_canvas_color.getCanvasColor)(getFill(datum)));
+    const wrapperStyle = {
+      left: x,
+      top: y,
+      width: usableWidth,
+      height: h
+    };
+    const innerStyle = {
+      left: RECT_LABEL_PADDING,
+      top: h / 2,
+      transform: "translateY(-50%)",
+      width: availLength,
+      color: textColor
+    };
+    labels.push(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_RectLabelOverlay_css.rectLabelClipWrapper, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_RectLabelOverlay_css.rectLabelSpan, style: innerStyle, children: truncated }) }, i)
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: import_RectLabelOverlay_css.rectOverlayContainer, style: containerStyle, children: labels });
+}
+RectLabelOverlay["displayName"] = "RectLabelOverlay";

package/charts/xy-chart/components/displays/RectLabelOverlay.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 RectLabelOverlay_css_exports = {};
+__export(RectLabelOverlay_css_exports, {
+  rectLabelClipWrapper: () => rectLabelClipWrapper,
+  rectLabelSpan: () => rectLabelSpan,
+  rectOverlayContainer: () => rectOverlayContainer
+});
+module.exports = __toCommonJS(RectLabelOverlay_css_exports);
+var import_RectLabelOverlay_css_ts_vanilla = require("./RectLabelOverlay.css");
+var rectLabelClipWrapper = "_1a48u8w2-3-11-0";
+var rectLabelSpan = "_1a48u8w1-3-11-0";
+var rectOverlayContainer = "_1a48u8w0-3-11-0";

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

@@ -0,0 +1,27 @@
+/** Axis-aligned bounding box for a rect (x, y in pixels, w/h in pixels). */
+export type BBox = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/**
+ * True when two boxes overlap along the y axis (half-open interval). Used as
+ * a cheap filter before checking horizontal occlusion.
+ */
+export declare function verticallyOverlaps(a: BBox, b: BBox): boolean;
+/**
+ * Width of the leftmost horizontal segment of `bbox` that is not covered by
+ * any of `blockers` at overlapping y. Returns `0` when the leading edge is
+ * itself covered — the caller uses that as a signal to skip the label.
+ *
+ * `blockers` are treated as later-painted rects, i.e. drawn on top; the
+ * caller must supply them in that order (see `RectLabelOverlay`).
+ */
+export declare function usableLeftSegmentWidth(bbox: BBox, blockers: BBox[]): number;
+/**
+ * Count of characters in `text` that are not the ellipsis. Used to skip labels
+ * where truncation would leave only visual noise (`…`, `…A`).
+ */
+export declare function countRealChars(text: string): number;
+//# sourceMappingURL=rect-label-utils.d.ts.map

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

@@ -0,0 +1,57 @@
+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 rect_label_utils_exports = {};
+__export(rect_label_utils_exports, {
+  countRealChars: () => countRealChars,
+  usableLeftSegmentWidth: () => usableLeftSegmentWidth,
+  verticallyOverlaps: () => verticallyOverlaps
+});
+module.exports = __toCommonJS(rect_label_utils_exports);
+var import_utils = require("../../../../typography/utils.js");
+function verticallyOverlaps(a, b) {
+  return a.y < b.y + b.h && b.y < a.y + a.h;
+}
+function usableLeftSegmentWidth(bbox, blockers) {
+  const bboxRight = bbox.x + bbox.w;
+  let usableRight = bboxRight;
+  for (const blocker of blockers) {
+    if (!verticallyOverlaps(bbox, blocker)) {
+      continue;
+    }
+    const blockerRight = blocker.x + blocker.w;
+    if (blockerRight <= bbox.x || blocker.x >= bboxRight) {
+      continue;
+    }
+    if (blocker.x <= bbox.x) {
+      return 0;
+    }
+    if (blocker.x < usableRight) {
+      usableRight = blocker.x;
+    }
+  }
+  return usableRight - bbox.x;
+}
+function countRealChars(text) {
+  let count = 0;
+  for (const ch of text) {
+    if (ch !== import_utils.ELLIPSIS_CHARACTER) {
+      count++;
+    }
+  }
+  return count;
+}

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

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

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

@@ -35,32 +35,55 @@ var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_useCanvas = require("../../../../core/components/canvas/hooks/useCanvas.js");
 var import_canvas_color = require("../../../../core/components/canvas/utils/canvas-color.js");
 var import_constants = require("../../../../core/constants.js");
+var import_defaults = require("../../../constants/defaults.js");
+var import_xy_chart_internals = require("../../../types/xy-chart-internals.js");
 const OUTER_OFFSET = 2;
 const OUTER_SHRINK = 3;
 const INNER_OFFSET = 3;
 const INNER_SHRINK = 5;
 const BORDER_WIDTH = 1;
+const getMinSizeHighlightBar = (point, canvasWidth, canvasHeight) => {
+  const width = Math.max(point.width, import_defaults.MIN_BAR_HIGHLIGHT_SIZE_PX);
+  const height = Math.max(point.height, import_defaults.MIN_BAR_HIGHLIGHT_SIZE_PX);
+  const xExpansion = (width - point.width) / 2;
+  const yExpansion = (height - point.height) / 2;
+  return {
+    x: Math.max(0, Math.min(point.x - xExpansion, canvasWidth - width)),
+    y: Math.max(0, Math.min(point.y - yExpansion, canvasHeight - height)),
+    width,
+    height
+  };
+};
+const getCanvasCssSize = (ctx) => {
+  const dpr = window.devicePixelRatio || 1;
+  return {
+    width: ctx.canvas.width / dpr,
+    height: ctx.canvas.height / dpr
+  };
+};
 const HighlightedRectangleCanvas = ({
   points
 }) => {
   const draw = (0, import_react.useCallback)(
     (ctx) => {
+      const { width: canvasWidth, height: canvasHeight } = getCanvasCssSize(ctx);
       for (const point of points) {
+        const { x, y, width, height } = point.id === import_xy_chart_internals.BAR_ID ? getMinSizeHighlightBar(point, canvasWidth, canvasHeight) : point;
         ctx.beginPath();
         ctx.lineWidth = BORDER_WIDTH;
         ctx.strokeStyle = (0, import_canvas_color.getCanvasColor)(import_colors.default.Text.Neutral.Default);
         ctx.rect(
-          Number(point.x) + OUTER_OFFSET,
-          Number(point.y) + OUTER_OFFSET,
-          Math.max(0, Number(point.width) - OUTER_SHRINK),
-          Math.max(0, Number(point.height) - OUTER_SHRINK)
+          x + OUTER_OFFSET,
+          y + OUTER_OFFSET,
+          Math.max(0, width - OUTER_SHRINK),
+          Math.max(0, height - OUTER_SHRINK)
         );
         ctx.stroke();
         ctx.closePath();
-        const innerX = Number(point.x) + INNER_OFFSET;
-        const innerY = Number(point.y) + INNER_OFFSET;
-        const innerWidth = Number(point.width) - INNER_SHRINK;
-        const innerHeight = Number(point.height) - INNER_SHRINK;
+        const innerX = x + INNER_OFFSET;
+        const innerY = y + INNER_OFFSET;
+        const innerWidth = width - INNER_SHRINK;
+        const innerHeight = height - INNER_SHRINK;
         if (innerWidth > 0 && innerHeight > 0) {
           ctx.beginPath();
           ctx.lineWidth = BORDER_WIDTH;

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

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

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

@@ -40,6 +40,7 @@ var import_HorizontalCrosshair = require("../../../../core/components/crosshair/
 var import_VerticalCrosshair = require("../../../../core/components/crosshair/VerticalCrosshair.js");
 var import_selectors = require("../../../../core/components/overlay-tooltip/selectors.js");
 var import_useTooltipReducer = require("../../../../core/components/overlay-tooltip/useTooltipReducer.js");
+var import_ChartVariantContext = require("../../../../core/context/ChartVariantContext.js");
 var import_useApplyCallbackOnScroll = require("../../../../core/hooks/useApplyCallbackOnScroll.js");
 var import_useAxesFormatter = require("../../../hooks/useAxesFormatter.js");
 var import_useFormatCategory = require("../../../hooks/useFormatCategory.js");
@@ -108,6 +109,7 @@ function XYChartCrosshairLines({
     isHorizontal,
     isStacked
   ]);
+  const { crosshair: crosshairConfig } = (0, import_react.useContext)(import_ChartVariantContext.ChartVariantContext);
   const coordinates = calculatedCoordinates ?? position ?? { x: 0, y: 0 };
   if (!position) {
     return null;
@@ -117,8 +119,8 @@ function XYChartCrosshairLines({
   const rightOffset = labels.right && hasVisibleSeriesOnThresholdAxis(thresholdYAxes.right) ? thresholdOffset.right : 0;
   const widthWithOffset = widthWithBaseOffset + leftOffset + rightOffset;
   const isBand = variant === "band";
-  const showHorizontalCrosshair = !isBand || isHorizontal || !pinned;
-  const showVerticalCrosshair = !isBand || !isHorizontal || !pinned;
+  const showHorizontalCrosshair = (!isBand || isHorizontal || !pinned) && !crosshairConfig?.horizontalHidden;
+  const showVerticalCrosshair = (!isBand || !isHorizontal || !pinned) && !crosshairConfig?.verticalHidden;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: (0, import_clsx.default)(import_ChartGrid_css.plotLayout, import_XYChartCrosshair_css.crosshair), children: [
     showHorizontalCrosshair && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_HorizontalCrosshair.HorizontalCrosshair,

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

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

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

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

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

package/charts/xy-chart/components/toolbar/DownloadDataButton.d.ts

@@ -1,5 +1,7 @@
 export declare const DownloadDataButton: {
-    (): import("react").JSX.Element;
+    ({ divider }: {
+        divider?: "left";
+    }): import("react").JSX.Element;
     displayName: string;
 };
 //# sourceMappingURL=DownloadDataButton.d.ts.map

package/charts/xy-chart/components/toolbar/DownloadDataButton.js

@@ -30,7 +30,7 @@ var import_useDownload = require("../../hooks/useDownload.js");
 var import_useXYChartData = require("../../hooks/useXYChartData.js");
 var import_messages = require("../../messages/messages.js");
 var import_build_and_download_csv = require("../../utils/build-and-download-csv.js");
-const DownloadDataButton = () => {
+const DownloadDataButton = ({ divider }) => {
   const downloadDataButtonRef = (0, import_react.useRef)(null);
   const tabIndex = (0, import_useA11yToolbarTabIndex.useA11yToolbarTabIndex)("download");
   const intl = (0, import_react_intl.useIntl)();
@@ -61,7 +61,7 @@ const DownloadDataButton = () => {
       onKeyDown: handleDownloadDataKeyboard,
       onClick: handleDownloadDataToolbar,
       tabIndex,
-      divider: "left",
+      divider,
       "data-dt-name": "ToolbarDownloadData"
     }
   );

package/charts/xy-chart/components/toolbar/PanButton.js

@@ -25,13 +25,14 @@ var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_utils = require("./utils.js");
+var import_KeyboardShortcut = require("../../../../content/keyboard-shortcut/KeyboardShortcut.js");
 var import_constants = require("../../../core/components/interactions-overlay/constants.js");
 var import_types = require("../../../core/components/interactions-overlay/types.js");
 var import_useSynchronizedSelection = require("../../../core/components/shared-chart-interactions/hooks/useSynchronizedSelection.js");
 var import_ChartToolbarRenderer = require("../../../core/components/toolbar/ChartToolbarRenderer.js");
 var import_messages = require("../../../core/components/toolbar/messages.js");
+var import_styles_css = require("../../../core/components/toolbar/styles.sty.js");
 var import_useA11yToolbarTabIndex = require("../../../core/hooks/useA11yToolbarTabIndex.js");
-var import_get_key_shortcut_by_agent = require("../../../core/utils/get-key-shortcut-by-agent.js");
 var import_messages2 = require("../../messages/messages.js");
 var import_reduce_interaction_mode = require("../../store/reduce-interaction-mode.js");
 var import_reducer_explorer = require("../../store/reducer-explorer.js");
@@ -50,16 +51,31 @@ const PanButton = () => {
     setState(import_reducer_explorer.reduceExploreCancelAll);
     setState((0, import_reduce_interaction_mode.reduceInteractionMode)(import_types.INTERACTION_MODE.Pan));
   };
-  const tooltipKeyShortcut = `${(0, import_get_key_shortcut_by_agent.getKeyShortcutByAgent)(
-    "ALT"
-  )} ${intl.formatMessage(import_messages.TOOLBAR_MESSAGES.or)} ${import_constants.KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartToolbarRenderer.ChartToolbarRenderer.Control,
     {
       ref: panButtonRef,
       prefixIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PanHorizontalIcon, {}),
       tooltipText: intl.formatMessage(import_messages2.XYCHART_MESSAGES.zoomModePan),
-      tooltipKeyShortcut,
+      menuShortcut: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_KeyboardShortcut.KeyboardShortcut,
+          {
+            keys: "alt",
+            variant: "minimal",
+            disabled: !zoomOutEnabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_styles_css.styledOrText, children: ` ${intl.formatMessage(import_messages.TOOLBAR_MESSAGES.or)} ` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_KeyboardShortcut.KeyboardShortcut,
+          {
+            keys: import_constants.KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE,
+            variant: "minimal",
+            disabled: !zoomOutEnabled
+          }
+        )
+      ] }),
       selected: isSelected,
       onKeyDown: (0, import_utils.allowWhenKeyIsEnter)(action),
       onClick: action,

package/charts/xy-chart/components/toolbar/XYChartToolbar.js

@@ -56,6 +56,7 @@ const XYChartToolbar = ({
   const selectionAreaRef = (0, import_useXYChartSelectionAreaRef.useXYChartSelectionAreaRef)();
   const isZoomEnabled = axesMetadata.isZoomEnabled;
   const isPanEnabled = axesMetadata.isPanEnabled;
+  const shouldHideInteractionControls = !isZoomEnabled && !isPanEnabled;
   const exploreBtnPlace = isZoomEnabled || isPanEnabled ? "menu" : "auto";
   const isDownloadEnabled = true;
   const initialA11yState = (0, import_zoom.getA11yToolbarConfig)({
@@ -66,7 +67,7 @@ const XYChartToolbar = ({
   });
   const menuIcon = (0, import_get_menu_trigger_icon.getMenuTriggerIcon)(interactionMode, isZoomEnabled);
   const menuLabel = !isPanEnabled && !isZoomEnabled ? intl.formatMessage(import_messages.XYCHART_MESSAGES.zoomModeExplore) : void 0;
-  const menuDisplayMode = (0, import_get_menu_trigger_display_mode.getMenuTriggerDisplayMode)({
+  const menuDisplayMode = shouldHideInteractionControls ? "never" : (0, import_get_menu_trigger_display_mode.getMenuTriggerDisplayMode)({
     isPanEnabled,
     isZoomEnabled,
     isDownloadEnabled
@@ -91,12 +92,14 @@ const XYChartToolbar = ({
       handlerRef,
       placement: placement ?? import_defaults.defaultToolbar.placement,
       draggable: true,
+      removeDragHandle: shouldHideInteractionControls,
       collapsed,
       initialA11yState,
       zIndex: import_constants.ChartOverlaysElevation.toolbar,
       onMouseEnter,
       onMouseLeave,
       menuIcon,
+      showMenuDivider: !shouldHideInteractionControls,
       menuTriggerLabel: menuLabel,
       menuDisplayMode,
       isDownloadEnabled: showMenuToolbarButton,
@@ -106,13 +109,18 @@ const XYChartToolbar = ({
       ...behaviorTrackingProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExploreButton.ExploreButton, { placement: exploreBtnPlace }),
+          !shouldHideInteractionControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExploreButton.ExploreButton, { placement: exploreBtnPlace }),
           isZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ZoomModeButton.ZoomModeButton, {}),
           isPanEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PanButton.PanButton, {})
         ] }),
         isZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ZoomInOutButtons.ZoomInOutButtons, {}),
         isZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ResetButton.ResetButton, {}),
-        showDefaultToolbarDownloadButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DownloadDataButton.DownloadDataButton, {})
+        showDefaultToolbarDownloadButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_DownloadDataButton.DownloadDataButton,
+          {
+            divider: shouldHideInteractionControls ? void 0 : "left"
+          }
+        )
       ]
     }
   ) : null;

package/charts/xy-chart/components/toolbar/ZoomInOutButtons.js

@@ -40,7 +40,7 @@ var import_ChartToolbarRenderer = require("../../../core/components/toolbar/Char
 var import_useTriggerZoom = require("../../../core/components/zoom/hooks/useTriggerZoom.js");
 var import_useA11yToolbarTabIndex = require("../../../core/hooks/useA11yToolbarTabIndex.js");
 var import_zoom = require("../../../core/types/zoom.js");
-var import_get_key_shortcut_by_agent = require("../../../core/utils/get-key-shortcut-by-agent.js");
+var import_get_primary_modifier_key = require("../../../core/utils/get-primary-modifier-key.js");
 var import_useXYChartData = require("../../hooks/useXYChartData.js");
 var import_messages = require("../../messages/messages.js");
 var import_selectors = require("../../store/selectors.js");
@@ -61,8 +61,12 @@ const ZoomInOutButtons = () => {
   const zoomOutAction = () => {
     triggerZoom(import_zoom.ZOOM_CHANGE_TYPE.ZoomOut);
   };
-  const zoomInShortcut = (0, import_get_key_shortcut_by_agent.getKeyShortcutByAgent)("CONTROL") + `+${intl.formatMessage(import_messages.XYCHART_MESSAGES.zoomActionArrowUp)}`;
-  const zoomOutShortcut = (0, import_get_key_shortcut_by_agent.getKeyShortcutByAgent)("CONTROL") + `+${intl.formatMessage(import_messages.XYCHART_MESSAGES.zoomActionArrowDown)}`;
+  const zoomInShortcut = `${(0, import_get_primary_modifier_key.getPrimaryModifierKey)()}+${intl.formatMessage(
+    import_messages.XYCHART_MESSAGES.zoomActionArrowUp
+  )}`;
+  const zoomOutShortcut = `${(0, import_get_primary_modifier_key.getPrimaryModifierKey)()}+${intl.formatMessage(
+    import_messages.XYCHART_MESSAGES.zoomActionArrowDown
+  )}`;
   const controlStyle = { marginRight: import_spacings.default.Size2 };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(