@dynatrace/strato-components 3.4.0 → 3.5.0

package/charts/core/components/overlay-tooltip/components/header/Header.js

@@ -33,12 +33,9 @@ module.exports = __toCommonJS(Header_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_dynamic = require("@vanilla-extract/dynamic");
 var import_clsx = __toESM(require("clsx"));
-var import_lodash_es = require("lodash");
 var import_Header_css = require("./Header.sty.js");
-var import_type_guards = require("./types/type-guards.js");
-var import_get_duration_content = require("./utils/get-duration-content.js");
 var import_get_show_range_duration = require("./utils/get-show-range-duration.js");
-var import_get_shown_header_text = require("./utils/get-shown-header-text.js");
+var import_type_guards = require("./utils/type-guards.js");
 var import_value_formatters = require("./utils/value-formatters.js");
 var import_Divider = require("../../../../../../layouts/divider/Divider.js");
 var import_Tooltip = require("../../../../../../overlays/tooltip/Tooltip.js");
@@ -48,26 +45,21 @@ var import_TooltipDimensionsContext = require("../../contexts/TooltipDimensionsC
 var import_useDefaultConfig = require("../../hooks/useDefaultConfig.js");
 var import_useDefaultLabels = require("../../hooks/useDefaultLabels.js");
 var import_tooltip_css = require("../../tooltip.sty.js");
-var import_text_truncation_header = require("../../utils/text-truncation-header.js");
-var import_width_calculation = require("../../utils/width-calculation.js");
-const getValue = (data) => {
-  if (data === void 0) {
-    return void 0;
-  }
-  if ((0, import_type_guards.isSingleValue)(data)) {
-    return (0, import_lodash_es.isArray)(data) ? data[0] : data;
-  } else if ((0, import_type_guards.isFromTo)(data)) {
-    return data;
-  }
-};
-const getNonGeometryHeader = (value) => {
-  if ((0, import_type_guards.isNonEmptyRange)(value)) {
-    return import_value_formatters.formatValueRange;
-  }
-  return import_value_formatters.defaultLabelFormatterStrategy;
-};
+var import_compute_header_display = require("./utils/compute-header-display.js");
+var import_compute_subheader_display = require("./utils/compute-subheader-display.js");
+var import_get_non_geometry_header = require("./utils/get-non-geometry-header.js");
 const Header = (props) => {
-  const { header1, subheader, label, maxLines, duration } = props;
+  const {
+    header1,
+    header2,
+    subheader,
+    label,
+    label2,
+    maxLines,
+    duration1,
+    duration2,
+    showRangeDuration2
+  } = props;
   const labelFor = (0, import_useDefaultLabels.useDefaultLabels)();
   const defaultConfig = (0, import_useDefaultConfig.useDefaultConfig)();
   const defaultStrategy = defaultConfig?.headerFormatStrategy ?? import_value_formatters.defaultLabelFormatterStrategy;
@@ -79,38 +71,65 @@ const Header = (props) => {
   );
   const isSingleLine = showedLines === 1;
   const isTruncationEnd = truncationMode === "end";
-  const showRangeDuration = (0, import_get_show_range_duration.getShowRangeDuration)(
+  const showRangeDuration1 = (0, import_get_show_range_duration.getShowRangeDuration)(
     defaultConfig,
-    props.showRangeDuration
+    props.showRangeDuration1
   );
-  const value = getValue(header1);
-  const subheaderValue = getValue(subheader);
-  const formatStrategy = defaultStrategy ?? getNonGeometryHeader(header1);
-  const formattedValue = formatStrategy(value);
-  const headerLabel = labelFor?.("headerLabel", label);
-  const headerContent = headerLabel ? `${headerLabel}: ${formattedValue}` : formattedValue ?? "";
-  if (((0, import_lodash_es.isNil)(header1) || (0, import_lodash_es.isEmpty)(header1)) && ((0, import_lodash_es.isNil)(subheader) || (0, import_lodash_es.isEmpty)(subheader))) {
+  const computedShowDuration2 = showRangeDuration2 ?? false;
+  const formatStrategy = defaultStrategy ?? (0, import_get_non_geometry_header.getNonGeometryHeader)(header1);
+  const header2FormatStrategy = (0, import_get_non_geometry_header.getNonGeometryHeader)(header2);
+  const availableWidth = containerWidth - import_constants.TOOLTIP_WRAPPER_PADDING * 2;
+  if ((0, import_type_guards.isHeaderEmpty)(header1, header2, subheader)) {
     return null;
   }
-  const availableWidth = containerWidth - import_constants.TOOLTIP_HEADER_PADDING * 2;
-  const totalTextWidth = (0, import_width_calculation.calculateTotalWidth500)(headerContent ?? "");
-  const shownText = (0, import_get_shown_header_text.getShownHeaderText)(
-    headerContent,
+  const sharedDisplayParams = {
+    labelFor,
     isSingleLine,
     isTruncationEnd,
     availableWidth,
     showedLines,
+    truncationMode,
+    showRangeDuration: showRangeDuration1
+  };
+  const {
+    content: headerContent,
+    totalTextWidth,
+    shownText,
+    isTruncated,
+    durationContent,
+    durationSuffix
+  } = (0, import_compute_header_display.computeHeaderDisplay)({
+    header: header1,
+    label,
+    duration: duration1,
+    formatStrategy,
+    ...sharedDisplayParams
+  });
+  const {
+    content: header2Content,
+    totalTextWidth: header2TotalTextWidth,
+    shownText: shownHeader2Text,
+    isTruncated: isHeader2Truncated,
+    durationContent: duration2Content,
+    durationSuffix: duration2Suffix
+  } = (0, import_compute_header_display.computeHeaderDisplay)({
+    header: header2,
+    label: label2,
+    duration: duration2,
+    formatStrategy: header2FormatStrategy,
+    ...sharedDisplayParams,
+    showRangeDuration: computedShowDuration2
+  });
+  const { subheaderContent, shownSubheaderText, isSubheaderTruncated } = (0, import_compute_subheader_display.computeSubheaderDisplay)({
+    subheader,
+    formatStrategy,
+    availableWidth,
     truncationMode
-  );
-  const isMultiLineCssClamped = !isSingleLine && isTruncationEnd && Math.ceil(totalTextWidth / availableWidth) > showedLines;
-  const isTruncated = isMultiLineCssClamped || shownText !== headerContent;
-  const subheaderContent = subheaderValue ? formatStrategy(subheaderValue) : void 0;
-  const durationContent = duration ?? (0, import_get_duration_content.getDurationContent)(showRangeDuration, header1);
-  const shownSubheaderText = subheaderContent ? (0, import_text_truncation_header.getHeaderTruncatedText)(subheaderContent, availableWidth, truncationMode) : void 0;
-  const isSubheaderTruncated = subheaderContent ? shownSubheaderText !== subheaderContent : false;
+  });
   const headerClassName = !isSingleLine && isTruncationEnd ? (0, import_clsx.default)(import_Header_css.headerText, import_Header_css.headerTextMultiLine) : import_Header_css.headerText;
-  const shouldConstrainWidth = totalTextWidth > availableWidth;
+  const shouldConstrainWidth = totalTextWidth > availableWidth || header2TotalTextWidth > availableWidth;
   const headerContainerStyle = shouldConstrainWidth ? (0, import_dynamic.assignInlineVars)({ [import_Header_css.headerWidthVar]: `${availableWidth}px` }) : {};
+  const isHeader2Unique = header2Content + duration2Suffix !== headerContent + durationSuffix;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: import_Header_css.headerContainer, style: headerContainerStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: headerContent, disabled: !isTruncated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -120,10 +139,23 @@ const Header = (props) => {
           style: (0, import_dynamic.assignInlineVars)({ [import_Header_css.maxLinesVar]: String(showedLines) }),
           children: [
             shownText,
-            durationContent && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_Header_css.headerSubText, children: ` (${durationContent})` })
+            durationContent && durationContent !== "0" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_Header_css.headerSubText, children: durationSuffix })
           ]
         }
       ) }),
