@dynatrace/strato-components 3.1.1 → 3.2.0

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

@@ -9,6 +9,7 @@ import { MeterBarChartPlotArea } from "./components/MeterBarChartPlotArea.js";
 import { MeterBarChartThresholdLegend } from "./components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js";
 import { METER_BAR_CHART_ARIA_LABEL } from "./constants.js";
 import { useMeterBarChartConfig } from "./hooks/useMeterBarChartConfig.js";
+import { MeterBarChartInternalDataProviders } from "./providers/MeterBarChartInternalDataProviders.js";
 import { MeterBarChartProviders } from "./providers/MeterBarChartProviders.js";
 import { Label } from "./slots/Label.js";
 import { Max } from "./slots/Max.js";
@@ -17,24 +18,24 @@ import { ThresholdIndicator } from "./slots/ThresholdIndicator.js";
 import { ThresholdLegend } from "./slots/ThresholdLegend.js";
 import { Tooltip } from "./slots/Tooltip.js";
 import { Value } from "./slots/Value.js";
-import { buildThresholds } from "./utils/build-thresholds.js";
-import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
+import { useBehavioralTrackingProps } from "../../../core/hooks/useBehavioralTrackingProps.js";
 import { Intent } from "../../../core/slots/Intent/Intent.js";
 import { defaultChartSize } from "../../../core/styles/defaultChartValues.sty.js";
 import { DEFAULT_VALUE_ACCESSOR } from "../../core/constants.js";
-import { ColorRuleContext } from "../../core/context/ColorRuleContext.js";
-import { useObserveContainerSize } from "../../core/hooks/useObserveContainerSize.js";
 import { ColorRule } from "../../core/slots/ColorRule.js";
 import { ChartType } from "../../core/types/chart-types.js";
 import { MeterBarChartFormattedValue } from "../shared/components/formatted-value/MeterBarChartFormattedValue.js";
 import { MeterBarLayout } from "../shared/components/meter-bar-layout/MeterBarLayout.js";
-import { LEGEND_VERTICAL_RATIO } from "../shared/constants.js";
 import { Toolbar } from "../shared/slots/Toolbar.js";
 import { getNumericValue } from "../shared/utils/get-numeric-value.js";
 const COMPONENT_NAME = "SingleMeterBarChart";
 const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
   const {
+    width,
+    height,
     value,
+    name,
+    color,
     className,
     style,
     "data-dtrum-mask": dataDtrumMask,
@@ -43,9 +44,11 @@ const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
     prefixIcon,
     valueAccessor
   } = props;
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
   const config = useMeterBarChartConfig(props);
   const {
     size,
+    thresholds,
     thresholdsIndicators,
     min,
     max,
@@ -54,9 +57,11 @@ const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
     valueSlot,
     labelSlot,
     tooltip,
-    formatter
+    formatter,
+    unit
   } = config;
   const meterBarChartRef = useRef(null);
