@dynatrace/strato-components 3.10.1 → 3.11.0

package/charts/gauge/components/GaugeLabel/GaugeLabel.css

@@ -1,22 +1,22 @@
-._18ourc20-3-10-1 {
+._18ourc20-3-11-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-10-1 {
+._18ourc21-3-11-0 {
   width: fit-content;
 }
-._18ourc22-3-10-1 {
+._18ourc22-3-11-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-10-1 {
+._18ourc23-3-11-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-10-1 {
+._18ourc24-3-11-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-10-1 {
+  ._18ourc24-3-11-0 {
     display: block;
   }
 }

package/charts/gauge/components/GaugeLabel/GaugeLabel.sty.js

@@ -24,6 +24,6 @@ __export(GaugeLabel_css_exports, {
 module.exports = __toCommonJS(GaugeLabel_css_exports);
 var import_GaugeLabel_css_ts_vanilla = require("./GaugeLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var elementLabelWrapper = "_18ourc20-3-10-1";
-var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-10-1", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-10-1", hanging: "_18ourc23-3-10-1" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-10-1";
+var elementLabelWrapper = "_18ourc20-3-11-0";
+var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-11-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-11-0", hanging: "_18ourc23-3-11-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-11-0";

package/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.css

@@ -1,4 +1,4 @@
-._1fbjcz30-3-10-1 {
+._1fbjcz30-3-11-0 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template: "valueLabel" 2fr
@@ -7,9 +7,9 @@
   width: 100%;
   height: 100%;
 }
-._1fbjcz30-3-10-1 > #value-label {
+._1fbjcz30-3-11-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-10-1 > #label {
+._1fbjcz30-3-11-0 > #label {
   grid-area: label;
 }

package/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.sty.js

@@ -21,4 +21,4 @@ __export(GaugeLabelsWrapper_css_exports, {
 });
 module.exports = __toCommonJS(GaugeLabelsWrapper_css_exports);
 var import_GaugeLabelsWrapper_css_ts_vanilla = require("./GaugeLabelsWrapper.css");
-var labelsContainer = "_1fbjcz30-3-10-1";
+var labelsContainer = "_1fbjcz30-3-11-0";

package/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.css

@@ -1,17 +1,17 @@
-._l0e5zm0-3-10-1 {
+._l0e5zm0-3-11-0 {
   position: relative;
   height: 100%;
   z-index: 0;
 }
-._l0e5zm1-3-10-1 {
+._l0e5zm1-3-11-0 {
   cursor: default;
   user-select: none;
 }
-._l0e5zm2-3-10-1 {
+._l0e5zm2-3-11-0 {
   position: absolute;
   z-index: 1;
 }
-._l0e5zm3-3-10-1 {
+._l0e5zm3-3-11-0 {
   top: 0;
   left: 0;
   width: 100%;

package/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.sty.js

@@ -26,6 +26,6 @@ module.exports = __toCommonJS(GaugeLayoutOverlay_css_exports);
 var import_GaugeLayoutOverlay_css_ts_vanilla = require("./GaugeLayoutOverlay.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var consumerLoadingStyle = { position: "absolute", top: 0, width: "100%", height: "100%", zIndex: 1, pointerEvents: "none", backgroundColor: "var(--dt-colors-background-base-default, #f9f9fa)", opacity: 0.4 };
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l0e5zm0-3-10-1", variantClassNames: { showLoading: { true: "_l0e5zm1-3-10-1" } }, defaultVariants: {}, compoundVariants: [] });
-var tooltipOverlay = "_l0e5zm2-3-10-1";
-var tooltipOverlayFull = "_l0e5zm3-3-10-1";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l0e5zm0-3-11-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var tooltipOverlay = "_l0e5zm2-3-11-0";
+var tooltipOverlayFull = "_l0e5zm3-3-11-0";

package/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.css

@@ -1,4 +1,4 @@
-._13c0oci0-3-10-1 {
+._13c0oci0-3-11-0 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-10-1 svg {
+._13c0oci1-3-11-0 svg {
   width: 1em;
   height: 1em;
   vertical-align: text-bottom;

package/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.sty.js

@@ -22,5 +22,5 @@ __export(GaugeResponsiveLabel_css_exports, {
 });
 module.exports = __toCommonJS(GaugeResponsiveLabel_css_exports);
 var import_GaugeResponsiveLabel_css_ts_vanilla = require("./GaugeResponsiveLabel.css");
-var parentSvgStyle = "_13c0oci1-3-10-1";
-var responsiveLabelContainer = "_13c0oci0-3-10-1";
+var parentSvgStyle = "_13c0oci1-3-11-0";
+var responsiveLabelContainer = "_13c0oci0-3-11-0";

package/charts/gauge/components/GaugeThresholdIntervalArcs.js

@@ -26,17 +26,19 @@ var import_useGaugeChartAspectRatio = require("../hooks/useGaugeChartAspectRatio
 var import_useGaugeChartBaseColorContext = require("../hooks/useGaugeChartBaseColorContext.js");
 var import_useGaugeChartRangeMaxContext = require("../hooks/useGaugeChartRangeMaxContext.js");
 var import_useGaugeChartRangeMinContext = require("../hooks/useGaugeChartRangeMinContext.js");
+var import_useGaugeChartShowThresholdIndicatorsContext = require("../hooks/useGaugeChartShowThresholdIndicatorsContext.js");
 var import_useGaugeChartThresholdContext = require("../hooks/useGaugeChartThresholdContext.js");
 var import_build_arc = require("../utils/build-arc.js");
 var import_build_threshold_interval_arcs = require("../utils/build-threshold-interval-arcs.js");
 var import_compute_threshold_band_geometry = require("../utils/compute-threshold-band-geometry.js");
 const GaugeThresholdIntervalArcs = () => {
   const thresholds = (0, import_useGaugeChartThresholdContext.useGaugeChartThresholdContext)();
+  const showThresholdIndicators = (0, import_useGaugeChartShowThresholdIndicatorsContext.useGaugeChartShowThresholdIndicatorsContext)();
   const min = (0, import_useGaugeChartRangeMinContext.useGaugeChartRangeMinContext)();
   const max = (0, import_useGaugeChartRangeMaxContext.useGaugeChartRangeMaxContext)();
   const baseColor = (0, import_useGaugeChartBaseColorContext.useGaugeChartBaseColorContext)();
   const { arcOuterRadius, arcInnerRadius } = (0, import_useGaugeChartAspectRatio.useGaugeChartAspectRatio)();
-  if (thresholds.length === 0) {
+  if (!showThresholdIndicators || thresholds.length === 0) {
     return null;
   }
   const { innerRadius, outerRadius, midRadius, gap } = (0, import_compute_threshold_band_geometry.computeThresholdBandGeometry)(arcInnerRadius, arcOuterRadius);
@@ -58,7 +60,8 @@ const GaugeThresholdIntervalArcs = () => {
         segment.startAngle,
         segment.endAngle
       ),
-      fill: segment.color
+      fill: segment.color,
+      "data-testid": "gauge-threshold-interval-arc"
     },
     i
   ));

package/charts/gauge/constants.d.ts

@@ -23,12 +23,14 @@ export declare const THRESHOLD_INTERVAL_MAX_THICKNESS = 8;
 export declare const THRESHOLD_INTERVAL_MIN_LENGTH_PX = 1;
 export declare const THRESHOLD_INTERVAL_SCALE_MIN_ARC_WIDTH = 10;
 export declare const THRESHOLD_INTERVAL_SCALE_MAX_ARC_WIDTH = 20;
+export declare const SHOW_THRESHOLD_INDICATORS_DEFAULT = true;
 export declare const GAUGE_DEFAULT_CONFIG: {
     color: string;
     min: number;
     max: number;
     formatter: undefined;
     loading: boolean;
+    showThresholdIndicators: boolean;
     tooltip: {};
 };
 export declare const DISPLAY_NAME = "GaugeChart";

package/charts/gauge/constants.js

@@ -47,6 +47,7 @@ __export(constants_exports, {
   MIN_MAX_LABEL_RESERVED_HEIGHT_IN_PX: () => MIN_MAX_LABEL_RESERVED_HEIGHT_IN_PX,
   MIN_MAX_PADDING: () => MIN_MAX_PADDING,
   MIN_SIZE_IN_PX: () => MIN_SIZE_IN_PX,
+  SHOW_THRESHOLD_INDICATORS_DEFAULT: () => SHOW_THRESHOLD_INDICATORS_DEFAULT,
   THRESHOLD_COLOR_DEFAULT: () => THRESHOLD_COLOR_DEFAULT,
   THRESHOLD_INTERVAL_MAX_GAP: () => THRESHOLD_INTERVAL_MAX_GAP,
   THRESHOLD_INTERVAL_MAX_OFFSET: () => THRESHOLD_INTERVAL_MAX_OFFSET,
@@ -86,12 +87,14 @@ const THRESHOLD_INTERVAL_MAX_THICKNESS = 8;
 const THRESHOLD_INTERVAL_MIN_LENGTH_PX = 1;
 const THRESHOLD_INTERVAL_SCALE_MIN_ARC_WIDTH = 10;
 const THRESHOLD_INTERVAL_SCALE_MAX_ARC_WIDTH = 20;
+const SHOW_THRESHOLD_INDICATORS_DEFAULT = true;
 const GAUGE_DEFAULT_CONFIG = {
   color: ARC_DEFAULT_VALUE_COLOR,
   min: DEFAULT_MIN_RANGE_VALUE,
   max: DEFAULT_MAX_RANGE_VALUE,
   formatter: void 0,
   loading: false,
+  showThresholdIndicators: SHOW_THRESHOLD_INDICATORS_DEFAULT,
   tooltip: {}
 };
 const DISPLAY_NAME = "GaugeChart";

package/charts/gauge/contexts/GaugeChartShowThresholdIndicatorsContext.d.ts

@@ -0,0 +1,2 @@
+export declare const GaugeChartShowThresholdIndicatorsContext: import("react").Context<boolean>;
+//# sourceMappingURL=GaugeChartShowThresholdIndicatorsContext.d.ts.map

package/charts/gauge/contexts/GaugeChartShowThresholdIndicatorsContext.js

@@ -0,0 +1,27 @@
+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 GaugeChartShowThresholdIndicatorsContext_exports = {};
+__export(GaugeChartShowThresholdIndicatorsContext_exports, {
+  GaugeChartShowThresholdIndicatorsContext: () => GaugeChartShowThresholdIndicatorsContext
+});
+module.exports = __toCommonJS(GaugeChartShowThresholdIndicatorsContext_exports);
+var import_react = require("react");
+var import_constants = require("../constants.js");
+const GaugeChartShowThresholdIndicatorsContext = (0, import_react.createContext)(
+  import_constants.SHOW_THRESHOLD_INDICATORS_DEFAULT
+);

package/charts/gauge/hooks/useGaugeChartShowThresholdIndicatorsContext.d.ts

@@ -0,0 +1,2 @@
+export declare const useGaugeChartShowThresholdIndicatorsContext: () => boolean;
+//# sourceMappingURL=useGaugeChartShowThresholdIndicatorsContext.d.ts.map

package/charts/gauge/hooks/useGaugeChartShowThresholdIndicatorsContext.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 useGaugeChartShowThresholdIndicatorsContext_exports = {};
+__export(useGaugeChartShowThresholdIndicatorsContext_exports, {
+  useGaugeChartShowThresholdIndicatorsContext: () => useGaugeChartShowThresholdIndicatorsContext
+});
+module.exports = __toCommonJS(useGaugeChartShowThresholdIndicatorsContext_exports);
+var import_react = require("react");
+var import_GaugeChartShowThresholdIndicatorsContext = require("../contexts/GaugeChartShowThresholdIndicatorsContext.js");
+const useGaugeChartShowThresholdIndicatorsContext = () => (0, import_react.useContext)(import_GaugeChartShowThresholdIndicatorsContext.GaugeChartShowThresholdIndicatorsContext);

package/charts/gauge/providers/GaugeChartProviders.js

@@ -32,6 +32,7 @@ var import_GaugeChartLabelsContext = require("../contexts/GaugeChartLabelsContex
 var import_GaugeChartLoadingContext = require("../contexts/GaugeChartLoadingContext.js");
 var import_GaugeChartRangeMaxContext = require("../contexts/GaugeChartRangeMaxContext.js");
 var import_GaugeChartRangeMinContext = require("../contexts/GaugeChartRangeMinContext.js");
+var import_GaugeChartShowThresholdIndicatorsContext = require("../contexts/GaugeChartShowThresholdIndicatorsContext.js");
 var import_GaugeChartSizeContext = require("../contexts/GaugeChartSizeContext.js");
 var import_GaugeChartThresholdContext = require("../contexts/GaugeChartThresholdContext.js");
 var import_GaugeChartTooltipContext = require("../contexts/GaugeChartTooltipContext.js");
@@ -54,6 +55,7 @@ const GaugeChartProviders = ({
     min,
     labelSlot,
     thresholdsIndicators,
+    showThresholdIndicators,
     colorRules,
     unit
   } = config;
@@ -91,24 +93,30 @@ const GaugeChartProviders = ({
     {
       value: thresholdsIndicators ?? emptyThresholds,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_GaugeChartBaseColorContext.GaugeChartBaseColorContext.Provider,
+        import_GaugeChartShowThresholdIndicatorsContext.GaugeChartShowThresholdIndicatorsContext.Provider,
         {
-          value: explicitColor ?? config.color,
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartColorContext.GaugeChartColorContext.Provider, { value: calculatedColor, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_GaugeChartLabelsContext.GaugeChartLabelsContext.Provider,
+          value: showThresholdIndicators,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_GaugeChartBaseColorContext.GaugeChartBaseColorContext.Provider,
             {
-              value: {
-                label: labelSlot
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartRangeMinContext.GaugeChartRangeMinContext.Provider, { value: min, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartRangeMaxContext.GaugeChartRangeMaxContext.Provider, { value: max, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartLoadingContext.GaugeChartLoadingContext.Provider, { value: loading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_GaugeChartTooltipContext.GaugeChartTooltipContext.Provider,
+              value: explicitColor ?? config.color,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartColorContext.GaugeChartColorContext.Provider, { value: calculatedColor, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_GaugeChartLabelsContext.GaugeChartLabelsContext.Provider,
                 {
-                  value: tooltipConfigValue,
-                  children
+                  value: {
+                    label: labelSlot
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartRangeMinContext.GaugeChartRangeMinContext.Provider, { value: min, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartRangeMaxContext.GaugeChartRangeMaxContext.Provider, { value: max, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartLoadingContext.GaugeChartLoadingContext.Provider, { value: loading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_GaugeChartTooltipContext.GaugeChartTooltipContext.Provider,
+                    {
+                      value: tooltipConfigValue,
+                      children
+                    }
+                  ) }) }) })
                 }
-              ) }) }) })
+              ) })
             }
-          ) })
+          )
         }
       )
     }

package/charts/gauge/slots/ThresholdIndicator.d.ts

@@ -9,7 +9,8 @@ export interface GaugeChartThresholdIndicatorProps {
     value: number;
     /**
      * When set to true, it shows the indicator of the threshold.
-     * @deprecated This prop will be removed.
+     * @deprecated Use the top-level `showThresholdIndicators` prop on
+     * `GaugeChart` to toggle the visibility of all threshold indicators at once.
      * @defaultValue false
      */
     showIndicator?: boolean;

package/charts/gauge/types/gauge-chart-config-internal.d.ts

@@ -12,6 +12,7 @@ export interface GaugeChartInternalConfig {
     color: string;
     formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;
     thresholdsIndicators?: GaugeChartThresholdIndicatorProps[];
+    showThresholdIndicators: boolean;
     labelSlot?: ReactNode;
     colorRules: ColorRuleProps[];
     toolbar: Required<CompactToolbarProps>;

package/charts/gauge/types/gauge-chart-config.d.ts

@@ -64,6 +64,12 @@ export interface GaugeChartConsumerConfig {
      * Unit to be displayed in the tooltip and the value label.
      */
     unit?: string | Unit;
+    /**
+     * Set to `true` to show all threshold indicators and `false` to hide them
+     * all. Does not affect the value arc color derived from thresholds.
+     * @defaultValue true
+     */
+    showThresholdIndicators?: boolean;
     /** Show the loading indicator when truthy.
      * @defaultValue false
      */

package/charts/gauge/types/gauge-chart.d.ts

@@ -52,6 +52,12 @@ export interface GaugeChartBaseProps extends StylingProps, MaskingProps, DataTes
      * Unit to be displayed in the tooltip and the value label.
      */
     unit?: string | Unit;
+    /**
+     * Set to `true` to show all threshold indicators and `false` to hide them
+     * all. Does not affect the value arc color derived from thresholds.
+     * @defaultValue true
+     */
+    showThresholdIndicators?: boolean;
     /** Show the loading indicator when truthy.
      * @defaultValue false
      */

package/charts/gauge/utils/build-gauge-chart-config.js

@@ -30,6 +30,7 @@ const buildGaugeChartConfig = (props, consumerConfig, slots) => {
   const color = props.color ?? consumerConfig.color ?? import_constants.GAUGE_DEFAULT_CONFIG.color;
   const formatter = props.formatter ?? consumerConfig.formatter;
   const loading = props.loading ?? consumerConfig.loading ?? import_constants.GAUGE_DEFAULT_CONFIG.loading;
+  const showThresholdIndicators = props.showThresholdIndicators ?? consumerConfig.showThresholdIndicators ?? import_constants.GAUGE_DEFAULT_CONFIG.showThresholdIndicators;
   const thresholdsIndicators = slots.thresholdsIndicators.length === 0 ? consumerConfig.thresholdsIndicators?.map(import_apply_threshold_default.applyThresholdDefaults) : slots.thresholdsIndicators;
   const colorRules = (consumerConfig.colorRules || []).filter(import_ColorRule.isValidColorRule).concat(slots.colorRules || []);
   const toolbar = {
@@ -46,6 +47,7 @@ const buildGaugeChartConfig = (props, consumerConfig, slots) => {
     color,
     formatter,
     thresholdsIndicators,
+    showThresholdIndicators,
     labelSlot: slots.label,
     colorRules,
     toolbar,

package/charts/gauge/utils/build-threshold-interval-arcs.d.ts

@@ -21,7 +21,8 @@ export interface ThresholdIntervalArcData {
  *                       pixel distances to angles.
  * @param baseColor    - Color for the fill-out zone (before the first threshold).
  * @param gapPx        - Circumferential gap in px between adjacent segments.
- * @param minLengthPx  - Minimum arc length in px; shorter segments are skipped.
+ * @param minLengthPx  - Minimum arc length in px. Gaps shrink to keep thin zones
+ *                       visible; zero-width zones (duplicate values) collapse.
  */
 export declare const buildThresholdIntervalArcs: (thresholds: GaugeChartThresholdIndicatorProps[], min: number, max: number, midRadius: number, baseColor: string, gapPx: number, minLengthPx: number) => ThresholdIntervalArcData[];
 //# sourceMappingURL=build-threshold-interval-arcs.d.ts.map

package/charts/gauge/utils/build-threshold-interval-arcs.js

@@ -29,25 +29,30 @@ const buildThresholdIntervalArcs = (thresholds, min, max, midRadius, baseColor,
   const boundaries = [min, ...inRange.map((t) => t.value), max];
   const zoneColors = [baseColor, ...inRange.map((t) => t.color ?? baseColor)];
   const minAngle = minLengthPx / midRadius;
+  const desiredHalfGap = gapPx / midRadius / 2;
   const angles = boundaries.map((b) => (0, import_calculate_gauge_angle.calculateGaugeAngle)(b, max, min));
-  const minRawSpan = Math.min(
-    ...angles.slice(0, -1).map((a, i) => angles[i + 1] - a)
-  );
-  const halfGapAngle = Math.min(
-    gapPx / midRadius / 2,
-    Math.max(0, (minRawSpan - minAngle) / 2)
-  );
   const arcs = [];
   const lastIndex = boundaries.length - 2;
   for (let i = 0; i <= lastIndex; i++) {
-    const adjustedStart = angles[i] + (i > 0 ? halfGapAngle : 0);
-    const adjustedEnd = angles[i + 1] - (i < lastIndex ? halfGapAngle : 0);
-    if (adjustedEnd - adjustedStart < minAngle) {
-      return [];
+    const rawSpan = angles[i + 1] - angles[i];
+    let leftGap = i > 0 ? desiredHalfGap : 0;
+    let rightGap = i < lastIndex ? desiredHalfGap : 0;
+    const floor = Math.min(rawSpan, minAngle);
+    const maxGapSum = rawSpan - floor;
+    const gapSum = leftGap + rightGap;
+    if (gapSum > maxGapSum) {
+      const scale = gapSum > 0 ? maxGapSum / gapSum : 0;
+      leftGap *= scale;
+      rightGap *= scale;
+    }
+    const startAngle = angles[i] + leftGap;
+    const endAngle = angles[i + 1] - rightGap;
+    if (endAngle <= startAngle) {
+      continue;
     }
     arcs.push({
-      startAngle: adjustedStart,
-      endAngle: adjustedEnd,
+      startAngle,
+      endAngle,
       color: zoneColors[i]
     });
   }

package/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.css

@@ -1,3 +1,3 @@
-._9phcbi0-3-10-1 {
+._9phcbi0-3-11-0 {
   position: relative;
 }

package/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.sty.js

@@ -21,4 +21,4 @@ __export(HistogramValueBottomAxisArea_css_exports, {
 });
 module.exports = __toCommonJS(HistogramValueBottomAxisArea_css_exports);
 var import_HistogramValueBottomAxisArea_css_ts_vanilla = require("./HistogramValueBottomAxisArea.css");
-var axisContainerStyle = "_9phcbi0-3-10-1";
+var axisContainerStyle = "_9phcbi0-3-11-0";

package/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.css

@@ -1,4 +1,4 @@
-._fzvydv0-3-10-1 {
+._fzvydv0-3-11-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }

package/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.sty.js

@@ -21,4 +21,4 @@ __export(HistogramTooltip_css_exports, {
 });
 module.exports = __toCommonJS(HistogramTooltip_css_exports);
 var import_HistogramTooltip_css_ts_vanilla = require("./HistogramTooltip.css");
-var wrapper = "_fzvydv0-3-10-1";
+var wrapper = "_fzvydv0-3-11-0";

package/charts/histogram/components/overlays/HistogramOverlays.css

@@ -1,4 +1,4 @@
-._drl8ns0-3-10-1 {
+._drl8ns0-3-11-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._drl8ns1-3-10-1 {
+._drl8ns1-3-11-0 {
   pointer-events: none;
   overflow: visible;
   z-index: 1;

package/charts/histogram/components/overlays/HistogramOverlays.sty.js

@@ -23,5 +23,5 @@ __export(HistogramOverlays_css_exports, {
 module.exports = __toCommonJS(HistogramOverlays_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_HistogramOverlays_css_ts_vanilla = require("./HistogramOverlays.css");
-var crosshairLayout = "_drl8ns1-3-10-1 _13lzg4k0-3-10-1";
-var datapointLayout = "_drl8ns0-3-10-1 _13lzg4k0-3-10-1";
+var crosshairLayout = "_drl8ns1-3-11-0 _13lzg4k0-3-11-0";
+var datapointLayout = "_drl8ns0-3-11-0 _13lzg4k0-3-11-0";

package/charts/histogram/components/toolbar/PanButton.js

@@ -24,11 +24,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
+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_explore_reducers = require("../../../core/components/interactions-state-helpers/reducers/explore-reducers.js");
 var import_mode_reducers = require("../../../core/components/interactions-state-helpers/reducers/mode-reducers.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_selectors = require("../../hooks/store/selectors.js");
 var import_state_setters = require("../../hooks/store/state-setters.js");
@@ -59,13 +62,31 @@ const PanButton = () => {
       ref: panButtonRef,
       prefixIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.PanHorizontalIcon, {}),
       tooltipText: intl.formatMessage(import_tooltip_text.HISTOGRAM_MESSAGES.zoomModePan),
-      tooltipKeyShortcut: import_constants.KeyboardControls.KEYBOARD_PAN_MODE_SHORTCUT_ALTERNATIVE,
       selected: isSelected,
       onKeyDown: handleKeyDown,
       onClick: handleClick,
       tabIndex,
       disabled: !zoomOutEnabled,
-      placement: "menu"
+      placement: "menu",
+      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
+          }
+        )
+      ] })
     }
   ) : null;
 };

package/charts/histogram/components/toolbar/ZoomInOutButtons.js

@@ -39,7 +39,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_selectors = require("../../hooks/store/selectors.js");
 var import_tooltip_text = require("../../messages/tooltip-text.js");
 var import_useApplyZoomDelta = require("../overlays/hooks/useApplyZoomDelta.js");
@@ -67,8 +67,12 @@ const ZoomInOutButtons = () => {
       triggerZoom(import_zoom.ZOOM_CHANGE_TYPE.ZoomOut);
     }
   };
-  const zoomInShortcut = (0, import_get_key_shortcut_by_agent.getKeyShortcutByAgent)("CONTROL") + `+${intl.formatMessage(import_tooltip_text.HISTOGRAM_MESSAGES.zoomActionArrowUp)}`;
-  const zoomOutShortcut = (0, import_get_key_shortcut_by_agent.getKeyShortcutByAgent)("CONTROL") + `+${intl.formatMessage(import_tooltip_text.HISTOGRAM_MESSAGES.zoomActionArrowDown)}`;
+  const zoomInShortcut = `${(0, import_get_primary_modifier_key.getPrimaryModifierKey)()}+${intl.formatMessage(
+    import_tooltip_text.HISTOGRAM_MESSAGES.zoomActionArrowUp
+  )}`;
+  const zoomOutShortcut = `${(0, import_get_primary_modifier_key.getPrimaryModifierKey)()}+${intl.formatMessage(
+    import_tooltip_text.HISTOGRAM_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)(

package/charts/histogram/components/toolbar/ZoomModeButton.js

@@ -24,6 +24,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
+var import_KeyboardShortcut = require("../../../../content/keyboard-shortcut/KeyboardShortcut.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_types = require("../../../core/components/interactions-overlay/types.js");
 var import_calculate_initial_selection_area_positions = require("../../../core/components/interactions-overlay/utils/calculate-initial-selection-area-positions.js");
@@ -32,9 +33,10 @@ var import_mode_reducers = require("../../../core/components/interactions-state-
 var import_ChartToolbarRenderer = require("../../../core/components/toolbar/ChartToolbarRenderer.js");
 var import_useToolbarContext = require("../../../core/components/toolbar/hooks/useToolbarContext.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_get_percentage_from_pixel = require("../../../core/utils/get-percentage-from-pixel.js");
+var import_get_primary_modifier_key = require("../../../core/utils/get-primary-modifier-key.js");
 var import_selectors = require("../../hooks/store/selectors.js");
 var import_state_setters = require("../../hooks/store/state-setters.js");
 var import_useHistogramChartOverlayRef = require("../../hooks/useHistogramChartOverlayRef.js");
@@ -46,7 +48,6 @@ const ZoomModeButton = () => {
   const overlayRef = (0, import_useHistogramChartOverlayRef.useHistogramChartOverlayRef)();
   const { width } = (0, import_useGridPlotSize.useGridPlotSize)();
   const intl = (0, import_react_intl.useIntl)();
-  const tooltipShortcut = (0, import_get_key_shortcut_by_agent.getKeyShortcutByAgent)("CONTROL") + " " + intl.formatMessage(import_messages.TOOLBAR_MESSAGES.or) + " Z";
   const { updateLastItemSelected } = (0, import_useToolbarContext.useToolbarContext)();
   const isSelected = interactionMode === import_types.INTERACTION_MODE.Zoom;
   const selectState = (0, import_selectors.useSelectState)();
@@ -94,7 +95,11 @@ const ZoomModeButton = () => {
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       tabIndex,
-      tooltipKeyShortcut: tooltipShortcut,
+      menuShortcut: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_KeyboardShortcut.KeyboardShortcut, { keys: (0, import_get_primary_modifier_key.getPrimaryModifierKey)(), variant: "minimal" }),
+        /* @__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: "Z", variant: "minimal" })
+      ] }),
       placement: "menu"
     }
   );

package/charts/honeycomb/HoneycombChart.css

@@ -1,3 +1,3 @@
-._p8cogi0-3-10-1 {
+._p8cogi0-3-11-0 {
   position: relative;
 }