+      shownHeader2Text && isHeader2Unique && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: header2Content, disabled: !isHeader2Truncated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "p",
+        {
+          className: headerClassName,
+          style: (0, import_dynamic.assignInlineVars)({
+            [import_Header_css.maxLinesVar]: String(showedLines)
+          }),
+          children: [
+            shownHeader2Text,
+            duration2Content && duration2Content !== "0" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: import_Header_css.headerSubText, children: duration2Suffix })
+          ]
+        }
+      ) }) }),
       shownSubheaderText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tooltip.Tooltip, { text: subheaderContent, disabled: !isSubheaderTruncated, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: import_Header_css.headerSubText, children: shownSubheaderText }) }) })
     ] }),
     displayHeaderDivider && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "horizontal", className: import_tooltip_css.divider }, "divider")

package/charts/core/components/overlay-tooltip/components/header/Header.sty.js

@@ -26,9 +26,9 @@ __export(Header_css_exports, {
 });
 module.exports = __toCommonJS(Header_css_exports);
 var import_Header_css_ts_vanilla = require("./Header.css");
-var headerContainer = "_1ldhlar2-3-4-0";
-var headerSubText = "_1ldhlar5-3-4-0";
-var headerText = "_1ldhlar3-3-4-0";
-var headerTextMultiLine = "_1ldhlar4-3-4-0";
-var headerWidthVar = "var(--_1ldhlar1-3-4-0)";
-var maxLinesVar = "var(--_1ldhlar0-3-4-0)";
+var headerContainer = "_1ldhlar2-3-5-0";
+var headerSubText = "_1ldhlar5-3-5-0";
+var headerText = "_1ldhlar3-3-5-0";
+var headerTextMultiLine = "_1ldhlar4-3-5-0";
+var headerWidthVar = "var(--_1ldhlar1-3-5-0)";
+var maxLinesVar = "var(--_1ldhlar0-3-5-0)";

