@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/charts/core/utils/coerceSizeValue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/coerceSizeValue.ts"],
-  "sourcesContent": ["import { isNumber, isString } from 'lodash-es';\n\nimport { validateCSSSize } from './validate-css-size.js';\n\nconst PX_UNIT = 'px';\n\n/**\n * Coerces a string or numeric value into a valid CSS size length value (width, height, etc.)\n * If the value is numeric it will assume that is expressed in pixels\n * @param value - the value to coerce.\n *\n * @internal\n *\n */\nexport function coerceSizeValue(value?: string | number): string | undefined {\n  if (isNumber(value)) {\n    return `${value}${PX_UNIT}`;\n  }\n\n  if (isString(value)) {\n    return validateCSSSize(value);\n  }\n\n  return undefined;\n}\n"],
-  "mappings": "AAAA,SAAS,UAAU,gBAAgB;AAEnC,SAAS,uBAAuB;AAEhC,MAAM,UAAU;AAUT,SAAS,gBAAgB,OAA6C;AAC3E,MAAI,SAAS,KAAK,GAAG;AACnB,WAAO,GAAG,KAAK,GAAG,OAAO;AAAA,EAC3B;AAEA,MAAI,SAAS,KAAK,GAAG;AACnB,WAAO,gBAAgB,KAAK;AAAA,EAC9B;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isNumber, isString } from 'lodash-es';\n\nimport { validateCSSSize } from './validate-css-size.js';\n\nconst PX_UNIT = 'px';\nconst PX_PATTERN = /^(\\d+(?:\\.\\d+)?)px$/;\n\n/**\n * Coerces a string or numeric value into a valid CSS size length value (width, height, etc.)\n * If the value is numeric it will assume that is expressed in pixels\n * @param value - the value to coerce.\n *\n * @internal\n *\n */\nexport function coerceSizeValue(value?: string | number): string | undefined {\n  if (isNumber(value)) {\n    return `${value}${PX_UNIT}`;\n  }\n\n  if (isString(value)) {\n    return validateCSSSize(value);\n  }\n\n  return undefined;\n}\n\n/**\n * Coerces a string or numeric size value to a pixel number.\n * Returns `undefined` when the value is a non-pixel string (e.g. `'100%'`, `'vh'`, `'rem'`).\n *\n * @internal\n */\nexport function coerceSizeValueToPixels(\n  value: number | string | undefined,\n): number | undefined {\n  if (isNumber(value)) {\n    return value;\n  }\n  if (isString(value)) {\n    const valid = validateCSSSize(value);\n    if (valid) {\n      const match = PX_PATTERN.exec(valid);\n      if (match) {\n        return Number(match[1]);\n      }\n    }\n  }\n\n  return undefined;\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,gBAAgB;AAEnC,SAAS,uBAAuB;AAEhC,MAAM,UAAU;AAChB,MAAM,aAAa;AAUZ,SAAS,gBAAgB,OAA6C;AAC3E,MAAI,SAAS,KAAK,GAAG;AACnB,WAAO,GAAG,KAAK,GAAG,OAAO;AAAA,EAC3B;AAEA,MAAI,SAAS,KAAK,GAAG;AACnB,WAAO,gBAAgB,KAAK;AAAA,EAC9B;AAEA,SAAO;AACT;AAQO,SAAS,wBACd,OACoB;AACpB,MAAI,SAAS,KAAK,GAAG;AACnB,WAAO;AAAA,EACT;AACA,MAAI,SAAS,KAAK,GAAG;AACnB,UAAM,QAAQ,gBAAgB,KAAK;AACnC,QAAI,OAAO;AACT,YAAM,QAAQ,WAAW,KAAK,KAAK;AACnC,UAAI,OAAO;AACT,eAAO,OAAO,MAAM,CAAC,CAAC;AAAA,MACxB;AAAA,IACF;AAAA,EACF;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-7-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-7-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-7-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-7-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-7-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-7-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-7-0._1v8s3xl0-3-7-0 {
   max-height: initial;
   min-width: 160px;
   max-width: 320px;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gantt-chart/components/tooltip/GanttChartTooltip.tsx"],
