@dynatrace/strato-components 3.8.0 → 3.9.0

package/charts/timeseries/TimeseriesChartInternal.js

@@ -23,7 +23,6 @@ __export(TimeseriesChartInternal_exports, {
 module.exports = __toCommonJS(TimeseriesChartInternal_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_constants = require("./components/annotations-timeseries/constants.js");
 var import_TimeseriesAnnotationsIndicators = require("./components/annotations-timeseries/TimeseriesAnnotationsIndicators.js");
 var import_TimeseriesChartAnnotationsArea = require("./components/annotations-timeseries/TimeseriesChartAnnotationsArea.js");
 var import_TimeseriesTimeBottomAxisArea = require("./components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.js");
@@ -32,7 +31,7 @@ var import_TimeseriesValueRightAxisArea = require("./components/axes/TimeseriesV
 var import_TimeseriesChartOverlays = require("./components/overlays/TimeseriesChartOverlays.js");
 var import_ThresholdIndicators = require("./components/thresholds/ThresholdIndicators.js");
 var import_TimeseriesThresholdArea = require("./components/thresholds/TimeseriesThresholdArea.js");
-var import_constants2 = require("./constants.js");
+var import_constants = require("./constants.js");
 var import_useAnnotationsConfig = require("./hooks/useAnnotationsConfig.js");
 var import_useChartInteractions = require("./hooks/useChartInteractions.js");
 var import_useTimeseriesFilteredData = require("./hooks/useTimeseriesFilteredData.js");
@@ -44,15 +43,15 @@ var import_TimeseriesChartProviders = require("./providers/TimeseriesChartProvid
 var import_timeseries_grid_area_rules = require("./types/timeseries-grid-area-rules.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_defaultChartValues_css = require("../../core/styles/defaultChartValues.sty.js");
-var import_constants3 = require("../core/components/annotations/constants.js");
+var import_constants2 = require("../core/components/annotations/constants.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_constants4 = require("../core/components/chart-grid/constants.js");
+var import_constants3 = require("../core/components/chart-grid/constants.js");
 var import_useChartLayoutLoading = require("../core/components/chart-layout/hooks/useChartLayoutLoading.js");
 var import_useChartLayoutOrientation = require("../core/components/chart-layout/hooks/useChartLayoutOrientation.js");
 var import_useGraphSize = require("../core/components/chart-layout/hooks/useGraphSize.js");
 var import_ChartLoaderOverlay = require("../core/components/chart-loader-overlay/ChartLoaderOverlay.js");
-var import_constants5 = require("../core/components/data-point/constants.js");
+var import_constants4 = require("../core/components/data-point/constants.js");
 function computeChartPadding(axisLeftConfig, axisRightConfig, unitsCount, isLegendHiddenOrVertical) {
   const singleUnit = unitsCount === 1 && isLegendHiddenOrVertical;
   const paddingRight = Boolean(
@@ -92,7 +91,7 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     annotations.visibleTracksLimit,
     numHiddenTracks
   );
-  const availableWidth = tracksQuantity && orientation === "vertical" ? width - import_constants3.SCROLLBAR_WIDTH : width;
+  const availableWidth = tracksQuantity && orientation === "vertical" ? width - import_constants2.SCROLLBAR_WIDTH : width;
   const isLegendHiddenOrVertical = orientation === "vertical" || legendHidden;
   const isLegendHiddenOrRight = orientation === "horizontal" || legendHidden;
   const { hasLeftPadding, hasRightPadding } = computeChartPadding(
@@ -101,15 +100,14 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     units.length,
     isLegendHiddenOrVertical
   );
-  const chartGridHeight = height - (!tracksQuantity || isLegendHiddenOrRight ? import_constants5.OVERLAY_PADDING + import_constants5.BOTTOM_PADDING_ADJUSTMENT : 0);
-  const showAnnotations = (0, import_constants4.shouldShowAnnotations)(
+  const chartGridHeight = height - (!tracksQuantity || isLegendHiddenOrRight ? import_constants4.OVERLAY_PADDING + import_constants4.BOTTOM_PADDING_ADJUSTMENT : 0);
+  const showAnnotations = (0, import_constants3.shouldShowAnnotations)(
     chartGridHeight,
     tracksQuantity
   );
-  const showAxes = (0, import_constants4.shouldShowAxes)(chartGridHeight);
-  const chartGridRenderHeight = tracksQuantity && !isLegendHiddenOrRight && !showAnnotations ? chartGridHeight - import_constants5.OVERLAY_PADDING : chartGridHeight;
-  const annotationsPadding = tracksQuantity - numHiddenTracks > 0 ? import_constants.ANNOTATIONS_PADDING_BOTTOM : 0;
-  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea + annotationsPadding : 0;
+  const showAxes = (0, import_constants3.shouldShowAxes)(chartGridHeight);
+  const chartGridRenderHeight = tracksQuantity && !isLegendHiddenOrRight && !showAnnotations ? chartGridHeight - import_constants4.OVERLAY_PADDING : chartGridHeight;
+  const annotationsRowHeight = showAnnotations ? annotationsVisibleArea : 0;
   const timeseriesGridTemplateRows = showAxes ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)` : "0px 1fr 1px";
   (0, import_useChartInteractions.useChartInteractions)();
   if (!height || !width) {
@@ -119,16 +117,16 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     "div",
     {
       style: {
-        paddingTop: showAnnotations ? 0 : import_constants5.OVERLAY_PADDING,
-        paddingLeft: hasLeftPadding ? import_constants5.OVERLAY_PADDING : 0
+        paddingTop: showAnnotations ? 0 : import_constants4.OVERLAY_PADDING,
+        paddingLeft: hasLeftPadding ? import_constants4.OVERLAY_PADDING : 0
       },
       className: import_defaultChartValues_css.defaultChartSize,
-      "aria-label": import_constants2.TIMESERIES_ARIA_LABEL,
+      "aria-label": import_constants.TIMESERIES_ARIA_LABEL,
       role: "img",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ChartGridRoot.ChartGrid,
         {
-          width: availableWidth - (hasRightPadding ? import_constants5.OVERLAY_PADDING : 0),
+          width: availableWidth - (hasRightPadding ? import_constants4.OVERLAY_PADDING : 0),
           height: chartGridRenderHeight,
           gridTemplateAreas: timeseriesGridTemplateAreas,
           gridTemplateColumns: timeseriesGridTemplateColumns,
@@ -167,4 +165,4 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     }
   );
 });
-TimeseriesChartInternal.displayName = import_constants2.DISPLAY_NAME;
+TimeseriesChartInternal.displayName = import_constants.DISPLAY_NAME;

package/charts/timeseries/components/annotations-timeseries/TimeseriesChartAnnotationsArea.js

@@ -21,11 +21,10 @@ __export(TimeseriesChartAnnotationsArea_exports, {
 });
 module.exports = __toCommonJS(TimeseriesChartAnnotationsArea_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_constants = require("./constants.js");
 var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_AnnotationsTimeDisplay = require("../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js");
 var import_AnnotationsScrollWrapper = require("../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js");
-var import_constants2 = require("../../../core/components/annotations/constants.js");
+var import_constants = require("../../../core/components/annotations/constants.js");
 var import_ChartGridRoot = require("../../../core/components/chart-grid/ChartGridRoot.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_selectors = require("../../hooks/store/selectors.js");
@@ -37,7 +36,7 @@ const TimeseriesChartAnnotationsArea = () => {
   const config = (0, import_useAnnotationsConfig.useAnnotationsConfig)();
   const {
     tracks,
-    showLabels = import_constants2.DEFAULT_SHOW_LABELS,
+    showLabels = import_constants.DEFAULT_SHOW_LABELS,
     annotationsActions,
     tooltip
   } = config;
@@ -55,37 +54,30 @@ const TimeseriesChartAnnotationsArea = () => {
       }
     }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ChartGridRoot.ChartGrid.GridArea,
-    {
-      paddingBottom: import_constants.ANNOTATIONS_PADDING_BOTTOM,
-      gridArea: import_timeseries_grid_area_rules.AREAS.annotations,
-      children: ({ availableWidth, availableHeight }) => {
-        const labelOffset = availableWidth - width;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartGridRoot.ChartGrid.GridArea, { gridArea: import_timeseries_grid_area_rules.AREAS.annotations, children: ({ availableWidth, availableHeight }) => {
+    const labelOffset = availableWidth - width;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+      {
+        height: availableHeight,
+        width: availableWidth + import_constants.SCROLLBAR_THRESHOLD,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_AnnotationsTimeDisplay.AnnotationsTimeDisplay,
           {
-            height: availableHeight,
-            width: availableWidth + import_constants2.SCROLLBAR_THRESHOLD,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_AnnotationsTimeDisplay.AnnotationsTimeDisplay,
-              {
-                tracks,
-                width: availableWidth,
-                scale,
-                showLabels: showLabels ?? import_constants2.DEFAULT_SHOW_LABELS,
-                labelsOffset: labelOffset,
-                annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
-                markerGroupHover: handleUpdateIndicators,
-                textOverflow: import_constants2.DEFAULT_INTEGRATION_TEXT_OVERFLOW,
-                tooltipConfig: tooltip,
-                ...behaviorTrackingProps,
-                "data-dt-component": COMPONENT_NAME
-              }
-            )
+            tracks,
+            width: availableWidth,
+            scale,
+            showLabels: showLabels ?? import_constants.DEFAULT_SHOW_LABELS,
+            labelsOffset: labelOffset,
+            annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
+            markerGroupHover: handleUpdateIndicators,
+            textOverflow: import_constants.DEFAULT_TEXT_OVERFLOW,
+            tooltipConfig: tooltip,
+            ...behaviorTrackingProps,
+            "data-dt-component": COMPONENT_NAME
           }
-        );
+        )
       }
-    }
-  );
+    );
+  } });
 };

package/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css

@@ -1,6 +1,6 @@
-._19z0vdp0-3-8-0 {
+._19z0vdp0-3-9-0 {
   position: relative;
 }
-._19z0vdp1-3-8-0 {
+._19z0vdp1-3-9-0 {
   touch-action: none;
 }

package/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js

@@ -22,4 +22,4 @@ __export(TimeseriesTimeBottomAxisArea_css_exports, {
 module.exports = __toCommonJS(TimeseriesTimeBottomAxisArea_css_exports);
 var import_TimeseriesTimeBottomAxisArea_css_ts_vanilla = require("./TimeseriesTimeBottomAxisArea.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-8-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-9-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/timeseries/components/overlays/TimeseriesChartOverlaysBorder.js

@@ -23,15 +23,19 @@ module.exports = __toCommonJS(TimeseriesChartOverlaysBorder_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_ChartOverlaysBorder = require("../../../core/components/overlays/ChartOverlaysBorder.js");
+var import_useAnnotationsConfig = require("../../hooks/useAnnotationsConfig.js");
 var import_useYScales = require("../../hooks/useYScales.js");
 const TimeseriesChartOverlaysBorder = () => {
   const { left, right } = (0, import_useYScales.useYScales)();
+  const { tracks } = (0, import_useAnnotationsConfig.useAnnotationsConfig)();
+  const visibleTracksCount = tracks.filter((track) => !track.hidden).length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartOverlaysBorder.ChartOverlaysBorder,
     {
       left: !(0, import_lodash_es.isUndefined)(left),
       right: !(0, import_lodash_es.isUndefined)(right),
-      bottom: true
+      bottom: true,
+      topSeparator: visibleTracksCount > 1
     }
   );
 };

package/charts/timeseries/components/overlays/TimeseriesOverlays.css

@@ -1,8 +1,8 @@
-._17fdb110-3-8-0 {
+._17fdb110-3-9-0 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-8-0 {
+._17fdb111-3-9-0 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-8-0 {
+._17fdb112-3-9-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-8-0 {
+._17fdb113-3-9-0 {
   cursor: crosshair;
   overflow: visible;
   pointer-events: none;

package/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js

@@ -25,7 +25,7 @@ __export(TimeseriesOverlays_css_exports, {
 module.exports = __toCommonJS(TimeseriesOverlays_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_TimeseriesOverlays_css_ts_vanilla = require("./TimeseriesOverlays.css");
-var canvasPlot = "_17fdb110-3-8-0 _13lzg4k0-3-8-0";
-var crosshairLayout = "_17fdb113-3-8-0 _13lzg4k0-3-8-0";
-var datapointCanvasPlot = "_17fdb111-3-8-0 _13lzg4k0-3-8-0";
-var datapointIndicatorLayout = "_17fdb112-3-8-0 _13lzg4k0-3-8-0";
+var canvasPlot = "_17fdb110-3-9-0 _13lzg4k0-3-9-0";
+var crosshairLayout = "_17fdb113-3-9-0 _13lzg4k0-3-9-0";
+var datapointCanvasPlot = "_17fdb111-3-9-0 _13lzg4k0-3-9-0";
+var datapointIndicatorLayout = "_17fdb112-3-9-0 _13lzg4k0-3-9-0";

package/charts/timeseries/components/thresholds/ThresholdIndicators.css

@@ -1,6 +1,6 @@
-._9p8qi20-3-8-0 {
+._9p8qi20-3-9-0 {
   z-index: 2;
 }
-._9p8qi21-3-8-0 {
+._9p8qi21-3-9-0 {
   z-index: 0;
 }

package/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js

@@ -23,5 +23,5 @@ __export(ThresholdIndicators_css_exports, {
 module.exports = __toCommonJS(ThresholdIndicators_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_ThresholdIndicators_css_ts_vanilla = require("./ThresholdIndicators.css");
-var thresholdPlotLine = "_9p8qi20-3-8-0 _13lzg4k0-3-8-0";
-var thresholdPlotRange = "_9p8qi21-3-8-0 _13lzg4k0-3-8-0";
+var thresholdPlotLine = "_9p8qi20-3-9-0 _13lzg4k0-3-9-0";
+var thresholdPlotRange = "_9p8qi21-3-9-0 _13lzg4k0-3-9-0";

package/charts/timeseries/components/toolbar/TimeseriesChartToolbar.js

@@ -74,7 +74,6 @@ const TimeseriesChartToolbar = ({
   return !(0, import_lodash_es.isUndefined)(config) && anyInteractionEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ChartToolbarRenderer.ChartToolbarRenderer,
     {
-      visible: false,
       handlerRef,
       visibleWhenMouseInBounds: true,
       collapsed: config.collapsed,

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

@@ -4,7 +4,10 @@ import type { SeriesDisplayMode, TooltipVariant } from '../../core/types/tooltip
  * @public
  */
 export interface TimeseriesChartTooltipProps {
-    /** Whether the tooltip should contain datapoints from all series for the selected timestamp, or just the closest one. */
+    /**
+     * Whether the tooltip should contain datapoints from all series for the selected timestamp, or just the closest one.
+     * @defaultValue 'single'
+     */
     variant?: TooltipVariant;
     /** The tooltip items display mode. When it's undefined and variant is 'shared', then set to 'single-line', if variant is 'single', then set to 'multi-line'. */
     seriesDisplayMode?: SeriesDisplayMode;

package/charts/top-list/TopList.css

@@ -1,4 +1,4 @@
-._jwlby60-3-8-0 {
+._jwlby60-3-9-0 {
   width: 100%;
   overflow-y: auto;
 }

package/charts/top-list/TopList.d.ts

@@ -5,6 +5,18 @@ export type { TopListProps };
  * A horizontal ranked-bar chart with labels inside bars and a hidden numerical
  * axis, implemented as a wrapper around XYChart. When the list has more items
  * than fit in `height`, the viewport becomes scrollable.
+ *
+ * Slots such as `<TopList.ColorRule>` can be passed as children to customize
+ * bar colors per datapoint; they are forwarded to the internal `XYChart`.
  * @public
  */
-export declare const TopList: (props: TopListProps & import("react").RefAttributes<XYChartRef>) => import("react").ReactElement | null;
+export declare const TopList: ((props: TopListProps & import("react").RefAttributes<XYChartRef>) => import("react").ReactElement | null) & {
+    /**
+     * Apply a conditional color override to bars matching the rule. Same
+     * component reference as `XYChart.ColorRule` and `TimeseriesChart.ColorRule`.
+     */
+    ColorRule: {
+        (_props: import("../index.js").ColorRuleProps): null;
+        displayName: string;
+    };
+};

package/charts/top-list/TopList.js

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TopList_exports = {};
 __export(TopList_exports, {
-  TopList: () => TopList
+  TopList: () => TopList2
 });
 module.exports = __toCommonJS(TopList_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -25,11 +25,12 @@ var import_react = require("react");
 var import_constants = require("./constants.js");
 var import_TopList_css = require("./TopList.sty.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
+var import_ColorRule = require("../core/slots/ColorRule.js");
 var import_coerceSizeValue = require("../core/utils/coerceSizeValue.js");
 var import_defaults = require("../xy-chart/constants/defaults.js");
 var import_XYChartRoot = require("../xy-chart/XYChartRoot.js");
 const COMPONENT_NAME_BEHAVIOURAL_TRACKING = "TopList";
-const TopList = (0, import_react.forwardRef)(function TopList2({
+const TopListRoot = (0, import_react.forwardRef)(function TopList({
   data,
   labelAccessor,
   valueAccessor,
@@ -39,6 +40,7 @@ const TopList = (0, import_react.forwardRef)(function TopList2({
   seriesIdAccessor,
   seriesNameAccessor,
   comparator,
+  children,
   height = import_defaults.DEFAULT_CHART_HEIGHT,
   // @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,
@@ -108,10 +110,19 @@ const TopList = (0, import_react.forwardRef)(function TopList2({
                 formatter: categoryFormatter
               }
             ),
-            legend
+            legend,
+            children
           ]
         }
       )
     }
   );
 });
+const TopList2 = Object.assign(TopListRoot, {
+  /**
+   * Apply a conditional color override to bars matching the rule. Same
+   * component reference as `XYChart.ColorRule` and `TimeseriesChart.ColorRule`.
+   */
+  ColorRule: import_ColorRule.ColorRule
+});
+TopList2.displayName = "TopList";

package/charts/top-list/TopList.sty.js

@@ -21,4 +21,4 @@ __export(TopList_css_exports, {
 });
 module.exports = __toCommonJS(TopList_css_exports);
 var import_TopList_css_ts_vanilla = require("./TopList.css");
-var scrollContainer = "_jwlby60-3-8-0";
+var scrollContainer = "_jwlby60-3-9-0";

package/charts/top-list/types/top-list.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 import type { CategoricalFormatter, Formatter } from '../../core/types/formatter.js';
 import type { XYChartProps } from '../../xy-chart/types/xy-chart-props.js';
@@ -45,4 +46,8 @@ export interface TopListProps extends XYChartProps {
      * @defaultValue 'Series'
      */
     seriesNameAccessor?: string;
+    /**
+     * Slot children forwarded to the internal `XYChart`.
+     */
+    children?: ReactNode;
 }

package/charts/tree-map/components/TreeMapCanvas.d.ts

@@ -1,4 +1,4 @@
-import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import { type JSX } from 'react';
 import type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';
 import { type HighlightingMap, type InternalTreeMapNode } from '../types/internal.js';

package/charts/tree-map/components/TreeMapCluster.d.ts

@@ -1,4 +1,4 @@
-import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';
 import { type HighlightingMap, type InternalTreeMapNode } from '../types/internal.js';
 export interface TreeMapClusterProps {

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

@@ -21,7 +21,7 @@ __export(TreeMapInternal_exports, {
 });
 module.exports = __toCommonJS(TreeMapInternal_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_hierarchy = require("@visx/hierarchy");
+var import_d3_hierarchy = require("d3-hierarchy");
 var import_react = require("react");
 var import_TreeMapCanvas = require("./TreeMapCanvas.js");
 var import_TreeMapCluster = require("./TreeMapCluster.js");
@@ -45,8 +45,16 @@ const TreeMapInternal = (0, import_react.forwardRef)(
     const { dataForRendering } = (0, import_TreeMapAggregationDataContext.useTreeMapAggregationData)();
     const highlightingMap = (0, import_TreeMapHighlightingMapContext.useTreeMapHighlightingMap)();
     const hasParentLabels = (0, import_with_parent_label.withParentLabel)(labelsDisplay);
-    const root = (0, import_react.useMemo)(() => (0, import_hierarchy.hierarchy)(dataForRendering), [dataForRendering]);
+    const root = (0, import_react.useMemo)(
+      () => (0, import_d3_hierarchy.hierarchy)(dataForRendering),
+      [dataForRendering]
+    );
     const highlightedItem = (0, import_selectors.useHighlightedState)();
+    const layout = (0, import_d3_hierarchy.treemap)().tile(import_d3_hierarchy.treemapSquarify).size([roundedWidth, roundedHeight]).padding((node) => (0, import_node_padding.nodePadding)(node, hasParentLabels)).round(true);
+    if (hasParentLabels) {
+      layout.paddingOuter((node) => (0, import_node_padding.nodePaddingOuter)(node)).paddingTop((node) => (0, import_node_padding.nodePaddingTop)(node));
+    }
+    const rootNode = layout(root.sum((d) => d.children ? 0 : d.value));
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: forwardedRef, "aria-label": import_constants.TREEMAP_CHART_ARIA_LABEL, role: "img", children: [
       children,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -55,36 +63,24 @@ const TreeMapInternal = (0, import_react.forwardRef)(
           value: {
             shapeRefs: /* @__PURE__ */ new Map()
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Canvas.Canvas, { width: roundedWidth, height: roundedHeight, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_hierarchy.Treemap,
-            {
-              root,
-              size: [roundedWidth, roundedHeight],
-              tile: import_hierarchy.treemapSquarify,
-              padding: (node) => (0, import_node_padding.nodePadding)(node, hasParentLabels),
-              paddingTop: hasParentLabels ? (node) => (0, import_node_padding.nodePaddingTop)(node) : void 0,
-              paddingOuter: hasParentLabels ? (node) => (0, import_node_padding.nodePaddingOuter)(node) : void 0,
-              round: true,
-              children: (rootNode) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                hasParentLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_TreeMapCluster.TreeMapCluster,
-                  {
-                    treeMapData: rootNode,
-                    highlightedItem,
-                    highlightingMap
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_TreeMapCanvas.TreeMapCanvas,
-                  {
-                    treeMapData: rootNode,
-                    highlightedItem,
-                    highlightingMap
-                  }
-                )
-              ] })
-            }
-          ) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Canvas.Canvas, { width: roundedWidth, height: roundedHeight, children: [
+            hasParentLabels && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_TreeMapCluster.TreeMapCluster,
+              {
+                treeMapData: rootNode,
+                highlightedItem,
+                highlightingMap
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_TreeMapCanvas.TreeMapCanvas,
+              {
+                treeMapData: rootNode,
+                highlightedItem,
+                highlightingMap
+              }
+            )
+          ] })
         }
       )
     ] });

package/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css

@@ -1,4 +1,4 @@
-._1iqz50a0-3-8-0 {
+._1iqz50a0-3-9-0 {
   position: absolute;
   top: 0;
   left: 0;

package/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.sty.js

@@ -21,4 +21,4 @@ __export(TreeMapOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TreeMapOverlay_css_exports);
 var import_TreeMapOverlay_css_ts_vanilla = require("./TreeMapOverlay.css");
-var container = "_1iqz50a0-3-8-0";
+var container = "_1iqz50a0-3-9-0";

package/charts/tree-map/components/TreeMapTooltip/TreeMapOverlayTooltip.js

@@ -41,7 +41,7 @@ const TreeMapOverlayTooltip = (props) => {
       value: meta.value,
       childrenCount: meta.children
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { legacyTemplate: customTooltip.template(payload) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip, { template: customTooltip.template(payload) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_OverlayTooltip.OverlayTooltip, { truncation: truncationMode, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayTooltip.OverlayTooltip.Header, { header1: data.header1 }),

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

@@ -1,3 +1,3 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { ClusterNode, LeafNode } from '../types/guards/node-guards.js';
 export declare const useSetHierarchyNodes: (clusters: HierarchyRectangularNode<ClusterNode>[], leafs: HierarchyRectangularNode<LeafNode>[]) => void;

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

@@ -20,13 +20,19 @@ __export(useVisibleNodes_exports, {
   useVisibleNodes: () => useVisibleNodes
 });
 module.exports = __toCommonJS(useVisibleNodes_exports);
+var import_NameAccessorContext = require("../context/NameAccessorContext.js");
 var import_selectors = require("../store/selectors.js");
 var import_get_filtered_nodes = require("../utils/get-filtered-nodes.js");
 var import_get_nodes_value_sum = require("../utils/get-nodes-value-sum.js");
 const useVisibleNodes = (data) => {
   const groupsSelected = (0, import_selectors.useGroupsSelectedState)();
+  const nameAccessor = (0, import_NameAccessorContext.useNameAccessor)();
   const selectedIds = groupsSelected.map((group) => group.id);
-  const filteredNodes = (0, import_get_filtered_nodes.getFilteredNodes)(data.tree.children ?? [], selectedIds);
+  const filteredNodes = (0, import_get_filtered_nodes.getFilteredNodes)(
+    data.tree.children ?? [],
+    selectedIds,
+    nameAccessor
+  );
   const rootNodeValue = (0, import_get_nodes_value_sum.getNodesValueSum)(filteredNodes);
   return {
     ...data.tree,

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

@@ -4,6 +4,6 @@ export declare const useSetState: () => (action: TreeMapState | ((prev: TreeMapS
 export declare const useTreeMapState: () => TreeMapState;
 export declare const useHighlightedState: () => import("../../index.js")._LegendItem | undefined;
 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 useLeafNodesState: () => import("d3-hierarchy").HierarchyRectangularNode<import("../types/guards/node-guards.js").LeafNode>[];
+export declare const useClusterNodesState: () => import("d3-hierarchy").HierarchyRectangularNode<import("../types/guards/node-guards.js").ClusterNode>[];
 export declare const useColorMap: () => import("../types/internal.js").LegendColorMap;

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

@@ -1,4 +1,4 @@
-import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { ClusterNode, LeafNode } from './guards/node-guards.js';
 import { type LegendColorMap } from './internal.js';
 import { LegendItem } from '../../core/components/legend/categorical/types/legend.js';

package/charts/tree-map/utils/build-overlay-tooltip-data.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { Unit } from '@dynatrace-sdk/units';
 import type { Data } from '../../core/components/overlay-tooltip/types.js';
 import type { Formatter } from '../../core/types/formatter.js';

package/charts/tree-map/utils/get-cluster-position.d.ts

@@ -1,4 +1,4 @@
-import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';
+import type { HierarchyRectangularNode } from 'd3-hierarchy';
 import type { InternalTreeMapNode } from '../types/internal.js';
 export declare const getClusterPosition: (entry: HierarchyRectangularNode<InternalTreeMapNode>) => {
     x0: number;

package/charts/tree-map/utils/get-filtered-nodes.d.ts

@@ -1,2 +1,3 @@
 import { type InternalTreeMapNode } from '../types/internal.js';
-export declare const getFilteredNodes: (nodes: InternalTreeMapNode[], selectedIds: string[]) => InternalTreeMapNode[];
+import type { NameAccessor } from '../types/treemap.js';
+export declare const getFilteredNodes: (nodes: InternalTreeMapNode[], selectedIds: string[], nameAccessor?: NameAccessor) => InternalTreeMapNode[];

package/charts/tree-map/utils/get-filtered-nodes.js

@@ -20,9 +20,30 @@ __export(get_filtered_nodes_exports, {
   getFilteredNodes: () => getFilteredNodes
 });
 module.exports = __toCommonJS(get_filtered_nodes_exports);
-const getFilteredNodes = (nodes, selectedIds) => {
+var import_get_nodes_value_sum = require("./get-nodes-value-sum.js");
+const getFilteredNodes = (nodes, selectedIds, nameAccessor) => {
   if (!selectedIds.length) {
     return nodes;
   }
-  return nodes.filter((node) => selectedIds.includes(node.name));
+  if (!nameAccessor) {
+    return getClustersMatchingSelectedNames(nodes, selectedIds);
+  }
+  return getClustersWithSelectedLeaves(nodes, selectedIds, nameAccessor);
+};
+const getClustersMatchingSelectedNames = (clusters, selectedIds) => clusters.filter((cluster) => selectedIds.includes(cluster.name));
+const getClustersWithSelectedLeaves = (clusters, selectedIds, nameAccessor) => {
+  const filteredClusters = [];
+  for (const cluster of clusters) {
+    const matchingLeaves = cluster.children?.filter(
+      (leaf) => selectedIds.includes(String(leaf[nameAccessor]))
+    );
+    if (matchingLeaves?.length) {
+      filteredClusters.push({
+        ...cluster,
+        children: matchingLeaves,
+        value: (0, import_get_nodes_value_sum.getNodesValueSum)(matchingLeaves)
+      });
+    }
+  }
+  return filteredClusters;
 };