package/charts/core/components/overlay-tooltip/components/header/types/header.d.ts

@@ -1,15 +1,48 @@
-import type { HeaderData } from '../../../types.js';
-/** @internal */
+import type { HeaderData, TooltipValue } from '../../../types.js';
+/**
+ * Primary header data for the tooltip, containing the main value and an optional subheader.
+ * @internal
+ */
 export interface HeaderDataInformation {
+    /** The primary value displayed in the tooltip header row. */
     header1?: HeaderData;
+    header2?: HeaderData;
     subheader?: HeaderData;
 }
-/** @internal */
+/**
+ * Extended header data that additionally supports a duration display and label override.
+ * @internal
+ */
 export interface HeaderDataWithDuration extends HeaderDataInformation {
-    showRangeDuration?: boolean;
+    /** When `true`, renders the elapsed duration between the header range values. */
+    showRangeDuration1?: boolean;
+    /**
+     * Controls whether duration should be computed and displayed for header2.
+     * When true and header2 is a range, the computed duration (e.g., "10" for [5, 15])
+     * will be shown in parentheses after the header2 text.
+     * @defaultValue false
+     */
+    showRangeDuration2?: boolean;
+    /** Optional label text shown above the header value. */
     label?: string;
+    /**
+     * Label to prepend to header2 content when formatting.
+     * Formatted as "label: value" (e.g., "Y Axis: 20").
+     */
+    label2?: string;
+    /** Maximum number of lines before the header text is truncated. */
     maxLines?: number;
-    duration?: string;
+    /** Preformatted duration string to display instead of the computed range duration. */
+    duration1?: string;
+    /**
+     * Explicit duration string to display for header2.
+     * Shown in parentheses (e.g., "(10min)").
+     */
+    duration2?: string;
 }
-/**  @internal  */
+/**
+ * Props for the `ChartTooltip.Header` slot, controlling the tooltip header content.
+ * @internal
+ */
 export type HeaderProps = HeaderDataWithDuration;
+export type HeaderValueFormatter = (value: TooltipValue | [TooltipValue, TooltipValue] | undefined) => string | undefined;

package/charts/core/components/overlay-tooltip/components/header/utils/compute-header-display.d.ts

@@ -0,0 +1,24 @@
+import type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';
+import { useDefaultLabels } from '../../../hooks/useDefaultLabels.js';
+import { HeaderData } from '../../../types.js';
+import { HeaderValueFormatter } from '../types/header.js';
+export declare const computeHeaderDisplay: ({ header, label, duration, formatStrategy, labelFor, isSingleLine, isTruncationEnd, availableWidth, showedLines, truncationMode, showRangeDuration, }: {
+    header: HeaderData | undefined;
+    label: string | undefined;
+    duration: string | undefined;
+    formatStrategy: HeaderValueFormatter;
+    labelFor: ReturnType<typeof useDefaultLabels>;
+    isSingleLine: boolean;
+    isTruncationEnd: boolean;
+    availableWidth: number;
+    showedLines: number;
+    truncationMode: TruncationMode;
+    showRangeDuration: boolean;
+}) => {
+    content: string;
+    totalTextWidth: number;
+    shownText: string;
+    isTruncated: boolean;
+    durationContent: string | number | null | undefined;
+    durationSuffix: string;
+};

