@dynatrace/strato-components 3.10.1 → 3.11.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlayWithTooltip.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport type { PropsWithChildren } from 'react';\n\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { interactionsOverlay } from '../../../../core/components/interactions-overlay/InteractionsOverlay.sty.js';\nimport { useOverlay } from '../../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltipData } from '../../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../../core/components/overlay-tooltip/types.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { isTooltipDataEmpty } from '../../../../core/components/overlay-tooltip/utils.js';\nimport { useSeriesActions } from '../../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../../../core/constants.js';\nimport { MeterBarChartTooltip } from '../../../shared/components/meter-bar-tooltip/MeterBarChartTooltip.js';\nimport { useFormatter } from '../../../shared/context/FormatterContext.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSizeContext.js';\nimport { elementSize } from '../../../shared/styles/element-size.sty.js';\nimport { container } from '../../../shared/styles.sty.js';\nimport { getNumericValue } from '../../../shared/utils/get-numeric-value.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\nimport { useMeterBarChartInternalConfig } from '../../context/MeterBarChartInternalConfigContext.js';\nimport type {\n  MeterBarChartInternalConfig,\n  TooltipConfigData,\n} from '../../types/meter-bar-chart-internal.js';\n\ntype CustomTooltipProps = {\n  template: NonNullable<TooltipConfigData['template']>;\n  displayValue: number;\n  min: number;\n  max: number;\n  color: string;\n  name: string;\n  thresholds: MeterBarChartInternalConfig['thresholds'] | undefined;\n};\n\nconst MeterBarCustomTooltip = ({\n  template,\n  displayValue,\n  min,\n  max,\n  color,\n  name,\n  thresholds,\n}: CustomTooltipProps) => {\n  const activeThreshold = thresholds?.data\n    ?.slice()\n    .sort((a, b) => b.value - a.value)\n    .find((t) => displayValue >= t.value);\n  return (\n    <OverlayTooltip\n      template={template({\n        value: displayValue,\n        min,\n        max,\n        color,\n        name,\n        threshold: activeThreshold\n          ? { label: activeThreshold.name, color: activeThreshold.color }\n          : undefined,\n      })}\n    />\n  );\n};\n\nexport const MeterBarChartOverlayWithTooltip = (props: PropsWithChildren) => {\n  const { size } = useMeterBarLayoutSize();\n  const { color, name, value, valueAccessor } = useMeterBarChartData();\n  const {\n    tooltip: tooltipConfig,\n    min,\n    max,\n    thresholds,\n  } = useMeterBarChartInternalConfig();\n  const { formatter, unit } = useFormatter();\n  const { chartSeriesActions } = useSeriesActions();\n  const overlay = useOverlay();\n  const { hover, togglePin, outOfBounds } = useTooltipActions();\n  const { data: tooltipData } = useTooltipData();\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n  const item = {\n    name: tooltipConfig?.name ?? name ?? '',\n    value: formatter(displayValue, unit),\n  };\n  const data: Data = {\n    geometry: 'meterbar' as const,\n    series: [\n      {\n        name: item.name,\n        value: item.value,\n        color,\n      },\n    ],\n  };\n\n  const tooltipContent =\n    tooltipConfig?.template && !isTooltipDataEmpty(tooltipData) ? (\n      <MeterBarCustomTooltip\n        template={tooltipConfig.template}\n        displayValue={displayValue}\n        min={min}\n        max={max}\n        color={color}\n        name={tooltipConfig.name ?? item.name}\n        thresholds={thresholds}\n      />\n    ) : (\n      <MeterBarChartTooltip\n        actionsForItem={\n          chartSeriesActions\n            ? () => () =>\n                chartSeriesActions({\n                  id: `${name}-${displayValue}`,\n                  name: item.name,\n                  values: [item.value],\n                })\n            : undefined\n        }\n      />\n    );\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      className={clsx(container, elementSize({ size }), interactionsOverlay)}\n      data-testid=\"overlay-wrapper\"\n      onPointerMove={(event) => hover(event, data)}\n      onPointerLeave={outOfBounds}\n      onClick={(event) => togglePin(event, data)}\n    >\n      {tooltipContent}\n      {props.children}\n    </Flex>\n  );\n};\n\nMeterBarChartOverlayWithTooltip['displayName'] =\n  'MeterBarChartOverlayWithTooltip';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport type { PropsWithChildren } from 'react';\n\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { interactionsOverlay } from '../../../../core/components/interactions-overlay/InteractionsOverlay.sty.js';\nimport { useOverlay } from '../../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltipData } from '../../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../../core/components/overlay-tooltip/types.js';\nimport { useTooltipActions } from '../../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { isTooltipDataEmpty } from '../../../../core/components/overlay-tooltip/utils.js';\nimport { useSeriesActions } from '../../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../../../core/constants.js';\nimport { MeterBarChartTooltip } from '../../../shared/components/meter-bar-tooltip/MeterBarChartTooltip.js';\nimport { useFormatter } from '../../../shared/context/FormatterContext.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSizeContext.js';\nimport { elementSize } from '../../../shared/styles/element-size.sty.js';\nimport { container } from '../../../shared/styles.sty.js';\nimport { getNumericValue } from '../../../shared/utils/get-numeric-value.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\nimport { useMeterBarChartInternalConfig } from '../../context/MeterBarChartInternalConfigContext.js';\nimport type {\n  MeterBarChartInternalConfig,\n  TooltipConfigData,\n} from '../../types/meter-bar-chart-internal.js';\n\ntype CustomTooltipProps = {\n  template: NonNullable<TooltipConfigData['template']>;\n  displayValue: number;\n  min: number;\n  max: number;\n  color: string;\n  name: string;\n  thresholds: MeterBarChartInternalConfig['thresholds'] | undefined;\n};\n\nconst MeterBarCustomTooltip = ({\n  template,\n  displayValue,\n  min,\n  max,\n  color,\n  name,\n  thresholds,\n}: CustomTooltipProps) => {\n  const activeThreshold = thresholds?.data\n    ?.slice()\n    .sort((a, b) => b.value - a.value)\n    .find((t) => displayValue >= t.value);\n  return (\n    <OverlayTooltip\n      template={template({\n        value: displayValue,\n        min,\n        max,\n        color,\n        name,\n        threshold: activeThreshold\n          ? {\n              label: activeThreshold.name,\n              color: activeThreshold.color ?? color,\n            }\n          : undefined,\n      })}\n    />\n  );\n};\n\nexport const MeterBarChartOverlayWithTooltip = (props: PropsWithChildren) => {\n  const { size } = useMeterBarLayoutSize();\n  const { color, name, value, valueAccessor } = useMeterBarChartData();\n  const {\n    tooltip: tooltipConfig,\n    min,\n    max,\n    thresholds,\n  } = useMeterBarChartInternalConfig();\n  const { formatter, unit } = useFormatter();\n  const { chartSeriesActions } = useSeriesActions();\n  const overlay = useOverlay();\n  const { hover, togglePin, outOfBounds } = useTooltipActions();\n  const { data: tooltipData } = useTooltipData();\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n  const item = {\n    name: tooltipConfig?.name ?? name ?? '',\n    value: formatter(displayValue, unit),\n  };\n  const data: Data = {\n    geometry: 'meterbar' as const,\n    series: [\n      {\n        name: item.name,\n        value: item.value,\n        color,\n      },\n    ],\n  };\n\n  const tooltipContent =\n    tooltipConfig?.template && !isTooltipDataEmpty(tooltipData) ? (\n      <MeterBarCustomTooltip\n        template={tooltipConfig.template}\n        displayValue={displayValue}\n        min={min}\n        max={max}\n        color={color}\n        name={tooltipConfig.name ?? item.name}\n        thresholds={thresholds}\n      />\n    ) : (\n      <MeterBarChartTooltip\n        actionsForItem={\n          chartSeriesActions\n            ? () => () =>\n                chartSeriesActions({\n                  id: `${name}-${displayValue}`,\n                  name: item.name,\n                  values: [item.value],\n                })\n            : undefined\n        }\n      />\n    );\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      className={clsx(container, elementSize({ size }), interactionsOverlay)}\n      data-testid=\"overlay-wrapper\"\n      onPointerMove={(event) => hover(event, data)}\n      onPointerLeave={outOfBounds}\n      onClick={(event) => togglePin(event, data)}\n    >\n      {tooltipContent}\n      {props.children}\n    </Flex>\n  );\n};\n\nMeterBarChartOverlayWithTooltip['displayName'] =\n  'MeterBarChartOverlayWithTooltip';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,23 +1,9 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { MeterBarPlot } from "../../shared/components/meter-bar-plot/MeterBarPlot.js";
-import { useMeterBarChartData } from "../context/MeterBarChartDataContext.js";
+import { jsx } from "react/jsx-runtime";
 import { MeterBarChartOverlay } from "./MeterBarChartOverlay/MeterBarChartOverlay.js";
 import { MeterBarChartSegment } from "./MeterBarChartSegment/MeterBarChartSegment.js";
-import { MeterBarChartThresholds } from "./MeterBarChartThresholds/MeterBarChartThresholds.js";
-import { useMeterBarLayoutSize } from "../../shared/context/MeterBarLayoutSizeContext.js";
+import { MeterBarPlot } from "../../shared/components/meter-bar-plot/MeterBarPlot.js";
 const MeterBarChartPlotArea = () => {
-  const { thresholdIndicators } = useMeterBarChartData();
-  const { segmentHeight } = useMeterBarLayoutSize();
-  return /* @__PURE__ */ jsxs(MeterBarChartOverlay, { children: [
-    /* @__PURE__ */ jsx(MeterBarPlot, { children: /* @__PURE__ */ jsx(MeterBarChartSegment, {}) }),
-    thresholdIndicators && /* @__PURE__ */ jsx(
-      MeterBarChartThresholds,
-      {
-        thresholdIndicators,
-        segmentHeight
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(MeterBarChartOverlay, { children: /* @__PURE__ */ jsx(MeterBarPlot, { children: /* @__PURE__ */ jsx(MeterBarChartSegment, {}) }) });
 };
 MeterBarChartPlotArea.displayName = "MeterBarChartPlotArea";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartPlotArea.tsx"],
-  "sourcesContent": ["import { MeterBarPlot } from '../../shared/components/meter-bar-plot/MeterBarPlot.js';\nimport { useMeterBarChartData } from '../context/MeterBarChartDataContext.js';\nimport { MeterBarChartOverlay } from './MeterBarChartOverlay/MeterBarChartOverlay.js';\nimport { MeterBarChartSegment } from './MeterBarChartSegment/MeterBarChartSegment.js';\nimport { MeterBarChartThresholds } from './MeterBarChartThresholds/MeterBarChartThresholds.js';\nimport { useMeterBarLayoutSize } from '../../shared/context/MeterBarLayoutSizeContext.js';\n\nexport const MeterBarChartPlotArea = () => {\n  const { thresholdIndicators } = useMeterBarChartData();\n  const { segmentHeight } = useMeterBarLayoutSize();\n\n  return (\n    <MeterBarChartOverlay>\n      <MeterBarPlot>\n        <MeterBarChartSegment />\n      </MeterBarPlot>\n      {thresholdIndicators && (\n        <MeterBarChartThresholds\n          thresholdIndicators={thresholdIndicators}\n          segmentHeight={segmentHeight}\n        />\n      )}\n    </MeterBarChartOverlay>\n  );\n};\n\n(\n  MeterBarChartPlotArea as typeof MeterBarChartPlotArea & {\n    displayName: string;\n  }\n).displayName = 'MeterBarChartPlotArea';\n"],
-  "mappings": "AAYI,SAEI,KAFJ;AAZJ,SAAS,oBAAoB;AAC7B,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,+BAA+B;AACxC,SAAS,6BAA6B;AAE/B,MAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,oBAAoB,IAAI,qBAAqB;AACrD,QAAM,EAAE,cAAc,IAAI,sBAAsB;AAEhD,SACE,qBAAC,wBACC;AAAA,wBAAC,gBACC,8BAAC,wBAAqB,GACxB;AAAA,IACC,uBACC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;AAGE,sBAGA,cAAc;",
+  "sourcesContent": ["import { MeterBarChartOverlay } from './MeterBarChartOverlay/MeterBarChartOverlay.js';\nimport { MeterBarChartSegment } from './MeterBarChartSegment/MeterBarChartSegment.js';\nimport { MeterBarPlot } from '../../shared/components/meter-bar-plot/MeterBarPlot.js';\n\nexport const MeterBarChartPlotArea = () => {\n  return (\n    <MeterBarChartOverlay>\n      <MeterBarPlot>\n        <MeterBarChartSegment />\n      </MeterBarPlot>\n    </MeterBarChartOverlay>\n  );\n};\n\n(\n  MeterBarChartPlotArea as typeof MeterBarChartPlotArea & {\n    displayName: string;\n  }\n).displayName = 'MeterBarChartPlotArea';\n"],
+  "mappings": "AAQQ;AARR,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAEtB,MAAM,wBAAwB,MAAM;AACzC,SACE,oBAAC,wBACC,8BAAC,gBACC,8BAAC,wBAAqB,GACxB,GACF;AAEJ;AAGE,sBAGA,cAAc;",
   "names": []
 }

package/esm/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/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.js

@@ -0,0 +1,71 @@
+import { jsx } from "react/jsx-runtime";
+import { scaleLinear } from "d3-scale";
+import { thresholdIntervals as thresholdIntervalsClass } from "./MeterBarChartThresholdIntervals.sty.js";
+import { getTokenComputedStyle } from "../../../../core/utils/getTokenComputedStyle.js";
+import { getValidColor } from "../../../../core/utils/getValidColor.js";
+import {
+  LARGE_CHART_SIZE,
+  MEDIUM_CHART_SIZE,
+  METER_BAR_SIZE,
+  SMALL_CHART_SIZE
+} from "../../../shared/constants.js";
+import { useMeterBarLayoutSize } from "../../../shared/context/MeterBarLayoutSizeContext.js";
+import {
+  METER_BAR_CHART_THRESHOLDS_ARIA_LABEL,
+  THRESHOLD_INTERVAL_MIN_LENGTH
+} from "../../constants.js";
+import { useMeterBarChartData } from "../../context/MeterBarChartDataContext.js";
+import { useMeterBarChartInternalConfig } from "../../context/MeterBarChartInternalConfigContext.js";
+import { getThresholdIntervalSizing } from "../../utils/get-threshold-interval-sizing.js";
+const BAR_THICKNESS_BY_SIZE = {
+  size8: SMALL_CHART_SIZE,
+  size16: MEDIUM_CHART_SIZE,
+  size24: LARGE_CHART_SIZE,
+  auto: 0
+};
+const MeterBarChartThresholdIntervals = () => {
+  const { thresholdIntervals } = useMeterBarChartData();
+  const { min, max, showThresholdIndicators } = useMeterBarChartInternalConfig();
+  const { segmentWidth, size, segmentHeight } = useMeterBarLayoutSize();
+  if (!showThresholdIndicators || thresholdIntervals.length === 0 || segmentWidth <= 0) {
+    return null;
+  }
+  const barThickness = size === METER_BAR_SIZE.Auto ? segmentHeight : BAR_THICKNESS_BY_SIZE[size];
+  const { thickness, gap, offset } = getThresholdIntervalSizing(barThickness);
+  const scale = scaleLinear().domain([min, max]).range([0, segmentWidth]).clamp(true);
+  const lastIndex = thresholdIntervals.length - 1;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: thresholdIntervalsClass,
+      height: thickness,
+      style: { marginTop: offset },
+      role: "presentation",
+      "aria-label": 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, THRESHOLD_INTERVAL_MIN_LENGTH);
+        return /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: start,
+            y: 0,
+            width,
+            height: thickness,
+            rx: thickness / 2,
+            fill: getTokenComputedStyle(getValidColor(interval.color)),
+            "data-testid": "meterbar-threshold-interval"
+          },
+          `interval-${interval.start}-${interval.end}`
+        );
+      })
+    }
+  );
+};
+MeterBarChartThresholdIntervals["displayName"] = "MeterBarChartThresholdIntervals";
+export {
+  MeterBarChartThresholdIntervals
+};
+//# sourceMappingURL=MeterBarChartThresholdIntervals.js.map

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.tsx"],
+  "sourcesContent": ["import { scaleLinear } from 'd3-scale';\n\nimport { thresholdIntervals as thresholdIntervalsClass } from './MeterBarChartThresholdIntervals.sty.js';\nimport { getTokenComputedStyle } from '../../../../core/utils/getTokenComputedStyle.js';\nimport { getValidColor } from '../../../../core/utils/getValidColor.js';\nimport {\n  LARGE_CHART_SIZE,\n  MEDIUM_CHART_SIZE,\n  METER_BAR_SIZE,\n  SMALL_CHART_SIZE,\n} from '../../../shared/constants.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSizeContext.js';\nimport type { MeterBarSize } from '../../../shared/types/meter-bars.js';\nimport {\n  METER_BAR_CHART_THRESHOLDS_ARIA_LABEL,\n  THRESHOLD_INTERVAL_MIN_LENGTH,\n} from '../../constants.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\nimport { useMeterBarChartInternalConfig } from '../../context/MeterBarChartInternalConfigContext.js';\nimport { getThresholdIntervalSizing } from '../../utils/get-threshold-interval-sizing.js';\n\nconst BAR_THICKNESS_BY_SIZE: Record<MeterBarSize, number> = {\n  size8: SMALL_CHART_SIZE,\n  size16: MEDIUM_CHART_SIZE,\n  size24: LARGE_CHART_SIZE,\n  auto: 0,\n};\n\n/**\n * Renders the threshold intervals as colored bar segments below the meter bar.\n * Segment sizing (thickness, gaps, offset) scales with the meter bar thickness.\n */\nexport const MeterBarChartThresholdIntervals = () => {\n  const { thresholdIntervals } = useMeterBarChartData();\n  const { min, max, showThresholdIndicators } =\n    useMeterBarChartInternalConfig();\n  const { segmentWidth, size, segmentHeight } = useMeterBarLayoutSize();\n\n  if (\n    !showThresholdIndicators ||\n    thresholdIntervals.length === 0 ||\n    segmentWidth <= 0\n  ) {\n    return null;\n  }\n\n  const barThickness =\n    size === METER_BAR_SIZE.Auto ? segmentHeight : BAR_THICKNESS_BY_SIZE[size];\n  const { thickness, gap, offset } = getThresholdIntervalSizing(barThickness);\n\n  const scale = scaleLinear()\n    .domain([min, max])\n    .range([0, segmentWidth])\n    .clamp(true);\n\n  const lastIndex = thresholdIntervals.length - 1;\n\n  return (\n    <svg\n      className={thresholdIntervalsClass}\n      height={thickness}\n      style={{ marginTop: offset }}\n      role=\"presentation\"\n      aria-label={METER_BAR_CHART_THRESHOLDS_ARIA_LABEL}\n    >\n      {thresholdIntervals.map((interval, index) => {\n        const start = scale(interval.start);\n        const end = scale(interval.end);\n        // Reserve a gap on the right of every segment except the last so the\n        // intervals stay separated while the row edges remain flush.\n        const availableWidth = end - start - (index < lastIndex ? gap : 0);\n        const width = Math.max(availableWidth, THRESHOLD_INTERVAL_MIN_LENGTH);\n\n        return (\n          <rect\n            key={`interval-${interval.start}-${interval.end}`}\n            x={start}\n            y={0}\n            width={width}\n            height={thickness}\n            rx={thickness / 2}\n            fill={getTokenComputedStyle(getValidColor(interval.color))}\n            data-testid=\"meterbar-threshold-interval\"\n          />\n        );\n      })}\n    </svg>\n  );\n};\n\nMeterBarChartThresholdIntervals['displayName'] =\n  'MeterBarChartThresholdIntervals';\n"],
+  "mappings": "AA0EU;AA1EV,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB,+BAA+B;AAC9D,SAAS,6BAA6B;AACtC,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AAEtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,sCAAsC;AAC/C,SAAS,kCAAkC;AAE3C,MAAM,wBAAsD;AAAA,EAC1D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACR;AAMO,MAAM,kCAAkC,MAAM;AACnD,QAAM,EAAE,mBAAmB,IAAI,qBAAqB;AACpD,QAAM,EAAE,KAAK,KAAK,wBAAwB,IACxC,+BAA+B;AACjC,QAAM,EAAE,cAAc,MAAM,cAAc,IAAI,sBAAsB;AAEpE,MACE,CAAC,2BACD,mBAAmB,WAAW,KAC9B,gBAAgB,GAChB;AACA,WAAO;AAAA,EACT;AAEA,QAAM,eACJ,SAAS,eAAe,OAAO,gBAAgB,sBAAsB,IAAI;AAC3E,QAAM,EAAE,WAAW,KAAK,OAAO,IAAI,2BAA2B,YAAY;AAE1E,QAAM,QAAQ,YAAY,EACvB,OAAO,CAAC,KAAK,GAAG,CAAC,EACjB,MAAM,CAAC,GAAG,YAAY,CAAC,EACvB,MAAM,IAAI;AAEb,QAAM,YAAY,mBAAmB,SAAS;AAE9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,OAAO,EAAE,WAAW,OAAO;AAAA,MAC3B,MAAK;AAAA,MACL,cAAY;AAAA,MAEX,6BAAmB,IAAI,CAAC,UAAU,UAAU;AAC3C,cAAM,QAAQ,MAAM,SAAS,KAAK;AAClC,cAAM,MAAM,MAAM,SAAS,GAAG;AAG9B,cAAM,iBAAiB,MAAM,SAAS,QAAQ,YAAY,MAAM;AAChE,cAAM,QAAQ,KAAK,IAAI,gBAAgB,6BAA6B;AAEpE,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,GAAG;AAAA,YACH,GAAG;AAAA,YACH;AAAA,YACA,QAAQ;AAAA,YACR,IAAI,YAAY;AAAA,YAChB,MAAM,sBAAsB,cAAc,SAAS,KAAK,CAAC;AAAA,YACzD,eAAY;AAAA;AAAA,UAPP,YAAY,SAAS,KAAK,IAAI,SAAS,GAAG;AAAA,QAQjD;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,gCAAgC,aAAa,IAC3C;",
+  "names": []
+}

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

