@dynatrace/strato-components 3.5.2 → 3.6.0

package/charts/honeycomb/types/honeycomb-internal.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 import { HoneycombTileData, HoneycombTileShape } from './honeycomb.js';
 import { HoneycombToolbarConfig } from './toolbar.js';
@@ -13,6 +14,39 @@ export type HoneycombTooltipMetadata = HoneycombTileData & {
     name: string;
     color: ColorToken;
 };
+/**
+ * Data provided to the custom tooltip render function for HoneycombChart.
+ * @public
+ */
+export type HoneycombTooltipPayload = {
+    /** The tile name */
+    name: string;
+    /** The raw tile value */
+    value: number | string;
+    /** The formatted tile value (as displayed in the default tooltip) */
+    formattedValue: string;
+    /** The resolved CSS color for the tile */
+    color: string;
+    /** The full original tile data, including any custom fields */
+    data: HoneycombTileData;
+};
+/**
+ * Props for the HoneycombChart.Tooltip component.
+ * @public
+ */
+export type HoneycombChartTooltipProps = {
+    /** When true, suppresses the tooltip entirely. */
+    hidden?: boolean;
+    children?: (payload: HoneycombTooltipPayload) => ReactNode;
+};
+/**
+ * Tooltip configuration used internally and in the context config API.
+ * @public
+ */
+export type HoneycombCustomTooltipConfig = {
+    hidden?: boolean;
+    template?: HoneycombChartTooltipProps['children'];
+};
 /**
  * @internal
  */
@@ -20,6 +54,7 @@ export interface HoneycombSlotsConfig {
     legend: HoneycombLegendProps | undefined;
     toolbar: HoneycombToolbarConfig | undefined;
     colorRules: ColorRuleProps[];
+    tooltip?: HoneycombCustomTooltipConfig;
 }
 /**
  * The interface needed after everything is configured
@@ -51,4 +86,5 @@ export interface HoneycombRequiredConfigProps {
     /** Show/hide labels and values within the nodes */
     showLabels: boolean;
     colorRules: ColorRuleProps[];
+    tooltip?: HoneycombCustomTooltipConfig;
 }

package/charts/honeycomb/utils/build-honeycomb-config.js

@@ -84,6 +84,7 @@ const buildHoneycombConfig = (props, contextConfig, slots) => {
     min,
     max,
     showLabels,
-    colorRules
+    colorRules,
+    tooltip: slots.tooltip ?? contextConfig.tooltip
   };
 };

package/charts/honeycomb/utils/build-overlay-tooltip-data.js