+  const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;
   useImperativeHandle(forwardedRef, () => {
     let exposedRef = {};
     if (meterBarChartRef.current) {
@@ -66,6 +71,7 @@ const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
         min,
         max,
         formatter,
+        unit,
         tooltip
       };
       exposedRef = {
@@ -75,62 +81,56 @@ const MeterBarChartRoot = forwardRef((props, forwardedRef) => {
     }
     return exposedRef;
   });
-  const [{ width, wrapperHeight }, containerRef] = useObserveContainerSize();
-  const ref = useMergeRefs([containerRef, meterBarChartRef]);
   const displayValue = getNumericValue(
     value,
     valueAccessor ?? DEFAULT_VALUE_ACCESSOR
   );
-  const { matchingThreshold, thresholdIndicators, legendItems } = buildThresholds(displayValue, min, max, width, thresholdsIndicators);
-  const hasLegend = thresholdsIndicators.legend && legendItems.length;
-  return /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ jsx(
-    MeterBarChartProviders,
+  const internalDataProvidersProps = {
+    value,
+    displayValue,
+    valueAccessor,
+    name,
+    color
+  };
+  return /* @__PURE__ */ jsx(MeterBarChartProviders, { config, seriesActions: props.seriesActions, children: /* @__PURE__ */ jsxs(
+    MeterBarLayout,
     {
-      containerWidth: width,
-      matchingThresholdColor: matchingThreshold?.color,
-      meterBarChartInternal: config,
-      meterBarChartProps: props,
-      thresholdIndicators,
-      children: /* @__PURE__ */ jsxs(
-        MeterBarLayout,
-        {
-          ref,
-          size,
-          className: clsx(defaultChartSize, className),
-          style,
-          "data-dtrum-mask": dataDtrumMask,
-          "data-dtrum-allow": dataDtrumAllow,
-          "data-testid": dataTestId,
-          "aria-label": METER_BAR_CHART_ARIA_LABEL,
-          "data-dt-component": COMPONENT_NAME,
-          children: [
-            prefixIcon && /* @__PURE__ */ jsx(MeterBarLayout.Icon, { children: prefixIcon }),
-            labelSlot && /* @__PURE__ */ jsx(MeterBarLayout.Label, { children: labelSlot }),
-            valueSlot && /* @__PURE__ */ jsx(MeterBarLayout.Value, { children: /* @__PURE__ */ jsx(
-              MeterBarChartFormattedValue,
-              {
-                value: displayValue,
-                total: max,
-                auto: valueSlot?.auto,
-                children: valueSlot?.value
-              }
-            ) }),
-            /* @__PURE__ */ jsx(MeterBarLayout.Chart, { children: /* @__PURE__ */ jsx(MeterBarChartPlotArea, {}) }),
-            minSlot && /* @__PURE__ */ jsx(MeterBarLayout.Min, { children: /* @__PURE__ */ jsx(MeterBarChartFormattedValue, { value: min, auto: minSlot?.auto, children: minSlot?.value }) }),
-            maxSlot && /* @__PURE__ */ jsx(MeterBarLayout.Max, { children: /* @__PURE__ */ jsx(MeterBarChartFormattedValue, { value: max, auto: maxSlot?.auto, children: maxSlot?.value }) }),
-            hasLegend && /* @__PURE__ */ jsx(MeterBarLayout.Legend, { children: /* @__PURE__ */ jsx(
-              MeterBarChartThresholdLegend,
-              {
-                data: legendItems,
-                legendSize: {
-                  width,
-                  height: wrapperHeight * LEGEND_VERTICAL_RATIO
-                }
-              }
-            ) })
-          ]
-        }
-      )
+      ...behavioralTrackingProps,
+      ref: meterBarChartRef,
+      size,
+      width,
+      height,
+      className: clsx(defaultChartSize, className),
+      style,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      "data-testid": dataTestId,
+      "data-dt-component": COMPONENT_NAME,
+      "aria-label": METER_BAR_CHART_ARIA_LABEL,
+      children: [
+        /* @__PURE__ */ jsx(
+          MeterBarLayout.Providers,
+          {
+            providerName: MeterBarChartInternalDataProviders,
+            providerProps: internalDataProvidersProps
+          }
+        ),
+        prefixIcon && /* @__PURE__ */ jsx(MeterBarLayout.Icon, { children: prefixIcon }),
+        labelSlot && /* @__PURE__ */ jsx(MeterBarLayout.Label, { children: labelSlot }),
+        valueSlot && /* @__PURE__ */ jsx(MeterBarLayout.Value, { children: /* @__PURE__ */ jsx(
+          MeterBarChartFormattedValue,
+          {
+            value: displayValue,
+            total: max,
+            auto: valueSlot?.auto,
+            children: valueSlot?.value
+          }
+        ) }),
+        /* @__PURE__ */ jsx(MeterBarLayout.Chart, { children: /* @__PURE__ */ jsx(MeterBarChartPlotArea, {}) }),
+        minSlot && /* @__PURE__ */ jsx(MeterBarLayout.Min, { children: /* @__PURE__ */ jsx(MeterBarChartFormattedValue, { value: min, auto: minSlot?.auto, children: minSlot?.value }) }),
+        maxSlot && /* @__PURE__ */ jsx(MeterBarLayout.Max, { children: /* @__PURE__ */ jsx(MeterBarChartFormattedValue, { value: max, auto: maxSlot?.auto, children: maxSlot?.value }) }),
+        hasLegend && /* @__PURE__ */ jsx(MeterBarLayout.Legend, { children: /* @__PURE__ */ jsx(MeterBarChartThresholdLegend, {}) })
+      ]
     }
   ) });
 });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/meter-bar/single-meter-bar/MeterBarChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { MeterBarChartPlotArea } from './components/MeterBarChartPlotArea.js';\nimport { MeterBarChartThresholdLegend } from './components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js';\nimport { METER_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useMeterBarChartConfig } from './hooks/useMeterBarChartConfig.js';\nimport { MeterBarChartProviders } from './providers/MeterBarChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { Max } from './slots/Max.js';\nimport { Min } from './slots/Min.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { ThresholdLegend } from './slots/ThresholdLegend.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Value } from './slots/Value.js';\nimport type { MeterBarChartConsumerConfig } from './types/meter-bar-chart-config.js';\nimport { type MeterBarChartInternalConfig } from './types/meter-bar-chart-internal.js';\nimport { type MeterBarChartProps } from './types/meter-bar-chart.js';\nimport { buildThresholds } from './utils/build-thresholds.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { defaultChartSize } from '../../../core/styles/defaultChartValues.sty.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../core/constants.js';\nimport { ColorRuleContext } from '../../core/context/ColorRuleContext.js';\nimport { useObserveContainerSize } from '../../core/hooks/useObserveContainerSize.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartType } from '../../core/types/chart-types.js';\nimport type { ComponentWithName } from '../../core/types/component-with-name.js';\nimport { MeterBarChartFormattedValue } from '../shared/components/formatted-value/MeterBarChartFormattedValue.js';\nimport { MeterBarLayout } from '../shared/components/meter-bar-layout/MeterBarLayout.js';\nimport { LEGEND_VERTICAL_RATIO } from '../shared/constants.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport type { MeterBarChartElementRef } from '../shared/types/meter-bars.js';\nimport { getNumericValue } from '../shared/utils/get-numeric-value.js';\n\nconst COMPONENT_NAME = 'SingleMeterBarChart';\n/**\n * Single meter bar chart component */\nconst MeterBarChartRoot = forwardRef<\n  MeterBarChartElementRef,\n  PropsWithChildren<MeterBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    value,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'single-meter-bar-chart-root',\n    prefixIcon,\n    valueAccessor,\n  } = props;\n\n  const config: MeterBarChartInternalConfig = useMeterBarChartConfig(props);\n  const {\n    size,\n    thresholdsIndicators,\n    min,\n    max,\n    minSlot,\n    maxSlot,\n    valueSlot,\n    labelSlot,\n    tooltip,\n    formatter,\n  } = config;\n\n  const meterBarChartRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as MeterBarChartElementRef;\n\n    if (meterBarChartRef.current) {\n      const consumerConfig: MeterBarChartConsumerConfig = {\n        thresholdsIndicators,\n        size,\n        min,\n        max,\n        formatter,\n        tooltip,\n      };\n\n      exposedRef = {\n        element: meterBarChartRef.current,\n        getConfig: () =>\n          JSON.stringify({ type: ChartType.SingleMeterBar, ...consumerConfig }),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  const [{ width, wrapperHeight }, containerRef] = useObserveContainerSize();\n  const ref = useMergeRefs([containerRef, meterBarChartRef]);\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n\n  const { matchingThreshold, thresholdIndicators, legendItems } =\n    buildThresholds(displayValue, min, max, width, thresholdsIndicators);\n\n  const hasLegend = thresholdsIndicators.legend && legendItems.length;\n\n  return (\n    <ColorRuleContext.Provider value={config.colorRules}>\n      <MeterBarChartProviders\n        containerWidth={width}\n        matchingThresholdColor={matchingThreshold?.color}\n        meterBarChartInternal={config}\n        meterBarChartProps={props}\n        thresholdIndicators={thresholdIndicators}\n      >\n        <MeterBarLayout\n          ref={ref}\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={METER_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          {valueSlot && (\n            <MeterBarLayout.Value>\n              <MeterBarChartFormattedValue\n                value={displayValue}\n                total={max}\n                auto={valueSlot?.auto}\n              >\n                {valueSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Value>\n          )}\n          <MeterBarLayout.Chart>\n            <MeterBarChartPlotArea />\n          </MeterBarLayout.Chart>\n          {minSlot && (\n            <MeterBarLayout.Min>\n              <MeterBarChartFormattedValue value={min} auto={minSlot?.auto}>\n                {minSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Min>\n          )}\n          {maxSlot && (\n            <MeterBarLayout.Max>\n              <MeterBarChartFormattedValue value={max} auto={maxSlot?.auto}>\n                {maxSlot?.value}\n              </MeterBarChartFormattedValue>\n            </MeterBarLayout.Max>\n          )}\n          {hasLegend && (\n            <MeterBarLayout.Legend>\n              <MeterBarChartThresholdLegend\n                data={legendItems}\n                legendSize={{\n                  width,\n                  height: wrapperHeight * LEGEND_VERTICAL_RATIO,\n                }}\n              />\n            </MeterBarLayout.Legend>\n          )}\n        </MeterBarLayout>\n      </MeterBarChartProviders>\n    </ColorRuleContext.Provider>\n  );\n});\n\n(MeterBarChartRoot as ComponentWithName<typeof MeterBarChartRoot>).displayName =\n  'MeterBarChart';\n\n/**\n * The `MeterBarChart` provides a lightweight and simple visualization progress\n * toward a completion, consumption of a total, etc.  It consists of a horizontal\n * bar that gradually fills up with color or shading as it approaches the max value.\n * @public\n */\nexport const MeterBarChart = Object.assign(MeterBarChartRoot, {\n  Value,\n  Label,\n  Min,\n  Max,\n  ThresholdIndicator,\n  ThresholdLegend,\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  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { MeterBarChartPlotArea } from './components/MeterBarChartPlotArea.js';\nimport { MeterBarChartThresholdLegend } from './components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js';\nimport { METER_BAR_CHART_ARIA_LABEL } from './constants.js';\nimport { useMeterBarChartConfig } from './hooks/useMeterBarChartConfig.js';\nimport { MeterBarChartInternalDataProviders } from './providers/MeterBarChartInternalDataProviders.js';\nimport { MeterBarChartProviders } from './providers/MeterBarChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { Max } from './slots/Max.js';\nimport { Min } from './slots/Min.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { ThresholdLegend } from './slots/ThresholdLegend.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Value } from './slots/Value.js';\nimport type { MeterBarChartConsumerConfig } from './types/meter-bar-chart-config.js';\nimport { type MeterBarChartProps } from './types/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 { DEFAULT_VALUE_ACCESSOR } from '../../core/constants.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartType } from '../../core/types/chart-types.js';\nimport type { ComponentWithName } from '../../core/types/component-with-name.js';\nimport { MeterBarChartFormattedValue } from '../shared/components/formatted-value/MeterBarChartFormattedValue.js';\nimport { MeterBarLayout } from '../shared/components/meter-bar-layout/MeterBarLayout.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport type { MeterBarChartElementRef } from '../shared/types/meter-bars.js';\nimport { getNumericValue } from '../shared/utils/get-numeric-value.js';\n\nconst COMPONENT_NAME = 'SingleMeterBarChart';\n/**\n * Single meter bar chart component */\nconst MeterBarChartRoot = forwardRef<\n  MeterBarChartElementRef,\n  PropsWithChildren<MeterBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    width,\n    height,\n    value,\n    name,\n    color,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'single-meter-bar-chart-root',\n    prefixIcon,\n    valueAccessor,\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const config = useMeterBarChartConfig(props);\n  const {\n    size,\n    thresholds,\n    thresholdsIndicators,\n    min,\n    max,\n    minSlot,\n    maxSlot,\n    valueSlot,\n    labelSlot,\n    tooltip,\n    formatter,\n    unit,\n  } = config;\n\n  const meterBarChartRef = useRef<HTMLDivElement>(null);\n\n  const hasLegend = thresholds.legend ?? thresholdsIndicators.legend;\n\n  useImperativeHandle(forwardedRef, () => {\n    let exposedRef = {} as MeterBarChartElementRef;\n\n    if (meterBarChartRef.current) {\n      const consumerConfig: MeterBarChartConsumerConfig = {\n        thresholdsIndicators,\n        size,\n        min,\n        max,\n        formatter,\n        unit,\n        tooltip,\n      };\n\n      exposedRef = {\n        element: meterBarChartRef.current,\n        getConfig: () =>\n          JSON.stringify({ type: ChartType.SingleMeterBar, ...consumerConfig }),\n      };\n    }\n\n    return exposedRef;\n  });\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n  const internalDataProvidersProps = {\n    value,\n    displayValue,\n    valueAccessor,\n    name,\n    color,\n  };\n\n  return (\n    <MeterBarChartProviders config={config} seriesActions={props.seriesActions}>\n      <MeterBarLayout\n        {...behavioralTrackingProps}\n        ref={meterBarChartRef}\n        size={size}\n        width={width}\n        height={height}\n        className={clsx(defaultChartSize, className)}\n        style={style}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        data-testid={dataTestId}\n        data-dt-component={COMPONENT_NAME}\n        aria-label={METER_BAR_CHART_ARIA_LABEL}\n      >\n        <MeterBarLayout.Providers\n          providerName={MeterBarChartInternalDataProviders}\n          providerProps={internalDataProvidersProps}\n        />\n\n        {prefixIcon && <MeterBarLayout.Icon>{prefixIcon}</MeterBarLayout.Icon>}\n        {labelSlot && <MeterBarLayout.Label>{labelSlot}</MeterBarLayout.Label>}\n        {valueSlot && (\n          <MeterBarLayout.Value>\n            <MeterBarChartFormattedValue\n              value={displayValue}\n              total={max}\n              auto={valueSlot?.auto}\n            >\n              {valueSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Value>\n        )}\n        <MeterBarLayout.Chart>\n          <MeterBarChartPlotArea />\n        </MeterBarLayout.Chart>\n        {minSlot && (\n          <MeterBarLayout.Min>\n            <MeterBarChartFormattedValue value={min} auto={minSlot?.auto}>\n              {minSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Min>\n        )}\n        {maxSlot && (\n          <MeterBarLayout.Max>\n            <MeterBarChartFormattedValue value={max} auto={maxSlot?.auto}>\n              {maxSlot?.value}\n            </MeterBarChartFormattedValue>\n          </MeterBarLayout.Max>\n        )}\n        {hasLegend && (\n          <MeterBarLayout.Legend>\n            <MeterBarChartThresholdLegend />\n          </MeterBarLayout.Legend>\n        )}\n      </MeterBarLayout>\n    </MeterBarChartProviders>\n  );\n});\n\n(MeterBarChartRoot as ComponentWithName<typeof MeterBarChartRoot>).displayName =\n  'MeterBarChart';\n\n/**\n * The `MeterBarChart` provides a lightweight and simple visualization progress\n * toward a completion, consumption of a total, etc.  It consists of a horizontal\n * bar that gradually fills up with color or shading as it approaches the max value.\n * @public\n */\nexport const MeterBarChart = Object.assign(MeterBarChartRoot, {\n  Value,\n  Label,\n  Min,\n  Max,\n  ThresholdIndicator,\n  ThresholdLegend,\n  Tooltip,\n  ColorRule,\n  Intent,\n  Toolbar,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.css

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

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

@@ -2,19 +2,31 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useRef } from "react";
 import { container } from "./MeterBarChartOverlay.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 { MeterBarChartTooltip } from "../MeterBarChartTooltip/MeterBarChartTooltip.js";
 const MeterBarChartOverlay = ({ 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: [
         /* @__PURE__ */ jsx(MeterBarChartTooltip, {}),
         children

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartOverlay/MeterBarChartOverlay.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren, useRef } from 'react';\n\nimport { container } from './MeterBarChartOverlay.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 { MeterBarChartTooltip } from '../MeterBarChartTooltip/MeterBarChartTooltip.js';\n\n// TODO use shared component for overlays if possible\nexport const MeterBarChartOverlay = ({ 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        <MeterBarChartTooltip />\n        {children}\n      </div>\n    </MeterBarOverlayRefContext.Provider>\n  );\n};\n"],
-  "mappings": "AAgBM,SAKE,KALF;AAhBN,OAAO,UAAU;AACjB,SAAiC,cAAc;AAE/C,SAAS,iBAAiB;AAC1B,SAAS,6BAA6B;AACtC,SAAS,iCAAiC;AAC1C,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AAG9B,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAyB;AACvE,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,MAEZ;AAAA,4BAAC,wBAAqB;AAAA,QACrB;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren, useRef } from 'react';\n\nimport { container } from './MeterBarChartOverlay.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 { MeterBarChartTooltip } from '../MeterBarChartTooltip/MeterBarChartTooltip.js';\n\n// TODO use shared component for overlays if possible\nexport const MeterBarChartOverlay = ({ 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        <MeterBarChartTooltip />\n        {children}\n      </Flex>\n    </MeterBarOverlayRefContext.Provider>\n  );\n};\n"],
+  "mappings": "AAwBM,SASE,KATF;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,4BAA4B;AAG9B,MAAM,uBAAuB,CAAC,EAAE,SAAS,MAAyB;AACvE,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,MAET;AAAA,4BAAC,wBAAqB;AAAA,QACrB;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;",
   "names": []
 }

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

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

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

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

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

@@ -1,17 +1,21 @@
 import { jsx } from "react/jsx-runtime";
 import { DEFAULT_VALUE_ACCESSOR } from "../../../../core/constants.js";
 import { MeterBarSegment } from "../../../shared/components/meter-bar-segment/MeterBarSegment.js";
+import { useMeterBarLayoutSize } from "../../../shared/context/MeterBarLayoutSize.context.js";
 import { getNumericValue } from "../../../shared/utils/get-numeric-value.js";
 import { getSegmentWidth } from "../../../shared/utils/get-segment-width.js";
 import { useMeterBarChartData } from "../../context/MeterBarChartDataContext.js";
+import { useMeterBarChartInternalConfig } from "../../context/MeterBarChartInternalConfigContext.js";
 const MeterBarChartSegment = () => {
-  const { color, value, min, max, width, valueAccessor } = useMeterBarChartData();
+  const { color, value, valueAccessor } = useMeterBarChartData();
+  const { min, max } = useMeterBarChartInternalConfig();
+  const { segmentWidth: width } = useMeterBarLayoutSize();
   const displayValue = getNumericValue(
     value,
     valueAccessor ?? DEFAULT_VALUE_ACCESSOR
   );
   const segmentWidth = getSegmentWidth(displayValue, min, max, width);
-  return /* @__PURE__ */ jsx(MeterBarSegment, { color, width: segmentWidth });
+  return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(MeterBarSegment, { color, width: segmentWidth }) });
 };
 MeterBarChartSegment["displayName"] = "MeterBarChartSegment";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartSegment/MeterBarChartSegment.tsx"],
-  "sourcesContent": ["import { DEFAULT_VALUE_ACCESSOR } from '../../../../core/constants.js';\nimport { MeterBarSegment } from '../../../shared/components/meter-bar-segment/MeterBarSegment.js';\nimport { getNumericValue } from '../../../shared/utils/get-numeric-value.js';\nimport { getSegmentWidth } from '../../../shared/utils/get-segment-width.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\n\nexport const MeterBarChartSegment = () => {\n  const { color, value, min, max, width, valueAccessor } =\n    useMeterBarChartData();\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n\n  const segmentWidth = getSegmentWidth(displayValue, min, max, width);\n\n  return <MeterBarSegment color={color} width={segmentWidth} />;\n};\n\nMeterBarChartSegment['displayName'] = 'MeterBarChartSegment';\n"],
-  "mappings": "AAgBS;AAhBT,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAE9B,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,OAAO,OAAO,KAAK,KAAK,OAAO,cAAc,IACnD,qBAAqB;AACvB,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,EACnB;AAEA,QAAM,eAAe,gBAAgB,cAAc,KAAK,KAAK,KAAK;AAElE,SAAO,oBAAC,mBAAgB,OAAc,OAAO,cAAc;AAC7D;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import { DEFAULT_VALUE_ACCESSOR } from '../../../../core/constants.js';\nimport { MeterBarSegment } from '../../../shared/components/meter-bar-segment/MeterBarSegment.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { getNumericValue } from '../../../shared/utils/get-numeric-value.js';\nimport { getSegmentWidth } from '../../../shared/utils/get-segment-width.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\nimport { useMeterBarChartInternalConfig } from '../../context/MeterBarChartInternalConfigContext.js';\n\nexport const MeterBarChartSegment = () => {\n  const { color, value, valueAccessor } = useMeterBarChartData();\n  const { min, max } = useMeterBarChartInternalConfig();\n  const { segmentWidth: width } = useMeterBarLayoutSize();\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n\n  const segmentWidth = getSegmentWidth(displayValue, min, max, width);\n\n  return (\n    <g>\n      <MeterBarSegment color={color} width={segmentWidth} />\n    </g>\n  );\n};\n\nMeterBarChartSegment['displayName'] = 'MeterBarChartSegment';\n"],
+  "mappings": "AAqBM;AArBN,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sCAAsC;AAExC,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,OAAO,OAAO,cAAc,IAAI,qBAAqB;AAC7D,QAAM,EAAE,KAAK,IAAI,IAAI,+BAA+B;AACpD,QAAM,EAAE,cAAc,MAAM,IAAI,sBAAsB;AACtD,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,EACnB;AAEA,QAAM,eAAe,gBAAgB,cAAc,KAAK,KAAK,KAAK;AAElE,SACE,oBAAC,OACC,8BAAC,mBAAgB,OAAc,OAAO,cAAc,GACtD;AAEJ;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,10 +1,17 @@
 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";
-const MeterBarChartThresholdLegend = ({
-  data,
-  legendSize
-}) => {
+import { useMeterBarLayoutSize } from "../../../shared/context/MeterBarLayoutSize.context.js";
+import { useMeterBarChartData } from "../../context/MeterBarChartDataContext.js";
+import { useMeterBarChartInternalConfig } from "../../context/MeterBarChartInternalConfigContext.js";
+const MeterBarChartThresholdLegend = () => {
+  const { legendItems: data } = useMeterBarChartData();
+  const { thresholds, thresholdsIndicators } = useMeterBarChartInternalConfig();
+  const { segmentWidth, segmentHeight } = useMeterBarLayoutSize();
+  const legendSize = { width: segmentWidth, height: segmentHeight };
+  if (!data?.length || !(thresholds.legend ?? thresholdsIndicators.legend)) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(LegendSizeContext.Provider, { value: legendSize, children: /* @__PURE__ */ jsx(
     ChartLegend,
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.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 type { Dimensions } from '../../../../core/types/dimensions.js';\n\n/**\n * @internal\n */\nexport interface MeterBarChartThresholdLegendProps {\n  legendSize: Dimensions;\n  data: LegendItem[];\n}\n\n/**\n * @internal\n */\nexport const MeterBarChartThresholdLegend = ({\n  data,\n  legendSize,\n}: MeterBarChartThresholdLegendProps) => {\n  return (\n    <LegendSizeContext.Provider value={legendSize}>\n      <ChartLegend\n        items={data}\n        interactionsDisabled\n        style={{ height: '100%' }}\n      />\n    </LegendSizeContext.Provider>\n  );\n};\n\nChartLegend['displayName'] = 'MeterBarChartThresholdLegend';\n"],
-  "mappings": "AAsBM;AAtBN,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAc3B,MAAM,+BAA+B,CAAC;AAAA,EAC3C;AAAA,EACA;AACF,MAAyC;AACvC,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,YACjC;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,sBAAoB;AAAA,MACpB,OAAO,EAAE,QAAQ,OAAO;AAAA;AAAA,EAC1B,GACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
+  "sourcesContent": ["import { ChartLegend } from '../../../../core/components/legend/categorical/ChartLegend.js';\nimport { LegendSizeContext } from '../../../../core/components/legend/shared/context/LegendSizeContext.js';\nimport type { Dimensions } from '../../../../core/types/dimensions.js';\nimport { useMeterBarLayoutSize } from '../../../shared/context/MeterBarLayoutSize.context.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\nimport { useMeterBarChartInternalConfig } from '../../context/MeterBarChartInternalConfigContext.js';\n\n/**\n * @internal\n */\nexport const MeterBarChartThresholdLegend = () => {\n  const { legendItems: data } = useMeterBarChartData();\n  const { thresholds, thresholdsIndicators } = useMeterBarChartInternalConfig();\n  const { segmentWidth, segmentHeight } = useMeterBarLayoutSize();\n  const legendSize: Dimensions = { width: segmentWidth, height: segmentHeight };\n\n  if (!data?.length || !(thresholds.legend ?? thresholdsIndicators.legend)) {\n    return null;\n  }\n\n  return (\n    <LegendSizeContext.Provider value={legendSize}>\n      <ChartLegend\n        items={data}\n        interactionsDisabled\n        style={{ height: '100%' }}\n      />\n    </LegendSizeContext.Provider>\n  );\n};\n\nChartLegend['displayName'] = 'MeterBarChartThresholdLegend';\n"],
+  "mappings": "AAsBM;AAtBN,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAElC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,sCAAsC;AAKxC,MAAM,+BAA+B,MAAM;AAChD,QAAM,EAAE,aAAa,KAAK,IAAI,qBAAqB;AACnD,QAAM,EAAE,YAAY,qBAAqB,IAAI,+BAA+B;AAC5E,QAAM,EAAE,cAAc,cAAc,IAAI,sBAAsB;AAC9D,QAAM,aAAyB,EAAE,OAAO,cAAc,QAAQ,cAAc;AAE5E,MAAI,CAAC,MAAM,UAAU,EAAE,WAAW,UAAU,qBAAqB,SAAS;AACxE,WAAO;AAAA,EACT;AAEA,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,YACjC;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,sBAAoB;AAAA,MACpB,OAAO,EAAE,QAAQ,OAAO;AAAA;AAAA,EAC1B,GACF;AAEJ;AAEA,YAAY,aAAa,IAAI;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./MeterBarChartThresholds.css";
-var thresholdContainer = "_1kt6hkd0-3-1-1";
+var thresholdContainer = "_1kt6hkd0-3-2-0";
 export {
   thresholdContainer
 };

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

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

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

@@ -4,9 +4,11 @@ import { MeterBarTooltip } from "../../../shared/components/meter-bar-tooltip/Me
 import { useFormatter } from "../../../shared/context/FormatterContext.js";
 import { getNumericValue } from "../../../shared/utils/get-numeric-value.js";
 import { useMeterBarChartData } from "../../context/MeterBarChartDataContext.js";
+import { useMeterBarChartInternalConfig } from "../../context/MeterBarChartInternalConfigContext.js";
 const MeterBarChartTooltip = () => {
-  const { color, name, value, valueAccessor, tooltip } = useMeterBarChartData();
-  const { formatter } = useFormatter();
+  const { color, name, value, valueAccessor } = useMeterBarChartData();
+  const { tooltip } = useMeterBarChartInternalConfig();
+  const { formatter, unit } = useFormatter();
   if (!tooltip) {
     return null;
   }
@@ -18,7 +20,7 @@ const MeterBarChartTooltip = () => {
     {
       id: `${name}-${displayValue}`,
       name: name ?? "",
-      values: [formatter(displayValue)],
+      values: [formatter(displayValue, unit)],
       color: { Default: color }
     }
   ];

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/meter-bar/single-meter-bar/components/MeterBarChartTooltip/MeterBarChartTooltip.tsx"],
-  "sourcesContent": ["import { DEFAULT_VALUE_ACCESSOR } from '../../../../core/constants.js';\nimport { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { MeterBarTooltip } from '../../../shared/components/meter-bar-tooltip/MeterBarTooltip.js';\nimport { useFormatter } from '../../../shared/context/FormatterContext.js';\nimport { getNumericValue } from '../../../shared/utils/get-numeric-value.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\n\nexport const MeterBarChartTooltip = () => {\n  const { color, name, value, valueAccessor, tooltip } = useMeterBarChartData();\n  const { formatter } = useFormatter();\n\n  if (!tooltip) {\n    return null;\n  }\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n\n  const tooltipItems: TooltipItem[] = [\n    {\n      id: `${name}-${displayValue}`,\n      name: name ?? '',\n      values: [formatter(displayValue)],\n      color: { Default: color },\n    },\n  ];\n\n  return <MeterBarTooltip items={tooltipItems} />;\n};\n\nMeterBarChartTooltip['displayName'] = 'MeterBarChartTooltip';\n"],
-  "mappings": "AA6BS;AA7BT,SAAS,8BAA8B;AAEvC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAE9B,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,OAAO,MAAM,OAAO,eAAe,QAAQ,IAAI,qBAAqB;AAC5E,QAAM,EAAE,UAAU,IAAI,aAAa;AAEnC,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,EACnB;AAEA,QAAM,eAA8B;AAAA,IAClC;AAAA,MACE,IAAI,GAAG,IAAI,IAAI,YAAY;AAAA,MAC3B,MAAM,QAAQ;AAAA,MACd,QAAQ,CAAC,UAAU,YAAY,CAAC;AAAA,MAChC,OAAO,EAAE,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,SAAO,oBAAC,mBAAgB,OAAO,cAAc;AAC/C;AAEA,qBAAqB,aAAa,IAAI;",
+  "sourcesContent": ["import { DEFAULT_VALUE_ACCESSOR } from '../../../../core/constants.js';\nimport { TooltipItem } from '../../../../core/types/tooltip.js';\nimport { MeterBarTooltip } from '../../../shared/components/meter-bar-tooltip/MeterBarTooltip.js';\nimport { useFormatter } from '../../../shared/context/FormatterContext.js';\nimport { getNumericValue } from '../../../shared/utils/get-numeric-value.js';\nimport { useMeterBarChartData } from '../../context/MeterBarChartDataContext.js';\nimport { useMeterBarChartInternalConfig } from '../../context/MeterBarChartInternalConfigContext.js';\n\nexport const MeterBarChartTooltip = () => {\n  const { color, name, value, valueAccessor } = useMeterBarChartData();\n  const { tooltip } = useMeterBarChartInternalConfig();\n  const { formatter, unit } = useFormatter();\n\n  if (!tooltip) {\n    return null;\n  }\n\n  const displayValue = getNumericValue(\n    value,\n    valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n  );\n\n  const tooltipItems: TooltipItem[] = [\n    {\n      id: `${name}-${displayValue}`,\n      name: name ?? '',\n      values: [formatter(displayValue, unit)],\n      color: { Default: color },\n    },\n  ];\n\n  return <MeterBarTooltip items={tooltipItems} />;\n};\n\nMeterBarChartTooltip['displayName'] = 'MeterBarChartTooltip';\n"],
+  "mappings": "AA+BS;AA/BT,SAAS,8BAA8B;AAEvC,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,sCAAsC;AAExC,MAAM,uBAAuB,MAAM;AACxC,QAAM,EAAE,OAAO,MAAM,OAAO,cAAc,IAAI,qBAAqB;AACnE,QAAM,EAAE,QAAQ,IAAI,+BAA+B;AACnD,QAAM,EAAE,WAAW,KAAK,IAAI,aAAa;AAEzC,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,QAAM,eAAe;AAAA,IACnB;AAAA,IACA,iBAAiB;AAAA,EACnB;AAEA,QAAM,eAA8B;AAAA,IAClC;AAAA,MACE,IAAI,GAAG,IAAI,IAAI,YAAY;AAAA,MAC3B,MAAM,QAAQ;AAAA,MACd,QAAQ,CAAC,UAAU,cAAc,IAAI,CAAC;AAAA,MACtC,OAAO,EAAE,SAAS,MAAM;AAAA,IAC1B;AAAA,EACF;AAEA,SAAO,oBAAC,mBAAgB,OAAO,cAAc;AAC/C;AAEA,qBAAqB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/meter-bar/single-meter-bar/context/MeterBarChartDataContext.js

@@ -1,16 +1,10 @@
-import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 const MeterBarChartDataContext = createContext(
   {}
 );
-const MeterBarChartDataProvider = ({
-  children,
-  data
-}) => /* @__PURE__ */ jsx(MeterBarChartDataContext.Provider, { value: data, children });
 const useMeterBarChartData = () => useContext(MeterBarChartDataContext);
 export {
   MeterBarChartDataContext,
-  MeterBarChartDataProvider,
   useMeterBarChartData
 };
 //# sourceMappingURL=MeterBarChartDataContext.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/context/MeterBarChartDataContext.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, createContext, useContext } from 'react';\n\nimport {\n  MeterBarChartDataProviderData,\n  MeterBarChartDataProviderProps,\n} from '../types/meter-bar-chart-internal.js';\n\nexport const MeterBarChartDataContext =\n  createContext<MeterBarChartDataProviderData>(\n    {} as MeterBarChartDataProviderData,\n  );\n\nexport const MeterBarChartDataProvider = ({\n  children,\n  data,\n}: PropsWithChildren<MeterBarChartDataProviderProps>) => (\n  <MeterBarChartDataContext.Provider value={data}>\n    {children}\n  </MeterBarChartDataContext.Provider>\n);\n\nexport const useMeterBarChartData = () => useContext(MeterBarChartDataContext);\n"],
-  "mappings": "AAgBE;AAhBF,SAAiC,eAAe,kBAAkB;AAO3D,MAAM,2BACX;AAAA,EACE,CAAC;AACH;AAEK,MAAM,4BAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AACF,MACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,MACvC,UACH;AAGK,MAAM,uBAAuB,MAAM,WAAW,wBAAwB;",
+  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { MeterBarChartDataProviderData } from '../types/meter-bar-chart-internal.js';\n\nexport const MeterBarChartDataContext =\n  createContext<MeterBarChartDataProviderData>(\n    {} as MeterBarChartDataProviderData,\n  );\n\nexport const useMeterBarChartData = () => useContext(MeterBarChartDataContext);\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAInC,MAAM,2BACX;AAAA,EACE,CAAC;AACH;AAEK,MAAM,uBAAuB,MAAM,WAAW,wBAAwB;",
   "names": []
 }

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

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const MeterBarChartInternalConfigContext = createContext(
+  {}
+);
+const useMeterBarChartInternalConfig = () => useContext(MeterBarChartInternalConfigContext);
+export {
+  MeterBarChartInternalConfigContext,
+  useMeterBarChartInternalConfig
+};
+//# sourceMappingURL=MeterBarChartInternalConfigContext.js.map

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

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

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

@@ -0,0 +1,18 @@
+import { useMeterBarLayoutSize } from "../../shared/context/MeterBarLayoutSize.context.js";
+import { useMeterBarChartInternalConfig } from "../context/MeterBarChartInternalConfigContext.js";
+import { buildThresholds } from "../utils/build-thresholds.js";
+const useMeterBarChartThresholds = (displayValue) => {
+  const { min, max, thresholds, thresholdsIndicators } = useMeterBarChartInternalConfig();
+  const { segmentWidth } = useMeterBarLayoutSize();
+  return buildThresholds(
+    displayValue,
+    min,
+    max,
+    segmentWidth,
+    thresholds ?? thresholdsIndicators
+  );
+};
+export {
+  useMeterBarChartThresholds
+};
+//# sourceMappingURL=useMeterBarChartThresholds.js.map

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

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

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

@@ -0,0 +1,21 @@
+import { useColorRule } from "../../../core/color-rule/useColorRule.js";
+import { DEFAULT_VALUE_ACCESSOR } from "../../../core/constants.js";
+const useMeterBarColorRule = (value, valueAccessor) => {
+  const seriesForColorRule = typeof value === "number" ? [{ value }] : [
+    {
+      ...value,
+      _chartValueAccessor: valueAccessor ?? DEFAULT_VALUE_ACCESSOR
+    }
+  ];
+  const colorRule = useColorRule(
+    seriesForColorRule,
+    "meterBar"
+  );
+  return colorRule.for(
+    seriesForColorRule[0]
+  );
+};
+export {
+  useMeterBarColorRule
+};
+//# sourceMappingURL=useMeterBarColorRule.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/charts/meter-bar/single-meter-bar/hooks/useMeterBarColorRule.ts"],
+  "sourcesContent": ["import { useColorRule } from '../../../core/color-rule/useColorRule.js';\nimport { DEFAULT_VALUE_ACCESSOR } from '../../../core/constants.js';\nimport { MeterBarChartData } from '../types/meter-bar-chart.js';\n\nexport const useMeterBarColorRule = (\n  value: number | MeterBarChartData,\n  valueAccessor?: string,\n) => {\n  const seriesForColorRule =\n    typeof value === 'number'\n      ? [{ value: value }]\n      : ([\n          {\n            ...value,\n            _chartValueAccessor: valueAccessor ?? DEFAULT_VALUE_ACCESSOR,\n          },\n        ] as { _chartValueAccessor: string; [key: string]: unknown }[]);\n\n  const colorRule = useColorRule(\n    seriesForColorRule as { value: number | MeterBarChartData }[],\n    'meterBar',\n  );\n\n  return colorRule.for(\n    seriesForColorRule[0] as {\n      value: number | MeterBarChartData;\n    },\n  );\n};\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AAGhC,MAAM,uBAAuB,CAClC,OACA,kBACG;AACH,QAAM,qBACJ,OAAO,UAAU,WACb,CAAC,EAAE,MAAa,CAAC,IAChB;AAAA,IACC;AAAA,MACE,GAAG;AAAA,MACH,qBAAqB,iBAAiB;AAAA,IACxC;AAAA,EACF;AAEN,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,EACF;AAEA,SAAO,UAAU;AAAA,IACf,mBAAmB,CAAC;AAAA,EAGtB;AACF;",
+  "names": []
+}