@dynatrace/strato-components 3.1.3 → 3.2.1

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

@@ -2,19 +2,31 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useRef } from "react";
 import { container } from "./MultiMeterBarChartOverlay.sty.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";
 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(
-    "div",
+    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, {})

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 { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { MeterBarOverlayRefContext } from '../../../shared/contexts/MeterBarOverlayRefContext.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\n  return (\n    <MeterBarOverlayRefContext.Provider value={overlayRef}>\n      <div\n        ref={overlayRef}\n        className={clsx(container, elementSize({ size }))}\n        data-testid=\"overlay-wrapper\"\n      >\n        {children}\n        <MultiMeterBarChartTooltip />\n      </div>\n    </MeterBarOverlayRefContext.Provider>\n  );\n};\n"],
-  "mappings": "AAgBM,SAME,KANF;AAhBN,OAAO,UAAU;AACjB,SAAiC,cAAc;AAE/C,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAGnC,MAAM,4BAA4B,CAAC,EAAE,SAAS,MAAyB;AAC5E,QAAM,EAAE,KAAK,IAAI,sBAAsB;AACvC,QAAM,aAAa,OAAuB,IAAI;AAE9C,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,MAEX;AAAA;AAAA,QACD,oBAAC,6BAA0B;AAAA;AAAA;AAAA,EAC7B,GACF;AAEJ;",
+  "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;",
   "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-1-3";
+var container = "_11ege6n0-3-2-1";
 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-1-3';"],
+  "sourcesContent": ["import './MultiMeterBarChartOverlay.css';\nexport var container = '_11ege6n0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

@@ -7,9 +7,8 @@ const MultiMeterBarChartPlotArea = ({
   label,
   max,
   min,
-  tooltipConfig,
-  width
-}) => /* @__PURE__ */ jsx(MultiMeterBarChartTooltipProvider, { data: { tooltipConfig, label }, children: /* @__PURE__ */ jsx(MultiMeterBarChartOverlay, { children: /* @__PURE__ */ jsx(MeterBarPlot, { children: /* @__PURE__ */ jsx(MultiMeterBarChartSegments, { max, min, width }) }) }) });
+  tooltipConfig
+}) => /* @__PURE__ */ jsx(MultiMeterBarChartTooltipProvider, { data: { tooltipConfig, label }, children: /* @__PURE__ */ jsx(MultiMeterBarChartOverlay, { children: /* @__PURE__ */ jsx(MeterBarPlot, { children: /* @__PURE__ */ jsx(MultiMeterBarChartSegments, { max, min }) }) }) });
 export {
   MultiMeterBarChartPlotArea
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartPlotArea.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { MultiMeterBarChartOverlay } from './MultiMeterBarChartOverlay/MultiMeterBarChartOverlay.js';\nimport { MultiMeterBarChartSegments } from './MultiMeterBarChartSegments.js';\nimport { MeterBarPlot } from '../../shared/components/meter-bar-plot/MeterBarPlot.js';\nimport { MultiMeterBarChartTooltipProvider } from '../context/MultiMeterBarChartTooltipContext.js';\nimport type { MultiMeterBarChartInternalTooltipConfig } from '../types/multi-meter-bar-chart-internal.js';\n\nexport interface MultiMeterBarChartPlotAreaProps {\n  label: ReactNode;\n  max: number;\n  min: number;\n  tooltipConfig: MultiMeterBarChartInternalTooltipConfig;\n  width: number;\n}\n\nexport const MultiMeterBarChartPlotArea = ({\n  label,\n  max,\n  min,\n  tooltipConfig,\n  width,\n}: MultiMeterBarChartPlotAreaProps) => (\n  <MultiMeterBarChartTooltipProvider data={{ tooltipConfig, label }}>\n    <MultiMeterBarChartOverlay>\n      <MeterBarPlot>\n        <MultiMeterBarChartSegments max={max} min={min} width={width} />\n      </MeterBarPlot>\n    </MultiMeterBarChartOverlay>\n  </MultiMeterBarChartTooltipProvider>\n);\n"],
-  "mappings": "AA0BQ;AAxBR,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,yCAAyC;AAW3C,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC,qCAAkC,MAAM,EAAE,eAAe,MAAM,GAC9D,8BAAC,6BACC,8BAAC,gBACC,8BAAC,8BAA2B,KAAU,KAAU,OAAc,GAChE,GACF,GACF;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { MultiMeterBarChartOverlay } from './MultiMeterBarChartOverlay/MultiMeterBarChartOverlay.js';\nimport { MultiMeterBarChartSegments } from './MultiMeterBarChartSegments.js';\nimport { MeterBarPlot } from '../../shared/components/meter-bar-plot/MeterBarPlot.js';\nimport { MultiMeterBarChartTooltipProvider } from '../context/MultiMeterBarChartTooltipContext.js';\nimport type { MultiMeterBarChartInternalTooltipConfig } from '../types/multi-meter-bar-chart-internal.js';\n\nexport interface MultiMeterBarChartPlotAreaProps {\n  label: ReactNode;\n  max: number;\n  min: number;\n  tooltipConfig: MultiMeterBarChartInternalTooltipConfig;\n}\n\nexport const MultiMeterBarChartPlotArea = ({\n  label,\n  max,\n  min,\n  tooltipConfig,\n}: MultiMeterBarChartPlotAreaProps) => (\n  <MultiMeterBarChartTooltipProvider data={{ tooltipConfig, label }}>\n    <MultiMeterBarChartOverlay>\n      <MeterBarPlot>\n        <MultiMeterBarChartSegments max={max} min={min} />\n      </MeterBarPlot>\n    </MultiMeterBarChartOverlay>\n  </MultiMeterBarChartTooltipProvider>\n);\n"],
+  "mappings": "AAwBQ;AAtBR,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,yCAAyC;AAU3C,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,oBAAC,qCAAkC,MAAM,EAAE,eAAe,MAAM,GAC9D,8BAAC,6BACC,8BAAC,gBACC,8BAAC,8BAA2B,KAAU,KAAU,GAClD,GACF,GACF;",
   "names": []
 }

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

