@dynatrace/strato-components 3.1.3 → 3.2.1

package/charts/meter-bar/shared/components/meter-bar-segment/MeterBarSegment.js

@@ -32,7 +32,6 @@ __export(MeterBarSegment_exports, {
 });
 module.exports = __toCommonJS(MeterBarSegment_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_group = require("@visx/group");
 var import_clsx = __toESM(require("clsx"));
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_default = require("./types/default.js");
@@ -40,63 +39,28 @@ var import_getTokenComputedStyle = require("../../../../core/utils/getTokenCompu
 var import_getValidColor = require("../../../../core/utils/getValidColor.js");
 var import_constants = require("../../constants.js");
 var import_MeterBarLayoutSize_context = require("../../context/MeterBarLayoutSize.context.js");
-var import_use_tooltip_handlers = require("../../hooks/use-tooltip-handlers.js");
-var import_useMeterBarOverlayRef = require("../../hooks/useMeterBarOverlayRef.js");
 var import_element_size_css = require("../../styles/element-size.sty.js");
 var import_get_dash_array = require("../../utils/get-dash-array.js");
 const MeterBarSegment = (props) => {
-  const {
-    color,
-    width,
-    highlighted = true,
-    start = 0,
-    onMouseClick,
-    onMouseEnter,
-    onMouseMove
-  } = props;
+  const { color, width, highlighted = true, start = 0 } = props;
   const validColor = (0, import_getTokenComputedStyle.getTokenComputedStyle)((0, import_getValidColor.getValidColor)(color));
   const { size, segmentHeight } = (0, import_MeterBarLayoutSize_context.useMeterBarLayoutSize)();
-  const overlayRef = (0, import_useMeterBarOverlayRef.useMeterBarOverlayRef)();
-  const {
-    onMouseClickHandler,
-    onMouseEnterHandler,
-    onMouseLeaveHandler,
-    onMouseMoveHandler
-  } = (0, import_use_tooltip_handlers.useTooltipHandlers)(overlayRef);
   const dashArray = (0, import_get_dash_array.getDashArray)(width, segmentHeight);
   const isSegmentHeight = size === import_constants.METER_BAR_SIZE.Auto;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_group.Group,
+    "rect",
     {
-      onMouseEnter: (event) => {
-        onMouseEnterHandler();
-        onMouseEnter && onMouseEnter(event);
-      },
-      onMouseLeave: onMouseLeaveHandler,
-      onMouseMove: (event) => {
-        onMouseMoveHandler(event);
-        onMouseMove && onMouseMove(event);
-      },
-      onClick: (event) => {
-        onMouseClickHandler(event);
-        onMouseClick && onMouseClick(event);
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "rect",
-        {
-          className: (0, import_clsx.default)({ [(0, import_element_size_css.elementSize)({ size })]: !isSegmentHeight }),
-          x: start,
-          y: "0",
-          height: isSegmentHeight ? segmentHeight : void 0,
-          width,
-          fill: validColor,
-          opacity: highlighted ? import_default.HIGHLIGHTED_SEGMENT_VALUE : import_default.INACTIVE_SEGMENT_VALUE,
-          "data-testid": "meterbar-segment",
-          stroke: import_colors.default.Background.Base.Default,
-          strokeWidth: import_constants.DEFAULT_GAP_WIDTH,
-          strokeDasharray: dashArray
-        }
-      )
+      className: (0, import_clsx.default)({ [(0, import_element_size_css.elementSize)({ size })]: !isSegmentHeight }),
+      x: start,
+      y: "0",
+      height: isSegmentHeight ? segmentHeight : void 0,
+      width,
+      fill: validColor,
+      opacity: highlighted ? import_default.HIGHLIGHTED_SEGMENT_VALUE : import_default.INACTIVE_SEGMENT_VALUE,
+      "data-testid": "meterbar-segment",
+      stroke: import_colors.default.Background.Base.Default,
+      strokeWidth: import_constants.DEFAULT_GAP_WIDTH,
+      strokeDasharray: dashArray
     }
   );
 };

package/charts/meter-bar/shared/components/meter-bar-toolbar/MeterBarToolbar.js

@@ -22,12 +22,16 @@ __export(MeterBarToolbar_exports, {
 });
 module.exports = __toCommonJS(MeterBarToolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_useBehavioralTrackingProps = require("../../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_ChartToolbarRenderer = require("../../../../core/components/toolbar/ChartToolbarRenderer.js");
 var import_zoom = require("../../../../core/utils/zoom.js");
 var import_MeterBarToolbarConfig_context = require("../../context/MeterBarToolbarConfig.context.js");
 const MeterBarChartToolbar = () => {
   const toolbarConfig = (0, import_MeterBarToolbarConfig_context.useMeterBarToolbarConfig)();
   const isToolbarEnabled = !toolbarConfig?.hidden && !!toolbarConfig?.intents?.length;
+  const behaviorTrackingProps = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(
+    toolbarConfig ?? {}
+  )[0];
   if (!isToolbarEnabled) {
     return null;
   }
@@ -45,7 +49,8 @@ const MeterBarChartToolbar = () => {
       intents: toolbarConfig.intents,
       isDownloadEnabled: false,
       toolbarDisplayMode: "inline",
-      overlayClassName: ""
+      overlayClassName: "",
+      ...behaviorTrackingProps
     }
   );
 };

package/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.css

@@ -1,4 +1,4 @@
-._r5xi4l0-3-1-3 {
+._r5xi4l0-3-2-1 {
   min-width: unset;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   padding: 0 var(--dt-spacings-size-4, 4px);

package/charts/meter-bar/shared/components/meter-bar-tooltip/MeterBarTooltipItem/MeterBarTooltipItem.sty.js

@@ -22,4 +22,4 @@ __export(MeterBarTooltipItem_css_exports, {
 });
 module.exports = __toCommonJS(MeterBarTooltipItem_css_exports);
 var import_MeterBarTooltipItem_css_ts_vanilla = require("./MeterBarTooltipItem.css");
-var valueContent = "_r5xi4l0-3-1-3";
+var valueContent = "_r5xi4l0-3-2-1";

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

@@ -9,14 +9,13 @@ export declare const METER_BAR_SIZE: Readonly<Readonly<{
 }>>;
 export declare const MIN_DEFAULT_VALUE = 0;
 export declare const MAX_DEFAULT_VALUE = 100;
-export declare const LEGEND_VERTICAL_RATIO = 0.3;
 export declare const SIZE_DEFAULT: MeterBarSize;
 export declare const DEFAULT_FORMATTER: (v: number) => string;
 export declare const DEFAULT_GAP_WIDTH = 1;
-export declare const DEFAULT_ICON_SIZE = 20;
+export declare const DEFAULT_WIDTH = "100%";
+export declare const DEFAULT_HEIGHT = "100%";
 export declare const SMALL_CHART_SIZE = 8;
 export declare const MEDIUM_CHART_SIZE = 16;
 export declare const LARGE_CHART_SIZE = 24;
-export declare const DEFAULT_CHART_SIZE = 16;
 export declare const METER_BAR_FONT_COLOR: string;
 export declare const METER_BAR_MIN_MAX_FONT_COLOR: string;

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

@@ -28,13 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
-  DEFAULT_CHART_SIZE: () => DEFAULT_CHART_SIZE,
   DEFAULT_FORMATTER: () => DEFAULT_FORMATTER,
   DEFAULT_GAP_WIDTH: () => DEFAULT_GAP_WIDTH,
-  DEFAULT_ICON_SIZE: () => DEFAULT_ICON_SIZE,
+  DEFAULT_HEIGHT: () => DEFAULT_HEIGHT,
+  DEFAULT_WIDTH: () => DEFAULT_WIDTH,
   INITIAL_STATE: () => INITIAL_STATE,
   LARGE_CHART_SIZE: () => LARGE_CHART_SIZE,
-  LEGEND_VERTICAL_RATIO: () => LEGEND_VERTICAL_RATIO,
   MAX_DEFAULT_VALUE: () => MAX_DEFAULT_VALUE,
   MEDIUM_CHART_SIZE: () => MEDIUM_CHART_SIZE,
   METER_BAR_FONT_COLOR: () => METER_BAR_FONT_COLOR,
@@ -62,14 +61,13 @@ const METER_BAR_SIZE = Object.freeze({
 });
 const MIN_DEFAULT_VALUE = 0;
 const MAX_DEFAULT_VALUE = 100;
-const LEGEND_VERTICAL_RATIO = 0.3;
 const SIZE_DEFAULT = METER_BAR_SIZE.Size16;
 const DEFAULT_FORMATTER = (v) => v.toString();
 const DEFAULT_GAP_WIDTH = 1;
-const DEFAULT_ICON_SIZE = 20;
+const DEFAULT_WIDTH = "100%";
+const DEFAULT_HEIGHT = "100%";
 const SMALL_CHART_SIZE = 8;
 const MEDIUM_CHART_SIZE = 16;
 const LARGE_CHART_SIZE = 24;
-const DEFAULT_CHART_SIZE = MEDIUM_CHART_SIZE;
 const METER_BAR_FONT_COLOR = import_colors.default.Text.Neutral.Default;
 const METER_BAR_MIN_MAX_FONT_COLOR = import_colors.default.Text.Neutral.Subdued;

package/charts/meter-bar/shared/context/FormatterContext.d.ts

@@ -1,16 +1,19 @@
 import { type Context } from 'react';
-import { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
-import { Formatter } from '../../../core/types/formatter.js';
+import { type ConvertibleUnit, type FormatOptions, type Unit } from '@dynatrace-sdk/units';
+import { type Formatter } from '../../../core/types/formatter.js';
 export type FormatterContextProps = {
     /**
      * Custom or default formatter for the chart
      * @defaultValue the default formatter
      */
     formatter: Formatter | FormatOptions<Unit, ConvertibleUnit>;
+    unit?: string | Unit;
 };
 export declare const FormatterContext: Context<FormatterContextProps>;
-interface UseFormatterProps {
+export declare const useFormatter: () => {
+    formatter: (value: number) => string;
+    unit?: undefined;
+} | {
     formatter: Formatter;
-}
-export declare const useFormatter: () => UseFormatterProps;
-export {};
+    unit: string | Unit | undefined;
+};

package/charts/meter-bar/shared/context/FormatterContext.js

@@ -31,9 +31,9 @@ const useFormatter = () => {
   if (context === void 0) {
     throw new Error("useFormatter must be within FormatterContext");
   }
-  const { formatter } = context;
+  const { formatter, unit } = context;
   if ((0, import_formatter.isFormatterOptions)(formatter)) {
     return { formatter: (value) => (0, import_units.format)(value, formatter) };
   }
-  return { formatter };
+  return { formatter, unit };
 };

package/charts/meter-bar/shared/context/MeterBarLayoutSize.context.d.ts

@@ -5,6 +5,9 @@ export type MeterBarLayoutSizeProps = {
      * @defaultvalue 'size16'
      */
     size: MeterBarSize;
+    chartHeight: number;
+    chartWidth: number;
+    segmentWidth: number;
     segmentHeight: number;
 };
 export declare const MeterBarLayoutSizeContext: import("react").Context<MeterBarLayoutSizeProps>;

package/charts/meter-bar/shared/context/MeterBarLayoutSize.context.js

@@ -27,7 +27,10 @@ var import_constants = require("../constants.js");
 const MeterBarLayoutSizeContext = (0, import_react.createContext)(
   {
     size: import_constants.METER_BAR_SIZE.Size16,
-    segmentHeight: import_constants.DEFAULT_CHART_SIZE
+    chartWidth: 0,
+    chartHeight: 0,
+    segmentWidth: 0,
+    segmentHeight: 0
   }
 );
 const useMeterBarLayoutSize = () => (0, import_react.useContext)(MeterBarLayoutSizeContext);

package/charts/meter-bar/shared/hooks/use-tooltip-handlers.d.ts

@@ -1,7 +1,7 @@
 import { type MouseEvent, type RefObject } from 'react';
 export declare const useTooltipHandlers: (overlayRef: RefObject<HTMLDivElement | null>) => {
     onMouseEnterHandler: () => void;
-    onMouseMoveHandler: (event: MouseEvent<SVGGElement>) => void;
+    onMouseMoveHandler: (event: MouseEvent<Element>) => void;
     onMouseLeaveHandler: () => false | void;
-    onMouseClickHandler: (event: MouseEvent<SVGGElement>) => void;
+    onMouseClickHandler: (event: MouseEvent<Element>) => void;
 };

package/charts/meter-bar/shared/hooks/use-tooltip-handlers.js

@@ -58,12 +58,13 @@ const useTooltipHandlers = (overlayRef) => {
   );
   const onMouseClickHandler = (0, import_react.useCallback)(
     (event) => {
-      event.stopPropagation();
-      if (overlayRef.current) {
-        const position = (0, import_calculate_mouse_positions.calculateMousePositions)(event, overlayRef.current);
-        setTooltipStatePosition(position);
-        setTooltipStateVisibility(true);
+      if (!overlayRef.current?.contains(event.target)) {
+        return;
       }
+      event.stopPropagation();
+      const position = (0, import_calculate_mouse_positions.calculateMousePositions)(event, overlayRef.current);
+      setTooltipStatePosition(position);
+      setTooltipStateVisibility(true);
       toggleTooltipStatePinned();
     },
     [

package/charts/meter-bar/shared/styles/element-size.css

@@ -1,12 +1,12 @@
-._1ckoljy1-3-1-3 {
+._1ckoljy1-3-2-1 {
   height: 100%;
 }
-._1ckoljy2-3-1-3 {
+._1ckoljy2-3-2-1 {
   height: 16px;
 }
-._1ckoljy3-3-1-3 {
+._1ckoljy3-3-2-1 {
   height: 24px;
 }
-._1ckoljy4-3-1-3 {
+._1ckoljy4-3-2-1 {
   height: 8px;
 }

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

@@ -23,4 +23,4 @@ __export(element_size_css_exports, {
 module.exports = __toCommonJS(element_size_css_exports);
 var import_element_size_css_ts_vanilla = require("./element-size.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var elementSize = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ckoljy0-3-1-3", variantClassNames: { size: { auto: "_1ckoljy1-3-1-3", size16: "_1ckoljy2-3-1-3", size24: "_1ckoljy3-3-1-3", size8: "_1ckoljy4-3-1-3" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });
+var elementSize = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ckoljy0-3-2-1", variantClassNames: { size: { auto: "_1ckoljy1-3-2-1", size16: "_1ckoljy2-3-2-1", size24: "_1ckoljy3-3-2-1", size8: "_1ckoljy4-3-2-1" } }, defaultVariants: { size: "size16" }, compoundVariants: [] });

package/charts/meter-bar/shared/utils/slot-handlers.js

@@ -31,6 +31,7 @@ __export(slot_handlers_exports, {
 module.exports = __toCommonJS(slot_handlers_exports);
 var import_lodash_es = require("lodash");
 var import_ColorRule = require("../../../core/slots/ColorRule.js");
+var import_extract_behavior_tracking_props = require("../../../core/utils/extract-behavior-tracking-props.js");
 function handleLabelSlot(child, slots) {
   slots.label = child.props.children;
 }
@@ -72,4 +73,7 @@ function handleToolbarSlot(child, slots) {
   if (slots.toolbar && "hidden" in child.props) {
     slots.toolbar.hidden = child.props.hidden;
   }
+  if (slots.toolbar) {
+    Object.assign(slots.toolbar, (0, import_extract_behavior_tracking_props.extractBehaviorTrackingProps)(child.props));
+  }
 }

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

@@ -7,7 +7,7 @@ import type { MeterBarChartElementRef } from '../shared/types/meter-bars.js';
  * bar that gradually fills up with color or shading as it approaches the max value.
  * @public
  */
-export declare const MeterBarChart: ((props: PropsWithChildren<MeterBarChartProps> & import("react").RefAttributes<MeterBarChartElementRef>) => React.ReactElement | null) & {
+export declare const MeterBarChart: ((props: PropsWithChildren<MeterBarChartProps> & import("react").RefAttributes<MeterBarChartElementRef>) => import("react").ReactElement | null) & {
     Value: {
         ({ children }: PropsWithChildren): import("react/jsx-runtime.js").JSX.Element;
         displayName: string;

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

@@ -38,6 +38,7 @@ var import_MeterBarChartPlotArea = require("./components/MeterBarChartPlotArea.j
 var import_MeterBarChartThresholdLegend = require("./components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js");
 var import_constants = require("./constants.js");
 var import_useMeterBarChartConfig = require("./hooks/useMeterBarChartConfig.js");
+var import_MeterBarChartInternalDataProviders = require("./providers/MeterBarChartInternalDataProviders.js");
 var import_MeterBarChartProviders = require("./providers/MeterBarChartProviders.js");
 var import_Label = require("./slots/Label.js");
 var import_Max = require("./slots/Max.js");
@@ -46,24 +47,24 @@ var import_ThresholdIndicator = require("./slots/ThresholdIndicator.js");
 var import_ThresholdLegend = require("./slots/ThresholdLegend.js");
 var import_Tooltip = require("./slots/Tooltip.js");
 var import_Value = require("./slots/Value.js");
-var import_build_thresholds = require("./utils/build-thresholds.js");
-var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
+var import_useBehavioralTrackingProps = require("../../../core/hooks/useBehavioralTrackingProps.js");
 var import_Intent = require("../../../core/slots/Intent/Intent.js");
 var import_defaultChartValues_css = require("../../../core/styles/defaultChartValues.sty.js");
 var import_constants2 = require("../../core/constants.js");
-var import_ColorRuleContext = require("../../core/context/ColorRuleContext.js");
-var import_useObserveContainerSize = require("../../core/hooks/useObserveContainerSize.js");
 var import_ColorRule = require("../../core/slots/ColorRule.js");
 var import_chart_types = require("../../core/types/chart-types.js");
 var import_MeterBarChartFormattedValue = require("../shared/components/formatted-value/MeterBarChartFormattedValue.js");
 var import_MeterBarLayout = require("../shared/components/meter-bar-layout/MeterBarLayout.js");
-var import_constants3 = require("../shared/constants.js");
 var import_Toolbar = require("../shared/slots/Toolbar.js");
 var import_get_numeric_value = require("../shared/utils/get-numeric-value.js");
 const COMPONENT_NAME = "SingleMeterBarChart";
 const MeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
+    width,
+    height,
     value,
+    name,
+    color,
     className,
     style,
     "data-dtrum-mask": dataDtrumMask,
@@ -72,9 +73,11 @@ const MeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     prefixIcon,
     valueAccessor
   } = props;
+  const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const config = (0, import_useMeterBarChartConfig.useMeterBarChartConfig)(props);
   const {
     size,
+    thresholds,
     thresholdsIndicators,
     min,
     max,
@@ -83,9 +86,11 @@ const MeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     valueSlot,
     labelSlot,
     tooltip,
-    formatter
+    formatter,
+    unit
   } = config;
   const meterBarChartRef = (0, import_react.useRef)(null);
+  const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;
   (0, import_react.useImperativeHandle)(forwardedRef, () => {
     let exposedRef = {};
     if (meterBarChartRef.current) {
@@ -95,6 +100,7 @@ const MeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
         min,
         max,
         formatter,
+        unit,
         tooltip
       };
       exposedRef = {
@@ -104,62 +110,56 @@ const MeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     }
     return exposedRef;
   });
-  const [{ width, wrapperHeight }, containerRef] = (0, import_useObserveContainerSize.useObserveContainerSize)();
-  const ref = (0, import_useMergeRefs.useMergeRefs)([containerRef, meterBarChartRef]);
   const displayValue = (0, import_get_numeric_value.getNumericValue)(
     value,
     valueAccessor ?? import_constants2.DEFAULT_VALUE_ACCESSOR
   );
-  const { matchingThreshold, thresholdIndicators, legendItems } = (0, import_build_thresholds.buildThresholds)(displayValue, min, max, width, thresholdsIndicators);
-  const hasLegend = thresholdsIndicators.legend && legendItems.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_MeterBarChartProviders.MeterBarChartProviders,
+  const internalDataProvidersProps = {
+    value,
+    displayValue,
+    valueAccessor,
+    name,
+    color
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartProviders.MeterBarChartProviders, { config, seriesActions: props.seriesActions, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_MeterBarLayout.MeterBarLayout,
     {
-      containerWidth: width,
-      matchingThresholdColor: matchingThreshold?.color,
-      meterBarChartInternal: config,
-      meterBarChartProps: props,
-      thresholdIndicators,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_MeterBarLayout.MeterBarLayout,
-        {
-          ref,
-          size,
-          className: (0, import_clsx.default)(import_defaultChartValues_css.defaultChartSize, className),
-          style,
-          "data-dtrum-mask": dataDtrumMask,
-          "data-dtrum-allow": dataDtrumAllow,
-          "data-testid": dataTestId,
-          "aria-label": import_constants.METER_BAR_CHART_ARIA_LABEL,
-          "data-dt-component": COMPONENT_NAME,
-          children: [
-            prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Icon, { children: prefixIcon }),
-            labelSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Label, { children: labelSlot }),
-            valueSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_MeterBarChartFormattedValue.MeterBarChartFormattedValue,
-              {
-                value: displayValue,
-                total: max,
-                auto: valueSlot?.auto,
-                children: valueSlot?.value
-              }
-            ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Chart, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartPlotArea.MeterBarChartPlotArea, {}) }),
-            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,
-              {
-                data: legendItems,
-                legendSize: {
-                  width,
-                  height: wrapperHeight * import_constants3.LEGEND_VERTICAL_RATIO
-                }
-              }
-            ) })
-          ]
-        }
-      )
+      ...behavioralTrackingProps,
+      ref: meterBarChartRef,
+      size,
+      width,
+      height,
+      className: (0, import_clsx.default)(import_defaultChartValues_css.defaultChartSize, className),
+      style,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      "data-testid": dataTestId,
+      "data-dt-component": COMPONENT_NAME,
+      "aria-label": import_constants.METER_BAR_CHART_ARIA_LABEL,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_MeterBarLayout.MeterBarLayout.Providers,
+          {
+            providerName: import_MeterBarChartInternalDataProviders.MeterBarChartInternalDataProviders,
+            providerProps: internalDataProvidersProps
+          }
+        ),
+        prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Icon, { children: prefixIcon }),
+        labelSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Label, { children: labelSlot }),
+        valueSlot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Value, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_MeterBarChartFormattedValue.MeterBarChartFormattedValue,
+          {
+            value: displayValue,
+            total: max,
+            auto: valueSlot?.auto,
+            children: valueSlot?.value
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarLayout.MeterBarLayout.Chart, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartPlotArea.MeterBarChartPlotArea, {}) }),
+        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/MeterBarChartOverlay.css

@@ -1,4 +1,4 @@
-._s444hp0-3-1-3 {
+._s444hp0-3-2-1 {
   position: relative;
   z-index: 1;
 }

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

@@ -35,19 +35,31 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_MeterBarChartOverlay_css = require("./MeterBarChartOverlay.sty.js");
+var import_Flex = require("../../../../../layouts/flex/Flex.js");
 var import_MeterBarLayoutSize_context = require("../../../shared/context/MeterBarLayoutSize.context.js");
 var import_MeterBarOverlayRefContext = require("../../../shared/contexts/MeterBarOverlayRefContext.js");
+var import_use_tooltip_handlers = require("../../../shared/hooks/use-tooltip-handlers.js");
 var import_element_size_css = require("../../../shared/styles/element-size.sty.js");
 var import_MeterBarChartTooltip = require("../MeterBarChartTooltip/MeterBarChartTooltip.js");
 const MeterBarChartOverlay = ({ children }) => {
   const { size } = (0, import_MeterBarLayoutSize_context.useMeterBarLayoutSize)();
   const overlayRef = (0, import_react.useRef)(null);
+  const {
+    onMouseEnterHandler,
+    onMouseLeaveHandler,
+    onMouseMoveHandler,
+    onMouseClickHandler
+  } = (0, import_use_tooltip_handlers.useTooltipHandlers)(overlayRef);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarOverlayRefContext.MeterBarOverlayRefContext.Provider, { value: overlayRef, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+    import_Flex.Flex,
     {
       ref: overlayRef,
       className: (0, import_clsx.default)(import_MeterBarChartOverlay_css.container, (0, import_element_size_css.elementSize)({ size })),
       "data-testid": "overlay-wrapper",
+      onMouseEnter: onMouseEnterHandler,
+      onMouseLeave: onMouseLeaveHandler,
+      onMouseMove: onMouseMoveHandler,
+      onClick: onMouseClickHandler,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarChartTooltip.MeterBarChartTooltip, {}),
         children

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

@@ -22,4 +22,4 @@ __export(MeterBarChartOverlay_css_exports, {
 });
 module.exports = __toCommonJS(MeterBarChartOverlay_css_exports);
 var import_MeterBarChartOverlay_css_ts_vanilla = require("./MeterBarChartOverlay.css");
-var container = "_s444hp0-3-1-3";
+var container = "_s444hp0-3-2-1";

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

@@ -24,16 +24,20 @@ module.exports = __toCommonJS(MeterBarChartSegment_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_constants = require("../../../../core/constants.js");
 var import_MeterBarSegment = require("../../../shared/components/meter-bar-segment/MeterBarSegment.js");
+var import_MeterBarLayoutSize_context = require("../../../shared/context/MeterBarLayoutSize.context.js");
 var import_get_numeric_value = require("../../../shared/utils/get-numeric-value.js");
 var import_get_segment_width = require("../../../shared/utils/get-segment-width.js");
 var import_MeterBarChartDataContext = require("../../context/MeterBarChartDataContext.js");
+var import_MeterBarChartInternalConfigContext = require("../../context/MeterBarChartInternalConfigContext.js");
 const MeterBarChartSegment = () => {
-  const { color, value, min, max, width, valueAccessor } = (0, import_MeterBarChartDataContext.useMeterBarChartData)();
+  const { color, value, valueAccessor } = (0, import_MeterBarChartDataContext.useMeterBarChartData)();
+  const { min, max } = (0, import_MeterBarChartInternalConfigContext.useMeterBarChartInternalConfig)();
+  const { segmentWidth: width } = (0, import_MeterBarLayoutSize_context.useMeterBarLayoutSize)();
   const displayValue = (0, import_get_numeric_value.getNumericValue)(
     value,
     valueAccessor ?? import_constants.DEFAULT_VALUE_ACCESSOR
   );
   const segmentWidth = (0, import_get_segment_width.getSegmentWidth)(displayValue, min, max, width);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarSegment.MeterBarSegment, { color, width: segmentWidth });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MeterBarSegment.MeterBarSegment, { color, width: segmentWidth }) });
 };
 MeterBarChartSegment["displayName"] = "MeterBarChartSegment";

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

@@ -1,13 +1,4 @@
-import { LegendItem } from '../../../../core/components/legend/categorical/types/legend.js';
-import type { Dimensions } from '../../../../core/types/dimensions.js';
 /**
  * @internal
  */
-export interface MeterBarChartThresholdLegendProps {
-    legendSize: Dimensions;
-    data: LegendItem[];
-}
-/**
- * @internal
- */
-export declare const MeterBarChartThresholdLegend: ({ data, legendSize, }: MeterBarChartThresholdLegendProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const MeterBarChartThresholdLegend: () => import("react/jsx-runtime.js").JSX.Element | null;

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

@@ -24,10 +24,17 @@ module.exports = __toCommonJS(MeterBarChartThresholdLegend_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ChartLegend = require("../../../../core/components/legend/categorical/ChartLegend.js");
 var import_LegendSizeContext = require("../../../../core/components/legend/shared/context/LegendSizeContext.js");
-const MeterBarChartThresholdLegend = ({
-  data,
-  legendSize
-}) => {
+var import_MeterBarLayoutSize_context = require("../../../shared/context/MeterBarLayoutSize.context.js");
+var import_MeterBarChartDataContext = require("../../context/MeterBarChartDataContext.js");
+var import_MeterBarChartInternalConfigContext = require("../../context/MeterBarChartInternalConfigContext.js");
+const MeterBarChartThresholdLegend = () => {
+  const { legendItems: data } = (0, import_MeterBarChartDataContext.useMeterBarChartData)();
+  const { thresholds, thresholdsIndicators } = (0, import_MeterBarChartInternalConfigContext.useMeterBarChartInternalConfig)();
+  const { segmentWidth, segmentHeight } = (0, import_MeterBarLayoutSize_context.useMeterBarLayoutSize)();
+  const legendSize = { width: segmentWidth, height: segmentHeight };
+  if (!data?.length || !(thresholds.legend ?? thresholdsIndicators.legend)) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LegendSizeContext.LegendSizeContext.Provider, { value: legendSize, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartLegend.ChartLegend,
     {

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

@@ -1,4 +1,4 @@
-._1kt6hkd0-3-1-3 {
+._1kt6hkd0-3-2-1 {
   width: 100%;
   position: absolute;
   top: -4px;

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

@@ -22,4 +22,4 @@ __export(MeterBarChartThresholds_css_exports, {
 });
 module.exports = __toCommonJS(MeterBarChartThresholds_css_exports);
 var import_MeterBarChartThresholds_css_ts_vanilla = require("./MeterBarChartThresholds.css");
-var thresholdContainer = "_1kt6hkd0-3-1-3";
+var thresholdContainer = "_1kt6hkd0-3-2-1";