@dynatrace/strato-components 3.5.2 → 3.6.0

package/esm/charts/core/utils/adaptively-reduce-horizontal-ticks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/core/utils/adaptively-reduce-horizontal-ticks.ts"],
+  "sourcesContent": ["import type { NumberValue } from 'd3-scale';\n\nimport {\n  type ContinuousScale,\n  hasHorizontalLabelCollision,\n} from './has-horizontal-label-collision.js';\n\nconst DEFAULT_MAX_ITERATIONS = 5;\nexport const DEFAULT_MIN_TICK_COUNT = 2;\n\nexport interface TickCandidate {\n  formattedTicks: string[];\n  rawTicks: NumberValue[];\n}\n\nexport interface AdaptiveReductionOptions {\n  maxIterations?: number;\n  minTickCount?: number;\n  /**\n   * When provided, collision detection uses domain-aware alignment (AC1) instead\n   * of the legacy index-based alignment. Pass `[domainMin, domainMax]` as numbers\n   * (use `+` to convert Date values).\n   */\n  domainBounds?: [number, number];\n}\n\n/**\n * Adaptively reduces horizontal tick candidates until labels no longer\n * collide or the minimum tick count is reached.\n *\n * @param getCandidate - Called on each iteration with the 0-based attempt\n *   index. Must return the next candidate tick set. The callback is\n *   responsible for its own reduction strategy (e.g. doubling the step,\n *   halving the d3 tick count hint, etc.). Return `null` to signal that\n *   no further reduction is possible and the loop should stop.\n * @param scale - The d3 continuous scale used for pixel-position calculations.\n * @param options - Tuning knobs for the reduction loop.\n * @returns The first non-colliding candidate, or the last candidate when\n *   the loop exhausts all iterations / reaches the minimum tick count.\n */\nexport function adaptivelyReduceHorizontalTicks<T extends TickCandidate>(\n  getCandidate: (attempt: number) => T | null,\n  scale: ContinuousScale,\n  options?: AdaptiveReductionOptions,\n): T {\n  const maxIterations = options?.maxIterations ?? DEFAULT_MAX_ITERATIONS;\n  const minTickCount = options?.minTickCount ?? DEFAULT_MIN_TICK_COUNT;\n  const domainBounds = options?.domainBounds;\n\n  let current = getCandidate(0);\n\n  if (current === null) {\n    // Should not happen \u2014 caller must provide at least one candidate.\n    // Return a safe empty result that satisfies the type constraint.\n    return { formattedTicks: [], rawTicks: [] } as unknown as T;\n  }\n\n  for (let i = 1; i <= maxIterations; i++) {\n    if (\n      !hasHorizontalLabelCollision(\n        current.formattedTicks,\n        current.rawTicks,\n        scale,\n        domainBounds,\n      )\n    ) {\n      return current;\n    }\n\n    // Count only visible (non-empty) labels so that log-scale minor ticks (which\n    // render as empty strings) do not inflate the count and prevent early exit.\n    const currentVisibleCount = current.formattedTicks.filter(\n      (t) => t !== '',\n    ).length;\n    if (currentVisibleCount <= minTickCount) {\n      return current;\n    }\n\n    const next = getCandidate(i);\n    if (next === null) {\n      return current;\n    }\n    const nextVisibleCount = next.formattedTicks.filter((t) => t !== '').length;\n    if (nextVisibleCount < minTickCount) {\n      return current;\n    }\n\n    current = next;\n  }\n\n  return current;\n}\n"],
+  "mappings": "AAEA;AAAA,EAEE;AAAA,OACK;AAEP,MAAM,yBAAyB;AACxB,MAAM,yBAAyB;AAgC/B,SAAS,gCACd,cACA,OACA,SACG;AACH,QAAM,gBAAgB,SAAS,iBAAiB;AAChD,QAAM,eAAe,SAAS,gBAAgB;AAC9C,QAAM,eAAe,SAAS;AAE9B,MAAI,UAAU,aAAa,CAAC;AAE5B,MAAI,YAAY,MAAM;AAGpB,WAAO,EAAE,gBAAgB,CAAC,GAAG,UAAU,CAAC,EAAE;AAAA,EAC5C;AAEA,WAAS,IAAI,GAAG,KAAK,eAAe,KAAK;AACvC,QACE,CAAC;AAAA,MACC,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,IACF,GACA;AACA,aAAO;AAAA,IACT;AAIA,UAAM,sBAAsB,QAAQ,eAAe;AAAA,MACjD,CAAC,MAAM,MAAM;AAAA,IACf,EAAE;AACF,QAAI,uBAAuB,cAAc;AACvC,aAAO;AAAA,IACT;AAEA,UAAM,OAAO,aAAa,CAAC;AAC3B,QAAI,SAAS,MAAM;AACjB,aAAO;AAAA,IACT;AACA,UAAM,mBAAmB,KAAK,eAAe,OAAO,CAAC,MAAM,MAAM,EAAE,EAAE;AACrE,QAAI,mBAAmB,cAAc;AACnC,aAAO;AAAA,IACT;AAEA,cAAU;AAAA,EACZ;AAEA,SAAO;AACT;",
+  "names": []
+}

package/esm/charts/core/utils/has-horizontal-label-collision.js

@@ -0,0 +1,57 @@
+import { charsFontWidth12pixelsSize400Map } from "../components/text-ellipsis/chars-font-width-map.js";
+import { calculateWidth } from "../components/text-ellipsis/truncate-string.js";
+const TICK_LABEL_GAP_PX = 6;
+function hasHorizontalLabelCollision(formattedTicks, rawTicks, scale, domainBounds) {
+  const nonEmptyIndices = formattedTicks.reduce((acc, label, i) => {
+    if (label !== "") {
+      acc.push(i);
+    }
+    return acc;
+  }, []);
+  const filteredLabels = nonEmptyIndices.map((i) => formattedTicks[i]);
+  const filteredRaw = nonEmptyIndices.map((i) => rawTicks[i]);
+  const n = filteredLabels.length;
+  if (n < 2) {
+    return false;
+  }
+  const positionAt = scale;
+  const bounds = new Array(n);
+  for (let i = 0; i < n; i++) {
+    const width = calculateWidth(
+      filteredLabels[i],
+      charsFontWidth12pixelsSize400Map
+    );
+    const pos = positionAt(filteredRaw[i]);
+    let anchor;
+    if (domainBounds !== void 0) {
+      const numericValue = +filteredRaw[i];
+      if (numericValue === domainBounds[0]) {
+        anchor = "start";
+      } else if (numericValue === domainBounds[1]) {
+        anchor = "end";
+      } else {
+        anchor = "middle";
+      }
+    } else {
+      anchor = i === 0 ? "start" : i === n - 1 ? "end" : "middle";
+    }
+    if (anchor === "start") {
+      bounds[i] = { left: pos, right: pos + width };
+    } else if (anchor === "end") {
+      bounds[i] = { left: pos - width, right: pos };
+    } else {
+      bounds[i] = { left: pos - width / 2, right: pos + width / 2 };
+    }
+  }
+  for (let i = 0; i < n - 1; i++) {
+    if (bounds[i].right + TICK_LABEL_GAP_PX > bounds[i + 1].left) {
+      return true;
+    }
+  }
+  return false;
+}
+export {
+  TICK_LABEL_GAP_PX,
+  hasHorizontalLabelCollision
+};
+//# sourceMappingURL=has-horizontal-label-collision.js.map

