@dynatrace/strato-components 3.2.0 → 3.3.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/meter-bar/multi-meter-bar/MultiMeterBarChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { MultiMeterBarChartLegend } from './components/MultiMeterBarChartLegend.js';\nimport { MultiMeterBarChartPlotArea } from './components/MultiMeterBarChartPlotArea.js';\nimport { MULTIMETER_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useMultiMeterBarChartConfig } from './hooks/useMultiMeterBarChartConfig.js';\nimport { MultiMeterBarChartProviders } from './providers/MultiMeterBarChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { Legend } from './slots/Legend.js';\nimport { Max } from './slots/Max.js';\nimport { Min } from './slots/Min.js';\nimport { Segment } from './slots/Segment.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Value } from './slots/Value.js';\nimport type { MultiMeterBarChartConsumerConfig } from './types/multi-meter-bar-chart-config.js';\nimport type { MultiMeterBarChartProps } from './types/multi-meter-bar-chart.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../../core/styles/defaultChartValues.sty.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartType } from '../../core/types/chart-types.js';\nimport { MeterBarChartFormattedValue } from '../shared/components/formatted-value/MeterBarChartFormattedValue.js';\nimport { MeterBarLayout } from '../shared/components/meter-bar-layout/MeterBarLayout.js';\nimport { MIN_DEFAULT_VALUE, SIZE_DEFAULT } from '../shared/constants.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport type { MultiMeterBarChartElementRef } from '../shared/types/meter-bars.js';\n\nconst COMPONENT_NAME = 'MultiMeterBarChart';\n/**\n * Multi meter bar chart component\n */\nconst MultiMeterBarChartRoot = forwardRef<\n  MultiMeterBarChartElementRef,\n  PropsWithChildren<MultiMeterBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'multi-meter-bar-chart-root',\n    seriesActions,\n    prefixIcon,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useMultiMeterBarChartConfig(props);\n\n  const {\n    colorPalette,\n    size = SIZE_DEFAULT,\n    min = MIN_DEFAULT_VALUE,\n    max,\n    formatter,\n    unit,\n    labelSlot,\n    valueSlot,\n    minSlot,\n    maxSlot,\n    segments,\n    legend,\n    tooltip,\n    totalValue,\n    colorRules,\n    toolbar,\n  } = config;\n\n  const multiMeterBarChartRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as MultiMeterBarChartElementRef;\n\n    if (multiMeterBarChartRef.current) {\n      const consumerConfig: MultiMeterBarChartConsumerConfig = {\n        colorPalette,\n        size,\n        min,\n        max,\n        formatter,\n        unit,\n        tooltip,\n        legend,\n      };\n\n      exposedRef = {\n        element: multiMeterBarChartRef.current,\n        getConfig: () =>\n          JSON.stringify({ type: ChartType.MultiMeterBar, ...consumerConfig }),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  const label = labelSlot ?? '';\n\n  const contextSeriesActionsValue = useMemo(\n    () => ({\n      chartSeriesActions: seriesActions as (\n        series: unknown,\n        datapoint?: unknown,\n      ) => ReactElement,\n    }),\n    [seriesActions],\n  );\n\n  return (\n    <MultiMeterBarChartProviders\n      colorPalette={colorPalette}\n      formatter={formatter}\n      unit={unit}\n      segments={segments}\n      colorRules={colorRules}\n      toolbar={toolbar}\n    >\n      <ChartSeriesActionContext.Provider value={contextSeriesActionsValue}>\n        <MeterBarLayout\n          {...behavioralTrackingProps}\n          width={width}\n          height={height}\n          ref={multiMeterBarChartRef}\n          size={size}\n          className={clsx(defaultChartSize, className)}\n          style={style}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          data-testid={dataTestId}\n          aria-label={MULTIMETER_BAR_CHART_ARIA_LABEL}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {prefixIcon && (\n            <MeterBarLayout.Icon>{prefixIcon}</MeterBarLayout.Icon>\n          )}\n          {labelSlot && (\n            <MeterBarLayout.Label>{labelSlot}</MeterBarLayout.Label>\n          )}\n\n          {valueSlot && (\n            <MeterBarLayout.Value>\n              <MeterBarChartFormattedValue\n                value={totalValue}\n                total={max - min}\n                auto={valueSlot?.auto}\n              >\n                {valueSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Value>\n          )}\n\n          <MeterBarLayout.Chart>\n            <MultiMeterBarChartPlotArea\n              label={label}\n              max={max}\n              min={min}\n              tooltipConfig={tooltip}\n            />\n          </MeterBarLayout.Chart>\n\n          {minSlot && (\n            <MeterBarLayout.Min>\n              <MeterBarChartFormattedValue value={min} auto={minSlot?.auto}>\n                {minSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Min>\n          )}\n\n          {maxSlot && (\n            <MeterBarLayout.Max>\n              <MeterBarChartFormattedValue value={max} auto={maxSlot?.auto}>\n                {maxSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Max>\n          )}\n\n          {legend && (\n            <MeterBarLayout.Legend>\n              <MultiMeterBarChartLegend />\n            </MeterBarLayout.Legend>\n          )}\n        </MeterBarLayout>\n      </ChartSeriesActionContext.Provider>\n    </MultiMeterBarChartProviders>\n  );\n});\n\n(\n  MultiMeterBarChartRoot as typeof MultiMeterBarChartRoot & {\n    displayName: string;\n  }\n).displayName = '_MultiMeterBarChart';\n\n/**\n * The `MultiMeterBarChart` is a more complex version of the single meter bar,\n * it allows for different data inputs to be considered when presenting progress\n * toward a goal, consumption of a total, etc.\n * @public\n */\nexport const MultiMeterBarChart = Object.assign(MultiMeterBarChartRoot, {\n  Label,\n  Legend,\n  Max,\n  Min,\n  Segment,\n  Value,\n  Tooltip,\n  ColorRule,\n  Intent,\n  Toolbar,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { MultiMeterBarChartLegend } from './components/MultiMeterBarChartLegend.js';\nimport { MultiMeterBarChartPlotArea } from './components/MultiMeterBarChartPlotArea.js';\nimport { MULTIMETER_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useMultiMeterBarChartConfig } from './hooks/useMultiMeterBarChartConfig.js';\nimport { MultiMeterBarChartProviders } from './providers/MultiMeterBarChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { Legend } from './slots/Legend.js';\nimport { Max } from './slots/Max.js';\nimport { Min } from './slots/Min.js';\nimport { Segment } from './slots/Segment.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Value } from './slots/Value.js';\nimport type { MultiMeterBarChartConsumerConfig } from './types/multi-meter-bar-chart-config.js';\nimport type { MultiMeterBarChartProps } from './types/multi-meter-bar-chart.js';\nimport { useBehavioralTrackingProps } from '../../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../../core/styles/defaultChartValues.sty.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartType } from '../../core/types/chart-types.js';\nimport { MeterBarChartFormattedValue } from '../shared/components/formatted-value/MeterBarChartFormattedValue.js';\nimport { MeterBarLayout } from '../shared/components/meter-bar-layout/MeterBarLayout.js';\nimport { MIN_DEFAULT_VALUE, SIZE_DEFAULT } from '../shared/constants.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport type { MultiMeterBarChartElementRef } from '../shared/types/meter-bars.js';\n\nconst COMPONENT_NAME = 'MultiMeterBarChart';\n/**\n * Multi meter bar chart component\n */\nconst MultiMeterBarChartRoot = forwardRef<\n  MultiMeterBarChartElementRef,\n  PropsWithChildren<MultiMeterBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'multi-meter-bar-chart-root',\n    seriesActions,\n    prefixIcon,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useMultiMeterBarChartConfig(props);\n\n  const {\n    colorPalette,\n    size = SIZE_DEFAULT,\n    min = MIN_DEFAULT_VALUE,\n    max,\n    formatter,\n    unit,\n    labelSlot,\n    valueSlot,\n    minSlot,\n    maxSlot,\n    segments,\n    legend,\n    tooltip,\n    totalValue,\n    colorRules,\n    toolbar,\n  } = config;\n\n  const multiMeterBarChartRef = useRef<HTMLDivElement>(null);\n\n  const consumerConfig: MultiMeterBarChartConsumerConfig & {\n    type: ChartType.MultiMeterBar;\n  } = {\n    type: ChartType.MultiMeterBar,\n    colorPalette,\n    size,\n    min,\n    max,\n    formatter,\n    unit,\n    tooltip,\n    legend,\n  };\n\n  const label = labelSlot ?? '';\n\n  const contextSeriesActionsValue = useMemo(\n    () => ({\n      chartSeriesActions: seriesActions as (\n        series: unknown,\n        datapoint?: unknown,\n      ) => ReactElement,\n    }),\n    [seriesActions],\n  );\n\n  return (\n    <MultiMeterBarChartProviders\n      colorPalette={colorPalette}\n      formatter={formatter}\n      unit={unit}\n      segments={segments}\n      colorRules={colorRules}\n      toolbar={toolbar}\n    >\n      <ChartSeriesActionContext.Provider value={contextSeriesActionsValue}>\n        <MeterBarLayout\n          {...behavioralTrackingProps}\n          width={width}\n          height={height}\n          ref={multiMeterBarChartRef}\n          size={size}\n          className={clsx(defaultChartSize, className)}\n          style={style}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          data-testid={dataTestId}\n          aria-label={MULTIMETER_BAR_CHART_ARIA_LABEL}\n          data-dt-component={COMPONENT_NAME}\n          consumerConfig={consumerConfig}\n          userRef={forwardedRef}\n        >\n          {prefixIcon && (\n            <MeterBarLayout.Icon>{prefixIcon}</MeterBarLayout.Icon>\n          )}\n          {labelSlot && (\n            <MeterBarLayout.Label>{labelSlot}</MeterBarLayout.Label>\n          )}\n\n          {valueSlot && (\n            <MeterBarLayout.Value>\n              <MeterBarChartFormattedValue\n                value={totalValue}\n                total={max - min}\n                auto={valueSlot?.auto}\n              >\n                {valueSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Value>\n          )}\n\n          <MeterBarLayout.Chart>\n            <MultiMeterBarChartPlotArea\n              label={label}\n              max={max}\n              min={min}\n              tooltipConfig={tooltip}\n            />\n          </MeterBarLayout.Chart>\n\n          {minSlot && (\n            <MeterBarLayout.Min>\n              <MeterBarChartFormattedValue value={min} auto={minSlot?.auto}>\n                {minSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Min>\n          )}\n\n          {maxSlot && (\n            <MeterBarLayout.Max>\n              <MeterBarChartFormattedValue value={max} auto={maxSlot?.auto}>\n                {maxSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Max>\n          )}\n\n          {legend && (\n            <MeterBarLayout.Legend>\n              <MultiMeterBarChartLegend />\n            </MeterBarLayout.Legend>\n          )}\n        </MeterBarLayout>\n      </ChartSeriesActionContext.Provider>\n    </MultiMeterBarChartProviders>\n  );\n});\n\n(\n  MultiMeterBarChartRoot as typeof MultiMeterBarChartRoot & {\n    displayName: string;\n  }\n).displayName = '_MultiMeterBarChart';\n\n/**\n * The `MultiMeterBarChart` is a more complex version of the single meter bar,\n * it allows for different data inputs to be considered when presenting progress\n * toward a goal, consumption of a total, etc.\n * @public\n */\nexport const MultiMeterBarChart = Object.assign(MultiMeterBarChartRoot, {\n  Label,\n  Legend,\n  Max,\n  Min,\n  Segment,\n  Value,\n  Tooltip,\n  ColorRule,\n  Intent,\n  Toolbar,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartLegend.js

@@ -1,12 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { ChartLegend } from "../../../core/components/legend/categorical/ChartLegend.js";
 import { LegendSizeContext } from "../../../core/components/legend/shared/context/LegendSizeContext.js";
+import { useTooltipReducer } from "../../../core/components/overlay-tooltip/useTooltipReducer.js";
 import { useMeterBarLayoutSize } from "../../shared/context/MeterBarLayoutSize.context.js";
 import { useMultiMeterBarSegmentsState } from "../hooks/store/selectors.js";
 import { useMultiMeterBarStore } from "../hooks/useMultiMeterBarStore.js";
 const MultiMeterBarChartLegend = () => {
   const { segmentWidth: width } = useMeterBarLayoutSize();
   const { setVisibleSegments, setHighlightedSegment } = useMultiMeterBarStore();
+  const dispatch = useTooltipReducer();
   const segments = useMultiMeterBarSegmentsState();
   const legendItems = segments.map((segment) => ({
     id: segment.id,
@@ -17,6 +19,7 @@ const MultiMeterBarChartLegend = () => {
   }));
   const onClickHandler = (visibleSegments) => {
     setVisibleSegments(visibleSegments);
+    dispatch({ type: "RESET_TOOLTIP" })();
   };
   const onHoverHandler = (highlightedSegment) => setHighlightedSegment(highlightedSegment);
   return (

package/esm/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartLegend.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartLegend.tsx"],
-  "sourcesContent": ["import { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { LegendItem } from '../../../core/components/legend/categorical/types/legend.js';\nimport { LegendSizeContext } from '../../../core/components/legend/shared/context/LegendSizeContext.js';\nimport { useMeterBarLayoutSize } from '../../shared/context/MeterBarLayoutSize.context.js';\nimport { useMultiMeterBarSegmentsState } from '../hooks/store/selectors.js';\nimport { useMultiMeterBarStore } from '../hooks/useMultiMeterBarStore.js';\n\nexport const MultiMeterBarChartLegend = () => {\n  const { segmentWidth: width } = useMeterBarLayoutSize();\n  const { setVisibleSegments, setHighlightedSegment } = useMultiMeterBarStore();\n\n  const segments = useMultiMeterBarSegmentsState();\n\n  const legendItems = segments.map((segment) => ({\n    id: segment.id,\n    color: {\n      Default: segment.color,\n    },\n    name: segment.name,\n  }));\n\n  const onClickHandler = (visibleSegments: LegendItem[]) => {\n    setVisibleSegments(visibleSegments);\n  };\n\n  const onHoverHandler = (highlightedSegment?: LegendItem) =>\n    setHighlightedSegment(highlightedSegment);\n\n  return (\n    // the height value is set through the CSS style\n    (<LegendSizeContext.Provider value={{ width, height: 0 }}>\n      <ChartLegend\n        items={legendItems}\n        onClick={onClickHandler}\n        onHover={onHoverHandler}\n        style={{ height: '100% ' }}\n      />\n    </LegendSizeContext.Provider>)\n  );\n};\n\nMultiMeterBarChartLegend['displayName'] = 'MultiMeterBarChartLegend';\n"],
-  "mappings": "AA+BM;AA/BN,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,qCAAqC;AAC9C,SAAS,6BAA6B;AAE/B,MAAM,2BAA2B,MAAM;AAC5C,QAAM,EAAE,cAAc,MAAM,IAAI,sBAAsB;AACtD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,sBAAsB;AAE5E,QAAM,WAAW,8BAA8B;AAE/C,QAAM,cAAc,SAAS,IAAI,CAAC,aAAa;AAAA,IAC7C,IAAI,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,SAAS,QAAQ;AAAA,IACnB;AAAA,IACA,MAAM,QAAQ;AAAA,EAChB,EAAE;AAEF,QAAM,iBAAiB,CAAC,oBAAkC;AACxD,uBAAmB,eAAe;AAAA,EACpC;AAEA,QAAM,iBAAiB,CAAC,uBACtB,sBAAsB,kBAAkB;AAE1C;AAAA;AAAA,IAEG,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,OAAO,QAAQ,EAAE,GACrD;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO,EAAE,QAAQ,QAAQ;AAAA;AAAA,IAC3B,GACF;AAAA;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
+  "sourcesContent": ["import { ChartLegend } from '../../../core/components/legend/categorical/ChartLegend.js';\nimport { LegendItem } from '../../../core/components/legend/categorical/types/legend.js';\nimport { LegendSizeContext } from '../../../core/components/legend/shared/context/LegendSizeContext.js';\nimport { useTooltipReducer } from '../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { useMeterBarLayoutSize } from '../../shared/context/MeterBarLayoutSize.context.js';\nimport { useMultiMeterBarSegmentsState } from '../hooks/store/selectors.js';\nimport { useMultiMeterBarStore } from '../hooks/useMultiMeterBarStore.js';\n\nexport const MultiMeterBarChartLegend = () => {\n  const { segmentWidth: width } = useMeterBarLayoutSize();\n  const { setVisibleSegments, setHighlightedSegment } = useMultiMeterBarStore();\n  const dispatch = useTooltipReducer();\n\n  const segments = useMultiMeterBarSegmentsState();\n\n  const legendItems = segments.map((segment) => ({\n    id: segment.id,\n    color: {\n      Default: segment.color,\n    },\n    name: segment.name,\n  }));\n\n  const onClickHandler = (visibleSegments: LegendItem[]) => {\n    setVisibleSegments(visibleSegments);\n    dispatch({ type: 'RESET_TOOLTIP' })();\n  };\n\n  const onHoverHandler = (highlightedSegment?: LegendItem) =>\n    setHighlightedSegment(highlightedSegment);\n\n  return (\n    // the height value is set through the CSS style\n    <LegendSizeContext.Provider value={{ width, height: 0 }}>\n      <ChartLegend\n        items={legendItems}\n        onClick={onClickHandler}\n        onHover={onHoverHandler}\n        style={{ height: '100% ' }}\n      />\n    </LegendSizeContext.Provider>\n  );\n};\n\nMultiMeterBarChartLegend['displayName'] = 'MultiMeterBarChartLegend';\n"],
+  "mappings": "AAkCM;AAlCN,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,qCAAqC;AAC9C,SAAS,6BAA6B;AAE/B,MAAM,2BAA2B,MAAM;AAC5C,QAAM,EAAE,cAAc,MAAM,IAAI,sBAAsB;AACtD,QAAM,EAAE,oBAAoB,sBAAsB,IAAI,sBAAsB;AAC5E,QAAM,WAAW,kBAAkB;AAEnC,QAAM,WAAW,8BAA8B;AAE/C,QAAM,cAAc,SAAS,IAAI,CAAC,aAAa;AAAA,IAC7C,IAAI,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,SAAS,QAAQ;AAAA,IACnB;AAAA,IACA,MAAM,QAAQ;AAAA,EAChB,EAAE;AAEF,QAAM,iBAAiB,CAAC,oBAAkC;AACxD,uBAAmB,eAAe;AAClC,aAAS,EAAE,MAAM,gBAAgB,CAAC,EAAE;AAAA,EACtC;AAEA,QAAM,iBAAiB,CAAC,uBACtB,sBAAsB,kBAAkB;AAE1C;AAAA;AAAA,IAEE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,EAAE,OAAO,QAAQ,EAAE,GACpD;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,QACT,OAAO,EAAE,QAAQ,QAAQ;AAAA;AAAA,IAC3B,GACF;AAAA;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlay.css

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

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

@@ -1,38 +1,25 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useRef } from "react";
 import { container } from "./MultiMeterBarChartOverlay.sty.js";
+import { MultiMeterBarChartOverlayWithTooltip } from "./MultiMeterBarChartOverlayWithTooltip.js";
 import { Flex } from "../../../../../layouts/flex/Flex.js";
 import { useMeterBarLayoutSize } from "../../../shared/context/MeterBarLayoutSize.context.js";
-import { MeterBarOverlayRefContext } from "../../../shared/contexts/MeterBarOverlayRefContext.js";
-import { useTooltipHandlers } from "../../../shared/hooks/use-tooltip-handlers.js";
 import { elementSize } from "../../../shared/styles/element-size.sty.js";
-import { MultiMeterBarChartTooltip } from "../MultiMeterBarChartTooltip.js";
+import { useMultiMeterBarChartTooltipData } from "../../context/MultiMeterBarChartTooltipContext.js";
 const MultiMeterBarChartOverlay = ({ children }) => {
   const { size } = useMeterBarLayoutSize();
-  const overlayRef = useRef(null);
-  const {
-    onMouseEnterHandler,
-    onMouseLeaveHandler,
-    onMouseMoveHandler,
-    onMouseClickHandler
-  } = useTooltipHandlers(overlayRef);
-  return /* @__PURE__ */ jsx(MeterBarOverlayRefContext.Provider, { value: overlayRef, children: /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      ref: overlayRef,
-      className: clsx(container, elementSize({ size })),
-      "data-testid": "overlay-wrapper",
-      onMouseEnter: onMouseEnterHandler,
-      onMouseLeave: onMouseLeaveHandler,
-      onMouseMove: onMouseMoveHandler,
-      onClick: onMouseClickHandler,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(MultiMeterBarChartTooltip, {})
-      ]
-    }
-  ) });
+  const { tooltipConfig } = useMultiMeterBarChartTooltipData();
+  if (!tooltipConfig.enabled) {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        className: clsx(container, elementSize({ size })),
+        "data-testid": "overlay-wrapper",
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MultiMeterBarChartOverlayWithTooltip, { children });
 };
 export {
   MultiMeterBarChartOverlay

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlay.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren, useRef } from 'react';\n\nimport { container } from './MultiMeterBarChartOverlay.sty.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { MeterBarOverlayRefContext } from '../../../shared/contexts/MeterBarOverlayRefContext.js';\nimport { useTooltipHandlers } from '../../../shared/hooks/use-tooltip-handlers.js';\nimport { elementSize } from '../../../shared/styles/element-size.sty.js';\nimport { MultiMeterBarChartTooltip } from '../MultiMeterBarChartTooltip.js';\n\n// TODO use shared component for overlays if possible\nexport const MultiMeterBarChartOverlay = ({ children }: PropsWithChildren) => {\n  const { size } = useMeterBarLayoutSize();\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const {\n    onMouseEnterHandler,\n    onMouseLeaveHandler,\n    onMouseMoveHandler,\n    onMouseClickHandler,\n  } = useTooltipHandlers(overlayRef);\n\n  return (\n    <MeterBarOverlayRefContext.Provider value={overlayRef}>\n      <Flex\n        ref={overlayRef}\n        className={clsx(container, elementSize({ size }))}\n        data-testid=\"overlay-wrapper\"\n        onMouseEnter={onMouseEnterHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        onMouseMove={onMouseMoveHandler}\n        onClick={onMouseClickHandler}\n      >\n        {children}\n        <MultiMeterBarChartTooltip />\n      </Flex>\n    </MeterBarOverlayRefContext.Provider>\n  );\n};\n"],
-  "mappings": "AAwBM,SAUE,KAVF;AAxBN,OAAO,UAAU;AACjB,SAAiC,cAAc;AAE/C,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAGnC,MAAM,4BAA4B,CAAC,EAAE,SAAS,MAAyB;AAC5E,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,UAAU;AAEjC,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,YACzC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,MAChD,eAAY;AAAA,MACZ,cAAc;AAAA,MACd,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,MAER;AAAA;AAAA,QACD,oBAAC,6BAA0B;AAAA;AAAA;AAAA,EAC7B,GACF;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport type { PropsWithChildren } from 'react';\n\nimport { container } from './MultiMeterBarChartOverlay.sty.js';\nimport { MultiMeterBarChartOverlayWithTooltip } from './MultiMeterBarChartOverlayWithTooltip.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { elementSize } from '../../../shared/styles/element-size.sty.js';\nimport { useMultiMeterBarChartTooltipData } from '../../context/MultiMeterBarChartTooltipContext.js';\n\nexport const MultiMeterBarChartOverlay = ({ children }: PropsWithChildren) => {\n  const { size } = useMeterBarLayoutSize();\n  const { tooltipConfig } = useMultiMeterBarChartTooltipData();\n\n  if (!tooltipConfig.enabled) {\n    return (\n      <Flex\n        className={clsx(container, elementSize({ size }))}\n        data-testid=\"overlay-wrapper\"\n      >\n        {children}\n      </Flex>\n    );\n  }\n\n  return (\n    <MultiMeterBarChartOverlayWithTooltip>\n      {children}\n    </MultiMeterBarChartOverlayWithTooltip>\n  );\n};\n"],
+  "mappings": "AAgBM;AAhBN,OAAO,UAAU;AAGjB,SAAS,iBAAiB;AAC1B,SAAS,4CAA4C;AACrD,SAAS,YAAY;AACrB,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,wCAAwC;AAE1C,MAAM,4BAA4B,CAAC,EAAE,SAAS,MAAyB;AAC5E,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,QAAM,EAAE,cAAc,IAAI,iCAAiC;AAE3D,MAAI,CAAC,cAAc,SAAS;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,KAAK,WAAW,YAAY,EAAE,KAAK,CAAC,CAAC;AAAA,QAChD,eAAY;AAAA,QAEX;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE,oBAAC,wCACE,UACH;AAEJ;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./MultiMeterBarChartOverlay.css";
-var container = "_11ege6n0-3-2-0";
+var container = "_11ege6n0-3-3-0";
 export {
   container
 };

package/esm/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlay.css.ts"],
-  "sourcesContent": ["import './MultiMeterBarChartOverlay.css';\nexport var container = '_11ege6n0-3-2-0';"],
+  "sourcesContent": ["import './MultiMeterBarChartOverlay.css';\nexport var container = '_11ege6n0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

@@ -0,0 +1,135 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import {
+  useEffect,
+  useState
+} from "react";
+import { container } from "./MultiMeterBarChartOverlay.sty.js";
+import { Flex } from "../../../../../layouts/flex/Flex.js";
+import { interactionsOverlay } from "../../../../core/components/interactions-overlay/InteractionsOverlay.sty.js";
+import { useOverlay } from "../../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
+import { useTooltip } from "../../../../core/components/overlay-tooltip/contexts/TooltipContext.js";
+import { useTooltipReducer } from "../../../../core/components/overlay-tooltip/useTooltipReducer.js";
+import { emptyData } from "../../../../core/components/overlay-tooltip/utils.js";
+import { useSeriesActions } from "../../../../core/components/series-action/ChartSeriesActionContext.js";
+import { MeterBarChartTooltip } from "../../../shared/components/meter-bar-tooltip/MeterBarChartTooltip.js";
+import { useFormatter } from "../../../shared/context/FormatterContext.js";
+import { useMeterBarLayoutSize } from "../../../shared/context/MeterBarLayoutSize.context.js";
+import { elementSize } from "../../../shared/styles/element-size.sty.js";
+import { TOOLTIP_VARIANT } from "../../constants.js";
+import { useMultiMeterBarChartTooltipData } from "../../context/MultiMeterBarChartTooltipContext.js";
+import { useMultiMeterBarVisibleSegmentsState } from "../../hooks/store/selectors.js";
+const MultiMeterBarChartOverlayWithTooltip = (props) => {
+  const overlay = useOverlay();
+  const tooltip = useTooltip();
+  const dispatch = useTooltipReducer();
+  const visibleSegments = useMultiMeterBarVisibleSegmentsState();
+  const { formatter, unit } = useFormatter();
+  const { tooltipConfig } = useMultiMeterBarChartTooltipData();
+  const { chartSeriesActions } = useSeriesActions();
+  const { size } = useMeterBarLayoutSize();
+  const [hoveredSegmentIndex, setHoveredSegmentIndex] = useState(void 0);
+  useEffect(() => {
+    setHoveredSegmentIndex(void 0);
+  }, [visibleSegments.length]);
+  const sharedData = {
+    geometry: "multimeterbar",
+    series: visibleSegments.map((item) => ({
+      name: item.name ?? "",
+      value: formatter(item.value, unit),
+      color: item.color
+    }))
+  };
+  const buildSingleSeriesData = (segmentEl) => {
+    const index = Number(segmentEl.getAttribute("data-segment-index"));
+    const series = [sharedData.series[index]];
+    return {
+      geometry: "multimeterbar",
+      series
+    };
+  };
+  const isSharedTooltip = tooltipConfig.variant === TOOLTIP_VARIANT.Shared;
+  const onClick = (event) => {
+    if (tooltip.getState().pinned) {
+      dispatch({
+        type: "SET_PINNED",
+        payload: {
+          pinned: false,
+          data: emptyData()
+        }
+      })();
+    } else {
+      const { offsetX, offsetY } = event.nativeEvent;
+      if (isSharedTooltip) {
+        dispatch({
+          type: "SET_PINNED",
+          payload: {
+            pinned: true,
+            relativeX: offsetX,
+            relativeY: offsetY,
+            data: sharedData
+          }
+        })();
+      } 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)
+            }
+          })();
+        }
+      }
+    }
+  };
+  const onPointerMove = (event) => {
+    const segmentEl = event.target.closest("[data-segment-index]");
+    if (isSharedTooltip) {
+      if (!tooltip.getState().pinned) {
+        setHoveredSegmentIndex(
+          segmentEl ? Number(segmentEl.getAttribute("data-segment-index")) : void 0
+        );
+      }
+      dispatch({ type: "SET_POSITION", payload: sharedData })(event);
+    } else if (segmentEl) {
+      dispatch({
+        type: "SET_POSITION",
+        payload: buildSingleSeriesData(segmentEl)
+      })(event);
+    } else {
+      dispatch({ type: "SET_OUT_BOUNDS" })();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      ref: overlay.overlayRef,
+      className: clsx(container, elementSize({ size }), interactionsOverlay),
+      "data-testid": "overlay-wrapper",
+      onPointerMove,
+      onPointerLeave: dispatch({ type: "SET_OUT_BOUNDS" }),
+      onClick,
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx(
+          MeterBarChartTooltip,
+          {
+            variant: isSharedTooltip ? TOOLTIP_VARIANT.Shared : TOOLTIP_VARIANT.Single,
+            activeItem: hoveredSegmentIndex ?? -1,
+            actionsForItem: chartSeriesActions ? (item) => () => chartSeriesActions(item) : void 0
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  MultiMeterBarChartOverlayWithTooltip
+};
+//# sourceMappingURL=MultiMeterBarChartOverlayWithTooltip.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlayWithTooltip.tsx"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type PropsWithChildren,\n  type PointerEvent,\n  useEffect,\n  useState,\n} from 'react';\n\nimport { container } from './MultiMeterBarChartOverlay.sty.js';\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 { useTooltip } from '../../../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { useTooltipReducer } from '../../../../core/components/overlay-tooltip/useTooltipReducer.js';\nimport { emptyData } from '../../../../core/components/overlay-tooltip/utils.js';\nimport { useSeriesActions } from '../../../../core/components/series-action/ChartSeriesActionContext.js';\nimport { MeterBarChartTooltip } from '../../../shared/components/meter-bar-tooltip/MeterBarChartTooltip.js';\nimport { useFormatter } from '../../../shared/context/FormatterContext.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { elementSize } from '../../../shared/styles/element-size.sty.js';\nimport { TOOLTIP_VARIANT } from '../../constants.js';\nimport { useMultiMeterBarChartTooltipData } from '../../context/MultiMeterBarChartTooltipContext.js';\nimport { useMultiMeterBarVisibleSegmentsState } from '../../hooks/store/selectors.js';\n\nexport const MultiMeterBarChartOverlayWithTooltip = (\n  props: PropsWithChildren,\n) => {\n  const overlay = useOverlay();\n  const tooltip = useTooltip();\n  const dispatch = useTooltipReducer();\n  const visibleSegments = useMultiMeterBarVisibleSegmentsState();\n  const { formatter, unit } = useFormatter();\n  const { tooltipConfig } = useMultiMeterBarChartTooltipData();\n  const { chartSeriesActions } = useSeriesActions();\n  const { size } = useMeterBarLayoutSize();\n\n  const [hoveredSegmentIndex, setHoveredSegmentIndex] = useState<\n    number | undefined\n  >(undefined);\n\n  useEffect(() => {\n    setHoveredSegmentIndex(undefined);\n  }, [visibleSegments.length]);\n\n  const sharedData = {\n    geometry: 'multimeterbar' as const,\n    series: visibleSegments.map((item) => ({\n      name: item.name ?? '',\n      value: formatter(item.value, unit),\n      color: item.color,\n    })),\n  };\n\n  const buildSingleSeriesData = (segmentEl: Element) => {\n    const index = Number(segmentEl.getAttribute('data-segment-index'));\n    const series = [sharedData.series[index]];\n    return {\n      geometry: 'multimeterbar' as const,\n      series,\n    };\n  };\n\n  const isSharedTooltip = tooltipConfig.variant === TOOLTIP_VARIANT.Shared;\n  const onClick = (event: PointerEvent<HTMLDivElement>) => {\n    if (tooltip.getState().pinned) {\n      dispatch({\n        type: 'SET_PINNED',\n        payload: {\n          pinned: false,\n          data: emptyData(),\n        },\n      })();\n    } else {\n      const { offsetX, offsetY } = event.nativeEvent;\n      if (isSharedTooltip) {\n        dispatch({\n          type: 'SET_PINNED',\n          payload: {\n            pinned: true,\n            relativeX: offsetX,\n            relativeY: offsetY,\n            data: sharedData,\n          },\n        })();\n      } else {\n        const segmentEl = (event.target as Element).closest(\n          '[data-segment-index]',\n        );\n        if (segmentEl) {\n          dispatch({\n            type: 'SET_PINNED',\n            payload: {\n              pinned: true,\n              relativeX: offsetX,\n              relativeY: offsetY,\n              data: buildSingleSeriesData(segmentEl),\n            },\n          })();\n        }\n      }\n    }\n  };\n  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {\n    const segmentEl = (event.target as Element).closest('[data-segment-index]');\n    if (isSharedTooltip) {\n      if (!tooltip.getState().pinned) {\n        setHoveredSegmentIndex(\n          segmentEl\n            ? Number(segmentEl.getAttribute('data-segment-index'))\n            : undefined,\n        );\n      }\n      dispatch({ type: 'SET_POSITION', payload: sharedData })(event);\n    } else if (segmentEl) {\n      dispatch({\n        type: 'SET_POSITION',\n        payload: buildSingleSeriesData(segmentEl),\n      })(event);\n    } else {\n      dispatch({ type: 'SET_OUT_BOUNDS' })();\n    }\n  };\n  return (\n    <Flex\n      // eslint-disable-next-line react-hooks/refs\n      ref={overlay.overlayRef}\n      className={clsx(container, elementSize({ size }), interactionsOverlay)}\n      data-testid=\"overlay-wrapper\"\n      onPointerMove={onPointerMove}\n      onPointerLeave={dispatch({ type: 'SET_OUT_BOUNDS' })}\n      onClick={onClick}\n    >\n      {props.children}\n\n      <MeterBarChartTooltip\n        variant={\n          isSharedTooltip ? TOOLTIP_VARIANT.Shared : TOOLTIP_VARIANT.Single\n        }\n        activeItem={hoveredSegmentIndex ?? -1}\n        actionsForItem={\n          chartSeriesActions\n            ? (item) => () => chartSeriesActions(item)\n            : undefined\n        }\n      />\n    </Flex>\n  );\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartSegment.js

@@ -1,30 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import { MeterBarSegment } from "../../shared/components/meter-bar-segment/MeterBarSegment.js";
 import { useMultiMeterBarHighlightedSegment } from "../hooks/store/selectors.js";
-import { useSetTooltipContent } from "../hooks/store/use-set-tooltip-content.js";
 const MultiMeterBarChartSegment = (props) => {
-  const { previousSegmentsWidth, segmentColor, segmentWidth, segmentId } = props;
+  const {
+    previousSegmentsWidth,
+    segmentColor,
+    segmentWidth,
+    segmentId,
+    segmentIndex
+  } = props;
   const highlightedSegment = useMultiMeterBarHighlightedSegment();
   const highlightedSegmentId = highlightedSegment?.id;
   const isHighlighted = !highlightedSegment || highlightedSegmentId === segmentId;
-  const { setTooltipContent, clearTooltipContent } = useSetTooltipContent();
-  return /* @__PURE__ */ jsx(
-    "g",
+  return /* @__PURE__ */ jsx("g", { "data-segment-index": segmentIndex, children: /* @__PURE__ */ jsx(
+    MeterBarSegment,
     {
-      onMouseEnter: () => setTooltipContent(segmentId),
-      onMouseMove: () => setTooltipContent(segmentId),
-      onMouseLeave: () => clearTooltipContent(),
-      children: /* @__PURE__ */ jsx(
-        MeterBarSegment,
-        {
-          color: segmentColor,
-          width: segmentWidth,
-          highlighted: isHighlighted,
-          start: previousSegmentsWidth
-        }
-      )
+      color: segmentColor,
+      width: segmentWidth,
+      highlighted: isHighlighted,
+      start: previousSegmentsWidth
     }
-  );
+  ) });
 };
 MultiMeterBarChartSegment["displayName"] = "MultiMeterBarChartSegment";
 export {

package/esm/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartSegment.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartSegment.tsx"],
-  "sourcesContent": ["import { MeterBarSegment } from '../../shared/components/meter-bar-segment/MeterBarSegment.js';\nimport { useMultiMeterBarHighlightedSegment } from '../hooks/store/selectors.js';\nimport { useSetTooltipContent } from '../hooks/store/use-set-tooltip-content.js';\n\ninterface MultiMeterBarChartSegmentProps {\n  segmentId: string;\n  segmentColor: string;\n  segmentWidth: number;\n  previousSegmentsWidth: number;\n}\n\nexport const MultiMeterBarChartSegment = (\n  props: MultiMeterBarChartSegmentProps,\n) => {\n  const { previousSegmentsWidth, segmentColor, segmentWidth, segmentId } =\n    props;\n  const highlightedSegment = useMultiMeterBarHighlightedSegment();\n  const highlightedSegmentId = highlightedSegment?.id;\n  const isHighlighted =\n    !highlightedSegment || highlightedSegmentId === segmentId;\n\n  const { setTooltipContent, clearTooltipContent } = useSetTooltipContent();\n\n  return (\n    <g\n      onMouseEnter={() => setTooltipContent(segmentId)}\n      onMouseMove={() => setTooltipContent(segmentId)}\n      onMouseLeave={() => clearTooltipContent()}\n    >\n      <MeterBarSegment\n        color={segmentColor}\n        width={segmentWidth}\n        highlighted={isHighlighted}\n        start={previousSegmentsWidth}\n      />\n    </g>\n  );\n};\n\nMultiMeterBarChartSegment['displayName'] = 'MultiMeterBarChartSegment';\n"],
-  "mappings": "AA6BM;AA7BN,SAAS,uBAAuB;AAChC,SAAS,0CAA0C;AACnD,SAAS,4BAA4B;AAS9B,MAAM,4BAA4B,CACvC,UACG;AACH,QAAM,EAAE,uBAAuB,cAAc,cAAc,UAAU,IACnE;AACF,QAAM,qBAAqB,mCAAmC;AAC9D,QAAM,uBAAuB,oBAAoB;AACjD,QAAM,gBACJ,CAAC,sBAAsB,yBAAyB;AAElD,QAAM,EAAE,mBAAmB,oBAAoB,IAAI,qBAAqB;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc,MAAM,kBAAkB,SAAS;AAAA,MAC/C,aAAa,MAAM,kBAAkB,SAAS;AAAA,MAC9C,cAAc,MAAM,oBAAoB;AAAA,MAExC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,OAAO;AAAA,UACP,aAAa;AAAA,UACb,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;AAEA,0BAA0B,aAAa,IAAI;",
+  "sourcesContent": ["import { MeterBarSegment } from '../../shared/components/meter-bar-segment/MeterBarSegment.js';\nimport { useMultiMeterBarHighlightedSegment } from '../hooks/store/selectors.js';\n\ninterface MultiMeterBarChartSegmentProps {\n  segmentId: string;\n  segmentIndex: number;\n  segmentColor: string;\n  segmentWidth: number;\n  previousSegmentsWidth: number;\n}\n\nexport const MultiMeterBarChartSegment = (\n  props: MultiMeterBarChartSegmentProps,\n) => {\n  const {\n    previousSegmentsWidth,\n    segmentColor,\n    segmentWidth,\n    segmentId,\n    segmentIndex,\n  } = props;\n  const highlightedSegment = useMultiMeterBarHighlightedSegment();\n  const highlightedSegmentId = highlightedSegment?.id;\n  const isHighlighted =\n    !highlightedSegment || highlightedSegmentId === segmentId;\n\n  return (\n    <g data-segment-index={segmentIndex}>\n      <MeterBarSegment\n        color={segmentColor}\n        width={segmentWidth}\n        highlighted={isHighlighted}\n        start={previousSegmentsWidth}\n      />\n    </g>\n  );\n};\n\nMultiMeterBarChartSegment['displayName'] = 'MultiMeterBarChartSegment';\n"],
+  "mappings": "AA4BM;AA5BN,SAAS,uBAAuB;AAChC,SAAS,0CAA0C;AAU5C,MAAM,4BAA4B,CACvC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,qBAAqB,mCAAmC;AAC9D,QAAM,uBAAuB,oBAAoB;AACjD,QAAM,gBACJ,CAAC,sBAAsB,yBAAyB;AAElD,SACE,oBAAC,OAAE,sBAAoB,cACrB;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;AAEA,0BAA0B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartSegments.js

@@ -11,13 +11,14 @@ const MultiMeterBarChartSegments = (props) => {
     return null;
   }
   const { segmentComponents } = segments.reduce(
-    (acc, current) => {
+    (acc, current, index) => {
       const segmentWidth = getSegmentWidth(current.value, min, max, width);
       const segmentComponent = /* @__PURE__ */ jsx(
         MultiMeterBarChartSegment,
         {
           previousSegmentsWidth: acc.usedWidth,
           segmentId: current.id,
+          segmentIndex: index,
           segmentColor: current.color,
           segmentWidth
         },

package/esm/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartSegments.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartSegments.tsx"],
-  "sourcesContent": ["import { type JSX } from 'react';\n\nimport { MultiMeterBarChartSegment } from './MultiMeterBarChartSegment.js';\nimport { useMeterBarLayoutSize } from '../../shared/context/MeterBarLayoutSize.context.js';\nimport { getSegmentWidth } from '../../shared/utils/get-segment-width.js';\nimport { useMultiMeterBarVisibleSegmentsState } from '../hooks/store/selectors.js';\n\ninterface MultiMeterBarChartSegmentsProps {\n  max: number;\n  min: number;\n}\n\nexport const MultiMeterBarChartSegments = (\n  props: MultiMeterBarChartSegmentsProps,\n) => {\n  const { max, min } = props;\n  const { segmentWidth: width } = useMeterBarLayoutSize();\n  const segments = useMultiMeterBarVisibleSegmentsState();\n\n  if (!segments || !segments.length) {\n    return null;\n  }\n\n  const { segmentComponents } = segments.reduce(\n    (acc, current) => {\n      const segmentWidth = getSegmentWidth(current.value, min, max, width);\n\n      const segmentComponent = (\n        <MultiMeterBarChartSegment\n          previousSegmentsWidth={acc.usedWidth}\n          segmentId={current.id}\n          segmentColor={current.color}\n          segmentWidth={segmentWidth}\n          key={current.id}\n        />\n      );\n\n      acc = {\n        segmentComponents: [...acc.segmentComponents, segmentComponent],\n        usedWidth: acc.usedWidth + segmentWidth,\n      };\n\n      return acc;\n    },\n    {\n      segmentComponents: [] as JSX.Element[],\n      usedWidth: 0,\n    },\n  );\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{segmentComponents}</>;\n};\n\nMultiMeterBarChartSegments['displayName'] = 'MultiMeterBarChartSegments';\n"],
-  "mappings": "AA4BQ,SAuBC,UAvBD;AA1BR,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,4CAA4C;AAO9C,MAAM,6BAA6B,CACxC,UACG;AACH,QAAM,EAAE,KAAK,IAAI,IAAI;AACrB,QAAM,EAAE,cAAc,MAAM,IAAI,sBAAsB;AACtD,QAAM,WAAW,qCAAqC;AAEtD,MAAI,CAAC,YAAY,CAAC,SAAS,QAAQ;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,kBAAkB,IAAI,SAAS;AAAA,IACrC,CAAC,KAAK,YAAY;AAChB,YAAM,eAAe,gBAAgB,QAAQ,OAAO,KAAK,KAAK,KAAK;AAEnE,YAAM,mBACJ;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,IAAI;AAAA,UAC3B,WAAW,QAAQ;AAAA,UACnB,cAAc,QAAQ;AAAA,UACtB;AAAA;AAAA,QACK,QAAQ;AAAA,MACf;AAGF,YAAM;AAAA,QACJ,mBAAmB,CAAC,GAAG,IAAI,mBAAmB,gBAAgB;AAAA,QAC9D,WAAW,IAAI,YAAY;AAAA,MAC7B;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,mBAAmB,CAAC;AAAA,MACpB,WAAW;AAAA,IACb;AAAA,EACF;AAGA,SAAO,gCAAG,6BAAkB;AAC9B;AAEA,2BAA2B,aAAa,IAAI;",
+  "sourcesContent": ["import { type JSX } from 'react';\n\nimport { MultiMeterBarChartSegment } from './MultiMeterBarChartSegment.js';\nimport { useMeterBarLayoutSize } from '../../shared/context/MeterBarLayoutSize.context.js';\nimport { getSegmentWidth } from '../../shared/utils/get-segment-width.js';\nimport { useMultiMeterBarVisibleSegmentsState } from '../hooks/store/selectors.js';\n\ninterface MultiMeterBarChartSegmentsProps {\n  max: number;\n  min: number;\n}\n\nexport const MultiMeterBarChartSegments = (\n  props: MultiMeterBarChartSegmentsProps,\n) => {\n  const { max, min } = props;\n  const { segmentWidth: width } = useMeterBarLayoutSize();\n  const segments = useMultiMeterBarVisibleSegmentsState();\n\n  if (!segments || !segments.length) {\n    return null;\n  }\n\n  const { segmentComponents } = segments.reduce(\n    (acc, current, index) => {\n      const segmentWidth = getSegmentWidth(current.value, min, max, width);\n\n      const segmentComponent = (\n        <MultiMeterBarChartSegment\n          previousSegmentsWidth={acc.usedWidth}\n          segmentId={current.id}\n          segmentIndex={index}\n          segmentColor={current.color}\n          segmentWidth={segmentWidth}\n          key={current.id}\n        />\n      );\n\n      acc = {\n        segmentComponents: [...acc.segmentComponents, segmentComponent],\n        usedWidth: acc.usedWidth + segmentWidth,\n      };\n\n      return acc;\n    },\n    {\n      segmentComponents: [] as JSX.Element[],\n      usedWidth: 0,\n    },\n  );\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{segmentComponents}</>;\n};\n\nMultiMeterBarChartSegments['displayName'] = 'MultiMeterBarChartSegments';\n"],
+  "mappings": "AA4BQ,SAwBC,UAxBD;AA1BR,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,4CAA4C;AAO9C,MAAM,6BAA6B,CACxC,UACG;AACH,QAAM,EAAE,KAAK,IAAI,IAAI;AACrB,QAAM,EAAE,cAAc,MAAM,IAAI,sBAAsB;AACtD,QAAM,WAAW,qCAAqC;AAEtD,MAAI,CAAC,YAAY,CAAC,SAAS,QAAQ;AACjC,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,kBAAkB,IAAI,SAAS;AAAA,IACrC,CAAC,KAAK,SAAS,UAAU;AACvB,YAAM,eAAe,gBAAgB,QAAQ,OAAO,KAAK,KAAK,KAAK;AAEnE,YAAM,mBACJ;AAAA,QAAC;AAAA;AAAA,UACC,uBAAuB,IAAI;AAAA,UAC3B,WAAW,QAAQ;AAAA,UACnB,cAAc;AAAA,UACd,cAAc,QAAQ;AAAA,UACtB;AAAA;AAAA,QACK,QAAQ;AAAA,MACf;AAGF,YAAM;AAAA,QACJ,mBAAmB,CAAC,GAAG,IAAI,mBAAmB,gBAAgB;AAAA,QAC9D,WAAW,IAAI,YAAY;AAAA,MAC7B;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,mBAAmB,CAAC;AAAA,MACpB,WAAW;AAAA,IACb;AAAA,EACF;AAGA,SAAO,gCAAG,6BAAkB;AAC9B;AAEA,2BAA2B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/meter-bar/multi-meter-bar/hooks/store/selectors.js

@@ -5,12 +5,10 @@ const useMultiMeterBarVisibleSegmentsState = () => useSelector(
   (state) => Array.from(state.visibleSegments).map(([, value]) => value)
 );
 const useMultiMeterBarHighlightedSegment = () => useSelector((state) => state.highlightedSegment);
-const useMultiMeterBarTooltipState = () => useSelector((state) => state.tooltip);
 export {
   useMultiMeterBarHighlightedSegment,
   useMultiMeterBarSegmentsState,
   useMultiMeterBarState,
-  useMultiMeterBarTooltipState,
   useMultiMeterBarVisibleSegmentsState
 };
 //# sourceMappingURL=selectors.js.map

package/esm/charts/meter-bar/multi-meter-bar/hooks/store/selectors.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/multi-meter-bar/hooks/store/selectors.ts"],
-  "sourcesContent": ["import { useSelector } from './use-selector.js';\nimport { MultiMeterBarChartState } from '../../types/state.js';\n\nexport const useMultiMeterBarState = () =>\n  useSelector((state: MultiMeterBarChartState) => state);\n\nexport const useMultiMeterBarSegmentsState = () =>\n  useSelector((state: MultiMeterBarChartState) => state.segments);\n\nexport const useMultiMeterBarVisibleSegmentsState = () =>\n  useSelector((state: MultiMeterBarChartState) =>\n    Array.from(state.visibleSegments).map(([, value]) => value),\n  );\n\nexport const useMultiMeterBarHighlightedSegment = () =>\n  useSelector((state: MultiMeterBarChartState) => state.highlightedSegment);\n\nexport const useMultiMeterBarTooltipState = () =>\n  useSelector((state: MultiMeterBarChartState) => state.tooltip);\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAGrB,MAAM,wBAAwB,MACnC,YAAY,CAAC,UAAmC,KAAK;AAEhD,MAAM,gCAAgC,MAC3C,YAAY,CAAC,UAAmC,MAAM,QAAQ;AAEzD,MAAM,uCAAuC,MAClD;AAAA,EAAY,CAAC,UACX,MAAM,KAAK,MAAM,eAAe,EAAE,IAAI,CAAC,CAAC,EAAE,KAAK,MAAM,KAAK;AAC5D;AAEK,MAAM,qCAAqC,MAChD,YAAY,CAAC,UAAmC,MAAM,kBAAkB;AAEnE,MAAM,+BAA+B,MAC1C,YAAY,CAAC,UAAmC,MAAM,OAAO;",
+  "sourcesContent": ["import { useSelector } from './use-selector.js';\nimport { MultiMeterBarChartState } from '../../types/state.js';\n\nexport const useMultiMeterBarState = () =>\n  useSelector((state: MultiMeterBarChartState) => state);\n\nexport const useMultiMeterBarSegmentsState = () =>\n  useSelector((state: MultiMeterBarChartState) => state.segments);\n\nexport const useMultiMeterBarVisibleSegmentsState = () =>\n  useSelector((state: MultiMeterBarChartState) =>\n    Array.from(state.visibleSegments).map(([, value]) => value),\n  );\n\nexport const useMultiMeterBarHighlightedSegment = () =>\n  useSelector((state: MultiMeterBarChartState) => state.highlightedSegment);\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAGrB,MAAM,wBAAwB,MACnC,YAAY,CAAC,UAAmC,KAAK;AAEhD,MAAM,gCAAgC,MAC3C,YAAY,CAAC,UAAmC,MAAM,QAAQ;AAEzD,MAAM,uCAAuC,MAClD;AAAA,EAAY,CAAC,UACX,MAAM,KAAK,MAAM,eAAe,EAAE,IAAI,CAAC,CAAC,EAAE,KAAK,MAAM,KAAK;AAC5D;AAEK,MAAM,qCAAqC,MAChD,YAAY,CAAC,UAAmC,MAAM,kBAAkB;",
   "names": []
 }

package/esm/charts/meter-bar/multi-meter-bar/providers/MultiMeterBarChartProviders.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { StoreProvider } from "./StoreProvider.js";
+import { OverlayProvider } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
+import { TooltipProvider } from "../../../core/components/overlay-tooltip/contexts/TooltipContext.js";
 import { ColorRuleContext } from "../../../core/context/ColorRuleContext.js";
 import { FormatterContext } from "../../shared/context/FormatterContext.js";
 import { MeterBarToolbarConfigContext } from "../../shared/context/MeterBarToolbarConfig.context.js";
@@ -20,7 +22,7 @@ const MultiMeterBarChartProviders = ({
     }),
     [formatter, unit]
   );
-  return /* @__PURE__ */ jsx(FormatterContext.Provider, { value: formatterContextProps, children: /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: colorRules, children: /* @__PURE__ */ jsx(MeterBarToolbarConfigContext.Provider, { value: toolbar, children: /* @__PURE__ */ jsx(StoreProvider, { colorPalette, segmentsSlot: segments, children }) }) }) });
+  return /* @__PURE__ */ jsx(FormatterContext.Provider, { value: formatterContextProps, children: /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: colorRules, children: /* @__PURE__ */ jsx(MeterBarToolbarConfigContext.Provider, { value: toolbar, children: /* @__PURE__ */ jsx(StoreProvider, { colorPalette, segmentsSlot: segments, children: /* @__PURE__ */ jsx(OverlayProvider, { children: /* @__PURE__ */ jsx(TooltipProvider, { children }) }) }) }) }) });
 };
 export {
   MultiMeterBarChartProviders

package/esm/charts/meter-bar/multi-meter-bar/providers/MultiMeterBarChartProviders.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/providers/MultiMeterBarChartProviders.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useMemo } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport { ColorRuleContext } from '../../../core/context/ColorRuleContext.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../../core/types/color-rule.js';\nimport type { Formatter } from '../../../core/types/formatter.js';\nimport { FormatterContext } from '../../shared/context/FormatterContext.js';\nimport { MeterBarToolbarConfigContext } from '../../shared/context/MeterBarToolbarConfig.context.js';\nimport type { MeterBarToolbarInternalProps } from '../../shared/types/meter-bar-toolbar.js';\nimport type { MultiMeterBarSegmentProps } from '../types/multi-meter-bar-chart.js';\n\ninterface MultiMeterBarChartProvidersProps {\n  colorPalette: ColorPalette | CustomColorPalette;\n  formatter: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  unit?: string | Unit;\n  segments: MultiMeterBarSegmentProps[];\n  colorRules: ColorRuleProps[];\n  toolbar: MeterBarToolbarInternalProps;\n}\n\nexport const MultiMeterBarChartProviders = ({\n  colorPalette,\n  formatter,\n  unit,\n  segments,\n  colorRules,\n  children,\n  toolbar,\n}: PropsWithChildren<MultiMeterBarChartProvidersProps>) => {\n  const formatterContextProps = useMemo(\n    () => ({\n      formatter,\n      unit,\n    }),\n    [formatter, unit],\n  );\n\n  return (\n    <FormatterContext.Provider value={formatterContextProps}>\n      <ColorRuleContext.Provider value={colorRules}>\n        <MeterBarToolbarConfigContext.Provider value={toolbar}>\n          <StoreProvider colorPalette={colorPalette} segmentsSlot={segments}>\n            {children}\n          </StoreProvider>\n        </MeterBarToolbarConfigContext.Provider>\n      </ColorRuleContext.Provider>\n    </FormatterContext.Provider>\n  );\n};\n"],
-  "mappings": "AAmDU;AAnDV,SAAiC,eAAe;AAQhD,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAOjC,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAatC,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,QAAM,wBAAwB;AAAA,IAC5B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,WAAW,IAAI;AAAA,EAClB;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,uBAChC,8BAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAChC,8BAAC,6BAA6B,UAA7B,EAAsC,OAAO,SAC5C,8BAAC,iBAAc,cAA4B,cAAc,UACtD,UACH,GACF,GACF,GACF;AAEJ;",
+  "sourcesContent": ["import { type PropsWithChildren, useMemo } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport { OverlayProvider } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { TooltipProvider } from '../../../core/components/overlay-tooltip/contexts/TooltipContext.js';\nimport { ColorRuleContext } from '../../../core/context/ColorRuleContext.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../../core/types/color-rule.js';\nimport type { Formatter } from '../../../core/types/formatter.js';\nimport { FormatterContext } from '../../shared/context/FormatterContext.js';\nimport { MeterBarToolbarConfigContext } from '../../shared/context/MeterBarToolbarConfig.context.js';\nimport type { MeterBarToolbarInternalProps } from '../../shared/types/meter-bar-toolbar.js';\nimport type { MultiMeterBarSegmentProps } from '../types/multi-meter-bar-chart.js';\n\ninterface MultiMeterBarChartProvidersProps {\n  colorPalette: ColorPalette | CustomColorPalette;\n  formatter: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  unit?: string | Unit;\n  segments: MultiMeterBarSegmentProps[];\n  colorRules: ColorRuleProps[];\n  toolbar: MeterBarToolbarInternalProps;\n}\n\nexport const MultiMeterBarChartProviders = ({\n  colorPalette,\n  formatter,\n  unit,\n  segments,\n  colorRules,\n  children,\n  toolbar,\n}: PropsWithChildren<MultiMeterBarChartProvidersProps>) => {\n  const formatterContextProps = useMemo(\n    () => ({\n      formatter,\n      unit,\n    }),\n    [formatter, unit],\n  );\n\n  return (\n    <FormatterContext.Provider value={formatterContextProps}>\n      <ColorRuleContext.Provider value={colorRules}>\n        <MeterBarToolbarConfigContext.Provider value={toolbar}>\n          <StoreProvider colorPalette={colorPalette} segmentsSlot={segments}>\n            <OverlayProvider>\n              <TooltipProvider>{children}</TooltipProvider>\n            </OverlayProvider>\n          </StoreProvider>\n        </MeterBarToolbarConfigContext.Provider>\n      </ColorRuleContext.Provider>\n    </FormatterContext.Provider>\n  );\n};\n"],
+  "mappings": "AAuDc;AAvDd,SAAiC,eAAe;AAQhD,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AAOjC,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAatC,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,QAAM,wBAAwB;AAAA,IAC5B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,WAAW,IAAI;AAAA,EAClB;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,uBAChC,8BAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAChC,8BAAC,6BAA6B,UAA7B,EAAsC,OAAO,SAC5C,8BAAC,iBAAc,cAA4B,cAAc,UACvD,8BAAC,mBACC,8BAAC,mBAAiB,UAAS,GAC7B,GACF,GACF,GACF,GACF;AAEJ;",
   "names": []
 }

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

@@ -1,62 +1,62 @@
-._1m3udw10-3-2-0 {
+._1m3udw10-3-3-0 {
   display: flex;
   justify-content: center;
   grid-area: value;
   align-self: self-end;
   justify-self: end;
 }
-._1m3udw11-3-2-0 {
+._1m3udw11-3-3-0 {
   margin-bottom: var(--dt-spacings-size-2, 2px);
   align-items: center;
   height: 20px;
 }
-._1m3udw12-3-2-0 {
+._1m3udw12-3-3-0 {
   margin-bottom: var(--dt-spacings-size-4, 4px);
   align-items: end;
   height: 100%;
 }
-._1m3udw13-3-2-0 {
+._1m3udw13-3-3-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-2-0 {
+._1m3udw14-3-3-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-2-0 {
+._1m3udw15-3-3-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   grid-area: min;
   align-self: center;
 }
-._1m3udw16-3-2-0 {
+._1m3udw16-3-3-0 {
   margin-top: var(--dt-spacings-size-4, 4px);
   grid-area: max;
   align-self: center;
   justify-self: end;
 }
-._1m3udw17-3-2-0 {
+._1m3udw17-3-3-0 {
   grid-area: legend;
   margin: var(--dt-spacings-size-4, 4px) 0 var(--dt-spacings-size-4, 4px);
 }
-._1m3udw18-3-2-0 {
+._1m3udw18-3-3-0 {
   gap: var(--dt-spacings-size-4, 4px);
   margin-bottom: var(--dt-spacings-size-2, 2px);
   grid-area: label;
 }
-._1m3udw19-3-2-0 {
+._1m3udw19-3-3-0 {
   grid-area: chart;
 }
-._1m3udw1a-3-2-0 {
+._1m3udw1a-3-3-0 {
   width: 100%;
 }
-._1m3udw1b-3-2-0 {
+._1m3udw1b-3-3-0 {
   height: 100%;
 }
-._1m3udw1c-3-2-0 {
+._1m3udw1c-3-3-0 {
   height: fit-content;
 }
-._1m3udw1d-3-2-0 {
+._1m3udw1d-3-3-0 {
   overflow: hidden;
 }