@dynatrace/strato-components 3.5.2 → 3.7.0

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

@@ -21,7 +21,8 @@ __export(is_feature_enabled_exports, {
 });
 module.exports = __toCommonJS(is_feature_enabled_exports);
 const CONFIG = {
-  histogramToXY: "atlas-01"
+  histogramToXY: "atlas-01",
+  timeseriesToXY: "atlas-01"
 };
 function isFeatureEnabled(key) {
   const urlParam = new URLSearchParams(window.location.search);

package/charts/gantt-chart/GanttChartLine.css

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

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

@@ -21,4 +21,4 @@ __export(GanttChartLine_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLine_css_exports);
 var import_GanttChartLine_css_ts_vanilla = require("./GanttChartLine.css");
-var wrapper = "_1pk2ed10-3-5-2";
+var wrapper = "_1pk2ed10-3-7-0";

package/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/charts/gantt-chart/components/GanttChartLineRenderer.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartLineRenderer_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartLineRenderer_css_exports);
 var import_GanttChartLineRenderer_css_ts_vanilla = require("./GanttChartLineRenderer.css");
-var svgWrapperCSS = "_mnxak30-3-5-2";
+var svgWrapperCSS = "_mnxak30-3-7-0";

package/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/charts/gantt-chart/components/tooltip/GanttChartTooltip.sty.js

@@ -21,4 +21,4 @@ __export(GanttChartTooltip_css_exports, {
 });
 module.exports = __toCommonJS(GanttChartTooltip_css_exports);
 var import_GanttChartTooltip_css_ts_vanilla = require("./GanttChartTooltip.css");
-var ganttChartTooltipCSS = "_1v8s3xl0-3-5-2";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-7-0";

package/charts/gauge/GaugeChart.d.ts

@@ -23,7 +23,7 @@ export declare const GaugeChart: ((props: PropsWithChildren<GaugeChartProps> & i
         displayName: string;
     };
     Tooltip: {
-        (props: import("./slots/Tooltip.js").GaugeChartTooltipProps): null;
+        (_props: import("./slots/Tooltip.js").GaugeChartTooltipProps): null;
         displayName: string;
     };
 };

package/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/charts/gauge/components/GaugeChartLayout/GaugeChartLayout.sty.js

@@ -21,4 +21,4 @@ __export(GaugeChartLayout_css_exports, {
 });
 module.exports = __toCommonJS(GaugeChartLayout_css_exports);
 var import_GaugeChartLayout_css_ts_vanilla = require("./GaugeChartLayout.css");
-var layoutContainer = "_ezp7cy0-3-5-2";
+var layoutContainer = "_ezp7cy0-3-7-0";

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