package/esm/charts/core/utils/has-horizontal-label-collision.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/core/utils/has-horizontal-label-collision.ts"],
+  "sourcesContent": ["import type { NumberValue } from 'd3-scale';\n\nimport { charsFontWidth12pixelsSize400Map } from '../components/text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../components/text-ellipsis/truncate-string.js';\nimport type { AnyScale } from '../types/scales.js';\n\n/**\n * Minimum pixel gap required between adjacent tick labels.\n *\n * Lower values keep more ticks visible at the risk of labels almost touching;\n * higher values trigger reduction sooner and leave more whitespace. ~6px keeps\n * the gap visually clear while avoiding asymmetric drops between sibling\n * charts whose labels differ only by a few pixels (e.g. a leading \"-\").\n */\nexport const TICK_LABEL_GAP_PX = 6;\n\nexport type ContinuousScale = Exclude<AnyScale, { bandwidth: () => number }>;\n\n/**\n * Detects whether any two adjacent formatted tick labels would visually\n * overlap on a horizontal axis.\n *\n * When `domainBounds` is provided the function uses domain-aware alignment \u2014\n * the same logic as `getBottomTickLabelPropsWithDomainAlignment` (AC1):\n * - tick value === domainBounds[0] \u2192 `start`  (label extends right of position)\n * - tick value === domainBounds[1] \u2192 `end`    (label extends left of position)\n * - anything else                 \u2192 `middle`  (label centered on position)\n *\n * When `domainBounds` is omitted the function falls back to the legacy\n * index-based behaviour (first=start, last=end, others=middle), which is\n * kept for callers that have not been migrated yet.\n */\nexport function hasHorizontalLabelCollision(\n  formattedTicks: string[],\n  rawTicks: NumberValue[],\n  scale: ContinuousScale,\n  domainBounds?: [number, number],\n): boolean {\n  // Empty-label ticks (e.g. minor ticks on log scales) render no visible text.\n  // Filtering them out prevents false-positive collisions where a zero-width\n  // invisible label would still trigger the gap check against a real label.\n  const nonEmptyIndices = formattedTicks.reduce<number[]>((acc, label, i) => {\n    if (label !== '') {\n      acc.push(i);\n    }\n    return acc;\n  }, []);\n  const filteredLabels = nonEmptyIndices.map((i) => formattedTicks[i]);\n  const filteredRaw = nonEmptyIndices.map((i) => rawTicks[i]);\n\n  const n = filteredLabels.length;\n  if (n < 2) {\n    return false;\n  }\n\n  const positionAt = scale;\n  const bounds: { left: number; right: number }[] = new Array(n);\n\n  for (let i = 0; i < n; i++) {\n    const width = calculateWidth(\n      filteredLabels[i],\n      charsFontWidth12pixelsSize400Map,\n    );\n    const pos = positionAt(filteredRaw[i]);\n\n    let anchor: 'start' | 'middle' | 'end';\n    if (domainBounds !== undefined) {\n      const numericValue = +filteredRaw[i];\n      if (numericValue === domainBounds[0]) {\n        anchor = 'start';\n      } else if (numericValue === domainBounds[1]) {\n        anchor = 'end';\n      } else {\n        anchor = 'middle';\n      }\n    } else {\n      anchor = i === 0 ? 'start' : i === n - 1 ? 'end' : 'middle';\n    }\n\n    if (anchor === 'start') {\n      bounds[i] = { left: pos, right: pos + width };\n    } else if (anchor === 'end') {\n      bounds[i] = { left: pos - width, right: pos };\n    } else {\n      bounds[i] = { left: pos - width / 2, right: pos + width / 2 };\n    }\n  }\n\n  for (let i = 0; i < n - 1; i++) {\n    if (bounds[i].right + TICK_LABEL_GAP_PX > bounds[i + 1].left) {\n      return true;\n    }\n  }\n  return false;\n}\n"],
+  "mappings": "AAEA,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAWxB,MAAM,oBAAoB;AAkB1B,SAAS,4BACd,gBACA,UACA,OACA,cACS;AAIT,QAAM,kBAAkB,eAAe,OAAiB,CAAC,KAAK,OAAO,MAAM;AACzE,QAAI,UAAU,IAAI;AAChB,UAAI,KAAK,CAAC;AAAA,IACZ;AACA,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,iBAAiB,gBAAgB,IAAI,CAAC,MAAM,eAAe,CAAC,CAAC;AACnE,QAAM,cAAc,gBAAgB,IAAI,CAAC,MAAM,SAAS,CAAC,CAAC;AAE1D,QAAM,IAAI,eAAe;AACzB,MAAI,IAAI,GAAG;AACT,WAAO;AAAA,EACT;AAEA,QAAM,aAAa;AACnB,QAAM,SAA4C,IAAI,MAAM,CAAC;AAE7D,WAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,UAAM,QAAQ;AAAA,MACZ,eAAe,CAAC;AAAA,MAChB;AAAA,IACF;AACA,UAAM,MAAM,WAAW,YAAY,CAAC,CAAC;AAErC,QAAI;AACJ,QAAI,iBAAiB,QAAW;AAC9B,YAAM,eAAe,CAAC,YAAY,CAAC;AACnC,UAAI,iBAAiB,aAAa,CAAC,GAAG;AACpC,iBAAS;AAAA,MACX,WAAW,iBAAiB,aAAa,CAAC,GAAG;AAC3C,iBAAS;AAAA,MACX,OAAO;AACL,iBAAS;AAAA,MACX;AAAA,IACF,OAAO;AACL,eAAS,MAAM,IAAI,UAAU,MAAM,IAAI,IAAI,QAAQ;AAAA,IACrD;AAEA,QAAI,WAAW,SAAS;AACtB,aAAO,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,MAAM,MAAM;AAAA,IAC9C,WAAW,WAAW,OAAO;AAC3B,aAAO,CAAC,IAAI,EAAE,MAAM,MAAM,OAAO,OAAO,IAAI;AAAA,IAC9C,OAAO;AACL,aAAO,CAAC,IAAI,EAAE,MAAM,MAAM,QAAQ,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,IAC9D;AAAA,EACF;AAEA,WAAS,IAAI,GAAG,IAAI,IAAI,GAAG,KAAK;AAC9B,QAAI,OAAO,CAAC,EAAE,QAAQ,oBAAoB,OAAO,IAAI,CAAC,EAAE,MAAM;AAC5D,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}