package/charts/core/components/overlay-tooltip/components/header/utils/compute-header-display.js

@@ -0,0 +1,73 @@
+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 compute_header_display_exports = {};
+__export(compute_header_display_exports, {
+  computeHeaderDisplay: () => computeHeaderDisplay
+});
+module.exports = __toCommonJS(compute_header_display_exports);
+var import_get_duration_content = require("./get-duration-content.js");
+var import_get_shown_header_text = require("./get-shown-header-text.js");
+var import_get_value = require("./get-value.js");
+var import_width_calculation = require("../../../utils/width-calculation.js");
+const buildContent = (formattedValue, headerLabel) => {
+  if (!formattedValue) {
+    return "";
+  }
+  return headerLabel ? `${headerLabel}: ${formattedValue}` : formattedValue;
+};
+const computeHeaderDisplay = ({
+  header,
+  label,
+  duration,
+  formatStrategy,
+  labelFor,
+  isSingleLine,
+  isTruncationEnd,
+  availableWidth,
+  showedLines,
+  truncationMode,
+  showRangeDuration
+}) => {
+  const value = (0, import_get_value.getValue)(header);
+  const formattedValue = formatStrategy(value);
+  const headerLabel = labelFor?.("headerLabel", label);
+  const content = buildContent(formattedValue, headerLabel);
+  const totalTextWidth = (0, import_width_calculation.calculateTotalWidth500)(content);
+  const durationContent = duration ?? (0, import_get_duration_content.getDurationContent)(showRangeDuration, header);
+  const durationSuffix = durationContent ? ` (${durationContent})` : "";
+  const durationSuffixWidth = durationSuffix ? (0, import_width_calculation.calculateTotalWidth500)(durationSuffix) : 0;
+  const isJsTruncation = isSingleLine || !isTruncationEnd;
+  const effectiveWidth = isJsTruncation && durationSuffixWidth > 0 ? availableWidth - durationSuffixWidth : availableWidth;
+  const shownText = (0, import_get_shown_header_text.getShownHeaderText)(
+    content,
+    isSingleLine,
+    isTruncationEnd,
+    effectiveWidth,
+    showedLines,
+    truncationMode
+  );
+  const isMultiLineCssClamped = !isSingleLine && isTruncationEnd && Math.ceil((totalTextWidth + durationSuffixWidth) / availableWidth) > showedLines;
+  return {
+    content,
+    totalTextWidth,
+    shownText,
+    isTruncated: isMultiLineCssClamped || shownText !== content,
+    durationContent,
+    durationSuffix
+  };
+};

package/charts/core/components/overlay-tooltip/components/header/utils/compute-subheader-display.d.ts

@@ -0,0 +1,13 @@
+import type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';
+import { HeaderData } from '../../../types.js';
+import { HeaderValueFormatter } from '../types/header.js';
+export declare const computeSubheaderDisplay: ({ subheader, formatStrategy, availableWidth, truncationMode, }: {
+    subheader: HeaderData | undefined;
+    formatStrategy: HeaderValueFormatter;
+    availableWidth: number;
+    truncationMode: TruncationMode;
+}) => {
+    subheaderContent: string | undefined;
+    shownSubheaderText: string | undefined;
+    isSubheaderTruncated: boolean;
+};

package/charts/core/components/overlay-tooltip/components/header/utils/compute-subheader-display.js

@@ -0,0 +1,39 @@
+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 compute_subheader_display_exports = {};
+__export(compute_subheader_display_exports, {
+  computeSubheaderDisplay: () => computeSubheaderDisplay
+});
+module.exports = __toCommonJS(compute_subheader_display_exports);
+var import_get_value = require("./get-value.js");
+var import_text_truncation_header = require("../../../utils/text-truncation-header.js");
+const computeSubheaderDisplay = ({
+  subheader,
+  formatStrategy,
+  availableWidth,
+  truncationMode
+}) => {
+  const subheaderValue = (0, import_get_value.getValue)(subheader);
+  const subheaderContent = subheaderValue ? formatStrategy(subheaderValue) : void 0;
+  const shownSubheaderText = subheaderContent ? (0, import_text_truncation_header.getHeaderTruncatedText)(subheaderContent, availableWidth, truncationMode) : void 0;
+  return {
+    subheaderContent,
+    shownSubheaderText,
+    isSubheaderTruncated: !!subheaderContent && shownSubheaderText !== subheaderContent
+  };
+};