@@ -0,0 +1,6 @@
+import "./MeterBarChartThresholdIntervals.css";
+var thresholdIntervals = "_n2jd1m0-3-11-0";
+export {
+  thresholdIntervals
+};
+//# sourceMappingURL=MeterBarChartThresholdIntervals.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdIntervals/MeterBarChartThresholdIntervals.css.ts"],
+  "sourcesContent": ["import './MeterBarChartThresholdIntervals.css';\nexport var thresholdIntervals = '_n2jd1m0-3-11-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
+  "names": []
+}

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

@@ -1,9 +1,25 @@
-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;
 export {
   METER_BAR_CHART_ARIA_LABEL,
   METER_BAR_CHART_PLOT_ARIA_LABEL,
-  THRESHOLD_ADDITIONAL_HEIGHT
+  METER_BAR_CHART_THRESHOLDS_ARIA_LABEL,
+  THRESHOLD_INTERVAL_MAX_GAP,
+  THRESHOLD_INTERVAL_MAX_OFFSET,
+  THRESHOLD_INTERVAL_MAX_THICKNESS,
+  THRESHOLD_INTERVAL_MID_OFFSET,
+  THRESHOLD_INTERVAL_MIN_GAP,
+  THRESHOLD_INTERVAL_MIN_LENGTH,
+  THRESHOLD_INTERVAL_MIN_OFFSET,
+  THRESHOLD_INTERVAL_MIN_THICKNESS
 };
 //# sourceMappingURL=constants.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/meter-bar/single-meter-bar/constants.ts"],
