@dynatrace/strato-components 3.10.4 → 3.11.0

package/charts/meter-bar/shared/styles.sty.js

@@ -23,4 +23,4 @@ __export(styles_css_exports, {
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
 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 = "_16sdwow0-3-10-4";
+var container = "_16sdwow0-3-11-0";

package/charts/meter-bar/shared/utils/collapse-threshold-show-indicators.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Collapses the deprecated per-threshold `showIndicator` flags into a single
+ * chart-level "show threshold indicators" value, shared by the standalone
+ * `MeterBarChart` and the DataTable `meterbar` column.
+ *
+ * - all defined flags `true` → `true` (show all indicators)
+ * - all defined flags `false` → `false` (hide all indicators)
+ * - no flag defined → `undefined` (no legacy config; defer to the default)
+ * - a mix of `true`/`false` (indeterminate) can't map to a single flag, so we
+ *   warn the developer with `mixedValuesWarning` and defer to the default.
+ *
+ * The old per-threshold `showIndicator` defaulted to `false`, so an unset flag
+ * is treated as `false` when collapsing.
+ * @internal
+ */
+export declare function collapseThresholdShowIndicators(showIndicators: Array<boolean | undefined>, mixedValuesWarning: string): boolean | undefined;
+//# sourceMappingURL=collapse-threshold-show-indicators.d.ts.map

package/charts/meter-bar/shared/utils/collapse-threshold-show-indicators.js

@@ -0,0 +1,38 @@
+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 collapse_threshold_show_indicators_exports = {};
+__export(collapse_threshold_show_indicators_exports, {
+  collapseThresholdShowIndicators: () => collapseThresholdShowIndicators
+});
+module.exports = __toCommonJS(collapse_threshold_show_indicators_exports);
+var import_logging = require("../../../../core/utils/logging.js");
+function collapseThresholdShowIndicators(showIndicators, mixedValuesWarning) {
+  const usesLegacyConfig = showIndicators.some((flag) => flag !== void 0);
+  if (!usesLegacyConfig) {
+    return void 0;
+  }
+  const resolvedFlags = showIndicators.map((flag) => flag ?? false);
+  if (resolvedFlags.every((flag) => flag === true)) {
+    return true;
+  }
+  if (resolvedFlags.every((flag) => flag === false)) {
+    return false;
+  }
+  (0, import_logging.devLog)(mixedValuesWarning);
+  return void 0;
+}

package/charts/meter-bar/single-meter-bar/MeterBarChart.js

@@ -34,6 +34,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_MeterBarChartPlotArea = require("./components/MeterBarChartPlotArea.js");
+var import_MeterBarChartThresholdIntervals = require("./components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.js");
 var import_MeterBarChartThresholdLegend = require("./components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js");
 var import_constants = require("./constants.js");
 var import_useMeterBarChartConfig = require("./hooks/useMeterBarChartConfig.js");
@@ -70,6 +71,10 @@ const MeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     "data-testid": dataTestId = "single-meter-bar-chart-root",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-details": ariaDetails,
     prefixIcon,
     valueAccessor
   } = props;
@@ -130,7 +135,10 @@ const MeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
       "data-dtrum-allow": dataDtrumAllow,
       "data-testid": dataTestId,
       "data-dt-component": COMPONENT_NAME,
-      "aria-label": import_constants.METER_BAR_CHART_ARIA_LABEL,
+      "aria-label": ariaLabel ?? import_constants.METER_BAR_CHART_ARIA_LABEL,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy,
+      "aria-details": ariaDetails,
       consumerConfig,
       userRef: forwardedRef,
       children: [
@@ -153,6 +161,7 @@ const MeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Chart, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartPlotArea.MeterBarChartPlotArea, {}) }),
+        thresholds.data.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Thresholds, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartThresholdIntervals.MeterBarChartThresholdIntervals, {}) }),
         minSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Min, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartFormattedValue.MeterBarChartFormattedValue, { value: min, auto: minSlot?.auto, children: minSlot?.value }) }),
         maxSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Max, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartFormattedValue.MeterBarChartFormattedValue, { value: max, auto: maxSlot?.auto, children: maxSlot?.value }) }),
         hasLegend && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Legend, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartThresholdLegend.MeterBarChartThresholdLegend, {}) })