@@ -7,16 +7,22 @@ const MultiMeterBarChartSegment = (props) => {
   const highlightedSegment = useMultiMeterBarHighlightedSegment();
   const highlightedSegmentId = highlightedSegment?.id;
   const isHighlighted = !highlightedSegment || highlightedSegmentId === segmentId;
-  const { setTooltipContent } = useSetTooltipContent();
+  const { setTooltipContent, clearTooltipContent } = useSetTooltipContent();
   return /* @__PURE__ */ jsx(
-    MeterBarSegment,
+    "g",
     {
-      color: segmentColor,
-      width: segmentWidth,
-      highlighted: isHighlighted,
-      start: previousSegmentsWidth,
       onMouseEnter: () => setTooltipContent(segmentId),
-      onMouseMove: () => setTooltipContent(segmentId)
+      onMouseMove: () => setTooltipContent(segmentId),
+      onMouseLeave: () => clearTooltipContent(),
+      children: /* @__PURE__ */ jsx(
+        MeterBarSegment,
+        {
+          color: segmentColor,
+          width: segmentWidth,
+          highlighted: isHighlighted,
+          start: previousSegmentsWidth
+        }
+      )
     }
   );
 };

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 } = useSetTooltipContent();\n\n  return (\n    <MeterBarSegment\n      color={segmentColor}\n      width={segmentWidth}\n      highlighted={isHighlighted}\n      start={previousSegmentsWidth}\n      onMouseEnter={() => setTooltipContent(segmentId)}\n      onMouseMove={() => setTooltipContent(segmentId)}\n    />\n  );\n};\n\nMultiMeterBarChartSegment['displayName'] = 'MultiMeterBarChartSegment';\n"],
-  "mappings": "AAwBI;AAxBJ,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,kBAAkB,IAAI,qBAAqB;AAEnD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,MACb,OAAO;AAAA,MACP,cAAc,MAAM,kBAAkB,SAAS;AAAA,MAC/C,aAAa,MAAM,kBAAkB,SAAS;AAAA;AAAA,EAChD;AAEJ;AAEA,0BAA0B,aAAa,IAAI;",
+  "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;",
   "names": []
 }

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

@@ -1,9 +1,11 @@
 import { Fragment, jsx } from "react/jsx-runtime";
 import { MultiMeterBarChartSegment } from "./MultiMeterBarChartSegment.js";