@@ -24,7 +24,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_intl = require("react-intl");
 var import_OverlayTooltip = require("../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_useTooltipSeriesActions = require("../../../core/components/tooltip/shared/hooks/useTooltipSeriesActions.js");
-var import_GaugeChartTooltipNameContext = require("../../contexts/GaugeChartTooltipNameContext.js");
+var import_GaugeChartTooltipContext = require("../../contexts/GaugeChartTooltipContext.js");
 var import_useGaugeChartFormatterContext = require("../../hooks/useGaugeChartFormatterContext.js");
 const GaugeOverlayTooltip = ({
   value,
@@ -32,7 +32,7 @@ const GaugeOverlayTooltip = ({
 }) => {
   const intl = (0, import_react_intl.useIntl)();
   const { formatter, unit } = (0, import_useGaugeChartFormatterContext.useGaugeChartFormatterContext)();
-  const tooltipName = (0, import_GaugeChartTooltipNameContext.useGaugeChartTooltipName)();
+  const { name: tooltipName, template } = (0, import_GaugeChartTooltipContext.useGaugeChartTooltip)();
   const seriesName = tooltipName ?? intl.formatMessage({ defaultMessage: "Value", id: "jc4XDeI4sf7aLs2W" });
   const formattedValue = formatter(value, unit);
   const tooltipItem = {
@@ -45,6 +45,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__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: template(customItem) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_OverlayTooltip.OverlayTooltip.SeriesItem,
     {

package/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/charts/gauge/components/GaugeLabel/GaugeLabel.sty.js

@@ -24,6 +24,6 @@ __export(GaugeLabel_css_exports, {
 module.exports = __toCommonJS(GaugeLabel_css_exports);
 var import_GaugeLabel_css_ts_vanilla = require("./GaugeLabel.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var elementLabelWrapper = "_18ourc20-3-5-2";
-var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ 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 = (0, import_createRuntimeFn.createRuntimeFn)({ 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";

package/charts/gauge/components/GaugeLabels.js

@@ -34,7 +34,6 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_typographyStyles_css = require("../../core/typographyStyles.sty.js");
-var import_constants = require("../constants.js");
 var import_useDefaultLabels = require("../hooks/useDefaultLabels.js");
 var import_useGaugeChartLabelsContext = require("../hooks/useGaugeChartLabelsContext.js");
 var import_useGaugeChartMinMaxLabelsPosition = require("../hooks/useGaugeChartMinMaxLabelsPosition.js");
@@ -43,7 +42,7 @@ var import_GaugeLabelsWrapper = require("./GaugeLabelsWrapper/GaugeLabelsWrapper
 const GaugeLabels = ({ value, prefixIcon }) => {
   const { label } = (0, import_useGaugeChartLabelsContext.useGaugeChartLabelsContext)();
   const { defaultLabel, defaultMaxLabel, defaultMinLabel, defaultValueLabel } = (0, import_useDefaultLabels.useDefaultLabels)(value);
-  const { maxLabelPosition, minLabelPosition } = (0, import_useGaugeChartMinMaxLabelsPosition.useGaugeChartMinMaxLabelsPosition)();
+  const { maxLabelPosition, minLabelPosition, minMaxPadding } = (0, import_useGaugeChartMinMaxLabelsPosition.useGaugeChartMinMaxLabelsPosition)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "g",
@@ -78,7 +77,7 @@ const GaugeLabels = ({ value, prefixIcon }) => {
         {
           value: defaultMinLabel,
           x: minLabelPosition.x,
-          y: minLabelPosition.y + import_constants.MIN_MAX_PADDING,
+          y: minLabelPosition.y + minMaxPadding,
           autoHide: true
         }
       ),
@@ -87,7 +86,7 @@ const GaugeLabels = ({ value, prefixIcon }) => {
         {
           value: defaultMaxLabel,
           x: maxLabelPosition.x,
-          y: maxLabelPosition.y + import_constants.MIN_MAX_PADDING,
+          y: maxLabelPosition.y + minMaxPadding,
           autoHide: true
         }
       )

package/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/charts/gauge/components/GaugeLabelsWrapper/GaugeLabelsWrapper.sty.js

@@ -21,4 +21,4 @@ __export(GaugeLabelsWrapper_css_exports, {
 });
 module.exports = __toCommonJS(GaugeLabelsWrapper_css_exports);
 var import_GaugeLabelsWrapper_css_ts_vanilla = require("./GaugeLabelsWrapper.css");
-var labelsContainer = "_1fbjcz30-3-5-2";
+var labelsContainer = "_1fbjcz30-3-7-0";

package/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/charts/gauge/components/GaugeLayoutOverlay/GaugeLayoutOverlay.js

@@ -25,7 +25,8 @@ var import_GaugeLayoutOverlay_css = require("./GaugeLayoutOverlay.sty.js");
 var import_Flex = require("../../../../layouts/flex/Flex.js");
 var import_LoaderOverlay = require("../../../core/components/loader-overlay/LoaderOverlay.js");
 var import_OverlayContext = require("../../../core/components/overlay-tooltip/contexts/OverlayContext.js");
-var import_useGaugeChartOverlayEvents = require("../../hooks/useGaugeChartOverlayEvents.js");
+var import_useTooltipActions = require("../../../core/components/overlay-tooltip/useTooltipActions.js");
+var import_GaugeChartTooltipContext = require("../../contexts/GaugeChartTooltipContext.js");
 var import_useGaugeChartTooltipOverlayBounds = require("../../hooks/useGaugeChartTooltipOverlayBounds.js");
 var import_GaugeChartToolbar = require("../GaugeChartLayout/GaugeChartToolbar.js");
 var import_GaugeOverlayTooltip = require("../GaugeChartTooltip/GaugeOverlayTooltip.js");
@@ -33,12 +34,12 @@ const GaugeChartOverlay = (props) => {
   const { children, value, color, intents, toolbar, showLoading } = props;
   const overlay = (0, import_OverlayContext.useOverlay)();
   const overlayBounds = (0, import_useGaugeChartTooltipOverlayBounds.useGaugeChartTooltipOverlayBounds)();
-  const { onPointerMove, onClick, onPointerLeave } = (0, import_useGaugeChartOverlayEvents.useGaugeChartOverlayEvents)(
-    {
-      value,
-      color
-    }
-  );
+  const { name: tooltipName, hidden: tooltipHidden } = (0, import_GaugeChartTooltipContext.useGaugeChartTooltip)();
+  const { hover, togglePin, outOfBounds } = (0, import_useTooltipActions.useTooltipActions)();
+  const data = {
+    geometry: "meterbar",
+    series: [{ name: tooltipName ?? "Value", value, color }]
+  };
   const overlayClassName = overlayBounds ? import_GaugeLayoutOverlay_css.tooltipOverlay : `${import_GaugeLayoutOverlay_css.tooltipOverlay} ${import_GaugeLayoutOverlay_css.tooltipOverlayFull}`;
   const overlayStyle = overlayBounds ? {
     top: overlayBounds.top,
@@ -58,11 +59,11 @@ const GaugeChartOverlay = (props) => {
           import_Flex.Flex,
           {
             className: overlayClassName,
-            onPointerMove,
-            onPointerLeave,
-            onClick,
+            onPointerMove: (event) => hover(event, data),
+            onPointerLeave: outOfBounds,
+            onClick: (event) => togglePin(event, data),
             style: overlayStyle,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeOverlayTooltip.GaugeOverlayTooltip, { value, color })
+            children: !tooltipHidden && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeOverlayTooltip.GaugeOverlayTooltip, { value, color })
           }
         ),
         children,

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

@@ -26,6 +26,6 @@ module.exports = __toCommonJS(GaugeLayoutOverlay_css_exports);
 var import_GaugeLayoutOverlay_css_ts_vanilla = require("./GaugeLayoutOverlay.css");
 var import_createRuntimeFn = require("@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 = (0, import_createRuntimeFn.createRuntimeFn)({ 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 = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l0e5zm0-3-7-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var tooltipOverlay = "_l0e5zm2-3-7-0";
+var tooltipOverlayFull = "_l0e5zm3-3-7-0";

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

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

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

@@ -22,5 +22,5 @@ __export(GaugeResponsiveLabel_css_exports, {
 });
 module.exports = __toCommonJS(GaugeResponsiveLabel_css_exports);
 var import_GaugeResponsiveLabel_css_ts_vanilla = require("./GaugeResponsiveLabel.css");
-var parentSvgStyle = "_13c0oci1-3-5-2";
-var responsiveLabelContainer = "_13c0oci0-3-5-2";
+var parentSvgStyle = "_13c0oci1-3-7-0";
+var responsiveLabelContainer = "_13c0oci0-3-7-0";

package/charts/gauge/constants.d.ts

@@ -4,6 +4,7 @@ export declare const DEFAULT_CHART_WIDTH = "100%";
 export declare const DEFAULT_CHART_HEIGHT = 300;
 export declare const MIN_SIZE_IN_PX = 100;
 export declare const MIN_MAX_PADDING = 20;
+export declare const MIN_MAX_LABEL_RESERVED_HEIGHT_IN_PX = 16;
 export declare const ARC_OUTER_RADIUS_PERCENTAGE = 0.9;
 export declare const ARC_INNER_RADIUS_PERCENTAGE = 0.8;
 export declare const GAUGE_VERTICAL_SMALL_OFFSET = 0.05;

package/charts/gauge/constants.js

@@ -44,6 +44,7 @@ __export(constants_exports, {
   GAUGE_DEFAULT_CONFIG: () => GAUGE_DEFAULT_CONFIG,
   GAUGE_VERTICAL_DEFAULT_OFFSET: () => GAUGE_VERTICAL_DEFAULT_OFFSET,
   GAUGE_VERTICAL_SMALL_OFFSET: () => GAUGE_VERTICAL_SMALL_OFFSET,
+  MIN_MAX_LABEL_RESERVED_HEIGHT_IN_PX: () => MIN_MAX_LABEL_RESERVED_HEIGHT_IN_PX,
   MIN_MAX_PADDING: () => MIN_MAX_PADDING,
   MIN_SIZE_IN_PX: () => MIN_SIZE_IN_PX,
   THRESHOLD_COLOR_DEFAULT: () => THRESHOLD_COLOR_DEFAULT,
@@ -59,6 +60,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;

package/charts/gauge/contexts/GaugeChartTooltipContext.d.ts

@@ -0,0 +1,9 @@
+import type { GaugeChartTooltipConfig } from '../slots/Tooltip.js';
+/**
+ * @internal
+ */
+export declare const GaugeChartTooltipContext: import("react").Context<GaugeChartTooltipConfig>;
+/**
+ * @internal
+ */
+export declare const useGaugeChartTooltip: () => GaugeChartTooltipConfig;

package/charts/gauge/contexts/GaugeChartTooltipContext.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var GaugeChartTooltipContext_exports = {};
+__export(GaugeChartTooltipContext_exports, {
+  GaugeChartTooltipContext: () => GaugeChartTooltipContext,
+  useGaugeChartTooltip: () => useGaugeChartTooltip
+});
+module.exports = __toCommonJS(GaugeChartTooltipContext_exports);
+var import_react = require("react");
+const defaultValue = { hidden: false };
+const GaugeChartTooltipContext = (0, import_react.createContext)(defaultValue);
+const useGaugeChartTooltip = () => (0, import_react.useContext)(GaugeChartTooltipContext);

package/charts/gauge/hooks/useGaugeChartMinMaxLabelsPosition.d.ts

@@ -1,4 +1,5 @@
 export declare const useGaugeChartMinMaxLabelsPosition: () => {
     minLabelPosition: import("../../index.js")._Point;
     maxLabelPosition: import("../../index.js")._Point;
+    minMaxPadding: number;
 };

package/charts/gauge/hooks/useGaugeChartMinMaxLabelsPosition.js

@@ -22,13 +22,24 @@ __export(useGaugeChartMinMaxLabelsPosition_exports, {
 module.exports = __toCommonJS(useGaugeChartMinMaxLabelsPosition_exports);
 var import_constants = require("../constants.js");
 var import_useGaugeChartAspectRatio = require("./useGaugeChartAspectRatio.js");
+var import_useGaugeChartSizeContext = require("./useGaugeChartSizeContext.js");
 var import_polar_to_cartesian = require("../utils/polar-to-cartesian.js");
 const useGaugeChartMinMaxLabelsPosition = () => {
   const { arcMiddleRadius } = (0, import_useGaugeChartAspectRatio.useGaugeChartAspectRatio)();
+  const dimensions = (0, import_useGaugeChartSizeContext.useGaugeChartSizeContext)();
+  const width = dimensions?.width ?? 0;
+  const height = dimensions?.height ?? 0;
   const minLabelPosition = (0, import_polar_to_cartesian.polarToCartesian)(arcMiddleRadius, import_constants.ARC_START_ANGLE);
   const maxLabelPosition = (0, import_polar_to_cartesian.polarToCartesian)(arcMiddleRadius, import_constants.ARC_END_ANGLE);
+  const verticalOffset = height > width ? height * import_constants.GAUGE_VERTICAL_SMALL_OFFSET : height * import_constants.GAUGE_VERTICAL_DEFAULT_OFFSET;
+  const availableAfterArcEnd = height / 2 - verticalOffset - maxLabelPosition.y;
+  const minMaxPadding = Math.min(
+    import_constants.MIN_MAX_PADDING,
+    Math.max(0, availableAfterArcEnd - import_constants.MIN_MAX_LABEL_RESERVED_HEIGHT_IN_PX)
+  );
   return {
     minLabelPosition,
-    maxLabelPosition
+    maxLabelPosition,
+    minMaxPadding
   };
 };

package/charts/gauge/providers/GaugeChartProviders.js

@@ -33,7 +33,7 @@ var import_GaugeChartRangeMaxContext = require("../contexts/GaugeChartRangeMaxCo
 var import_GaugeChartRangeMinContext = require("../contexts/GaugeChartRangeMinContext.js");
 var import_GaugeChartSizeContext = require("../contexts/GaugeChartSizeContext.js");
 var import_GaugeChartThresholdContext = require("../contexts/GaugeChartThresholdContext.js");
-var import_GaugeChartTooltipNameContext = require("../contexts/GaugeChartTooltipNameContext.js");
+var import_GaugeChartTooltipContext = require("../contexts/GaugeChartTooltipContext.js");
 var import_get_value_arc_color = require("../utils/get-value-arc-color.js");
 const emptyThresholds = [];
 const GaugeChartProviders = ({
@@ -77,6 +77,14 @@ const GaugeChartProviders = ({
     }),
     [formatter, unit]
   );
+  const tooltipConfigValue = (0, import_react.useMemo)(
+    () => ({
+      name: config.tooltip?.name,
+      template: config.tooltip?.children,
+      hidden: config.tooltip?.hidden ?? false
+    }),
+    [config.tooltip]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayContext.OverlayProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TooltipContext.TooltipProvider, { persistedStore: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartSeriesActionContext.ChartSeriesActionContext.Provider, { value: seriesActionValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartSizeContext.GaugeChartSizeContext.Provider, { value: chartSizeValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartFormatterContext.GaugeChartFormatterContext.Provider, { value: formatterContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_GaugeChartThresholdContext.GaugeChartThresholdContext.Provider,
     {
@@ -88,9 +96,9 @@ const GaugeChartProviders = ({
             label: labelSlot
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartRangeMinContext.GaugeChartRangeMinContext.Provider, { value: min, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartRangeMaxContext.GaugeChartRangeMaxContext.Provider, { value: max, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GaugeChartLoadingContext.GaugeChartLoadingContext.Provider, { value: loading, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_GaugeChartTooltipNameContext.GaugeChartTooltipNameContext.Provider,
+            import_GaugeChartTooltipContext.GaugeChartTooltipContext.Provider,
             {
-              value: config.tooltip?.name,
+              value: tooltipConfigValue,
               children
             }
           ) }) }) })

package/charts/gauge/slots/Tooltip.d.ts

@@ -1,3 +1,36 @@
+import { type ReactNode } from 'react';
+/**
+ * Data passed to the GaugeChart custom tooltip render function.
+ * @public
+ */
+export interface GaugeChartTooltipItem {
+    /**
+     * Raw numerical value displayed by the gauge.
+     */
+    value: number;
+    /**
+     * Value formatted via the chart's formatter (and unit, if any).
+     */
+    formattedValue: string;
+    /**
+     * Colour currently applied to the gauge arc (resolved from explicit
+     * `color`, ColorRules or palette).
+     */
+    color: string | undefined;
+    /**
+     * Optional `name` provided through the `GaugeChart.Tooltip` slot.
+     */
+    name: string | undefined;
+    /**
+     * Optional unit string used by the formatter, when available.
+     */
+    unit: string | undefined;
+}
+/**
+ * Render function used to customise the body of the GaugeChart tooltip.
+ * @public
+ */
+export type GaugeChartTooltipHandler = (item: GaugeChartTooltipItem) => ReactNode;
 /**
  * Props for the GaugeChart.Tooltip slot component
  * @public
@@ -7,12 +40,36 @@ export interface GaugeChartTooltipProps {
      * Optional name to display in the tooltip
      */
     name?: string;
+    /**
+     * Optional custom tooltip template. When provided, the function is
+     * invoked with the current gauge value and its result replaces the
+     * default tooltip body. Use `ChartTooltip` atoms (e.g.
+     * `ChartTooltip.SeriesItem`) to build a structured layout, or any
+     * `ReactNode` for free-form content.
+     */
+    children?: GaugeChartTooltipHandler;
+    /**
+     * When `true`, the tooltip is not rendered.
+     * @defaultValue false
+     */
+    hidden?: boolean;
+}
+/**
+ * Internal config shape used after `children` has been remapped to
+ * `template`, mirroring the AnnotationsChart tooltip pipeline.
+ * @internal
+ */
+export interface GaugeChartTooltipConfig {
+    name?: string;
+    /** Map from slot `children` to `template` internally */
+    template?: GaugeChartTooltipHandler;
+    hidden?: boolean;
 }
 /**
  * Slot component for Gauge Chart tooltip
  * @public
  */
 export declare const Tooltip: {
-    (props: GaugeChartTooltipProps): null;
+    (_props: GaugeChartTooltipProps): null;
     displayName: string;
 };

package/charts/gauge/slots/Tooltip.js

@@ -20,5 +20,5 @@ __export(Tooltip_exports, {
   Tooltip: () => Tooltip
 });
 module.exports = __toCommonJS(Tooltip_exports);
-const Tooltip = (props) => null;
+const Tooltip = (_props) => null;
 Tooltip["displayName"] = "GaugeChart.Tooltip";

package/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.css

@@ -1,3 +1,3 @@
-._9phcbi0-3-5-2 {
+._9phcbi0-3-7-0 {
   position: relative;
 }

package/charts/histogram/components/axes/HistogramValueBottomAxisArea/HistogramValueBottomAxisArea.sty.js

@@ -21,4 +21,4 @@ __export(HistogramValueBottomAxisArea_css_exports, {
 });
 module.exports = __toCommonJS(HistogramValueBottomAxisArea_css_exports);
 var import_HistogramValueBottomAxisArea_css_ts_vanilla = require("./HistogramValueBottomAxisArea.css");
-var axisContainerStyle = "_9phcbi0-3-5-2";
+var axisContainerStyle = "_9phcbi0-3-7-0";

package/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.css

@@ -1,4 +1,4 @@
-._fzvydv0-3-5-2 {
+._fzvydv0-3-7-0 {
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
 }

package/charts/histogram/components/overlays/HistogramExplore/HistogramTooltip.sty.js

@@ -21,4 +21,4 @@ __export(HistogramTooltip_css_exports, {
 });
 module.exports = __toCommonJS(HistogramTooltip_css_exports);
 var import_HistogramTooltip_css_ts_vanilla = require("./HistogramTooltip.css");
-var wrapper = "_fzvydv0-3-5-2";
+var wrapper = "_fzvydv0-3-7-0";

package/charts/histogram/components/overlays/HistogramOverlays.css

@@ -1,4 +1,4 @@
-._drl8ns0-3-5-2 {
+._drl8ns0-3-7-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._drl8ns1-3-5-2 {
+._drl8ns1-3-7-0 {
   pointer-events: none;
   overflow: visible;
   z-index: 1;

package/charts/histogram/components/overlays/HistogramOverlays.sty.js

@@ -23,5 +23,5 @@ __export(HistogramOverlays_css_exports, {
 module.exports = __toCommonJS(HistogramOverlays_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_HistogramOverlays_css_ts_vanilla = require("./HistogramOverlays.css");
-var crosshairLayout = "_drl8ns1-3-5-2 _13lzg4k0-3-5-2";
-var datapointLayout = "_drl8ns0-3-5-2 _13lzg4k0-3-5-2";
+var crosshairLayout = "_drl8ns1-3-7-0 _13lzg4k0-3-7-0";
+var datapointLayout = "_drl8ns0-3-7-0 _13lzg4k0-3-7-0";

package/charts/histogram/types/histogram-props.d.ts

@@ -11,6 +11,7 @@ import type { ColorRuleProps } from '../../core/types/color-rule.js';
 import type { Formatter } from '../../core/types/formatter.js';
 import type { ChartInteractionsConfig, ZoomInteractions } from '../../core/types/interactions.js';
 import type { LegendProps } from '../../core/types/legend.js';
+import type { MaxScaleBoundary, MinScaleBoundary } from '../../core/types/min-max-config.js';
 import type { AxisScaleType, ValueRepresentation } from '../../core/types/scales.js';
 import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
 import { ChartToolbarConfig, InternalChartToolbarConfig, ToolbarPlacement } from '../../core/types/toolbar.js';
@@ -158,12 +159,12 @@ export interface HistogramChartXAxisProps {
      * The max value configuration to display in the axis
      * @defaultValue 'auto'
      */
-    max?: number | 'auto' | 'data-max';
+    max?: MaxScaleBoundary;
     /**
      * The min value configuration to display in the axis
      * @defaultValue 'auto'
      */
-    min?: number | 'auto' | 'data-min';
+    min?: MinScaleBoundary;
     /**
      * The title used for the axis
      */
@@ -189,12 +190,12 @@ export interface HistogramChartYAxisProps {
      * The max value configuration to display in the axis
      * @defaultValue 'auto'
      */
-    max?: number | 'auto' | 'data-max';
+    max?: MaxScaleBoundary;
     /**
      * The min value configuration to display in the axis
      * @defaultValue 'auto'
      */
-    min?: number | 'auto' | 'data-min';
+    min?: MinScaleBoundary;
     /**
      * The title used for the axis
      */