package/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlayWithTooltip.js

@@ -68,7 +68,10 @@ const MeterBarCustomTooltip = ({
         max,
         color,
         name,
-        threshold: activeThreshold ? { label: activeThreshold.name, color: activeThreshold.color } : void 0
+        threshold: activeThreshold ? {
+          label: activeThreshold.name,
+          color: activeThreshold.color ?? color
+        } : void 0
       })
     }
   );

package/charts/meter-bar/single-meter-bar/components/MeterBarChartPlotArea.js

@@ -21,24 +21,10 @@ __export(MeterBarChartPlotArea_exports, {
 });
 module.exports = __toCommonJS(MeterBarChartPlotArea_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_MeterBarPlot = require("../../shared/components/meter-bar-plot/MeterBarPlot.js");
-var import_MeterBarChartDataContext = require("../context/MeterBarChartDataContext.js");
 var import_MeterBarChartOverlay = require("./MeterBarChartOverlay/MeterBarChartOverlay.js");
 var import_MeterBarChartSegment = require("./MeterBarChartSegment/MeterBarChartSegment.js");
-var import_MeterBarChartThresholds = require("./MeterBarChartThresholds/MeterBarChartThresholds.js");
-var import_MeterBarLayoutSizeContext = require("../../shared/context/MeterBarLayoutSizeContext.js");
+var import_MeterBarPlot = require("../../shared/components/meter-bar-plot/MeterBarPlot.js");
 const MeterBarChartPlotArea = () => {
-  const { thresholdIndicators } = (0, import_MeterBarChartDataContext.useMeterBarChartData)();
-  const { segmentHeight } = (0, import_MeterBarLayoutSizeContext.useMeterBarLayoutSize)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_MeterBarChartOverlay.MeterBarChartOverlay, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarPlot.MeterBarPlot, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartSegment.MeterBarChartSegment, {}) }),
-    thresholdIndicators && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_MeterBarChartThresholds.MeterBarChartThresholds,
-      {
-        thresholdIndicators,
-        segmentHeight
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartOverlay.MeterBarChartOverlay, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarPlot.MeterBarPlot, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartSegment.MeterBarChartSegment, {}) }) });
 };
 MeterBarChartPlotArea.displayName = "MeterBarChartPlotArea";

package/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.css

@@ -0,0 +1,6 @@
+._n2jd1m0-3-11-0 {
+  display: block;
+  width: 100%;
+  overflow: visible;
+  pointer-events: none;
+}

package/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.css.d.ts

@@ -0,0 +1,2 @@
+export declare const thresholdIntervals: string;
+//# sourceMappingURL=MeterBarChartThresholdIntervals.css.d.ts.map