-  "sourcesContent": ["import { type RefObject, useContext, useRef } from 'react';\n\nimport { ganttChartTooltipCSS } from './GanttChartTooltip.sty.js';\nimport { GanttChartTooltipContent } from './GanttChartTooltipContent.js';\nimport { useChartActionsMenu } from '../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { Point } from '../../../core/types/point.js';\nimport { DEFAULT_TOOLTIP_MARGIN } from '../../constants/defaults.js';\nimport { GanttSegmentsContext } from '../../context/GanttSegmentsContext.js';\nimport { useRegisterTooltipHandlerCallbacks } from '../../hooks/use-register-tooltip-handler-callbacks.js';\nimport {\n  useTooltipPinnedStatus,\n  useTooltipPosition,\n} from '../../hooks/use-set-tooltip-state.js';\n\n/**\n * Tooltip specific to the Gantt Chart.\n */\nexport const GanttChartTooltip = () => {\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const pinned = useTooltipPinnedStatus();\n  const mousePosition = useTooltipPosition();\n  const { hovering = true } = useContext(GanttSegmentsContext);\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n  useRegisterTooltipHandlerCallbacks(tooltipRef);\n\n  const isTooltipHeightKnown = useRef(false);\n\n  if (!mousePosition || !hovering) {\n    return null;\n  }\n\n  if (!isTooltipHeightKnown.current && tooltipRef.current) {\n    isTooltipHeightKnown.current = true;\n    return null;\n  }\n\n  const position = getTooltipPosition(mousePosition, tooltipRef);\n\n  return (\n    <ChartTooltip\n      ref={tooltipRef}\n      pinned={pinned}\n      className={ganttChartTooltipCSS}\n      position={position}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      <GanttChartTooltipContent />\n    </ChartTooltip>\n  );\n};\n\nfunction getTooltipPosition(\n  mousePosition: Point,\n  tooltipRef: RefObject<HTMLDivElement | null>,\n) {\n  if (!tooltipRef.current) {\n    // place the tooltip far off-screen on first render to measure its height\n    return {\n      x: -9999,\n      y: -9999,\n    };\n  }\n\n  const position: Point = {\n    x: mousePosition.x,\n    y: mousePosition.y + DEFAULT_TOOLTIP_MARGIN,\n  };\n\n  const tooltipHeight = tooltipRef.current.getBoundingClientRect().height;\n  const viewportHeight = window.innerHeight;\n\n  // check if tooltip is outside viewport\n  if (position.y + tooltipHeight > viewportHeight) {\n    // adjust vertical position so that tooltip is not cut off\n    position.y = viewportHeight - tooltipHeight;\n  }\n\n  return {\n    x: Math.max(0, position.x),\n    y: Math.max(0, position.y),\n  };\n}\n"],
-  "mappings": "AAyDM;AAzDN,SAAyB,YAAY,cAAc;AAEnD,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,0CAA0C;AACnD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAKA,MAAM,oBAAoB,MAAM;AACrC,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,SAAS,uBAAuB;AACtC,QAAM,gBAAgB,mBAAmB;AACzC,QAAM,EAAE,WAAW,KAAK,IAAI,WAAW,oBAAoB;AAC3D,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AACxB,qCAAmC,UAAU;AAE7C,QAAM,uBAAuB,OAAO,KAAK;AAEzC,MAAI,CAAC,iBAAiB,CAAC,UAAU;AAC/B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,qBAAqB,WAAW,WAAW,SAAS;AACvD,yBAAqB,UAAU;AAC/B,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,mBAAmB,eAAe,UAAU;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,4BAAyB;AAAA;AAAA,EAC5B;AAEJ;AAEA,SAAS,mBACP,eACA,YACA;AACA,MAAI,CAAC,WAAW,SAAS;AAEvB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAEA,QAAM,WAAkB;AAAA,IACtB,GAAG,cAAc;AAAA,IACjB,GAAG,cAAc,IAAI;AAAA,EACvB;AAEA,QAAM,gBAAgB,WAAW,QAAQ,sBAAsB,EAAE;AACjE,QAAM,iBAAiB,OAAO;AAG9B,MAAI,SAAS,IAAI,gBAAgB,gBAAgB;AAE/C,aAAS,IAAI,iBAAiB;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,GAAG,KAAK,IAAI,GAAG,SAAS,CAAC;AAAA,IACzB,GAAG,KAAK,IAAI,GAAG,SAAS,CAAC;AAAA,EAC3B;AACF;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { type RefObject, useContext, useRef } from 'react';\n\nimport { ganttChartTooltipCSS } from './GanttChartTooltip.sty.js';\nimport { GanttChartTooltipContent } from './GanttChartTooltipContent.js';\nimport { useChartActionsMenu } from '../../../core/components/series-action/hooks/useChartActionsMenu.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { Point } from '../../../core/types/point.js';\nimport { DEFAULT_TOOLTIP_MARGIN } from '../../constants/defaults.js';\nimport { GanttSegmentsContext } from '../../context/GanttSegmentsContext.js';\nimport { useRegisterTooltipHandlerCallbacks } from '../../hooks/use-register-tooltip-handler-callbacks.js';\nimport {\n  useTooltipPinnedStatus,\n  useTooltipPosition,\n} from '../../hooks/use-set-tooltip-state.js';\n\n/**\n * Tooltip specific to the Gantt Chart.\n */\nexport const GanttChartTooltip = () => {\n  const tooltipRef = useRef<HTMLDivElement>(null);\n  const pinned = useTooltipPinnedStatus();\n  const mousePosition = useTooltipPosition();\n  const { hovering = true } = useContext(GanttSegmentsContext);\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n  useRegisterTooltipHandlerCallbacks(tooltipRef);\n\n  const isTooltipHeightKnown = useRef(false);\n\n  if (!mousePosition || !hovering) {\n    return null;\n  }\n\n  if (!isTooltipHeightKnown.current && tooltipRef.current) {\n    isTooltipHeightKnown.current = true;\n    return null;\n  }\n\n  const position = getTooltipPosition(mousePosition, tooltipRef);\n\n  return (\n    <ChartTooltip\n      ref={tooltipRef}\n      pinned={pinned}\n      className={ganttChartTooltipCSS}\n      position={position}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      <GanttChartTooltipContent />\n    </ChartTooltip>\n  );\n};\n\nfunction getTooltipPosition(\n  mousePosition: Point,\n  tooltipRef: RefObject<HTMLDivElement | null>,\n) {\n  if (!tooltipRef.current) {\n    // place the tooltip far off-screen on first render to measure its height\n    return {\n      x: -9999,\n      y: -9999,\n    };\n  }\n\n  const position: Point = {\n    x: mousePosition.x,\n    y: mousePosition.y + DEFAULT_TOOLTIP_MARGIN,\n  };\n\n  const tooltipHeight = tooltipRef.current.getBoundingClientRect().height;\n  const viewportHeight = window.innerHeight;\n\n  // check if tooltip is outside viewport\n  if (position.y + tooltipHeight > viewportHeight) {\n    // adjust vertical position so that tooltip is not cut off\n    position.y = viewportHeight - tooltipHeight;\n  }\n\n  return {\n    x: Math.max(0, position.x),\n    y: Math.max(0, position.y),\n  };\n}\n"],
+  "mappings": "AA0DM;AAzDN,SAAyB,YAAY,cAAc;AAEnD,SAAS,4BAA4B;AACrC,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AACrC,SAAS,0CAA0C;AACnD;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAKA,MAAM,oBAAoB,MAAM;AACrC,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,SAAS,uBAAuB;AACtC,QAAM,gBAAgB,mBAAmB;AACzC,QAAM,EAAE,WAAW,KAAK,IAAI,WAAW,oBAAoB;AAC3D,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AACxB,qCAAmC,UAAU;AAE7C,QAAM,uBAAuB,OAAO,KAAK;AAEzC,MAAI,CAAC,iBAAiB,CAAC,UAAU;AAC/B,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,qBAAqB,WAAW,WAAW,SAAS;AACvD,yBAAqB,UAAU;AAC/B,WAAO;AAAA,EACT;AAEA,QAAM,WAAW,mBAAmB,eAAe,UAAU;AAE7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,4BAAyB;AAAA;AAAA,EAC5B;AAEJ;AAEA,SAAS,mBACP,eACA,YACA;AACA,MAAI,CAAC,WAAW,SAAS;AAEvB,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AAEA,QAAM,WAAkB;AAAA,IACtB,GAAG,cAAc;AAAA,IACjB,GAAG,cAAc,IAAI;AAAA,EACvB;AAEA,QAAM,gBAAgB,WAAW,QAAQ,sBAAsB,EAAE;AACjE,QAAM,iBAAiB,OAAO;AAG9B,MAAI,SAAS,IAAI,gBAAgB,gBAAgB;AAE/C,aAAS,IAAI,iBAAiB;AAAA,EAChC;AAEA,SAAO;AAAA,IACL,GAAG,KAAK,IAAI,GAAG,SAAS,CAAC;AAAA,IACzB,GAAG,KAAK,IAAI,GAAG,SAAS,CAAC;AAAA,EAC3B;AACF;",
   "names": []
 }

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-7-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-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,uBAAuB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gantt-chart/components/tooltip/GanttChartTooltipBody.tsx"],
-  "sourcesContent": ["import { CopyIcon } from '@dynatrace/strato-icons';\nimport { format, formatDate, units } from '@dynatrace-sdk/units';\n\nimport { useCopyToClipboard } from '../../../../core/utils/useCopyToClipboard.js';\nimport { ChartSeriesAction } from '../../../core/components/series-action/ChartSeriesAction.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { DEFAULT_GANTT_SEGMENT_NAME } from '../../constants/defaults.js';\nimport { useGanttSegmentsContext } from '../../context/GanttSegmentsContext.js';\nimport { getEntryColor } from '../../functions/get-entry-color.js';\nimport type { GanttSegmentData } from '../../types/gantt-chart.js';\n\nexport const GanttChartTooltipBody = ({\n  entry,\n  row,\n  parent,\n  isDate,\n}: {\n  entry: GanttSegmentData;\n  row: GanttSegmentData[];\n  parent?: GanttSegmentData[];\n  isDate: boolean;\n}) => {\n  const {\n    config: {\n      nameAccessor = 'name',\n      formatter,\n      tooltipActions,\n      colorAccessor,\n      colorPalette,\n    },\n  } = useGanttSegmentsContext();\n  const duration =\n    entry.end !== undefined ? entry.end - entry.start : undefined;\n  const name = (entry[nameAccessor] || DEFAULT_GANTT_SEGMENT_NAME) as string;\n\n  const [copyName] = useCopyToClipboard(name);\n  const [copyStart] = useCopyToClipboard(`${entry.start}`);\n  const [copyEnd] = useCopyToClipboard(`${entry.end}`);\n  const [copyDuration] = useCopyToClipboard(`${duration}`);\n\n  const formatValue = isDate ? formatDate : format;\n  return (\n    <ChartTooltip.SeriesItem\n      color={getEntryColor(entry, colorAccessor, colorPalette)}\n      name={name}\n      actions={\n        tooltipActions\n          ? tooltipActions(entry, row, parent)\n          : () => (\n              <ChartSeriesAction>\n                <ChartSeriesAction.Item onSelect={copyName}>\n                  {name}\n                  <ChartSeriesAction.ItemIcon>\n                    <CopyIcon />\n                  </ChartSeriesAction.ItemIcon>\n                </ChartSeriesAction.Item>\n                <ChartSeriesAction.Item onSelect={copyStart}>\n                  Start: {formatValue(entry.start, formatter)}\n                  <ChartSeriesAction.ItemIcon>\n                    <CopyIcon />\n                  </ChartSeriesAction.ItemIcon>\n                </ChartSeriesAction.Item>\n                {entry.end && (\n                  <ChartSeriesAction.Item onSelect={copyEnd}>\n                    End: {formatValue(entry.end, formatter)}\n                    <ChartSeriesAction.ItemIcon>\n                      <CopyIcon />\n                    </ChartSeriesAction.ItemIcon>\n                  </ChartSeriesAction.Item>\n                )}\n                {duration && (\n                  <ChartSeriesAction.Item onSelect={copyDuration}>\n                    Duration:{' '}\n                    {format(\n                      duration,\n                      isDate && !formatter\n                        ? { input: units.time.millisecond }\n                        : formatter,\n                    )}\n                    <ChartSeriesAction.ItemIcon>\n                      <CopyIcon />\n                    </ChartSeriesAction.ItemIcon>\n                  </ChartSeriesAction.Item>\n                )}\n              </ChartSeriesAction>\n            )\n      }\n    />\n  );\n};\n"],
-  "mappings": "AAkDgB,SAGI,KAHJ;AAlDhB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,YAAY,aAAa;AAE1C,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kCAAkC;AAC3C,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAGvB,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,QAAM;AAAA,IACJ,QAAQ;AAAA,MACN,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,wBAAwB;AAC5B,QAAM,WACJ,MAAM,QAAQ,SAAY,MAAM,MAAM,MAAM,QAAQ;AACtD,QAAM,OAAQ,MAAM,YAAY,KAAK;AAErC,QAAM,CAAC,QAAQ,IAAI,mBAAmB,IAAI;AAC1C,QAAM,CAAC,SAAS,IAAI,mBAAmB,GAAG,MAAM,KAAK,EAAE;AACvD,QAAM,CAAC,OAAO,IAAI,mBAAmB,GAAG,MAAM,GAAG,EAAE;AACnD,QAAM,CAAC,YAAY,IAAI,mBAAmB,GAAG,QAAQ,EAAE;AAEvD,QAAM,cAAc,SAAS,aAAa;AAC1C,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,OAAO,cAAc,OAAO,eAAe,YAAY;AAAA,MACvD;AAAA,MACA,SACE,iBACI,eAAe,OAAO,KAAK,MAAM,IACjC,MACE,qBAAC,qBACC;AAAA,6BAAC,kBAAkB,MAAlB,EAAuB,UAAU,UAC/B;AAAA;AAAA,UACD,oBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,WACF;AAAA,QACA,qBAAC,kBAAkB,MAAlB,EAAuB,UAAU,WAAW;AAAA;AAAA,UACnC,YAAY,MAAM,OAAO,SAAS;AAAA,UAC1C,oBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,WACF;AAAA,QACC,MAAM,OACL,qBAAC,kBAAkB,MAAlB,EAAuB,UAAU,SAAS;AAAA;AAAA,UACnC,YAAY,MAAM,KAAK,SAAS;AAAA,UACtC,oBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,WACF;AAAA,QAED,YACC,qBAAC,kBAAkB,MAAlB,EAAuB,UAAU,cAAc;AAAA;AAAA,UACpC;AAAA,UACT;AAAA,YACC;AAAA,YACA,UAAU,CAAC,YACP,EAAE,OAAO,MAAM,KAAK,YAAY,IAChC;AAAA,UACN;AAAA,UACA,oBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,WACF;AAAA,SAEJ;AAAA;AAAA,EAGV;AAEJ;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { CopyIcon } from '@dynatrace/strato-icons';\nimport { format, formatDate, units } from '@dynatrace-sdk/units';\n\nimport { useCopyToClipboard } from '../../../../core/utils/useCopyToClipboard.js';\nimport { ChartSeriesAction } from '../../../core/components/series-action/ChartSeriesAction.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { DEFAULT_GANTT_SEGMENT_NAME } from '../../constants/defaults.js';\nimport { useGanttSegmentsContext } from '../../context/GanttSegmentsContext.js';\nimport { getEntryColor } from '../../functions/get-entry-color.js';\nimport type { GanttSegmentData } from '../../types/gantt-chart.js';\n\nexport const GanttChartTooltipBody = ({\n  entry,\n  row,\n  parent,\n  isDate,\n}: {\n  entry: GanttSegmentData;\n  row: GanttSegmentData[];\n  parent?: GanttSegmentData[];\n  isDate: boolean;\n}) => {\n  const {\n    config: {\n      nameAccessor = 'name',\n      formatter,\n      tooltipActions,\n      colorAccessor,\n      colorPalette,\n    },\n  } = useGanttSegmentsContext();\n  const duration =\n    entry.end !== undefined ? entry.end - entry.start : undefined;\n  const name = (entry[nameAccessor] || DEFAULT_GANTT_SEGMENT_NAME) as string;\n\n  const [copyName] = useCopyToClipboard(name);\n  const [copyStart] = useCopyToClipboard(`${entry.start}`);\n  const [copyEnd] = useCopyToClipboard(`${entry.end}`);\n  const [copyDuration] = useCopyToClipboard(`${duration}`);\n\n  const formatValue = isDate ? formatDate : format;\n  return (\n    <ChartTooltip.SeriesItem\n      color={getEntryColor(entry, colorAccessor, colorPalette)}\n      name={name}\n      actions={\n        tooltipActions\n          ? tooltipActions(entry, row, parent)\n          : () => (\n              <ChartSeriesAction>\n                <ChartSeriesAction.Item onSelect={copyName}>\n                  {name}\n                  <ChartSeriesAction.ItemIcon>\n                    <CopyIcon />\n                  </ChartSeriesAction.ItemIcon>\n                </ChartSeriesAction.Item>\n                <ChartSeriesAction.Item onSelect={copyStart}>\n                  Start: {formatValue(entry.start, formatter)}\n                  <ChartSeriesAction.ItemIcon>\n                    <CopyIcon />\n                  </ChartSeriesAction.ItemIcon>\n                </ChartSeriesAction.Item>\n                {entry.end && (\n                  <ChartSeriesAction.Item onSelect={copyEnd}>\n                    End: {formatValue(entry.end, formatter)}\n                    <ChartSeriesAction.ItemIcon>\n                      <CopyIcon />\n                    </ChartSeriesAction.ItemIcon>\n                  </ChartSeriesAction.Item>\n                )}\n                {duration && (\n                  <ChartSeriesAction.Item onSelect={copyDuration}>\n                    Duration:{' '}\n                    {format(\n                      duration,\n                      isDate && !formatter\n                        ? { input: units.time.millisecond }\n                        : formatter,\n                    )}\n                    <ChartSeriesAction.ItemIcon>\n                      <CopyIcon />\n                    </ChartSeriesAction.ItemIcon>\n                  </ChartSeriesAction.Item>\n                )}\n              </ChartSeriesAction>\n            )\n      }\n    />\n  );\n};\n"],
+  "mappings": "AAmDgB,SAGI,KAHJ;AAlDhB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,YAAY,aAAa;AAE1C,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAC7B,SAAS,kCAAkC;AAC3C,SAAS,+BAA+B;AACxC,SAAS,qBAAqB;AAGvB,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,QAAM;AAAA,IACJ,QAAQ;AAAA,MACN,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,wBAAwB;AAC5B,QAAM,WACJ,MAAM,QAAQ,SAAY,MAAM,MAAM,MAAM,QAAQ;AACtD,QAAM,OAAQ,MAAM,YAAY,KAAK;AAErC,QAAM,CAAC,QAAQ,IAAI,mBAAmB,IAAI;AAC1C,QAAM,CAAC,SAAS,IAAI,mBAAmB,GAAG,MAAM,KAAK,EAAE;AACvD,QAAM,CAAC,OAAO,IAAI,mBAAmB,GAAG,MAAM,GAAG,EAAE;AACnD,QAAM,CAAC,YAAY,IAAI,mBAAmB,GAAG,QAAQ,EAAE;AAEvD,QAAM,cAAc,SAAS,aAAa;AAC1C,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,OAAO,cAAc,OAAO,eAAe,YAAY;AAAA,MACvD;AAAA,MACA,SACE,iBACI,eAAe,OAAO,KAAK,MAAM,IACjC,MACE,qBAAC,qBACC;AAAA,6BAAC,kBAAkB,MAAlB,EAAuB,UAAU,UAC/B;AAAA;AAAA,UACD,oBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,WACF;AAAA,QACA,qBAAC,kBAAkB,MAAlB,EAAuB,UAAU,WAAW;AAAA;AAAA,UACnC,YAAY,MAAM,OAAO,SAAS;AAAA,UAC1C,oBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,WACF;AAAA,QACC,MAAM,OACL,qBAAC,kBAAkB,MAAlB,EAAuB,UAAU,SAAS;AAAA;AAAA,UACnC,YAAY,MAAM,KAAK,SAAS;AAAA,UACtC,oBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,WACF;AAAA,QAED,YACC,qBAAC,kBAAkB,MAAlB,EAAuB,UAAU,cAAc;AAAA;AAAA,UACpC;AAAA,UACT;AAAA,YACC;AAAA,YACA,UAAU,CAAC,YACP,EAAE,OAAO,MAAM,KAAK,YAAY,IAChC;AAAA,UACN;AAAA,UACA,oBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,WACF;AAAA,SAEJ;AAAA;AAAA,EAGV;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gantt-chart/components/tooltip/GanttChartTooltipContent.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { GanttChartTooltipBody } from './GanttChartTooltipBody.js';\nimport { GanttChartTooltipHeader } from './GanttChartTooltipHeader.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport type { GanttChartContent } from '../../context/GanttChartStateContext.js';\nimport { useGanttSegmentsContext } from '../../context/GanttSegmentsContext.js';\nimport {\n  useTooltipContent,\n  useTooltipPinnedStatus,\n} from '../../hooks/use-set-tooltip-state.js';\n\nexport const GanttChartTooltipContent = () => {\n  const [tooltipContent, setTooltipContent] = useState<\n    GanttChartContent | undefined\n  >();\n\n  const isTooltipPinned = useTooltipPinnedStatus();\n  const storedTooltipContent = useTooltipContent();\n  const {\n    config: { xAxisType, tooltip, formatter },\n  } = useGanttSegmentsContext();\n  const isDate = xAxisType === 'time';\n\n  useEffect(() => {\n    if (!isTooltipPinned && storedTooltipContent) {\n      setTooltipContent(storedTooltipContent);\n    }\n  }, [storedTooltipContent, isTooltipPinned]);\n\n  if (!tooltipContent) {\n    return null;\n  }\n\n  const { row, segment, parent } = tooltipContent;\n\n  if (tooltip !== undefined) {\n    return tooltip(segment, row, parent);\n  }\n\n  return (\n    <>\n      <GanttChartTooltipHeader\n        segment={tooltipContent.segment}\n        isDate={isDate}\n        formatter={formatter}\n      />\n      <Divider\n        orientation=\"horizontal\"\n        style={{ margin: `${Spacings.Size4} 0` }}\n      />\n      <ChartTooltip.Body>\n        <GanttChartTooltipBody\n          entry={tooltipContent.segment}\n          row={row}\n          parent={parent}\n          isDate={isDate}\n        />\n      </ChartTooltip.Body>\n    </>\n  );\n};\n\nGanttChartTooltipContent['displayName'] = 'GanttChartTooltipBody';\n"],
-  "mappings": "AA4CI,mBACE,KADF;AA5CJ,SAAS,WAAW,gBAAgB;AAEpC,OAAO,cAAc;AAErB,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAE7B,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,2BAA2B,MAAM;AAC5C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAE1C;AAEF,QAAM,kBAAkB,uBAAuB;AAC/C,QAAM,uBAAuB,kBAAkB;AAC/C,QAAM;AAAA,IACJ,QAAQ,EAAE,WAAW,SAAS,UAAU;AAAA,EAC1C,IAAI,wBAAwB;AAC5B,QAAM,SAAS,cAAc;AAE7B,YAAU,MAAM;AACd,QAAI,CAAC,mBAAmB,sBAAsB;AAC5C,wBAAkB,oBAAoB;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,sBAAsB,eAAe,CAAC;AAE1C,MAAI,CAAC,gBAAgB;AACnB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,SAAS,OAAO,IAAI;AAEjC,MAAI,YAAY,QAAW;AACzB,WAAO,QAAQ,SAAS,KAAK,MAAM;AAAA,EACrC;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,eAAe;AAAA,QACxB;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ,OAAO,EAAE,QAAQ,GAAG,SAAS,KAAK,KAAK;AAAA;AAAA,IACzC;AAAA,IACA,oBAAC,aAAa,MAAb,EACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,eAAe;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { useEffect, useState } from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport { GanttChartTooltipBody } from './GanttChartTooltipBody.js';\nimport { GanttChartTooltipHeader } from './GanttChartTooltipHeader.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport type { GanttChartContent } from '../../context/GanttChartStateContext.js';\nimport { useGanttSegmentsContext } from '../../context/GanttSegmentsContext.js';\nimport {\n  useTooltipContent,\n  useTooltipPinnedStatus,\n} from '../../hooks/use-set-tooltip-state.js';\n\nexport const GanttChartTooltipContent = () => {\n  const [tooltipContent, setTooltipContent] = useState<\n    GanttChartContent | undefined\n  >();\n\n  const isTooltipPinned = useTooltipPinnedStatus();\n  const storedTooltipContent = useTooltipContent();\n  const {\n    config: { xAxisType, tooltip, formatter },\n  } = useGanttSegmentsContext();\n  const isDate = xAxisType === 'time';\n\n  useEffect(() => {\n    if (!isTooltipPinned && storedTooltipContent) {\n      setTooltipContent(storedTooltipContent);\n    }\n  }, [storedTooltipContent, isTooltipPinned]);\n\n  if (!tooltipContent) {\n    return null;\n  }\n\n  const { row, segment, parent } = tooltipContent;\n\n  if (tooltip !== undefined) {\n    return tooltip(segment, row, parent);\n  }\n\n  return (\n    <>\n      <GanttChartTooltipHeader\n        segment={tooltipContent.segment}\n        isDate={isDate}\n        formatter={formatter}\n      />\n      <Divider\n        orientation=\"horizontal\"\n        style={{ margin: `${Spacings.Size4} 0` }}\n      />\n      <ChartTooltip.Body>\n        <GanttChartTooltipBody\n          entry={tooltipContent.segment}\n          row={row}\n          parent={parent}\n          isDate={isDate}\n        />\n      </ChartTooltip.Body>\n    </>\n  );\n};\n\nGanttChartTooltipContent['displayName'] = 'GanttChartTooltipBody';\n"],
+  "mappings": "AA6CI,mBACE,KADF;AA5CJ,SAAS,WAAW,gBAAgB;AAEpC,OAAO,cAAc;AAErB,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,eAAe;AACxB,SAAS,oBAAoB;AAE7B,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,2BAA2B,MAAM;AAC5C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAE1C;AAEF,QAAM,kBAAkB,uBAAuB;AAC/C,QAAM,uBAAuB,kBAAkB;AAC/C,QAAM;AAAA,IACJ,QAAQ,EAAE,WAAW,SAAS,UAAU;AAAA,EAC1C,IAAI,wBAAwB;AAC5B,QAAM,SAAS,cAAc;AAE7B,YAAU,MAAM;AACd,QAAI,CAAC,mBAAmB,sBAAsB;AAC5C,wBAAkB,oBAAoB;AAAA,IACxC;AAAA,EACF,GAAG,CAAC,sBAAsB,eAAe,CAAC;AAE1C,MAAI,CAAC,gBAAgB;AACnB,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,KAAK,SAAS,OAAO,IAAI;AAEjC,MAAI,YAAY,QAAW;AACzB,WAAO,QAAQ,SAAS,KAAK,MAAM;AAAA,EACrC;AAEA,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,eAAe;AAAA,QACxB;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,aAAY;AAAA,QACZ,OAAO,EAAE,QAAQ,GAAG,SAAS,KAAK,KAAK;AAAA;AAAA,IACzC;AAAA,IACA,oBAAC,aAAa,MAAb,EACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO,eAAe;AAAA,QACtB;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;AAEA,yBAAyB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/gantt-chart/components/tooltip/GanttChartTooltipHeader.tsx"],
-  "sourcesContent": ["import { format } from '@dynatrace-sdk/units';\n\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { RangeHeader } from '../../../core/components/tooltip/ChartTooltip/components/RangeHeader/RangeHeader.js';\nimport { TextHeader } from '../../../core/components/tooltip/ChartTooltip/components/TextHeader.js';\nimport type {\n  GanttChartFormatter,\n  GanttSegmentData,\n} from '../../types/gantt-chart.js';\n\nexport const GanttChartTooltipHeader = ({\n  segment,\n  isDate,\n  formatter,\n}: {\n  segment: Pick<GanttSegmentData, 'start' | 'end'>;\n  isDate: boolean;\n  formatter?: GanttChartFormatter;\n}) => {\n  const [start, end] = [segment.start, segment.end];\n  if (isDate) {\n    return end === undefined || start === end ? (\n      <ChartTooltip.TimestampHeader date={new Date(start)} />\n    ) : (\n      <ChartTooltip.TimeFrameHeader\n        showDuration\n        from={new Date(start)}\n        to={new Date(end)}\n      />\n    );\n  }\n\n  return end === undefined || start === end ? (\n    <TextHeader text={format(start, formatter)} />\n  ) : (\n    <RangeHeader\n      from={start}\n      to={end}\n      formatter={(value: number) => format(value, formatter)}\n    />\n  );\n};\n"],
-  "mappings": "AAsBM;AAtBN,SAAS,cAAc;AAEvB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAMpB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,OAAO,QAAQ,GAAG;AAChD,MAAI,QAAQ;AACV,WAAO,QAAQ,UAAa,UAAU,MACpC,oBAAC,aAAa,iBAAb,EAA6B,MAAM,IAAI,KAAK,KAAK,GAAG,IAErD;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,cAAY;AAAA,QACZ,MAAM,IAAI,KAAK,KAAK;AAAA,QACpB,IAAI,IAAI,KAAK,GAAG;AAAA;AAAA,IAClB;AAAA,EAEJ;AAEA,SAAO,QAAQ,UAAa,UAAU,MACpC,oBAAC,cAAW,MAAM,OAAO,OAAO,SAAS,GAAG,IAE5C;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,WAAW,CAAC,UAAkB,OAAO,OAAO,SAAS;AAAA;AAAA,EACvD;AAEJ;",
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-deprecated -- DEPRECATION: [APPDEV-17834] BREAKING-CHANGE: migrate to ChartTooltip before next major. */\nimport { format } from '@dynatrace-sdk/units';\n\nimport { ChartTooltip } from '../../../core/components/tooltip/ChartTooltip/ChartTooltip.js';\nimport { RangeHeader } from '../../../core/components/tooltip/ChartTooltip/components/RangeHeader/RangeHeader.js';\nimport { TextHeader } from '../../../core/components/tooltip/ChartTooltip/components/TextHeader.js';\nimport type {\n  GanttChartFormatter,\n  GanttSegmentData,\n} from '../../types/gantt-chart.js';\n\nexport const GanttChartTooltipHeader = ({\n  segment,\n  isDate,\n  formatter,\n}: {\n  segment: Pick<GanttSegmentData, 'start' | 'end'>;\n  isDate: boolean;\n  formatter?: GanttChartFormatter;\n}) => {\n  const [start, end] = [segment.start, segment.end];\n  if (isDate) {\n    return end === undefined || start === end ? (\n      <ChartTooltip.TimestampHeader date={new Date(start)} />\n    ) : (\n      <ChartTooltip.TimeFrameHeader\n        showDuration\n        from={new Date(start)}\n        to={new Date(end)}\n      />\n    );\n  }\n\n  return end === undefined || start === end ? (\n    <TextHeader text={format(start, formatter)} />\n  ) : (\n    <RangeHeader\n      from={start}\n      to={end}\n      formatter={(value: number) => format(value, formatter)}\n    />\n  );\n};\n"],
+  "mappings": "AAuBM;AAtBN,SAAS,cAAc;AAEvB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAMpB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,CAAC,OAAO,GAAG,IAAI,CAAC,QAAQ,OAAO,QAAQ,GAAG;AAChD,MAAI,QAAQ;AACV,WAAO,QAAQ,UAAa,UAAU,MACpC,oBAAC,aAAa,iBAAb,EAA6B,MAAM,IAAI,KAAK,KAAK,GAAG,IAErD;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,cAAY;AAAA,QACZ,MAAM,IAAI,KAAK,KAAK;AAAA,QACpB,IAAI,IAAI,KAAK,GAAG;AAAA;AAAA,IAClB;AAAA,EAEJ;AAEA,SAAO,QAAQ,UAAa,UAAU,MACpC,oBAAC,cAAW,MAAM,OAAO,OAAO,SAAS,GAAG,IAE5C;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,WAAW,CAAC,UAAkB,OAAO,OAAO,SAAS;AAAA;AAAA,EACvD;AAEJ;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._ezp7cy0-3-5-2 {
+._ezp7cy0-3-7-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-7-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-7-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-7-0 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-5-2 {
+._18ourc21-3-7-0 {
   width: fit-content;
 }
-._18ourc22-3-5-2 {
+._18ourc22-3-7-0 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-5-2 {
+._18ourc23-3-7-0 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-5-2 {
+._18ourc24-3-7-0 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-5-2 {
+  ._18ourc24-3-7-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-7-0";
+var foreignObjectContainer = _7a468({ defaultClassName: "_18ourc21-3-7-0", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-7-0", hanging: "_18ourc23-3-7-0" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
+var textContainer = "_18ourc24-3-7-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-7-0';\nexport var foreignObjectContainer = _7a468({defaultClassName:'_18ourc21-3-7-0',variantClassNames:{dominantBaseline:{auto:'_18ourc22-3-7-0',hanging:'_18ourc23-3-7-0'}},defaultVariants:{dominantBaseline:'hanging'},compoundVariants:[]});\nexport var textContainer = '_18ourc24-3-7-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-7-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-7-0 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-5-2 > #label {
+._1fbjcz30-3-7-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-7-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-7-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-7-0 {
   position: relative;
   height: 100%;
   z-index: 0;
 }
-._l0e5zm1-3-5-2 {
+._l0e5zm1-3-7-0 {
   cursor: default;
   user-select: none;
 }
-._l0e5zm2-3-5-2 {
+._l0e5zm2-3-7-0 {
   position: absolute;
   z-index: 1;
 }
-._l0e5zm3-3-5-2 {
+._l0e5zm3-3-7-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,