@dynatrace/strato-components 3.4.1 → 3.5.2

package/charts/core/components/zoom/ZoomCursors.css

@@ -1,8 +1,8 @@
-._1idfwsm0-3-4-1 {
+._1idfwsm0-3-5-2 {
   cursor: ew-resize;
   user-select: none;
   touch-action: pan-y;
 }
-._1idfwsm1-3-4-1 {
+._1idfwsm1-3-5-2 {
   cursor: default;
 }

package/charts/core/components/zoom/ZoomCursors.sty.js

@@ -24,6 +24,6 @@ __export(ZoomCursors_css_exports, {
 module.exports = __toCommonJS(ZoomCursors_css_exports);
 var import_ZoomCursors_css_ts_vanilla = require("./ZoomCursors.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var cursorStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1idfwsm2-3-4-1", variantClassNames: { isPanEnabled: { true: "_1idfwsm0-3-4-1", false: "_1idfwsm1-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var defaultCursor = "_1idfwsm1-3-4-1";
-var resizeCursor = "_1idfwsm0-3-4-1";
+var cursorStyle = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1idfwsm2-3-5-2", variantClassNames: { isPanEnabled: { true: "_1idfwsm0-3-5-2", false: "_1idfwsm1-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var defaultCursor = "_1idfwsm1-3-5-2";
+var resizeCursor = "_1idfwsm0-3-5-2";

package/charts/core/constants.d.ts

@@ -1,4 +1,7 @@
+import type { MappedObject } from './types/helpers/mapped-object.js';
 import type { ValueRepresentation } from './types/scales.js';
+import type { ChartTooltipConfig } from './types/tooltip.js';
+import type { Orientation } from '../../core/types/orientation.js';
 /**
  * @internal
  */
@@ -121,8 +124,8 @@ export declare const CSS_DOWNLOAD_FILENAME = "data.csv";
  * @internal
  */
 export declare const LEGEND_POSITION: Readonly<Readonly<{
-    Bottom: "bottom";
     Right: "right";
+    Bottom: "bottom";
     Auto: "auto";
 }>>;
 /**
@@ -170,3 +173,8 @@ export declare const FONT_BASE = 10;
  */
 export declare const SUFFIX_RATIO = 0.66;
 export declare const LOADING_STATE_OPACITY = 40;
+export declare const ORIENTATION: MappedObject<Orientation>;
+/**
+ * @internal
+ */
+export declare const DEFAULT_CUSTOM_TOOLTIP_CONFIG: ChartTooltipConfig;

package/charts/core/constants.js

@@ -31,6 +31,7 @@ __export(constants_exports, {
   CATEGORICAL_BARS_OUTER_PADDING: () => CATEGORICAL_BARS_OUTER_PADDING,
   CSS_DOWNLOAD_FILENAME: () => CSS_DOWNLOAD_FILENAME,
   ChartOverlaysElevation: () => ChartOverlaysElevation,
+  DEFAULT_CUSTOM_TOOLTIP_CONFIG: () => DEFAULT_CUSTOM_TOOLTIP_CONFIG,
   DEFAULT_DATA_POINT_RADIUS: () => DEFAULT_DATA_POINT_RADIUS,
   DEFAULT_FILL_OPACITY: () => DEFAULT_FILL_OPACITY,
   DEFAULT_HIGHLIGHTED_OPACITY: () => DEFAULT_HIGHLIGHTED_OPACITY,
@@ -57,6 +58,7 @@ __export(constants_exports, {
   LEGEND_POSITION: () => LEGEND_POSITION,
   LOADING_STATE_OPACITY: () => LOADING_STATE_OPACITY,
   MIDDLE_BUTTON_ID: () => MIDDLE_BUTTON_ID,
+  ORIENTATION: () => ORIENTATION,
   PINCH_RELATIVE_THRESHOLD: () => PINCH_RELATIVE_THRESHOLD,
   RIGHT_BUTTON_ID: () => RIGHT_BUTTON_ID,
   SCALE_FALLBACK_COLOR: () => SCALE_FALLBACK_COLOR,
@@ -121,3 +123,10 @@ const ChartOverlaysElevation = {
 const FONT_BASE = 10;
 const SUFFIX_RATIO = 0.66;
 const LOADING_STATE_OPACITY = 40;
+const ORIENTATION = {
+  Horizontal: "horizontal",
+  Vertical: "vertical"
+};
+const DEFAULT_CUSTOM_TOOLTIP_CONFIG = {
+  hidden: false
+};

package/charts/core/hooks/useOverlayEventHandlers.js

@@ -20,7 +20,6 @@ __export(useOverlayEventHandlers_exports, {
   useOverlayEventHandlers: () => useOverlayEventHandlers
 });
 module.exports = __toCommonJS(useOverlayEventHandlers_exports);
-var import_react = require("react");
 var import_TooltipContext = require("../components/overlay-tooltip/contexts/TooltipContext.js");
 var import_useTooltipReducer = require("../components/overlay-tooltip/useTooltipReducer.js");
 var import_utils = require("../components/overlay-tooltip/utils.js");
@@ -82,24 +81,6 @@ const useOverlayEventHandlers = (overlay, options) => {
       }
     }
   };
-  const onClickOutsideOverlay = (0, import_react.useCallback)(
-    (event) => {
-      const currentPinned = tooltipStore.getState().pinned;
-      if (currentPinned && !overlayRef.current?.contains(event.target)) {
-        dispatch({
-          type: "SET_PINNED",
-          payload: { pinned: false, data: (0, import_utils.emptyData)() }
-        })();
-      }
-    },
-    [tooltipStore, overlayRef, dispatch]
-  );
-  (0, import_react.useEffect)(() => {
-    window.addEventListener("click", onClickOutsideOverlay);
-    return () => {
-      window.removeEventListener("click", onClickOutsideOverlay);
-    };
-  }, [onClickOutsideOverlay]);
   return {
     handlePointerEnter,
     handlePointerMove,

package/charts/core/hooks/usePointerAndScrollResponsiveChartBounds.d.ts

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare const usePointerAndScrollResponsiveChartBounds: (chartRef: RefObject<HTMLElement | null> | undefined, enabled: boolean) => (() => DOMRect | undefined);

package/charts/core/hooks/usePointerAndScrollResponsiveChartBounds.js

@@ -0,0 +1,58 @@
+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 usePointerAndScrollResponsiveChartBounds_exports = {};
+__export(usePointerAndScrollResponsiveChartBounds_exports, {
+  usePointerAndScrollResponsiveChartBounds: () => usePointerAndScrollResponsiveChartBounds
+});
+module.exports = __toCommonJS(usePointerAndScrollResponsiveChartBounds_exports);
+var import_react = require("react");
+var import_useThrottledCallbackOnScroll = require("./useThrottledCallbackOnScroll.js");
+var import_throttleRaf = require("../utils/throttleRaf.js");
+const usePointerAndScrollResponsiveChartBounds = (chartRef, enabled) => {
+  const getBoundingClientRect = () => () => chartRef?.current?.getBoundingClientRect();
+  const [getChartBounds, setGetChartBounds] = (0, import_react.useState)(getBoundingClientRect);
+  (0, import_useThrottledCallbackOnScroll.useThrottledCallbackOnScroll)(!enabled, () => {
+    setGetChartBounds(getBoundingClientRect);
+  });
+  const throttledPointerUpdate = (0, import_react.useMemo)(
+    () => (0, import_throttleRaf.throttleRaf)(() => {
+      setGetChartBounds(getBoundingClientRect);
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const throttledMoveUpdate = (0, import_react.useMemo)(
+    () => (0, import_throttleRaf.throttleRaf)((event) => {
+      if (!event.pressure || chartRef?.current?.contains(event.target)) {
+        return;
+      }
+      setGetChartBounds(getBoundingClientRect);
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("pointermove", throttledMoveUpdate);
+    window.addEventListener("pointerup", throttledPointerUpdate);
+    return () => {
+      window.removeEventListener("pointermove", throttledMoveUpdate);
+      window.removeEventListener("pointerup", throttledPointerUpdate);
+    };
+  }, [throttledMoveUpdate, throttledPointerUpdate]);
+  return getChartBounds;
+};

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+/**
+ * @public
+ */
+export type TooltipProps = {
+    hidden?: boolean;
+    children?: (payload: Record<string, unknown>) => ReactNode;
+};
+export declare const Tooltip: <T extends TooltipProps>(prefix: string) => {
+    (props: T): null;
+    displayName: string;
+};

package/charts/core/slots/Tooltip.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 Tooltip_exports = {};
+__export(Tooltip_exports, {
+  Tooltip: () => Tooltip
+});
+module.exports = __toCommonJS(Tooltip_exports);
+const Tooltip = (prefix) => {
+  const component = (props) => null;
+  component["displayName"] = `${prefix}.Tooltip`;
+  return component;
+};

package/charts/core/types/formatter.d.ts

@@ -8,6 +8,8 @@ import type { FormatOptions, ConvertibleUnit, Unit } from '@dynatrace-sdk/units'
 export declare function isFormatterOptions(formatter: AnyNumericFormatter | undefined): formatter is FormatOptions<Unit, ConvertibleUnit>;
 /** @public */
 export type Formatter = (value: number, unit?: string | Unit) => string;
+/** @public */
+export type CategoricalFormatter = (value: string, data: Record<string, unknown>) => string;
 /**
  * @internal
  */
@@ -22,6 +24,15 @@ export type DateTimeFormatter = (input: number | Date) => string;
  * @internal
  */
 export type TimeFrameFormatter = (from: Date, to?: Date) => string;
+/**
+ * Pre-bound categorical formatter used inside chart utilities. The original
+ * `CategoricalFormatter` is wrapped once with its associated datum so that
+ * downstream code only deals with a `(value) => string` shape, matching the
+ * other formatter types.
+ *
+ * @internal
+ */
+export type StringFormatter = (value: string) => string;
 /**
  * Custom formatter for Dates
  * @public

package/charts/core/types/tooltip.d.ts

@@ -1,4 +1,23 @@
 import type { ColorToken } from './color-palette.js';
+/**
+ * Base tooltip configuration shared across charts.
+ * @internal
+ */
+export interface ChartTooltipConfig {
+    hidden: boolean;
+}
+/**
+ * Base tooltip config props for the chart config provider.
+ * Charts can extend this to add chart-specific options.
+ * @public
+ */
+export interface ChartTooltipConfigProps {
+    /**
+     * When true, hides the tooltip entirely.
+     * @defaultValue false
+     */
+    hidden?: boolean;
+}
 /**
  * The tooltip display
  * @public

package/charts/core/typographyStyles.css

@@ -1,3 +1,3 @@
-._18u8ey50-3-4-1 {
+._18u8ey50-3-5-2 {
   font-feature-settings: 'ss01';
 }

package/charts/core/typographyStyles.sty.js

@@ -21,4 +21,4 @@ __export(typographyStyles_css_exports, {
 });
 module.exports = __toCommonJS(typographyStyles_css_exports);
 var import_typographyStyles_css_ts_vanilla = require("./typographyStyles.css");
-var replaceSlashedZero = "_18u8ey50-3-4-1";
+var replaceSlashedZero = "_18u8ey50-3-5-2";

package/charts/core/utils/formatter-by-ticks.d.ts

@@ -17,7 +17,7 @@ export declare function getDateNumericalFormattedTicks(numTicks: number, scale:
     ticks: any[];
     formattedTicks: string[];
 };
-export declare function getCategoricalTicks(scale: AxisScale | undefined): {
-    ticks: any[];
-    formattedTicks: any[];
+export declare function getCategoricalTicks(scale: AxisScale | undefined, formatLabel?: (raw: string) => string): {
+    ticks: string[];
+    formattedTicks: string[];
 };

package/charts/core/utils/formatter-by-ticks.js

@@ -57,9 +57,11 @@ function getDateNumericalFormattedTicks(numTicks, scale, unit, formatter) {
   );
   return { ticks, formattedTicks };
 }
-function getCategoricalTicks(scale) {
+function getCategoricalTicks(scale, formatLabel) {
   if (!scale) {
     return { ticks: [], formattedTicks: [] };
   }
-  return { ticks: scale.domain(), formattedTicks: scale.domain() };
+  const ticks = scale.domain();
+  const formattedTicks = formatLabel ? ticks.map(formatLabel) : ticks;
+  return { ticks, formattedTicks };
 }

package/charts/gantt-chart/GanttChartLine.css

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

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

@@ -1,4 +1,4 @@
-._mnxak30-3-4-1 {
+._mnxak30-3-5-2 {
   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-4-1";
+var svgWrapperCSS = "_mnxak30-3-5-2";

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

@@ -1,4 +1,4 @@
-._1v8s3xl0-3-4-1._1v8s3xl0-3-4-1 {
+._1v8s3xl0-3-5-2._1v8s3xl0-3-5-2 {
   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-4-1";
+var ganttChartTooltipCSS = "_1v8s3xl0-3-5-2";

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

@@ -1,4 +1,4 @@
-._ezp7cy0-3-4-1 {
+._ezp7cy0-3-5-2 {
   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-4-1";
+var layoutContainer = "_ezp7cy0-3-5-2";

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

@@ -1,22 +1,22 @@
-._18ourc20-3-4-1 {
+._18ourc20-3-5-2 {
   width: 100%;
   height: 100%;
   overflow: visible;
 }
-._18ourc21-3-4-1 {
+._18ourc21-3-5-2 {
   width: fit-content;
 }
-._18ourc22-3-4-1 {
+._18ourc22-3-5-2 {
   transform: translateX(-50%) translateY(-75%);
 }
-._18ourc23-3-4-1 {
+._18ourc23-3-5-2 {
   transform: translateX(-50%) translateY(-25%);
 }
-._18ourc24-3-4-1 {
+._18ourc24-3-5-2 {
   display: none;
 }
 @container (min-width: 100px) and (min-height: 120px) {
-  ._18ourc24-3-4-1 {
+  ._18ourc24-3-5-2 {
     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-4-1";
-var foreignObjectContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_18ourc21-3-4-1", variantClassNames: { dominantBaseline: { auto: "_18ourc22-3-4-1", hanging: "_18ourc23-3-4-1" } }, defaultVariants: { dominantBaseline: "hanging" }, compoundVariants: [] });
-var textContainer = "_18ourc24-3-4-1";
+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";

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

@@ -1,4 +1,4 @@
-._1fbjcz30-3-4-1 {
+._1fbjcz30-3-5-2 {
   display: grid;
   grid-template-columns: 1fr;
   grid-template: "valueLabel" 2fr
@@ -7,9 +7,9 @@
   width: 100%;
   height: 100%;
 }
-._1fbjcz30-3-4-1 > #value-label {
+._1fbjcz30-3-5-2 > #value-label {
   grid-area: valueLabel;
 }
-._1fbjcz30-3-4-1 > #label {
+._1fbjcz30-3-5-2 > #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-4-1";
+var labelsContainer = "_1fbjcz30-3-5-2";

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

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

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-4-1", variantClassNames: { showLoading: { true: "_l0e5zm1-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var tooltipOverlay = "_l0e5zm2-3-4-1";
-var tooltipOverlayFull = "_l0e5zm3-3-4-1";
+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";

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

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

package/charts/histogram/components/annotations-histogram/types.d.ts

@@ -1,19 +1,12 @@
-import { type ReactNode } from 'react';
 import type { IndicatorsDisplay } from '../../../core/components/annotations/components/indicators/types.js';
-import type { AnnotationsMarkerConfig, BaseMarkerProps, NumericalMarkerProps } from '../../../core/components/annotations/types/annotations-marker-props.js';
-import type { AnnotationsTrackConfig, AnnotationsTrackProps } from '../../../core/components/annotations/types/annotations-track-props.js';
+import type { BaseMarkerProps, NumericalMarkerProps } from '../../../core/components/annotations/types/annotations-marker-props.js';
+import type { AnnotationsTrackProps } from '../../../core/components/annotations/types/annotations-track-props.js';
 import type { BaseAnnotationsChartProps } from '../../../core/components/annotations/types/annotations.js';
-import type { WithId } from '../../../core/types/with-id.js';
+import type { NumericalAnnotationsMarkerConfig, NumericalAnnotationsTrackConfig } from '../../../core/components/annotations/types/numerical-annotations-config.js';
 /** @internal */
-export type HistogramAnnotationsMarkerConfig = AnnotationsMarkerConfig & HistogramAnnotationsMarkerProps & NumericalMarkerProps & {
-    indicatorsDisplay?: IndicatorsDisplay;
-};
+export type HistogramAnnotationsMarkerConfig = NumericalAnnotationsMarkerConfig;
 /** @internal */
-export type HistogramAnnotationsTrackRendererProps = AnnotationsTrackConfig & {
-    markers: WithId<HistogramAnnotationsMarkerConfig>[];
-    annotationsActions?: (annotation: HistogramAnnotationsMarkerProps) => ReactNode;
-    indicatorsDisplay?: IndicatorsDisplay;
-};
+export type HistogramAnnotationsTrackRendererProps = NumericalAnnotationsTrackConfig;
 /**
  * @internal
  */

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

@@ -1,3 +1,3 @@
-._9phcbi0-3-4-1 {
+._9phcbi0-3-5-2 {
   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-4-1";
+var axisContainerStyle = "_9phcbi0-3-5-2";

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

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

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

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

package/charts/histogram/components/overlays/HistogramSelectionArea/HistogramSelectionAreaTooltip.js

@@ -25,11 +25,10 @@ var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_useGridPlotSize = require("../../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_get_custom_context_menu_items = require("../../../../core/components/interactions-overlay/utils/get-custom-context-menu-items.js");
-var import_SelectionArea_css = require("../../../../core/components/selection-area/SelectionArea.sty.js");
+var import_OverlayTooltip = require("../../../../core/components/overlay-tooltip/OverlayTooltip.js");
 var import_SelectionTooltipWithAsyncActions = require("../../../../core/components/selection-area/SelectionTooltipWithAsyncActions.js");
 var import_get_selection_tooltip_position = require("../../../../core/components/selection-area/tooltip/get-selection-tooltip-position.js");
-var import_ChartTooltip = require("../../../../core/components/tooltip/ChartTooltip/ChartTooltip.js");
-var import_useScrollResponsiveChartBounds = require("../../../../core/hooks/useScrollResponsiveChartBounds.js");
+var import_usePointerAndScrollResponsiveChartBounds = require("../../../../core/hooks/usePointerAndScrollResponsiveChartBounds.js");
 var import_selectors = require("../../../hooks/store/selectors.js");
 var import_useHistogramChartOverlayRef = require("../../../hooks/useHistogramChartOverlayRef.js");
 var import_useHistogramFilteredData = require("../../../hooks/useHistogramFilteredData.js");
@@ -51,7 +50,10 @@ const HistogramSelectionAreaTooltip = () => {
   const { width } = (0, import_useGridPlotSize.useGridPlotSize)();
   const intl = (0, import_react_intl.useIntl)();
   const chartRef = (0, import_useHistogramChartOverlayRef.useHistogramChartOverlayRef)();
-  const chartBounds = (0, import_useScrollResponsiveChartBounds.useScrollResponsiveChartBounds)(chartRef, true)();
+  const chartBounds = (0, import_usePointerAndScrollResponsiveChartBounds.usePointerAndScrollResponsiveChartBounds)(
+    chartRef,
+    true
+  )();
   if (!selectState || !chartBounds) {
     return null;
   }
@@ -90,28 +92,23 @@ const HistogramSelectionAreaTooltip = () => {
       },
       selectFinished: selectState.finished,
       header: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ChartTooltip.ChartTooltip.RangeHeader,
+        import_OverlayTooltip.OverlayTooltip.Header,
         {
-          from,
-          to,
-          formatter,
-          className: import_SelectionArea_css.tooltipHeader
+          header1: [formatter(from), formatter(to)],
+          duration1: formatter(Math.abs(to - from)),
+          subheader: `${totalBins} bins across ${selectedSeries.length} series`
         }
       ),
-      headerSubtext: `${totalBins} bins across ${selectedSeries.length} series`,
       position: tooltipPosition,
       zoomEnabled: !!zoomX?.enabled,
       range,
       children: zoomX?.enabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_ChartTooltip.ChartTooltip.ActionItem,
+        import_OverlayTooltip.OverlayTooltip.Action,
         {
-          text: intl.formatMessage(import_tooltip_text.HISTOGRAM_MESSAGES.zoomToSelection),
+          label: intl.formatMessage(import_tooltip_text.HISTOGRAM_MESSAGES.zoomToSelection),
           icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.ZoomToSelectionIcon, {}),
-          onMouseUp: (event) => {
-            event.stopPropagation();
-            zoomToSelection();
-          },
-          shortcut: "\u23CE"
+          onSelect: zoomToSelection,
+          trailingIcon: "\u23CE"
         }
       ) : null
     }