package/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Renders the threshold intervals as colored bar segments below the meter bar.
+ * Segment sizing (thickness, gaps, offset) scales with the meter bar thickness.
+ */
+export declare const MeterBarChartThresholdIntervals: {
+    (): import("react").JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=MeterBarChartThresholdIntervals.d.ts.map

package/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.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 MeterBarChartThresholdIntervals_exports = {};
+__export(MeterBarChartThresholdIntervals_exports, {
+  MeterBarChartThresholdIntervals: () => MeterBarChartThresholdIntervals
+});
+module.exports = __toCommonJS(MeterBarChartThresholdIntervals_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_d3_scale = require("d3-scale");
+var import_MeterBarChartThresholdIntervals_css = require("./MeterBarChartThresholdIntervals.sty.js");
+var import_getTokenComputedStyle = require("../../../../core/utils/getTokenComputedStyle.js");
+var import_getValidColor = require("../../../../core/utils/getValidColor.js");
+var import_constants = require("../../../shared/constants.js");
+var import_MeterBarLayoutSizeContext = require("../../../shared/context/MeterBarLayoutSizeContext.js");
+var import_constants2 = require("../../constants.js");
+var import_MeterBarChartDataContext = require("../../context/MeterBarChartDataContext.js");
+var import_MeterBarChartInternalConfigContext = require("../../context/MeterBarChartInternalConfigContext.js");
+var import_get_threshold_interval_sizing = require("../../utils/get-threshold-interval-sizing.js");
+const BAR_THICKNESS_BY_SIZE = {
+  size8: import_constants.SMALL_CHART_SIZE,
+  size16: import_constants.MEDIUM_CHART_SIZE,
+  size24: import_constants.LARGE_CHART_SIZE,
+  auto: 0
+};
+const MeterBarChartThresholdIntervals = () => {
+  const { thresholdIntervals } = (0, import_MeterBarChartDataContext.useMeterBarChartData)();
+  const { min, max, showThresholdIndicators } = (0, import_MeterBarChartInternalConfigContext.useMeterBarChartInternalConfig)();
+  const { segmentWidth, size, segmentHeight } = (0, import_MeterBarLayoutSizeContext.useMeterBarLayoutSize)();
+  if (!showThresholdIndicators || thresholdIntervals.length === 0 || segmentWidth <= 0) {
+    return null;
+  }
+  const barThickness = size === import_constants.METER_BAR_SIZE.Auto ? segmentHeight : BAR_THICKNESS_BY_SIZE[size];
+  const { thickness, gap, offset } = (0, import_get_threshold_interval_sizing.getThresholdIntervalSizing)(barThickness);
+  const scale = (0, import_d3_scale.scaleLinear)().domain([min, max]).range([0, segmentWidth]).clamp(true);
+  const lastIndex = thresholdIntervals.length - 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className: import_MeterBarChartThresholdIntervals_css.thresholdIntervals,
+      height: thickness,
+      style: { marginTop: offset },
+      role: "presentation",
+      "aria-label": import_constants2.METER_BAR_CHART_THRESHOLDS_ARIA_LABEL,
+      children: thresholdIntervals.map((interval, index) => {
+        const start = scale(interval.start);
+        const end = scale(interval.end);
+        const availableWidth = end - start - (index < lastIndex ? gap : 0);
+        const width = Math.max(availableWidth, import_constants2.THRESHOLD_INTERVAL_MIN_LENGTH);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "rect",
+          {
+            x: start,
+            y: 0,
+            width,
+            height: thickness,
+            rx: thickness / 2,
+            fill: (0, import_getTokenComputedStyle.getTokenComputedStyle)((0, import_getValidColor.getValidColor)(interval.color)),
+            "data-testid": "meterbar-threshold-interval"
+          },
+          `interval-${interval.start}-${interval.end}`
+        );
+      })
+    }
+  );
+};
+MeterBarChartThresholdIntervals["displayName"] = "MeterBarChartThresholdIntervals";

package/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.sty.js

@@ -0,0 +1,24 @@
+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 MeterBarChartThresholdIntervals_css_exports = {};
+__export(MeterBarChartThresholdIntervals_css_exports, {
+  thresholdIntervals: () => thresholdIntervals
+});
+module.exports = __toCommonJS(MeterBarChartThresholdIntervals_css_exports);
+var import_MeterBarChartThresholdIntervals_css_ts_vanilla = require("./MeterBarChartThresholdIntervals.css");
+var thresholdIntervals = "_n2jd1m0-3-11-0";

package/charts/meter-bar/single-meter-bar/constants.d.ts

@@ -1,4 +1,18 @@
-export declare const THRESHOLD_ADDITIONAL_HEIGHT = 8;
 export declare const METER_BAR_CHART_ARIA_LABEL = "Meter Bar Chart";
 export declare const METER_BAR_CHART_PLOT_ARIA_LABEL = "Chart Plot Area";