-  "sourcesContent": ["export const THRESHOLD_ADDITIONAL_HEIGHT = 8;\n\nexport const METER_BAR_CHART_ARIA_LABEL = 'Meter Bar Chart';\nexport const METER_BAR_CHART_PLOT_ARIA_LABEL = 'Chart Plot Area';\n"],
-  "mappings": "AAAO,MAAM,8BAA8B;AAEpC,MAAM,6BAA6B;AACnC,MAAM,kCAAkC;",
+  "sourcesContent": ["export const METER_BAR_CHART_ARIA_LABEL = 'Meter Bar Chart';\nexport const METER_BAR_CHART_PLOT_ARIA_LABEL = 'Chart Plot Area';\nexport const METER_BAR_CHART_THRESHOLDS_ARIA_LABEL = 'Threshold Intervals';\n\n/**\n * Threshold interval bar sizing, in pixels. The interval bars, their gaps, and\n * their offset from the meter bar all scale with the meter bar thickness so the\n * visual density stays balanced as the chart is resized (APPDEV-17783).\n */\nexport const THRESHOLD_INTERVAL_MIN_THICKNESS = 2;\nexport const THRESHOLD_INTERVAL_MAX_THICKNESS = 4;\nexport const THRESHOLD_INTERVAL_MIN_GAP = 2;\nexport const THRESHOLD_INTERVAL_MAX_GAP = 4;\nexport const THRESHOLD_INTERVAL_MIN_OFFSET = 2;\nexport const THRESHOLD_INTERVAL_MID_OFFSET = 4;\nexport const THRESHOLD_INTERVAL_MAX_OFFSET = 4;\n\n/** Any threshold interval renders at least this wide so it stays visible. */\nexport const THRESHOLD_INTERVAL_MIN_LENGTH = 8;\n"],
+  "mappings": "AAAO,MAAM,6BAA6B;AACnC,MAAM,kCAAkC;AACxC,MAAM,wCAAwC;AAO9C,MAAM,mCAAmC;AACzC,MAAM,mCAAmC;AACzC,MAAM,6BAA6B;AACnC,MAAM,6BAA6B;AACnC,MAAM,gCAAgC;AACtC,MAAM,gCAAgC;AACtC,MAAM,gCAAgC;AAGtC,MAAM,gCAAgC;",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/context/MeterBarChartInternalConfigContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/context/MeterBarChartInternalConfigContext.ts"],
-  "sourcesContent": ["import { createContext, ReactNode, useContext } from 'react';\n\nimport {\n  ThresholdMetadata,\n  TooltipConfigData,\n} from '../types/meter-bar-chart-internal.js';\n\nexport interface MeterBarChartInternalConfigContextProps {\n  max: number;\n  min: number;\n  tooltip: TooltipConfigData;\n  label: ReactNode;\n  thresholds: ThresholdMetadata;\n  thresholdsIndicators: ThresholdMetadata;\n}\n\nexport const MeterBarChartInternalConfigContext =\n  createContext<MeterBarChartInternalConfigContextProps>(\n    {} as MeterBarChartInternalConfigContextProps,\n  );\n\nexport const useMeterBarChartInternalConfig = () =>\n  useContext(MeterBarChartInternalConfigContext);\n"],
-  "mappings": "AAAA,SAAS,eAA0B,kBAAkB;AAgB9C,MAAM,qCACX;AAAA,EACE,CAAC;AACH;AAEK,MAAM,iCAAiC,MAC5C,WAAW,kCAAkC;",
+  "sourcesContent": ["import { createContext, ReactNode, useContext } from 'react';\n\nimport {\n  ThresholdMetadata,\n  TooltipConfigData,\n} from '../types/meter-bar-chart-internal.js';\n\nexport interface MeterBarChartInternalConfigContextProps {\n  max: number;\n  min: number;\n  tooltip: TooltipConfigData;\n  label: ReactNode;\n  thresholds: ThresholdMetadata;\n  thresholdsIndicators: ThresholdMetadata;\n  showThresholdIndicators: boolean;\n}\n\nexport const MeterBarChartInternalConfigContext =\n  createContext<MeterBarChartInternalConfigContextProps>(\n    {} as MeterBarChartInternalConfigContextProps,\n  );\n\nexport const useMeterBarChartInternalConfig = () =>\n  useContext(MeterBarChartInternalConfigContext);\n"],
+  "mappings": "AAAA,SAAS,eAA0B,kBAAkB;AAiB9C,MAAM,qCACX;AAAA,EACE,CAAC;AACH;AAEK,MAAM,iCAAiC,MAC5C,WAAW,kCAAkC;",
   "names": []
 }

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

@@ -1,14 +1,12 @@
-import { useMeterBarLayoutSize } from "../../shared/context/MeterBarLayoutSizeContext.js";
 import { useMeterBarChartInternalConfig } from "../context/MeterBarChartInternalConfigContext.js";
 import { buildThresholds } from "../utils/build-thresholds.js";