package/charts/core/components/overlay-tooltip/components/header/utils/format-date-range.js

@@ -40,6 +40,16 @@ const formatRange = (from, to, prefix) => {
 const formatTimeRange = (from, to) => {
   return formatRange((0, import_format_date_ticks.formatDateTicks)(from), (0, import_format_date_ticks.formatDateTicks)(to));
 };
+const formatMinuteRange = (from, to) => {
+  const commonDate = (0, import_units.formatDate)(from, {
+    month: "short",
+    day: "2-digit",
+    year: "numeric"
+  });
+  const fromTime = (0, import_units.formatDate)(from, { hour: "2-digit", minute: "2-digit" });
+  const toTime = (0, import_units.formatDate)(to, { hour: "2-digit", minute: "2-digit" });
+  return formatRange(fromTime, toTime, commonDate);
+};
 const formatHourRange = (from, to) => {
   const commonDay = (0, import_units.formatDate)(from, {
     day: "2-digit",
@@ -70,8 +80,7 @@ const formatDateRange = (from, to) => {
     return formatTimeRange(from, to);
   }
   if ((0, import_date_fns.isSameHour)(from, to)) {
-    const weekday = (0, import_format_dates.formatWeekday)(from.getDay());
-    return formatRange((0, import_format_date_ticks.formatDateTicks)(from), (0, import_format_date_ticks.formatDateTicks)(to), weekday);
+    return formatMinuteRange(from, to);
   }
   if ((0, import_date_fns.isSameDay)(from, to)) {
     return formatHourRange(from, to);

package/charts/core/components/overlay-tooltip/components/header/utils/format-value.js

@@ -20,8 +20,8 @@ __export(format_value_exports, {
   dotFormatterStrategy: () => dotFormatterStrategy
 });
 module.exports = __toCommonJS(format_value_exports);
+var import_type_guards = require("./type-guards.js");
 var import_value_formatters = require("./value-formatters.js");
-var import_type_guards = require("../types/type-guards.js");
 const dotFormatterStrategy = (value) => {
   if ((0, import_type_guards.isNonEmptyRange)(value)) {
     return (0, import_value_formatters.formatValueRange)(value);

package/charts/core/components/overlay-tooltip/components/header/utils/get-duration-content.js

@@ -20,8 +20,8 @@ __export(get_duration_content_exports, {
   getDurationContent: () => getDurationContent
 });
 module.exports = __toCommonJS(get_duration_content_exports);
+var import_type_guards = require("./type-guards.js");
 var import_resolution_formatter = require("../../../../tooltip/utils/resolution-formatter.js");
-var import_type_guards = require("../types/type-guards.js");
 const DISPLAY_UNITS_LIMIT = 3;
 const getDurationContent = (showRangeDuration, value) => {
   if (!showRangeDuration) {

package/charts/core/components/overlay-tooltip/components/header/utils/get-non-geometry-header.d.ts

@@ -0,0 +1,3 @@
+import type { HeaderData } from '../../../types.js';
+import type { HeaderValueFormatter } from '../types/header.js';
+export declare const getNonGeometryHeader: (value: HeaderData) => HeaderValueFormatter;

package/charts/core/components/overlay-tooltip/components/header/utils/get-non-geometry-header.js

@@ -0,0 +1,30 @@
+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 get_non_geometry_header_exports = {};
+__export(get_non_geometry_header_exports, {
+  getNonGeometryHeader: () => getNonGeometryHeader
+});
+module.exports = __toCommonJS(get_non_geometry_header_exports);
+var import_type_guards = require("./type-guards.js");
+var import_value_formatters = require("./value-formatters.js");
+const getNonGeometryHeader = (value) => {
+  if ((0, import_type_guards.isNonEmptyRange)(value)) {
+    return import_value_formatters.formatValueRange;
+  }
+  return import_value_formatters.defaultLabelFormatterStrategy;
+};

package/charts/core/components/overlay-tooltip/components/header/utils/get-show-range-duration.d.ts

@@ -1,3 +1,3 @@
 import type { DefaultConfigByGeometry } from '../../../types.js';
 import type { HeaderProps } from '../types/header.js';
-export declare const getShowRangeDuration: (defaultConfig: DefaultConfigByGeometry[keyof DefaultConfigByGeometry] | null, showRangeDuration: HeaderProps["showRangeDuration"]) => boolean;
+export declare const getShowRangeDuration: (defaultConfig: DefaultConfigByGeometry[keyof DefaultConfigByGeometry] | null, showRangeDuration: HeaderProps["showRangeDuration1"]) => boolean;

package/charts/core/components/overlay-tooltip/components/header/utils/get-shown-header-text.d.ts

@@ -1,2 +1,2 @@
-import { TruncationMode } from '../../../../text-ellipsis/ChartTextEllipsis.js';
+import type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';
 export declare const getShownHeaderText: (headerContent: string, isSingleLine: boolean, isTruncationEnd: boolean, availableWidth: number, showedLines: number, truncationMode: TruncationMode) => string;

package/charts/core/components/overlay-tooltip/components/header/utils/get-value.d.ts

@@ -0,0 +1,2 @@
+import type { HeaderData, TooltipValue } from '../../../types.js';
+export declare const getValue: (data?: HeaderData) => TooltipValue | [TooltipValue, TooltipValue] | undefined;

package/charts/core/components/overlay-tooltip/components/header/utils/get-value.js

@@ -0,0 +1,34 @@
+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 get_value_exports = {};
+__export(get_value_exports, {
+  getValue: () => getValue
+});
+module.exports = __toCommonJS(get_value_exports);
+var import_lodash_es = require("lodash");
+var import_type_guards = require("./type-guards.js");
+const getValue = (data) => {
+  if ((0, import_lodash_es.isUndefined)(data)) {
+    return void 0;
+  }
+  if ((0, import_type_guards.isSingleValue)(data)) {
+    return (0, import_lodash_es.isArray)(data) ? data[0] : data;
+  } else if ((0, import_type_guards.isFromTo)(data)) {
+    return data;
+  }
+};

package/charts/core/components/overlay-tooltip/components/header/{types → utils}/type-guards.d.ts

@@ -6,4 +6,5 @@ export declare const isStringRange: (data: HeaderData) => data is [string, strin
 export declare const isNonEmptyRange: (data: HeaderData) => data is [DefinedTooltipData, DefinedTooltipData];
 export declare const isFromTo: (data: HeaderData) => data is [TooltipValue, TooltipValue];
 export declare const isSingleValue: (data: HeaderData) => data is TooltipValue | [TooltipValue];
+export declare const isHeaderEmpty: (header1: HeaderData | undefined, header2: HeaderData | undefined, subheader: HeaderData | undefined) => boolean;
 export {};

package/charts/core/components/overlay-tooltip/components/header/{types → utils}/type-guards.js

@@ -19,6 +19,7 @@ var type_guards_exports = {};
 __export(type_guards_exports, {
   isDateRange: () => isDateRange,
   isFromTo: () => isFromTo,
+  isHeaderEmpty: () => isHeaderEmpty,
   isNonEmptyRange: () => isNonEmptyRange,
   isNumericRange: () => isNumericRange,
   isSingleValue: () => isSingleValue,
@@ -36,9 +37,10 @@ const isStringRange = (data) => {
   return data instanceof Array && data.length === 2 && data.every((item) => typeof item === "string");
 };
 const isNonEmptyRange = (data) => {
-  return data instanceof Array && data.length === 2 && data.every((item) => !(0, import_lodash_es.isUndefined)(item));
+  return data instanceof Array && data.length === 2 && data.every((item) => !(0, import_lodash_es.isNil)(item));
 };
 const isFromTo = (data) => {
   return data instanceof Array && data.length === 2 && data.every((item) => !(0, import_lodash_es.isNil)(item));
 };
 const isSingleValue = (data) => data instanceof Array && data.length === 1 && !(0, import_lodash_es.isNil)(data[0]) || !(data instanceof Array) && !(0, import_lodash_es.isNil)(data);
+const isHeaderEmpty = (header1, header2, subheader) => ((0, import_lodash_es.isNil)(header1) || (0, import_lodash_es.isEmpty)(header1)) && ((0, import_lodash_es.isNil)(header2) || (0, import_lodash_es.isEmpty)(header2)) && ((0, import_lodash_es.isNil)(subheader) || (0, import_lodash_es.isEmpty)(subheader));

package/charts/core/components/overlay-tooltip/components/header/utils/value-formatters.js

@@ -25,7 +25,7 @@ __export(value_formatters_exports, {
 module.exports = __toCommonJS(value_formatters_exports);
 var import_lodash_es = require("lodash");
 var import_format_date_range = require("./format-date-range.js");
-var import_type_guards = require("../types/type-guards.js");
+var import_type_guards = require("./type-guards.js");
 const getSingleValue = (value) => {
   const rawValue = Array.isArray(value) ? value[0] : value;
   return (0, import_lodash_es.isUndefined)(rawValue) ? "" : rawValue.toString();

package/charts/core/components/overlay-tooltip/components/series/SeriesItem.js

@@ -95,19 +95,19 @@ const SeriesItem = (props) => {
     return (0, import_get_copy_action.getDefaultAction)(props, accessor, message);
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
+    "button",
     {
       className: (0, import_clsx.default)(
         activeSeries === props.name && import_tooltip_css.seriesItemActive,
         import_tooltip_css.seriesItemWrapper
       ),
-      role: "none",
       onClick: handleClick,
       onPointerMove: handlePointerMove,
       onKeyDown: import_lodash_es.noop,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ChartActionsMenuAsync.ChartActionsMenuAsync,
         {
+          hasActions,
           defaultActions,
           actions: asyncActions,
           isOpen,

package/charts/core/components/overlay-tooltip/components/series/hooks/use-value-container-display-state.d.ts

@@ -1,4 +1,4 @@
-import { TruncationMode } from '../../../../text-ellipsis/ChartTextEllipsis.js';
+import type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';
 export declare const useValueContainerDisplayText: (value: string, valueUnit: string | undefined, relativeValue: string | number | undefined, relativeValueUnit: string | undefined, availableContainerWidth: number | undefined, truncationMode: TruncationMode) => {
     displayValueText: string;
     displayRelativeValueText: string | undefined;

package/charts/core/components/overlay-tooltip/components/series/seriesSymbol.css

@@ -1,4 +1,4 @@
-._1ydozsr0-3-4-0 {
+._1ydozsr0-3-5-0 {
   height: var(--dt-spacings-size-12, 12px);
   width: var(--dt-spacings-size-12, 12px);
   font-size: var(--dt-spacings-size-12, 12px);
@@ -10,7 +10,7 @@
   justify-content: center;
   flex-shrink: 0;
 }
-._1ydozsr1-3-4-0 {
+._1ydozsr1-3-5-0 {
   height: var(--dt-spacings-size-24, 24px);
   width: var(--dt-spacings-size-24, 24px);
   font-size: var(--dt-spacings-size-24, 24px);

package/charts/core/components/overlay-tooltip/components/series/seriesSymbol.sty.js

@@ -22,5 +22,5 @@ __export(seriesSymbol_css_exports, {
 });
 module.exports = __toCommonJS(seriesSymbol_css_exports);
 var import_seriesSymbol_css_ts_vanilla = require("./seriesSymbol.css");
-var customSymbol = "_1ydozsr0-3-4-0";
-var customSymbolLarge = "_1ydozsr1-3-4-0 _1ydozsr0-3-4-0";
+var customSymbol = "_1ydozsr0-3-5-0";
+var customSymbolLarge = "_1ydozsr1-3-5-0 _1ydozsr0-3-5-0";

package/charts/core/components/overlay-tooltip/components/series/utils/get-display-text.d.ts

@@ -1,4 +1,4 @@
-import { TruncationMode } from '../../../../text-ellipsis/ChartTextEllipsis.js';
+import type { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';
 /**
  * @param text - The text to display
  * @param availableWidth - Maximum available width in pixels

package/charts/core/components/overlay-tooltip/constants.d.ts

@@ -9,7 +9,6 @@ export declare const DEFAULT_TRUNCATION_MODE = "end";
 export declare const SPACE_CHARACTER_WIDTH = 4;
 export declare const GAP_BETWEEN_COLUMNS = 12;
 export declare const SYMBOL_AND_SPACING_WIDTH: number;
-export declare const OVERLAY_TOOLTIP_ELEVATION = 15;
 export declare const MIN_TOOLTIP_WIDTH = 200;
 export declare const MAX_TOOLTIP_WIDTH = 480;
 export declare const SCROLLBAR_WIDTH = 14;