+export declare const METER_BAR_CHART_THRESHOLDS_ARIA_LABEL = "Threshold Intervals";
+/**
+ * Threshold interval bar sizing, in pixels. The interval bars, their gaps, and
+ * their offset from the meter bar all scale with the meter bar thickness so the
+ * visual density stays balanced as the chart is resized (APPDEV-17783).
+ */
+export declare const THRESHOLD_INTERVAL_MIN_THICKNESS = 2;
+export declare const THRESHOLD_INTERVAL_MAX_THICKNESS = 4;
+export declare const THRESHOLD_INTERVAL_MIN_GAP = 2;
+export declare const THRESHOLD_INTERVAL_MAX_GAP = 4;
+export declare const THRESHOLD_INTERVAL_MIN_OFFSET = 2;
+export declare const THRESHOLD_INTERVAL_MID_OFFSET = 4;
+export declare const THRESHOLD_INTERVAL_MAX_OFFSET = 4;
+/** Any threshold interval renders at least this wide so it stays visible. */
+export declare const THRESHOLD_INTERVAL_MIN_LENGTH = 8;
 //# sourceMappingURL=constants.d.ts.map

package/charts/meter-bar/single-meter-bar/constants.js

@@ -19,9 +19,25 @@ var constants_exports = {};
 __export(constants_exports, {
   METER_BAR_CHART_ARIA_LABEL: () => METER_BAR_CHART_ARIA_LABEL,
   METER_BAR_CHART_PLOT_ARIA_LABEL: () => METER_BAR_CHART_PLOT_ARIA_LABEL,
-  THRESHOLD_ADDITIONAL_HEIGHT: () => THRESHOLD_ADDITIONAL_HEIGHT
+  METER_BAR_CHART_THRESHOLDS_ARIA_LABEL: () => METER_BAR_CHART_THRESHOLDS_ARIA_LABEL,
+  THRESHOLD_INTERVAL_MAX_GAP: () => THRESHOLD_INTERVAL_MAX_GAP,
+  THRESHOLD_INTERVAL_MAX_OFFSET: () => THRESHOLD_INTERVAL_MAX_OFFSET,
+  THRESHOLD_INTERVAL_MAX_THICKNESS: () => THRESHOLD_INTERVAL_MAX_THICKNESS,
+  THRESHOLD_INTERVAL_MID_OFFSET: () => THRESHOLD_INTERVAL_MID_OFFSET,
+  THRESHOLD_INTERVAL_MIN_GAP: () => THRESHOLD_INTERVAL_MIN_GAP,
+  THRESHOLD_INTERVAL_MIN_LENGTH: () => THRESHOLD_INTERVAL_MIN_LENGTH,
+  THRESHOLD_INTERVAL_MIN_OFFSET: () => THRESHOLD_INTERVAL_MIN_OFFSET,
+  THRESHOLD_INTERVAL_MIN_THICKNESS: () => THRESHOLD_INTERVAL_MIN_THICKNESS
 });
 module.exports = __toCommonJS(constants_exports);
-const THRESHOLD_ADDITIONAL_HEIGHT = 8;
 const METER_BAR_CHART_ARIA_LABEL = "Meter Bar Chart";
 const METER_BAR_CHART_PLOT_ARIA_LABEL = "Chart Plot Area";
+const METER_BAR_CHART_THRESHOLDS_ARIA_LABEL = "Threshold Intervals";
+const THRESHOLD_INTERVAL_MIN_THICKNESS = 2;
+const THRESHOLD_INTERVAL_MAX_THICKNESS = 4;
+const THRESHOLD_INTERVAL_MIN_GAP = 2;
+const THRESHOLD_INTERVAL_MAX_GAP = 4;
+const THRESHOLD_INTERVAL_MIN_OFFSET = 2;
+const THRESHOLD_INTERVAL_MID_OFFSET = 4;
+const THRESHOLD_INTERVAL_MAX_OFFSET = 4;
+const THRESHOLD_INTERVAL_MIN_LENGTH = 8;