package/esm/charts/core/utils/is-feature-enabled.js

@@ -1,5 +1,6 @@
 const CONFIG = {
-  histogramToXY: "atlas-01"
+  histogramToXY: "atlas-01",
+  timeseriesToXY: "atlas-01"
 };
 function isFeatureEnabled(key) {
   const urlParam = new URLSearchParams(window.location.search);

package/esm/charts/core/utils/is-feature-enabled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/is-feature-enabled.ts"],
-  "sourcesContent": ["type FeatureKey = keyof typeof CONFIG;\n\nconst CONFIG = {\n  histogramToXY: 'atlas-01',\n};\n\nexport function isFeatureEnabled(key: FeatureKey): boolean {\n  const urlParam = new URLSearchParams(window.location.search);\n  return urlParam.get(key) === CONFIG[key];\n}\n"],
-  "mappings": "AAEA,MAAM,SAAS;AAAA,EACb,eAAe;AACjB;AAEO,SAAS,iBAAiB,KAA0B;AACzD,QAAM,WAAW,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC3D,SAAO,SAAS,IAAI,GAAG,MAAM,OAAO,GAAG;AACzC;",
+  "sourcesContent": ["type FeatureKey = keyof typeof CONFIG;\n\nconst CONFIG = {\n  histogramToXY: 'atlas-01',\n  timeseriesToXY: 'atlas-01',\n};\n\nexport function isFeatureEnabled(key: FeatureKey): boolean {\n  const urlParam = new URLSearchParams(window.location.search);\n  return urlParam.get(key) === CONFIG[key];\n}\n"],
+  "mappings": "AAEA,MAAM,SAAS;AAAA,EACb,eAAe;AAAA,EACf,gBAAgB;AAClB;AAEO,SAAS,iBAAiB,KAA0B;AACzD,QAAM,WAAW,IAAI,gBAAgB,OAAO,SAAS,MAAM;AAC3D,SAAO,SAAS,IAAI,GAAG,MAAM,OAAO,GAAG;AACzC;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./GanttChartLine.css";
-var wrapper = "_1pk2ed10-3-5-2";
+var wrapper = "_1pk2ed10-3-6-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-5-2';"],
+  "sourcesContent": ["import './GanttChartLine.css';\nexport var wrapper = '_1pk2ed10-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._mnxak30-3-5-2 {
+._mnxak30-3-6-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-5-2";
+var svgWrapperCSS = "_mnxak30-3-6-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-5-2';"],
+  "sourcesContent": ["import './GanttChartLineRenderer.css';\nexport var svgWrapperCSS = '_mnxak30-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1v8s3xl0-3-5-2._1v8s3xl0-3-5-2 {
+._1v8s3xl0-3-6-0._1v8s3xl0-3-6-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-5-2";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-6-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-5-2';"],
+  "sourcesContent": ["import './GanttChartTooltip.css';\nexport var ganttChartTooltipCSS = '_1v8s3xl0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._ezp7cy0-3-5-2 {
+._ezp7cy0-3-6-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-5-2";
+var layoutContainer = "_ezp7cy0-3-6-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-5-2';"],
+  "sourcesContent": ["import './GaugeChartLayout.css';\nexport var layoutContainer = '_ezp7cy0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
 import { OverlayTooltip } from "../../../core/components/overlay-tooltip/OverlayTooltip.js";
 import { useTooltipSeriesActions } from "../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js";
-import { useGaugeChartTooltipName } from "../../contexts/GaugeChartTooltipNameContext.js";
+import { useGaugeChartTooltip } from "../../contexts/GaugeChartTooltipContext.js";
 import { useGaugeChartFormatterContext } from "../../hooks/useGaugeChartFormatterContext.js";
 const GaugeOverlayTooltip = ({
   value,
@@ -10,7 +10,7 @@ const GaugeOverlayTooltip = ({
 }) => {
   const intl = useIntl();
   const { formatter, unit } = useGaugeChartFormatterContext();
-  const tooltipName = useGaugeChartTooltipName();
+  const { name: tooltipName, template } = useGaugeChartTooltip();
   const seriesName = tooltipName ?? intl.formatMessage({ defaultMessage: "Value", id: "jc4XDeI4sf7aLs2W" });
   const formattedValue = formatter(value, unit);
   const tooltipItem = {
@@ -23,6 +23,16 @@ const GaugeOverlayTooltip = ({
     (item) => item.id
   );
   const actions = tooltipItem ? () => seriesActions(tooltipItem) : void 0;
+  if (template) {
+    const customItem = {
+      value,
+      formattedValue,
+      color,
+      name: tooltipName,
+      unit: typeof unit === "string" ? unit : void 0
+    };
+    return /* @__PURE__ */ jsx(OverlayTooltip, { legacyTemplate: template(customItem) });
+  }
   return /* @__PURE__ */ jsx(OverlayTooltip, { children: /* @__PURE__ */ jsx(
     OverlayTooltip.SeriesItem,
     {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeChartTooltip/GaugeOverlayTooltip.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { useTooltipSeriesActions } from '../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useGaugeChartTooltipName } from '../../contexts/GaugeChartTooltipNameContext.js';\nimport { useGaugeChartFormatterContext } from '../../hooks/useGaugeChartFormatterContext.js';\n\ninterface GaugeOverlayTooltipProps {\n  value: number;\n  color: string;\n}\n\nexport const GaugeOverlayTooltip = ({\n  value,\n  color,\n}: GaugeOverlayTooltipProps) => {\n  const intl = useIntl();\n  const { formatter, unit } = useGaugeChartFormatterContext();\n  const tooltipName = useGaugeChartTooltipName();\n\n  const seriesName =\n    tooltipName ??\n    intl.formatMessage({ defaultMessage: 'Value', id: 'jc4XDeI4sf7aLs2W' });\n  const formattedValue = formatter(value, unit);\n\n  const tooltipItem = {\n    id: `${seriesName}-${value}`,\n    name: seriesName,\n    values: [formattedValue],\n  };\n\n  const seriesActions = useTooltipSeriesActions(\n    [tooltipItem],\n    (item) => item.id,\n  );\n\n  const actions = (\n    tooltipItem ? () => seriesActions(tooltipItem) : undefined\n  ) as (() => SeriesActionsTemplate) | undefined;\n\n  return (\n    <OverlayTooltip>\n      <OverlayTooltip.SeriesItem\n        name={seriesName}\n        value={formattedValue}\n        color={color}\n        actions={actions}\n      />\n    </OverlayTooltip>\n  );\n};\n\nGaugeOverlayTooltip['displayName'] = 'GaugeOverlayTooltip';\n"],
-  "mappings": "AA2CM;AA3CN,SAAS,eAAe;AAExB,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AAExC,SAAS,gCAAgC;AACzC,SAAS,qCAAqC;AAOvC,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,WAAW,KAAK,IAAI,8BAA8B;AAC1D,QAAM,cAAc,yBAAyB;AAE7C,QAAM,aACJ,eACA,KAAK,cAAc,EAAE,gBAAgB,SAAS,IAAI,mBAAmB,CAAC;AACxE,QAAM,iBAAiB,UAAU,OAAO,IAAI;AAE5C,QAAM,cAAc;AAAA,IAClB,IAAI,GAAG,UAAU,IAAI,KAAK;AAAA,IAC1B,MAAM;AAAA,IACN,QAAQ,CAAC,cAAc;AAAA,EACzB;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,WAAW;AAAA,IACZ,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,UACJ,cAAc,MAAM,cAAc,WAAW,IAAI;AAGnD,SACE,oBAAC,kBACC;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { useTooltipSeriesActions } from '../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useGaugeChartTooltip } from '../../contexts/GaugeChartTooltipContext.js';\nimport { useGaugeChartFormatterContext } from '../../hooks/useGaugeChartFormatterContext.js';\nimport type { GaugeChartTooltipItem } from '../../slots/Tooltip.js';\n\ninterface GaugeOverlayTooltipProps {\n  value: number;\n  color: string;\n}\n\nexport const GaugeOverlayTooltip = ({\n  value,\n  color,\n}: GaugeOverlayTooltipProps) => {\n  const intl = useIntl();\n  const { formatter, unit } = useGaugeChartFormatterContext();\n  const { name: tooltipName, template } = useGaugeChartTooltip();\n\n  const seriesName =\n    tooltipName ??\n    intl.formatMessage({ defaultMessage: 'Value', id: 'jc4XDeI4sf7aLs2W' });\n  const formattedValue = formatter(value, unit);\n\n  const tooltipItem = {\n    id: `${seriesName}-${value}`,\n    name: seriesName,\n    values: [formattedValue],\n  };\n\n  const seriesActions = useTooltipSeriesActions(\n    [tooltipItem],\n    (item) => item.id,\n  );\n\n  const actions = (\n    tooltipItem ? () => seriesActions(tooltipItem) : undefined\n  ) as (() => SeriesActionsTemplate) | undefined;\n\n  if (template) {\n    const customItem: GaugeChartTooltipItem = {\n      value,\n      formattedValue,\n      color,\n      name: tooltipName,\n      unit: typeof unit === 'string' ? unit : undefined,\n    };\n    return <OverlayTooltip legacyTemplate={template(customItem)} />;\n  }\n\n  return (\n    <OverlayTooltip>\n      <OverlayTooltip.SeriesItem\n        name={seriesName}\n        value={formattedValue}\n        color={color}\n        actions={actions}\n      />\n    </OverlayTooltip>\n  );\n};\n\nGaugeOverlayTooltip['displayName'] = 'GaugeOverlayTooltip';\n"],
+  "mappings": "AAkDW;AAlDX,SAAS,eAAe;AAExB,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AAExC,SAAS,4BAA4B;AACrC,SAAS,qCAAqC;AAQvC,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,WAAW,KAAK,IAAI,8BAA8B;AAC1D,QAAM,EAAE,MAAM,aAAa,SAAS,IAAI,qBAAqB;AAE7D,QAAM,aACJ,eACA,KAAK,cAAc,EAAE,gBAAgB,SAAS,IAAI,mBAAmB,CAAC;AACxE,QAAM,iBAAiB,UAAU,OAAO,IAAI;AAE5C,QAAM,cAAc;AAAA,IAClB,IAAI,GAAG,UAAU,IAAI,KAAK;AAAA,IAC1B,MAAM;AAAA,IACN,QAAQ,CAAC,cAAc;AAAA,EACzB;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,WAAW;AAAA,IACZ,CAAC,SAAS,KAAK;AAAA,EACjB;AAEA,QAAM,UACJ,cAAc,MAAM,cAAc,WAAW,IAAI;AAGnD,MAAI,UAAU;AACZ,UAAM,aAAoC;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,MAAM,OAAO,SAAS,WAAW,OAAO;AAAA,IAC1C;AACA,WAAO,oBAAC,kBAAe,gBAAgB,SAAS,UAAU,GAAG;AAAA,EAC/D;AAEA,SACE,oBAAC,kBACC;AAAA,IAAC,eAAe;AAAA,IAAf;AAAA,MACC,MAAM;AAAA,MACN,OAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,22 +1,22 @@
-._18ourc20-3-5-2 {
+._18ourc20-3-6-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-5-2 {
+._18ourc21-3-6-0 {
   width: fit-content;
 }
-._18ourc22-3-5-2 {
+._18ourc22-3-6-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-5-2 {
+._18ourc23-3-6-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-5-2 {
+._18ourc24-3-6-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-5-2 {
+  ._18ourc24-3-6-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-5-2";
-var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-5-2", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-5-2", hanging: "_18ourc23-3-5-2" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-5-2";
+var elementLabelWrapper = "_18ourc20-3-6-0";
+var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-6-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-6-0", hanging: "_18ourc23-3-6-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-6-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-5-2';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-5-2',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-5-2',hanging:'_18ourc23-3-5-2'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-5-2';"],
+  "sourcesContent": ["import './GaugeLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var elementLabelWrapper = '_18ourc20-3-6-0';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-6-0',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-6-0',hanging:'_18ourc23-3-6-0'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-6-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/GaugeLabels.js

@@ -2,7 +2,6 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isNull, isUndefined } from "lodash-es";
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import { replaceSlashedZero } from "../../core/typographyStyles.sty.js";
-import { MIN_MAX_PADDING } from "../constants.js";
 import { useDefaultLabels } from "../hooks/useDefaultLabels.js";
 import { useGaugeChartLabelsContext } from "../hooks/useGaugeChartLabelsContext.js";
 import { useGaugeChartMinMaxLabelsPosition } from "../hooks/useGaugeChartMinMaxLabelsPosition.js";
@@ -11,7 +10,7 @@ import { GaugeLabelsWrapper } from "./GaugeLabelsWrapper/GaugeLabelsWrapper.js";
 const GaugeLabels = ({ value, prefixIcon }) => {
   const { label } = useGaugeChartLabelsContext();
   const { defaultLabel, defaultMaxLabel, defaultMinLabel, defaultValueLabel } = useDefaultLabels(value);
-  const { maxLabelPosition, minLabelPosition } = useGaugeChartMinMaxLabelsPosition();
+  const { maxLabelPosition, minLabelPosition, minMaxPadding } = useGaugeChartMinMaxLabelsPosition();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "g",
@@ -46,7 +45,7 @@ const GaugeLabels = ({ value, prefixIcon }) => {
         {
           value: defaultMinLabel,
           x: minLabelPosition.x,
-          y: minLabelPosition.y + MIN_MAX_PADDING,
+          y: minLabelPosition.y + minMaxPadding,
           autoHide: true
         }
       ),
@@ -55,7 +54,7 @@ const GaugeLabels = ({ value, prefixIcon }) => {
         {
           value: defaultMaxLabel,
           x: maxLabelPosition.x,
-          y: maxLabelPosition.y + MIN_MAX_PADDING,
+          y: maxLabelPosition.y + minMaxPadding,
           autoHide: true
         }
       )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/gauge/components/GaugeLabels.tsx"],
-  "sourcesContent": ["import { isNull, isUndefined } from 'lodash-es';\nimport type { ReactNode } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { replaceSlashedZero } from '../../core/typographyStyles.sty.js';\nimport { MIN_MAX_PADDING } from '../constants.js';\nimport { useDefaultLabels } from '../hooks/useDefaultLabels.js';\nimport { useGaugeChartLabelsContext } from '../hooks/useGaugeChartLabelsContext.js';\nimport { useGaugeChartMinMaxLabelsPosition } from '../hooks/useGaugeChartMinMaxLabelsPosition.js';\nimport { GaugeLabel } from './GaugeLabel/GaugeLabel.js';\nimport { GaugeLabelsWrapper } from './GaugeLabelsWrapper/GaugeLabelsWrapper.js';\n\ninterface GaugeLabelsProps {\n  value: number;\n  prefixIcon?: ReactNode;\n}\n\nexport const GaugeLabels = ({ value, prefixIcon }: GaugeLabelsProps) => {\n  const { label } = useGaugeChartLabelsContext();\n\n  const { defaultLabel, defaultMaxLabel, defaultMinLabel, defaultValueLabel } =\n    useDefaultLabels(value);\n\n  const { maxLabelPosition, minLabelPosition } =\n    useGaugeChartMinMaxLabelsPosition();\n\n  return (\n    <>\n      <g\n        fill={Colors.Text.Neutral.Default}\n        id=\"internal-labels\"\n        className={replaceSlashedZero}\n      >\n        <GaugeLabelsWrapper>\n          <GaugeLabel\n            id=\"value-label\"\n            value={defaultValueLabel}\n            prefixIcon={prefixIcon}\n            responsive\n          />\n          {!isUndefined(label) && (\n            <GaugeLabel\n              id=\"label\"\n              value={isNull(label) ? defaultLabel : label}\n              responsive\n            />\n          )}\n        </GaugeLabelsWrapper>\n      </g>\n\n      <g fill={Colors.Text.Neutral.Default} id=\"min-max-labels\">\n        <GaugeLabel\n          value={defaultMinLabel}\n          x={minLabelPosition.x}\n          y={minLabelPosition.y + MIN_MAX_PADDING}\n          autoHide\n        />\n        <GaugeLabel\n          value={defaultMaxLabel}\n          x={maxLabelPosition.x}\n          y={maxLabelPosition.y + MIN_MAX_PADDING}\n          autoHide\n        />\n      </g>\n    </>\n  );\n};\n"],
-  "mappings": "AA4BI,mBAOM,KADF,YANJ;AA5BJ,SAAS,QAAQ,mBAAmB;AAGpC,OAAO,YAAY;AAEnB,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,yCAAyC;AAClD,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAO5B,MAAM,cAAc,CAAC,EAAE,OAAO,WAAW,MAAwB;AACtE,QAAM,EAAE,MAAM,IAAI,2BAA2B;AAE7C,QAAM,EAAE,cAAc,iBAAiB,iBAAiB,kBAAkB,IACxE,iBAAiB,KAAK;AAExB,QAAM,EAAE,kBAAkB,iBAAiB,IACzC,kCAAkC;AAEpC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,OAAO,KAAK,QAAQ;AAAA,QAC1B,IAAG;AAAA,QACH,WAAW;AAAA,QAEX,+BAAC,sBACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO;AAAA,cACP;AAAA,cACA,YAAU;AAAA;AAAA,UACZ;AAAA,UACC,CAAC,YAAY,KAAK,KACjB;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO,OAAO,KAAK,IAAI,eAAe;AAAA,cACtC,YAAU;AAAA;AAAA,UACZ;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAEA,qBAAC,OAAE,MAAM,OAAO,KAAK,QAAQ,SAAS,IAAG,kBACvC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,GAAG,iBAAiB;AAAA,UACpB,GAAG,iBAAiB,IAAI;AAAA,UACxB,UAAQ;AAAA;AAAA,MACV;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,GAAG,iBAAiB;AAAA,UACpB,GAAG,iBAAiB,IAAI;AAAA,UACxB,UAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { isNull, isUndefined } from 'lodash-es';\nimport type { ReactNode } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { replaceSlashedZero } from '../../core/typographyStyles.sty.js';\nimport { useDefaultLabels } from '../hooks/useDefaultLabels.js';\nimport { useGaugeChartLabelsContext } from '../hooks/useGaugeChartLabelsContext.js';\nimport { useGaugeChartMinMaxLabelsPosition } from '../hooks/useGaugeChartMinMaxLabelsPosition.js';\nimport { GaugeLabel } from './GaugeLabel/GaugeLabel.js';\nimport { GaugeLabelsWrapper } from './GaugeLabelsWrapper/GaugeLabelsWrapper.js';\n\ninterface GaugeLabelsProps {\n  value: number;\n  prefixIcon?: ReactNode;\n}\n\nexport const GaugeLabels = ({ value, prefixIcon }: GaugeLabelsProps) => {\n  const { label } = useGaugeChartLabelsContext();\n\n  const { defaultLabel, defaultMaxLabel, defaultMinLabel, defaultValueLabel } =\n    useDefaultLabels(value);\n\n  const { maxLabelPosition, minLabelPosition, minMaxPadding } =\n    useGaugeChartMinMaxLabelsPosition();\n\n  return (\n    <>\n      <g\n        fill={Colors.Text.Neutral.Default}\n        id=\"internal-labels\"\n        className={replaceSlashedZero}\n      >\n        <GaugeLabelsWrapper>\n          <GaugeLabel\n            id=\"value-label\"\n            value={defaultValueLabel}\n            prefixIcon={prefixIcon}\n            responsive\n          />\n          {!isUndefined(label) && (\n            <GaugeLabel\n              id=\"label\"\n              value={isNull(label) ? defaultLabel : label}\n              responsive\n            />\n          )}\n        </GaugeLabelsWrapper>\n      </g>\n\n      <g fill={Colors.Text.Neutral.Default} id=\"min-max-labels\">\n        <GaugeLabel\n          value={defaultMinLabel}\n          x={minLabelPosition.x}\n          y={minLabelPosition.y + minMaxPadding}\n          autoHide\n        />\n        <GaugeLabel\n          value={defaultMaxLabel}\n          x={maxLabelPosition.x}\n          y={maxLabelPosition.y + minMaxPadding}\n          autoHide\n        />\n      </g>\n    </>\n  );\n};\n"],
+  "mappings": "AA2BI,mBAOM,KADF,YANJ;AA3BJ,SAAS,QAAQ,mBAAmB;AAGpC,OAAO,YAAY;AAEnB,SAAS,0BAA0B;AACnC,SAAS,wBAAwB;AACjC,SAAS,kCAAkC;AAC3C,SAAS,yCAAyC;AAClD,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AAO5B,MAAM,cAAc,CAAC,EAAE,OAAO,WAAW,MAAwB;AACtE,QAAM,EAAE,MAAM,IAAI,2BAA2B;AAE7C,QAAM,EAAE,cAAc,iBAAiB,iBAAiB,kBAAkB,IACxE,iBAAiB,KAAK;AAExB,QAAM,EAAE,kBAAkB,kBAAkB,cAAc,IACxD,kCAAkC;AAEpC,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,OAAO,KAAK,QAAQ;AAAA,QAC1B,IAAG;AAAA,QACH,WAAW;AAAA,QAEX,+BAAC,sBACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO;AAAA,cACP;AAAA,cACA,YAAU;AAAA;AAAA,UACZ;AAAA,UACC,CAAC,YAAY,KAAK,KACjB;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,OAAO,OAAO,KAAK,IAAI,eAAe;AAAA,cACtC,YAAU;AAAA;AAAA,UACZ;AAAA,WAEJ;AAAA;AAAA,IACF;AAAA,IAEA,qBAAC,OAAE,MAAM,OAAO,KAAK,QAAQ,SAAS,IAAG,kBACvC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,GAAG,iBAAiB;AAAA,UACpB,GAAG,iBAAiB,IAAI;AAAA,UACxB,UAAQ;AAAA;AAAA,MACV;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,GAAG,iBAAiB;AAAA,UACpB,GAAG,iBAAiB,IAAI;AAAA,UACxB,UAAQ;AAAA;AAAA,MACV;AAAA,OACF;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1fbjcz30-3-5-2 {
+._1fbjcz30-3-6-0 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template: "valueLabel" 2fr
@@ -7,9 +7,9 @@
   width: 100%;
   height: 100%;
 }
-._1fbjcz30-3-5-2 > #value-label {
+._1fbjcz30-3-6-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-5-2 > #label {
+._1fbjcz30-3-6-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-5-2";
+var labelsContainer = "_1fbjcz30-3-6-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-5-2';"],
+  "sourcesContent": ["import './GaugeLabelsWrapper.css';\nexport var labelsContainer = '_1fbjcz30-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

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

@@ -1,17 +1,17 @@
-._l0e5zm0-3-5-2 {
+._l0e5zm0-3-6-0 {
   position: relative;
   height: 100%;
   z-index: 0;
 }
-._l0e5zm1-3-5-2 {
+._l0e5zm1-3-6-0 {
   cursor: default;
   user-select: none;
 }
-._l0e5zm2-3-5-2 {
+._l0e5zm2-3-6-0 {
   position: absolute;
   z-index: 1;
 }
-._l0e5zm3-3-5-2 {
+._l0e5zm3-3-6-0 {
   top: 0;
   left: 0;
   width: 100%;

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

@@ -8,7 +8,8 @@ import {
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { LoaderOverlay } from "../../../core/components/loader-overlay/LoaderOverlay.js";
 import { useOverlay } from "../../../core/components/overlay-tooltip/contexts/OverlayContext.js";
-import { useGaugeChartOverlayEvents } from "../../hooks/useGaugeChartOverlayEvents.js";
+import { useTooltipActions } from "../../../core/components/overlay-tooltip/useTooltipActions.js";
+import { useGaugeChartTooltip } from "../../contexts/GaugeChartTooltipContext.js";
 import { useGaugeChartTooltipOverlayBounds } from "../../hooks/useGaugeChartTooltipOverlayBounds.js";
 import {
   GaugeChartToolbar
@@ -18,12 +19,12 @@ const GaugeChartOverlay = (props) => {
   const { children, value, color, intents, toolbar, showLoading } = props;
   const overlay = useOverlay();
   const overlayBounds = useGaugeChartTooltipOverlayBounds();
-  const { onPointerMove, onClick, onPointerLeave } = useGaugeChartOverlayEvents(
-    {
-      value,
-      color
-    }
-  );
+  const { name: tooltipName, hidden: tooltipHidden } = useGaugeChartTooltip();
+  const { hover, togglePin, outOfBounds } = useTooltipActions();
+  const data = {
+    geometry: "meterbar",
+    series: [{ name: tooltipName ?? "Value", value, color }]
+  };
   const overlayClassName = overlayBounds ? tooltipOverlay : `${tooltipOverlay} ${tooltipOverlayFull}`;
   const overlayStyle = overlayBounds ? {
     top: overlayBounds.top,
@@ -43,11 +44,11 @@ const GaugeChartOverlay = (props) => {
           Flex,
           {
             className: overlayClassName,
-            onPointerMove,
-            onPointerLeave,
-            onClick,
+            onPointerMove: (event) => hover(event, data),
+            onPointerLeave: outOfBounds,
+            onClick: (event) => togglePin(event, data),
             style: overlayStyle,
-            children: /* @__PURE__ */ jsx(GaugeOverlayTooltip, { value, color })
+            children: !tooltipHidden && /* @__PURE__ */ jsx(GaugeOverlayTooltip, { value, color })
           }
         ),
         children,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport {\n  container,\n  tooltipOverlay,\n  tooltipOverlayFull,\n  consumerLoadingStyle,\n} from './GaugeLayoutOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { LoaderOverlay } from '../../../core/components/loader-overlay/LoaderOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useGaugeChartOverlayEvents } from '../../hooks/useGaugeChartOverlayEvents.js';\nimport { useGaugeChartTooltipOverlayBounds } from '../../hooks/useGaugeChartTooltipOverlayBounds.js';\nimport {\n  GaugeChartToolbar,\n  type GaugeChartToolbarProps,\n} from '../GaugeChartLayout/GaugeChartToolbar.js';\nimport { GaugeOverlayTooltip } from '../GaugeChartTooltip/GaugeOverlayTooltip.js';\n\ninterface GaugeChartOverlayProps {\n  value: number;\n  color: string;\n  showLoading?: boolean;\n  intents: GaugeChartToolbarProps['intents'];\n  toolbar: GaugeChartToolbarProps['toolbar'];\n}\n\nexport const GaugeChartOverlay = (\n  props: PropsWithChildren<GaugeChartOverlayProps>,\n) => {\n  const { children, value, color, intents, toolbar, showLoading } = props;\n  const overlay = useOverlay();\n  const overlayBounds = useGaugeChartTooltipOverlayBounds();\n  const { onPointerMove, onClick, onPointerLeave } = useGaugeChartOverlayEvents(\n    {\n      value,\n      color,\n    },\n  );\n  const overlayClassName = overlayBounds\n    ? tooltipOverlay\n    : `${tooltipOverlay} ${tooltipOverlayFull}`;\n  const overlayStyle = overlayBounds\n    ? {\n        top: overlayBounds.top,\n        left: overlayBounds.left,\n        width: overlayBounds.width,\n        height: overlayBounds.height,\n      }\n    : undefined;\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      data-testid=\"gauge-overlay-wrapper\"\n      className={container({ showLoading })}\n    >\n      <GaugeChartToolbar intents={intents} toolbar={toolbar} />\n\n      {!showLoading && (\n        <Flex\n          className={overlayClassName}\n          onPointerMove={onPointerMove}\n          onPointerLeave={onPointerLeave}\n          onClick={onClick}\n          style={overlayStyle}\n        >\n          <GaugeOverlayTooltip value={value} color={color} />\n        </Flex>\n      )}\n\n      {children}\n      {showLoading ? (\n        <LoaderOverlay\n          gridArea=\"1/1/2/2\"\n          consumerStyle={consumerLoadingStyle}\n        />\n      ) : null}\n    </Flex>\n  );\n};\n\nGaugeChartOverlay['displayName'] = 'GaugeChartOverlay';\n"],
-  "mappings": "AAoDI,SAKE,KALF;AAlDJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,kCAAkC;AAC3C,SAAS,yCAAyC;AAClD;AAAA,EACE;AAAA,OAEK;AACP,SAAS,2BAA2B;AAU7B,MAAM,oBAAoB,CAC/B,UACG;AACH,QAAM,EAAE,UAAU,OAAO,OAAO,SAAS,SAAS,YAAY,IAAI;AAClE,QAAM,UAAU,WAAW;AAC3B,QAAM,gBAAgB,kCAAkC;AACxD,QAAM,EAAE,eAAe,SAAS,eAAe,IAAI;AAAA,IACjD;AAAA,MACE;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,QAAM,mBAAmB,gBACrB,iBACA,GAAG,cAAc,IAAI,kBAAkB;AAC3C,QAAM,eAAe,gBACjB;AAAA,IACE,KAAK,cAAc;AAAA,IACnB,MAAM,cAAc;AAAA,IACpB,OAAO,cAAc;AAAA,IACrB,QAAQ,cAAc;AAAA,EACxB,IACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,eAAY;AAAA,MACZ,WAAW,UAAU,EAAE,YAAY,CAAC;AAAA,MAEpC;AAAA,4BAAC,qBAAkB,SAAkB,SAAkB;AAAA,QAEtD,CAAC,eACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO;AAAA,YAEP,8BAAC,uBAAoB,OAAc,OAAc;AAAA;AAAA,QACnD;AAAA,QAGD;AAAA,QACA,cACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,eAAe;AAAA;AAAA,QACjB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEA,kBAAkB,aAAa,IAAI;",
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport {\n  container,\n  tooltipOverlay,\n  tooltipOverlayFull,\n  consumerLoadingStyle,\n} from './GaugeLayoutOverlay.sty.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { LoaderOverlay } from '../../../core/components/loader-overlay/LoaderOverlay.js';\nimport { useOverlay } from '../../../core/components/overlay-tooltip/contexts/OverlayContext.js';\nimport { useTooltipActions } from '../../../core/components/overlay-tooltip/useTooltipActions.js';\nimport { useGaugeChartTooltip } from '../../contexts/GaugeChartTooltipContext.js';\nimport { useGaugeChartTooltipOverlayBounds } from '../../hooks/useGaugeChartTooltipOverlayBounds.js';\nimport {\n  GaugeChartToolbar,\n  type GaugeChartToolbarProps,\n} from '../GaugeChartLayout/GaugeChartToolbar.js';\nimport { GaugeOverlayTooltip } from '../GaugeChartTooltip/GaugeOverlayTooltip.js';\n\ninterface GaugeChartOverlayProps {\n  value: number;\n  color: string;\n  showLoading?: boolean;\n  intents: GaugeChartToolbarProps['intents'];\n  toolbar: GaugeChartToolbarProps['toolbar'];\n}\n\nexport const GaugeChartOverlay = (\n  props: PropsWithChildren<GaugeChartOverlayProps>,\n) => {\n  const { children, value, color, intents, toolbar, showLoading } = props;\n  const overlay = useOverlay();\n  const overlayBounds = useGaugeChartTooltipOverlayBounds();\n  const { name: tooltipName, hidden: tooltipHidden } = useGaugeChartTooltip();\n  const { hover, togglePin, outOfBounds } = useTooltipActions();\n\n  const data = {\n    geometry: 'meterbar' as const,\n    series: [{ name: tooltipName ?? 'Value', value, color }],\n  };\n\n  const overlayClassName = overlayBounds\n    ? tooltipOverlay\n    : `${tooltipOverlay} ${tooltipOverlayFull}`;\n  const overlayStyle = overlayBounds\n    ? {\n        top: overlayBounds.top,\n        left: overlayBounds.left,\n        width: overlayBounds.width,\n        height: overlayBounds.height,\n      }\n    : undefined;\n\n  return (\n    <Flex\n      ref={overlay.overlayRef}\n      data-testid=\"gauge-overlay-wrapper\"\n      className={container({ showLoading })}\n    >\n      <GaugeChartToolbar intents={intents} toolbar={toolbar} />\n\n      {!showLoading && (\n        <Flex\n          className={overlayClassName}\n          onPointerMove={(event) => hover(event, data)}\n          onPointerLeave={outOfBounds}\n          onClick={(event) => togglePin(event, data)}\n          style={overlayStyle}\n        >\n          {!tooltipHidden && (\n            <GaugeOverlayTooltip value={value} color={color} />\n          )}\n        </Flex>\n      )}\n\n      {children}\n      {showLoading ? (\n        <LoaderOverlay\n          gridArea=\"1/1/2/2\"\n          consumerStyle={consumerLoadingStyle}\n        />\n      ) : null}\n    </Flex>\n  );\n};\n\nGaugeChartOverlay['displayName'] = 'GaugeChartOverlay';\n"],
+  "mappings": "AAuDI,SAKE,KALF;AArDJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,yCAAyC;AAClD;AAAA,EACE;AAAA,OAEK;AACP,SAAS,2BAA2B;AAU7B,MAAM,oBAAoB,CAC/B,UACG;AACH,QAAM,EAAE,UAAU,OAAO,OAAO,SAAS,SAAS,YAAY,IAAI;AAClE,QAAM,UAAU,WAAW;AAC3B,QAAM,gBAAgB,kCAAkC;AACxD,QAAM,EAAE,MAAM,aAAa,QAAQ,cAAc,IAAI,qBAAqB;AAC1E,QAAM,EAAE,OAAO,WAAW,YAAY,IAAI,kBAAkB;AAE5D,QAAM,OAAO;AAAA,IACX,UAAU;AAAA,IACV,QAAQ,CAAC,EAAE,MAAM,eAAe,SAAS,OAAO,MAAM,CAAC;AAAA,EACzD;AAEA,QAAM,mBAAmB,gBACrB,iBACA,GAAG,cAAc,IAAI,kBAAkB;AAC3C,QAAM,eAAe,gBACjB;AAAA,IACE,KAAK,cAAc;AAAA,IACnB,MAAM,cAAc;AAAA,IACpB,OAAO,cAAc;AAAA,IACrB,QAAQ,cAAc;AAAA,EACxB,IACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,QAAQ;AAAA,MACb,eAAY;AAAA,MACZ,WAAW,UAAU,EAAE,YAAY,CAAC;AAAA,MAEpC;AAAA,4BAAC,qBAAkB,SAAkB,SAAkB;AAAA,QAEtD,CAAC,eACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,eAAe,CAAC,UAAU,MAAM,OAAO,IAAI;AAAA,YAC3C,gBAAgB;AAAA,YAChB,SAAS,CAAC,UAAU,UAAU,OAAO,IAAI;AAAA,YACzC,OAAO;AAAA,YAEN,WAAC,iBACA,oBAAC,uBAAoB,OAAc,OAAc;AAAA;AAAA,QAErD;AAAA,QAGD;AAAA,QACA,cACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAS;AAAA,YACT,eAAe;AAAA;AAAA,QACjB,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAEA,kBAAkB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import "./GaugeLayoutOverlay.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
 var consumerLoadingStyle = { position: "absolute", top: 0, width: "100%", height: "100%", zIndex: 1, pointerEvents: "none", backgroundColor: "var(--dt-colors-background-base-default, #f9f9fa)", opacity: 0.4 };
-var container = _7a468({ defaultClassName: "_l0e5zm0-3-5-2", variantClassNames: { showLoading: { true: "_l0e5zm1-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var tooltipOverlay = "_l0e5zm2-3-5-2";
-var tooltipOverlayFull = "_l0e5zm3-3-5-2";
+var container = _7a468({ defaultClassName: "_l0e5zm0-3-6-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var tooltipOverlay = "_l0e5zm2-3-6-0";
+var tooltipOverlayFull = "_l0e5zm3-3-6-0";
 export {
   consumerLoadingStyle,
   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';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var consumerLoadingStyle = {position:'absolute',top:0,width:'100%',height:'100%',zIndex:1,pointerEvents:'none',backgroundColor:'var(--dt-colors-background-base-default, #f9f9fa)',opacity:0.4};\nexport var container = _7a468({defaultClassName:'_l0e5zm0-3-5-2',variantClassNames:{showLoading:{true:'_l0e5zm1-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var tooltipOverlay = '_l0e5zm2-3-5-2';\nexport var tooltipOverlayFull = '_l0e5zm3-3-5-2';"],
+  "sourcesContent": ["import './GaugeLayoutOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var consumerLoadingStyle = {position:'absolute',top:0,width:'100%',height:'100%',zIndex:1,pointerEvents:'none',backgroundColor:'var(--dt-colors-background-base-default, #f9f9fa)',opacity:0.4};\nexport var container = _7a468({defaultClassName:'_l0e5zm0-3-6-0',variantClassNames:{showLoading:{true:'_l0e5zm1-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var tooltipOverlay = '_l0e5zm2-3-6-0';\nexport var tooltipOverlayFull = '_l0e5zm3-3-6-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,EAAC,UAAS,YAAW,KAAI,GAAE,OAAM,QAAO,QAAO,QAAO,QAAO,GAAE,eAAc,QAAO,iBAAgB,qDAAoD,SAAQ,IAAG;AAC9L,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzJ,IAAI,iBAAiB;AACrB,IAAI,qBAAqB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._13c0oci0-3-5-2 {
+._13c0oci0-3-6-0 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-5-2 svg {
+._13c0oci1-3-6-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-5-2";
-var responsiveLabelContainer = "_13c0oci0-3-5-2";
+var parentSvgStyle = "_13c0oci1-3-6-0";
+var responsiveLabelContainer = "_13c0oci0-3-6-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-5-2';\nexport var responsiveLabelContainer = '_13c0oci0-3-5-2';"],
+  "sourcesContent": ["import './GaugeResponsiveLabel.css';\nexport var parentSvgStyle = '_13c0oci1-3-6-0';\nexport var responsiveLabelContainer = '_13c0oci0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,2BAA2B;",
   "names": []
 }

package/esm/charts/gauge/constants.js

@@ -5,6 +5,7 @@ const DEFAULT_CHART_WIDTH = "100%";
 const DEFAULT_CHART_HEIGHT = 300;
 const MIN_SIZE_IN_PX = 100;
 const MIN_MAX_PADDING = 20;
+const MIN_MAX_LABEL_RESERVED_HEIGHT_IN_PX = 16;
 const ARC_OUTER_RADIUS_PERCENTAGE = 0.9;
 const ARC_INNER_RADIUS_PERCENTAGE = 0.8;
 const GAUGE_VERTICAL_SMALL_OFFSET = 0.05;
@@ -51,6 +52,7 @@ export {
   GAUGE_DEFAULT_CONFIG,
   GAUGE_VERTICAL_DEFAULT_OFFSET,
   GAUGE_VERTICAL_SMALL_OFFSET,
+  MIN_MAX_LABEL_RESERVED_HEIGHT_IN_PX,
   MIN_MAX_PADDING,
   MIN_SIZE_IN_PX,
   THRESHOLD_COLOR_DEFAULT,