@@ -27,7 +27,11 @@ const buildOverlayTooltipData = (tileIndex, honeycombData, tooltipMetadata) => {
   return {
     geometry: "honeycomb",
     header1: [],
-    metadata: { id: metadata.id },
+    metadata: {
+      id: metadata.id,
+      tileData,
+      tooltipMetadata: metadata
+    },
     series: [
       {
         name: metadata.name,

package/charts/honeycomb/utils/iterate-honeycomb-slots.js

@@ -32,6 +32,7 @@ var import_constants = require("../constants.js");
 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");
 const buildChartToolbarConfigSlot = (child, config) => {
   const { children, ...toolbar } = child.props;
   const childrenToolbar = iterateChartToolbarSlots(children);
@@ -47,7 +48,8 @@ const iterateHoneycombSlots = (children) => {
   let config = {
     legend: void 0,
     toolbar: void 0,
-    colorRules: []
+    colorRules: [],
+    tooltip: void 0
   };
   let intents;
   import_react.Children.forEach(children, (child) => {
@@ -76,6 +78,14 @@ const iterateHoneycombSlots = (children) => {
       intents = intents ? [...intents, child.props] : [child.props];
     } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule)) {
       (0, import_ColorRule.isValidColorRule)(child.props) && config.colorRules.push(child.props);
+    } else if ((0, import_is_slot.isSlot)(child, import_Tooltip.Tooltip)) {
+      config = {
+        ...config,
+        tooltip: {
+          hidden: child.props?.hidden ?? false,
+          template: child.props?.children
+        }
+      };
     }
   });
   if (intents) {

package/charts/index.d.ts

@@ -99,10 +99,12 @@ export type { DefaultConfigByGeoLayer as _DefaultConfigByGeoLayer } from './core
 export { OverlayProvider as _OverlayProvider, useOverlay as _useOverlayChart, } from './core/components/overlay-tooltip/contexts/OverlayContext.js';
 export { TooltipProvider as _OverlayTooltipProvider, useTooltip as _useOverlayTooltipStore, } from './core/components/overlay-tooltip/contexts/TooltipContext.js';
 export { useTooltipReducer as _useOverlayTooltipReducer } from './core/components/overlay-tooltip/useTooltipReducer.js';
+export { useTooltipActions as _useOverlayTooltipActions, type EventCoords as _EventCoords, } from './core/components/overlay-tooltip/useTooltipActions.js';
 export type { OverlayTooltipBaseProps as _OverlayTooltipBaseProps, OverlayTooltipUncontrolledProps as _OverlayTooltipUncontrolledProps, OverlayTooltipControlledProps as _OverlayTooltipControlledProps, TooltipState as _OverlayTooltipState, TooltipStore as _OverlayTooltipStoreType, OverlayTooltipProps as _OverlayTooltipProps, Data as _OverlayTooltipData, NoData as _OverlayTooltipNoData, HeaderData, TooltipValue, GeometryTypes as _OverlayTooltipGeometryTypes, GeometryTypesEnum as _GeometryTypesEnum, SeriesHeaderProps, Positions as _OverlayTooltipPositions, Overlay as _OverlayTooltipOverlay, SeriesName, GeoLayerTypes as _OverlayTooltipGeoLayerTypes, DefaultConfig as _OverlayTooltipDefaultConfig, FormatStrategy as _OverlayTooltipFormatStrategy, TooltipAction as _OverlayTooltipAction, DefaultConfigByGeometry as _OverlayTooltipDefaultConfigByGeometry, Geometry as _OverlayTooltipGeometry, } from './core/components/overlay-tooltip/types.js';
 export type { ActionProps } from './core/components/overlay-tooltip/components/global-actions/Action.js';
 export type { ActionsPlaceholderProps } from './core/components/overlay-tooltip/components/global-actions/ActionsPlaceholder.js';
-export type { HeaderProps as _ChartTooltipHeaderProps, HeaderDataWithDuration as _HeaderDataWithDuration, HeaderDataInformation as _HeaderDataInformation, } from './core/components/overlay-tooltip/components/header/types/header.js';
+export type { HeaderProps as ChartTooltipHeaderProps, HeaderDataWithDuration, HeaderDataInformation, } from './core/components/overlay-tooltip/components/header/types/header.js';
+export type { FooterProps as ChartTooltipFooterProps } from './core/components/overlay-tooltip/components/Footer.js';
 export { useDefaultLabels as _useOverlayTooltipDefaultLabels } from './core/components/overlay-tooltip/hooks/useDefaultLabels.js';
 export type { Defaults as _OverlayTooltipDefaults } from './core/components/overlay-tooltip/hooks/useDefaultLabels.js';
 export { OverlayTooltipHeaderStory as _OverlayTooltipHeaderStory, OverlayTooltipTruncationStory as _OverlayTooltipTruncationStory, OverlayTooltipWIPStory as _OverlayTooltipWIPStory, OverlayTooltipCustomStory as _OverlayTooltipCustomStory, } from './core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.js';
@@ -172,11 +174,12 @@ export { HoneycombChartConfig } from './honeycomb/context/honeycomb-chart-config
 export type { HoneycombChartRef, HoneycombChartProps, HoneycombTileData, HoneycombTileShape, HoneycombTileBaseData, HoneycombTileNumericData, HoneycombTileCategoricalData, HoneycombCategoricalProps, HoneycombChartNumericalProps, HoneycombBaseProps, } from './honeycomb/types/honeycomb.js';
 export type { HoneycombChartProperties, HoneycombChartToolbarConfiguration, } from './honeycomb/types/honeycomb-config-properties.js';
 export type { HoneycombLegendProps } from './honeycomb/slots/HoneycombLegend.js';
+export type { HoneycombChartTooltipProps, HoneycombCustomTooltipConfig, HoneycombTooltipPayload, } from './honeycomb/types/honeycomb-internal.js';
 export type { HoneycombToolbarSlotProps } from './honeycomb/types/toolbar.js';
 export { MultiMeterBarChart } from './meter-bar/multi-meter-bar/MultiMeterBarChart.js';
 export type { MultiMeterBarChartLegendProps } from './meter-bar/multi-meter-bar/slots/Legend.js';
 export { MultiMeterBarChartConfig } from './meter-bar/multi-meter-bar/context/MultiMeterBarChartConfigContext.js';
-export type { MultiMeterBarChartProps, MultiMeterBarChartTooltipProps, MultiMeterBarSegmentProps, MultiMeterBarSegmentBaseProps, MultiMeterBarSegmentPropsWithAccessor, MultiMeterBarSegmentPropsWithNumericValue, MultiMeterBarSegmentData, MultiMeterBarChartData, } from './meter-bar/multi-meter-bar/types/multi-meter-bar-chart.js';
+export type { MultiMeterBarChartProps, MultiMeterBarChartTooltipProps, MultiMeterBarSegmentProps, MultiMeterBarSegmentBaseProps, MultiMeterBarSegmentPropsWithAccessor, MultiMeterBarSegmentPropsWithNumericValue, MultiMeterBarSegmentData, MultiMeterBarChartData, MultiMeterBarChartTooltipPayload, MultiMeterBarChartTooltipSegmentPayload, MultiMeterBarChartActiveSegmentPayload, } from './meter-bar/multi-meter-bar/types/multi-meter-bar-chart.js';
 export type { MultiMeterBarChartConsumerConfig, MultiMeterBarChartTooltipConsumerConfig, } from './meter-bar/multi-meter-bar/types/multi-meter-bar-chart-config.js';
 export { type MultiMeterBarChartTooltipVariant, multiMeterBarChartTooltipVariantOptions, } from './meter-bar/multi-meter-bar/types/multi-meter-bar-chart.js';
 export type { MeterBarSize, MeterBarChartElementRef, MultiMeterBarChartElementRef, } from './meter-bar/shared/types/meter-bars.js';
@@ -184,7 +187,7 @@ export { MeterBarChart } from './meter-bar/single-meter-bar/MeterBarChart.js';
 export type { MeterBarChartLegendProps } from './meter-bar/shared/types/meter-bar-legend.js';
 export { MeterBarChartThresholdLegend as _MeterBarChartThresholdLegend } from './meter-bar/single-meter-bar/components/MeterBarChartThresholdLegend/MeterBarChartThresholdLegend.js';
 export { MeterBarChartConfig } from './meter-bar/single-meter-bar/context/MeterBarChartConfigContext.js';
-export type { MeterBarChartProps, MeterBarChartPropsWithAccessor, MeterBarChartPropsWithNumericValue, MeterBarChartThresholdIndicatorProps, MeterBarChartTooltipProps, MeterBarSegmentData, MeterBarChartBaseProps, MeterBarChartData, } from './meter-bar/single-meter-bar/types/meter-bar-chart.js';
+export type { MeterBarChartProps, MeterBarChartPropsWithAccessor, MeterBarChartPropsWithNumericValue, MeterBarChartThresholdIndicatorProps, MeterBarChartTooltipProps, MeterBarSegmentData, MeterBarChartBaseProps, MeterBarChartData, MeterBarChartTooltipPayload, MeterBarChartActiveThreshold, } from './meter-bar/single-meter-bar/types/meter-bar-chart.js';
 export type { MeterBarChartConsumerConfig, MeterBarChartThresholdConsumerConfig, } from './meter-bar/single-meter-bar/types/meter-bar-chart-config.js';
 export type { MeterBarToolbarSlotProps, MeterBarToolbarConfig, } from './meter-bar/shared/types/meter-bar-toolbar.js';
 export { PieChart } from './pie/PieChart.js';
@@ -211,7 +214,7 @@ export type { SingleValueConfigProperties, SingleValueProps, SingleValueSparklin
 export type { SingleValueRef } from './single-value/types/single-value-ref.js';
 export { Sparkline } from './sparkline/Sparkline.js';
 export type { TimeseriesChartAnnotationsProps } from './timeseries/slots/annotations/Annotations.js';
-export { TimeseriesAnnotations, TimeseriesChart, } from './timeseries/TimeseriesChartRoot.js';
+export { TimeseriesAnnotations, TimeseriesChart, } from './timeseries/TimeseriesChart.js';
 export { TimeseriesChartConfig } from './timeseries/context/TimeseriesChartConfig.context.js';
 export type { TimeseriesChartLegendProps } from './timeseries/slots/Legend.js';
 export type { TimeseriesChartThresholdIndicatorProps } from './timeseries/slots/ThresholdIndicator.js';
@@ -257,7 +260,7 @@ export type { XYChartSelectProps } from './xy-chart/slots/Select.js';
 export { XYChart, XYChartAnnotations } from './xy-chart/XYChartRoot.js';
 export { XYChartConfig } from './xy-chart/context/XYChartConfig.context.js';
 export type { XYChartData, XYAccessorDataTypes, XYChartAxisType, XYChartXAxisPosition, XYChartYAxisPosition, XYChartRectSeriesActionItem, XYChartColorPalette, RectDatapoint, XYChartRef, TOP_POSITION, BOTTOM_POSITION, LEFT_POSITION, RIGHT_POSITION, BOTH_POSITION, LOG_SCALE_TYPE, NUMERICAL_SCALE_TYPE, TIME_SCALE_TYPE, CATEGORICAL_SCALE_TYPE, BAR_VARIANT_SINGLE, BAR_VARIANT_STACK, BAR_VARIANT_GROUP, BaseDatapoint, DotDatapoint, LineDatapoint, BarDatapoint, AreaDatapoint, SeriesCurve as XYChartSeriesCurve, BarSeriesVariant, XYChartDotSeriesActionItem, XYChartLineSeriesActionItem, XYChartBarSeriesActionItem, XYChartAreaSeriesActionItem, XYChartThresholdLineBase, XYChartThresholdRangeBase, XYChartThresholdDynamicData, XYChartThresholdDataLineDynamic, XYChartThresholdDataLineStatic, XYChartThresholdDataRangeStatic, XYChartThresholdValue, XYChartThresholdStaticData, XYChartThresholdDataRangeDynamic, XYChartSelectedSeries, XYChartSelectedDomains, AxisFormatter, NumericalFormatter, XYChartTooltipPayload, DotTooltipPayload, LineTooltipPayload, RectTooltipPayload, BaseTooltipPayload, BarTooltipPayload, XYChartSeriesActionInfo, XYChartBarSeries, XYChartDotSeries, XYChartLineSeries, XYChartRectSeries, XYChartAreaSeries, AreaTooltipPayload, XYChartTooltipDatapoint, } from './xy-chart/types/xy-chart.js';
-export type { XYChartProps, XYChartRectSeriesProps, ColorSelectionProp, ShapeColorSelectionProp, XYShapeColorProp, XYShapeColorPaletteProp, XYChartAxisProps, XYChartAxisBaseProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartCategoricalAxisProps, XYChartTimeAxisProps, XYChartXAxisProps, XYChartYAxisProps, XYChartChartLegendProps, XYChartConfigProperties, XYChartBarSeriesProps, XYChartAreaSeriesProps, BarSeriesProps, StackBarSeriesProps, SingleBarSeriesProps, BaseBarSeriesProps, StackBarVerticalProps, StackBarHorizontalProps, BarSeriesVariantMap, GroupBarSeriesProps, GroupBarVerticalProps, GroupBarHorizontalProps, XYChartSeriesBaseProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartToolbarConfigProps, XYChartToolbarProps, XYChartToolbarSlotProps, XYChartThresholdIndicatorProps, XYChartThresholdDynamicProps, XYChartThresholdStaticProps, XYChartSelectConfig, XYChartCustomTooltipProps, } from './xy-chart/types/xy-chart-props.js';
+export type { XYChartProps, XYChartRectSeriesProps, ColorSelectionProp, ShapeColorSelectionProp, XYShapeColorProp, XYShapeColorPaletteProp, XYChartAxisProps, XYChartAxisBaseProps, XYChartLogAxisProps, XYChartNumericalAxisProps, XYChartCategoricalAxisProps, XYChartTimeAxisProps, XYChartXAxisProps, XYChartYAxisProps, XYChartChartLegendProps, XYChartConfigProperties, XYChartBarSeriesProps, XYChartAreaSeriesProps, BarSeriesProps, StackBarSeriesProps, SingleBarSeriesProps, BaseBarSeriesProps, StackBarVerticalProps, StackBarHorizontalProps, BarSeriesVariantMap, GroupBarSeriesProps, GroupBarVerticalProps, GroupBarHorizontalProps, XYChartSeriesBaseProps, XYChartDotSeriesProps, XYChartLineSeriesProps, XYChartToolbarConfigProps, XYChartToolbarProps, XYChartToolbarSlotProps, XYChartThresholdIndicatorProps, XYChartThresholdDynamicProps, XYChartThresholdStaticProps, XYChartSelectConfig, XYChartCustomTooltipProps, XYChartTooltipProps, } from './xy-chart/types/xy-chart-props.js';
 export { XYChartTooltipTemplate as _XYChartTooltipTemplate } from './xy-chart/components/tooltip/XYChartTooltipTemplate/XYChartTooltipTemplate.js';
 export type { XYChartTooltipHeaderProps as _XYChartTooltipHeaderProps } from './xy-chart/components/tooltip/XYChartTooltipHeader/XYChartTooltipHeader.js';
 export { XYChartTooltipHeader as _XYChartTooltipHeader } from './xy-chart/components/tooltip/XYChartTooltipHeader/XYChartTooltipHeader.js';
@@ -267,7 +270,7 @@ export type { _XYChartAdoptionProps } from './xy-chart-adoption/types/props.js';
 export type { GanttChartConfig, GanttChartFormatter, GanttChartFormatterCurrencyOptions, GanttSegmentData, GanttAnnotationsHeaderConfig, GanttAnnotationsMarkerProps, GanttAnnotationsTrackConfig, } from './gantt-chart/types/gantt-chart.js';
 export { TreeMap } from './tree-map/TreeMap.js';
 export type { TreeMapProps, TreeMapData, TreeMapLeafNode, TreeMapRootNode, TreeMapClusterNode, LabelsDisplay, NameAccessor, TreeMapElementRef, } from './tree-map/types/treemap.js';
-export type { TreeMapContextConfig, TreemapChartLegendConfig, TreeMapChartToolbarConfig, } from './tree-map/types/treemap-chart.config.js';
+export type { TreeMapContextConfig, TreemapChartLegendConfig, TreeMapChartToolbarConfig, TreeMapCustomTooltipConfig, TreeMapCustomTooltipProps, TreeMapTooltipPayload, } from './tree-map/types/treemap-chart.config.js';
 export { TreeMapConfig } from './tree-map/context/TreeMapConfigContext.js';
 export { useMousePosition as _useMousePosition } from './core/hooks/useMousePosition.js';
 export type { Timeseries, TimeseriesUnit } from './core/types/timeseries.js';
@@ -286,7 +289,7 @@ export type { GaugeChartThresholdIndicatorProps } from './gauge/slots/ThresholdI
 export { GaugeChartConfig } from './gauge/contexts/GaugeChartConfigContext.js';
 export type { GaugeChartBaseProps, GaugeChartProps, GaugeChartPropsWithAccessor, GaugeChartPropsWithNumericValue, GaugeChartRef, GaugeChartData, } from './gauge/types/gauge-chart.js';
 export type { GaugeChartConsumerConfig } from './gauge/types/gauge-chart-config.js';
-export type { GaugeChartTooltipProps } from './gauge/slots/Tooltip.js';
+export type { GaugeChartTooltipProps, GaugeChartTooltipHandler, GaugeChartTooltipItem, } from './gauge/slots/Tooltip.js';
 export type { TooltipEmojiProps, TooltipIndicatorProps, TooltipTextProps, TooltipDurationProps, TooltipValueProps, TooltipItemProps, TooltipBodyProps, TooltipFooterProps, VirtualEstimatedSize, TooltipHeaderProps, } from './core/components/tooltip/types/tooltip.js';
 export type { ChartTooltipTemplateType as _ChartTooltipTemplateType, ChartTooltipAtomsType as _ChartTooltipAtomsType, ChartTooltipSlotsType as _ChartTooltipSlotsType, } from './core/components/tooltip/types/ChartTooltip.config.js';
 export { colorPaletteMap as _colorPaletteMap } from './core/types/color-palettes-definitions.js';

package/charts/index.js

@@ -48,8 +48,8 @@ __export(charts_exports, {
   SingleValueConfig: () => import_use_single_value_config.SingleValueConfig,
   SingleValueGrid: () => import_SingleValueGrid.SingleValueGrid,
   Sparkline: () => import_Sparkline.Sparkline,
-  TimeseriesAnnotations: () => import_TimeseriesChartRoot.TimeseriesAnnotations,
-  TimeseriesChart: () => import_TimeseriesChartRoot.TimeseriesChart,
+  TimeseriesAnnotations: () => import_TimeseriesChart.TimeseriesAnnotations,
+  TimeseriesChart: () => import_TimeseriesChart.TimeseriesChart,
   TimeseriesChartConfig: () => import_TimeseriesChartConfig_context.TimeseriesChartConfig,
   TreeMap: () => import_TreeMap.TreeMap,
   TreeMapConfig: () => import_TreeMapConfigContext.TreeMapConfig,
@@ -130,6 +130,7 @@ __export(charts_exports, {
   _useMousePosition: () => import_useMousePosition.useMousePosition,
   _useObserveContainerSize: () => import_useObserveContainerSize.useObserveContainerSize,
   _useOverlayChart: () => import_OverlayContext.useOverlay,
+  _useOverlayTooltipActions: () => import_useTooltipActions.useTooltipActions,
   _useOverlayTooltipDefaultLabels: () => import_useDefaultLabels2.useDefaultLabels,
   _useOverlayTooltipReducer: () => import_useTooltipReducer.useTooltipReducer,
   _useOverlayTooltipStore: () => import_TooltipContext.useTooltip,
@@ -190,6 +191,7 @@ var import_useDefaultLabels = require("./core/components/overlay-tooltip/hooks/u
 var import_OverlayContext = require("./core/components/overlay-tooltip/contexts/OverlayContext.js");
 var import_TooltipContext = require("./core/components/overlay-tooltip/contexts/TooltipContext.js");
 var import_useTooltipReducer = require("./core/components/overlay-tooltip/useTooltipReducer.js");
+var import_useTooltipActions = require("./core/components/overlay-tooltip/useTooltipActions.js");
 var import_useDefaultLabels2 = require("./core/components/overlay-tooltip/hooks/useDefaultLabels.js");
 var import_OverlayTooltipWIPStory = require("./core/components/overlay-tooltip/_to-be-removed/_OverlayTooltipWIPStory.js");
 var import_constants = require("./core/constants.js");
@@ -235,7 +237,7 @@ var import_SingleValue = require("./single-value/SingleValue.js");
 var import_SingleValueGrid = require("./single-value-grid/SingleValueGrid.js");
 var import_use_single_value_config = require("./single-value/hooks/use-single-value-config.js");
 var import_Sparkline = require("./sparkline/Sparkline.js");
-var import_TimeseriesChartRoot = require("./timeseries/TimeseriesChartRoot.js");
+var import_TimeseriesChart = require("./timeseries/TimeseriesChart.js");
 var import_TimeseriesChartConfig_context = require("./timeseries/context/TimeseriesChartConfig.context.js");
 var import_ChartInteractions = require("./core/slots/chart-interactions/ChartInteractions.js");
 var import_convert_to_timeseries = require("./timeseries/utils/convert-to-timeseries/convert-to-timeseries.js");

package/charts/meter-bar/multi-meter-bar/MultiMeterBarChart.js

@@ -97,7 +97,7 @@ const MultiMeterBarChartRoot = (0, import_react.forwardRef)((props, forwardedRef
     max,
     formatter,
     unit,
-    tooltip,
+    tooltip: { enabled: !tooltip.hidden, variant: tooltip.variant },
     legend,
     loading
   };

package/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlay.js

@@ -43,7 +43,7 @@ const MultiMeterBarChartOverlay = ({ children }) => {
   const { size } = (0, import_MeterBarLayoutSizeContext.useMeterBarLayoutSize)();
   const { tooltipConfig } = (0, import_MultiMeterBarChartTooltipContext.useMultiMeterBarChartTooltipData)();
   const loading = (0, import_MeterBarChartLoadingContext.useMeterBarChartLoading)();
-  if (!tooltipConfig.enabled || loading) {
+  if (tooltipConfig.hidden || loading) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Flex.Flex,
       {

package/charts/meter-bar/multi-meter-bar/components/MultiMeterBarChartOverlay/MultiMeterBarChartOverlayWithTooltip.js

@@ -35,17 +35,34 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_Flex = require("../../../../../layouts/flex/Flex.js");
 var import_InteractionsOverlay_css = require("../../../../core/components/interactions-overlay/InteractionsOverlay.sty.js");
+var import_utils = require("../../../../core/components/overlay-tooltip/_to-be-removed/utils.js");
 var import_OverlayContext = require("../../../../core/components/overlay-tooltip/contexts/OverlayContext.js");
+var import_OverlayTooltip = require("../../../../core/components/overlay-tooltip/OverlayTooltip.js");
+var import_utils2 = require("../../../../core/components/overlay-tooltip/utils.js");
 var import_ChartSeriesActionContext = require("../../../../core/components/series-action/ChartSeriesActionContext.js");
 var import_MeterBarChartTooltip = require("../../../shared/components/meter-bar-tooltip/MeterBarChartTooltip.js");
 var import_FormatterContext = require("../../../shared/context/FormatterContext.js");
 var import_MeterBarLayoutSizeContext = require("../../../shared/context/MeterBarLayoutSizeContext.js");
 var import_element_size_css = require("../../../shared/styles/element-size.sty.js");
 var import_styles_css = require("../../../shared/styles.sty.js");
+var import_get_numeric_value = require("../../../shared/utils/get-numeric-value.js");
 var import_constants = require("../../constants.js");
 var import_MultiMeterBarChartTooltipContext = require("../../context/MultiMeterBarChartTooltipContext.js");
 var import_selectors = require("../../hooks/store/selectors.js");
 var import_useMultiMeterBarChartTooltipHandlers = require("../../hooks/useMultiMeterBarChartTooltipHandlers.js");
+const MultiMeterBarCustomTooltip = ({
+  template,
+  visibleSegments,
+  hoveredIndex
+}) => {
+  const segments = visibleSegments.map((s) => ({
+    name: s.name ?? "",
+    value: (0, import_get_numeric_value.getNumericValue)(s.value, s.valueAccessor),
+    color: s.color ?? ""
+  }));
+  const activeSegment = hoveredIndex !== void 0 && segments[hoveredIndex] ? { ...segments[hoveredIndex], index: hoveredIndex } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: template({ segments, activeSegment }) });
+};
 const MultiMeterBarChartOverlayWithTooltip = (props) => {
   const [hoveredSegmentIndex, setHoveredSegmentIndex] = (0, import_react.useState)(void 0);
   const overlay = (0, import_OverlayContext.useOverlay)();
@@ -67,6 +84,22 @@ const MultiMeterBarChartOverlayWithTooltip = (props) => {
     }))
   };
   const { onClick, onPointerMove, onPointerLeave } = (0, import_useMultiMeterBarChartTooltipHandlers.useMultiMeterBarChartTooltipHandlers)(sharedData, setHoveredSegmentIndex);
+  const { data: tooltipData } = (0, import_utils.useTooltipData)();
+  const tooltipContent = tooltipConfig.template && !(0, import_utils2.isTooltipDataEmpty)(tooltipData) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    MultiMeterBarCustomTooltip,
+    {
+      template: tooltipConfig.template,
+      visibleSegments,
+      hoveredIndex: hoveredSegmentIndex
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_MeterBarChartTooltip.MeterBarChartTooltip,
+    {
+      variant: isSharedTooltip ? import_constants.TOOLTIP_VARIANT.Shared : import_constants.TOOLTIP_VARIANT.Single,
+      activeItem: hoveredSegmentIndex ?? -1,
+      actionsForItem: chartSeriesActions ? (item) => () => chartSeriesActions(item) : void 0
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
@@ -78,14 +111,7 @@ const MultiMeterBarChartOverlayWithTooltip = (props) => {
       onClick,
       children: [
         props.children,
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_MeterBarChartTooltip.MeterBarChartTooltip,
-          {
-            variant: isSharedTooltip ? import_constants.TOOLTIP_VARIANT.Shared : import_constants.TOOLTIP_VARIANT.Single,
-            activeItem: hoveredSegmentIndex ?? -1,
-            actionsForItem: chartSeriesActions ? (item) => () => chartSeriesActions(item) : void 0
-          }
-        )
+        tooltipContent
       ]
     }
   );

package/charts/meter-bar/multi-meter-bar/default.d.ts

@@ -6,7 +6,7 @@ export declare const defaultConfig: {
     min: number;
     max: number;
     tooltip: {
-        enabled: boolean;
+        hidden: boolean;
         variant: "single";
     };
     formatter: (v: number) => string;

package/charts/meter-bar/multi-meter-bar/default.js

@@ -29,7 +29,7 @@ const defaultConfig = {
   size: import_constants.SIZE_DEFAULT,
   min: import_constants.MIN_DEFAULT_VALUE,
   max: import_constants.MAX_DEFAULT_VALUE,
-  tooltip: { enabled: false, variant: TOOLTIP_VARIANT_DEFAULT },
+  tooltip: { hidden: false, variant: TOOLTIP_VARIANT_DEFAULT },
   formatter: import_constants.DEFAULT_FORMATTER,
   legend: false,
   loading: false

package/charts/meter-bar/multi-meter-bar/hooks/useMultiMeterBarChartTooltipHandlers.js

@@ -21,15 +21,14 @@ __export(useMultiMeterBarChartTooltipHandlers_exports, {
 });
 module.exports = __toCommonJS(useMultiMeterBarChartTooltipHandlers_exports);
 var import_TooltipContext = require("../../../core/components/overlay-tooltip/contexts/TooltipContext.js");
-var import_useTooltipReducer = require("../../../core/components/overlay-tooltip/useTooltipReducer.js");
-var import_utils = require("../../../core/components/overlay-tooltip/utils.js");
+var import_useTooltipActions = require("../../../core/components/overlay-tooltip/useTooltipActions.js");
 var import_constants = require("../constants.js");
 var import_MultiMeterBarChartTooltipContext = require("../context/MultiMeterBarChartTooltipContext.js");
 const useMultiMeterBarChartTooltipHandlers = (data, setHoveredSegmentIndex) => {
   const tooltip = (0, import_TooltipContext.useTooltip)();
-  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
+  const { hover, pin, unpin, outOfBounds } = (0, import_useTooltipActions.useTooltipActions)();
   const { tooltipConfig } = (0, import_MultiMeterBarChartTooltipContext.useMultiMeterBarChartTooltipData)();
-  const isSharedTooltip = tooltipConfig.variant === import_constants.TOOLTIP_VARIANT.Shared;
+  const isSharedTooltip = tooltipConfig.variant === import_constants.TOOLTIP_VARIANT.Shared || !!tooltipConfig.template;
   const buildSingleSeriesData = (segmentEl) => {
     const index = Number(segmentEl.getAttribute("data-segment-index"));
     const series = [data.series[index]];
@@ -40,39 +39,16 @@ const useMultiMeterBarChartTooltipHandlers = (data, setHoveredSegmentIndex) => {
   };
   const onClick = (event) => {
     if (tooltip.getState().pinned) {
-      dispatch({
-        type: "SET_PINNED",
-        payload: {
-          pinned: false,
-          data: (0, import_utils.emptyData)()
-        }
-      })();
+      unpin();
     } else {
-      const { offsetX, offsetY } = event.nativeEvent;
       if (isSharedTooltip) {
-        dispatch({
-          type: "SET_PINNED",
-          payload: {
-            pinned: true,
-            relativeX: offsetX,
-            relativeY: offsetY,
-            data
-          }
-        })();
+        pin(event, data);
       } else {
         const segmentEl = event.target.closest(
           "[data-segment-index]"
         );
         if (segmentEl) {
-          dispatch({
-            type: "SET_PINNED",
-            payload: {
-              pinned: true,
-              relativeX: offsetX,
-              relativeY: offsetY,
-              data: buildSingleSeriesData(segmentEl)
-            }
-          })();
+          pin(event, buildSingleSeriesData(segmentEl));
         }
       }
     }
@@ -85,18 +61,15 @@ const useMultiMeterBarChartTooltipHandlers = (data, setHoveredSegmentIndex) => {
           segmentEl ? Number(segmentEl.getAttribute("data-segment-index")) : void 0
         );
       }
-      dispatch({ type: "SET_POSITION", payload: data })(event);
+      hover(event, data);
     } else if (segmentEl) {
-      dispatch({
-        type: "SET_POSITION",
-        payload: buildSingleSeriesData(segmentEl)
-      })(event);
+      hover(event, buildSingleSeriesData(segmentEl));
     } else {
-      dispatch({ type: "SET_OUT_BOUNDS" })();
+      outOfBounds();
     }
   };
   const onPointerLeave = () => {
-    dispatch({ type: "SET_OUT_BOUNDS" })();
+    outOfBounds();
   };
   return { onClick, onPointerMove, onPointerLeave };
 };

package/charts/meter-bar/multi-meter-bar/types/multi-meter-bar-chart-config.d.ts

@@ -83,8 +83,8 @@ export interface MultiMeterBarChartTooltipConsumerConfig {
      */
     variant?: MultiMeterBarChartTooltipVariant;
     /**
-     * Set to true to display the tooltip and false to hide it
-     * @defaultValue false
+     * Set to false to hide the tooltip.
+     * @defaultValue true
      */
     enabled?: boolean;
 }

package/charts/meter-bar/multi-meter-bar/types/multi-meter-bar-chart-internal.d.ts

@@ -1,14 +1,16 @@
 import { type ReactNode } from 'react';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
-import type { MultiMeterBarChartTooltipProps, MultiMeterBarSegmentProps } from './multi-meter-bar-chart.js';
+import type { MultiMeterBarChartTooltipPayload, MultiMeterBarChartTooltipProps, MultiMeterBarSegmentProps } from './multi-meter-bar-chart.js';
 import type { ColorPalette, CustomColorPalette } from '../../../core/types/color-palette.js';
 import type { ColorRuleProps } from '../../../core/types/color-rule.js';
 import type { Formatter } from '../../../core/types/formatter.js';
 import type { MeterBarToolbarInternalProps } from '../../shared/types/meter-bar-toolbar.js';
 import type { MeterBarSize, SlotWithAutoDefault } from '../../shared/types/meter-bars.js';
 /** internal */
-export interface MultiMeterBarChartInternalTooltipConfig extends MultiMeterBarChartTooltipProps {
-    enabled: boolean;
+export interface MultiMeterBarChartInternalTooltipConfig {
+    hidden?: boolean;
+    variant?: MultiMeterBarChartTooltipProps['variant'];
+    template?: (payload: MultiMeterBarChartTooltipPayload) => ReactNode;
 }
 export interface MultiMeterBarChartInternalConfig {
     segments: MultiMeterBarSegmentProps[];

package/charts/meter-bar/multi-meter-bar/types/multi-meter-bar-chart.d.ts

@@ -125,13 +125,52 @@ export declare const multiMeterBarChartTooltipVariantOptions: readonly ["single"
  * @public
  */
 export type MultiMeterBarChartTooltipVariant = (typeof multiMeterBarChartTooltipVariantOptions)[number];
+/**
+ * A single segment's data passed to the custom tooltip render function.
+ * @public
+ */
+export interface MultiMeterBarChartTooltipSegmentPayload {
+    /** Segment name */
+    name: string;
+    /** Segment percentage value */
+    value: number;
+    /** Segment color */
+    color: string;
+}
+/**
+ * The currently active segment data passed to the custom tooltip render function, extending segment data with its index position.
+ * @public
+ */
+export interface MultiMeterBarChartActiveSegmentPayload extends MultiMeterBarChartTooltipSegmentPayload {
+    /** Index position of the active segment */
+    index: number;
+}
+/**
+ * Data passed to the custom tooltip render function for MultiMeterBarChart.
+ * @public
+ */
+export interface MultiMeterBarChartTooltipPayload {
+    /** All visible segments */
+    segments: MultiMeterBarChartTooltipSegmentPayload[];
+    /** Currently hovered segment, or undefined when none is hovered */
+    activeSegment: MultiMeterBarChartActiveSegmentPayload | undefined;
+}
 /**
  * @public
  */
 export interface MultiMeterBarChartTooltipProps {
+    /**
+     * Hides the tooltip when true.
+     * @defaultValue false
+     */
+    hidden?: boolean;
     /**
      * Variant to be used for the multi meter bar chart tooltip
      * @defaultValue "single"
      */
     variant?: MultiMeterBarChartTooltipVariant;
+    /**
+     * Custom render function. When provided, replaces the default tooltip content.
+     */
+    children?: (payload: MultiMeterBarChartTooltipPayload) => ReactNode;
 }

package/charts/meter-bar/multi-meter-bar/utils/build-multi-meter-bar-chart-config.js

@@ -44,17 +44,20 @@ const getMaxValue = (totalValue, maxProperty, consumerConfigMax) => {
 };
 const isValidTooltipVariant = (tooltipVariant) => import_multi_meter_bar_chart.multiMeterBarChartTooltipVariantOptions.includes(tooltipVariant);
 const getTooltipConfig = (slots, consumerConfig) => {
-  const tooltip = (0, import_lodash_es.merge)(
+  const consumerTooltip = consumerConfig.tooltip ? {
+    ...consumerConfig.tooltip.enabled !== void 0 && {
+      hidden: !consumerConfig.tooltip.enabled
+    },
+    variant: consumerConfig.tooltip.variant
+  } : void 0;
+  const merged = (0, import_lodash_es.merge)(
     {},
     import_default.defaultConfig.tooltip,
-    consumerConfig.tooltip,
+    consumerTooltip,
     slots.tooltip
   );
-  const variant = isValidTooltipVariant(tooltip.variant) ? tooltip.variant : import_default.defaultConfig.tooltip.variant;
-  return {
-    ...tooltip,
-    variant
-  };
+  const variant = isValidTooltipVariant(merged.variant) ? merged.variant : import_default.defaultConfig.tooltip.variant;
+  return { ...merged, variant };
 };
 const buildMultiMeterBarChartConfig = (props, consumerConfig, slots) => {
   const size = props.size ?? consumerConfig.size ?? import_default.defaultConfig.size;

package/charts/meter-bar/multi-meter-bar/utils/iterate-slots.js

@@ -34,6 +34,10 @@ var import_Min = require("../slots/Min.js");
 var import_Segment = require("../slots/Segment.js");
 var import_Tooltip = require("../slots/Tooltip.js");
 var import_Value = require("../slots/Value.js");
+function handleMultiMeterTooltipSlot(child, slots) {
+  const { variant, hidden, children } = child.props;
+  slots.tooltip = { hidden: hidden ?? false, variant, template: children };
+}
 function iterateSlots(children) {
   const slots = {
     segments: [],
@@ -60,7 +64,7 @@ function iterateSlots(children) {
     } else if ((0, import_is_slot.isSlot)(child, import_Legend.Legend)) {
       slots.legend = !(child.props.hidden ?? false);
     } else if ((0, import_is_slot.isSlot)(child, import_Tooltip.Tooltip)) {
-      (0, import_slot_handlers.handleMultiMeterTooltipSlot)(child, slots);
+      handleMultiMeterTooltipSlot(child, slots);
     } else if ((0, import_is_slot.isSlot)(child, import_ColorRule.ColorRule)) {
       (0, import_slot_handlers.handleColorRuleSlot)(child, slots);
     } else if ((0, import_is_slot.isSlot)(child, import_Intent.Intent)) {