package/charts/meter-bar/single-meter-bar/context/MeterBarChartInternalConfigContext.d.ts

@@ -7,6 +7,7 @@ export interface MeterBarChartInternalConfigContextProps {
     label: ReactNode;
     thresholds: ThresholdMetadata;
     thresholdsIndicators: ThresholdMetadata;
+    showThresholdIndicators: boolean;
 }
 export declare const MeterBarChartInternalConfigContext: import("react").Context<MeterBarChartInternalConfigContextProps>;
 export declare const useMeterBarChartInternalConfig: () => MeterBarChartInternalConfigContextProps;

package/charts/meter-bar/single-meter-bar/hooks/useMeterBarChartThresholds.d.ts

@@ -1,6 +1,6 @@
-export declare const useMeterBarChartThresholds: (displayValue: number) => {
+export declare const useMeterBarChartThresholds: (displayValue: number, fallbackColor: string) => {
     matchingThreshold: import("../../../core/utils/find-matching-threshold.js").ThresholdProps | undefined;
-    thresholdIndicators: number[];
+    thresholdIntervals: import("../types/meter-bar-chart-internal.js").ThresholdIntervalRange[];
     legendItems: import("../../../index.js")._LegendItem[];
 };
 //# sourceMappingURL=useMeterBarChartThresholds.d.ts.map

package/charts/meter-bar/single-meter-bar/hooks/useMeterBarChartThresholds.js

@@ -20,17 +20,15 @@ __export(useMeterBarChartThresholds_exports, {
   useMeterBarChartThresholds: () => useMeterBarChartThresholds
 });
 module.exports = __toCommonJS(useMeterBarChartThresholds_exports);
-var import_MeterBarLayoutSizeContext = require("../../shared/context/MeterBarLayoutSizeContext.js");
 var import_MeterBarChartInternalConfigContext = require("../context/MeterBarChartInternalConfigContext.js");
 var import_build_thresholds = require("../utils/build-thresholds.js");
-const useMeterBarChartThresholds = (displayValue) => {
+const useMeterBarChartThresholds = (displayValue, fallbackColor) => {
   const { min, max, thresholds, thresholdsIndicators } = (0, import_MeterBarChartInternalConfigContext.useMeterBarChartInternalConfig)();
-  const { segmentWidth } = (0, import_MeterBarLayoutSizeContext.useMeterBarLayoutSize)();
   return (0, import_build_thresholds.buildThresholds)(
     displayValue,
     min,
     max,
-    segmentWidth,
+    fallbackColor,
     thresholds ?? thresholdsIndicators
   );
 };

package/charts/meter-bar/single-meter-bar/providers/MeterBarChartInternalDataProviders.js

@@ -35,13 +35,17 @@ const MeterBarChartInternalDataProviders = ({
   children
 }) => {
   const matchingColorRule = (0, import_useMeterBarColorRule.useMeterBarColorRule)(value, valueAccessor);
-  const { thresholdIndicators, matchingThreshold, legendItems } = (0, import_useMeterBarChartThresholds.useMeterBarChartThresholds)(displayValue);
+  const fallbackColor = color ?? import_default.SEGMENT_COLOR_DEFAULT;
+  const { thresholdIntervals, legendItems, matchingThreshold } = (0, import_useMeterBarChartThresholds.useMeterBarChartThresholds)(displayValue, fallbackColor);
   const meterBarChartData = {
-    color: matchingColorRule?.Default ?? matchingThreshold?.color ?? color ?? import_default.SEGMENT_COLOR_DEFAULT,
+    // The meter bar fills with the color rule, then the matching threshold's
+    // color, then the chart color. The threshold interval bars below the bar
+    // are rendered separately (APPDEV-17783).
+    color: matchingColorRule?.Default ?? matchingThreshold?.color ?? fallbackColor,
     value,
     name,
     valueAccessor,
-    thresholdIndicators,
+    thresholdIntervals,
     legendItems
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartDataContext.MeterBarChartDataContext.Provider, { value: meterBarChartData, children });

package/charts/meter-bar/single-meter-bar/providers/MeterBarChartProviders.js

@@ -48,7 +48,8 @@ const MeterBarChartProviders = ({
       tooltip: config.tooltip,
       label: config.labelSlot,
       thresholds: config.thresholds,
-      thresholdsIndicators: config.thresholdsIndicators
+      thresholdsIndicators: config.thresholdsIndicators,
+      showThresholdIndicators: config.showThresholdIndicators
     }),
     [config]
   );

package/charts/meter-bar/single-meter-bar/types/default.d.ts

@@ -1,11 +1,12 @@
 import type { ThresholdMetadata } from './meter-bar-chart-internal.js';
 export declare const NAME_DEFAULT_VALUE = "value";
 export declare const SEGMENT_COLOR_DEFAULT: string;
-export declare const THRESHOLD_COLOR_DEFAULT: string;
 export declare const THRESHOLD_METADATA_DEFAULT: ThresholdMetadata;
+export declare const SHOW_THRESHOLD_INDICATORS_DEFAULT = true;
 export declare const defaultConfig: {
     loading: boolean;
     thresholdIndicators: ThresholdMetadata;
+    showThresholdIndicators: boolean;
     size: import("../../../index.js").MeterBarSize;
     min: number;
     max: number;

package/charts/meter-bar/single-meter-bar/types/default.js

@@ -29,7 +29,7 @@ var default_exports = {};
 __export(default_exports, {
   NAME_DEFAULT_VALUE: () => NAME_DEFAULT_VALUE,
   SEGMENT_COLOR_DEFAULT: () => SEGMENT_COLOR_DEFAULT,
-  THRESHOLD_COLOR_DEFAULT: () => THRESHOLD_COLOR_DEFAULT,
+  SHOW_THRESHOLD_INDICATORS_DEFAULT: () => SHOW_THRESHOLD_INDICATORS_DEFAULT,
   THRESHOLD_METADATA_DEFAULT: () => THRESHOLD_METADATA_DEFAULT,
   defaultConfig: () => defaultConfig
 });
@@ -38,14 +38,15 @@ var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_constants = require("../../shared/constants.js");
 const NAME_DEFAULT_VALUE = "value";
 const SEGMENT_COLOR_DEFAULT = import_colors.default.Charts.Categorical.Color11.Default;
-const THRESHOLD_COLOR_DEFAULT = SEGMENT_COLOR_DEFAULT;
 const THRESHOLD_METADATA_DEFAULT = {
   data: [],
   legend: false
 };
+const SHOW_THRESHOLD_INDICATORS_DEFAULT = true;
 const defaultConfig = {
   loading: false,
   thresholdIndicators: THRESHOLD_METADATA_DEFAULT,
+  showThresholdIndicators: SHOW_THRESHOLD_INDICATORS_DEFAULT,
   size: import_constants.SIZE_DEFAULT,
   min: import_constants.MIN_DEFAULT_VALUE,
   max: import_constants.MAX_DEFAULT_VALUE,

package/charts/meter-bar/single-meter-bar/types/meter-bar-chart-internal.d.ts

@@ -6,17 +6,28 @@ import type { ColorRuleProps } from '../../../core/types/color-rule.js';
 import type { Formatter } from '../../../core/types/formatter.js';
 import type { MeterBarToolbarInternalProps } from '../../shared/types/meter-bar-toolbar.js';
 import type { MeterBarSize, SlotWithAutoDefault } from '../../shared/types/meter-bars.js';
-export type MeterBarChartThresholdIndicatorPropsInternal = Required<Omit<MeterBarChartThresholdIndicatorProps, 'name'>> & Pick<MeterBarChartThresholdIndicatorProps, 'name'>;
+export type MeterBarChartThresholdIndicatorPropsInternal = Required<Omit<MeterBarChartThresholdIndicatorProps, 'name' | 'color' | 'showIndicator'>> & Pick<MeterBarChartThresholdIndicatorProps, 'name' | 'color' | 'showIndicator'>;
 export interface ThresholdMetadata {
     data: MeterBarChartThresholdIndicatorPropsInternal[];
     legend?: boolean;
 }
+/**
+ * A colored interval rendered below the meter bar, expressed in value space.
+ */
+export interface ThresholdIntervalRange {
+    /** Interval start in value space. */
+    start: number;
+    /** Interval end in value space. */
+    end: number;
+    /** Resolved fill color. */
+    color: string;
+}
 export interface MeterBarChartDataProviderData {
     value: number | MeterBarChartData;
     valueAccessor: string;
     color: string;
     name?: string;
-    thresholdIndicators?: number[];
+    thresholdIntervals: ThresholdIntervalRange[];
     legendItems: LegendItem[];
 }
 export interface TooltipConfigData {
@@ -27,6 +38,7 @@ export interface TooltipConfigData {
 export interface MeterBarChartInternalConfig {
     thresholds: ThresholdMetadata;
     thresholdsIndicators: ThresholdMetadata;
+    showThresholdIndicators: boolean;
     size: MeterBarSize;
     min: number;
     max: number;

package/charts/meter-bar/single-meter-bar/types/meter-bar-chart.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
+import type { AriaLabelingProps } from '../../../../core/types/a11y-props.js';
 import type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';
 import type { DataTestId } from '../../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../../core/types/masking-props.js';
@@ -26,7 +27,7 @@ export interface MeterBarChartData {
 /**
  * @public
  */
-export interface MeterBarChartBaseProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
+export interface MeterBarChartBaseProps extends StylingProps, MaskingProps, DataTestId, AriaLabelingProps, BehaviorTrackingProps {
     /**
      * The chart width. A valid CSS width is expected.
      * @defaultValue 100%
@@ -82,6 +83,12 @@ export interface MeterBarChartBaseProps extends StylingProps, MaskingProps, Data
     seriesActions?: (seriesData: MeterBarSegmentData) => SeriesActionsTemplate;
     /** Color rules to apply to the meter bar chart */
     colorRules?: ColorRuleProps[];
+    /**
+     * Set to `true` to show all threshold indicators and `false` to hide them
+     * all. Does not affect the threshold legend.
+     * @defaultValue true
+     */
+    showThresholdIndicators?: boolean;
 }
 /**
  * @public
@@ -176,8 +183,12 @@ export interface MeterBarChartThresholdIndicatorProps {
      */
     value: number;
     /**
-     * When set to true, it shows the indicator of the threshold.
-     * @defaultValue false
+     * When set to `true`, the threshold indicator is shown.
+     * @deprecated Use the chart-level `showThresholdIndicators` prop to toggle all
+     * threshold indicators at once. As a temporary fallback, when
+     * `showThresholdIndicators` is not set these per-threshold flags are collapsed
+     * into the global one (all `true` shows them, all `false` hides them; mixed
+     * values log a warning). This prop will be removed.
      */
     showIndicator?: boolean;
 }

package/charts/meter-bar/single-meter-bar/utils/apply-threshold-defaults.js

@@ -20,14 +20,15 @@ __export(apply_threshold_defaults_exports, {
   applyThresholdDefaults: () => applyThresholdDefaults
 });
 module.exports = __toCommonJS(apply_threshold_defaults_exports);
-var import_lodash_es = require("lodash");
-var import_default = require("../types/default.js");
 const applyThresholdDefaults = (threshold) => {
-  const showIndicatorDefault = (0, import_lodash_es.isUndefined)(threshold.color) ? true : false;
   return {
     value: threshold.value,
     name: threshold.name,
-    color: threshold.color ?? import_default.THRESHOLD_COLOR_DEFAULT,
-    showIndicator: threshold.showIndicator ?? showIndicatorDefault
+    color: threshold.color,
+    // The deprecated per-threshold `showIndicator` is preserved as-is (an unset
+    // flag stays `undefined`) so the chart-level `showThresholdIndicators`
+    // fallback can distinguish "not specified" from an explicit `false`.
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    showIndicator: threshold.showIndicator
   };
 };

package/charts/meter-bar/single-meter-bar/utils/build-meter-bar-chart-config.js

@@ -21,6 +21,7 @@ __export(build_meter_bar_chart_config_exports, {
 });
 module.exports = __toCommonJS(build_meter_bar_chart_config_exports);
 var import_apply_threshold_defaults = require("./apply-threshold-defaults.js");
+var import_resolve_show_threshold_indicators = require("./resolve-show-threshold-indicators.js");
 var import_ColorRule = require("../../../core/slots/ColorRule.js");
 var import_constants = require("../../shared/constants.js");
 var import_meter_bar_toolbar = require("../../shared/types/meter-bar-toolbar.js");
@@ -52,9 +53,11 @@ const buildMeterBarChartConfig = (props, consumerConfig, slots) => {
   const toolbar = getToolbarConfig(slots.toolbar, consumerConfig.toolbar);
   const colorRules = (consumerConfig.colorRules ?? []).filter(import_ColorRule.isValidColorRule).concat(slots.colorRules ?? []);
   const loading = props.loading ?? consumerConfig.loading ?? import_default.defaultConfig.loading;
+  const showThresholdIndicators = props.showThresholdIndicators ?? (0, import_resolve_show_threshold_indicators.resolveShowThresholdIndicators)(thresholds.data) ?? import_default.defaultConfig.showThresholdIndicators;
   return {
     thresholds,
     thresholdsIndicators: thresholds,
+    showThresholdIndicators,
     size,
     loading,
     min,

package/charts/meter-bar/single-meter-bar/utils/build-threshold-intervals.d.ts

@@ -0,0 +1,12 @@
+import type { MeterBarChartThresholdIndicatorPropsInternal, ThresholdIntervalRange } from '../types/meter-bar-chart-internal.js';
+/**
+ * Builds the colored interval ranges rendered below the meter bar. Each
+ * threshold owns the range from its value up to the next threshold (the last
+ * extends to `max`); the region below the first threshold uses `fallbackColor`.
+ * @param thresholds - Configured thresholds (sorted or unsorted).
+ * @param min - Scale minimum.
+ * @param max - Scale maximum.
+ * @param fallbackColor - Color for the uncovered region and for thresholds with no color.
+ */
+export declare const buildThresholdIntervals: (thresholds: MeterBarChartThresholdIndicatorPropsInternal[], min: number, max: number, fallbackColor: string) => ThresholdIntervalRange[];
+//# sourceMappingURL=build-threshold-intervals.d.ts.map

package/charts/meter-bar/single-meter-bar/utils/build-threshold-intervals.js

@@ -0,0 +1,47 @@
+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 build_threshold_intervals_exports = {};
+__export(build_threshold_intervals_exports, {
+  buildThresholdIntervals: () => buildThresholdIntervals
+});
+module.exports = __toCommonJS(build_threshold_intervals_exports);
+const buildThresholdIntervals = (thresholds, min, max, fallbackColor) => {
+  if (thresholds.length === 0) {
+    return [];
+  }
+  const sorted = [...thresholds].sort((a, b) => a.value - b.value);
+  const intervals = [];
+  const firstStart = clamp(sorted[0].value, min, max);
+  if (firstStart > min) {
+    intervals.push({ start: min, end: firstStart, color: fallbackColor });
+  }
+  for (let index = 0; index < sorted.length; index++) {
+    const start = clamp(sorted[index].value, min, max);
+    const end = clamp(sorted[index + 1]?.value ?? max, min, max);
+    if (end <= start) {
+      continue;
+    }
+    intervals.push({
+      start,
+      end,
+      color: sorted[index].color ?? fallbackColor
+    });
+  }
+  return intervals;
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);