@dynatrace/strato-components 3.7.1 → 3.8.0

package/charts/tree-map/components/TreeMapToolbar/TreeMapToolbar.js

@@ -28,11 +28,9 @@ var import_ChartToolbarRenderer = require("../../../core/components/toolbar/Char
 var import_constants = require("../../constants.js");
 var import_ToolbarContext = require("../../context/ToolbarContext.js");
 var import_TreeMapRawDataContext = require("../../context/TreeMapRawDataContext.js");
-var import_selectors = require("../../store/selectors.js");
 var import_build_and_download_csv = require("../../utils/build-and-download-csv.js");
 const TreeMapToolbar = () => {
   const toolbarConfig = (0, import_ToolbarContext.useToolbarConfig)();
-  const toolbarVisible = (0, import_selectors.useTreeMapToolbarVisibleState)();
   const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
   const toolbarPlacement = toolbarConfig?.placement ?? import_constants.DEFAULT_TOOLBAR_PLACEMENT;
   const handleMouseEnter = () => {
@@ -50,17 +48,17 @@ const TreeMapToolbar = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartToolbarRenderer.ChartToolbarRenderer,
     {
-      visible: toolbarVisible,
       placement: toolbarPlacement,
       collapsed: toolbarConfig?.collapsed,
-      draggable: true,
       initialA11yState,
       onMouseEnter: handleMouseEnter,
       menuDisplayMode: "never",
       isDownloadEnabled: showMenuToolbarButton,
       intents: toolbarConfig?.intents,
       handleDownloadDataToolbar,
+      draggable: true,
       removeDragHandle: true,
+      visibleWhenMouseInBounds: true,
       ...behaviorTrackingProps,
       children: showDefaultToolbarDownloadButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TreeMapDownloadDataButton.TreeMapDownloadDataButton, {})
     }

package/charts/tree-map/components/canvas/TreeMapSquareRenderer.js

@@ -25,11 +25,11 @@ var import_useCanvas = require("../../../core/components/canvas/hooks/useCanvas.
 var import_canvas_color = require("../../../core/components/canvas/utils/canvas-color.js");
 var import_color_contrast = require("../../../core/utils/color-contrast.js");
 var import_get_font_details = require("../../../core/utils/get-font-details.js");
+var import_text_measure = require("../../../core/utils/text-measure.js");
 var import_constants = require("../../constants.js");
 var import_TextSizeContext = require("../../context/TextSizeContext.js");
 var import_useTruncationMode = require("../../hooks/useTruncationMode.js");
 var import_build_labels = require("../../utils/build-labels.js");
-var import_text_measure = require("../../utils/text-measure.js");
 function TreeMapSquareRenderer(props) {
   const {
     name,
@@ -64,7 +64,9 @@ function TreeMapSquareRenderer(props) {
         truncationMode,
         withValueOnly
       };
-      const textMeasurer = (0, import_text_measure.getTextMeasurer)(ctx, textSize);
+      const textMeasurer = (0, import_text_measure.getTextMeasurer)(ctx, textSize, {
+        fontWeight: import_constants.INCREASED_FONT_WEIGHT
+      });
       const labels = (0, import_build_labels.buildLabels)(labelsConfig, treemapRect, textMeasurer);
       drawLabels(ctx, labels);
     },

package/charts/tree-map/constants.d.ts

@@ -1,5 +1,8 @@
 import type { TextAlign, TextBaseline } from './types/canvas.js';
 import type { LabelsDisplay } from './types/treemap.js';
+import { AUTO_TEXT_SIZE_PRESETS } from '../core/constants.js';
+import type { TextSize } from '../core/types/text-size.js';
+export { AUTO_TEXT_SIZE_PRESETS };
 export declare const DISPLAY_NAME = "TreeMap";
 export declare const LABELS_DISPLAY: Readonly<Readonly<{
     None: "none";
@@ -54,8 +57,7 @@ export declare const LABEL_FONT_FAMILY = "DT Flow";
 export declare const DEFAULT_FONT_WEIGHT = 400;
 export declare const INCREASED_FONT_WEIGHT = 500;
 export declare const DEFAULT_NAME_ACCESSOR: undefined;
-export declare const DEFAULT_TEXT_SIZE: number | 'auto';
-export declare const AUTO_TEXT_SIZE_PRESETS: number[];
+export declare const DEFAULT_TEXT_SIZE: TextSize;
 export declare const DARK_LABEL_TEXT = "#000000";
 export declare const LIGHT_LABEL_TEXT = "#ffffff";
 export declare const RECT_BORDER_RADIUS = 2;

package/charts/tree-map/constants.js

@@ -28,7 +28,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constants_exports = {};
 __export(constants_exports, {
   AGGREGATED_NODE_COLOR: () => AGGREGATED_NODE_COLOR,
-  AUTO_TEXT_SIZE_PRESETS: () => AUTO_TEXT_SIZE_PRESETS,
+  AUTO_TEXT_SIZE_PRESETS: () => import_constants.AUTO_TEXT_SIZE_PRESETS,
   CLUSTER_LABEL_OFFSET_X: () => CLUSTER_LABEL_OFFSET_X,
   CLUSTER_LABEL_OFFSET_Y: () => CLUSTER_LABEL_OFFSET_Y,
   CLUSTER_OTHER_ID: () => CLUSTER_OTHER_ID,
@@ -140,7 +140,6 @@ const DEFAULT_FONT_WEIGHT = 400;
 const INCREASED_FONT_WEIGHT = 500;
 const DEFAULT_NAME_ACCESSOR = void 0;
 const DEFAULT_TEXT_SIZE = DEFAULT_LABEL_FONTSIZE;
-const AUTO_TEXT_SIZE_PRESETS = [18, 16, 14, 12];
 const DARK_LABEL_TEXT = "#000000";
 const LIGHT_LABEL_TEXT = "#ffffff";
 const RECT_BORDER_RADIUS = 2;

package/charts/tree-map/context/TextSizeContext.d.ts

@@ -1,2 +1,3 @@
-export declare const TextSizeContext: import("react").Context<number | "auto">;
-export declare const useTextSize: () => number | "auto";
+import type { TextSize } from '../../core/types/text-size.js';
+export declare const TextSizeContext: import("react").Context<TextSize>;
+export declare const useTextSize: () => TextSize;

package/charts/tree-map/hooks/useOverlayHandlers.d.ts

@@ -1,8 +1,7 @@
-import { type MouseEvent } from 'react';
 import type { Overlay } from '../../core/components/overlay-tooltip/types.js';
 export declare const useOverlayHandlers: (overlay: Overlay) => {
-    handlePointerEnter: () => void;
-    handlePointerMove: (event: MouseEvent<HTMLDivElement>) => void;
-    handlePointerLeave: () => void;
-    handleMouseClick: (event: MouseEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: import("react").MouseEvent<HTMLDivElement>) => void;
+    onPointerLeave: () => void;
+    onTouchEnd: (event: import("react").TouchEvent<HTMLDivElement>) => void;
+    onClick: (event: import("react").MouseEvent<HTMLDivElement>) => void;
 };

package/charts/tree-map/hooks/useOverlayHandlers.js

@@ -22,7 +22,6 @@ __export(useOverlayHandlers_exports, {
 module.exports = __toCommonJS(useOverlayHandlers_exports);
 var import_useOverlayEventHandlers = require("../../core/hooks/useOverlayEventHandlers.js");
 var import_constants = require("../constants.js");
-var import_useSetOverlayState = require("./useSetOverlayState.js");
 var import_FormatterContext = require("../context/FormatterContext.js");
 var import_LabelsDisplayContext = require("../context/LabelsDisplayContext.js");
 var import_TreeMapInternalDataContext = require("../context/TreeMapInternalDataContext.js");
@@ -33,15 +32,14 @@ const useOverlayHandlers = (overlay) => {
   const hierarchyLeafNodes = (0, import_selectors.useLeafNodesState)();
   const hierarchyClusterNodes = (0, import_selectors.useClusterNodesState)();
   const labelsDisplay = (0, import_LabelsDisplayContext.useLabelsDisplay)();
-  const { setToolbarVisible } = (0, import_useSetOverlayState.useSetOverlayState)();
   const formatter = (0, import_FormatterContext.useFormatter)();
   const { unit } = (0, import_TreeMapInternalDataContext.useTreeMapInternalData)();
   const parentLabels = [import_constants.LABELS_DISPLAY.All, import_constants.LABELS_DISPLAY.Clusters];
   const hasParentLabels = parentLabels.includes(labelsDisplay);
-  const getTooltipDataFromEvent = (event) => {
+  const getTooltipDataFromEvent = (coords) => {
     const position = overlay.getAdjustedPositionsFromAbsolute(
-      event.clientX,
-      event.clientY
+      coords.clientX,
+      coords.clientY
     );
     const relativePosition = {
       x: position.relativeX ?? 0,
@@ -55,8 +53,7 @@ const useOverlayHandlers = (overlay) => {
     );
     return tooltipData ? (0, import_build_overlay_tooltip_data.buildOverlayTooltipData)(tooltipData, formatter, unit) : void 0;
   };
-  return (0, import_useOverlayEventHandlers.useOverlayEventHandlers)(overlay, {
-    onToolbarVisibilityChange: setToolbarVisible,
+  return (0, import_useOverlayEventHandlers.useOverlayEventHandlers)({
     getTooltipData: getTooltipDataFromEvent
   });
 };

package/charts/tree-map/hooks/useTreeMapChartConfig.d.ts

@@ -1,5 +1,5 @@
 import { type PropsWithChildren } from 'react';
 import type { TreeMapConfig, TreeMapContextConfig } from '../types/treemap-chart.config.js';
-import type { TreeMapProps } from '../types/treemap.js';
+import type { TreeMapHierarchicalProps } from '../types/treemap.js';
 export declare function deserializeConfig(serializedConfig: string): TreeMapContextConfig;
-export declare const useTreeMapChartConfig: (props: PropsWithChildren<TreeMapProps>) => TreeMapConfig;
+export declare const useTreeMapChartConfig: (props: PropsWithChildren<TreeMapHierarchicalProps>) => TreeMapConfig;

package/charts/tree-map/hooks/useTreeMapChartHandlers.js

@@ -21,9 +21,11 @@ __export(useTreeMapChartHandlers_exports, {
 });
 module.exports = __toCommonJS(useTreeMapChartHandlers_exports);
 var import_react = require("react");
+var import_useTooltipReducer = require("../../core/components/overlay-tooltip/useTooltipReducer.js");
 var import_selectors = require("../store/selectors.js");
 function useTreeMapHandlers() {
   const setState = (0, import_selectors.useSetState)();
+  const dispatch = (0, import_useTooltipReducer.useTooltipReducer)();
   const onLegendItemHover = (0, import_react.useCallback)(
     (item) => {
       setState((prev) => ({
@@ -35,12 +37,13 @@ function useTreeMapHandlers() {
   );
   const onLegendItemClick = (0, import_react.useCallback)(
     (items) => {
+      dispatch({ type: "RESET_TOOLTIP" })();
       setState((prev) => ({
         ...prev,
         groupsSelected: items
       }));
     },
-    [setState]
+    [setState, dispatch]
   );
   return { onLegendItemHover, onLegendItemClick };
 }

package/charts/tree-map/providers/TreeMapChartProviders.d.ts

@@ -6,6 +6,7 @@ import { ColorRuleProps } from '../../core/types/color-rule.js';
 import type { ColoredRange } from '../../core/types/colored-range.js';
 import type { LegendProps } from '../../core/types/legend.js';
 import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
+import type { TextSize } from '../../core/types/text-size.js';
 import type { ChartToolbarConfig } from '../../core/types/toolbar.js';
 import type { TreeMapFormatter } from '../types/internal.js';
 import type { TreeMapCustomTooltipConfig } from '../types/treemap-chart.config.js';
@@ -24,7 +25,7 @@ interface TreeMapChartProvidersProps extends PropsWithChildren {
     max?: 'data-max' | number;
     colorRules?: ColorRuleProps[];
     unit?: string | Unit;
-    textSize: number | 'auto';
+    textSize: TextSize;
     tooltip?: TreeMapCustomTooltipConfig;
 }
 export declare const TreeMapChartProviders: {

package/charts/tree-map/providers/TreeMapChartProviders.js

@@ -64,7 +64,7 @@ const TreeMapChartProviders = (props) => {
     import_ChartSeriesActionContext.ChartSeriesActionContext.Provider,
     {
       value: {
-        // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore Strict mode transition - needs to be investigated
         chartSeriesActions: seriesActions
       },

package/charts/tree-map/store/selectors.d.ts

@@ -6,5 +6,4 @@ export declare const useHighlightedState: () => import("../../index.js")._Legend
 export declare const useGroupsSelectedState: () => import("../../index.js")._LegendItem[];
 export declare const useLeafNodesState: () => import("@visx/hierarchy/lib/types.js").HierarchyRectangularNode<import("../types/guards/node-guards.js").LeafNode>[];
 export declare const useClusterNodesState: () => import("@visx/hierarchy/lib/types.js").HierarchyRectangularNode<import("../types/guards/node-guards.js").ClusterNode>[];
-export declare const useTreeMapToolbarVisibleState: () => boolean;
 export declare const useColorMap: () => import("../types/internal.js").LegendColorMap;

package/charts/tree-map/store/selectors.js

@@ -24,8 +24,7 @@ __export(selectors_exports, {
   useLeafNodesState: () => useLeafNodesState,
   useSelector: () => useSelector,
   useSetState: () => useSetState,
-  useTreeMapState: () => useTreeMapState,
-  useTreeMapToolbarVisibleState: () => useTreeMapToolbarVisibleState
+  useTreeMapState: () => useTreeMapState
 });
 module.exports = __toCommonJS(selectors_exports);
 var import_react = require("react");
@@ -41,5 +40,4 @@ const useHighlightedState = () => useSelector((state) => state.highlightedItem);
 const useGroupsSelectedState = () => useSelector((state) => state.groupsSelected);
 const useLeafNodesState = () => useSelector((state) => state.hierarchyLeafNodes);
 const useClusterNodesState = () => useSelector((state) => state.hierarchyClusterNodes);
-const useTreeMapToolbarVisibleState = () => useSelector((state) => state.overlay.toolbarVisible);
 const useColorMap = () => useSelector((state) => state.colorMap);

package/charts/tree-map/store/store.js

@@ -27,9 +27,6 @@ var import_store = require("../../../core/store/store.js");
 const initialTreeMapState = {
   groupsSelected: [],
   highlightedItem: void 0,
-  overlay: {
-    toolbarVisible: false
-  },
   hierarchyLeafNodes: [],
   hierarchyClusterNodes: [],
   colorMap: /* @__PURE__ */ new Map()

package/charts/tree-map/types/state.d.ts

@@ -7,9 +7,6 @@ export interface TreeMapState {
     groupsSelected: LegendItem[];
     /** Id of highlighted nodes (category node - depth 1). */
     highlightedItem?: LegendItem;
-    overlay: {
-        toolbarVisible: boolean;
-    };
     /** An array containing all visible nodes. */
     hierarchyLeafNodes: HierarchyRectangularNode<LeafNode>[];
     hierarchyClusterNodes: HierarchyRectangularNode<ClusterNode>[];

package/charts/tree-map/types/treemap.d.ts

@@ -4,6 +4,7 @@ import { DataTestId } from '../../../core/types/data-props.js';
 import { MaskingProps } from '../../../core/types/masking-props.js';
 import { StylingProps } from '../../../core/types/styling-props.js';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
+import type { ChartData } from '../../core/types/chart-data.js';
 import type { ColorPalette, CustomColorPalette } from '../../core/types/color-palette.js';
 import type { ColoredRange } from '../../core/types/colored-range.js';
 import type { Formatter } from '../../core/types/formatter.js';
@@ -53,16 +54,13 @@ export interface TreeMapData {
 /**
  * Data accessor on leaf nodes by which legend can be defined
  *
- * @defaultValue undefined
  * @public
  */
 export type NameAccessor = 'name' | 'value';
 /**
  * @public
  */
-export interface TreeMapProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
-    /** The tree map data to display. */
-    data: TreeMapData;
+export interface TreeMapBaseProps extends StylingProps, MaskingProps, DataTestId, BehaviorTrackingProps {
     /**
      * Optional width of the chart.
      *
@@ -107,12 +105,6 @@ export interface TreeMapProps extends StylingProps, MaskingProps, DataTestId, Be
     labelsDisplay?: LabelsDisplay;
     /** Exposed callback to display series actions for a node  */
     seriesActions?: (node: TreeMapLeafNode) => SeriesActionsTemplate;
-    /**
-     * Data accessor on leaf nodes by which legend can be defined
-     *
-     * @defaultValue undefined
-     */
-    nameAccessor?: NameAccessor;
     /** The min value configuration to display */
     min?: 'data-min' | number;
     /** The max value configuration to display */
@@ -125,6 +117,31 @@ export interface TreeMapProps extends StylingProps, MaskingProps, DataTestId, Be
      */
     textSize?: number | 'auto';
 }
+/**
+ * @deprecated Use `TreeMapFlatProps` instead.
+ * @public
+ */
+export interface TreeMapHierarchicalProps extends TreeMapBaseProps {
+    /** The tree map data to display. */
+    data: TreeMapData;
+    /**
+     * Data accessor on leaf nodes by which legend can be defined
+     */
+    nameAccessor?: NameAccessor;
+}
+/**
+ * @public
+ */
+export interface TreeMapFlatProps extends TreeMapBaseProps {
+    data: ChartData;
+    valueAccessor: string;
+    nameAccessor?: string;
+    groupBy: string | string[];
+}
+/**
+ * @public
+ */
+export type TreeMapProps = TreeMapHierarchicalProps | TreeMapFlatProps;
 /**
  * Ref for the treemap chart
  * @public

package/charts/tree-map/utils/build-labels.d.ts

@@ -1,5 +1,5 @@
-import type { TextMeasurer } from './text-measure.js';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
+import type { TextMeasurer } from '../../core/utils/text-measure.js';
 import type { TreeMapRect } from '../types/treemap.js';
 export interface TreeMapLabel {
     text: string;

package/charts/tree-map/utils/build-tree-map-chart-config.d.ts

@@ -1,5 +1,5 @@
 import type { TreemapChartLegendConfig, TreeMapChartSlots, TreeMapConfig, TreeMapContextConfig } from '../types/treemap-chart.config.js';
-import type { TreeMapProps } from '../types/treemap.js';
+import type { TreeMapHierarchicalProps } from '../types/treemap.js';
 /**
  * Builds a LegendConfiguration based on context and slots
  *
@@ -15,4 +15,4 @@ export declare function getLegendConfiguration(contextLegendConfig?: TreemapChar
  * @param slots - config from components slots
  * @returns TreeMapConfig
  */
-export declare const buildTreeMapChartConfig: (props: TreeMapProps, config: TreeMapContextConfig, slots: TreeMapChartSlots) => TreeMapConfig;
+export declare const buildTreeMapChartConfig: (props: TreeMapHierarchicalProps, config: TreeMapContextConfig, slots: TreeMapChartSlots) => TreeMapConfig;

package/charts/tree-map/utils/get-legend-interaction-props.d.ts

@@ -1,6 +1,6 @@
 import type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';
 import type { SeriesActions } from '../../core/types/series-actions-template.js';
-export declare function getLegendInteractionProps(isPinned: boolean, isLoading: boolean, hasNameAccessor: boolean, legendActions: SeriesActions<LegendItem>, onHover: (hoveredSeries?: LegendItem) => void, onClick: (visibleSlices: LegendItem[]) => void): {
+export declare function getLegendInteractionProps(isPinned: boolean, isLoading: boolean, hasValueNameAccessor: boolean, legendActions: SeriesActions<LegendItem>, onHover: (hoveredSeries?: LegendItem) => void, onClick: (visibleSlices: LegendItem[]) => void): {
     interactionsDisabled: boolean;
     onHover?: undefined;
     onSeriesAction?: undefined;

package/charts/tree-map/utils/get-legend-interaction-props.js

@@ -20,11 +20,11 @@ __export(get_legend_interaction_props_exports, {
   getLegendInteractionProps: () => getLegendInteractionProps
 });
 module.exports = __toCommonJS(get_legend_interaction_props_exports);
-function getLegendInteractionProps(isPinned, isLoading, hasNameAccessor, legendActions, onHover, onClick) {
+function getLegendInteractionProps(isPinned, isLoading, hasValueNameAccessor, legendActions, onHover, onClick) {
   if (isPinned || isLoading) {
     return { interactionsDisabled: true };
   }
-  if (hasNameAccessor) {
+  if (hasValueNameAccessor) {
     return {
       onHover,
       interactionsDisabled: true

package/charts/tree-map/utils/to-hierarchical-props.d.ts

@@ -0,0 +1,2 @@
+import type { TreeMapFlatProps, TreeMapHierarchicalProps } from '../types/treemap.js';
+export declare const toHierarchicalProps: (props: TreeMapFlatProps) => TreeMapHierarchicalProps;

package/charts/tree-map/utils/to-hierarchical-props.js

@@ -0,0 +1,106 @@
+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 to_hierarchical_props_exports = {};
+__export(to_hierarchical_props_exports, {
+  toHierarchicalProps: () => toHierarchicalProps
+});
+module.exports = __toCommonJS(to_hierarchical_props_exports);
+const toHierarchicalProps = (props) => {
+  const { data, valueAccessor, nameAccessor, groupBy, ...rest } = props;
+  const { rootKey, clusterKey, leafKey } = resolveGroupKeys(groupBy);
+  const rootName = resolveRootName(data, rootKey);
+  const clusterMap = buildClusterMap(data, valueAccessor, clusterKey, leafKey);
+  const nodes = buildClusterNodes(clusterMap);
+  const tree = buildRootNode(nodes, rootName);
+  return {
+    ...rest,
+    data: { tree },
+    nameAccessor: resolveNameAccessor(data, nameAccessor)
+  };
+};
+const resolveNameAccessor = (data, nameAccessor) => {
+  if (nameAccessor === void 0) {
+    return void 0;
+  }
+  return typeof data[0]?.[nameAccessor] === "number" ? "value" : "name";
+};
+const resolveGroupKeys = (groupBy) => {
+  const groups = Array.isArray(groupBy) ? groupBy.slice(0, 3) : [groupBy];
+  const hasRoot = groups.length >= 3;
+  return {
+    rootKey: hasRoot ? groups[0] : void 0,
+    clusterKey: hasRoot ? groups[1] : groups[0],
+    leafKey: groups.length >= 2 ? groups.at(-1) : void 0
+  };
+};
+const buildRootNode = (nodes, rootName) => ({
+  nodes,
+  value: nodes.reduce((sum, n) => sum + n.value, 0),
+  ...rootName === void 0 ? {} : { name: rootName }
+});
+const buildClusterNodes = (clusterMap) => Array.from(clusterMap.entries()).map(([name, { leaves, value }]) => ({
+  name,
+  value,
+  ...leaves.length > 0 ? { nodes: leaves } : {}
+}));
+const buildClusterMap = (data, valueAccessor, clusterKey, leafKey) => {
+  const clusterMap = /* @__PURE__ */ new Map();
+  for (const dp of data) {
+    const rawValue = dp[valueAccessor];
+    if (typeof rawValue !== "number") {
+      continue;
+    }
+    const clusterName = toSafeString(dp[clusterKey]);
+    let cluster = clusterMap.get(clusterName);
+    if (!cluster) {
+      cluster = {
+        leaves: [],
+        value: 0
+      };
+      clusterMap.set(clusterName, cluster);
+    }
+    cluster.value += rawValue;
+    if (leafKey === void 0) {
+      continue;
+    }
+    const leafName = toSafeString(dp[leafKey]);
+    cluster.leaves.push({ name: leafName, value: rawValue });
+  }
+  return clusterMap;
+};
+const resolveRootName = (data, rootKey) => {
+  if (rootKey === void 0) {
+    return void 0;
+  }
+  const rootNameValue = data.find(
+    (dp) => dp[rootKey] !== null && dp[rootKey] !== void 0
+  )?.[rootKey];
+  if (rootNameValue === null || rootNameValue === void 0) {
+    return void 0;
+  }
+  return toSafeString(rootNameValue);
+};
+const toSafeString = (value) => {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (typeof value === "number" || typeof value === "boolean") {
+    return `${value}`;
+  }
+  return "";
+};

package/charts/xy-chart/XYChart.js

@@ -50,6 +50,7 @@ var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_defaultChartValues_css = require("../../core/styles/defaultChartValues.sty.js");
 var import_get_annotations_visible_area = require("../core/components/annotations/utils/get-annotations-visible-area.js");
 var import_ChartGridRoot = require("../core/components/chart-grid/ChartGridRoot.js");
+var import_constants = require("../core/components/chart-grid/constants.js");
 var import_useChartLayoutLoading = require("../core/components/chart-layout/hooks/useChartLayoutLoading.js");
 var import_useGraphSize = require("../core/components/chart-layout/hooks/useGraphSize.js");
 var import_ChartLoaderOverlay = require("../core/components/chart-loader-overlay/ChartLoaderOverlay.js");
@@ -80,7 +81,20 @@ const XYChart = (0, import_react.forwardRef)(
       annotationsConfig?.fixedTracks,
       hiddenTracks.length
     );
-    const annotationsAreaHeight = annotationsVisibleArea + (tracksQuantity - hiddenTracks.length > 0 ? import_defaults.ANNOTATIONS_PADDING_BOTTOM : 0);
+    const hasVisibleAnnotationTracks = tracksQuantity - hiddenTracks.length > 0;
+    const annotationsPadding = hasVisibleAnnotationTracks ? import_defaults.ANNOTATIONS_PADDING_BOTTOM : 0;
+    const annotationsAreaHeight = annotationsVisibleArea + annotationsPadding;
+    const showAnnotations = (0, import_constants.shouldShowAnnotations)(
+      chartGridHeight,
+      tracksQuantity
+    );
+    const showAxes = (0, import_constants.shouldShowAxes)(chartGridHeight);
+    const gridAnnotationsHeight = showAnnotations ? annotationsAreaHeight : 0;
+    const computedGridTemplateRows = showAxes ? (0, import_grid_templates.gridTemplateRows)(
+      bottomAxisMaxSize,
+      topAxisMaxSize,
+      gridAnnotationsHeight
+    ) : "0px 0px 1fr 1px";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -101,11 +115,7 @@ const XYChart = (0, import_react.forwardRef)(
               leftAxisMaxSize,
               rightAxisMaxSize
             ),
-            gridTemplateRows: (0, import_grid_templates.gridTemplateRows)(
-              bottomAxisMaxSize,
-              topAxisMaxSize,
-              annotationsAreaHeight
-            ),
+            gridTemplateRows: computedGridTemplateRows,
             ref: chartAndForwardedRef,
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartTooltip_context.XYChartTooltipContext.Provider, { value: config.tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartSelectConfig_context.XYChartSelectConfigContext.Provider, { value: config.select, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartProviders.XYChartProviders, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
               import_XYChartImperativeHandlerBuilder.XYChartImperativeHandlerBuilder,
@@ -114,17 +124,17 @@ const XYChart = (0, import_react.forwardRef)(
                 containerRef: chartRef,
                 config,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartTopAxisArea.XYChartTopAxisArea, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartBottomAxisArea.XYChartBottomAxisArea, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartLeftAxisArea.XYChartLeftAxisArea, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRightAxisArea.XYChartRightAxisArea, {}),
-                  !!tracksQuantity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsArea.XYChartAnnotationsArea, {}),
+                  showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartTopAxisArea.XYChartTopAxisArea, {}),
+                  showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartBottomAxisArea.XYChartBottomAxisArea, {}),
+                  showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartLeftAxisArea.XYChartLeftAxisArea, {}),
+                  showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRightAxisArea.XYChartRightAxisArea, {}),
+                  showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsArea.XYChartAnnotationsArea, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartGridRoot.ChartGrid.PlotArea, { children: [
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartGridLayout.XYChartGridLayout, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartLayout.XYChartLayout, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BarLabelLayout.BarLabelLayout, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAxisBorder.XYChartAxisBorder, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsIndicators.XYChartAnnotationsIndicators, {}),
+                    showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsIndicators.XYChartAnnotationsIndicators, {}),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       import_ChartLoaderOverlay.ChartLoaderOverlay,
                       {

package/charts/xy-chart/XYChartRoot.js

@@ -89,7 +89,9 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
     className,
     __downloadDataCallback: downloadDataCallback,
     "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow
+    "data-dtrum-allow": dataDtrumAllow,
+    // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
+    "data-dt-component": componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING
   } = props;
   const [behaviorTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(props);
   const slots = (0, import_iterate_slots.iterateSlots)(props.children);
@@ -151,7 +153,7 @@ const XYChartRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, ref) =>
                           "data-dtrum-mask": dataDtrumMask,
                           "data-dtrum-allow": dataDtrumAllow,
                           ...behaviorTrackingProps,
-                          "data-dt-component": COMPONENT_NAME_BEHAVIOURAL_TRACKING,
+                          "data-dt-component": componentName,
                           children: [
                             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartLayout.ChartLayout.Graph, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                               import_XYChart.XYChart,

package/charts/xy-chart/components/axes/AxisArea.css

@@ -1,3 +1,3 @@
-._bidc430-3-7-1 {
+._bidc430-3-8-0 {
   position: relative;
 }

package/charts/xy-chart/components/axes/AxisArea.sty.js

@@ -21,4 +21,4 @@ __export(AxisArea_css_exports, {
 });
 module.exports = __toCommonJS(AxisArea_css_exports);
 var import_AxisArea_css_ts_vanilla = require("./AxisArea.css");
-var axisContainerStyle = "_bidc430-3-7-1";
+var axisContainerStyle = "_bidc430-3-8-0";

package/charts/xy-chart/components/axes/AxisTickWithTruncation.css

@@ -1,8 +1,8 @@
-._z2zz8y2-3-7-1 {
-  direction: var(--_z2zz8y0-3-7-1);
+._z2zz8y2-3-8-0 {
+  direction: var(--_z2zz8y0-3-8-0);
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
-  width: var(--_z2zz8y1-3-7-1);
+  width: var(--_z2zz8y1-3-8-0);
 }

package/charts/xy-chart/components/axes/AxisTickWithTruncation.sty.js

@@ -23,6 +23,6 @@ __export(AxisTickWithTruncation_css_exports, {
 });
 module.exports = __toCommonJS(AxisTickWithTruncation_css_exports);
 var import_AxisTickWithTruncation_css_ts_vanilla = require("./AxisTickWithTruncation.css");
-var directionValue = "var(--_z2zz8y0-3-7-1)";
-var tickStyle = "_z2zz8y2-3-7-1";
-var widthContainer = "var(--_z2zz8y1-3-7-1)";
+var directionValue = "var(--_z2zz8y0-3-8-0)";
+var tickStyle = "_z2zz8y2-3-8-0";
+var widthContainer = "var(--_z2zz8y1-3-8-0)";

package/charts/xy-chart/components/axes/XTickWithTruncation.d.ts

@@ -1,4 +1,4 @@
-import type { TickRendererProps } from '@visx/axis';
+import type { TickRendererProps } from '../../../core/components/axes/types.js';
 interface YTickWithTruncationProps {
     position: 'top' | 'bottom';
     renderProps: TickRendererProps;