@dynatrace/strato-components 3.5.0 → 3.6.0

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-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
-var tooltipOverlay = "_l0e5zm2-3-5-0";
-var tooltipOverlayFull = "_l0e5zm3-3-5-0";
+var container = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l0e5zm0-3-6-0", variantClassNames: { showLoading: { true: "_l0e5zm1-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var tooltipOverlay = "_l0e5zm2-3-6-0";
+var tooltipOverlayFull = "_l0e5zm3-3-6-0";

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

@@ -1,4 +1,4 @@
-._13c0oci0-3-5-0 {
+._13c0oci0-3-6-0 {
   width: 100%;
   height: 100%;
   justify-content: center;
@@ -9,7 +9,7 @@
   margin: 0;
   gap: 0;
 }
-._13c0oci1-3-5-0 svg {
+._13c0oci1-3-6-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-0";
-var responsiveLabelContainer = "_13c0oci0-3-5-0";
+var parentSvgStyle = "_13c0oci1-3-6-0";
+var responsiveLabelContainer = "_13c0oci0-3-6-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-0 {
+._9phcbi0-3-6-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-0";
+var axisContainerStyle = "_9phcbi0-3-6-0";

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

@@ -1,4 +1,4 @@
-._fzvydv0-3-5-0 {
+._fzvydv0-3-6-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-0";
+var wrapper = "_fzvydv0-3-6-0";

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

@@ -1,4 +1,4 @@
-._drl8ns0-3-5-0 {
+._drl8ns0-3-6-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -6,7 +6,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._drl8ns1-3-5-0 {
+._drl8ns1-3-6-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-0 _13lzg4k0-3-5-0";
-var datapointLayout = "_drl8ns0-3-5-0 _13lzg4k0-3-5-0";
+var crosshairLayout = "_drl8ns1-3-6-0 _13lzg4k0-3-6-0";
+var datapointLayout = "_drl8ns0-3-6-0 _13lzg4k0-3-6-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
      */

package/charts/honeycomb/HoneycombChart.css

@@ -1,3 +1,3 @@
-._p8cogi0-3-5-0 {
+._p8cogi0-3-6-0 {
   position: relative;
 }

package/charts/honeycomb/HoneycombChart.d.ts

@@ -27,4 +27,8 @@ export declare const HoneycombChart: ((props: PropsWithChildren<HoneycombChartPr
         (): null;
         displayName: string;
     };
+    Tooltip: {
+        (props: import("./types/honeycomb-internal.js").HoneycombChartTooltipProps): null;
+        displayName: string;
+    };
 };

package/charts/honeycomb/HoneycombChart.js

@@ -52,6 +52,7 @@ var import_honeycomb_store_provider = require("./providers/honeycomb-store.provi
 var import_DownloadCSV = require("./slots/DownloadCSV.js");
 var import_HoneycombLegend = require("./slots/HoneycombLegend.js");
 var import_Toolbar = require("./slots/Toolbar.js");
+var import_Tooltip = require("./slots/Tooltip.js");
 var import_build_and_download_csv = require("./utils/build-and-download-csv.js");
 var import_normalize_tiles_data = require("./utils/normalize-tiles-data.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
@@ -161,5 +162,6 @@ const HoneycombChart = Object.assign(_HoneycombChart, {
   Intent: import_Intent.Intent,
   ColorRule: import_ColorRule.ColorRule,
   Toolbar: import_Toolbar.Toolbar,
-  DownloadCSV: import_DownloadCSV.HoneycombChartDownloadCSVSlot
+  DownloadCSV: import_DownloadCSV.HoneycombChartDownloadCSVSlot,
+  Tooltip: import_Tooltip.Tooltip
 });

package/charts/honeycomb/HoneycombChart.sty.js

@@ -21,4 +21,4 @@ __export(HoneycombChart_css_exports, {
 });
 module.exports = __toCommonJS(HoneycombChart_css_exports);
 var import_HoneycombChart_css_ts_vanilla = require("./HoneycombChart.css");
-var graphContainer = "_p8cogi0-3-5-0";
+var graphContainer = "_p8cogi0-3-6-0";

package/charts/honeycomb/components/HiveOverlay.css

@@ -1,4 +1,4 @@
-._lmrhfg0-3-5-0 {
+._lmrhfg0-3-6-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/honeycomb/components/HiveOverlay.sty.js

@@ -21,4 +21,4 @@ __export(HiveOverlay_css_exports, {
 });
 module.exports = __toCommonJS(HiveOverlay_css_exports);
 var import_HiveOverlay_css_ts_vanilla = require("./HiveOverlay.css");
-var overlay = "_lmrhfg0-3-5-0";
+var overlay = "_lmrhfg0-3-6-0";

package/charts/honeycomb/components/canvas/HiveCanvasLayout.css

@@ -1,4 +1,4 @@
-._12htcxh0-3-5-0 {
+._12htcxh0-3-6-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/honeycomb/components/canvas/HiveCanvasLayout.sty.js

@@ -21,4 +21,4 @@ __export(HiveCanvasLayout_css_exports, {
 });
 module.exports = __toCommonJS(HiveCanvasLayout_css_exports);
 var import_HiveCanvasLayout_css_ts_vanilla = require("./HiveCanvasLayout.css");
-var canvasContainer = "_12htcxh0-3-5-0";
+var canvasContainer = "_12htcxh0-3-6-0";

package/charts/honeycomb/components/tooltip/HoneycombOverlayTooltip.js

@@ -24,14 +24,29 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_utils = require("../../../core/components/overlay-tooltip/_to-be-removed/utils.js");
 var import_OverlayTooltip = require("../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_utils2 = require("../../../core/components/overlay-tooltip/utils.js");
+var import_use_honeycomb_custom_tooltip = require("../../hooks/use-honeycomb-custom-tooltip.js");
 var import_use_honeycomb_truncation_mode = require("../../hooks/use-honeycomb-truncation-mode.js");
 const HoneycombOverlayTooltip = (props) => {
   const data = (0, import_utils.useTooltipData)().data;
   const truncationMode = (0, import_use_honeycomb_truncation_mode.useHoneycombTruncationMode)();
-  if ((0, import_utils2.isTooltipDataEmpty)(data)) {
+  const tooltip = (0, import_use_honeycomb_custom_tooltip.useHoneycombCustomTooltip)();
+  if (tooltip?.hidden || (0, import_utils2.isTooltipDataEmpty)(data)) {
     return null;
   }
   const series = data.series[0];
+  if (typeof tooltip?.template === "function") {
+    const metadata = data.metadata;
+    if (metadata) {
+      const payload = {
+        name: metadata.tooltipMetadata.name,
+        value: metadata.tileData.value,
+        formattedValue: String(series.value),
+        color: metadata.tooltipMetadata.color.Default,
+        data: metadata.tileData
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: tooltip.template(payload) });
+    }
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { truncation: truncationMode, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_OverlayTooltip.OverlayTooltip.SeriesItem,
     {

package/charts/honeycomb/context/honeycomb-custom-tooltip.context.d.ts

@@ -0,0 +1,2 @@
+import type { HoneycombCustomTooltipConfig } from '../types/honeycomb-internal.js';
+export declare const HoneycombCustomTooltipContext: import("react").Context<HoneycombCustomTooltipConfig | undefined>;

package/charts/honeycomb/context/honeycomb-custom-tooltip.context.js

@@ -0,0 +1,24 @@
+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 honeycomb_custom_tooltip_context_exports = {};
+__export(honeycomb_custom_tooltip_context_exports, {
+  HoneycombCustomTooltipContext: () => HoneycombCustomTooltipContext
+});
+module.exports = __toCommonJS(honeycomb_custom_tooltip_context_exports);
+var import_react = require("react");
+const HoneycombCustomTooltipContext = (0, import_react.createContext)(void 0);

package/charts/honeycomb/hooks/use-honeycomb-custom-tooltip.d.ts

@@ -0,0 +1 @@
+export declare const useHoneycombCustomTooltip: () => import("../types/honeycomb-internal.js").HoneycombCustomTooltipConfig | undefined;

package/charts/{gauge/contexts/GaugeChartTooltipNameContext.js → honeycomb/hooks/use-honeycomb-custom-tooltip.js}

@@ -15,14 +15,11 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var GaugeChartTooltipNameContext_exports = {};
-__export(GaugeChartTooltipNameContext_exports, {
-  GaugeChartTooltipNameContext: () => GaugeChartTooltipNameContext,
-  useGaugeChartTooltipName: () => useGaugeChartTooltipName
+var use_honeycomb_custom_tooltip_exports = {};
+__export(use_honeycomb_custom_tooltip_exports, {
+  useHoneycombCustomTooltip: () => useHoneycombCustomTooltip
 });
-module.exports = __toCommonJS(GaugeChartTooltipNameContext_exports);
+module.exports = __toCommonJS(use_honeycomb_custom_tooltip_exports);
 var import_react = require("react");
-const GaugeChartTooltipNameContext = (0, import_react.createContext)(
-  void 0
-);
-const useGaugeChartTooltipName = () => (0, import_react.useContext)(GaugeChartTooltipNameContext);
+var import_honeycomb_custom_tooltip_context = require("../context/honeycomb-custom-tooltip.context.js");
+const useHoneycombCustomTooltip = () => (0, import_react.useContext)(import_honeycomb_custom_tooltip_context.HoneycombCustomTooltipContext);

package/charts/honeycomb/providers/honeycomb-configuration.provider.js

@@ -22,6 +22,7 @@ __export(honeycomb_configuration_provider_exports, {
 module.exports = __toCommonJS(honeycomb_configuration_provider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ColorRuleContext = require("../../core/context/ColorRuleContext.js");
+var import_honeycomb_custom_tooltip_context = require("../context/honeycomb-custom-tooltip.context.js");
 var import_honeycomb_legend_config_context = require("../context/honeycomb-legend-config.context.js");
 var import_honeycomb_toolbar_config_context = require("../context/honeycomb-toolbar-config.context.js");
 const HoneycombConfigurationProvider = ({
@@ -29,5 +30,5 @@ const HoneycombConfigurationProvider = ({
   config
 }) => {
   const { legend, toolbar } = config;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_honeycomb_legend_config_context.HoneycombLegendConfigContext.Provider, { value: legend, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_honeycomb_toolbar_config_context.HoneycombToolbarConfigContext.Provider, { value: toolbar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: config.colorRules, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_honeycomb_legend_config_context.HoneycombLegendConfigContext.Provider, { value: legend, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_honeycomb_toolbar_config_context.HoneycombToolbarConfigContext.Provider, { value: toolbar, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ColorRuleContext.ColorRuleContext.Provider, { value: config.colorRules, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_honeycomb_custom_tooltip_context.HoneycombCustomTooltipContext.Provider, { value: config.tooltip, children }) }) }) });
 };

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

@@ -0,0 +1,5 @@
+import type { HoneycombChartTooltipProps } from '../types/honeycomb-internal.js';
+export declare const Tooltip: {
+    (props: HoneycombChartTooltipProps): null;
+    displayName: string;
+};

package/charts/{core/components/annotations/components/tooltip/AnnotationsTooltip.sty.js → honeycomb/slots/Tooltip.js}

@@ -15,10 +15,10 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var AnnotationsTooltip_css_exports = {};
-__export(AnnotationsTooltip_css_exports, {
-  tooltipContentContainer: () => tooltipContentContainer
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  Tooltip: () => Tooltip
 });
-module.exports = __toCommonJS(AnnotationsTooltip_css_exports);
-var import_AnnotationsTooltip_css_ts_vanilla = require("./AnnotationsTooltip.css");
-var tooltipContentContainer = "_1lrb03s0-3-5-0";
+module.exports = __toCommonJS(Tooltip_exports);
+const Tooltip = (props) => null;
+Tooltip["displayName"] = "HoneycombChart.Tooltip";

package/charts/honeycomb/types/honeycomb-config-properties.d.ts

@@ -1,4 +1,5 @@
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
+import type { HoneycombCustomTooltipConfig } from './honeycomb-internal.js';
 import type { HoneycombTileShape } from './honeycomb.js';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
 import type { ChartUnit } from '../../core/types/chart-unit.js';
@@ -21,7 +22,7 @@ export type HoneycombChartToolbarConfiguration = Omit<ChartToolbarConfig, 'colla
  * This is the information that should be returned to the consumer as exported config
  * @public
  */
-export interface HoneycombConsumerExportedConfig extends Omit<HoneycombChartProperties, 'toolbar'> {
+export interface HoneycombConsumerExportedConfig extends Omit<HoneycombChartProperties, 'toolbar' | 'tooltip'> {
     toolbar?: Omit<HoneycombChartToolbarConfiguration, 'intents'>;
 }
 /**
@@ -56,4 +57,6 @@ export interface HoneycombChartProperties {
     /** Show/hide labels and values within the nodes */
     showLabels?: boolean;
     colorRules?: ColorRuleProps[];
+    /** Tooltip configuration */
+    tooltip?: HoneycombCustomTooltipConfig;
 }