@dynatrace/strato-components 3.1.1 → 3.2.0

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

@@ -1,11 +1,16 @@
-import type { JSX, RefObject } from 'react';
+import type { JSX, ReactNode, RefObject } from 'react';
 import type { MessageDescriptor } from 'react-intl';
 import type { Store } from '../../../../core/store/store.js';
 import type { SeriesActionsTemplate } from '../../types/series-actions-template.js';
-export declare enum GeometryTypesEnum {
+import { TruncationMode } from '../text-ellipsis/ChartTextEllipsis.js';
+export declare const enum GeometryTypesEnum {
     'dot' = "dot",
+    'line' = "line",
+    'area' = "area",
+    'bar' = "bar",
     'pie' = "pie",
     'meterbar' = "meterbar",
+    'multimeterbar' = "multimeterbar",
     'treemap' = "treemap",
     'rect' = "rect",
     'honeycomb' = "honeycomb"
@@ -35,21 +40,23 @@ export type Overlay = {
     clear: () => void;
 };
 export type TooltipState = {
-    activeSeries: string | null;
+    activeSeries: SeriesName | null;
     pinned: boolean;
     inBounds: boolean;
     data: Data | NoData;
 } & Positions;
 export type TooltipStore = Store<TooltipState>;
 export type TooltipValue = string | number | Date | undefined;
+export type SeriesName = string | string[];
 export type HeaderData = [] | [TooltipValue] | [TooltipValue, TooltipValue] | TooltipValue;
-export type Geometry = 'dot' | 'pie' | 'meterbar' | 'treemap' | 'honeycomb' | 'rect';
+export type Geometry = GeometryTypesEnum;
 export type Data = {
+    metadata?: unknown;
     geometry: GeometryTypes;
     header1?: HeaderData;
     subheader?: HeaderData;
     series: {
-        name: string;
+        name: SeriesName;
         value: string | number | Date;
         color: string;
         valueUnit?: string;
@@ -58,6 +65,7 @@ export type Data = {
     }[];
 };
 export type NoData = {
+    metadata?: undefined;
     header1: undefined;
     series: undefined;
     subheader: undefined;
@@ -70,25 +78,101 @@ export interface DefaultConfig {
     valueLabel: MessageDescriptor;
     headerShowRangeDuration?: boolean;
     headerFormatStrategy?: FormatStrategy;
+    truncationMode?: TruncationMode;
+    sharedVariant?: boolean;
+    defaultActionsConfig: Map<string, {
+        field: 'seriesLabel' | 'valueLabel';
+        messageLabel?: MessageDescriptor;
+        customLabel?: string;
+    }>;
 }
 export type DefaultConfigByGeometry = Record<Geometry, DefaultConfig>;
 export type ExternalConfig = {
     seriesHeader: JSX.Element | null;
     displayHeaderDivider: boolean;
     symbolPosition: 'left' | 'right' | undefined;
+    truncationMode: TruncationMode;
+    defaultActionsConfig: DefaultConfig['defaultActionsConfig'];
 };
 export type OverlayTooltipProps = {
-    symbolPosition?: 'left' | 'right';
+    symbolAlignment?: 'left' | 'right';
+    legacyTemplate?: ReactNode;
+    /**
+     * The truncation mode to use when the text exceeds the available space.
+     * @default 'end'
+     */
+    truncation?: TruncationMode;
+};
+export type HeaderProps = {
+    /** The header text to display. */
+    text?: string;
+    /** Maximum width in pixels before truncation. If not provided, uses container width. */
+    maxWidth?: number;
+};
+export type SeriesHeaderProps = {
+    /** The series label text. */
+    seriesLabel?: string;
+    /** The value label text. */
+    valueLabel?: string;
+    /** Whether to hide the series header. */
+    disabled?: boolean;
 };
-export type FormatStrategy = (value: HeaderData) => string | null;
 type Series = Data['series'][number];
 export type SeriesItemProps = {
+    /** The series name to display. Can be a string or array of strings for multi-line display. */
     name: Series['name'];
+    /** The series value to display. */
     value: Series['value'];
-    valueUnit?: string;
+    /** The color for the series symbol. */
     color: string;
+    /** Unit to display after the value. */
+    valueUnit?: string;
+    /** Relative value to display alongside the main value. */
     relativeValue?: Series['relativeValue'];
+    /** Unit to display after the relative value. */
     relativeValueUnit?: string;
+    /** Maximum number of lines for the series name. Default is 1. */
+    maxLines?: number;
+    /** Whether to enable multi-line mode when name is provided as an array. Default is false. */
+    multiLine?: boolean;
+    /** Actions to display for the series. */
     actions?: () => SeriesActionsTemplate;
+    symbolAlignment?: 'left' | 'right';
+};
+export type FormatStrategy = (value: HeaderData) => string | null;
+export type TooltipAction = {
+    type: 'RESET_TOOLTIP';
+} | {
+    type: 'SET_PINNED';
+    payload: {
+        pinned: false;
+        relativeX?: undefined;
+        relativeY?: undefined;
+        data: NoData;
+    } | {
+        pinned: true;
+        relativeX: number;
+        relativeY: number;
+        data: Data;
+    };
+} | {
+    type: 'SET_OUT_BOUNDS';
+} | {
+    type: 'SET_POSITION';
+    payload?: Data;
+} | {
+    type: 'UPDATE_POSITION';
+    payload: {
+        type: 'resize' | 'non-resize';
+        scroll?: boolean;
+    };
+} | {
+    type: 'SET_ACTIVE_SERIES';
+    payload: {
+        activeSeries: SeriesName | null;
+    };
+} | {
+    type: 'TOOLTIP_MOUSE_LEAVE';
 };
+export type TooltipActions = TooltipAction['type'];
 export {};

package/charts/core/components/overlay-tooltip/types.js

@@ -23,8 +23,12 @@ __export(types_exports, {
 module.exports = __toCommonJS(types_exports);
 var GeometryTypesEnum = /* @__PURE__ */ ((GeometryTypesEnum2) => {
   GeometryTypesEnum2["dot"] = "dot";
+  GeometryTypesEnum2["line"] = "line";
+  GeometryTypesEnum2["area"] = "area";
+  GeometryTypesEnum2["bar"] = "bar";
   GeometryTypesEnum2["pie"] = "pie";
   GeometryTypesEnum2["meterbar"] = "meterbar";
+  GeometryTypesEnum2["multimeterbar"] = "multimeterbar";
   GeometryTypesEnum2["treemap"] = "treemap";
   GeometryTypesEnum2["rect"] = "rect";
   GeometryTypesEnum2["honeycomb"] = "honeycomb";

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

@@ -1,40 +1,5 @@
-import type { NoData, Data } from './types.js';
-type TooltipAction = {
-    type: 'RESET_TOOLTIP';
-} | {
-    type: 'SET_PINNED';
-    payload: {
-        pinned: false;
-        relativeX?: undefined;
-        relativeY?: undefined;
-        data: NoData;
-    } | {
-        pinned: true;
-        relativeX: number;
-        relativeY: number;
-        data: Data;
-    };
-} | {
-    type: 'SET_OUT_BOUNDS';
-} | {
-    type: 'SET_POSITION';
-    payload: Data;
-} | {
-    type: 'UPDATE_POSITION';
-    payload: {
-        type: 'resize' | 'non-resize';
-        scroll?: boolean;
-    };
-} | {
-    type: 'SET_ACTIVE_SERIES';
-    payload: {
-        activeSeries: string | null;
-    };
-} | {
-    type: 'TOOLTIP_MOUSE_LEAVE';
-};
+import type { TooltipAction } from './types.js';
 export declare const useTooltipReducer: () => (action: TooltipAction) => (event?: {
     clientX: number;
     clientY: number;
 }) => void;
-export {};

package/charts/core/components/overlay-tooltip/useTooltipReducer.js

@@ -22,83 +22,20 @@ __export(useTooltipReducer_exports, {
 });
 module.exports = __toCommonJS(useTooltipReducer_exports);
 var import_lodash_es = require("lodash");
+var import_react = require("react");
 var import_OverlayContext = require("./contexts/OverlayContext.js");
 var import_TooltipContext = require("./contexts/TooltipContext.js");
 var import_utils = require("./utils.js");
 const useTooltipReducer = () => {
   const store = (0, import_TooltipContext.useTooltip)();
   const overlay = (0, import_OverlayContext.useOverlay)();
-  const dispatch = (action) => (event) => {
-    switch (action.type) {
-      case "RESET_TOOLTIP":
-        overlay.clear();
-        store.setState(() => ({
-          pinned: false,
-          absoluteX: null,
-          absoluteY: null,
-          relativeX: null,
-          relativeY: null,
-          percentX: null,
-          percentY: null,
-          inBounds: false,
-          activeSeries: null,
-          data: (0, import_utils.emptyData)()
-        }));
-        break;
-      case "SET_PINNED":
-        store.setState((prevState) => {
-          prevState.inBounds || overlay.clear();
-          const { relativeX, relativeY, pinned, data } = action.payload;
-          if ((0, import_lodash_es.isNil)(relativeX) || (0, import_lodash_es.isNil)(relativeY)) {
-            return {
-              ...prevState,
-              inBounds: true,
-              pinned,
-              data
-            };
-          }
-          const positions = overlay.getAdjustedPositionsFromRelative(
-            relativeX,
-            relativeY
-          );
-          return {
-            ...prevState,
-            pinned: action.payload.pinned,
-            inBounds: true,
-            data,
-            ...positions
-          };
-        });
-        break;
-      case "SET_POSITION":
-        store.setState((prevState) => {
-          const { payload: data } = action;
-          if (prevState.pinned || !event) {
-            return prevState;
-          }
-          prevState.inBounds || overlay.clear();
-          const absoluteX = Math.round(event.clientX);
-          const absoluteY = Math.round(event.clientY);
-          const positions = overlay.getAdjustedPositionsFromAbsolute(
-            absoluteX,
-            absoluteY
-          );
-          return {
-            ...prevState,
-            inBounds: true,
-            ...positions,
-            data
-          };
-        });
-        break;
-      case "SET_OUT_BOUNDS":
-        store.setState((prevState) => {
+  const dispatch = (0, import_react.useCallback)(
+    (action) => (event) => {
+      switch (action.type) {
+        case "RESET_TOOLTIP":
           overlay.clear();
-          if (prevState.pinned) {
-            return prevState;
-          }
-          return {
-            ...prevState,
+          store.setState(() => ({
+            pinned: false,
             absoluteX: null,
             absoluteY: null,
             relativeX: null,
@@ -106,54 +43,121 @@ const useTooltipReducer = () => {
             percentX: null,
             percentY: null,
             inBounds: false,
+            activeSeries: null,
             data: (0, import_utils.emptyData)()
-          };
-        });
-        break;
-      case "UPDATE_POSITION":
-        store.setState((prevState) => {
-          overlay.clear();
-          const { pinned, percentX, percentY, relativeX, relativeY } = prevState;
-          if (!pinned || (0, import_lodash_es.isNil)(percentX) || (0, import_lodash_es.isNil)(percentY)) {
-            return prevState;
-          }
-          const positions = overlay.getAdjustedPositionsFromPercent(
-            percentX,
-            percentY,
-            ...action.payload.type === "non-resize" ? [relativeX, relativeY] : [void 0, void 0]
-          );
-          return {
-            ...prevState,
-            ...positions,
-            activeSeries: action.payload.scroll ? null : prevState.activeSeries
-          };
-        });
-        break;
-      case "SET_ACTIVE_SERIES":
-        store.setState((prevState) => {
-          if (prevState.activeSeries === action.payload.activeSeries) {
-            return prevState;
-          }
-          return {
-            ...prevState,
-            activeSeries: action.payload.activeSeries
-          };
-        });
-        break;
-      case "TOOLTIP_MOUSE_LEAVE":
-        store.setState((prevState) => {
-          if ((0, import_lodash_es.isNull)(prevState.activeSeries)) {
-            return prevState;
-          }
-          return {
-            ...prevState,
-            activeSeries: null
-          };
-        });
-        break;
-      default:
-        throw new Error("Unhandled action type");
-    }
-  };
+          }));
+          break;
+        case "SET_PINNED":
+          store.setState((prevState) => {
+            prevState.inBounds || overlay.clear();
+            const { relativeX, relativeY, pinned, data } = action.payload;
+            if ((0, import_lodash_es.isNil)(relativeX) || (0, import_lodash_es.isNil)(relativeY)) {
+              return {
+                ...prevState,
+                inBounds: true,
+                pinned,
+                data
+              };
+            }
+            const positions = overlay.getAdjustedPositionsFromRelative(
+              relativeX,
+              relativeY
+            );
+            return {
+              ...prevState,
+              pinned: action.payload.pinned,
+              inBounds: true,
+              data,
+              ...positions
+            };
+          });
+          break;
+        case "SET_POSITION":
+          store.setState((prevState) => {
+            const { payload: data } = action;
+            if (prevState.pinned || !event) {
+              return prevState;
+            }
+            prevState.inBounds || overlay.clear();
+            const absoluteX = Math.round(event.clientX);
+            const absoluteY = Math.round(event.clientY);
+            const positions = overlay.getAdjustedPositionsFromAbsolute(
+              absoluteX,
+              absoluteY
+            );
+            return {
+              ...prevState,
+              inBounds: true,
+              ...positions,
+              data: data || (0, import_utils.emptyData)()
+            };
+          });
+          break;
+        case "SET_OUT_BOUNDS":
+          store.setState((prevState) => {
+            overlay.clear();
+            if (prevState.pinned) {
+              return prevState;
+            }
+            return {
+              ...prevState,
+              absoluteX: null,
+              absoluteY: null,
+              relativeX: null,
+              relativeY: null,
+              percentX: null,
+              percentY: null,
+              inBounds: false,
+              data: (0, import_utils.emptyData)()
+            };
+          });
+          break;
+        case "UPDATE_POSITION":
+          store.setState((prevState) => {
+            overlay.clear();
+            const { pinned, percentX, percentY, relativeX, relativeY } = prevState;
+            if (!pinned || (0, import_lodash_es.isNil)(percentX) || (0, import_lodash_es.isNil)(percentY)) {
+              return prevState;
+            }
+            const positions = overlay.getAdjustedPositionsFromPercent(
+              percentX,
+              percentY,
+              ...action.payload.type === "non-resize" ? [relativeX, relativeY] : [void 0, void 0]
+            );
+            return {
+              ...prevState,
+              ...positions,
+              activeSeries: action.payload.scroll ? null : prevState.activeSeries
+            };
+          });
+          break;
+        case "SET_ACTIVE_SERIES":
+          store.setState((prevState) => {
+            if (prevState.activeSeries === action.payload.activeSeries) {
+              return prevState;
+            }
+            return {
+              ...prevState,
+              activeSeries: action.payload.activeSeries
+            };
+          });
+          break;
+        case "TOOLTIP_MOUSE_LEAVE":
+          store.setState((prevState) => {
+            if ((0, import_lodash_es.isNull)(prevState.activeSeries)) {
+              return prevState;
+            }
+            return {
+              ...prevState,
+              activeSeries: null
+            };
+          });
+          break;
+        default:
+          throw new Error("Unhandled action type");
+      }
+    },
+    [store, overlay]
+  );
   return dispatch;
 };

package/charts/core/components/overlay-tooltip/utils/build-content.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import type { DefaultConfigByGeometry, ExternalConfig } from '../types.js';
 export declare function buildContent(children: ReactNode, defaultConfig: null | DefaultConfigByGeometry[keyof DefaultConfigByGeometry], args: {
     userSymbolPosition: ExternalConfig['symbolPosition'];
+    userTruncationMode: ExternalConfig['truncationMode'];
 }): {
     content: ReactNode;
     config: ExternalConfig;

package/charts/core/components/overlay-tooltip/utils/build-content.js

@@ -22,15 +22,30 @@ __export(build_content_exports, {
 });
 module.exports = __toCommonJS(build_content_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_is_slot = require("../../../../../core/utils/is-slot.js");
 var import_Action = require("../components/global-actions/Action.js");
 var import_ActionsPlaceholder = require("../components/global-actions/ActionsPlaceholder.js");
-var import_GlobalActions = require("../components/global-actions/GlobalActions.js");
 var import_Header = require("../components/header/Header.js");
 var import_Series = require("../components/series/Series.js");
 var import_SeriesHeader = require("../components/series/SeriesHeader.js");
 var import_SeriesItem = require("../components/series/SeriesItem.js");
+var import_TooltipFooter = require("../components/TooltipFooter.js");
+var import_constants = require("../constants.js");
+const VALID_TRUNCATION_MODES = ["start", "middle", "end"];
+const isValidTruncationMode = (value) => {
+  return typeof value === "string" && VALID_TRUNCATION_MODES.includes(value);
+};
+const getTruncationMode = (userTruncationMode, defaultConfigTruncationMode) => {
+  if (isValidTruncationMode(userTruncationMode)) {
+    return userTruncationMode;
+  }
+  if (isValidTruncationMode(defaultConfigTruncationMode)) {
+    return defaultConfigTruncationMode;
+  }
+  return import_constants.DEFAULT_TRUNCATION_MODE;
+};
 function buildContent(children, defaultConfig, args) {
   const slots = {
     Header: null,
@@ -40,41 +55,63 @@ function buildContent(children, defaultConfig, args) {
     ActionsPlaceholder: null,
     GlobalActions: []
   };
-  let globalActionsUnpinnedMessage;
+  let unpinnedPlaceholderText;
+  let defaultActionsConfig = defaultConfig?.defaultActionsConfig;
   import_react.Children.forEach(children, (child) => {
     if ((0, import_is_slot.isSlot)(child, import_Header.Header)) {
       slots.Header = child;
     } else if ((0, import_is_slot.isSlot)(child, import_SeriesHeader.SeriesHeader)) {
       slots.SeriesHeader = child;
+      defaultActionsConfig = (0, import_lodash_es.clone)(
+        defaultConfig?.defaultActionsConfig
+      );
+      const defaultNameAction = defaultActionsConfig?.get("name");
+      if (child.props.seriesLabel && defaultNameAction) {
+        defaultActionsConfig?.set("name", {
+          ...defaultNameAction,
+          customLabel: child.props.seriesLabel
+        });
+      }
+      const defaultValueAction = defaultActionsConfig?.get("value");
+      if (child.props.valueLabel && defaultValueAction) {
+        defaultActionsConfig?.set("value", {
+          ...defaultValueAction,
+          customLabel: child.props.valueLabel
+        });
+      }
     } else if ((0, import_is_slot.isSlot)(child, import_Series.Series)) {
       slots.Series = child;
     } else if ((0, import_is_slot.isSlot)(child, import_SeriesItem.SeriesItem)) {
       slots.SeriesItem = child;
     } else if ((0, import_is_slot.isSlot)(child, import_ActionsPlaceholder.ActionsPlaceholder)) {
-      globalActionsUnpinnedMessage = child.props.text;
+      unpinnedPlaceholderText = child.props.text;
     } else if ((0, import_is_slot.isSlot)(child, import_Action.Action)) {
       slots.GlobalActions.push(child);
     }
   });
-  const hasGlobalActions = slots.GlobalActions.length > 0 || slots.ActionsPlaceholder !== null;
   return {
     content: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.Header }, "header"),
       slots.SeriesItem ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.SeriesHeader || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesHeader.SeriesHeader, {}) }, "seriesHeader") : null,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: slots.Series || slots.SeriesItem }, "series"),
-      hasGlobalActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_GlobalActions.GlobalActions,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_TooltipFooter.TooltipFooter,
         {
           actions: slots.GlobalActions,
-          globalActionsUnpinnedMessage
+          unpinnedPlaceholderText
         },
-        "globalActions"
-      ) : null
+        "footer"
+      )
     ],
     config: {
       seriesHeader: slots.SeriesHeader || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SeriesHeader.SeriesHeader, {}),
       displayHeaderDivider: !!(slots.Header && (slots.Series || slots.SeriesItem)),
-      symbolPosition: args.userSymbolPosition || defaultConfig?.symbolPosition || "left"
+      symbolPosition: args.userSymbolPosition || defaultConfig?.symbolPosition || "left",
+      truncationMode: getTruncationMode(
+        args.userTruncationMode,
+        defaultConfig?.truncationMode
+      ),
+      defaultActionsConfig
     }
   };
 }

package/charts/core/components/overlay-tooltip/utils/estimate-series-item-size.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Estimates the size (height) of a series item for virtualization
+ * @param item - The series item data
+ * @param maxContainerWidth - Maximum container width available
+ * @returns Estimated height in pixels
+ */
+export declare const estimateSeriesItemSize: (item: Record<string, unknown>, maxContainerWidth: number) => number;

package/charts/core/components/overlay-tooltip/utils/estimate-series-item-size.js

@@ -0,0 +1,46 @@
+"use strict";
+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 estimate_series_item_size_exports = {};
+__export(estimate_series_item_size_exports, {
+  estimateSeriesItemSize: () => estimateSeriesItemSize
+});
+module.exports = __toCommonJS(estimate_series_item_size_exports);
+var import_chars_font_width_map = require("../../text-ellipsis/chars-font-width-map.js");
+var import_truncate_string = require("../../text-ellipsis/truncate-string.js");
+var import_constants = require("../constants.js");
+const estimateSeriesItemSize = (item, maxContainerWidth) => {
+  const baseHeight = 24;
+  const multiLine = "multiLine" in item ? item.multiLine : false;
+  const maxLines = "maxLines" in item ? item.maxLines : import_constants.DEFAULT_SERIES_NAME_LINES;
+  let lineCount = 1;
+  if (Array.isArray(item.name)) {
+    lineCount = item.name.length;
+  } else if (typeof item.name === "string" && multiLine) {
+    const actualContainerWidth = Math.max(maxContainerWidth, import_constants.MIN_TOOLTIP_WIDTH);
+    const containerWidth = actualContainerWidth - (import_constants.SYMBOL_AND_SPACING_WIDTH + import_constants.TOOLTIP_WRAPPER_PADDING);
+    const textWidth = (0, import_truncate_string.calculateWidth)(
+      item.name,
+      import_chars_font_width_map.charsFontWidth12pixelsSize400Map
+    );
+    if (textWidth > containerWidth) {
+      lineCount = Math.min(Math.ceil(textWidth / containerWidth), maxLines);
+    }
+  }
+  return baseHeight + (lineCount - 1) * 16;
+};

package/charts/core/components/overlay-tooltip/utils/get-copy-action.d.ts

@@ -0,0 +1 @@
+export declare const getDefaultAction: <A extends string>(item: Record<A, unknown>, accessor: A, message: string) => import("react/jsx-runtime.js").JSX.Element;