@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/charts/core/utils/text-truncation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/text-truncation.ts"],
-  "sourcesContent": ["import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\n\n/**\n * @internal\n */\nexport const truncateText = (\n  text: string,\n  truncationMode: TruncationMode,\n  stopTruncation: (text: string) => boolean,\n) => {\n  let truncatedText = text;\n\n  while (!stopTruncation(truncatedText)) {\n    const filteredText = truncatedText.replace(/\\.\\.\\./, '');\n\n    if (!filteredText.length) {\n      break;\n    }\n\n    truncatedText = TRUNCATE_LABEL[truncationMode](filteredText);\n  }\n\n  return truncatedText;\n};\n\nexport const ELLIPSIS = '...';\n\nexport const middleTruncation = (text: string) => {\n  const middle = Math.floor(text.length / 2);\n  const firstHalf = text.slice(0, middle);\n  const secondHalf = text.slice(middle + 1);\n\n  const hasEllipsis = firstHalf.length || secondHalf.length;\n\n  const newText = `${firstHalf}${hasEllipsis ? ELLIPSIS : ''}${secondHalf}`;\n\n  return newText;\n};\n\nexport const startTruncation = (text: string) => {\n  const slicedText = text.slice(1);\n  const hasEllipsis = slicedText.length;\n\n  const newText = `${hasEllipsis ? ELLIPSIS : ''}${slicedText}`;\n\n  return newText;\n};\n\nexport const endTruncation = (text: string) => {\n  const slicedText = text.slice(0, -1);\n  const hasEllipsis = slicedText.length;\n\n  const newText = `${text.slice(0, -1)}${hasEllipsis ? ELLIPSIS : ''}`;\n\n  return newText;\n};\n\nexport const TRUNCATE_LABEL: Record<TruncationMode, (text: string) => string> =\n  {\n    start: startTruncation,\n    end: endTruncation,\n    middle: middleTruncation,\n  };\n"],
-  "mappings": "AAKO,MAAM,eAAe,CAC1B,MACA,gBACA,mBACG;AACH,MAAI,gBAAgB;AAEpB,SAAO,CAAC,eAAe,aAAa,GAAG;AACrC,UAAM,eAAe,cAAc,QAAQ,UAAU,EAAE;AAEvD,QAAI,CAAC,aAAa,QAAQ;AACxB;AAAA,IACF;AAEA,oBAAgB,eAAe,cAAc,EAAE,YAAY;AAAA,EAC7D;AAEA,SAAO;AACT;AAEO,MAAM,WAAW;AAEjB,MAAM,mBAAmB,CAAC,SAAiB;AAChD,QAAM,SAAS,KAAK,MAAM,KAAK,SAAS,CAAC;AACzC,QAAM,YAAY,KAAK,MAAM,GAAG,MAAM;AACtC,QAAM,aAAa,KAAK,MAAM,SAAS,CAAC;AAExC,QAAM,cAAc,UAAU,UAAU,WAAW;AAEnD,QAAM,UAAU,GAAG,SAAS,GAAG,cAAc,WAAW,EAAE,GAAG,UAAU;AAEvE,SAAO;AACT;AAEO,MAAM,kBAAkB,CAAC,SAAiB;AAC/C,QAAM,aAAa,KAAK,MAAM,CAAC;AAC/B,QAAM,cAAc,WAAW;AAE/B,QAAM,UAAU,GAAG,cAAc,WAAW,EAAE,GAAG,UAAU;AAE3D,SAAO;AACT;AAEO,MAAM,gBAAgB,CAAC,SAAiB;AAC7C,QAAM,aAAa,KAAK,MAAM,GAAG,EAAE;AACnC,QAAM,cAAc,WAAW;AAE/B,QAAM,UAAU,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC,GAAG,cAAc,WAAW,EAAE;AAElE,SAAO;AACT;AAEO,MAAM,iBACX;AAAA,EACE,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated */\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const truncateText = (\n  text: string,\n  truncationMode: TruncationMode,\n  stopTruncation: (text: string) => boolean,\n) => {\n  let truncatedText = text;\n\n  while (!stopTruncation(truncatedText)) {\n    const filteredText = truncatedText.replace(/\\.\\.\\./, '');\n\n    if (!filteredText.length) {\n      break;\n    }\n\n    truncatedText = TRUNCATE_LABEL[truncationMode](filteredText);\n  }\n\n  return truncatedText;\n};\n\n/**\n * @deprecated Use the ellipsis character from `typography/utils` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const ELLIPSIS = '...';\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const middleTruncation = (text: string) => {\n  const middle = Math.floor(text.length / 2);\n  const firstHalf = text.slice(0, middle);\n  const secondHalf = text.slice(middle + 1);\n\n  const hasEllipsis = firstHalf.length || secondHalf.length;\n\n  const newText = `${firstHalf}${hasEllipsis ? ELLIPSIS : ''}${secondHalf}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const startTruncation = (text: string) => {\n  const slicedText = text.slice(1);\n  const hasEllipsis = slicedText.length;\n\n  const newText = `${hasEllipsis ? ELLIPSIS : ''}${slicedText}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const endTruncation = (text: string) => {\n  const slicedText = text.slice(0, -1);\n  const hasEllipsis = slicedText.length;\n\n  const newText = `${text.slice(0, -1)}${hasEllipsis ? ELLIPSIS : ''}`;\n\n  return newText;\n};\n\n/**\n * @deprecated Use `truncateString` from `core/components/text-ellipsis/truncate-string` instead.\n * can be removed APPDEV-15421\n * @internal\n */\nexport const TRUNCATE_LABEL: Record<TruncationMode, (text: string) => string> =\n  {\n    start: startTruncation,\n    end: endTruncation,\n    middle: middleTruncation,\n  };\n"],
+  "mappings": "AAQO,MAAM,eAAe,CAC1B,MACA,gBACA,mBACG;AACH,MAAI,gBAAgB;AAEpB,SAAO,CAAC,eAAe,aAAa,GAAG;AACrC,UAAM,eAAe,cAAc,QAAQ,UAAU,EAAE;AAEvD,QAAI,CAAC,aAAa,QAAQ;AACxB;AAAA,IACF;AAEA,oBAAgB,eAAe,cAAc,EAAE,YAAY;AAAA,EAC7D;AAEA,SAAO;AACT;AAOO,MAAM,WAAW;AAOjB,MAAM,mBAAmB,CAAC,SAAiB;AAChD,QAAM,SAAS,KAAK,MAAM,KAAK,SAAS,CAAC;AACzC,QAAM,YAAY,KAAK,MAAM,GAAG,MAAM;AACtC,QAAM,aAAa,KAAK,MAAM,SAAS,CAAC;AAExC,QAAM,cAAc,UAAU,UAAU,WAAW;AAEnD,QAAM,UAAU,GAAG,SAAS,GAAG,cAAc,WAAW,EAAE,GAAG,UAAU;AAEvE,SAAO;AACT;AAOO,MAAM,kBAAkB,CAAC,SAAiB;AAC/C,QAAM,aAAa,KAAK,MAAM,CAAC;AAC/B,QAAM,cAAc,WAAW;AAE/B,QAAM,UAAU,GAAG,cAAc,WAAW,EAAE,GAAG,UAAU;AAE3D,SAAO;AACT;AAOO,MAAM,gBAAgB,CAAC,SAAiB;AAC7C,QAAM,aAAa,KAAK,MAAM,GAAG,EAAE;AACnC,QAAM,cAAc,WAAW;AAE/B,QAAM,UAAU,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC,GAAG,cAAc,WAAW,EAAE;AAElE,SAAO;AACT;AAOO,MAAM,iBACX;AAAA,EACE,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV;",
   "names": []
 }

package/esm/charts/gantt-chart/GanttChartLine.css