-const useMeterBarChartThresholds = (displayValue) => {
+const useMeterBarChartThresholds = (displayValue, fallbackColor) => {
   const { min, max, thresholds, thresholdsIndicators } = useMeterBarChartInternalConfig();
-  const { segmentWidth } = useMeterBarLayoutSize();
   return buildThresholds(
     displayValue,
     min,
     max,
-    segmentWidth,
+    fallbackColor,
     thresholds ?? thresholdsIndicators
   );
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/hooks/useMeterBarChartThresholds.ts"],
-  "sourcesContent": ["import { useMeterBarLayoutSize } from '../../shared/context/MeterBarLayoutSizeContext.js';\nimport { useMeterBarChartInternalConfig } from '../context/MeterBarChartInternalConfigContext.js';\nimport { buildThresholds } from '../utils/build-thresholds.js';\n\nexport const useMeterBarChartThresholds = (displayValue: number) => {\n  const { min, max, thresholds, thresholdsIndicators } =\n    useMeterBarChartInternalConfig();\n  const { segmentWidth } = useMeterBarLayoutSize();\n\n  return buildThresholds(\n    displayValue,\n    min,\n    max,\n    segmentWidth,\n    thresholds ?? thresholdsIndicators,\n  );\n};\n"],
-  "mappings": "AAAA,SAAS,6BAA6B;AACtC,SAAS,sCAAsC;AAC/C,SAAS,uBAAuB;AAEzB,MAAM,6BAA6B,CAAC,iBAAyB;AAClE,QAAM,EAAE,KAAK,KAAK,YAAY,qBAAqB,IACjD,+BAA+B;AACjC,QAAM,EAAE,aAAa,IAAI,sBAAsB;AAE/C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB;AACF;",
+  "sourcesContent": ["import { useMeterBarChartInternalConfig } from '../context/MeterBarChartInternalConfigContext.js';\nimport { buildThresholds } from '../utils/build-thresholds.js';\n\nexport const useMeterBarChartThresholds = (\n  displayValue: number,\n  fallbackColor: string,\n) => {\n  const { min, max, thresholds, thresholdsIndicators } =\n    useMeterBarChartInternalConfig();\n\n  return buildThresholds(\n    displayValue,\n    min,\n    max,\n    fallbackColor,\n    thresholds ?? thresholdsIndicators,\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,sCAAsC;AAC/C,SAAS,uBAAuB;AAEzB,MAAM,6BAA6B,CACxC,cACA,kBACG;AACH,QAAM,EAAE,KAAK,KAAK,YAAY,qBAAqB,IACjD,+BAA+B;AAEjC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB;AACF;",
   "names": []
 }

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

@@ -13,13 +13,17 @@ const MeterBarChartInternalDataProviders = ({
   children
 }) => {
   const matchingColorRule = useMeterBarColorRule(value, valueAccessor);
-  const { thresholdIndicators, matchingThreshold, legendItems } = useMeterBarChartThresholds(displayValue);
+  const fallbackColor = color ?? SEGMENT_COLOR_DEFAULT;
+  const { thresholdIntervals, legendItems, matchingThreshold } = useMeterBarChartThresholds(displayValue, fallbackColor);
   const meterBarChartData = {
-    color: matchingColorRule?.Default ?? matchingThreshold?.color ?? color ?? 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__ */ jsx(MeterBarChartDataContext.Provider, { value: meterBarChartData, children });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/providers/MeterBarChartInternalDataProviders.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { DEFAULT_VALUE_ACCESSOR } from '../../../core/constants.js';\nimport { MeterBarChartDataContext } from '../context/MeterBarChartDataContext.js';\nimport { useMeterBarChartThresholds } from '../hooks/useMeterBarChartThresholds.js';\nimport { useMeterBarColorRule } from '../hooks/useMeterBarColorRule.js';\nimport { NAME_DEFAULT_VALUE, SEGMENT_COLOR_DEFAULT } from '../types/default.js';\nimport type { MeterBarChartDataProviderData } from '../types/meter-bar-chart-internal.js';\nimport type { MeterBarChartData } from '../types/meter-bar-chart.js';\n\ninterface MeterBarChartInternalDataProvidersProps {\n  value: number | MeterBarChartData;\n  displayValue: number;\n  valueAccessor?: string;\n  name?: string;\n  color?: string;\n}\n\nexport const MeterBarChartInternalDataProviders = ({\n  value,\n  displayValue,\n  valueAccessor = DEFAULT_VALUE_ACCESSOR,\n  name = NAME_DEFAULT_VALUE,\n  color,\n  children,\n}: PropsWithChildren<MeterBarChartInternalDataProvidersProps>) => {\n  const matchingColorRule = useMeterBarColorRule(value, valueAccessor);\n  const { thresholdIndicators, matchingThreshold, legendItems } =\n    useMeterBarChartThresholds(displayValue);\n\n  const meterBarChartData: MeterBarChartDataProviderData = {\n    color:\n      matchingColorRule?.Default ??\n      matchingThreshold?.color ??\n      color ??\n      SEGMENT_COLOR_DEFAULT,\n    value,\n    name,\n    valueAccessor,\n    thresholdIndicators,\n    legendItems,\n  };\n\n  return (\n    <MeterBarChartDataContext.Provider value={meterBarChartData}>\n      {children}\n    </MeterBarChartDataContext.Provider>\n  );\n};\n"],
-  "mappings": "AA4CI;AA1CJ,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB,6BAA6B;AAYnD,MAAM,qCAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAkE;AAChE,QAAM,oBAAoB,qBAAqB,OAAO,aAAa;AACnE,QAAM,EAAE,qBAAqB,mBAAmB,YAAY,IAC1D,2BAA2B,YAAY;AAEzC,QAAM,oBAAmD;AAAA,IACvD,OACE,mBAAmB,WACnB,mBAAmB,SACnB,SACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACvC,UACH;AAEJ;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { DEFAULT_VALUE_ACCESSOR } from '../../../core/constants.js';\nimport { MeterBarChartDataContext } from '../context/MeterBarChartDataContext.js';\nimport { useMeterBarChartThresholds } from '../hooks/useMeterBarChartThresholds.js';\nimport { useMeterBarColorRule } from '../hooks/useMeterBarColorRule.js';\nimport { NAME_DEFAULT_VALUE, SEGMENT_COLOR_DEFAULT } from '../types/default.js';\nimport type { MeterBarChartDataProviderData } from '../types/meter-bar-chart-internal.js';\nimport type { MeterBarChartData } from '../types/meter-bar-chart.js';\n\ninterface MeterBarChartInternalDataProvidersProps {\n  value: number | MeterBarChartData;\n  displayValue: number;\n  valueAccessor?: string;\n  name?: string;\n  color?: string;\n}\n\nexport const MeterBarChartInternalDataProviders = ({\n  value,\n  displayValue,\n  valueAccessor = DEFAULT_VALUE_ACCESSOR,\n  name = NAME_DEFAULT_VALUE,\n  color,\n  children,\n}: PropsWithChildren<MeterBarChartInternalDataProvidersProps>) => {\n  const matchingColorRule = useMeterBarColorRule(value, valueAccessor);\n  const fallbackColor = color ?? SEGMENT_COLOR_DEFAULT;\n  const { thresholdIntervals, legendItems, matchingThreshold } =\n    useMeterBarChartThresholds(displayValue, fallbackColor);\n\n  const meterBarChartData: MeterBarChartDataProviderData = {\n    // The meter bar fills with the color rule, then the matching threshold's\n    // color, then the chart color. The threshold interval bars below the bar\n    // are rendered separately (APPDEV-17783).\n    color:\n      matchingColorRule?.Default ?? matchingThreshold?.color ?? fallbackColor,\n    value,\n    name,\n    valueAccessor,\n    thresholdIntervals,\n    legendItems,\n  };\n\n  return (\n    <MeterBarChartDataContext.Provider value={meterBarChartData}>\n      {children}\n    </MeterBarChartDataContext.Provider>\n  );\n};\n"],
+  "mappings": "AA6CI;AA3CJ,SAAS,8BAA8B;AACvC,SAAS,gCAAgC;AACzC,SAAS,kCAAkC;AAC3C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB,6BAA6B;AAYnD,MAAM,qCAAqC,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAAkE;AAChE,QAAM,oBAAoB,qBAAqB,OAAO,aAAa;AACnE,QAAM,gBAAgB,SAAS;AAC/B,QAAM,EAAE,oBAAoB,aAAa,kBAAkB,IACzD,2BAA2B,cAAc,aAAa;AAExD,QAAM,oBAAmD;AAAA;AAAA;AAAA;AAAA,IAIvD,OACE,mBAAmB,WAAW,mBAAmB,SAAS;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,mBACvC,UACH;AAEJ;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/providers/MeterBarChartProviders.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type ReactElement, useMemo } from 'react';\n\nimport { OverlayProvider } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ChartSeriesActionContext } from '../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRuleContext } from '../../../core/context/ColorRuleContext.js';\nimport { FormatterContext } from '../../shared/context/FormatterContext.js';\nimport { MeterBarChartLoadingContext } from '../../shared/context/MeterBarChartLoadingContext.js';\nimport { MeterBarToolbarConfigContext } from '../../shared/context/MeterBarToolbarConfigContext.js';\nimport {\n  MeterBarChartInternalConfigContext,\n  MeterBarChartInternalConfigContextProps,\n} from '../context/MeterBarChartInternalConfigContext.js';\nimport type { MeterBarChartInternalConfig } from '../types/meter-bar-chart-internal.js';\nimport { type MeterBarChartProps } from '../types/meter-bar-chart.js';\n\ninterface MeterBarChartProvidersProps {\n  config: MeterBarChartInternalConfig;\n  seriesActions?: MeterBarChartProps['seriesActions'];\n}\nexport const MeterBarChartProviders = ({\n  config,\n  seriesActions,\n  children,\n}: PropsWithChildren<MeterBarChartProvidersProps>) => {\n  const contextSeriesActionsValue = useMemo(\n    () => ({\n      chartSeriesActions: seriesActions as (\n        series: unknown,\n        datapoint?: unknown,\n      ) => ReactElement<PropsWithChildren>,\n    }),\n    [seriesActions],\n  );\n\n  const internalConfigValue: MeterBarChartInternalConfigContextProps = useMemo(\n    () => ({\n      min: config.min,\n      max: config.max,\n      tooltip: config.tooltip,\n      label: config.labelSlot,\n      thresholds: config.thresholds,\n      thresholdsIndicators: config.thresholdsIndicators,\n    }),\n    [config],\n  );\n\n  return (\n    <ColorRuleContext.Provider value={config.colorRules}>\n      <FormatterContext.Provider\n        value={{ formatter: config.formatter, unit: config.unit }}\n      >\n        <MeterBarChartLoadingContext.Provider value={config.loading}>\n          <ChartSeriesActionContext.Provider value={contextSeriesActionsValue}>\n            <MeterBarChartInternalConfigContext.Provider\n              value={internalConfigValue}\n            >\n              <MeterBarToolbarConfigContext.Provider value={config.toolbar}>\n                <OverlayProvider>\n                  <TooltipProvider>{children}</TooltipProvider>\n                </OverlayProvider>\n              </MeterBarToolbarConfigContext.Provider>\n            </MeterBarChartInternalConfigContext.Provider>\n          </ChartSeriesActionContext.Provider>\n        </MeterBarChartLoadingContext.Provider>\n      </FormatterContext.Provider>\n    </ColorRuleContext.Provider>\n  );\n};\n"],
-  "mappings": "AA2DkB;AA3DlB,SAAoD,eAAe;AAEnE,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,mCAAmC;AAC5C,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,OAEK;AAQA,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,MAAsD;AACpD,QAAM,4BAA4B;AAAA,IAChC,OAAO;AAAA,MACL,oBAAoB;AAAA,IAItB;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,sBAA+D;AAAA,IACnE,OAAO;AAAA,MACL,KAAK,OAAO;AAAA,MACZ,KAAK,OAAO;AAAA,MACZ,SAAS,OAAO;AAAA,MAChB,OAAO,OAAO;AAAA,MACd,YAAY,OAAO;AAAA,MACnB,sBAAsB,OAAO;AAAA,IAC/B;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,OAAO,YACvC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,OAAO,EAAE,WAAW,OAAO,WAAW,MAAM,OAAO,KAAK;AAAA,MAExD,8BAAC,4BAA4B,UAA5B,EAAqC,OAAO,OAAO,SAClD,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,2BACxC;AAAA,QAAC,mCAAmC;AAAA,QAAnC;AAAA,UACC,OAAO;AAAA,UAEP,8BAAC,6BAA6B,UAA7B,EAAsC,OAAO,OAAO,SACnD,8BAAC,mBACC,8BAAC,mBAAiB,UAAS,GAC7B,GACF;AAAA;AAAA,MACF,GACF,GACF;AAAA;AAAA,EACF,GACF;AAEJ;",
+  "sourcesContent": ["import { type PropsWithChildren, type ReactElement, useMemo } from 'react';\n\nimport { OverlayProvider } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ChartSeriesActionContext } from '../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRuleContext } from '../../../core/context/ColorRuleContext.js';\nimport { FormatterContext } from '../../shared/context/FormatterContext.js';\nimport { MeterBarChartLoadingContext } from '../../shared/context/MeterBarChartLoadingContext.js';\nimport { MeterBarToolbarConfigContext } from '../../shared/context/MeterBarToolbarConfigContext.js';\nimport {\n  MeterBarChartInternalConfigContext,\n  MeterBarChartInternalConfigContextProps,\n} from '../context/MeterBarChartInternalConfigContext.js';\nimport type { MeterBarChartInternalConfig } from '../types/meter-bar-chart-internal.js';\nimport { type MeterBarChartProps } from '../types/meter-bar-chart.js';\n\ninterface MeterBarChartProvidersProps {\n  config: MeterBarChartInternalConfig;\n  seriesActions?: MeterBarChartProps['seriesActions'];\n}\nexport const MeterBarChartProviders = ({\n  config,\n  seriesActions,\n  children,\n}: PropsWithChildren<MeterBarChartProvidersProps>) => {\n  const contextSeriesActionsValue = useMemo(\n    () => ({\n      chartSeriesActions: seriesActions as (\n        series: unknown,\n        datapoint?: unknown,\n      ) => ReactElement<PropsWithChildren>,\n    }),\n    [seriesActions],\n  );\n\n  const internalConfigValue: MeterBarChartInternalConfigContextProps = useMemo(\n    () => ({\n      min: config.min,\n      max: config.max,\n      tooltip: config.tooltip,\n      label: config.labelSlot,\n      thresholds: config.thresholds,\n      thresholdsIndicators: config.thresholdsIndicators,\n      showThresholdIndicators: config.showThresholdIndicators,\n    }),\n    [config],\n  );\n\n  return (\n    <ColorRuleContext.Provider value={config.colorRules}>\n      <FormatterContext.Provider\n        value={{ formatter: config.formatter, unit: config.unit }}\n      >\n        <MeterBarChartLoadingContext.Provider value={config.loading}>\n          <ChartSeriesActionContext.Provider value={contextSeriesActionsValue}>\n            <MeterBarChartInternalConfigContext.Provider\n              value={internalConfigValue}\n            >\n              <MeterBarToolbarConfigContext.Provider value={config.toolbar}>\n                <OverlayProvider>\n                  <TooltipProvider>{children}</TooltipProvider>\n                </OverlayProvider>\n              </MeterBarToolbarConfigContext.Provider>\n            </MeterBarChartInternalConfigContext.Provider>\n          </ChartSeriesActionContext.Provider>\n        </MeterBarChartLoadingContext.Provider>\n      </FormatterContext.Provider>\n    </ColorRuleContext.Provider>\n  );\n};\n"],
+  "mappings": "AA4DkB;AA5DlB,SAAoD,eAAe;AAEnE,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,mCAAmC;AAC5C,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,OAEK;AAQA,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,MAAsD;AACpD,QAAM,4BAA4B;AAAA,IAChC,OAAO;AAAA,MACL,oBAAoB;AAAA,IAItB;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,sBAA+D;AAAA,IACnE,OAAO;AAAA,MACL,KAAK,OAAO;AAAA,MACZ,KAAK,OAAO;AAAA,MACZ,SAAS,OAAO;AAAA,MAChB,OAAO,OAAO;AAAA,MACd,YAAY,OAAO;AAAA,MACnB,sBAAsB,OAAO;AAAA,MAC7B,yBAAyB,OAAO;AAAA,IAClC;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,OAAO,YACvC;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,OAAO,EAAE,WAAW,OAAO,WAAW,MAAM,OAAO,KAAK;AAAA,MAExD,8BAAC,4BAA4B,UAA5B,EAAqC,OAAO,OAAO,SAClD,8BAAC,yBAAyB,UAAzB,EAAkC,OAAO,2BACxC;AAAA,QAAC,mCAAmC;AAAA,QAAnC;AAAA,UACC,OAAO;AAAA,UAEP,8BAAC,6BAA6B,UAA7B,EAAsC,OAAO,OAAO,SACnD,8BAAC,mBACC,8BAAC,mBAAiB,UAAS,GAC7B,GACF;AAAA;AAAA,MACF,GACF,GACF;AAAA;AAAA,EACF,GACF;AAEJ;",
   "names": []
 }

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

@@ -7,14 +7,15 @@ import {
 } from "../../shared/constants.js";
 const NAME_DEFAULT_VALUE = "value";
 const SEGMENT_COLOR_DEFAULT = Colors.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: SIZE_DEFAULT,
   min: MIN_DEFAULT_VALUE,
   max: MAX_DEFAULT_VALUE,
@@ -24,7 +25,7 @@ const defaultConfig = {
 export {
   NAME_DEFAULT_VALUE,
   SEGMENT_COLOR_DEFAULT,
-  THRESHOLD_COLOR_DEFAULT,
+  SHOW_THRESHOLD_INDICATORS_DEFAULT,
   THRESHOLD_METADATA_DEFAULT,
   defaultConfig
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/types/default.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { ThresholdMetadata } from './meter-bar-chart-internal.js';\nimport {\n  SIZE_DEFAULT,\n  MIN_DEFAULT_VALUE,\n  MAX_DEFAULT_VALUE,\n  DEFAULT_FORMATTER,\n} from '../../shared/constants.js';\n\nexport const NAME_DEFAULT_VALUE = 'value';\nexport const SEGMENT_COLOR_DEFAULT = Colors.Charts.Categorical.Color11.Default;\nexport const THRESHOLD_COLOR_DEFAULT = SEGMENT_COLOR_DEFAULT;\nexport const THRESHOLD_METADATA_DEFAULT: ThresholdMetadata = {\n  data: [],\n  legend: false,\n};\n\nexport const defaultConfig = {\n  loading: false,\n  thresholdIndicators: THRESHOLD_METADATA_DEFAULT,\n  size: SIZE_DEFAULT,\n  min: MIN_DEFAULT_VALUE,\n  max: MAX_DEFAULT_VALUE,\n  formatter: DEFAULT_FORMATTER,\n  tooltip: { hidden: false },\n};\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAGnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB,OAAO,OAAO,YAAY,QAAQ;AAChE,MAAM,0BAA0B;AAChC,MAAM,6BAAgD;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,WAAW;AAAA,EACX,SAAS,EAAE,QAAQ,MAAM;AAC3B;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { ThresholdMetadata } from './meter-bar-chart-internal.js';\nimport {\n  SIZE_DEFAULT,\n  MIN_DEFAULT_VALUE,\n  MAX_DEFAULT_VALUE,\n  DEFAULT_FORMATTER,\n} from '../../shared/constants.js';\n\nexport const NAME_DEFAULT_VALUE = 'value';\nexport const SEGMENT_COLOR_DEFAULT = Colors.Charts.Categorical.Color11.Default;\nexport const THRESHOLD_METADATA_DEFAULT: ThresholdMetadata = {\n  data: [],\n  legend: false,\n};\n\nexport const SHOW_THRESHOLD_INDICATORS_DEFAULT = true;\n\nexport const defaultConfig = {\n  loading: false,\n  thresholdIndicators: THRESHOLD_METADATA_DEFAULT,\n  showThresholdIndicators: SHOW_THRESHOLD_INDICATORS_DEFAULT,\n  size: SIZE_DEFAULT,\n  min: MIN_DEFAULT_VALUE,\n  max: MAX_DEFAULT_VALUE,\n  formatter: DEFAULT_FORMATTER,\n  tooltip: { hidden: false },\n};\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAGnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,qBAAqB;AAC3B,MAAM,wBAAwB,OAAO,OAAO,YAAY,QAAQ;AAChE,MAAM,6BAAgD;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,QAAQ;AACV;AAEO,MAAM,oCAAoC;AAE1C,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,qBAAqB;AAAA,EACrB,yBAAyB;AAAA,EACzB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,KAAK;AAAA,EACL,WAAW;AAAA,EACX,SAAS,EAAE,QAAQ,MAAM;AAC3B;",
   "names": []
 }

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

@@ -1,12 +1,13 @@
-import { isUndefined } from "lodash-es";
-import { THRESHOLD_COLOR_DEFAULT } from "../types/default.js";
 const applyThresholdDefaults = (threshold) => {
-  const showIndicatorDefault = isUndefined(threshold.color) ? true : false;
   return {
     value: threshold.value,
     name: threshold.name,
-    color: threshold.color ?? 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
   };
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/utils/apply-threshold-defaults.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { THRESHOLD_COLOR_DEFAULT } from '../types/default.js';\nimport type { MeterBarChartThresholdIndicatorPropsInternal } from '../types/meter-bar-chart-internal.js';\nimport type { MeterBarChartThresholdIndicatorProps } from '../types/meter-bar-chart.js';\n\nexport const applyThresholdDefaults = (\n  threshold: MeterBarChartThresholdIndicatorProps,\n): MeterBarChartThresholdIndicatorPropsInternal => {\n  const showIndicatorDefault = isUndefined(threshold.color) ? true : false;\n\n  return {\n    value: threshold.value,\n    name: threshold.name,\n    color: threshold.color ?? THRESHOLD_COLOR_DEFAULT,\n    showIndicator: threshold.showIndicator ?? showIndicatorDefault,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,+BAA+B;AAIjC,MAAM,yBAAyB,CACpC,cACiD;AACjD,QAAM,uBAAuB,YAAY,UAAU,KAAK,IAAI,OAAO;AAEnE,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU,SAAS;AAAA,IAC1B,eAAe,UAAU,iBAAiB;AAAA,EAC5C;AACF;",
+  "sourcesContent": ["import type { MeterBarChartThresholdIndicatorPropsInternal } from '../types/meter-bar-chart-internal.js';\nimport type { MeterBarChartThresholdIndicatorProps } from '../types/meter-bar-chart.js';\n\nexport const applyThresholdDefaults = (\n  threshold: MeterBarChartThresholdIndicatorProps,\n): MeterBarChartThresholdIndicatorPropsInternal => {\n  return {\n    value: threshold.value,\n    name: threshold.name,\n    color: threshold.color,\n    // The deprecated per-threshold `showIndicator` is preserved as-is (an unset\n    // flag stays `undefined`) so the chart-level `showThresholdIndicators`\n    // fallback can distinguish \"not specified\" from an explicit `false`.\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    showIndicator: threshold.showIndicator,\n  };\n};\n"],
+  "mappings": "AAGO,MAAM,yBAAyB,CACpC,cACiD;AACjD,SAAO;AAAA,IACL,OAAO,UAAU;AAAA,IACjB,MAAM,UAAU;AAAA,IAChB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKjB,eAAe,UAAU;AAAA,EAC3B;AACF;",
   "names": []
 }

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

@@ -1,4 +1,5 @@
 import { applyThresholdDefaults } from "./apply-threshold-defaults.js";
+import { resolveShowThresholdIndicators } from "./resolve-show-threshold-indicators.js";
 import { isValidColorRule } from "../../../core/slots/ColorRule.js";
 import { DEFAULT_FORMATTER } from "../../shared/constants.js";
 import {
@@ -32,9 +33,11 @@ const buildMeterBarChartConfig = (props, consumerConfig, slots) => {
   const toolbar = getToolbarConfig(slots.toolbar, consumerConfig.toolbar);
   const colorRules = (consumerConfig.colorRules ?? []).filter(isValidColorRule).concat(slots.colorRules ?? []);
   const loading = props.loading ?? consumerConfig.loading ?? defaultConfig.loading;
+  const showThresholdIndicators = props.showThresholdIndicators ?? resolveShowThresholdIndicators(thresholds.data) ?? defaultConfig.showThresholdIndicators;
   return {
     thresholds,
     thresholdsIndicators: thresholds,
+    showThresholdIndicators,
     size,
     loading,
     min,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/utils/build-meter-bar-chart-config.ts"],
-  "sourcesContent": ["import { applyThresholdDefaults } from './apply-threshold-defaults.js';\nimport { isValidColorRule } from '../../../core/slots/ColorRule.js';\nimport { DEFAULT_FORMATTER } from '../../shared/constants.js';\nimport {\n  defaultToolbarInternalConfig,\n  MeterBarToolbarConfig,\n  MeterBarToolbarInternalProps,\n  MeterBarToolbarSlotProps,\n} from '../../shared/types/meter-bar-toolbar.js';\nimport { defaultConfig } from '../types/default.js';\nimport {\n  MeterBarChartConsumerConfig,\n  MeterBarChartSlots,\n  type MeterBarChartThresholdConsumerConfig,\n} from '../types/meter-bar-chart-config.js';\nimport {\n  MeterBarChartInternalConfig,\n  type ThresholdMetadata,\n  type TooltipConfigData,\n} from '../types/meter-bar-chart-internal.js';\nimport { MeterBarChartProps } from '../types/meter-bar-chart.js';\n\nconst getTooltipConfig = (\n  slots: MeterBarChartSlots,\n  consumerConfig: MeterBarChartConsumerConfig,\n): TooltipConfigData => {\n  let consumerTooltip: { hidden: boolean } | undefined;\n  if (typeof consumerConfig.tooltip === 'boolean') {\n    // TODO [APPDEV-17990] Remove the boolean branch.\n    consumerTooltip = { hidden: !consumerConfig.tooltip };\n  } else if (\n    typeof consumerConfig.tooltip === 'object' &&\n    consumerConfig.tooltip.hidden !== undefined\n  ) {\n    consumerTooltip = { hidden: consumerConfig.tooltip.hidden };\n  }\n  return { ...defaultConfig.tooltip, ...consumerTooltip, ...slots.tooltip };\n};\n\nconst getToolbarConfig = (\n  toolbarSlotsConfig?: MeterBarToolbarSlotProps,\n  toolbarConsumerConfig?: MeterBarToolbarConfig,\n): MeterBarToolbarInternalProps => {\n  const configuredToolbar = toolbarSlotsConfig ?? toolbarConsumerConfig;\n\n  return { ...defaultToolbarInternalConfig, ...configuredToolbar };\n};\n\nexport const buildMeterBarChartConfig = (\n  props: MeterBarChartProps,\n  consumerConfig: MeterBarChartConsumerConfig,\n  slots: MeterBarChartSlots,\n): MeterBarChartInternalConfig => {\n  const thresholds = combineThresholds(\n    consumerConfig.thresholdsIndicators,\n    slots.thresholds,\n  );\n  const size = props.size ?? consumerConfig.size ?? defaultConfig.size;\n  const min = props.min ?? consumerConfig.min ?? defaultConfig.min;\n  const max = props.max ?? consumerConfig.max ?? defaultConfig.max;\n  const tooltip = getTooltipConfig(slots, consumerConfig);\n\n  const formatter =\n    props.formatter ?? consumerConfig.formatter ?? DEFAULT_FORMATTER;\n  const unit = props.unit ?? consumerConfig.unit;\n\n  const toolbar = getToolbarConfig(slots.toolbar, consumerConfig.toolbar);\n\n  const colorRules = (consumerConfig.colorRules ?? [])\n    .filter(isValidColorRule)\n    .concat(slots.colorRules ?? []);\n\n  const loading =\n    props.loading ?? consumerConfig.loading ?? defaultConfig.loading;\n\n  return {\n    thresholds,\n    thresholdsIndicators: thresholds,\n    size,\n    loading,\n    min,\n    max,\n    tooltip,\n    labelSlot: slots.label,\n    valueSlot: slots.value,\n    minSlot: slots.min,\n    maxSlot: slots.max,\n    formatter,\n    unit,\n    colorRules,\n    toolbar,\n  };\n};\n\nconst combineThresholds = (\n  thresholdConfig: MeterBarChartThresholdConsumerConfig | undefined,\n  thresholdSlots: ThresholdMetadata | undefined,\n): ThresholdMetadata => {\n  const slotsData = thresholdSlots?.data ? thresholdSlots.data : [];\n  const consumerData = thresholdConfig?.data?.map(applyThresholdDefaults) ?? [];\n\n  return {\n    data: slotsData.concat(consumerData),\n    legend:\n      thresholdSlots?.legend ??\n      thresholdConfig?.legend ??\n      defaultConfig.thresholdIndicators.legend,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,8BAA8B;AACvC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAIK;AACP,SAAS,qBAAqB;AAa9B,MAAM,mBAAmB,CACvB,OACA,mBACsB;AACtB,MAAI;AACJ,MAAI,OAAO,eAAe,YAAY,WAAW;AAE/C,sBAAkB,EAAE,QAAQ,CAAC,eAAe,QAAQ;AAAA,EACtD,WACE,OAAO,eAAe,YAAY,YAClC,eAAe,QAAQ,WAAW,QAClC;AACA,sBAAkB,EAAE,QAAQ,eAAe,QAAQ,OAAO;AAAA,EAC5D;AACA,SAAO,EAAE,GAAG,cAAc,SAAS,GAAG,iBAAiB,GAAG,MAAM,QAAQ;AAC1E;AAEA,MAAM,mBAAmB,CACvB,oBACA,0BACiC;AACjC,QAAM,oBAAoB,sBAAsB;AAEhD,SAAO,EAAE,GAAG,8BAA8B,GAAG,kBAAkB;AACjE;AAEO,MAAM,2BAA2B,CACtC,OACA,gBACA,UACgC;AAChC,QAAM,aAAa;AAAA,IACjB,eAAe;AAAA,IACf,MAAM;AAAA,EACR;AACA,QAAM,OAAO,MAAM,QAAQ,eAAe,QAAQ,cAAc;AAChE,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,cAAc;AAC7D,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,cAAc;AAC7D,QAAM,UAAU,iBAAiB,OAAO,cAAc;AAEtD,QAAM,YACJ,MAAM,aAAa,eAAe,aAAa;AACjD,QAAM,OAAO,MAAM,QAAQ,eAAe;AAE1C,QAAM,UAAU,iBAAiB,MAAM,SAAS,eAAe,OAAO;AAEtE,QAAM,cAAc,eAAe,cAAc,CAAC,GAC/C,OAAO,gBAAgB,EACvB,OAAO,MAAM,cAAc,CAAC,CAAC;AAEhC,QAAM,UACJ,MAAM,WAAW,eAAe,WAAW,cAAc;AAE3D,SAAO;AAAA,IACL;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,WAAW,MAAM;AAAA,IACjB,SAAS,MAAM;AAAA,IACf,SAAS,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,oBAAoB,CACxB,iBACA,mBACsB;AACtB,QAAM,YAAY,gBAAgB,OAAO,eAAe,OAAO,CAAC;AAChE,QAAM,eAAe,iBAAiB,MAAM,IAAI,sBAAsB,KAAK,CAAC;AAE5E,SAAO;AAAA,IACL,MAAM,UAAU,OAAO,YAAY;AAAA,IACnC,QACE,gBAAgB,UAChB,iBAAiB,UACjB,cAAc,oBAAoB;AAAA,EACtC;AACF;",
+  "sourcesContent": ["import { applyThresholdDefaults } from './apply-threshold-defaults.js';\nimport { resolveShowThresholdIndicators } from './resolve-show-threshold-indicators.js';\nimport { isValidColorRule } from '../../../core/slots/ColorRule.js';\nimport { DEFAULT_FORMATTER } from '../../shared/constants.js';\nimport {\n  defaultToolbarInternalConfig,\n  MeterBarToolbarConfig,\n  MeterBarToolbarInternalProps,\n  MeterBarToolbarSlotProps,\n} from '../../shared/types/meter-bar-toolbar.js';\nimport { defaultConfig } from '../types/default.js';\nimport {\n  MeterBarChartConsumerConfig,\n  MeterBarChartSlots,\n  type MeterBarChartThresholdConsumerConfig,\n} from '../types/meter-bar-chart-config.js';\nimport {\n  MeterBarChartInternalConfig,\n  type ThresholdMetadata,\n  type TooltipConfigData,\n} from '../types/meter-bar-chart-internal.js';\nimport { MeterBarChartProps } from '../types/meter-bar-chart.js';\n\nconst getTooltipConfig = (\n  slots: MeterBarChartSlots,\n  consumerConfig: MeterBarChartConsumerConfig,\n): TooltipConfigData => {\n  let consumerTooltip: { hidden: boolean } | undefined;\n  if (typeof consumerConfig.tooltip === 'boolean') {\n    // TODO [APPDEV-17990] Remove the boolean branch.\n    consumerTooltip = { hidden: !consumerConfig.tooltip };\n  } else if (\n    typeof consumerConfig.tooltip === 'object' &&\n    consumerConfig.tooltip.hidden !== undefined\n  ) {\n    consumerTooltip = { hidden: consumerConfig.tooltip.hidden };\n  }\n  return { ...defaultConfig.tooltip, ...consumerTooltip, ...slots.tooltip };\n};\n\nconst getToolbarConfig = (\n  toolbarSlotsConfig?: MeterBarToolbarSlotProps,\n  toolbarConsumerConfig?: MeterBarToolbarConfig,\n): MeterBarToolbarInternalProps => {\n  const configuredToolbar = toolbarSlotsConfig ?? toolbarConsumerConfig;\n\n  return { ...defaultToolbarInternalConfig, ...configuredToolbar };\n};\n\nexport const buildMeterBarChartConfig = (\n  props: MeterBarChartProps,\n  consumerConfig: MeterBarChartConsumerConfig,\n  slots: MeterBarChartSlots,\n): MeterBarChartInternalConfig => {\n  const thresholds = combineThresholds(\n    consumerConfig.thresholdsIndicators,\n    slots.thresholds,\n  );\n  const size = props.size ?? consumerConfig.size ?? defaultConfig.size;\n  const min = props.min ?? consumerConfig.min ?? defaultConfig.min;\n  const max = props.max ?? consumerConfig.max ?? defaultConfig.max;\n  const tooltip = getTooltipConfig(slots, consumerConfig);\n\n  const formatter =\n    props.formatter ?? consumerConfig.formatter ?? DEFAULT_FORMATTER;\n  const unit = props.unit ?? consumerConfig.unit;\n\n  const toolbar = getToolbarConfig(slots.toolbar, consumerConfig.toolbar);\n\n  const colorRules = (consumerConfig.colorRules ?? [])\n    .filter(isValidColorRule)\n    .concat(slots.colorRules ?? []);\n\n  const loading =\n    props.loading ?? consumerConfig.loading ?? defaultConfig.loading;\n\n  const showThresholdIndicators =\n    props.showThresholdIndicators ??\n    resolveShowThresholdIndicators(thresholds.data) ??\n    defaultConfig.showThresholdIndicators;\n\n  return {\n    thresholds,\n    thresholdsIndicators: thresholds,\n    showThresholdIndicators,\n    size,\n    loading,\n    min,\n    max,\n    tooltip,\n    labelSlot: slots.label,\n    valueSlot: slots.value,\n    minSlot: slots.min,\n    maxSlot: slots.max,\n    formatter,\n    unit,\n    colorRules,\n    toolbar,\n  };\n};\n\nconst combineThresholds = (\n  thresholdConfig: MeterBarChartThresholdConsumerConfig | undefined,\n  thresholdSlots: ThresholdMetadata | undefined,\n): ThresholdMetadata => {\n  const slotsData = thresholdSlots?.data ? thresholdSlots.data : [];\n  const consumerData = thresholdConfig?.data?.map(applyThresholdDefaults) ?? [];\n\n  return {\n    data: slotsData.concat(consumerData),\n    legend:\n      thresholdSlots?.legend ??\n      thresholdConfig?.legend ??\n      defaultConfig.thresholdIndicators.legend,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,8BAA8B;AACvC,SAAS,sCAAsC;AAC/C,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAIK;AACP,SAAS,qBAAqB;AAa9B,MAAM,mBAAmB,CACvB,OACA,mBACsB;AACtB,MAAI;AACJ,MAAI,OAAO,eAAe,YAAY,WAAW;AAE/C,sBAAkB,EAAE,QAAQ,CAAC,eAAe,QAAQ;AAAA,EACtD,WACE,OAAO,eAAe,YAAY,YAClC,eAAe,QAAQ,WAAW,QAClC;AACA,sBAAkB,EAAE,QAAQ,eAAe,QAAQ,OAAO;AAAA,EAC5D;AACA,SAAO,EAAE,GAAG,cAAc,SAAS,GAAG,iBAAiB,GAAG,MAAM,QAAQ;AAC1E;AAEA,MAAM,mBAAmB,CACvB,oBACA,0BACiC;AACjC,QAAM,oBAAoB,sBAAsB;AAEhD,SAAO,EAAE,GAAG,8BAA8B,GAAG,kBAAkB;AACjE;AAEO,MAAM,2BAA2B,CACtC,OACA,gBACA,UACgC;AAChC,QAAM,aAAa;AAAA,IACjB,eAAe;AAAA,IACf,MAAM;AAAA,EACR;AACA,QAAM,OAAO,MAAM,QAAQ,eAAe,QAAQ,cAAc;AAChE,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,cAAc;AAC7D,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,cAAc;AAC7D,QAAM,UAAU,iBAAiB,OAAO,cAAc;AAEtD,QAAM,YACJ,MAAM,aAAa,eAAe,aAAa;AACjD,QAAM,OAAO,MAAM,QAAQ,eAAe;AAE1C,QAAM,UAAU,iBAAiB,MAAM,SAAS,eAAe,OAAO;AAEtE,QAAM,cAAc,eAAe,cAAc,CAAC,GAC/C,OAAO,gBAAgB,EACvB,OAAO,MAAM,cAAc,CAAC,CAAC;AAEhC,QAAM,UACJ,MAAM,WAAW,eAAe,WAAW,cAAc;AAE3D,QAAM,0BACJ,MAAM,2BACN,+BAA+B,WAAW,IAAI,KAC9C,cAAc;AAEhB,SAAO;AAAA,IACL;AAAA,IACA,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,WAAW,MAAM;AAAA,IACjB,SAAS,MAAM;AAAA,IACf,SAAS,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEA,MAAM,oBAAoB,CACxB,iBACA,mBACsB;AACtB,QAAM,YAAY,gBAAgB,OAAO,eAAe,OAAO,CAAC;AAChE,QAAM,eAAe,iBAAiB,MAAM,IAAI,sBAAsB,KAAK,CAAC;AAE5E,SAAO;AAAA,IACL,MAAM,UAAU,OAAO,YAAY;AAAA,IACnC,QACE,gBAAgB,UAChB,iBAAiB,UACjB,cAAc,oBAAoB;AAAA,EACtC;AACF;",
   "names": []
 }

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

@@ -0,0 +1,29 @@
+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);
+export {
+  buildThresholdIntervals
+};
+//# sourceMappingURL=build-threshold-intervals.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/utils/build-threshold-intervals.ts"],
+  "sourcesContent": ["import type {\n  MeterBarChartThresholdIndicatorPropsInternal,\n  ThresholdIntervalRange,\n} from '../types/meter-bar-chart-internal.js';\n\n/**\n * Builds the colored interval ranges rendered below the meter bar. Each\n * threshold owns the range from its value up to the next threshold (the last\n * extends to `max`); the region below the first threshold uses `fallbackColor`.\n * @param thresholds - Configured thresholds (sorted or unsorted).\n * @param min - Scale minimum.\n * @param max - Scale maximum.\n * @param fallbackColor - Color for the uncovered region and for thresholds with no color.\n */\nexport const buildThresholdIntervals = (\n  thresholds: MeterBarChartThresholdIndicatorPropsInternal[],\n  min: number,\n  max: number,\n  fallbackColor: string,\n): ThresholdIntervalRange[] => {\n  if (thresholds.length === 0) {\n    return [];\n  }\n\n  const sorted = [...thresholds].sort((a, b) => a.value - b.value);\n\n  const intervals: ThresholdIntervalRange[] = [];\n\n  const firstStart = clamp(sorted[0].value, min, max);\n  if (firstStart > min) {\n    intervals.push({ start: min, end: firstStart, color: fallbackColor });\n  }\n\n  for (let index = 0; index < sorted.length; index++) {\n    const start = clamp(sorted[index].value, min, max);\n    const end = clamp(sorted[index + 1]?.value ?? max, min, max);\n\n    if (end <= start) {\n      continue;\n    }\n\n    intervals.push({\n      start,\n      end,\n      color: sorted[index].color ?? fallbackColor,\n    });\n  }\n\n  return intervals;\n};\n\nconst clamp = (value: number, min: number, max: number): number =>\n  Math.min(Math.max(value, min), max);\n"],
+  "mappings": "AAcO,MAAM,0BAA0B,CACrC,YACA,KACA,KACA,kBAC6B;AAC7B,MAAI,WAAW,WAAW,GAAG;AAC3B,WAAO,CAAC;AAAA,EACV;AAEA,QAAM,SAAS,CAAC,GAAG,UAAU,EAAE,KAAK,CAAC,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAE/D,QAAM,YAAsC,CAAC;AAE7C,QAAM,aAAa,MAAM,OAAO,CAAC,EAAE,OAAO,KAAK,GAAG;AAClD,MAAI,aAAa,KAAK;AACpB,cAAU,KAAK,EAAE,OAAO,KAAK,KAAK,YAAY,OAAO,cAAc,CAAC;AAAA,EACtE;AAEA,WAAS,QAAQ,GAAG,QAAQ,OAAO,QAAQ,SAAS;AAClD,UAAM,QAAQ,MAAM,OAAO,KAAK,EAAE,OAAO,KAAK,GAAG;AACjD,UAAM,MAAM,MAAM,OAAO,QAAQ,CAAC,GAAG,SAAS,KAAK,KAAK,GAAG;AAE3D,QAAI,OAAO,OAAO;AAChB;AAAA,IACF;AAEA,cAAU,KAAK;AAAA,MACb;AAAA,MACA;AAAA,MACA,OAAO,OAAO,KAAK,EAAE,SAAS;AAAA,IAChC,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEA,MAAM,QAAQ,CAAC,OAAe,KAAa,QACzC,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;",
+  "names": []
+}

package/esm/charts/meter-bar/single-meter-bar/utils/build-thresholds.js

@@ -1,17 +1,17 @@
-import { getThresholdIndicators } from "./get-threshold-indicators.js";
+import { buildThresholdIntervals } from "./build-threshold-intervals.js";
 import { findMatchingThreshold } from "../../../core/utils/find-matching-threshold.js";
-function buildThresholds(value, min, max, width, thresholdsConfig) {
+function buildThresholds(value, min, max, fallbackColor, thresholdsConfig) {
   const matchingThreshold = thresholdsConfig !== void 0 ? findMatchingThreshold(value, thresholdsConfig.data) : void 0;
-  const thresholdIndicators = thresholdsConfig !== void 0 ? getThresholdIndicators(thresholdsConfig.data, min, max, width) : [];
+  const thresholdIntervals = thresholdsConfig !== void 0 ? buildThresholdIntervals(thresholdsConfig.data, min, max, fallbackColor) : [];
   const legendItems = thresholdsConfig !== void 0 ? thresholdsConfig.data.map((threshold, index) => {
     const name = threshold.name ?? `Threshold ${index + 1}`;
     return {
       id: `item-${name}-${index}`,
       name,
-      color: { Default: threshold.color }
+      color: { Default: threshold.color ?? fallbackColor }
     };
   }) : [];
-  return { matchingThreshold, thresholdIndicators, legendItems };
+  return { matchingThreshold, thresholdIntervals, legendItems };
 }
 export {
   buildThresholds

package/esm/charts/meter-bar/single-meter-bar/utils/build-thresholds.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/utils/build-thresholds.ts"],
-  "sourcesContent": ["import { getThresholdIndicators } from './get-threshold-indicators.js';\nimport { LegendItem } from '../../../core/components/legend/categorical/types/legend.js';\nimport { findMatchingThreshold } from '../../../core/utils/find-matching-threshold.js';\nimport { ThresholdMetadata } from '../types/meter-bar-chart-internal.js';\n\nexport function buildThresholds(\n  value: number,\n  min: number,\n  max: number,\n  width: number,\n  thresholdsConfig?: ThresholdMetadata,\n) {\n  const matchingThreshold =\n    thresholdsConfig !== undefined\n      ? findMatchingThreshold(value, thresholdsConfig.data)\n      : undefined;\n\n  const thresholdIndicators =\n    thresholdsConfig !== undefined\n      ? getThresholdIndicators(thresholdsConfig.data, min, max, width)\n      : [];\n\n  const legendItems: LegendItem[] =\n    thresholdsConfig !== undefined\n      ? thresholdsConfig.data.map((threshold, index) => {\n          const name = threshold.name ?? `Threshold ${index + 1}`;\n\n          return {\n            id: `item-${name}-${index}`,\n            name,\n            color: { Default: threshold.color },\n          };\n        })\n      : [];\n\n  return { matchingThreshold, thresholdIndicators, legendItems };\n}\n"],
-  "mappings": "AAAA,SAAS,8BAA8B;AAEvC,SAAS,6BAA6B;AAG/B,SAAS,gBACd,OACA,KACA,KACA,OACA,kBACA;AACA,QAAM,oBACJ,qBAAqB,SACjB,sBAAsB,OAAO,iBAAiB,IAAI,IAClD;AAEN,QAAM,sBACJ,qBAAqB,SACjB,uBAAuB,iBAAiB,MAAM,KAAK,KAAK,KAAK,IAC7D,CAAC;AAEP,QAAM,cACJ,qBAAqB,SACjB,iBAAiB,KAAK,IAAI,CAAC,WAAW,UAAU;AAC9C,UAAM,OAAO,UAAU,QAAQ,aAAa,QAAQ,CAAC;AAErD,WAAO;AAAA,MACL,IAAI,QAAQ,IAAI,IAAI,KAAK;AAAA,MACzB;AAAA,MACA,OAAO,EAAE,SAAS,UAAU,MAAM;AAAA,IACpC;AAAA,EACF,CAAC,IACD,CAAC;AAEP,SAAO,EAAE,mBAAmB,qBAAqB,YAAY;AAC/D;",
+  "sourcesContent": ["import { buildThresholdIntervals } from './build-threshold-intervals.js';\nimport { LegendItem } from '../../../core/components/legend/categorical/types/legend.js';\nimport { findMatchingThreshold } from '../../../core/utils/find-matching-threshold.js';\nimport { ThresholdMetadata } from '../types/meter-bar-chart-internal.js';\n\nexport function buildThresholds(\n  value: number,\n  min: number,\n  max: number,\n  fallbackColor: string,\n  thresholdsConfig?: ThresholdMetadata,\n) {\n  const matchingThreshold =\n    thresholdsConfig !== undefined\n      ? findMatchingThreshold(value, thresholdsConfig.data)\n      : undefined;\n\n  const thresholdIntervals =\n    thresholdsConfig !== undefined\n      ? buildThresholdIntervals(thresholdsConfig.data, min, max, fallbackColor)\n      : [];\n\n  const legendItems: LegendItem[] =\n    thresholdsConfig !== undefined\n      ? thresholdsConfig.data.map((threshold, index) => {\n          const name = threshold.name ?? `Threshold ${index + 1}`;\n\n          return {\n            id: `item-${name}-${index}`,\n            name,\n            color: { Default: threshold.color ?? fallbackColor },\n          };\n        })\n      : [];\n\n  return { matchingThreshold, thresholdIntervals, legendItems };\n}\n"],
+  "mappings": "AAAA,SAAS,+BAA+B;AAExC,SAAS,6BAA6B;AAG/B,SAAS,gBACd,OACA,KACA,KACA,eACA,kBACA;AACA,QAAM,oBACJ,qBAAqB,SACjB,sBAAsB,OAAO,iBAAiB,IAAI,IAClD;AAEN,QAAM,qBACJ,qBAAqB,SACjB,wBAAwB,iBAAiB,MAAM,KAAK,KAAK,aAAa,IACtE,CAAC;AAEP,QAAM,cACJ,qBAAqB,SACjB,iBAAiB,KAAK,IAAI,CAAC,WAAW,UAAU;AAC9C,UAAM,OAAO,UAAU,QAAQ,aAAa,QAAQ,CAAC;AAErD,WAAO;AAAA,MACL,IAAI,QAAQ,IAAI,IAAI,KAAK;AAAA,MACzB;AAAA,MACA,OAAO,EAAE,SAAS,UAAU,SAAS,cAAc;AAAA,IACrD;AAAA,EACF,CAAC,IACD,CAAC;AAEP,SAAO,EAAE,mBAAmB,oBAAoB,YAAY;AAC9D;",
   "names": []
 }