@dynatrace/strato-components 3.5.2 → 3.7.0

package/charts/index.js

@@ -48,9 +48,10 @@ __export(charts_exports, {
   SingleValueConfig: () => import_use_single_value_config.SingleValueConfig,
   SingleValueGrid: () => import_SingleValueGrid.SingleValueGrid,
   Sparkline: () => import_Sparkline.Sparkline,
-  TimeseriesAnnotations: () => import_TimeseriesChartRoot.TimeseriesAnnotations,
-  TimeseriesChart: () => import_TimeseriesChartRoot.TimeseriesChart,
+  TimeseriesAnnotations: () => import_TimeseriesChart.TimeseriesAnnotations,
+  TimeseriesChart: () => import_TimeseriesChart.TimeseriesChart,
   TimeseriesChartConfig: () => import_TimeseriesChartConfig_context.TimeseriesChartConfig,
+  TopList: () => import_TopList.TopList,
   TreeMap: () => import_TreeMap.TreeMap,
   TreeMapConfig: () => import_TreeMapConfigContext.TreeMapConfig,
   VERTICAL_LABEL_LAYOUT_TYPE: () => import_types.VERTICAL_LABEL_LAYOUT_TYPE,
@@ -80,11 +81,7 @@ __export(charts_exports, {
   _MeterBarChartThresholdLegend: () => import_MeterBarChartThresholdLegend.MeterBarChartThresholdLegend,
   _OverlayProvider: () => import_OverlayContext.OverlayProvider,
   _OverlayTooltip: () => import_OverlayTooltip.OverlayTooltip,
-  _OverlayTooltipCustomStory: () => import_OverlayTooltipWIPStory.OverlayTooltipCustomStory,
-  _OverlayTooltipHeaderStory: () => import_OverlayTooltipWIPStory.OverlayTooltipHeaderStory,
   _OverlayTooltipProvider: () => import_TooltipContext.TooltipProvider,
-  _OverlayTooltipTruncationStory: () => import_OverlayTooltipWIPStory.OverlayTooltipTruncationStory,
-  _OverlayTooltipWIPStory: () => import_OverlayTooltipWIPStory.OverlayTooltipWIPStory,
   _RangeLegend: () => import_RangeLegend.RangeLegend,
   _SeriesItem: () => import_SeriesItem.SeriesItem,
   _TextHeader: () => import_TextHeader.TextHeader,
@@ -93,8 +90,6 @@ __export(charts_exports, {
   _TimeFrameHeader: () => import_TimeFrameHeader.TimeFrameHeader,
   _TrackAtom: () => import_TrackAtom.TrackAtom,
   _XYChartTooltipBody: () => import_XYChartTooltipBody.XYChartTooltipBody,
-  _XYChartTooltipHeader: () => import_XYChartTooltipHeader.XYChartTooltipHeader,
-  _XYChartTooltipTemplate: () => import_XYChartTooltipTemplate.XYChartTooltipTemplate,
   _automaticColoringMap: () => import_color_palettes_definitions2.automaticColoringMap,
   _automaticColoringOptions: () => import_color_palette2.automaticColoringOptions,
   _buildCategoricalItemsFromScale: () => import_build_categorical_items_from_scale.buildCategoricalItemsFromScale,
@@ -130,6 +125,8 @@ __export(charts_exports, {
   _useMousePosition: () => import_useMousePosition.useMousePosition,
   _useObserveContainerSize: () => import_useObserveContainerSize.useObserveContainerSize,
   _useOverlayChart: () => import_OverlayContext.useOverlay,
+  _useOverlayTooltipActions: () => import_useTooltipActions.useTooltipActions,
+  _useOverlayTooltipData: () => import_useTooltipData.useTooltipData,
   _useOverlayTooltipDefaultLabels: () => import_useDefaultLabels2.useDefaultLabels,
   _useOverlayTooltipReducer: () => import_useTooltipReducer.useTooltipReducer,
   _useOverlayTooltipStore: () => import_TooltipContext.useTooltip,
@@ -190,8 +187,9 @@ var import_useDefaultLabels = require("./core/components/overlay-tooltip/hooks/u
 var import_OverlayContext = require("./core/components/overlay-tooltip/contexts/OverlayContext.js");
 var import_TooltipContext = require("./core/components/overlay-tooltip/contexts/TooltipContext.js");
 var import_useTooltipReducer = require("./core/components/overlay-tooltip/useTooltipReducer.js");
+var import_useTooltipData = require("./core/components/overlay-tooltip/hooks/useTooltipData.js");
+var import_useTooltipActions = require("./core/components/overlay-tooltip/useTooltipActions.js");
 var import_useDefaultLabels2 = require("./core/components/overlay-tooltip/hooks/useDefaultLabels.js");
-var import_OverlayTooltipWIPStory = require("./core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.js");
 var import_constants = require("./core/constants.js");
 var import_a11yToolbarControls = require("./core/utils/a11yToolbarControls.js");
 var import_a11yToolbarControls2 = require("./core/utils/a11yToolbarControls.js");
@@ -235,7 +233,7 @@ var import_SingleValue = require("./single-value/SingleValue.js");
 var import_SingleValueGrid = require("./single-value-grid/SingleValueGrid.js");
 var import_use_single_value_config = require("./single-value/hooks/use-single-value-config.js");
 var import_Sparkline = require("./sparkline/Sparkline.js");
-var import_TimeseriesChartRoot = require("./timeseries/TimeseriesChartRoot.js");
+var import_TimeseriesChart = require("./timeseries/TimeseriesChart.js");
 var import_TimeseriesChartConfig_context = require("./timeseries/context/TimeseriesChartConfig.context.js");
 var import_ChartInteractions = require("./core/slots/chart-interactions/ChartInteractions.js");
 var import_convert_to_timeseries = require("./timeseries/utils/convert-to-timeseries/convert-to-timeseries.js");
@@ -246,9 +244,8 @@ var import_get_dimensions = require("./timeseries/utils/convert-to-timeseries/ut
 var import_get_metadata_metrics_unit_for_field_name = require("./timeseries/utils/convert-to-timeseries/utils/get-metadata-metrics-unit-for-field-name.js");
 var import_XYChartRoot = require("./xy-chart/XYChartRoot.js");
 var import_XYChartConfig_context = require("./xy-chart/context/XYChartConfig.context.js");
-var import_XYChartTooltipTemplate = require("./xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.js");
-var import_XYChartTooltipHeader = require("./xy-chart/components/tooltip/XYChartTooltipHeader/XYChartTooltipHeader.js");
 var import_XYChartTooltipBody = require("./xy-chart/components/tooltip/XYChartTooltipBody/XYChartTooltipBody.js");
+var import_TopList = require("./top-list/TopList.js");
 var import_TreeMap = require("./tree-map/TreeMap.js");
 var import_TreeMapConfigContext = require("./tree-map/context/TreeMapConfigContext.js");
 var import_useMousePosition = require("./core/hooks/useMousePosition.js");

package/charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js

@@ -97,7 +97,7 @@ const MultiMeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef
     max,
     formatter,
     unit,
-    tooltip,
+    tooltip: { hidden: tooltip.hidden, variant: tooltip.variant },
     legend,
     loading
   };

package/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlay.js

@@ -43,7 +43,7 @@ const MultiMeterBarChartOverlay = ({ children }) => {
   const { size } = (0, import_MeterBarLayoutSizeContext.useMeterBarLayoutSize)();
   const { tooltipConfig } = (0, import_MultiMeterBarChartTooltipContext.useMultiMeterBarChartTooltipData)();
   const loading = (0, import_MeterBarChartLoadingContext.useMeterBarChartLoading)();
-  if (!tooltipConfig.enabled || loading) {
+  if (tooltipConfig.hidden || loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Flex.Flex,
       {

package/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlayWithTooltip.js

@@ -36,16 +36,33 @@ var import_react = require("react");
 var import_Flex = require("../../../../../layouts/flex/Flex.js");
 var import_InteractionsOverlay_css = require("../../../../core/components/interactions-overlay/InteractionsOverlay.sty.js");
 var import_OverlayContext = require("../../../../core/components/overlay-tooltip/contexts/OverlayContext.js");
+var import_useTooltipData = require("../../../../core/components/overlay-tooltip/hooks/useTooltipData.js");
+var import_OverlayTooltip = require("../../../../core/components/overlay-tooltip/OverlayTooltip.js");
+var import_utils = require("../../../../core/components/overlay-tooltip/utils.js");
 var import_ChartSeriesActionContext = require("../../../../core/components/series-action/ChartSeriesActionContext.js");
 var import_MeterBarChartTooltip = require("../../../shared/components/meter-bar-tooltip/MeterBarChartTooltip.js");
 var import_FormatterContext = require("../../../shared/context/FormatterContext.js");
 var import_MeterBarLayoutSizeContext = require("../../../shared/context/MeterBarLayoutSizeContext.js");
 var import_element_size_css = require("../../../shared/styles/element-size.sty.js");
 var import_styles_css = require("../../../shared/styles.sty.js");
+var import_get_numeric_value = require("../../../shared/utils/get-numeric-value.js");
 var import_constants = require("../../constants.js");
 var import_MultiMeterBarChartTooltipContext = require("../../context/MultiMeterBarChartTooltipContext.js");
 var import_selectors = require("../../hooks/store/selectors.js");
 var import_useMultiMeterBarChartTooltipHandlers = require("../../hooks/useMultiMeterBarChartTooltipHandlers.js");
+const MultiMeterBarCustomTooltip = ({
+  template,
+  visibleSegments,
+  hoveredIndex
+}) => {
+  const segments = visibleSegments.map((s) => ({
+    name: s.name ?? "",
+    value: (0, import_get_numeric_value.getNumericValue)(s.value, s.valueAccessor),
+    color: s.color ?? ""
+  }));
+  const activeSegment = hoveredIndex !== void 0 && segments[hoveredIndex] ? { ...segments[hoveredIndex], index: hoveredIndex } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: template({ segments, activeSegment }) });
+};
 const MultiMeterBarChartOverlayWithTooltip = (props) => {
   const [hoveredSegmentIndex, setHoveredSegmentIndex] = (0, import_react.useState)(void 0);
   const overlay = (0, import_OverlayContext.useOverlay)();
@@ -67,6 +84,22 @@ const MultiMeterBarChartOverlayWithTooltip = (props) => {
     }))
   };
   const { onClick, onPointerMove, onPointerLeave } = (0, import_useMultiMeterBarChartTooltipHandlers.useMultiMeterBarChartTooltipHandlers)(sharedData, setHoveredSegmentIndex);
+  const { data: tooltipData } = (0, import_useTooltipData.useTooltipData)();
+  const tooltipContent = tooltipConfig.template && !(0, import_utils.isTooltipDataEmpty)(tooltipData) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    MultiMeterBarCustomTooltip,
+    {
+      template: tooltipConfig.template,
+      visibleSegments,
+      hoveredIndex: hoveredSegmentIndex
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_MeterBarChartTooltip.MeterBarChartTooltip,
+    {
+      variant: isSharedTooltip ? import_constants.TOOLTIP_VARIANT.Shared : import_constants.TOOLTIP_VARIANT.Single,
+      activeItem: hoveredSegmentIndex ?? -1,
+      actionsForItem: chartSeriesActions ? (item) => () => chartSeriesActions(item) : void 0
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
@@ -78,14 +111,7 @@ const MultiMeterBarChartOverlayWithTooltip = (props) => {
       onClick,
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_MeterBarChartTooltip.MeterBarChartTooltip,
-          {
-            variant: isSharedTooltip ? import_constants.TOOLTIP_VARIANT.Shared : import_constants.TOOLTIP_VARIANT.Single,
-            activeItem: hoveredSegmentIndex ?? -1,
-            actionsForItem: chartSeriesActions ? (item) => () => chartSeriesActions(item) : void 0
-          }
-        )
+        tooltipContent
       ]
     }
   );

package/charts/meter-bar/multi-meter-bar/default.d.ts

@@ -6,7 +6,7 @@ export declare const defaultConfig: {
     min: number;
     max: number;
     tooltip: {
-        enabled: boolean;
+        hidden: boolean;
         variant: "single";
     };
     formatter: (v: number) => string;

package/charts/meter-bar/multi-meter-bar/default.js

@@ -29,7 +29,7 @@ const defaultConfig = {
   size: import_constants.SIZE_DEFAULT,
   min: import_constants.MIN_DEFAULT_VALUE,
   max: import_constants.MAX_DEFAULT_VALUE,
-  tooltip: { enabled: false, variant: TOOLTIP_VARIANT_DEFAULT },
+  tooltip: { hidden: false, variant: TOOLTIP_VARIANT_DEFAULT },
   formatter: import_constants.DEFAULT_FORMATTER,
   legend: false,
   loading: false

package/charts/meter-bar/multi-meter-bar/hooks/useMultiMeterBarChartTooltipHandlers.js

@@ -21,15 +21,14 @@ __export(useMultiMeterBarChartTooltipHandlers_exports, {
 });
 module.exports = __toCommonJS(useMultiMeterBarChartTooltipHandlers_exports);
 var import_TooltipContext = require("../../../core/components/overlay-tooltip/contexts/TooltipContext.js");
-var import_useTooltipReducer = require("../../../core/components/overlay-tooltip/useTooltipReducer.js");
-var import_utils = require("../../../core/components/overlay-tooltip/utils.js");
+var import_useTooltipActions = require("../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_constants = require("../constants.js");
 var import_MultiMeterBarChartTooltipContext = require("../context/MultiMeterBarChartTooltipContext.js");
 const useMultiMeterBarChartTooltipHandlers = (data, setHoveredSegmentIndex) => {
   const tooltip = (0, import_TooltipContext.useTooltip)();
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const { hover, pin, unpin, outOfBounds } = (0, import_useTooltipActions.useTooltipActions)();
   const { tooltipConfig } = (0, import_MultiMeterBarChartTooltipContext.useMultiMeterBarChartTooltipData)();
-  const isSharedTooltip = tooltipConfig.variant === import_constants.TOOLTIP_VARIANT.Shared;
+  const isSharedTooltip = tooltipConfig.variant === import_constants.TOOLTIP_VARIANT.Shared || !!tooltipConfig.template;
   const buildSingleSeriesData = (segmentEl) => {
     const index = Number(segmentEl.getAttribute("data-segment-index"));
     const series = [data.series[index]];
@@ -40,39 +39,16 @@ const useMultiMeterBarChartTooltipHandlers = (data, setHoveredSegmentIndex) => {
   };
   const onClick = (event) => {
     if (tooltip.getState().pinned) {
-      dispatch({
-        type: "SET_PINNED",
-        payload: {
-          pinned: false,
-          data: (0, import_utils.emptyData)()
-        }
-      })();
+      unpin();
     } else {
-      const { offsetX, offsetY } = event.nativeEvent;
       if (isSharedTooltip) {
-        dispatch({
-          type: "SET_PINNED",
-          payload: {
-            pinned: true,
-            relativeX: offsetX,
-            relativeY: offsetY,
-            data
-          }
-        })();
+        pin(event, data);
       } else {
         const segmentEl = event.target.closest(
           "[data-segment-index]"
         );
         if (segmentEl) {
-          dispatch({
-            type: "SET_PINNED",
-            payload: {
-              pinned: true,
-              relativeX: offsetX,
-              relativeY: offsetY,
-              data: buildSingleSeriesData(segmentEl)
-            }
-          })();
+          pin(event, buildSingleSeriesData(segmentEl));
         }
       }
     }
@@ -85,18 +61,15 @@ const useMultiMeterBarChartTooltipHandlers = (data, setHoveredSegmentIndex) => {
           segmentEl ? Number(segmentEl.getAttribute("data-segment-index")) : void 0
         );
       }
-      dispatch({ type: "SET_POSITION", payload: data })(event);
+      hover(event, data);
     } else if (segmentEl) {
-      dispatch({
-        type: "SET_POSITION",
-        payload: buildSingleSeriesData(segmentEl)
-      })(event);
+      hover(event, buildSingleSeriesData(segmentEl));
     } else {
-      dispatch({ type: "SET_OUT_BOUNDS" })();
+      outOfBounds();
     }
   };
   const onPointerLeave = () => {
-    dispatch({ type: "SET_OUT_BOUNDS" })();
+    outOfBounds();
   };
   return { onClick, onPointerMove, onPointerLeave };
 };

package/charts/meter-bar/multi-meter-bar/types/multi-meter-bar-chart-config.d.ts

@@ -83,8 +83,13 @@ export interface MultiMeterBarChartTooltipConsumerConfig {
      */
     variant?: MultiMeterBarChartTooltipVariant;
     /**
-     * Set to true to display the tooltip and false to hide it
+     * Set to true to hide the tooltip.
      * @defaultValue false
      */
+    hidden?: boolean;
+    /**
+     * @deprecated Use `hidden` instead (note the inverted polarity:
+     * `enabled: false` ⇒ `hidden: true`). (APPDEV-17990)
+     */
     enabled?: boolean;
 }

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

@@ -1,14 +1,16 @@
 import { type ReactNode } from 'react';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
-import type { MultiMeterBarChartTooltipProps, MultiMeterBarSegmentProps } from './multi-meter-bar-chart.js';
+import type { MultiMeterBarChartTooltipPayload, MultiMeterBarChartTooltipProps, MultiMeterBarSegmentProps } from './multi-meter-bar-chart.js';
 import type { ColorPalette, CustomColorPalette } from '../../../core/types/color-palette.js';
 import type { ColorRuleProps } from '../../../core/types/color-rule.js';
 import type { Formatter } from '../../../core/types/formatter.js';
 import type { MeterBarToolbarInternalProps } from '../../shared/types/meter-bar-toolbar.js';
 import type { MeterBarSize, SlotWithAutoDefault } from '../../shared/types/meter-bars.js';
 /** internal */
-export interface MultiMeterBarChartInternalTooltipConfig extends MultiMeterBarChartTooltipProps {
-    enabled: boolean;
+export interface MultiMeterBarChartInternalTooltipConfig {
+    hidden?: boolean;
+    variant?: MultiMeterBarChartTooltipProps['variant'];
+    template?: (payload: MultiMeterBarChartTooltipPayload) => ReactNode;
 }
 export interface MultiMeterBarChartInternalConfig {
     segments: MultiMeterBarSegmentProps[];

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

@@ -125,13 +125,52 @@ export declare const multiMeterBarChartTooltipVariantOptions: readonly ["single"
  * @public
  */
 export type MultiMeterBarChartTooltipVariant = (typeof multiMeterBarChartTooltipVariantOptions)[number];
+/**
+ * A single segment's data passed to the custom tooltip render function.
+ * @public
+ */
+export interface MultiMeterBarChartTooltipSegmentPayload {
+    /** Segment name */
+    name: string;
+    /** Segment percentage value */
+    value: number;
+    /** Segment color */
+    color: string;
+}
+/**
+ * The currently active segment data passed to the custom tooltip render function, extending segment data with its index position.
+ * @public
+ */
+export interface MultiMeterBarChartActiveSegmentPayload extends MultiMeterBarChartTooltipSegmentPayload {
+    /** Index position of the active segment */
+    index: number;
+}
+/**
+ * Data passed to the custom tooltip render function for MultiMeterBarChart.
+ * @public
+ */
+export interface MultiMeterBarChartTooltipPayload {
+    /** All visible segments */
+    segments: MultiMeterBarChartTooltipSegmentPayload[];
+    /** Currently hovered segment, or undefined when none is hovered */
+    activeSegment: MultiMeterBarChartActiveSegmentPayload | undefined;
+}
 /**
  * @public
  */
 export interface MultiMeterBarChartTooltipProps {
+    /**
+     * Hides the tooltip when true.
+     * @defaultValue false
+     */
+    hidden?: boolean;
     /**
      * Variant to be used for the multi meter bar chart tooltip
      * @defaultValue "single"
      */
     variant?: MultiMeterBarChartTooltipVariant;
+    /**
+     * Custom render function. When provided, replaces the default tooltip content.
+     */
+    children?: (payload: MultiMeterBarChartTooltipPayload) => ReactNode;
 }

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

@@ -44,17 +44,24 @@ const getMaxValue = (totalValue, maxProperty, consumerConfigMax) => {
 };
 const isValidTooltipVariant = (tooltipVariant) => import_multi_meter_bar_chart.multiMeterBarChartTooltipVariantOptions.includes(tooltipVariant);
 const getTooltipConfig = (slots, consumerConfig) => {
-  const tooltip = (0, import_lodash_es.merge)(
+  let consumerTooltip;
+  if (consumerConfig.tooltip) {
+    const { hidden, variant: variant2 } = consumerConfig.tooltip;
+    const { enabled } = consumerConfig.tooltip;
+    const resolvedHidden = hidden !== void 0 ? hidden : enabled !== void 0 ? !enabled : void 0;
+    consumerTooltip = {
+      ...resolvedHidden !== void 0 && { hidden: resolvedHidden },
+      variant: variant2
+    };
+  }
+  const merged = (0, import_lodash_es.merge)(
     {},
     import_default.defaultConfig.tooltip,
-    consumerConfig.tooltip,
+    consumerTooltip,
     slots.tooltip
   );
-  const variant = isValidTooltipVariant(tooltip.variant) ? tooltip.variant : import_default.defaultConfig.tooltip.variant;
-  return {
-    ...tooltip,
-    variant
-  };
+  const variant = isValidTooltipVariant(merged.variant) ? merged.variant : import_default.defaultConfig.tooltip.variant;
+  return { ...merged, variant };
 };
 const buildMultiMeterBarChartConfig = (props, consumerConfig, slots) => {
   const size = props.size ?? consumerConfig.size ?? import_default.defaultConfig.size;

package/charts/meter-bar/multi-meter-bar/utils/iterate-slots.js

@@ -34,6 +34,10 @@ var import_Min = require("../slots/Min.js");
 var import_Segment = require("../slots/Segment.js");
 var import_Tooltip = require("../slots/Tooltip.js");
 var import_Value = require("../slots/Value.js");
+function handleMultiMeterTooltipSlot(child, slots) {
+  const { variant, hidden, children } = child.props;
+  slots.tooltip = { hidden: hidden ?? false, variant, template: children };
+}
 function iterateSlots(children) {
   const slots = {
     segments: [],
@@ -60,7 +64,7 @@ function iterateSlots(children) {
     } else if ((0, import_is_slot.isSlot)(child, import_Legend.Legend)) {
       slots.legend = !(child.props.hidden ?? false);
     } else if ((0, import_is_slot.isSlot)(child, import_Tooltip.Tooltip)) {
-      (0, import_slot_handlers.handleMultiMeterTooltipSlot)(child, slots);
+      handleMultiMeterTooltipSlot(child, slots);
     } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule)) {
       (0, import_slot_handlers.handleColorRuleSlot)(child, slots);
     } else if ((0, import_is_slot.isSlot)(child, import_Intent.Intent)) {

package/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.css

@@ -1,68 +1,68 @@
-._1m3udw10-3-5-2 {
+._1m3udw10-3-7-0 {
   display: flex;
   justify-content: center;
   grid-area: value;
   align-self: self-end;
   justify-self: end;
 }
-._1m3udw11-3-5-2 {
+._1m3udw11-3-7-0 {
   margin-bottom: var(--dt-spacings-size-2, 2px);
   align-items: center;
   height: 20px;
 }
-._1m3udw12-3-5-2 {
+._1m3udw12-3-7-0 {
   margin-bottom: var(--dt-spacings-size-4, 4px);
   align-items: end;
   height: 100%;
 }
-._1m3udw13-3-5-2 {
+._1m3udw13-3-7-0 {
   min-width: 0;
   transition: margin-right var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1m3udw14-3-5-2 {
+._1m3udw14-3-7-0 {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   transition: all var(--dt-animations-move-duration-fast, 150ms) var(--dt-animations-move-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._1m3udw15-3-5-2 {
+._1m3udw15-3-7-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   grid-area: min;
   align-self: center;
 }
-._1m3udw16-3-5-2 {
+._1m3udw16-3-7-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   grid-area: max;
   align-self: center;
   justify-self: end;
 }
-._1m3udw17-3-5-2 {
+._1m3udw17-3-7-0 {
   grid-area: legend;
   margin: var(--dt-spacings-size-4, 4px) 0 var(--dt-spacings-size-4, 4px);
 }
-._1m3udw18-3-5-2 {
+._1m3udw18-3-7-0 {
   gap: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-2, 2px);
   grid-area: label;
 }
-._1m3udw19-3-5-2 {
+._1m3udw19-3-7-0 {
   grid-area: chart;
 }
-._1m3udw1a-3-5-2 {
+._1m3udw1a-3-7-0 {
   width: 100%;
 }
-._1m3udw1b-3-5-2 {
+._1m3udw1b-3-7-0 {
   height: 100%;
 }
-._1m3udw1c-3-5-2 {
+._1m3udw1c-3-7-0 {
   height: fit-content;
 }
-._1m3udw1d-3-5-2 {
+._1m3udw1d-3-7-0 {
   position: relative;
   display: block;
   cursor: default;
   user-select: none;
 }
-._1m3udw1e-3-5-2 {
+._1m3udw1e-3-7-0 {
   overflow: hidden;
 }

package/charts/meter-bar/shared/components/meter-bar-layout/MeterBarLayout.sty.js

@@ -31,13 +31,13 @@ __export(MeterBarLayout_css_exports, {
 module.exports = __toCommonJS(MeterBarLayout_css_exports);
 var import_MeterBarLayout_css_ts_vanilla = require("./MeterBarLayout.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var chartContainer = "_1m3udw19-3-5-2";
-var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m3udw1a-3-5-2", variantClassNames: { autoSize: { true: "_1m3udw1b-3-5-2", false: "_1m3udw1c-3-5-2" }, showLoading: { true: "_1m3udw1d-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var containerWrapper = "_1m3udw1e-3-5-2";
-var labelContainer = "_1m3udw18-3-5-2";
-var legendContainer = "_1m3udw17-3-5-2";
-var maxContainer = "_1m3udw16-3-5-2";
-var minContainer = "_1m3udw15-3-5-2";
-var toolbarAnimatedContainer = "_1m3udw14-3-5-2";
-var valueAnimatedContainer = "_1m3udw13-3-5-2";
-var valueContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m3udw10-3-5-2", variantClassNames: { inline: { true: "_1m3udw11-3-5-2", false: "_1m3udw12-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var chartContainer = "_1m3udw19-3-7-0";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m3udw1a-3-7-0", variantClassNames: { autoSize: { true: "_1m3udw1b-3-7-0", false: "_1m3udw1c-3-7-0" }, showLoading: { true: "_1m3udw1d-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var containerWrapper = "_1m3udw1e-3-7-0";
+var labelContainer = "_1m3udw18-3-7-0";
+var legendContainer = "_1m3udw17-3-7-0";
+var maxContainer = "_1m3udw16-3-7-0";
+var minContainer = "_1m3udw15-3-7-0";
+var toolbarAnimatedContainer = "_1m3udw14-3-7-0";
+var valueAnimatedContainer = "_1m3udw13-3-7-0";
+var valueContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1m3udw10-3-7-0", variantClassNames: { inline: { true: "_1m3udw11-3-7-0", false: "_1m3udw12-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Icon/Icon.css

@@ -1,9 +1,9 @@
-._18riimf0-3-5-2 {
+._18riimf0-3-7-0 {
   width: 20px;
   height: 20px;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._18riimf0-3-5-2 > svg {
+._18riimf0-3-7-0 > svg {
   width: 100%;
   height: 100%;
 }

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Icon/Icon.sty.js

@@ -21,4 +21,4 @@ __export(Icon_css_exports, {
 });
 module.exports = __toCommonJS(Icon_css_exports);
 var import_Icon_css_ts_vanilla = require("./Icon.css");
-var container = "_18riimf0-3-5-2";
+var container = "_18riimf0-3-7-0";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.css

@@ -1,4 +1,4 @@
-._bh277f0-3-5-2 {
+._bh277f0-3-7-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Label/Label.sty.js

@@ -21,4 +21,4 @@ __export(Label_css_exports, {
 });
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
-var labelStyle = "_bh277f0-3-5-2";
+var labelStyle = "_bh277f0-3-7-0";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.css

@@ -1,4 +1,4 @@
-._xxg5xc0-3-5-2 {
+._xxg5xc0-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Max/Max.sty.js

@@ -21,4 +21,4 @@ __export(Max_css_exports, {
 });
 module.exports = __toCommonJS(Max_css_exports);
 var import_Max_css_ts_vanilla = require("./Max.css");
-var maxValue = "_xxg5xc0-3-5-2";
+var maxValue = "_xxg5xc0-3-7-0";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.css

@@ -1,4 +1,4 @@
-._16mgjbd0-3-5-2 {
+._16mgjbd0-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Min/Min.sty.js

@@ -21,4 +21,4 @@ __export(Min_css_exports, {
 });
 module.exports = __toCommonJS(Min_css_exports);
 var import_Min_css_ts_vanilla = require("./Min.css");
-var minValue = "_16mgjbd0-3-5-2";
+var minValue = "_16mgjbd0-3-7-0";

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.css

@@ -1,4 +1,4 @@
-._1euwfb00-3-5-2 {
+._1euwfb00-3-7-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);

package/charts/meter-bar/shared/components/meter-bar-layout/slots/Value/Value.sty.js

@@ -21,4 +21,4 @@ __export(Value_css_exports, {
 });
 module.exports = __toCommonJS(Value_css_exports);
 var import_Value_css_ts_vanilla = require("./Value.css");
-var valueStyle = "_1euwfb00-3-5-2";
+var valueStyle = "_1euwfb00-3-7-0";

package/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.css

@@ -1,4 +1,4 @@
-._12md1g60-3-5-2 {
+._12md1g60-3-7-0 {
   background-color: var(--dt-colors-theme-neutral-40, #dadbe4);
   width: 100%;
   display: block;

package/charts/meter-bar/shared/components/meter-bar-plot/MeterBarPlot.sty.js

@@ -21,4 +21,4 @@ __export(MeterBarPlot_css_exports, {
 });
 module.exports = __toCommonJS(MeterBarPlot_css_exports);
 var import_MeterBarPlot_css_ts_vanilla = require("./MeterBarPlot.css");
-var svgElement = "_12md1g60-3-5-2";
+var svgElement = "_12md1g60-3-7-0";