@@ -1,4 +1,4 @@
-._1pk2ed10-3-0-1 {
+._1pk2ed10-3-1-0 {
   height: 100%;
   width: 100%;
 }

package/esm/charts/gantt-chart/GanttChartLine.sty.js

@@ -1,5 +1,5 @@
 import "./GanttChartLine.css";
-var wrapper = "_1pk2ed10-3-0-1";
+var wrapper = "_1pk2ed10-3-1-0";
 export {
   wrapper
 };

package/esm/charts/gantt-chart/GanttChartLine.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/gantt-chart/GanttChartLine.css.ts"],
-  "sourcesContent": ["import './GanttChartLine.css';\nexport var wrapper = '_1pk2ed10-3-0-1';"],
+  "sourcesContent": ["import './GanttChartLine.css';\nexport var wrapper = '_1pk2ed10-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/gantt-chart/components/GanttChartLineRenderer.css

@@ -1,4 +1,4 @@
-._mnxak30-3-0-1 {
+._mnxak30-3-1-0 {
   height: 100%;
   display: flex;
   justify-content: center;

package/esm/charts/gantt-chart/components/GanttChartLineRenderer.sty.js

@@ -1,5 +1,5 @@
 import "./GanttChartLineRenderer.css";
-var svgWrapperCSS = "_mnxak30-3-0-1";
+var svgWrapperCSS = "_mnxak30-3-1-0";
 export {
   svgWrapperCSS
 };

package/esm/charts/gantt-chart/components/GanttChartLineRenderer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gantt-chart/components/GanttChartLineRenderer.css.ts"],
-  "sourcesContent": ["import './GanttChartLineRenderer.css';\nexport var svgWrapperCSS = '_mnxak30-3-0-1';"],
+  "sourcesContent": ["import './GanttChartLineRenderer.css';\nexport var svgWrapperCSS = '_mnxak30-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/gantt-chart/components/tooltip/GanttChartTooltip.css

@@ -1,4 +1,4 @@
-._1v8s3xl0-3-0-1._1v8s3xl0-3-0-1 {
+._1v8s3xl0-3-1-0._1v8s3xl0-3-1-0 {
   max-height: initial;
   min-width: 160px;
   max-width: 320px;

package/esm/charts/gantt-chart/components/tooltip/GanttChartTooltip.sty.js

@@ -1,5 +1,5 @@
 import "./GanttChartTooltip.css";
-var ganttChartTooltipCSS = "_1v8s3xl0-3-0-1";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-1-0";
 export {
   ganttChartTooltipCSS
 };

package/esm/charts/gantt-chart/components/tooltip/GanttChartTooltip.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gantt-chart/components/tooltip/GanttChartTooltip.css.ts"],
-  "sourcesContent": ["import './GanttChartTooltip.css';\nexport var ganttChartTooltipCSS = '_1v8s3xl0-3-0-1';"],
+  "sourcesContent": ["import './GanttChartTooltip.css';\nexport var ganttChartTooltipCSS = '_1v8s3xl0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB;",
   "names": []
 }

package/esm/charts/gauge/GaugeChart.js

@@ -23,6 +23,7 @@ import { GaugeChartToolbarSlot } from "./slots/Toolbar.js";
 import { Tooltip } from "./slots/Tooltip.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { ColorRule } from "../core/slots/ColorRule.js";
+const COMPONENT_NAME = "GaugeChart";
 const _GaugeChart = forwardRef((props, forwardedRef) => {
   const {
     value,
@@ -92,6 +93,7 @@ const _GaugeChart = forwardRef((props, forwardedRef) => {
       "data-testid": dataTestId,
       role: "img",
       "aria-label": GAUGE_CHART_ARIA_LABEL,
+      "data-dt-component": COMPONENT_NAME,
       children: /* @__PURE__ */ jsx(
         GaugeChartProviders,
         {

package/esm/charts/gauge/GaugeChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/gauge/GaugeChart.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useObserveContainerSize } from '../core/hooks/useObserveContainerSize.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport type { ComponentWithName } from '../core/types/component-with-name.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\nimport { GaugeChartLayout } from './components/GaugeChartLayout/GaugeChartLayout.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_CHART_WIDTH,\n  DISPLAY_NAME,\n  GAUGE_CHART_ARIA_LABEL,\n} from './constants.js';\nimport { useGaugeChartConfig } from './hooks/useGaugeChartConfig.js';\nimport { GaugeChartProviders } from './providers/GaugeChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { GaugeChartToolbarSlot } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport type { GaugeChartConsumerConfig } from './types/gauge-chart-config.js';\nimport type { GaugeChartProps, GaugeChartRef } from './types/gauge-chart.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\n\nconst _GaugeChart = forwardRef<\n  GaugeChartRef,\n  PropsWithChildren<GaugeChartProps>\n>((props, forwardedRef) => {\n  const {\n    value,\n    width,\n    height,\n    style,\n    className,\n    prefixIcon,\n    seriesActions,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'gauge-chart-root',\n    valueAccessor,\n  } = props;\n\n  const config = useGaugeChartConfig(props);\n  const {\n    min,\n    max,\n    color,\n    formatter,\n    thresholdsIndicators,\n    colorRules,\n    toolbar,\n    intents,\n    tooltip,\n    valueAccessor: configValueAccessor,\n  } = config;\n\n  const effectiveValueAccessor = valueAccessor ?? configValueAccessor;\n\n  const chartWidth = coerceSizeValue(width) ?? DEFAULT_CHART_WIDTH;\n  const chartHeight = coerceSizeValue(height) ?? DEFAULT_CHART_HEIGHT;\n\n  const [{ height: containerHeight, width: containerWidth }, containerRef] =\n    useObserveContainerSize();\n\n  const gaugeChartRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, () => {\n    const consumerConfig: GaugeChartConsumerConfig = {\n      min,\n      max,\n      color,\n      formatter,\n      thresholdsIndicators,\n      colorRules,\n      toolbar,\n      tooltip,\n      valueAccessor: effectiveValueAccessor,\n    };\n\n    return {\n      element: gaugeChartRef.current,\n      getConfig: () =>\n        JSON.stringify({ type: ChartType.GaugeChart, ...consumerConfig }),\n    };\n  });\n\n  const ref = useMergeRefs<GaugeChartRef | HTMLDivElement>([\n    forwardedRef,\n    gaugeChartRef,\n  ]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: chartWidth,\n        height: chartHeight,\n        overflow: 'hidden',\n        ...style,\n      }}\n      className={className}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      role=\"img\"\n      aria-label={GAUGE_CHART_ARIA_LABEL}\n    >\n      <GaugeChartProviders\n        config={config}\n        width={containerWidth}\n        height={containerHeight}\n        value={value}\n        valueAccessor={effectiveValueAccessor}\n        explicitColor={color}\n        seriesActions={seriesActions}\n      >\n        <GaugeChartLayout\n          ref={ref}\n          value={value}\n          valueAccessor={effectiveValueAccessor}\n          prefixIcon={prefixIcon}\n          intents={intents}\n          toolbar={toolbar}\n          tooltip={tooltip}\n        />\n      </GaugeChartProviders>\n    </div>\n  );\n});\n\n(_GaugeChart as ComponentWithName<typeof _GaugeChart>).displayName =\n  DISPLAY_NAME;\n\n/**\n * A Gauge Chart is a circular chart that displays information on a numeric\n * scale.\n * It's great for showing performance metrics or progress towards a goal.\n *\n * @public\n */\nexport const GaugeChart = Object.assign(_GaugeChart, {\n  ColorRule,\n  Intent,\n  Label,\n  ThresholdIndicator,\n  Toolbar: GaugeChartToolbarSlot,\n  Tooltip,\n});\n"],
-  "mappings": "AA0HQ;AA1HR;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAE1B,MAAM,cAAc,WAGlB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,oBAAoB,KAAK;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AAEJ,QAAM,yBAAyB,iBAAiB;AAEhD,QAAM,aAAa,gBAAgB,KAAK,KAAK;AAC7C,QAAM,cAAc,gBAAgB,MAAM,KAAK;AAE/C,QAAM,CAAC,EAAE,QAAQ,iBAAiB,OAAO,eAAe,GAAG,YAAY,IACrE,wBAAwB;AAE1B,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,sBAAoB,cAAc,MAAM;AACtC,UAAM,iBAA2C;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB;AAEA,WAAO;AAAA,MACL,SAAS,cAAc;AAAA,MACvB,WAAW,MACT,KAAK,UAAU,EAAE,MAAM,UAAU,YAAY,GAAG,eAAe,CAAC;AAAA,IACpE;AAAA,EACF,CAAC;AAED,QAAM,MAAM,aAA6C;AAAA,IACvD;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,QAAQ;AAAA,UACR;AAAA,UACA,eAAe;AAAA,UACf,eAAe;AAAA,UACf;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,eAAe;AAAA,cACf;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,YAAsD,cACrD;AASK,MAAM,aAAa,OAAO,OAAO,aAAa;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,CAAC;",
+  "sourcesContent": ["import {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useObserveContainerSize } from '../core/hooks/useObserveContainerSize.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport type { ComponentWithName } from '../core/types/component-with-name.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\nimport { GaugeChartLayout } from './components/GaugeChartLayout/GaugeChartLayout.js';\nimport {\n  DEFAULT_CHART_HEIGHT,\n  DEFAULT_CHART_WIDTH,\n  DISPLAY_NAME,\n  GAUGE_CHART_ARIA_LABEL,\n} from './constants.js';\nimport { useGaugeChartConfig } from './hooks/useGaugeChartConfig.js';\nimport { GaugeChartProviders } from './providers/GaugeChartProviders.js';\nimport { Label } from './slots/Label.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { GaugeChartToolbarSlot } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport type { GaugeChartConsumerConfig } from './types/gauge-chart-config.js';\nimport type { GaugeChartProps, GaugeChartRef } from './types/gauge-chart.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\n\nconst COMPONENT_NAME = 'GaugeChart';\n\nconst _GaugeChart = forwardRef<\n  GaugeChartRef,\n  PropsWithChildren<GaugeChartProps>\n>((props, forwardedRef) => {\n  const {\n    value,\n    width,\n    height,\n    style,\n    className,\n    prefixIcon,\n    seriesActions,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId = 'gauge-chart-root',\n    valueAccessor,\n  } = props;\n\n  const config = useGaugeChartConfig(props);\n  const {\n    min,\n    max,\n    color,\n    formatter,\n    thresholdsIndicators,\n    colorRules,\n    toolbar,\n    intents,\n    tooltip,\n    valueAccessor: configValueAccessor,\n  } = config;\n\n  const effectiveValueAccessor = valueAccessor ?? configValueAccessor;\n\n  const chartWidth = coerceSizeValue(width) ?? DEFAULT_CHART_WIDTH;\n  const chartHeight = coerceSizeValue(height) ?? DEFAULT_CHART_HEIGHT;\n\n  const [{ height: containerHeight, width: containerWidth }, containerRef] =\n    useObserveContainerSize();\n\n  const gaugeChartRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(forwardedRef, () => {\n    const consumerConfig: GaugeChartConsumerConfig = {\n      min,\n      max,\n      color,\n      formatter,\n      thresholdsIndicators,\n      colorRules,\n      toolbar,\n      tooltip,\n      valueAccessor: effectiveValueAccessor,\n    };\n\n    return {\n      element: gaugeChartRef.current,\n      getConfig: () =>\n        JSON.stringify({ type: ChartType.GaugeChart, ...consumerConfig }),\n    };\n  });\n\n  const ref = useMergeRefs<GaugeChartRef | HTMLDivElement>([\n    forwardedRef,\n    gaugeChartRef,\n  ]);\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        width: chartWidth,\n        height: chartHeight,\n        overflow: 'hidden',\n        ...style,\n      }}\n      className={className}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      role=\"img\"\n      aria-label={GAUGE_CHART_ARIA_LABEL}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <GaugeChartProviders\n        config={config}\n        width={containerWidth}\n        height={containerHeight}\n        value={value}\n        valueAccessor={effectiveValueAccessor}\n        explicitColor={color}\n        seriesActions={seriesActions}\n      >\n        <GaugeChartLayout\n          ref={ref}\n          value={value}\n          valueAccessor={effectiveValueAccessor}\n          prefixIcon={prefixIcon}\n          intents={intents}\n          toolbar={toolbar}\n          tooltip={tooltip}\n        />\n      </GaugeChartProviders>\n    </div>\n  );\n});\n\n(_GaugeChart as ComponentWithName<typeof _GaugeChart>).displayName =\n  DISPLAY_NAME;\n\n/**\n * A Gauge Chart is a circular chart that displays information on a numeric\n * scale.\n * It's great for showing performance metrics or progress towards a goal.\n *\n * @public\n */\nexport const GaugeChart = Object.assign(_GaugeChart, {\n  ColorRule,\n  Intent,\n  Label,\n  ThresholdIndicator,\n  Toolbar: GaugeChartToolbarSlot,\n  Tooltip,\n});\n"],
+  "mappings": "AA6HQ;AA7HR;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,iBAAiB;AAE1B,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,aAAa;AACtB,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AAGxB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB;AAEvB,MAAM,cAAc,WAGlB,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe,aAAa;AAAA,IAC5B;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,oBAAoB,KAAK;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,EACjB,IAAI;AAEJ,QAAM,yBAAyB,iBAAiB;AAEhD,QAAM,aAAa,gBAAgB,KAAK,KAAK;AAC7C,QAAM,cAAc,gBAAgB,MAAM,KAAK;AAE/C,QAAM,CAAC,EAAE,QAAQ,iBAAiB,OAAO,eAAe,GAAG,YAAY,IACrE,wBAAwB;AAE1B,QAAM,gBAAgB,OAAuB,IAAI;AAEjD,sBAAoB,cAAc,MAAM;AACtC,UAAM,iBAA2C;AAAA,MAC/C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,IACjB;AAEA,WAAO;AAAA,MACL,SAAS,cAAc;AAAA,MACvB,WAAW,MACT,KAAK,UAAU,EAAE,MAAM,UAAU,YAAY,GAAG,eAAe,CAAC;AAAA,IACpE;AAAA,EACF,CAAC;AAED,QAAM,MAAM,aAA6C;AAAA,IACvD;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,UACP,QAAQ;AAAA,UACR;AAAA,UACA,eAAe;AAAA,UACf,eAAe;AAAA,UACf;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,eAAe;AAAA,cACf;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,YAAsD,cACrD;AASK,MAAM,aAAa,OAAO,OAAO,aAAa;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AACF,CAAC;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.css

@@ -1,4 +1,4 @@
-._ezp7cy0-3-0-1 {
+._ezp7cy0-3-1-0 {
   width: 100%;
   height: 100%;
   container-type: size;

package/esm/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.sty.js

@@ -1,5 +1,5 @@
 import "./GaugeChartLayout.css";
-var layoutContainer = "_ezp7cy0-3-0-1";
+var layoutContainer = "_ezp7cy0-3-1-0";
 export {
   layoutContainer
 };

package/esm/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.css.ts"],
-  "sourcesContent": ["import './GaugeChartLayout.css';\nexport var layoutContainer = '_ezp7cy0-3-0-1';"],
+  "sourcesContent": ["import './GaugeChartLayout.css';\nexport var layoutContainer = '_ezp7cy0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeChartTooltip/GaugeTooltip.js

@@ -22,6 +22,7 @@ import { useTooltipEventListeners } from "../../hooks/use-tooltip-event-listener
 import { useGaugeChartFormatterContext } from "../../hooks/useGaugeChartFormatterContext.js";
 import { useGaugeChartRangeMaxContext } from "../../hooks/useGaugeChartRangeMaxContext.js";
 import { useGaugeChartRangeMinContext } from "../../hooks/useGaugeChartRangeMinContext.js";
+import { useGaugeChartTooltipOverlayBounds } from "../../hooks/useGaugeChartTooltipOverlayBounds.js";
 import { useTooltipHandlers } from "../../hooks/useTooltipHandlers.js";
 function isInitialPosition(mousePosition) {
   const { x, y } = mousePosition.absolute;
@@ -38,6 +39,7 @@ const GaugeChartTooltipWithHooks = (props) => {
   const { value, name, color, children } = props;
   const chartRef = useGaugeChartOverlayRef();
   const tooltipRef = useRef(null);
+  const overlayBounds = useGaugeChartTooltipOverlayBounds();
   useRegisterTooltipHandlerCallbacks(tooltipRef);
   const intl = useIntl();
   const {
@@ -46,7 +48,7 @@ const GaugeChartTooltipWithHooks = (props) => {
     onMouseLeaveHandler,
     onMouseEnterHandler
   } = useTooltipHandlers(chartRef);
-  const formatter = useGaugeChartFormatterContext();
+  const { formatter, unit } = useGaugeChartFormatterContext();
   const min = useGaugeChartRangeMinContext();
   const max = useGaugeChartRangeMaxContext();
   const isPinned = useTooltipPinned();
@@ -63,7 +65,7 @@ const GaugeChartTooltipWithHooks = (props) => {
   const tooltipItem = {
     id: `gauge-${name ?? intl.formatMessage({ defaultMessage: "value", id: "8ytnx+JjQq9C76vG" })}-${value}`,
     name: name ?? "Value",
-    values: [formatter(value)],
+    values: [formatter(value, unit)],
     color: { Default: color },
     min,
     max
@@ -75,23 +77,32 @@ const GaugeChartTooltipWithHooks = (props) => {
   const adjustedPosition = calculateAdjustedTooltipPosition(bounds, position);
   const shouldShowTooltip = isVisible && !isInitialPosition(position) && adjustedPosition;
   const actions = isPinned && tooltipItem ? () => seriesActions(tooltipItem) : void 0;
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      onMouseEnter: onMouseEnterHandler,
-      onMouseMove: onMouseMoveHandler,
-      onClick: onMouseClickHandler,
-      onMouseLeave: onMouseLeaveHandler,
-      style: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "100%",
-        height: "100%",
-        zIndex: zIndexGaugeAreas.tooltip
-      },
-      children: [
-        shouldShowTooltip && /* @__PURE__ */ jsx(
+  const overlayStyle = overlayBounds ? {
+    position: "absolute",
+    top: overlayBounds.top,
+    left: overlayBounds.left,
+    width: overlayBounds.width,
+    height: overlayBounds.height,
+    zIndex: zIndexGaugeAreas.tooltip
+  } : {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: zIndexGaugeAreas.tooltip
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx(
+      Flex,
+      {
+        onMouseEnter: onMouseEnterHandler,
+        onMouseMove: onMouseMoveHandler,
+        onClick: onMouseClickHandler,
+        onMouseLeave: onMouseLeaveHandler,
+        style: overlayStyle,
+        children: shouldShowTooltip && /* @__PURE__ */ jsx(
           ChartTooltip,
           {
             ref: tooltipRef,
@@ -113,11 +124,10 @@ const GaugeChartTooltipWithHooks = (props) => {
               }
             ) })
           }
-        ),
-        children
-      ]
-    }
-  );
+        )
+      }
+    )
+  ] });
 };
 GaugeChartTooltip["displayName"] = "GaugeChartTooltip";
 export {

package/esm/charts/gauge/components/GaugeChartTooltip/GaugeTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeChartTooltip/GaugeTooltip.tsx"],
-  "sourcesContent": ["import { PropsWithChildren, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { GaugeChartTooltipItem } from './GaugeTooltipItem.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useChartActionsMenu } from '../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { TooltipBody } from '../../../core/components/tooltip/section-components/TooltipBody.js';\nimport { useTooltipSeriesActions } from '../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport { useScrollResponsiveChartBounds } from '../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport type { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { TooltipItem } from '../../../core/types/tooltip.js';\nimport { calculateAdjustedTooltipPosition } from '../../../core/utils/calculate-adjusted-tooltip-position.js';\nimport { useRegisterTooltipHandlerCallbacks } from '../../../pie/hooks/useRegisterTooltipCallbacks.js';\nimport { zIndexGaugeAreas } from '../../constants.js';\nimport { useGaugeChartOverlayRef } from '../../contexts/GaugeChartOverlayRefContext.js';\nimport {\n  useTooltipPinned,\n  useTooltipPosition,\n  useTooltipVisible,\n} from '../../hooks/store/selectors.js';\nimport { useTooltipEventListeners } from '../../hooks/use-tooltip-event-listener.js';\nimport { useGaugeChartFormatterContext } from '../../hooks/useGaugeChartFormatterContext.js';\nimport { useGaugeChartRangeMaxContext } from '../../hooks/useGaugeChartRangeMaxContext.js';\nimport { useGaugeChartRangeMinContext } from '../../hooks/useGaugeChartRangeMinContext.js';\nimport { useTooltipHandlers } from '../../hooks/useTooltipHandlers.js';\n\ninterface GaugeChartTooltipProps extends PropsWithChildren {\n  value: number;\n  name?: string;\n  color: string;\n  showTooltip?: boolean;\n}\n\nfunction isInitialPosition(mousePosition: RelativeAbsolutePosition) {\n  const { x, y } = mousePosition.absolute;\n  return x === 0 && y === 0;\n}\n\nexport const GaugeChartTooltip = (props: GaugeChartTooltipProps) => {\n  const { showTooltip = true, children } = props;\n\n  if (!showTooltip) {\n    return <>{children}</>;\n  }\n\n  return <GaugeChartTooltipWithHooks {...props} />;\n};\n\nexport const GaugeChartTooltipWithHooks = (props: GaugeChartTooltipProps) => {\n  const { value, name, color, children } = props;\n  const chartRef = useGaugeChartOverlayRef();\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  useRegisterTooltipHandlerCallbacks(tooltipRef);\n  const intl = useIntl();\n\n  const {\n    onMouseMoveHandler,\n    onMouseClickHandler,\n    onMouseLeaveHandler,\n    onMouseEnterHandler,\n  } = useTooltipHandlers(chartRef);\n\n  const formatter = useGaugeChartFormatterContext();\n  const min = useGaugeChartRangeMinContext();\n  const max = useGaugeChartRangeMaxContext();\n\n  const isPinned = useTooltipPinned();\n  const position = useTooltipPosition();\n  const isVisible = useTooltipVisible();\n\n  const bounds = useScrollResponsiveChartBounds(chartRef, isPinned)();\n  useTooltipEventListeners(tooltipRef.current);\n\n  const {\n    onLeave: handleMenuLeave,\n    selectedItem: selectedItemId,\n    updateSelectedItem,\n    actionsMenuRef,\n  } = useChartActionsMenu();\n\n  const tooltipItem: TooltipItem = {\n    id: `gauge-${\n      name ??\n      intl.formatMessage({ defaultMessage: 'value', id: '8ytnx+JjQq9C76vG' })\n    }-${value}`,\n    name: name ?? 'Value',\n    values: [formatter(value)],\n    color: { Default: color },\n    min,\n    max,\n  };\n\n  const seriesActions = useTooltipSeriesActions(\n    [tooltipItem],\n    (item) => item.id,\n  );\n\n  const adjustedPosition = calculateAdjustedTooltipPosition(bounds, position);\n  const shouldShowTooltip =\n    isVisible && !isInitialPosition(position) && adjustedPosition;\n\n  const actions = (\n    isPinned && tooltipItem ? () => seriesActions(tooltipItem) : undefined\n  ) as (() => SeriesActionsTemplate) | undefined;\n\n  return (\n    <Flex\n      onMouseEnter={onMouseEnterHandler}\n      onMouseMove={onMouseMoveHandler}\n      onClick={onMouseClickHandler}\n      onMouseLeave={onMouseLeaveHandler}\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        zIndex: zIndexGaugeAreas.tooltip,\n      }}\n    >\n      {shouldShowTooltip && (\n        <ChartTooltip\n          ref={tooltipRef}\n          pinned={isPinned}\n          position={adjustedPosition}\n          updatePositionWhenPinned={true}\n          onMouseLeave={handleMenuLeave}\n          actionSelectionValue={{\n            selectedItemId,\n            actionsMenuRef,\n            updateSelectedItem,\n          }}\n        >\n          <TooltipBody virtualization={false}>\n            <GaugeChartTooltipItem\n              item={tooltipItem}\n              actions={actions}\n              defaultActions={getDefaultAction(tooltipItem)}\n            />\n          </TooltipBody>\n        </ChartTooltip>\n      )}\n      {children}\n    </Flex>\n  );\n};\n\nGaugeChartTooltip['displayName'] = 'GaugeChartTooltip';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { PropsWithChildren, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { GaugeChartTooltipItem } from './GaugeTooltipItem.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useChartActionsMenu } from '../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { getDefaultAction } from '../../../core/components/series-action/hooks/useDefaultAction.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { TooltipBody } from '../../../core/components/tooltip/section-components/TooltipBody.js';\nimport { useTooltipSeriesActions } from '../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport { useScrollResponsiveChartBounds } from '../../../core/hooks/useScrollResponsiveChartBounds.js';\nimport type { RelativeAbsolutePosition } from '../../../core/types/pointer-events.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { TooltipItem } from '../../../core/types/tooltip.js';\nimport { calculateAdjustedTooltipPosition } from '../../../core/utils/calculate-adjusted-tooltip-position.js';\nimport { useRegisterTooltipHandlerCallbacks } from '../../../pie/hooks/useRegisterTooltipCallbacks.js';\nimport { zIndexGaugeAreas } from '../../constants.js';\nimport { useGaugeChartOverlayRef } from '../../contexts/GaugeChartOverlayRefContext.js';\nimport {\n  useTooltipPinned,\n  useTooltipPosition,\n  useTooltipVisible,\n} from '../../hooks/store/selectors.js';\nimport { useTooltipEventListeners } from '../../hooks/use-tooltip-event-listener.js';\nimport { useGaugeChartFormatterContext } from '../../hooks/useGaugeChartFormatterContext.js';\nimport { useGaugeChartRangeMaxContext } from '../../hooks/useGaugeChartRangeMaxContext.js';\nimport { useGaugeChartRangeMinContext } from '../../hooks/useGaugeChartRangeMinContext.js';\nimport { useGaugeChartTooltipOverlayBounds } from '../../hooks/useGaugeChartTooltipOverlayBounds.js';\nimport { useTooltipHandlers } from '../../hooks/useTooltipHandlers.js';\n\ninterface GaugeChartTooltipProps extends PropsWithChildren {\n  value: number;\n  name?: string;\n  color: string;\n  showTooltip?: boolean;\n}\n\nfunction isInitialPosition(mousePosition: RelativeAbsolutePosition) {\n  const { x, y } = mousePosition.absolute;\n  return x === 0 && y === 0;\n}\n\nexport const GaugeChartTooltip = (props: GaugeChartTooltipProps) => {\n  const { showTooltip = true, children } = props;\n\n  if (!showTooltip) {\n    return <>{children}</>;\n  }\n\n  return <GaugeChartTooltipWithHooks {...props} />;\n};\n\nexport const GaugeChartTooltipWithHooks = (props: GaugeChartTooltipProps) => {\n  const { value, name, color, children } = props;\n  const chartRef = useGaugeChartOverlayRef();\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const overlayBounds = useGaugeChartTooltipOverlayBounds();\n  useRegisterTooltipHandlerCallbacks(tooltipRef);\n  const intl = useIntl();\n\n  const {\n    onMouseMoveHandler,\n    onMouseClickHandler,\n    onMouseLeaveHandler,\n    onMouseEnterHandler,\n  } = useTooltipHandlers(chartRef);\n\n  const { formatter, unit } = useGaugeChartFormatterContext();\n  const min = useGaugeChartRangeMinContext();\n  const max = useGaugeChartRangeMaxContext();\n\n  const isPinned = useTooltipPinned();\n  const position = useTooltipPosition();\n  const isVisible = useTooltipVisible();\n\n  const bounds = useScrollResponsiveChartBounds(chartRef, isPinned)();\n  useTooltipEventListeners(tooltipRef.current);\n\n  const {\n    onLeave: handleMenuLeave,\n    selectedItem: selectedItemId,\n    updateSelectedItem,\n    actionsMenuRef,\n  } = useChartActionsMenu();\n\n  const tooltipItem: TooltipItem = {\n    id: `gauge-${\n      name ??\n      intl.formatMessage({ defaultMessage: 'value', id: '8ytnx+JjQq9C76vG' })\n    }-${value}`,\n    name: name ?? 'Value',\n    values: [formatter(value, unit)],\n    color: { Default: color },\n    min,\n    max,\n  };\n\n  const seriesActions = useTooltipSeriesActions(\n    [tooltipItem],\n    (item) => item.id,\n  );\n\n  const adjustedPosition = calculateAdjustedTooltipPosition(bounds, position);\n  const shouldShowTooltip =\n    isVisible && !isInitialPosition(position) && adjustedPosition;\n\n  const actions = (\n    isPinned && tooltipItem ? () => seriesActions(tooltipItem) : undefined\n  ) as (() => SeriesActionsTemplate) | undefined;\n\n  const overlayStyle = overlayBounds\n    ? {\n        position: 'absolute' as const,\n        top: overlayBounds.top,\n        left: overlayBounds.left,\n        width: overlayBounds.width,\n        height: overlayBounds.height,\n        zIndex: zIndexGaugeAreas.tooltip,\n      }\n    : {\n        position: 'absolute' as const,\n        top: 0,\n        left: 0,\n        width: '100%',\n        height: '100%',\n        zIndex: zIndexGaugeAreas.tooltip,\n      };\n\n  return (\n    <>\n      {children}\n      <Flex\n        onMouseEnter={onMouseEnterHandler}\n        onMouseMove={onMouseMoveHandler}\n        onClick={onMouseClickHandler}\n        onMouseLeave={onMouseLeaveHandler}\n        style={overlayStyle}\n      >\n        {shouldShowTooltip && (\n          <ChartTooltip\n            ref={tooltipRef}\n            pinned={isPinned}\n            position={adjustedPosition}\n            updatePositionWhenPinned={true}\n            onMouseLeave={handleMenuLeave}\n            actionSelectionValue={{\n              selectedItemId,\n              actionsMenuRef,\n              updateSelectedItem,\n            }}\n          >\n            <TooltipBody virtualization={false}>\n              <GaugeChartTooltipItem\n                item={tooltipItem}\n                actions={actions}\n                defaultActions={getDefaultAction(tooltipItem)}\n              />\n            </TooltipBody>\n          </ChartTooltip>\n        )}\n      </Flex>\n    </>\n  );\n};\n\nGaugeChartTooltip['displayName'] = 'GaugeChartTooltip';\n"],
+  "mappings": "AA8CW,wBAmFP,YAnFO;AA9CX,SAA4B,cAAc;AAC1C,SAAS,eAAe;AAExB,SAAS,6BAA6B;AACtC,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,+BAA+B;AACxC,SAAS,sCAAsC;AAI/C,SAAS,wCAAwC;AACjD,SAAS,0CAA0C;AACnD,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,SAAS,qCAAqC;AAC9C,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;AAC7C,SAAS,yCAAyC;AAClD,SAAS,0BAA0B;AASnC,SAAS,kBAAkB,eAAyC;AAClE,QAAM,EAAE,GAAG,EAAE,IAAI,cAAc;AAC/B,SAAO,MAAM,KAAK,MAAM;AAC1B;AAEO,MAAM,oBAAoB,CAAC,UAAkC;AAClE,QAAM,EAAE,cAAc,MAAM,SAAS,IAAI;AAEzC,MAAI,CAAC,aAAa;AAChB,WAAO,gCAAG,UAAS;AAAA,EACrB;AAEA,SAAO,oBAAC,8BAA4B,GAAG,OAAO;AAChD;AAEO,MAAM,6BAA6B,CAAC,UAAkC;AAC3E,QAAM,EAAE,OAAO,MAAM,OAAO,SAAS,IAAI;AACzC,QAAM,WAAW,wBAAwB;AACzC,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,gBAAgB,kCAAkC;AACxD,qCAAmC,UAAU;AAC7C,QAAM,OAAO,QAAQ;AAErB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,QAAQ;AAE/B,QAAM,EAAE,WAAW,KAAK,IAAI,8BAA8B;AAC1D,QAAM,MAAM,6BAA6B;AACzC,QAAM,MAAM,6BAA6B;AAEzC,QAAM,WAAW,iBAAiB;AAClC,QAAM,WAAW,mBAAmB;AACpC,QAAM,YAAY,kBAAkB;AAEpC,QAAM,SAAS,+BAA+B,UAAU,QAAQ,EAAE;AAClE,2BAAyB,WAAW,OAAO;AAE3C,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,cAA2B;AAAA,IAC/B,IAAI,SACF,QACA,KAAK,cAAc,EAAE,gBAAgB,SAAS,IAAI,mBAAmB,CAAC,CACxE,IAAI,KAAK;AAAA,IACT,MAAM,QAAQ;AAAA,IACd,QAAQ,CAAC,UAAU,OAAO,IAAI,CAAC;AAAA,IAC/B,OAAO,EAAE,SAAS,MAAM;AAAA,IACxB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,WAAW;AAAA,IACZ,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,mBAAmB,iCAAiC,QAAQ,QAAQ;AAC1E,QAAM,oBACJ,aAAa,CAAC,kBAAkB,QAAQ,KAAK;AAE/C,QAAM,UACJ,YAAY,cAAc,MAAM,cAAc,WAAW,IAAI;AAG/D,QAAM,eAAe,gBACjB;AAAA,IACE,UAAU;AAAA,IACV,KAAK,cAAc;AAAA,IACnB,MAAM,cAAc;AAAA,IACpB,OAAO,cAAc;AAAA,IACrB,QAAQ,cAAc;AAAA,IACtB,QAAQ,iBAAiB;AAAA,EAC3B,IACA;AAAA,IACE,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,iBAAiB;AAAA,EAC3B;AAEJ,SACE,iCACG;AAAA;AAAA,IACD;AAAA,MAAC;AAAA;AAAA,QACC,cAAc;AAAA,QACd,aAAa;AAAA,QACb,SAAS;AAAA,QACT,cAAc;AAAA,QACd,OAAO;AAAA,QAEN,+BACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,0BAA0B;AAAA,YAC1B,cAAc;AAAA,YACd,sBAAsB;AAAA,cACpB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YAEA,8BAAC,eAAY,gBAAgB,OAC3B;AAAA,cAAC;AAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,gBAAgB,iBAAiB,WAAW;AAAA;AAAA,YAC9C,GACF;AAAA;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,kBAAkB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeLabel/GaugeLabel.css

@@ -1,22 +1,22 @@
-._18ourc20-3-0-1 {
+._18ourc20-3-1-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-0-1 {
+._18ourc21-3-1-0 {
   width: fit-content;
 }
-._18ourc22-3-0-1 {
+._18ourc22-3-1-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-0-1 {
+._18ourc23-3-1-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-0-1 {
+._18ourc24-3-1-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-0-1 {
+  ._18ourc24-3-1-0 {
     display: block;
   }
 }

package/esm/charts/gauge/components/GaugeLabel/GaugeLabel.sty.js

@@ -1,8 +1,8 @@
 import "./GaugeLabel.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var elementLabelWrapper = "_18ourc20-3-0-1";
-var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-0-1", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-0-1", hanging: "_18ourc23-3-0-1" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-0-1";
+var elementLabelWrapper = "_18ourc20-3-1-0";
+var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-1-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-1-0", hanging: "_18ourc23-3-1-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-1-0";
 export {
   elementLabelWrapper,
   foreignObjectContainer,

package/esm/charts/gauge/components/GaugeLabel/GaugeLabel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLabel/GaugeLabel.css.ts"],
-  "sourcesContent": ["import './GaugeLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementLabelWrapper = '_18ourc20-3-0-1';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-0-1',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-0-1',hanging:'_18ourc23-3-0-1'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-0-1';"],
+  "sourcesContent": ["import './GaugeLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementLabelWrapper = '_18ourc20-3-1-0';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-1-0',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-1-0',hanging:'_18ourc23-3-1-0'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB;AAC1B,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,kBAAiB,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,kBAAiB,UAAS,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjO,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.css

@@ -1,4 +1,4 @@
-._1fbjcz30-3-0-1 {
+._1fbjcz30-3-1-0 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template: "valueLabel" 2fr
@@ -7,9 +7,9 @@
   width: 100%;
   height: 100%;
 }
-._1fbjcz30-3-0-1 > #value-label {
+._1fbjcz30-3-1-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-0-1 > #label {
+._1fbjcz30-3-1-0 > #label {
   grid-area: label;
 }

package/esm/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.sty.js

@@ -1,5 +1,5 @@
 import "./GaugeLabelsWrapper.css";
-var labelsContainer = "_1fbjcz30-3-0-1";
+var labelsContainer = "_1fbjcz30-3-1-0";
 export {
   labelsContainer
 };

package/esm/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.css.ts"],
-  "sourcesContent": ["import './GaugeLabelsWrapper.css';\nexport var labelsContainer = '_1fbjcz30-3-0-1';"],
+  "sourcesContent": ["import './GaugeLabelsWrapper.css';\nexport var labelsContainer = '_1fbjcz30-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.css

@@ -1,4 +1,4 @@
-._l0e5zm0-3-0-1 {
+._l0e5zm0-3-1-0 {
   position: relative;
   height: 100%;
   z-index: 0;

package/esm/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.sty.js

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

package/esm/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.sty.js.map

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

package/esm/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.css

@@ -1,4 +1,4 @@
-._13c0oci0-3-0-1 {
+._13c0oci0-3-1-0 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-0-1 svg {
+._13c0oci1-3-1-0 svg {
   width: 1em;
   height: 1em;
   vertical-align: text-bottom;

package/esm/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.sty.js

@@ -1,6 +1,6 @@
 import "./GaugeResponsiveLabel.css";
-var parentSvgStyle = "_13c0oci1-3-0-1";
-var responsiveLabelContainer = "_13c0oci0-3-0-1";
+var parentSvgStyle = "_13c0oci1-3-1-0";
+var responsiveLabelContainer = "_13c0oci0-3-1-0";
 export {
   parentSvgStyle,
   responsiveLabelContainer

package/esm/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeResponsiveLabel/GaugeResponsiveLabel.css.ts"],
-  "sourcesContent": ["import './GaugeResponsiveLabel.css';\nexport var parentSvgStyle = '_13c0oci1-3-0-1';\nexport var responsiveLabelContainer = '_13c0oci0-3-0-1';"],
+  "sourcesContent": ["import './GaugeResponsiveLabel.css';\nexport var parentSvgStyle = '_13c0oci1-3-1-0';\nexport var responsiveLabelContainer = '_13c0oci0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/gauge/components/GaugeRootSVG.js

@@ -1,12 +1,14 @@
 import { jsx } from "react/jsx-runtime";
+import {
+  GAUGE_VERTICAL_DEFAULT_OFFSET,
+  GAUGE_VERTICAL_SMALL_OFFSET
+} from "../constants.js";
 import { useGaugeChartSizeContext } from "../hooks/useGaugeChartSizeContext.js";
-const SMALL_OFFSET = 0.05;
-const DEFAULT_OFFSET = 0.1;
 const GaugeRootSVG = ({ children }) => {
   const dimensions = useGaugeChartSizeContext();
   const width = dimensions?.width ?? 0;
   const height = dimensions?.height ?? 0;
-  const verticalOffset = height > width ? height * SMALL_OFFSET : height * DEFAULT_OFFSET;
+  const verticalOffset = height > width ? height * GAUGE_VERTICAL_SMALL_OFFSET : height * GAUGE_VERTICAL_DEFAULT_OFFSET;
   return /* @__PURE__ */ jsx(
     "svg",
     {

package/esm/charts/gauge/components/GaugeRootSVG.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gauge/components/GaugeRootSVG.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { useGaugeChartSizeContext } from '../hooks/useGaugeChartSizeContext.js';\n\nconst SMALL_OFFSET = 0.05;\nconst DEFAULT_OFFSET = 0.1;\n\nexport const GaugeRootSVG = ({ children }: PropsWithChildren) => {\n  const dimensions = useGaugeChartSizeContext();\n  const width = dimensions?.width ?? 0;\n  const height = dimensions?.height ?? 0;\n  const verticalOffset =\n    height > width ? height * SMALL_OFFSET : height * DEFAULT_OFFSET;\n\n  return (\n    <svg\n      width=\"100%\"\n      height=\"100%\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ display: 'block' }}\n    >\n      <g transform={`translate(${width / 2}, ${height / 2 + verticalOffset})`}>\n        {children}\n      </g>\n    </svg>\n  );\n};\n"],
-  "mappings": "AAqBM;AAnBN,SAAS,gCAAgC;AAEzC,MAAM,eAAe;AACrB,MAAM,iBAAiB;AAEhB,MAAM,eAAe,CAAC,EAAE,SAAS,MAAyB;AAC/D,QAAM,aAAa,yBAAyB;AAC5C,QAAM,QAAQ,YAAY,SAAS;AACnC,QAAM,SAAS,YAAY,UAAU;AACrC,QAAM,iBACJ,SAAS,QAAQ,SAAS,eAAe,SAAS;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B,OAAO,EAAE,SAAS,QAAQ;AAAA,MAE1B,8BAAC,OAAE,WAAW,aAAa,QAAQ,CAAC,KAAK,SAAS,IAAI,cAAc,KACjE,UACH;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport {\n  GAUGE_VERTICAL_DEFAULT_OFFSET,\n  GAUGE_VERTICAL_SMALL_OFFSET,\n} from '../constants.js';\nimport { useGaugeChartSizeContext } from '../hooks/useGaugeChartSizeContext.js';\n\nexport const GaugeRootSVG = ({ children }: PropsWithChildren) => {\n  const dimensions = useGaugeChartSizeContext();\n  const width = dimensions?.width ?? 0;\n  const height = dimensions?.height ?? 0;\n  const verticalOffset =\n    height > width\n      ? height * GAUGE_VERTICAL_SMALL_OFFSET\n      : height * GAUGE_VERTICAL_DEFAULT_OFFSET;\n\n  return (\n    <svg\n      width=\"100%\"\n      height=\"100%\"\n      viewBox={`0 0 ${width} ${height}`}\n      style={{ display: 'block' }}\n    >\n      <g transform={`translate(${width / 2}, ${height / 2 + verticalOffset})`}>\n        {children}\n      </g>\n    </svg>\n  );\n};\n"],
+  "mappings": "AAwBM;AAtBN;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AAElC,MAAM,eAAe,CAAC,EAAE,SAAS,MAAyB;AAC/D,QAAM,aAAa,yBAAyB;AAC5C,QAAM,QAAQ,YAAY,SAAS;AACnC,QAAM,SAAS,YAAY,UAAU;AACrC,QAAM,iBACJ,SAAS,QACL,SAAS,8BACT,SAAS;AAEf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,SAAS,OAAO,KAAK,IAAI,MAAM;AAAA,MAC/B,OAAO,EAAE,SAAS,QAAQ;AAAA,MAE1B,8BAAC,OAAE,WAAW,aAAa,QAAQ,CAAC,KAAK,SAAS,IAAI,cAAc,KACjE,UACH;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/gauge/constants.js

@@ -7,6 +7,8 @@ const MIN_SIZE_IN_PX = 100;
 const MIN_MAX_PADDING = 20;
 const ARC_OUTER_RADIUS_PERCENTAGE = 0.9;
 const ARC_INNER_RADIUS_PERCENTAGE = 0.8;
+const GAUGE_VERTICAL_SMALL_OFFSET = 0.05;
+const GAUGE_VERTICAL_DEFAULT_OFFSET = 0.1;
 const ARC_BACKGROUND_COLOR = Colors.Theme.Neutral["40"];
 const ARC_DEFAULT_VALUE_COLOR = Colors.Charts.Categorical.Color11.Default;
 const THRESHOLD_COLOR_DEFAULT = Colors.Charts.Categorical.Color11.Default;
@@ -24,14 +26,6 @@ const DISPLAY_NAME = "GaugeChart";
 const GAUGE_CHART_ARIA_LABEL = "Gauge Chart";
 const FONT_HEIGHT_RATIO = 0.7;
 const DEFAULT_MAX_VALUE_FONT_SIZE = 240;
-const GAUGE_TOOLTIP_INITIAL_STATE = Object.freeze({
-  position: {
-    absolute: { x: 0, y: 0 },
-    relative: { x: 0, y: 0 }
-  },
-  pinned: false,
-  visible: false
-});
 const zIndexGaugeAreas = {
   toolbar: 2,
   tooltip: 1,
@@ -53,7 +47,8 @@ export {
   FONT_HEIGHT_RATIO,
   GAUGE_CHART_ARIA_LABEL,
   GAUGE_DEFAULT_CONFIG,
-  GAUGE_TOOLTIP_INITIAL_STATE,
+  GAUGE_VERTICAL_DEFAULT_OFFSET,
+  GAUGE_VERTICAL_SMALL_OFFSET,
   MIN_MAX_PADDING,
   MIN_SIZE_IN_PX,
   THRESHOLD_COLOR_DEFAULT,

package/esm/charts/gauge/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/gauge/constants.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { GaugeChartTooltipState } from './providers/GaugeChartTooltipStoreProvider.js';\n\n//region Default Values\nexport const DEFAULT_MIN_RANGE_VALUE = 0;\nexport const DEFAULT_MAX_RANGE_VALUE = 100;\nexport const DEFAULT_CHART_WIDTH = '100%';\nexport const DEFAULT_CHART_HEIGHT = 300;\n//endregion\n\n//region Sizes\nexport const MIN_SIZE_IN_PX = 100;\nexport const MIN_MAX_PADDING = 20;\nexport const ARC_OUTER_RADIUS_PERCENTAGE = 0.9;\nexport const ARC_INNER_RADIUS_PERCENTAGE = 0.8;\n//endregion\n\n// region Colors\nexport const ARC_BACKGROUND_COLOR = Colors.Theme.Neutral['40'];\nexport const ARC_DEFAULT_VALUE_COLOR =\n  Colors.Charts.Categorical.Color11.Default;\nexport const THRESHOLD_COLOR_DEFAULT =\n  Colors.Charts.Categorical.Color11.Default;\n//endregion\n\n// region Arc Properties\nexport const ARC_START_ANGLE = -0.625 * Math.PI; // \u2212112.5\u00BA in radians\nexport const ARC_END_ANGLE = 0.625 * Math.PI; // 112.5\u00BA in radians\n//endregion\n\n//region Thresholds\nexport const THRESHOLD_LINE_WIDTH = 2;\nexport const THRESHOLD_LINE_DEFAULT_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region Config Defaults\nexport const GAUGE_DEFAULT_CONFIG = {\n  color: ARC_DEFAULT_VALUE_COLOR,\n  min: DEFAULT_MIN_RANGE_VALUE,\n  max: DEFAULT_MAX_RANGE_VALUE,\n  formatter: undefined,\n};\n//endregion\n\nexport const DISPLAY_NAME = 'GaugeChart';\n\nexport const GAUGE_CHART_ARIA_LABEL = 'Gauge Chart';\n\nexport const FONT_HEIGHT_RATIO = 0.7;\nexport const DEFAULT_MAX_VALUE_FONT_SIZE = 240;\n\n//region Tooltip\nexport const GAUGE_TOOLTIP_INITIAL_STATE =\n  Object.freeze<GaugeChartTooltipState>({\n    position: {\n      absolute: { x: 0, y: 0 },\n      relative: { x: 0, y: 0 },\n    },\n    pinned: false,\n    visible: false,\n  });\n//endregion\n\nexport const zIndexGaugeAreas = {\n  toolbar: 2,\n  tooltip: 1,\n  overlay: 0,\n};\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAKZ,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAChC,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAI7B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AAIpC,MAAM,uBAAuB,OAAO,MAAM,QAAQ,IAAI;AACtD,MAAM,0BACX,OAAO,OAAO,YAAY,QAAQ;AAC7B,MAAM,0BACX,OAAO,OAAO,YAAY,QAAQ;AAI7B,MAAM,kBAAkB,SAAS,KAAK;AACtC,MAAM,gBAAgB,QAAQ,KAAK;AAInC,MAAM,uBAAuB;AAC7B,MAAM,+BAA+B,OAAO,KAAK,QAAQ;AAIzD,MAAM,uBAAuB;AAAA,EAClC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,WAAW;AACb;AAGO,MAAM,eAAe;AAErB,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAC1B,MAAM,8BAA8B;AAGpC,MAAM,8BACX,OAAO,OAA+B;AAAA,EACpC,UAAU;AAAA,IACR,UAAU,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,IACvB,UAAU,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AACX,CAAC;AAGI,MAAM,mBAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\n//region Default Values\nexport const DEFAULT_MIN_RANGE_VALUE = 0;\nexport const DEFAULT_MAX_RANGE_VALUE = 100;\nexport const DEFAULT_CHART_WIDTH = '100%';\nexport const DEFAULT_CHART_HEIGHT = 300;\n//endregion\n\n//region Sizes\nexport const MIN_SIZE_IN_PX = 100;\nexport const MIN_MAX_PADDING = 20;\nexport const ARC_OUTER_RADIUS_PERCENTAGE = 0.9;\nexport const ARC_INNER_RADIUS_PERCENTAGE = 0.8;\nexport const GAUGE_VERTICAL_SMALL_OFFSET = 0.05;\nexport const GAUGE_VERTICAL_DEFAULT_OFFSET = 0.1;\n//endregion\n\n// region Colors\nexport const ARC_BACKGROUND_COLOR = Colors.Theme.Neutral['40'];\nexport const ARC_DEFAULT_VALUE_COLOR =\n  Colors.Charts.Categorical.Color11.Default;\nexport const THRESHOLD_COLOR_DEFAULT =\n  Colors.Charts.Categorical.Color11.Default;\n//endregion\n\n// region Arc Properties\nexport const ARC_START_ANGLE = -0.625 * Math.PI; // \u2212112.5\u00BA in radians\nexport const ARC_END_ANGLE = 0.625 * Math.PI; // 112.5\u00BA in radians\n//endregion\n\n//region Thresholds\nexport const THRESHOLD_LINE_WIDTH = 2;\nexport const THRESHOLD_LINE_DEFAULT_COLOR = Colors.Icon.Neutral.Default;\n//endregion\n\n//region Config Defaults\nexport const GAUGE_DEFAULT_CONFIG = {\n  color: ARC_DEFAULT_VALUE_COLOR,\n  min: DEFAULT_MIN_RANGE_VALUE,\n  max: DEFAULT_MAX_RANGE_VALUE,\n  formatter: undefined,\n};\n//endregion\n\nexport const DISPLAY_NAME = 'GaugeChart';\n\nexport const GAUGE_CHART_ARIA_LABEL = 'Gauge Chart';\n\nexport const FONT_HEIGHT_RATIO = 0.7;\nexport const DEFAULT_MAX_VALUE_FONT_SIZE = 240;\n\nexport const zIndexGaugeAreas = {\n  toolbar: 2,\n  tooltip: 1,\n  overlay: 0,\n};\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAGZ,MAAM,0BAA0B;AAChC,MAAM,0BAA0B;AAChC,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAI7B,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,8BAA8B;AACpC,MAAM,gCAAgC;AAItC,MAAM,uBAAuB,OAAO,MAAM,QAAQ,IAAI;AACtD,MAAM,0BACX,OAAO,OAAO,YAAY,QAAQ;AAC7B,MAAM,0BACX,OAAO,OAAO,YAAY,QAAQ;AAI7B,MAAM,kBAAkB,SAAS,KAAK;AACtC,MAAM,gBAAgB,QAAQ,KAAK;AAInC,MAAM,uBAAuB;AAC7B,MAAM,+BAA+B,OAAO,KAAK,QAAQ;AAIzD,MAAM,uBAAuB;AAAA,EAClC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,KAAK;AAAA,EACL,WAAW;AACb;AAGO,MAAM,eAAe;AAErB,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAC1B,MAAM,8BAA8B;AAEpC,MAAM,mBAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;",
   "names": []
 }

package/esm/charts/gauge/contexts/GaugeChartFormatterContext.js

@@ -1,5 +1,8 @@
 import { createContext } from "react";
-const GaugeChartFormatterContext = createContext(void 0);
+const GaugeChartFormatterContext = createContext({
+  formatter: void 0,
+  unit: ""
+});
 export {
   GaugeChartFormatterContext
 };

package/esm/charts/gauge/contexts/GaugeChartFormatterContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gauge/contexts/GaugeChartFormatterContext.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { Formatter } from '../../core/types/formatter.js';\n\nexport const GaugeChartFormatterContext = createContext<\n  Formatter | FormatOptions<Unit, ConvertibleUnit> | undefined\n>(undefined);\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAUvB,MAAM,6BAA6B,cAExC,MAAS;",
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { Formatter } from '../../core/types/formatter.js';\n\ninterface FormatterContextProps {\n  formatter: Formatter | FormatOptions<Unit, ConvertibleUnit> | undefined;\n  unit?: string | Unit;\n}\n\nexport const GaugeChartFormatterContext = createContext<FormatterContextProps>({\n  formatter: undefined,\n  unit: '',\n});\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAevB,MAAM,6BAA6B,cAAqC;AAAA,EAC7E,WAAW;AAAA,EACX,MAAM;AACR,CAAC;",
   "names": []
 }

package/esm/charts/gauge/contexts/GaugeChartTooltipContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gauge/contexts/GaugeChartTooltipContext.ts"],
-  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { Store, createStore } from '../../../core/store/store.js';\nimport { GaugeChartTooltipState } from '../providers/GaugeChartTooltipStoreProvider.js';\n\nexport const GaugeChartTooltipContext = createContext<\n  Store<GaugeChartTooltipState>\n>(createStore({} as GaugeChartTooltipState));\n\nexport const useGaugeChartTooltipContext = () =>\n  useContext(GaugeChartTooltipContext);\n"],
+  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { Store, createStore } from '../../../core/store/store.js';\nimport { GaugeChartTooltipState } from '../providers/GaugeChartTooltipState.js';\n\nexport const GaugeChartTooltipContext = createContext<\n  Store<GaugeChartTooltipState>\n>(createStore({} as GaugeChartTooltipState));\n\nexport const useGaugeChartTooltipContext = () =>\n  useContext(GaugeChartTooltipContext);\n"],
   "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAE1C,SAAgB,mBAAmB;AAG5B,MAAM,2BAA2B,cAEtC,YAAY,CAAC,CAA2B,CAAC;AAEpC,MAAM,8BAA8B,MACzC,WAAW,wBAAwB;",
   "names": []
 }