+import { useMeterBarLayoutSize } from "../../shared/context/MeterBarLayoutSize.context.js";
 import { getSegmentWidth } from "../../shared/utils/get-segment-width.js";
 import { useMultiMeterBarVisibleSegmentsState } from "../hooks/store/selectors.js";
 const MultiMeterBarChartSegments = (props) => {
-  const { max, min, width } = props;
+  const { max, min } = props;
+  const { segmentWidth: width } = useMeterBarLayoutSize();
   const segments = useMultiMeterBarVisibleSegmentsState();
   if (!segments || !segments.length) {
     return null;

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 { 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  width: number;\n}\n\nexport const MultiMeterBarChartSegments = (\n  props: MultiMeterBarChartSegmentsProps,\n) => {\n  const { max, min, width } = props;\n\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,uBAAuB;AAChC,SAAS,4CAA4C;AAQ9C,MAAM,6BAA6B,CACxC,UACG;AACH,QAAM,EAAE,KAAK,KAAK,MAAM,IAAI;AAE5B,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) => {\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;",
   "names": []
 }

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

@@ -6,7 +6,7 @@ const MultiMeterBarChartTooltip = () => {
   const { tooltipConfig } = useMultiMeterBarChartTooltipData();
   const isTooltipEnabled = tooltipConfig.enabled;
   const tooltipItems = useMultiMeterBarChartTooltipItems();
-  if (!tooltipItems || !isTooltipEnabled) {
+  if (!tooltipItems || tooltipItems.length === 0 || !isTooltipEnabled) {
     return null;
   }
   return /* @__PURE__ */ jsx(MeterBarTooltip, { items: tooltipItems });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartTooltip.tsx"],
-  "sourcesContent": ["import { MeterBarTooltip } from '../../shared/components/meter-bar-tooltip/MeterBarTooltip.js';\nimport { useMultiMeterBarChartTooltipData } from '../context/MultiMeterBarChartTooltipContext.js';\nimport { useMultiMeterBarChartTooltipItems } from '../hooks/use-multi-meter-bar-chart-tooltip-items.js';\n\nexport const MultiMeterBarChartTooltip = () => {\n  const { tooltipConfig } = useMultiMeterBarChartTooltipData();\n  const isTooltipEnabled = tooltipConfig.enabled;\n  const tooltipItems = useMultiMeterBarChartTooltipItems();\n\n  if (!tooltipItems || !isTooltipEnabled) {\n    return null;\n  }\n\n  return <MeterBarTooltip items={tooltipItems} />;\n};\n"],
-  "mappings": "AAaS;AAbT,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,SAAS,yCAAyC;AAE3C,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,cAAc,IAAI,iCAAiC;AAC3D,QAAM,mBAAmB,cAAc;AACvC,QAAM,eAAe,kCAAkC;AAEvD,MAAI,CAAC,gBAAgB,CAAC,kBAAkB;AACtC,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,mBAAgB,OAAO,cAAc;AAC/C;",
+  "sourcesContent": ["import { MeterBarTooltip } from '../../shared/components/meter-bar-tooltip/MeterBarTooltip.js';\nimport { useMultiMeterBarChartTooltipData } from '../context/MultiMeterBarChartTooltipContext.js';\nimport { useMultiMeterBarChartTooltipItems } from '../hooks/use-multi-meter-bar-chart-tooltip-items.js';\n\nexport const MultiMeterBarChartTooltip = () => {\n  const { tooltipConfig } = useMultiMeterBarChartTooltipData();\n  const isTooltipEnabled = tooltipConfig.enabled;\n  const tooltipItems = useMultiMeterBarChartTooltipItems();\n\n  if (!tooltipItems || tooltipItems.length === 0 || !isTooltipEnabled) {\n    return null;\n  }\n\n  return <MeterBarTooltip items={tooltipItems} />;\n};\n"],
+  "mappings": "AAaS;AAbT,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,SAAS,yCAAyC;AAE3C,MAAM,4BAA4B,MAAM;AAC7C,QAAM,EAAE,cAAc,IAAI,iCAAiC;AAC3D,QAAM,mBAAmB,cAAc;AACvC,QAAM,eAAe,kCAAkC;AAEvD,MAAI,CAAC,gBAAgB,aAAa,WAAW,KAAK,CAAC,kBAAkB;AACnE,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,mBAAgB,OAAO,cAAc;AAC/C;",
   "names": []
 }

package/esm/charts/meter-bar/multi-meter-bar/hooks/store/use-set-tooltip-content.js

@@ -1,8 +1,10 @@
 import { useSetState } from "./use-set-state.js";
 import { useFormatter } from "../../../shared/context/FormatterContext.js";
+import { useTooltipPinned } from "../../../shared/hooks/store/selectors.js";
 const useSetTooltipContent = () => {
-  const { formatter } = useFormatter();
+  const { formatter, unit } = useFormatter();
   const setState = useSetState();
+  const isPinned = useTooltipPinned();
   const setTooltipContent = (id) => {
     setState((prev) => {
       const segment = prev.visibleSegments.get(id);
@@ -16,13 +18,25 @@ const useSetTooltipContent = () => {
         name: segment.name,
         id: segment.id,
         color: { Default: segment.color },
-        values: [formatter(segment.value)]
+        values: [formatter(segment.value, unit)]
       };
       return { ...prev, tooltip: { ...prev.tooltip, content } };
     });
   };
+  const clearTooltipContent = () => {
+    if (isPinned) {
+      return;
+    }
+    setState((prev) => {
+      if (!prev.tooltip.content) {
+        return prev;
+      }
+      return { ...prev, tooltip: { ...prev.tooltip, content: void 0 } };
+    });
+  };
   return {
-    setTooltipContent
+    setTooltipContent,
+    clearTooltipContent
   };
 };
 export {

package/esm/charts/meter-bar/multi-meter-bar/hooks/store/use-set-tooltip-content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/multi-meter-bar/hooks/store/use-set-tooltip-content.ts"],
-  "sourcesContent": ["import { useSetState } from './use-set-state.js';\nimport type { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { useFormatter } from '../../../shared/context/FormatterContext.js';\n\nexport const useSetTooltipContent = () => {\n  const { formatter } = useFormatter();\n  const setState = useSetState();\n\n  const setTooltipContent = (id: string) => {\n    setState((prev) => {\n      const segment = prev.visibleSegments.get(id);\n\n      if (!segment) {\n        return prev;\n      }\n\n      if (prev.tooltip.content?.id === segment.id) {\n        return prev;\n      }\n\n      const content: TooltipItem = {\n        name: segment.name,\n        id: segment.id,\n        color: { Default: segment.color },\n        values: [formatter(segment.value)],\n      };\n\n      return { ...prev, tooltip: { ...prev.tooltip, content } };\n    });\n  };\n\n  return {\n    setTooltipContent,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,oBAAoB;AAEtB,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,QAAM,WAAW,YAAY;AAE7B,QAAM,oBAAoB,CAAC,OAAe;AACxC,aAAS,CAAC,SAAS;AACjB,YAAM,UAAU,KAAK,gBAAgB,IAAI,EAAE;AAE3C,UAAI,CAAC,SAAS;AACZ,eAAO;AAAA,MACT;AAEA,UAAI,KAAK,QAAQ,SAAS,OAAO,QAAQ,IAAI;AAC3C,eAAO;AAAA,MACT;AAEA,YAAM,UAAuB;AAAA,QAC3B,MAAM,QAAQ;AAAA,QACd,IAAI,QAAQ;AAAA,QACZ,OAAO,EAAE,SAAS,QAAQ,MAAM;AAAA,QAChC,QAAQ,CAAC,UAAU,QAAQ,KAAK,CAAC;AAAA,MACnC;AAEA,aAAO,EAAE,GAAG,MAAM,SAAS,EAAE,GAAG,KAAK,SAAS,QAAQ,EAAE;AAAA,IAC1D,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { useSetState } from './use-set-state.js';\nimport type { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { useFormatter } from '../../../shared/context/FormatterContext.js';\nimport { useTooltipPinned } from '../../../shared/hooks/store/selectors.js';\n\nexport const useSetTooltipContent = () => {\n  const { formatter, unit } = useFormatter();\n  const setState = useSetState();\n  const isPinned = useTooltipPinned();\n\n  const setTooltipContent = (id: string) => {\n    setState((prev) => {\n      const segment = prev.visibleSegments.get(id);\n\n      if (!segment) {\n        return prev;\n      }\n\n      if (prev.tooltip.content?.id === segment.id) {\n        return prev;\n      }\n\n      const content: TooltipItem = {\n        name: segment.name,\n        id: segment.id,\n        color: { Default: segment.color },\n        values: [formatter(segment.value, unit)],\n      };\n\n      return { ...prev, tooltip: { ...prev.tooltip, content } };\n    });\n  };\n\n  const clearTooltipContent = () => {\n    if (isPinned) {\n      return;\n    }\n    setState((prev) => {\n      if (!prev.tooltip.content) {\n        return prev;\n      }\n      return { ...prev, tooltip: { ...prev.tooltip, content: undefined } };\n    });\n  };\n\n  return {\n    setTooltipContent,\n    clearTooltipContent,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAE1B,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,WAAW,KAAK,IAAI,aAAa;AACzC,QAAM,WAAW,YAAY;AAC7B,QAAM,WAAW,iBAAiB;AAElC,QAAM,oBAAoB,CAAC,OAAe;AACxC,aAAS,CAAC,SAAS;AACjB,YAAM,UAAU,KAAK,gBAAgB,IAAI,EAAE;AAE3C,UAAI,CAAC,SAAS;AACZ,eAAO;AAAA,MACT;AAEA,UAAI,KAAK,QAAQ,SAAS,OAAO,QAAQ,IAAI;AAC3C,eAAO;AAAA,MACT;AAEA,YAAM,UAAuB;AAAA,QAC3B,MAAM,QAAQ;AAAA,QACd,IAAI,QAAQ;AAAA,QACZ,OAAO,EAAE,SAAS,QAAQ,MAAM;AAAA,QAChC,QAAQ,CAAC,UAAU,QAAQ,OAAO,IAAI,CAAC;AAAA,MACzC;AAEA,aAAO,EAAE,GAAG,MAAM,SAAS,EAAE,GAAG,KAAK,SAAS,QAAQ,EAAE;AAAA,IAC1D,CAAC;AAAA,EACH;AAEA,QAAM,sBAAsB,MAAM;AAChC,QAAI,UAAU;AACZ;AAAA,IACF;AACA,aAAS,CAAC,SAAS;AACjB,UAAI,CAAC,KAAK,QAAQ,SAAS;AACzB,eAAO;AAAA,MACT;AACA,aAAO,EAAE,GAAG,MAAM,SAAS,EAAE,GAAG,KAAK,SAAS,SAAS,OAAU,EAAE;AAAA,IACrE,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/meter-bar/multi-meter-bar/hooks/use-multi-meter-bar-chart-tooltip-items.js

@@ -7,7 +7,7 @@ import { TOOLTIP_VARIANT } from "../constants.js";
 import { useMultiMeterBarChartTooltipData } from "../context/MultiMeterBarChartTooltipContext.js";
 const useMultiMeterBarChartTooltipItems = () => {
   const { content } = useMultiMeterBarTooltipState();
-  const { formatter } = useFormatter();
+  const { formatter, unit } = useFormatter();
   const visibleSegments = useMultiMeterBarVisibleSegmentsState();
   const { tooltipConfig } = useMultiMeterBarChartTooltipData();
   const isSharedTooltip = tooltipConfig.variant === TOOLTIP_VARIANT.Shared;
@@ -20,7 +20,7 @@ const useMultiMeterBarChartTooltipItems = () => {
   const allItems = visibleSegments.map((item) => ({
     id: item.id,
     name: item.name ?? "",
-    values: [formatter(item.value)],
+    values: [formatter(item.value, unit)],
     color: { Default: item.color }
   }));
   return allItems;

package/esm/charts/meter-bar/multi-meter-bar/hooks/use-multi-meter-bar-chart-tooltip-items.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/hooks/use-multi-meter-bar-chart-tooltip-items.ts"],
-  "sourcesContent": ["import {\n  useMultiMeterBarTooltipState,\n  useMultiMeterBarVisibleSegmentsState,\n} from './store/selectors.js';\nimport type { TooltipItem } from '../../../core/types/tooltip.js';\nimport { useFormatter } from '../../shared/context/FormatterContext.js';\nimport { TOOLTIP_VARIANT } from '../constants.js';\nimport { useMultiMeterBarChartTooltipData } from '../context/MultiMeterBarChartTooltipContext.js';\n\nexport const useMultiMeterBarChartTooltipItems = () => {\n  const { content } = useMultiMeterBarTooltipState();\n\n  const { formatter } = useFormatter();\n\n  const visibleSegments = useMultiMeterBarVisibleSegmentsState();\n\n  const { tooltipConfig } = useMultiMeterBarChartTooltipData();\n  const isSharedTooltip = tooltipConfig.variant === TOOLTIP_VARIANT.Shared;\n\n  if (!content && !isSharedTooltip) {\n    return null;\n  }\n\n  if (content && !isSharedTooltip) {\n    return [content];\n  }\n\n  const allItems: TooltipItem[] = visibleSegments.map((item) => ({\n    id: item.id,\n    name: item.name ?? '',\n    values: [formatter(item.value)],\n    color: { Default: item.color },\n  }));\n\n  return allItems;\n};\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AAE1C,MAAM,oCAAoC,MAAM;AACrD,QAAM,EAAE,QAAQ,IAAI,6BAA6B;AAEjD,QAAM,EAAE,UAAU,IAAI,aAAa;AAEnC,QAAM,kBAAkB,qCAAqC;AAE7D,QAAM,EAAE,cAAc,IAAI,iCAAiC;AAC3D,QAAM,kBAAkB,cAAc,YAAY,gBAAgB;AAElE,MAAI,CAAC,WAAW,CAAC,iBAAiB;AAChC,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,CAAC,iBAAiB;AAC/B,WAAO,CAAC,OAAO;AAAA,EACjB;AAEA,QAAM,WAA0B,gBAAgB,IAAI,CAAC,UAAU;AAAA,IAC7D,IAAI,KAAK;AAAA,IACT,MAAM,KAAK,QAAQ;AAAA,IACnB,QAAQ,CAAC,UAAU,KAAK,KAAK,CAAC;AAAA,IAC9B,OAAO,EAAE,SAAS,KAAK,MAAM;AAAA,EAC/B,EAAE;AAEF,SAAO;AACT;",
+  "sourcesContent": ["import {\n  useMultiMeterBarTooltipState,\n  useMultiMeterBarVisibleSegmentsState,\n} from './store/selectors.js';\nimport type { TooltipItem } from '../../../core/types/tooltip.js';\nimport { useFormatter } from '../../shared/context/FormatterContext.js';\nimport { TOOLTIP_VARIANT } from '../constants.js';\nimport { useMultiMeterBarChartTooltipData } from '../context/MultiMeterBarChartTooltipContext.js';\n\nexport const useMultiMeterBarChartTooltipItems = () => {\n  const { content } = useMultiMeterBarTooltipState();\n\n  const { formatter, unit } = useFormatter();\n\n  const visibleSegments = useMultiMeterBarVisibleSegmentsState();\n\n  const { tooltipConfig } = useMultiMeterBarChartTooltipData();\n  const isSharedTooltip = tooltipConfig.variant === TOOLTIP_VARIANT.Shared;\n\n  if (!content && !isSharedTooltip) {\n    return null;\n  }\n\n  if (content && !isSharedTooltip) {\n    return [content];\n  }\n\n  const allItems: TooltipItem[] = visibleSegments.map((item) => ({\n    id: item.id,\n    name: item.name ?? '',\n    values: [formatter(item.value, unit)],\n    color: { Default: item.color },\n  }));\n\n  return allItems;\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AAE1C,MAAM,oCAAoC,MAAM;AACrD,QAAM,EAAE,QAAQ,IAAI,6BAA6B;AAEjD,QAAM,EAAE,WAAW,KAAK,IAAI,aAAa;AAEzC,QAAM,kBAAkB,qCAAqC;AAE7D,QAAM,EAAE,cAAc,IAAI,iCAAiC;AAC3D,QAAM,kBAAkB,cAAc,YAAY,gBAAgB;AAElE,MAAI,CAAC,WAAW,CAAC,iBAAiB;AAChC,WAAO;AAAA,EACT;AAEA,MAAI,WAAW,CAAC,iBAAiB;AAC/B,WAAO,CAAC,OAAO;AAAA,EACjB;AAEA,QAAM,WAA0B,gBAAgB,IAAI,CAAC,UAAU;AAAA,IAC7D,IAAI,KAAK;AAAA,IACT,MAAM,KAAK,QAAQ;AAAA,IACnB,QAAQ,CAAC,UAAU,KAAK,OAAO,IAAI,CAAC;AAAA,IACpC,OAAO,EAAE,SAAS,KAAK,MAAM;AAAA,EAC/B,EAAE;AAEF,SAAO;AACT;",
   "names": []
 }

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

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { StoreProvider } from "./StoreProvider.js";
 import { ColorRuleContext } from "../../../core/context/ColorRuleContext.js";
 import { FormatterContext } from "../../shared/context/FormatterContext.js";
@@ -6,12 +7,20 @@ import { MeterBarToolbarConfigContext } from "../../shared/context/MeterBarToolb
 const MultiMeterBarChartProviders = ({
   colorPalette,
   formatter,
+  unit,
   segments,
   colorRules,
   children,
   toolbar
 }) => {
-  return /* @__PURE__ */ jsx(FormatterContext.Provider, { value: { formatter }, children: /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: colorRules, children: /* @__PURE__ */ jsx(MeterBarToolbarConfigContext.Provider, { value: toolbar, children: /* @__PURE__ */ jsx(StoreProvider, { colorPalette, segmentsSlot: segments, children }) }) }) });
+  const formatterContextProps = useMemo(
+    () => ({
+      formatter,
+      unit
+    }),
+    [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 }) }) }) });
 };
 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 } 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 { 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 { 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  segments: MultiMeterBarSegmentProps[];\n  colorRules: ColorRuleProps[];\n  toolbar: MeterBarToolbarInternalProps;\n}\n\nexport const MultiMeterBarChartProviders = ({\n  colorPalette,\n  formatter,\n  segments,\n  colorRules,\n  children,\n  toolbar,\n}: PropsWithChildren<MultiMeterBarChartProvidersProps>) => {\n  return (\n    <FormatterContext.Provider value={{ formatter }}>\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": "AAyCU;AAjCV,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAOjC,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAYtC,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,UAAU,GAC5C,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 { 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;",
   "names": []
 }

package/esm/charts/meter-bar/multi-meter-bar/types/multi-meter-bar-chart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/types/multi-meter-bar-chart.ts"],
-  "sourcesContent": ["import type { ReactNode } from 'react-markdown';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../../core/types/color-palette.js';\nimport type { Formatter } from '../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport type { MeterBarSize } from '../../shared/types/meter-bars.js';\n\n/**\n * Information hold by each segment in the multi meter bar chart\n * @public\n */\nexport type MultiMeterBarSegmentData = {\n  id: string;\n  name: string;\n  values: string[];\n};\n\n/**\n * @public\n */\nexport interface MultiMeterBarChartProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId {\n  /**\n   * Min value for the multi meter bar chart scale.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * Max value for the multi meter bar chart scale.\n   * @defaultValue 'auto'\n   */\n  max?: number | 'auto';\n  /**\n   * Color palette to be used for the segments\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The size that applies to the value, icon, and label.\n   * @defaultvalue 'size16'\n   */\n  size?: MeterBarSize;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Icon to show left of the label.\n   */\n  prefixIcon?: ReactNode;\n  /** Exposed callback to display series actions  */\n  seriesActions?: (\n    seriesData: MultiMeterBarSegmentData,\n  ) => SeriesActionsTemplate;\n}\n\n/**\n * @public\n */\nexport type MultiMeterBarChartData = {\n  [key: string]: unknown;\n};\n\n/**\n * @public\n */\nexport interface MultiMeterBarSegmentBaseProps {\n  /**\n   * Segment name\n   */\n  name: string;\n  /**\n   * Segment color, if not provided, color that comes from the parent colorPalette value will be used\n   */\n  color?: string;\n}\n\n/**\n * @public\n */\nexport interface MultiMeterBarSegmentPropsWithAccessor\n  extends MultiMeterBarSegmentBaseProps {\n  /**\n   * Data object to retrieve the value from using the valueAccessor.\n   */\n  value: MultiMeterBarChartData;\n  /**\n   * Accessor string to retrieve the value from the data object.\n   */\n  valueAccessor: string;\n}\n\n/**\n * @public\n */\nexport interface MultiMeterBarSegmentPropsWithNumericValue\n  extends MultiMeterBarSegmentBaseProps {\n  /**\n   * Segment percentage value\n   */\n  value: number;\n  valueAccessor?: never;\n}\n\n/**\n * @public\n */\nexport type MultiMeterBarSegmentProps =\n  | MultiMeterBarSegmentPropsWithAccessor\n  | MultiMeterBarSegmentPropsWithNumericValue;\n\n/**\n * @public\n */\nexport const multiMeterBarChartTooltipVariantOptions = [\n  'single',\n  'shared',\n] as const;\n\n/**\n * The different variants available to use in the tooltip subcomponent\n * @public\n */\nexport type MultiMeterBarChartTooltipVariant =\n  (typeof multiMeterBarChartTooltipVariantOptions)[number];\n\n/**\n * @public\n */\nexport interface MultiMeterBarChartTooltipProps {\n  /**\n   * Variant to be used for the multi meter bar chart tooltip\n   * @defaultValue \"single\"\n   */\n  variant?: MultiMeterBarChartTooltipVariant;\n}\n"],
-  "mappings": "AAgIO,MAAM,0CAA0C;AAAA,EACrD;AAAA,EACA;AACF;",
+  "sourcesContent": ["import type { ReactNode } from 'react-markdown';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../../core/types/color-palette.js';\nimport type { Formatter } from '../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport type { MeterBarSize } from '../../shared/types/meter-bars.js';\n\n/**\n * Information hold by each segment in the multi meter bar chart\n * @public\n */\nexport type MultiMeterBarSegmentData = {\n  id: string;\n  name: string;\n  values: string[];\n};\n\n/**\n * @public\n */\nexport interface MultiMeterBarChartProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\n  /**\n   * The chart width. A valid CSS width is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * The chart height. A valid CSS height is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Min value for the multi meter bar chart scale.\n   * @defaultValue 0\n   */\n  min?: number;\n  /**\n   * Max value for the multi meter bar chart scale.\n   * @defaultValue 'auto'\n   */\n  max?: number | 'auto';\n  /**\n   * Color palette to be used for the segments\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The size that applies to the value, icon, and label.\n   * @defaultvalue 'size16'\n   */\n  size?: MeterBarSize;\n  /**\n   * The custom unit for the value of the multi meter bar.\n   */\n  unit?: string | Unit;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Icon to show left of the label.\n   */\n  prefixIcon?: ReactNode;\n  /** Exposed callback to display series actions  */\n  seriesActions?: (\n    seriesData: MultiMeterBarSegmentData,\n  ) => SeriesActionsTemplate;\n}\n\n/**\n * @public\n */\nexport type MultiMeterBarChartData = {\n  [key: string]: unknown;\n};\n\n/**\n * @public\n */\nexport interface MultiMeterBarSegmentBaseProps {\n  /**\n   * Segment name\n   */\n  name: string;\n  /**\n   * Segment color, if not provided, color that comes from the parent colorPalette value will be used\n   */\n  color?: string;\n}\n\n/**\n * @public\n */\nexport interface MultiMeterBarSegmentPropsWithAccessor\n  extends MultiMeterBarSegmentBaseProps {\n  /**\n   * Data object to retrieve the value from using the valueAccessor.\n   */\n  value: MultiMeterBarChartData;\n  /**\n   * Accessor string to retrieve the value from the data object.\n   */\n  valueAccessor: string;\n}\n\n/**\n * @public\n */\nexport interface MultiMeterBarSegmentPropsWithNumericValue\n  extends MultiMeterBarSegmentBaseProps {\n  /**\n   * Segment percentage value\n   */\n  value: number;\n  valueAccessor?: never;\n}\n\n/**\n * @public\n */\nexport type MultiMeterBarSegmentProps =\n  | MultiMeterBarSegmentPropsWithAccessor\n  | MultiMeterBarSegmentPropsWithNumericValue;\n\n/**\n * @public\n */\nexport const multiMeterBarChartTooltipVariantOptions = [\n  'single',\n  'shared',\n] as const;\n\n/**\n * The different variants available to use in the tooltip subcomponent\n * @public\n */\nexport type MultiMeterBarChartTooltipVariant =\n  (typeof multiMeterBarChartTooltipVariantOptions)[number];\n\n/**\n * @public\n */\nexport interface MultiMeterBarChartTooltipProps {\n  /**\n   * Variant to be used for the multi meter bar chart tooltip\n   * @defaultValue \"single\"\n   */\n  variant?: MultiMeterBarChartTooltipVariant;\n}\n"],
+  "mappings": "AAgJO,MAAM,0CAA0C;AAAA,EACrD;AAAA,EACA;AACF;",
   "names": []
 }

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

@@ -44,6 +44,7 @@ const buildMultiMeterBarChartConfig = (props, consumerConfig, slots) => {
   const min = props.min ?? consumerConfig.min ?? defaultConfig.min;
   const tooltip = getTooltipConfig(slots, consumerConfig);
   const formatter = props.formatter ?? consumerConfig.formatter ?? DEFAULT_FORMATTER;
+  const unit = props.unit ?? consumerConfig.unit;
   const legend = slots.legend ?? consumerConfig.legend ?? defaultConfig.legend;
   const totalValue = slots.segments.reduce((acc, segment) => {
     const value = getNumericValue(segment.value, segment.valueAccessor);
@@ -65,6 +66,7 @@ const buildMultiMeterBarChartConfig = (props, consumerConfig, slots) => {
     maxSlot: slots.max,
     legend,
     formatter,
+    unit,
     totalValue,
     colorRules,
     toolbar

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/multi-meter-bar/utils/build-multi-meter-bar-chart-config.ts"],
-  "sourcesContent": ["import { merge } from 'lodash-es';\n\nimport { DEFAULT_FORMATTER } from '../../shared/constants.js';\nimport {\n  defaultToolbarInternalConfig,\n  type MeterBarToolbarConfig,\n  type MeterBarToolbarInternalProps,\n  type MeterBarToolbarSlotProps,\n} from '../../shared/types/meter-bar-toolbar.js';\nimport { getNumericValue } from '../../shared/utils/get-numeric-value.js';\nimport { defaultConfig } from '../default.js';\nimport type {\n  MultiMeterBarChartConsumerConfig,\n  MultiMeterBarChartSlots,\n} from '../types/multi-meter-bar-chart-config.js';\nimport type { MultiMeterBarChartInternalConfig } from '../types/multi-meter-bar-chart-internal.js';\nimport {\n  type MultiMeterBarChartProps,\n  type MultiMeterBarChartTooltipVariant,\n  multiMeterBarChartTooltipVariantOptions,\n} from '../types/multi-meter-bar-chart.js';\n\nconst getToolbarConfig = (\n  toolbarSlotsConfig?: MeterBarToolbarSlotProps,\n  toolbarConsumerConfig?: MeterBarToolbarConfig,\n): MeterBarToolbarInternalProps => {\n  const configuredToolbar = toolbarSlotsConfig ?? toolbarConsumerConfig;\n\n  return { ...defaultToolbarInternalConfig, ...configuredToolbar };\n};\n\nconst getMaxValue = (\n  totalValue: number,\n  maxProperty?: number | 'auto',\n  consumerConfigMax?: number,\n) => {\n  if (typeof maxProperty === 'number') {\n    return maxProperty;\n  }\n\n  if (maxProperty === 'auto') {\n    return totalValue;\n  }\n\n  if (!maxProperty && consumerConfigMax) {\n    return consumerConfigMax;\n  }\n\n  return totalValue;\n};\n\nconst isValidTooltipVariant = (\n  tooltipVariant: MultiMeterBarChartTooltipVariant,\n): tooltipVariant is MultiMeterBarChartTooltipVariant =>\n  multiMeterBarChartTooltipVariantOptions.includes(tooltipVariant);\n\nconst getTooltipConfig = (\n  slots: MultiMeterBarChartSlots,\n  consumerConfig: MultiMeterBarChartConsumerConfig,\n) => {\n  const tooltip = merge(\n    {},\n    defaultConfig.tooltip,\n    consumerConfig.tooltip,\n    slots.tooltip,\n  );\n  const variant = isValidTooltipVariant(tooltip.variant)\n    ? tooltip.variant\n    : defaultConfig.tooltip.variant;\n\n  return {\n    ...tooltip,\n    variant,\n  };\n};\n\nexport const buildMultiMeterBarChartConfig = (\n  props: MultiMeterBarChartProps,\n  consumerConfig: MultiMeterBarChartConsumerConfig,\n  slots: MultiMeterBarChartSlots,\n): MultiMeterBarChartInternalConfig => {\n  const size = props.size ?? consumerConfig.size ?? defaultConfig.size;\n\n  const colorPalette =\n    props.colorPalette ??\n    consumerConfig.colorPalette ??\n    defaultConfig.colorPalette;\n\n  const min = props.min ?? consumerConfig.min ?? defaultConfig.min;\n\n  const tooltip = getTooltipConfig(slots, consumerConfig);\n\n  const formatter =\n    props.formatter ?? consumerConfig.formatter ?? DEFAULT_FORMATTER;\n\n  const legend = slots.legend ?? consumerConfig.legend ?? defaultConfig.legend;\n\n  const totalValue = slots.segments.reduce((acc, segment) => {\n    const value = getNumericValue(segment.value, segment.valueAccessor);\n    return acc + value;\n  }, 0);\n\n  const max = getMaxValue(totalValue, props.max, consumerConfig.max);\n\n  const colorRules = slots.colorRules ?? consumerConfig.colorRules ?? [];\n\n  const toolbar = getToolbarConfig(slots.toolbar, consumerConfig.toolbar);\n\n  return {\n    segments: slots.segments,\n    colorPalette,\n    size,\n    min,\n    max,\n    tooltip,\n    labelSlot: slots.label,\n    valueSlot: slots.value,\n    minSlot: slots.min,\n    maxSlot: slots.max,\n    legend,\n    formatter,\n    totalValue,\n    colorRules,\n    toolbar,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAIK;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAM9B;AAAA,EAGE;AAAA,OACK;AAEP,MAAM,mBAAmB,CACvB,oBACA,0BACiC;AACjC,QAAM,oBAAoB,sBAAsB;AAEhD,SAAO,EAAE,GAAG,8BAA8B,GAAG,kBAAkB;AACjE;AAEA,MAAM,cAAc,CAClB,YACA,aACA,sBACG;AACH,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB,QAAQ;AAC1B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,eAAe,mBAAmB;AACrC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,wBAAwB,CAC5B,mBAEA,wCAAwC,SAAS,cAAc;AAEjE,MAAM,mBAAmB,CACvB,OACA,mBACG;AACH,QAAM,UAAU;AAAA,IACd,CAAC;AAAA,IACD,cAAc;AAAA,IACd,eAAe;AAAA,IACf,MAAM;AAAA,EACR;AACA,QAAM,UAAU,sBAAsB,QAAQ,OAAO,IACjD,QAAQ,UACR,cAAc,QAAQ;AAE1B,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EACF;AACF;AAEO,MAAM,gCAAgC,CAC3C,OACA,gBACA,UACqC;AACrC,QAAM,OAAO,MAAM,QAAQ,eAAe,QAAQ,cAAc;AAEhE,QAAM,eACJ,MAAM,gBACN,eAAe,gBACf,cAAc;AAEhB,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,cAAc;AAE7D,QAAM,UAAU,iBAAiB,OAAO,cAAc;AAEtD,QAAM,YACJ,MAAM,aAAa,eAAe,aAAa;AAEjD,QAAM,SAAS,MAAM,UAAU,eAAe,UAAU,cAAc;AAEtE,QAAM,aAAa,MAAM,SAAS,OAAO,CAAC,KAAK,YAAY;AACzD,UAAM,QAAQ,gBAAgB,QAAQ,OAAO,QAAQ,aAAa;AAClE,WAAO,MAAM;AAAA,EACf,GAAG,CAAC;AAEJ,QAAM,MAAM,YAAY,YAAY,MAAM,KAAK,eAAe,GAAG;AAEjE,QAAM,aAAa,MAAM,cAAc,eAAe,cAAc,CAAC;AAErE,QAAM,UAAU,iBAAiB,MAAM,SAAS,eAAe,OAAO;AAEtE,SAAO;AAAA,IACL,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,WAAW,MAAM;AAAA,IACjB,SAAS,MAAM;AAAA,IACf,SAAS,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { merge } from 'lodash-es';\n\nimport { DEFAULT_FORMATTER } from '../../shared/constants.js';\nimport {\n  defaultToolbarInternalConfig,\n  type MeterBarToolbarConfig,\n  type MeterBarToolbarInternalProps,\n  type MeterBarToolbarSlotProps,\n} from '../../shared/types/meter-bar-toolbar.js';\nimport { getNumericValue } from '../../shared/utils/get-numeric-value.js';\nimport { defaultConfig } from '../default.js';\nimport type {\n  MultiMeterBarChartConsumerConfig,\n  MultiMeterBarChartSlots,\n} from '../types/multi-meter-bar-chart-config.js';\nimport type { MultiMeterBarChartInternalConfig } from '../types/multi-meter-bar-chart-internal.js';\nimport {\n  type MultiMeterBarChartProps,\n  type MultiMeterBarChartTooltipVariant,\n  multiMeterBarChartTooltipVariantOptions,\n} from '../types/multi-meter-bar-chart.js';\n\nconst getToolbarConfig = (\n  toolbarSlotsConfig?: MeterBarToolbarSlotProps,\n  toolbarConsumerConfig?: MeterBarToolbarConfig,\n): MeterBarToolbarInternalProps => {\n  const configuredToolbar = toolbarSlotsConfig ?? toolbarConsumerConfig;\n\n  return { ...defaultToolbarInternalConfig, ...configuredToolbar };\n};\n\nconst getMaxValue = (\n  totalValue: number,\n  maxProperty?: number | 'auto',\n  consumerConfigMax?: number,\n) => {\n  if (typeof maxProperty === 'number') {\n    return maxProperty;\n  }\n\n  if (maxProperty === 'auto') {\n    return totalValue;\n  }\n\n  if (!maxProperty && consumerConfigMax) {\n    return consumerConfigMax;\n  }\n\n  return totalValue;\n};\n\nconst isValidTooltipVariant = (\n  tooltipVariant: MultiMeterBarChartTooltipVariant,\n): tooltipVariant is MultiMeterBarChartTooltipVariant =>\n  multiMeterBarChartTooltipVariantOptions.includes(tooltipVariant);\n\nconst getTooltipConfig = (\n  slots: MultiMeterBarChartSlots,\n  consumerConfig: MultiMeterBarChartConsumerConfig,\n) => {\n  const tooltip = merge(\n    {},\n    defaultConfig.tooltip,\n    consumerConfig.tooltip,\n    slots.tooltip,\n  );\n  const variant = isValidTooltipVariant(tooltip.variant)\n    ? tooltip.variant\n    : defaultConfig.tooltip.variant;\n\n  return {\n    ...tooltip,\n    variant,\n  };\n};\n\nexport const buildMultiMeterBarChartConfig = (\n  props: MultiMeterBarChartProps,\n  consumerConfig: MultiMeterBarChartConsumerConfig,\n  slots: MultiMeterBarChartSlots,\n): MultiMeterBarChartInternalConfig => {\n  const size = props.size ?? consumerConfig.size ?? defaultConfig.size;\n\n  const colorPalette =\n    props.colorPalette ??\n    consumerConfig.colorPalette ??\n    defaultConfig.colorPalette;\n\n  const min = props.min ?? consumerConfig.min ?? defaultConfig.min;\n\n  const tooltip = getTooltipConfig(slots, consumerConfig);\n\n  const formatter =\n    props.formatter ?? consumerConfig.formatter ?? DEFAULT_FORMATTER;\n  const unit = props.unit ?? consumerConfig.unit;\n\n  const legend = slots.legend ?? consumerConfig.legend ?? defaultConfig.legend;\n\n  const totalValue = slots.segments.reduce((acc, segment) => {\n    const value = getNumericValue(segment.value, segment.valueAccessor);\n    return acc + value;\n  }, 0);\n\n  const max = getMaxValue(totalValue, props.max, consumerConfig.max);\n\n  const colorRules = slots.colorRules ?? consumerConfig.colorRules ?? [];\n\n  const toolbar = getToolbarConfig(slots.toolbar, consumerConfig.toolbar);\n\n  return {\n    segments: slots.segments,\n    colorPalette,\n    size,\n    min,\n    max,\n    tooltip,\n    labelSlot: slots.label,\n    valueSlot: slots.value,\n    minSlot: slots.min,\n    maxSlot: slots.max,\n    legend,\n    formatter,\n    unit,\n    totalValue,\n    colorRules,\n    toolbar,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,OAIK;AACP,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAM9B;AAAA,EAGE;AAAA,OACK;AAEP,MAAM,mBAAmB,CACvB,oBACA,0BACiC;AACjC,QAAM,oBAAoB,sBAAsB;AAEhD,SAAO,EAAE,GAAG,8BAA8B,GAAG,kBAAkB;AACjE;AAEA,MAAM,cAAc,CAClB,YACA,aACA,sBACG;AACH,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB,QAAQ;AAC1B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,eAAe,mBAAmB;AACrC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,wBAAwB,CAC5B,mBAEA,wCAAwC,SAAS,cAAc;AAEjE,MAAM,mBAAmB,CACvB,OACA,mBACG;AACH,QAAM,UAAU;AAAA,IACd,CAAC;AAAA,IACD,cAAc;AAAA,IACd,eAAe;AAAA,IACf,MAAM;AAAA,EACR;AACA,QAAM,UAAU,sBAAsB,QAAQ,OAAO,IACjD,QAAQ,UACR,cAAc,QAAQ;AAE1B,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,EACF;AACF;AAEO,MAAM,gCAAgC,CAC3C,OACA,gBACA,UACqC;AACrC,QAAM,OAAO,MAAM,QAAQ,eAAe,QAAQ,cAAc;AAEhE,QAAM,eACJ,MAAM,gBACN,eAAe,gBACf,cAAc;AAEhB,QAAM,MAAM,MAAM,OAAO,eAAe,OAAO,cAAc;AAE7D,QAAM,UAAU,iBAAiB,OAAO,cAAc;AAEtD,QAAM,YACJ,MAAM,aAAa,eAAe,aAAa;AACjD,QAAM,OAAO,MAAM,QAAQ,eAAe;AAE1C,QAAM,SAAS,MAAM,UAAU,eAAe,UAAU,cAAc;AAEtE,QAAM,aAAa,MAAM,SAAS,OAAO,CAAC,KAAK,YAAY;AACzD,UAAM,QAAQ,gBAAgB,QAAQ,OAAO,QAAQ,aAAa;AAClE,WAAO,MAAM;AAAA,EACf,GAAG,CAAC;AAEJ,QAAM,MAAM,YAAY,YAAY,MAAM,KAAK,eAAe,GAAG;AAEjE,QAAM,aAAa,MAAM,cAAc,eAAe,cAAc,CAAC;AAErE,QAAM,UAAU,iBAAiB,MAAM,SAAS,eAAe,OAAO;AAEtE,SAAO;AAAA,IACL,UAAU,MAAM;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,WAAW,MAAM;AAAA,IACjB,SAAS,MAAM;AAAA,IACf,SAAS,MAAM;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/meter-bar/shared/components/formatted-value/MeterBarChartFormattedValue.js

@@ -6,12 +6,12 @@ const MeterBarChartFormattedValue = ({
   auto,
   children
 }) => {
-  const { formatter } = useFormatter();
+  const { formatter, unit } = useFormatter();
   if (auto) {
     if (total !== void 0) {
-      return `${formatter(value)}/${formatter(total)}`;
+      return `${formatter(value, unit)}/${formatter(total, unit)}`;
     }
-    return formatter(value);
+    return formatter(value, unit);
   }
   return /* @__PURE__ */ jsx(Fragment, { children });
 };

package/esm/charts/meter-bar/shared/components/formatted-value/MeterBarChartFormattedValue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/shared/components/formatted-value/MeterBarChartFormattedValue.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { useFormatter } from '../../context/FormatterContext.js';\n\nexport interface MeterBarChartFormattedValueProps {\n  value: number;\n  total?: number;\n  auto?: boolean;\n}\n\n/**\n * Component responsible to render a formatted value.\n * When auto=true the component will generate the default label(e.g. value/total).\n * @param value -\n * @param total -\n * @param auto -\n * @param children -\n */\nexport const MeterBarChartFormattedValue = ({\n  value,\n  total,\n  auto,\n  children,\n}: PropsWithChildren<MeterBarChartFormattedValueProps>) => {\n  const { formatter } = useFormatter();\n\n  if (auto) {\n    if (total !== undefined) {\n      return `${formatter(value)}/${formatter(total)}`;\n    }\n\n    return formatter(value);\n  }\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{children}</>;\n};\n\nMeterBarChartFormattedValue['displayName'] = 'MeterBarChartFormattedValue';\n"],
-  "mappings": "AAmCS;AAjCT,SAAS,oBAAoB;AAgBtB,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,QAAM,EAAE,UAAU,IAAI,aAAa;AAEnC,MAAI,MAAM;AACR,QAAI,UAAU,QAAW;AACvB,aAAO,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,KAAK,CAAC;AAAA,IAChD;AAEA,WAAO,UAAU,KAAK;AAAA,EACxB;AAGA,SAAO,gCAAG,UAAS;AACrB;AAEA,4BAA4B,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { useFormatter } from '../../context/FormatterContext.js';\n\nexport interface MeterBarChartFormattedValueProps {\n  value: number;\n  total?: number;\n  auto?: boolean;\n}\n\n/**\n * Component responsible to render a formatted value.\n * When auto=true the component will generate the default label(e.g. value/total).\n * @param value -\n * @param total -\n * @param auto -\n * @param children -\n */\nexport const MeterBarChartFormattedValue = ({\n  value,\n  total,\n  auto,\n  children,\n}: PropsWithChildren<MeterBarChartFormattedValueProps>) => {\n  const { formatter, unit } = useFormatter();\n\n  if (auto) {\n    if (total !== undefined) {\n      return `${formatter(value, unit)}/${formatter(total, unit)}`;\n    }\n\n    return formatter(value, unit);\n  }\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{children}</>;\n};\n\nMeterBarChartFormattedValue['displayName'] = 'MeterBarChartFormattedValue';\n"],
+  "mappings": "AAmCS;AAjCT,SAAS,oBAAoB;AAgBtB,MAAM,8BAA8B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2D;AACzD,QAAM,EAAE,WAAW,KAAK,IAAI,aAAa;AAEzC,MAAI,MAAM;AACR,QAAI,UAAU,QAAW;AACvB,aAAO,GAAG,UAAU,OAAO,IAAI,CAAC,IAAI,UAAU,OAAO,IAAI,CAAC;AAAA,IAC5D;AAEA,WAAO,UAAU,OAAO,IAAI;AAAA,EAC9B;AAGA,SAAO,gCAAG,UAAS;AACrB;AAEA,4BAA4B,aAAa,IAAI;",
   "names": []
 }

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

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