@dynatrace/strato-components 3.8.0 → 3.9.0

package/esm/charts/top-list/TopList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/top-list/TopList.tsx"],
-  "sourcesContent": ["import {\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport {\n  ROW_HEIGHT,\n  SERIES_ID_KEY,\n  SERIES_NAME_KEY,\n  X_AXIS_ID,\n  Y_AXIS_ID,\n} from './constants.js';\nimport { scrollContainer } from './TopList.sty.js';\nimport type { TopListProps } from './types/top-list.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport {\n  coerceSizeValue,\n  coerceSizeValueToPixels,\n} from '../core/utils/coerceSizeValue.js';\nimport { DEFAULT_CHART_HEIGHT } from '../xy-chart/constants/defaults.js';\nimport type { XYChartData, XYChartRef } from '../xy-chart/types/xy-chart.js';\nimport { XYChart } from '../xy-chart/XYChartRoot.js';\n\nexport type { TopListProps };\n\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'TopList';\n\n/**\n * A horizontal ranked-bar chart with labels inside bars and a hidden numerical\n * axis, implemented as a wrapper around XYChart. When the list has more items\n * than fit in `height`, the viewport becomes scrollable.\n * @public\n */\nexport const TopList = forwardRef<XYChartRef, TopListProps>(function TopList(\n  {\n    data,\n    labelAccessor,\n    valueAccessor,\n    categoryAccessor,\n    categoryFormatter,\n    valueFormatter,\n    seriesIdAccessor,\n    seriesNameAccessor,\n    comparator,\n    height = DEFAULT_CHART_HEIGHT,\n    // @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.\n    'data-dt-component': componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING,\n    ...xyChartProps\n  }: TopListProps,\n  forwardedRef: ForwardedRef<XYChartRef>,\n) {\n  const internalRef = useRef<XYChartRef>(null);\n  const mergedRef = useMergeRefs([internalRef, forwardedRef]);\n  const onScroll = useCallback(() => internalRef.current?.reset(), []);\n\n  const dataWithSyntheticSeries = useMemo(() => {\n    const mapped =\n      seriesIdAccessor !== undefined\n        ? data\n        : data.map((d) => ({\n            ...d,\n            [SERIES_ID_KEY]: 'series',\n            [SERIES_NAME_KEY]: 'Series',\n          }));\n\n    const sortDescending = (a: XYChartData, b: XYChartData) =>\n      Number(b[valueAccessor]) - Number(a[valueAccessor]);\n    return [...mapped].sort(comparator ?? sortDescending);\n  }, [comparator, data, seriesIdAccessor, valueAccessor]);\n\n  const viewportPx = coerceSizeValueToPixels(height) ?? DEFAULT_CHART_HEIGHT;\n  const contentHeight = Math.max(viewportPx, data.length * ROW_HEIGHT);\n\n  const legend = seriesIdAccessor === undefined && <XYChart.Legend hidden />;\n\n  return (\n    <div\n      className={scrollContainer}\n      style={{ height: coerceSizeValue(height) }}\n      onScroll={onScroll}\n      data-dt-component={componentName}\n    >\n      <XYChart\n        data={dataWithSyntheticSeries}\n        height={contentHeight}\n        ref={mergedRef}\n        {...xyChartProps}\n      >\n        <XYChart.BarSeries\n          variant=\"single\"\n          y0Accessor={categoryAccessor}\n          x1Accessor={valueAccessor}\n          labelAccessor={labelAccessor}\n          seriesIdAccessor={seriesIdAccessor ?? SERIES_ID_KEY}\n          nameAccessor={seriesNameAccessor ?? SERIES_NAME_KEY}\n          yAxisId={Y_AXIS_ID}\n          xAxisId={X_AXIS_ID}\n        />\n        <XYChart.XAxis\n          id={X_AXIS_ID}\n          type=\"numerical\"\n          position=\"bottom\"\n          hidden\n          disableZoom\n          disablePan\n          formatter={valueFormatter}\n        />\n        <XYChart.YAxis\n          id={Y_AXIS_ID}\n          type=\"categorical\"\n          position=\"left\"\n          formatter={categoryFormatter}\n        />\n        {legend}\n      </XYChart>\n    </div>\n  );\n});\n"],
-  "mappings": "AA4EmD,cAS7C,YAT6C;AA5EnD;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEhC,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAErC,SAAS,eAAe;AAIxB,MAAM,sCAAsC;AAQrC,MAAM,UAAU,WAAqC,SAASA,SACnE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA;AAAA,EAET,qBAAqB,gBAAgB;AAAA,EACrC,GAAG;AACL,GACA,cACA;AACA,QAAM,cAAc,OAAmB,IAAI;AAC3C,QAAM,YAAY,aAAa,CAAC,aAAa,YAAY,CAAC;AAC1D,QAAM,WAAW,YAAY,MAAM,YAAY,SAAS,MAAM,GAAG,CAAC,CAAC;AAEnE,QAAM,0BAA0B,QAAQ,MAAM;AAC5C,UAAM,SACJ,qBAAqB,SACjB,OACA,KAAK,IAAI,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,CAAC,aAAa,GAAG;AAAA,MACjB,CAAC,eAAe,GAAG;AAAA,IACrB,EAAE;AAER,UAAM,iBAAiB,CAAC,GAAgB,MACtC,OAAO,EAAE,aAAa,CAAC,IAAI,OAAO,EAAE,aAAa,CAAC;AACpD,WAAO,CAAC,GAAG,MAAM,EAAE,KAAK,cAAc,cAAc;AAAA,EACtD,GAAG,CAAC,YAAY,MAAM,kBAAkB,aAAa,CAAC;AAEtD,QAAM,aAAa,wBAAwB,MAAM,KAAK;AACtD,QAAM,gBAAgB,KAAK,IAAI,YAAY,KAAK,SAAS,UAAU;AAEnE,QAAM,SAAS,qBAAqB,UAAa,oBAAC,QAAQ,QAAR,EAAe,QAAM,MAAC;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,QAAQ,gBAAgB,MAAM,EAAE;AAAA,MACzC;AAAA,MACA,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,KAAK;AAAA,UACJ,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,SAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ;AAAA,gBACA,kBAAkB,oBAAoB;AAAA,gBACtC,cAAc,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,SAAS;AAAA;AAAA,YACX;AAAA,YACA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,IAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,QAAM;AAAA,gBACN,aAAW;AAAA,gBACX,YAAU;AAAA,gBACV,WAAW;AAAA;AAAA,YACb;AAAA,YACA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,IAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,WAAW;AAAA;AAAA,YACb;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;",
+  "sourcesContent": ["import {\n  type ForwardedRef,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport {\n  ROW_HEIGHT,\n  SERIES_ID_KEY,\n  SERIES_NAME_KEY,\n  X_AXIS_ID,\n  Y_AXIS_ID,\n} from './constants.js';\nimport { scrollContainer } from './TopList.sty.js';\nimport type { TopListProps } from './types/top-list.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport {\n  coerceSizeValue,\n  coerceSizeValueToPixels,\n} from '../core/utils/coerceSizeValue.js';\nimport { DEFAULT_CHART_HEIGHT } from '../xy-chart/constants/defaults.js';\nimport type { XYChartData, XYChartRef } from '../xy-chart/types/xy-chart.js';\nimport { XYChart } from '../xy-chart/XYChartRoot.js';\n\nexport type { TopListProps };\n\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'TopList';\n\nconst TopListRoot = forwardRef<XYChartRef, TopListProps>(function TopList(\n  {\n    data,\n    labelAccessor,\n    valueAccessor,\n    categoryAccessor,\n    categoryFormatter,\n    valueFormatter,\n    seriesIdAccessor,\n    seriesNameAccessor,\n    comparator,\n    children,\n    height = DEFAULT_CHART_HEIGHT,\n    // @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.\n    'data-dt-component': componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING,\n    ...xyChartProps\n  }: TopListProps,\n  forwardedRef: ForwardedRef<XYChartRef>,\n) {\n  const internalRef = useRef<XYChartRef>(null);\n  const mergedRef = useMergeRefs([internalRef, forwardedRef]);\n  const onScroll = useCallback(() => internalRef.current?.reset(), []);\n\n  const dataWithSyntheticSeries = useMemo(() => {\n    const mapped =\n      seriesIdAccessor !== undefined\n        ? data\n        : data.map((d) => ({\n            ...d,\n            [SERIES_ID_KEY]: 'series',\n            [SERIES_NAME_KEY]: 'Series',\n          }));\n\n    const sortDescending = (a: XYChartData, b: XYChartData) =>\n      Number(b[valueAccessor]) - Number(a[valueAccessor]);\n    return [...mapped].sort(comparator ?? sortDescending);\n  }, [comparator, data, seriesIdAccessor, valueAccessor]);\n\n  const viewportPx = coerceSizeValueToPixels(height) ?? DEFAULT_CHART_HEIGHT;\n  const contentHeight = Math.max(viewportPx, data.length * ROW_HEIGHT);\n\n  const legend = seriesIdAccessor === undefined && <XYChart.Legend hidden />;\n\n  return (\n    <div\n      className={scrollContainer}\n      style={{ height: coerceSizeValue(height) }}\n      onScroll={onScroll}\n      data-dt-component={componentName}\n    >\n      <XYChart\n        data={dataWithSyntheticSeries}\n        height={contentHeight}\n        ref={mergedRef}\n        {...xyChartProps}\n      >\n        <XYChart.BarSeries\n          variant=\"single\"\n          y0Accessor={categoryAccessor}\n          x1Accessor={valueAccessor}\n          labelAccessor={labelAccessor}\n          seriesIdAccessor={seriesIdAccessor ?? SERIES_ID_KEY}\n          nameAccessor={seriesNameAccessor ?? SERIES_NAME_KEY}\n          yAxisId={Y_AXIS_ID}\n          xAxisId={X_AXIS_ID}\n        />\n        <XYChart.XAxis\n          id={X_AXIS_ID}\n          type=\"numerical\"\n          position=\"bottom\"\n          hidden\n          disableZoom\n          disablePan\n          formatter={valueFormatter}\n        />\n        <XYChart.YAxis\n          id={Y_AXIS_ID}\n          type=\"categorical\"\n          position=\"left\"\n          formatter={categoryFormatter}\n        />\n        {legend}\n        {children}\n      </XYChart>\n    </div>\n  );\n});\n\n/**\n * A horizontal ranked-bar chart with labels inside bars and a hidden numerical\n * axis, implemented as a wrapper around XYChart. When the list has more items\n * than fit in `height`, the viewport becomes scrollable.\n *\n * Slots such as `<TopList.ColorRule>` can be passed as children to customize\n * bar colors per datapoint; they are forwarded to the internal `XYChart`.\n * @public\n */\nexport const TopList = Object.assign(TopListRoot, {\n  /**\n   * Apply a conditional color override to bars matching the rule. Same\n   * component reference as `XYChart.ColorRule` and `TimeseriesChart.ColorRule`.\n   */\n  ColorRule,\n});\n\n(TopList as typeof TopList & { displayName: string }).displayName = 'TopList';\n"],
+  "mappings": "AAwEmD,cAS7C,YAT6C;AAxEnD;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AAErC,SAAS,eAAe;AAIxB,MAAM,sCAAsC;AAE5C,MAAM,cAAc,WAAqC,SAAS,QAChE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA;AAAA,EAET,qBAAqB,gBAAgB;AAAA,EACrC,GAAG;AACL,GACA,cACA;AACA,QAAM,cAAc,OAAmB,IAAI;AAC3C,QAAM,YAAY,aAAa,CAAC,aAAa,YAAY,CAAC;AAC1D,QAAM,WAAW,YAAY,MAAM,YAAY,SAAS,MAAM,GAAG,CAAC,CAAC;AAEnE,QAAM,0BAA0B,QAAQ,MAAM;AAC5C,UAAM,SACJ,qBAAqB,SACjB,OACA,KAAK,IAAI,CAAC,OAAO;AAAA,MACf,GAAG;AAAA,MACH,CAAC,aAAa,GAAG;AAAA,MACjB,CAAC,eAAe,GAAG;AAAA,IACrB,EAAE;AAER,UAAM,iBAAiB,CAAC,GAAgB,MACtC,OAAO,EAAE,aAAa,CAAC,IAAI,OAAO,EAAE,aAAa,CAAC;AACpD,WAAO,CAAC,GAAG,MAAM,EAAE,KAAK,cAAc,cAAc;AAAA,EACtD,GAAG,CAAC,YAAY,MAAM,kBAAkB,aAAa,CAAC;AAEtD,QAAM,aAAa,wBAAwB,MAAM,KAAK;AACtD,QAAM,gBAAgB,KAAK,IAAI,YAAY,KAAK,SAAS,UAAU;AAEnE,QAAM,SAAS,qBAAqB,UAAa,oBAAC,QAAQ,QAAR,EAAe,QAAM,MAAC;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO,EAAE,QAAQ,gBAAgB,MAAM,EAAE;AAAA,MACzC;AAAA,MACA,qBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,KAAK;AAAA,UACJ,GAAG;AAAA,UAEJ;AAAA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,SAAQ;AAAA,gBACR,YAAY;AAAA,gBACZ,YAAY;AAAA,gBACZ;AAAA,gBACA,kBAAkB,oBAAoB;AAAA,gBACtC,cAAc,sBAAsB;AAAA,gBACpC,SAAS;AAAA,gBACT,SAAS;AAAA;AAAA,YACX;AAAA,YACA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,IAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,QAAM;AAAA,gBACN,aAAW;AAAA,gBACX,YAAU;AAAA,gBACV,WAAW;AAAA;AAAA,YACb;AAAA,YACA;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,IAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,WAAW;AAAA;AAAA,YACb;AAAA,YACC;AAAA,YACA;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAWM,MAAMA,WAAU,OAAO,OAAO,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhD;AACF,CAAC;AAEAA,SAAqD,cAAc;",
   "names": ["TopList"]
 }

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

@@ -1,5 +1,5 @@
 import "./TopList.css";
-var scrollContainer = "_jwlby60-3-8-0";
+var scrollContainer = "_jwlby60-3-9-0";
 export {
   scrollContainer
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/top-list/TopList.css.ts"],
-  "sourcesContent": ["import './TopList.css';\nexport var scrollContainer = '_jwlby60-3-8-0';"],
+  "sourcesContent": ["import './TopList.css';\nexport var scrollContainer = '_jwlby60-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapCanvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapCanvas.tsx"],
-  "sourcesContent": ["import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';\nimport { useMemo, type JSX } from 'react';\n\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { TreeMapSquareRenderer } from './canvas/TreeMapSquareRenderer.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useSetHierarchyNodes } from '../hooks/useSetHierarchyNodes.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\nimport { getNodePosition } from '../utils/get-node-position.js';\nimport { shouldDrawLeafNode } from '../utils/should-draw-leaf-node.js';\nimport { splitNodesByDepth } from '../utils/split-nodes-by-depth.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\ninterface TreeMapCanvasProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCanvas = ({\n  treeMapData,\n  highlightedItem,\n  highlightingMap,\n}: TreeMapCanvasProps): JSX.Element => {\n  const labelsDisplay = useLabelsDisplay();\n\n  const nodes = useMemo(\n    () => treeMapData.descendants().reverse(),\n    [treeMapData],\n  );\n  const { clusters, leafs } = useMemo(() => splitNodesByDepth(nodes), [nodes]);\n\n  useSetHierarchyNodes(clusters, leafs);\n\n  const labelsToDisplay: string[] = [\n    LABELS_DISPLAY.Nodes,\n    LABELS_DISPLAY.All,\n    LABELS_DISPLAY.ClustersAndValues,\n  ];\n  const showLabel = labelsToDisplay.includes(labelsDisplay);\n  const withValueOnly = labelsDisplay === LABELS_DISPLAY.ClustersAndValues;\n\n  const squares = leafs.map((node) => {\n    const { x, y } = getNodePosition(node);\n    const { width, height } = getNodeDimension(node);\n    const color = getNodeColor(node);\n    const opacity = getNodeOpacity(node, highlightingMap, highlightedItem);\n\n    const shouldDraw = shouldDrawLeafNode(node);\n    const hasParentLabels = withParentLabel(labelsDisplay);\n    const skipDrawing = !shouldDraw && hasParentLabels;\n\n    return (\n      <TreeMapSquareRenderer\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        color={color}\n        opacity={opacity}\n        name={node.data.name}\n        value={node.data.formattedValue ?? ''}\n        skipDrawing={skipDrawing}\n        withLabel={showLabel}\n        withValueOnly={withValueOnly}\n        key={node.data.id}\n      />\n    );\n  });\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{squares}</>;\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\nimport { useMemo, type JSX } from 'react';\n\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { TreeMapSquareRenderer } from './canvas/TreeMapSquareRenderer.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useSetHierarchyNodes } from '../hooks/useSetHierarchyNodes.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\nimport { getNodePosition } from '../utils/get-node-position.js';\nimport { shouldDrawLeafNode } from '../utils/should-draw-leaf-node.js';\nimport { splitNodesByDepth } from '../utils/split-nodes-by-depth.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\ninterface TreeMapCanvasProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCanvas = ({\n  treeMapData,\n  highlightedItem,\n  highlightingMap,\n}: TreeMapCanvasProps): JSX.Element => {\n  const labelsDisplay = useLabelsDisplay();\n\n  const nodes = useMemo(\n    () => treeMapData.descendants().reverse(),\n    [treeMapData],\n  );\n  const { clusters, leafs } = useMemo(() => splitNodesByDepth(nodes), [nodes]);\n\n  useSetHierarchyNodes(clusters, leafs);\n\n  const labelsToDisplay: string[] = [\n    LABELS_DISPLAY.Nodes,\n    LABELS_DISPLAY.All,\n    LABELS_DISPLAY.ClustersAndValues,\n  ];\n  const showLabel = labelsToDisplay.includes(labelsDisplay);\n  const withValueOnly = labelsDisplay === LABELS_DISPLAY.ClustersAndValues;\n\n  const squares = leafs.map((node) => {\n    const { x, y } = getNodePosition(node);\n    const { width, height } = getNodeDimension(node);\n    const color = getNodeColor(node);\n    const opacity = getNodeOpacity(node, highlightingMap, highlightedItem);\n\n    const shouldDraw = shouldDrawLeafNode(node);\n    const hasParentLabels = withParentLabel(labelsDisplay);\n    const skipDrawing = !shouldDraw && hasParentLabels;\n\n    return (\n      <TreeMapSquareRenderer\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        color={color}\n        opacity={opacity}\n        name={node.data.name}\n        value={node.data.formattedValue ?? ''}\n        skipDrawing={skipDrawing}\n        withLabel={showLabel}\n        withValueOnly={withValueOnly}\n        key={node.data.id}\n      />\n    );\n  });\n\n  // eslint-disable-next-line react/jsx-no-useless-fragment\n  return <>{squares}</>;\n};\n"],
   "mappings": "AA4DM,SAkBG,UAlBH;AA3DN,SAAS,eAAyB;AAElC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAEtC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AAKrC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAQzB,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,QAAQ;AAAA,IACZ,MAAM,YAAY,YAAY,EAAE,QAAQ;AAAA,IACxC,CAAC,WAAW;AAAA,EACd;AACA,QAAM,EAAE,UAAU,MAAM,IAAI,QAAQ,MAAM,kBAAkB,KAAK,GAAG,CAAC,KAAK,CAAC;AAE3E,uBAAqB,UAAU,KAAK;AAEpC,QAAM,kBAA4B;AAAA,IAChC,eAAe;AAAA,IACf,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AACA,QAAM,YAAY,gBAAgB,SAAS,aAAa;AACxD,QAAM,gBAAgB,kBAAkB,eAAe;AAEvD,QAAM,UAAU,MAAM,IAAI,CAAC,SAAS;AAClC,UAAM,EAAE,GAAG,EAAE,IAAI,gBAAgB,IAAI;AACrC,UAAM,EAAE,OAAO,OAAO,IAAI,iBAAiB,IAAI;AAC/C,UAAM,QAAQ,aAAa,IAAI;AAC/B,UAAM,UAAU,eAAe,MAAM,iBAAiB,eAAe;AAErE,UAAM,aAAa,mBAAmB,IAAI;AAC1C,UAAM,kBAAkB,gBAAgB,aAAa;AACrD,UAAM,cAAc,CAAC,cAAc;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,KAAK,KAAK;AAAA,QAChB,OAAO,KAAK,KAAK,kBAAkB;AAAA,QACnC;AAAA,QACA,WAAW;AAAA,QACX;AAAA;AAAA,MACK,KAAK,KAAK;AAAA,IACjB;AAAA,EAEJ,CAAC;AAGD,SAAO,gCAAG,mBAAQ;AACpB;",
   "names": []
 }

package/esm/charts/tree-map/components/TreeMapCluster.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapCluster.tsx"],
-  "sourcesContent": ["import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\nimport { useMemo, Fragment } from 'react';\n\nimport { useCurrentTheme } from '../../../core/hooks/useCurrentTheme.js';\nimport {\n  CLUSTER_LABEL_OFFSET_X,\n  CLUSTER_LABEL_OFFSET_Y,\n  DARK_LABEL_TEXT,\n  LIGHT_LABEL_TEXT,\n  MIN_CLUSTER_HEIGHT,\n} from '../constants.js';\nimport { TreeMapClusterBorder } from './canvas/TreeMapClusterBorder.js';\nimport { TreeMapNodeLabel } from './canvas/TreeMapNodeLabel.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getClusterPosition } from '../utils/get-cluster-position.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\n\nexport interface TreeMapClusterProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCluster = (props: TreeMapClusterProps) => {\n  const { treeMapData, highlightedItem, highlightingMap } = props;\n\n  const theme = useCurrentTheme();\n\n  const clusterNodes = useMemo(\n    () =>\n      treeMapData\n        .descendants()\n        .reverse()\n        .filter((entry) => entry.depth === 1),\n    [treeMapData],\n  );\n\n  return clusterNodes.map((clusterNode) => {\n    const { x0, y0 } = getClusterPosition(clusterNode);\n    const { width, height } = getNodeDimension(clusterNode);\n    const labelColor = theme === 'light' ? DARK_LABEL_TEXT : LIGHT_LABEL_TEXT;\n    const borderColor = getNodeColor(clusterNode);\n\n    const opacity = getNodeOpacity(\n      clusterNode,\n      highlightingMap,\n      highlightedItem,\n    );\n\n    const doesLabelFit = height >= MIN_CLUSTER_HEIGHT;\n\n    return (\n      <Fragment key={`${clusterNode.data.name}}`}>\n        <TreeMapClusterBorder\n          x={x0}\n          y={y0}\n          color={borderColor}\n          width={width}\n          height={height}\n          opacity={opacity}\n        />\n        {doesLabelFit && (\n          <TreeMapNodeLabel\n            x={x0 + width / 2}\n            y={y0 + CLUSTER_LABEL_OFFSET_Y}\n            maxWidth={width - CLUSTER_LABEL_OFFSET_X}\n            label={clusterNode.data.name}\n            color={labelColor}\n            opacity={opacity}\n          />\n        )}\n      </Fragment>\n    );\n  });\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\nimport { useMemo, Fragment } from 'react';\n\nimport { useCurrentTheme } from '../../../core/hooks/useCurrentTheme.js';\nimport {\n  CLUSTER_LABEL_OFFSET_X,\n  CLUSTER_LABEL_OFFSET_Y,\n  DARK_LABEL_TEXT,\n  LIGHT_LABEL_TEXT,\n  MIN_CLUSTER_HEIGHT,\n} from '../constants.js';\nimport { TreeMapClusterBorder } from './canvas/TreeMapClusterBorder.js';\nimport { TreeMapNodeLabel } from './canvas/TreeMapNodeLabel.js';\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport {\n  type HighlightingMap,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { getClusterPosition } from '../utils/get-cluster-position.js';\nimport { getNodeColor } from '../utils/get-node-color.js';\nimport { getNodeDimension } from '../utils/get-node-dimension.js';\nimport { getNodeOpacity } from '../utils/get-node-opacity.js';\n\nexport interface TreeMapClusterProps {\n  treeMapData: HierarchyRectangularNode<InternalTreeMapNode>;\n  highlightedItem?: LegendItem;\n  highlightingMap: HighlightingMap;\n}\n\nexport const TreeMapCluster = (props: TreeMapClusterProps) => {\n  const { treeMapData, highlightedItem, highlightingMap } = props;\n\n  const theme = useCurrentTheme();\n\n  const clusterNodes = useMemo(\n    () =>\n      treeMapData\n        .descendants()\n        .reverse()\n        .filter((entry) => entry.depth === 1),\n    [treeMapData],\n  );\n\n  return clusterNodes.map((clusterNode) => {\n    const { x0, y0 } = getClusterPosition(clusterNode);\n    const { width, height } = getNodeDimension(clusterNode);\n    const labelColor = theme === 'light' ? DARK_LABEL_TEXT : LIGHT_LABEL_TEXT;\n    const borderColor = getNodeColor(clusterNode);\n\n    const opacity = getNodeOpacity(\n      clusterNode,\n      highlightingMap,\n      highlightedItem,\n    );\n\n    const doesLabelFit = height >= MIN_CLUSTER_HEIGHT;\n\n    return (\n      <Fragment key={`${clusterNode.data.name}}`}>\n        <TreeMapClusterBorder\n          x={x0}\n          y={y0}\n          color={borderColor}\n          width={width}\n          height={height}\n          opacity={opacity}\n        />\n        {doesLabelFit && (\n          <TreeMapNodeLabel\n            x={x0 + width / 2}\n            y={y0 + CLUSTER_LABEL_OFFSET_Y}\n            maxWidth={width - CLUSTER_LABEL_OFFSET_X}\n            label={clusterNode.data.name}\n            color={labelColor}\n            opacity={opacity}\n          />\n        )}\n      </Fragment>\n    );\n  });\n};\n"],
   "mappings": "AA0DM,SACE,KADF;AAzDN,SAAS,SAAS,gBAAgB;AAElC,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAMjC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAQxB,MAAM,iBAAiB,CAAC,UAA+B;AAC5D,QAAM,EAAE,aAAa,iBAAiB,gBAAgB,IAAI;AAE1D,QAAM,QAAQ,gBAAgB;AAE9B,QAAM,eAAe;AAAA,IACnB,MACE,YACG,YAAY,EACZ,QAAQ,EACR,OAAO,CAAC,UAAU,MAAM,UAAU,CAAC;AAAA,IACxC,CAAC,WAAW;AAAA,EACd;AAEA,SAAO,aAAa,IAAI,CAAC,gBAAgB;AACvC,UAAM,EAAE,IAAI,GAAG,IAAI,mBAAmB,WAAW;AACjD,UAAM,EAAE,OAAO,OAAO,IAAI,iBAAiB,WAAW;AACtD,UAAM,aAAa,UAAU,UAAU,kBAAkB;AACzD,UAAM,cAAc,aAAa,WAAW;AAE5C,UAAM,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,UAAM,eAAe,UAAU;AAE/B,WACE,qBAAC,YACC;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UACH,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC,gBACC;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,KAAK,QAAQ;AAAA,UAChB,GAAG,KAAK;AAAA,UACR,UAAU,QAAQ;AAAA,UAClB,OAAO,YAAY,KAAK;AAAA,UACxB,OAAO;AAAA,UACP;AAAA;AAAA,MACF;AAAA,SAjBW,GAAG,YAAY,KAAK,IAAI,GAmBvC;AAAA,EAEJ,CAAC;AACH;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Treemap, hierarchy, treemapSquarify } from "@visx/hierarchy";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
 import {
   forwardRef,
   useMemo
@@ -30,8 +30,16 @@ const TreeMapInternal = forwardRef(
     const { dataForRendering } = useTreeMapAggregationData();
     const highlightingMap = useTreeMapHighlightingMap();
     const hasParentLabels = withParentLabel(labelsDisplay);
-    const root = useMemo(() => hierarchy(dataForRendering), [dataForRendering]);
+    const root = useMemo(
+      () => hierarchy(dataForRendering),
+      [dataForRendering]
+    );
     const highlightedItem = useHighlightedState();
+    const layout = treemap().tile(treemapSquarify).size([roundedWidth, roundedHeight]).padding((node) => nodePadding(node, hasParentLabels)).round(true);
+    if (hasParentLabels) {
+      layout.paddingOuter((node) => nodePaddingOuter(node)).paddingTop((node) => nodePaddingTop(node));
+    }
+    const rootNode = layout(root.sum((d) => d.children ? 0 : d.value));
     return /* @__PURE__ */ jsxs("div", { ref: forwardedRef, "aria-label": TREEMAP_CHART_ARIA_LABEL, role: "img", children: [
       children,
       /* @__PURE__ */ jsx(
@@ -40,36 +48,24 @@ const TreeMapInternal = forwardRef(
           value: {
             shapeRefs: /* @__PURE__ */ new Map()
           },
-          children: /* @__PURE__ */ jsx(Canvas, { width: roundedWidth, height: roundedHeight, children: /* @__PURE__ */ jsx(
-            Treemap,
-            {
-              root,
-              size: [roundedWidth, roundedHeight],
-              tile: treemapSquarify,
-              padding: (node) => nodePadding(node, hasParentLabels),
-              paddingTop: hasParentLabels ? (node) => nodePaddingTop(node) : void 0,
-              paddingOuter: hasParentLabels ? (node) => nodePaddingOuter(node) : void 0,
-              round: true,
-              children: (rootNode) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                hasParentLabels && /* @__PURE__ */ jsx(
-                  TreeMapCluster,
-                  {
-                    treeMapData: rootNode,
-                    highlightedItem,
-                    highlightingMap
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  TreeMapCanvas,
-                  {
-                    treeMapData: rootNode,
-                    highlightedItem,
-                    highlightingMap
-                  }
-                )
-              ] })
-            }
-          ) })
+          children: /* @__PURE__ */ jsxs(Canvas, { width: roundedWidth, height: roundedHeight, children: [
+            hasParentLabels && /* @__PURE__ */ jsx(
+              TreeMapCluster,
+              {
+                treeMapData: rootNode,
+                highlightedItem,
+                highlightingMap
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TreeMapCanvas,
+              {
+                treeMapData: rootNode,
+                highlightedItem,
+                highlightingMap
+              }
+            )
+          ] })
         }
       )
     ] });

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/components/TreeMapInternal.tsx"],
-  "sourcesContent": ["import { Treemap, hierarchy, treemapSquarify } from '@visx/hierarchy';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n  type JSX,\n  type MutableRefObject,\n} from 'react';\n\nimport { TreeMapCanvas } from './TreeMapCanvas.js';\nimport { TreeMapCluster } from './TreeMapCluster.js';\nimport { Canvas } from '../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../core/components/canvas/CanvasContext.js';\nimport { CanvasShape } from '../../core/components/canvas/types/canvas-shape.js';\nimport { useGraphSize } from '../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { TREEMAP_CHART_ARIA_LABEL } from '../constants.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useTreeMapAggregationData } from '../context/TreeMapAggregationDataContext.js';\nimport { useTreeMapHighlightingMap } from '../context/TreeMapHighlightingMapContext.js';\nimport { useHighlightedState } from '../store/selectors.js';\nimport {\n  nodePadding,\n  nodePaddingOuter,\n  nodePaddingTop,\n} from '../utils/node-padding.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\nexport const TreeMapInternal = forwardRef<HTMLDivElement, PropsWithChildren>(\n  (props, forwardedRef): JSX.Element => {\n    const { children } = props;\n    const { width, height } = useGraphSize();\n    const roundedWidth = Math.floor(width);\n    const roundedHeight = Math.floor(height);\n    const labelsDisplay = useLabelsDisplay();\n    const { dataForRendering } = useTreeMapAggregationData();\n    const highlightingMap = useTreeMapHighlightingMap();\n\n    const hasParentLabels = withParentLabel(labelsDisplay);\n\n    // build hierarchy with concrete coordinates and width/size of nodes based on tree structure\n    const root = useMemo(() => hierarchy(dataForRendering), [dataForRendering]);\n\n    const highlightedItem = useHighlightedState();\n\n    return (\n      <div ref={forwardedRef} aria-label={TREEMAP_CHART_ARIA_LABEL} role=\"img\">\n        {children}\n        <CanvasContext.Provider\n          value={{\n            shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n          }}\n        >\n          <Canvas width={roundedWidth} height={roundedHeight}>\n            <Treemap\n              root={root}\n              size={[roundedWidth, roundedHeight]}\n              tile={treemapSquarify}\n              padding={(node) => nodePadding(node, hasParentLabels)}\n              paddingTop={\n                hasParentLabels ? (node) => nodePaddingTop(node) : undefined\n              }\n              paddingOuter={\n                hasParentLabels ? (node) => nodePaddingOuter(node) : undefined\n              }\n              round\n            >\n              {(rootNode) => (\n                <>\n                  {hasParentLabels && (\n                    <TreeMapCluster\n                      treeMapData={rootNode}\n                      highlightedItem={highlightedItem}\n                      highlightingMap={highlightingMap}\n                    />\n                  )}\n                  <TreeMapCanvas\n                    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n                    // @ts-ignore Strict mode transition - needs to be investigated\n                    treeMapData={rootNode}\n                    highlightedItem={highlightedItem}\n                    highlightingMap={highlightingMap}\n                  />\n                </>\n              )}\n            </Treemap>\n          </Canvas>\n        </CanvasContext.Provider>\n      </div>\n    );\n  },\n);\n"],
-  "mappings": "AAmEgB,mBAEI,KAFJ;AAnEhB,SAAS,SAAS,WAAW,uBAAuB;AACpD;AAAA,EAEE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEzB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAA8B;AACpC,UAAM,EAAE,SAAS,IAAI;AACrB,UAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AACvC,UAAM,eAAe,KAAK,MAAM,KAAK;AACrC,UAAM,gBAAgB,KAAK,MAAM,MAAM;AACvC,UAAM,gBAAgB,iBAAiB;AACvC,UAAM,EAAE,iBAAiB,IAAI,0BAA0B;AACvD,UAAM,kBAAkB,0BAA0B;AAElD,UAAM,kBAAkB,gBAAgB,aAAa;AAGrD,UAAM,OAAO,QAAQ,MAAM,UAAU,gBAAgB,GAAG,CAAC,gBAAgB,CAAC;AAE1E,UAAM,kBAAkB,oBAAoB;AAE5C,WACE,qBAAC,SAAI,KAAK,cAAc,cAAY,0BAA0B,MAAK,OAChE;AAAA;AAAA,MACD;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACC,OAAO;AAAA,YACL,WAAW,oBAAI,IAA2C;AAAA,UAC5D;AAAA,UAEA,8BAAC,UAAO,OAAO,cAAc,QAAQ,eACnC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,MAAM,CAAC,cAAc,aAAa;AAAA,cAClC,MAAM;AAAA,cACN,SAAS,CAAC,SAAS,YAAY,MAAM,eAAe;AAAA,cACpD,YACE,kBAAkB,CAAC,SAAS,eAAe,IAAI,IAAI;AAAA,cAErD,cACE,kBAAkB,CAAC,SAAS,iBAAiB,IAAI,IAAI;AAAA,cAEvD,OAAK;AAAA,cAEJ,WAAC,aACA,iCACG;AAAA,mCACC;AAAA,kBAAC;AAAA;AAAA,oBACC,aAAa;AAAA,oBACb;AAAA,oBACA;AAAA;AAAA,gBACF;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBAGC,aAAa;AAAA,oBACb;AAAA,oBACA;AAAA;AAAA,gBACF;AAAA,iBACF;AAAA;AAAA,UAEJ,GACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { hierarchy, treemap, treemapSquarify } from 'd3-hierarchy';\nimport {\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n  type JSX,\n  type MutableRefObject,\n} from 'react';\n\nimport { TreeMapCanvas } from './TreeMapCanvas.js';\nimport { TreeMapCluster } from './TreeMapCluster.js';\nimport { Canvas } from '../../core/components/canvas/Canvas.js';\nimport { CanvasContext } from '../../core/components/canvas/CanvasContext.js';\nimport { CanvasShape } from '../../core/components/canvas/types/canvas-shape.js';\nimport { useGraphSize } from '../../core/components/chart-layout/hooks/useGraphSize.js';\nimport { TREEMAP_CHART_ARIA_LABEL } from '../constants.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useTreeMapAggregationData } from '../context/TreeMapAggregationDataContext.js';\nimport { useTreeMapHighlightingMap } from '../context/TreeMapHighlightingMapContext.js';\nimport { useHighlightedState } from '../store/selectors.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\nimport {\n  nodePadding,\n  nodePaddingOuter,\n  nodePaddingTop,\n} from '../utils/node-padding.js';\nimport { withParentLabel } from '../utils/with-parent-label.js';\n\nexport const TreeMapInternal = forwardRef<HTMLDivElement, PropsWithChildren>(\n  (props, forwardedRef): JSX.Element => {\n    const { children } = props;\n    const { width, height } = useGraphSize();\n    const roundedWidth = Math.floor(width);\n    const roundedHeight = Math.floor(height);\n    const labelsDisplay = useLabelsDisplay();\n    const { dataForRendering } = useTreeMapAggregationData();\n    const highlightingMap = useTreeMapHighlightingMap();\n\n    const hasParentLabels = withParentLabel(labelsDisplay);\n\n    // build hierarchy with concrete coordinates and width/size of nodes based on tree structure\n    const root = useMemo(\n      () => hierarchy<InternalTreeMapNode>(dataForRendering),\n      [dataForRendering],\n    );\n\n    const highlightedItem = useHighlightedState();\n\n    const layout = treemap<InternalTreeMapNode>()\n      .tile(treemapSquarify)\n      .size([roundedWidth, roundedHeight])\n      .padding((node) => nodePadding(node, hasParentLabels))\n      .round(true);\n\n    if (hasParentLabels) {\n      layout\n        .paddingOuter((node) => nodePaddingOuter(node))\n        .paddingTop((node) => nodePaddingTop(node));\n    }\n\n    const rootNode = layout(root.sum((d) => (d.children ? 0 : d.value)));\n\n    return (\n      <div ref={forwardedRef} aria-label={TREEMAP_CHART_ARIA_LABEL} role=\"img\">\n        {children}\n        <CanvasContext.Provider\n          value={{\n            shapeRefs: new Map<string, MutableRefObject<CanvasShape>>(),\n          }}\n        >\n          <Canvas width={roundedWidth} height={roundedHeight}>\n            {hasParentLabels && (\n              <TreeMapCluster\n                treeMapData={rootNode}\n                highlightedItem={highlightedItem}\n                highlightingMap={highlightingMap}\n              />\n            )}\n            <TreeMapCanvas\n              // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n              // @ts-ignore Strict mode transition - needs to be investigated\n              treeMapData={rootNode}\n              highlightedItem={highlightedItem}\n              highlightingMap={highlightingMap}\n            />\n          </Canvas>\n        </CanvasContext.Provider>\n      </div>\n    );\n  },\n);\n"],
+  "mappings": "AAsEU,SAEI,KAFJ;AAtEV,SAAS,WAAW,SAAS,uBAAuB;AACpD;AAAA,EAEE;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAE9B,SAAS,oBAAoB;AAC7B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AACjC,SAAS,iCAAiC;AAC1C,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AAEpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEzB,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAA8B;AACpC,UAAM,EAAE,SAAS,IAAI;AACrB,UAAM,EAAE,OAAO,OAAO,IAAI,aAAa;AACvC,UAAM,eAAe,KAAK,MAAM,KAAK;AACrC,UAAM,gBAAgB,KAAK,MAAM,MAAM;AACvC,UAAM,gBAAgB,iBAAiB;AACvC,UAAM,EAAE,iBAAiB,IAAI,0BAA0B;AACvD,UAAM,kBAAkB,0BAA0B;AAElD,UAAM,kBAAkB,gBAAgB,aAAa;AAGrD,UAAM,OAAO;AAAA,MACX,MAAM,UAA+B,gBAAgB;AAAA,MACrD,CAAC,gBAAgB;AAAA,IACnB;AAEA,UAAM,kBAAkB,oBAAoB;AAE5C,UAAM,SAAS,QAA6B,EACzC,KAAK,eAAe,EACpB,KAAK,CAAC,cAAc,aAAa,CAAC,EAClC,QAAQ,CAAC,SAAS,YAAY,MAAM,eAAe,CAAC,EACpD,MAAM,IAAI;AAEb,QAAI,iBAAiB;AACnB,aACG,aAAa,CAAC,SAAS,iBAAiB,IAAI,CAAC,EAC7C,WAAW,CAAC,SAAS,eAAe,IAAI,CAAC;AAAA,IAC9C;AAEA,UAAM,WAAW,OAAO,KAAK,IAAI,CAAC,MAAO,EAAE,WAAW,IAAI,EAAE,KAAM,CAAC;AAEnE,WACE,qBAAC,SAAI,KAAK,cAAc,cAAY,0BAA0B,MAAK,OAChE;AAAA;AAAA,MACD;AAAA,QAAC,cAAc;AAAA,QAAd;AAAA,UACC,OAAO;AAAA,YACL,WAAW,oBAAI,IAA2C;AAAA,UAC5D;AAAA,UAEA,+BAAC,UAAO,OAAO,cAAc,QAAQ,eAClC;AAAA,+BACC;AAAA,cAAC;AAAA;AAAA,gBACC,aAAa;AAAA,gBACb;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBAGC,aAAa;AAAA,gBACb;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,aACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
   "names": []
 }

package/esm/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/esm/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.sty.js

@@ -1,5 +1,5 @@
 import "./TreeMapOverlay.css";
-var container = "_1iqz50a0-3-8-0";
+var container = "_1iqz50a0-3-9-0";
 export {
   container
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapOverlay/TreeMapOverlay.css.ts"],
-  "sourcesContent": ["import './TreeMapOverlay.css';\nexport var container = '_1iqz50a0-3-8-0';"],
+  "sourcesContent": ["import './TreeMapOverlay.css';\nexport var container = '_1iqz50a0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/TreeMapTooltip/TreeMapOverlayTooltip.tsx"],
-  "sourcesContent": ["import { useTooltipData } from '../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../core/components/overlay-tooltip/types.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useTreeMapCustomTooltip } from '../../hooks/useTreeMapCustomTooltip.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { TreeMapTooltipPayload } from '../../types/treemap-chart.config.js';\n\ntype SeriesData = Data['series'][number];\n\ntype TreeMapMetadata = {\n  id: string;\n  value: number;\n  path?: string[];\n  children?: string[];\n};\n\ninterface TreeMapOverlayTooltipProps {\n  actionsForItem?: (\n    item: SeriesData,\n  ) => (() => SeriesActionsTemplate) | undefined;\n}\n\nexport const TreeMapOverlayTooltip = (props: TreeMapOverlayTooltipProps) => {\n  const data = useTooltipData().data;\n  const truncationMode = useTruncationMode();\n  const customTooltip = useTreeMapCustomTooltip();\n\n  if (customTooltip?.hidden || isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  const series = data.series[0];\n  const meta = data.metadata as TreeMapMetadata;\n  if (customTooltip?.template) {\n    const payload: TreeMapTooltipPayload = {\n      hierarchyPath: meta.path ?? [series.name as string],\n      value: meta.value,\n      childrenCount: meta.children,\n    };\n    return <OverlayTooltip legacyTemplate={customTooltip.template(payload)} />;\n  }\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header header1={data.header1} />\n      <OverlayTooltip.SeriesItem\n        name={series.name}\n        value={series.value}\n        color={series.color}\n        actions={props.actionsForItem?.(series)}\n      />\n    </OverlayTooltip>\n  );\n};\n\nTreeMapOverlayTooltip['displayName'] = 'TreeMapOverlayTooltip';\n"],
-  "mappings": "AAyCW,cAIP,YAJO;AAzCX,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAkB3B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,OAAO,eAAe,EAAE;AAC9B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,gBAAgB,wBAAwB;AAE9C,MAAI,eAAe,UAAU,mBAAmB,IAAI,GAAG;AACrD,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,KAAK,OAAO,CAAC;AAC5B,QAAM,OAAO,KAAK;AAClB,MAAI,eAAe,UAAU;AAC3B,UAAM,UAAiC;AAAA,MACrC,eAAe,KAAK,QAAQ,CAAC,OAAO,IAAc;AAAA,MAClD,OAAO,KAAK;AAAA,MACZ,eAAe,KAAK;AAAA,IACtB;AACA,WAAO,oBAAC,kBAAe,gBAAgB,cAAc,SAAS,OAAO,GAAG;AAAA,EAC1E;AAEA,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA,wBAAC,eAAe,QAAf,EAAsB,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM,OAAO;AAAA,QACb,OAAO,OAAO;AAAA,QACd,OAAO,OAAO;AAAA,QACd,SAAS,MAAM,iBAAiB,MAAM;AAAA;AAAA,IACxC;AAAA,KACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { useTooltipData } from '../../../core/components/overlay-tooltip/hooks/useTooltipData.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { Data } from '../../../core/components/overlay-tooltip/types.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport type { SeriesActionsTemplate } from '../../../core/types/series-actions-template.js';\nimport { useTreeMapCustomTooltip } from '../../hooks/useTreeMapCustomTooltip.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport { TreeMapTooltipPayload } from '../../types/treemap-chart.config.js';\n\ntype SeriesData = Data['series'][number];\n\ntype TreeMapMetadata = {\n  id: string;\n  value: number;\n  path?: string[];\n  children?: string[];\n};\n\ninterface TreeMapOverlayTooltipProps {\n  actionsForItem?: (\n    item: SeriesData,\n  ) => (() => SeriesActionsTemplate) | undefined;\n}\n\nexport const TreeMapOverlayTooltip = (props: TreeMapOverlayTooltipProps) => {\n  const data = useTooltipData().data;\n  const truncationMode = useTruncationMode();\n  const customTooltip = useTreeMapCustomTooltip();\n\n  if (customTooltip?.hidden || isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  const series = data.series[0];\n  const meta = data.metadata as TreeMapMetadata;\n  if (customTooltip?.template) {\n    const payload: TreeMapTooltipPayload = {\n      hierarchyPath: meta.path ?? [series.name as string],\n      value: meta.value,\n      childrenCount: meta.children,\n    };\n    return <OverlayTooltip template={customTooltip.template(payload)} />;\n  }\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header header1={data.header1} />\n      <OverlayTooltip.SeriesItem\n        name={series.name}\n        value={series.value}\n        color={series.color}\n        actions={props.actionsForItem?.(series)}\n      />\n    </OverlayTooltip>\n  );\n};\n\nTreeMapOverlayTooltip['displayName'] = 'TreeMapOverlayTooltip';\n"],
+  "mappings": "AAyCW,cAIP,YAJO;AAzCX,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAEnC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAkB3B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,OAAO,eAAe,EAAE;AAC9B,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,gBAAgB,wBAAwB;AAE9C,MAAI,eAAe,UAAU,mBAAmB,IAAI,GAAG;AACrD,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,KAAK,OAAO,CAAC;AAC5B,QAAM,OAAO,KAAK;AAClB,MAAI,eAAe,UAAU;AAC3B,UAAM,UAAiC;AAAA,MACrC,eAAe,KAAK,QAAQ,CAAC,OAAO,IAAc;AAAA,MAClD,OAAO,KAAK;AAAA,MACZ,eAAe,KAAK;AAAA,IACtB;AACA,WAAO,oBAAC,kBAAe,UAAU,cAAc,SAAS,OAAO,GAAG;AAAA,EACpE;AAEA,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA,wBAAC,eAAe,QAAf,EAAsB,SAAS,KAAK,SAAS;AAAA,IAC9C;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM,OAAO;AAAA,QACb,OAAO,OAAO;AAAA,QACd,OAAO,OAAO;AAAA,QACd,SAAS,MAAM,iBAAiB,MAAM;AAAA;AAAA,IACxC;AAAA,KACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/hooks/useOverlayHandlers.ts"],
-  "sourcesContent": ["import type { Overlay } from '../../core/components/overlay-tooltip/types.js';\nimport {\n  useOverlayEventHandlers,\n  type Options,\n} from '../../core/hooks/useOverlayEventHandlers.js';\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useTreeMapInternalData } from '../context/TreeMapInternalDataContext.js';\nimport { useClusterNodesState, useLeafNodesState } from '../store/selectors.js';\nimport { buildOverlayTooltipData } from '../utils/build-overlay-tooltip-data.js';\nimport { getTooltipData } from '../utils/get-tooltip-data.js';\n\nexport const useOverlayHandlers = (overlay: Overlay) => {\n  const hierarchyLeafNodes = useLeafNodesState();\n  const hierarchyClusterNodes = useClusterNodesState();\n  const labelsDisplay = useLabelsDisplay();\n  const formatter = useFormatter();\n  const { unit } = useTreeMapInternalData();\n\n  const parentLabels: string[] = [LABELS_DISPLAY.All, LABELS_DISPLAY.Clusters];\n  const hasParentLabels = parentLabels.includes(labelsDisplay);\n\n  const getTooltipDataFromEvent: Options['getTooltipData'] = (coords) => {\n    const position = overlay.getAdjustedPositionsFromAbsolute(\n      coords.clientX,\n      coords.clientY,\n    );\n    const relativePosition = {\n      x: position.relativeX ?? 0,\n      y: position.relativeY ?? 0,\n    };\n    const tooltipData = getTooltipData(\n      hierarchyLeafNodes,\n      hierarchyClusterNodes,\n      relativePosition,\n      hasParentLabels,\n    );\n    return tooltipData\n      ? buildOverlayTooltipData(tooltipData, formatter, unit)\n      : undefined;\n  };\n\n  return useOverlayEventHandlers({\n    getTooltipData: getTooltipDataFromEvent,\n  });\n};\n"],
-  "mappings": "AACA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,yBAAyB;AACxD,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAExB,MAAM,qBAAqB,CAAC,YAAqB;AACtD,QAAM,qBAAqB,kBAAkB;AAC7C,QAAM,wBAAwB,qBAAqB;AACnD,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,YAAY,aAAa;AAC/B,QAAM,EAAE,KAAK,IAAI,uBAAuB;AAExC,QAAM,eAAyB,CAAC,eAAe,KAAK,eAAe,QAAQ;AAC3E,QAAM,kBAAkB,aAAa,SAAS,aAAa;AAE3D,QAAM,0BAAqD,CAAC,WAAW;AACrE,UAAM,WAAW,QAAQ;AAAA,MACvB,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AACA,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,aAAa;AAAA,MACzB,GAAG,SAAS,aAAa;AAAA,IAC3B;AACA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,cACH,wBAAwB,aAAa,WAAW,IAAI,IACpD;AAAA,EACN;AAEA,SAAO,wBAAwB;AAAA,IAC7B,gBAAgB;AAAA,EAClB,CAAC;AACH;",
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { Overlay } from '../../core/components/overlay-tooltip/types.js';\nimport {\n  useOverlayEventHandlers,\n  type Options,\n} from '../../core/hooks/useOverlayEventHandlers.js';\nimport { LABELS_DISPLAY } from '../constants.js';\nimport { useFormatter } from '../context/FormatterContext.js';\nimport { useLabelsDisplay } from '../context/LabelsDisplayContext.js';\nimport { useTreeMapInternalData } from '../context/TreeMapInternalDataContext.js';\nimport { useClusterNodesState, useLeafNodesState } from '../store/selectors.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\nimport { buildOverlayTooltipData } from '../utils/build-overlay-tooltip-data.js';\nimport { getTooltipData } from '../utils/get-tooltip-data.js';\n\nexport const useOverlayHandlers = (overlay: Overlay) => {\n  const hierarchyLeafNodes = useLeafNodesState();\n  const hierarchyClusterNodes = useClusterNodesState();\n  const labelsDisplay = useLabelsDisplay();\n  const formatter = useFormatter();\n  const { unit } = useTreeMapInternalData();\n\n  const parentLabels: string[] = [LABELS_DISPLAY.All, LABELS_DISPLAY.Clusters];\n  const hasParentLabels = parentLabels.includes(labelsDisplay);\n\n  const getTooltipDataFromEvent: Options['getTooltipData'] = (coords) => {\n    const position = overlay.getAdjustedPositionsFromAbsolute(\n      coords.clientX,\n      coords.clientY,\n    );\n    const relativePosition = {\n      x: position.relativeX ?? 0,\n      y: position.relativeY ?? 0,\n    };\n    const tooltipData = getTooltipData(\n      hierarchyLeafNodes,\n      hierarchyClusterNodes as HierarchyRectangularNode<InternalTreeMapNode>[],\n      relativePosition,\n      hasParentLabels,\n    );\n    return tooltipData\n      ? buildOverlayTooltipData(tooltipData, formatter, unit)\n      : undefined;\n  };\n\n  return useOverlayEventHandlers({\n    getTooltipData: getTooltipDataFromEvent,\n  });\n};\n"],
+  "mappings": "AAGA;AAAA,EACE;AAAA,OAEK;AACP,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AACvC,SAAS,sBAAsB,yBAAyB;AAExD,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAExB,MAAM,qBAAqB,CAAC,YAAqB;AACtD,QAAM,qBAAqB,kBAAkB;AAC7C,QAAM,wBAAwB,qBAAqB;AACnD,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,YAAY,aAAa;AAC/B,QAAM,EAAE,KAAK,IAAI,uBAAuB;AAExC,QAAM,eAAyB,CAAC,eAAe,KAAK,eAAe,QAAQ;AAC3E,QAAM,kBAAkB,aAAa,SAAS,aAAa;AAE3D,QAAM,0BAAqD,CAAC,WAAW;AACrE,UAAM,WAAW,QAAQ;AAAA,MACvB,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AACA,UAAM,mBAAmB;AAAA,MACvB,GAAG,SAAS,aAAa;AAAA,MACzB,GAAG,SAAS,aAAa;AAAA,IAC3B;AACA,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AACA,WAAO,cACH,wBAAwB,aAAa,WAAW,IAAI,IACpD;AAAA,EACN;AAEA,SAAO,wBAAwB;AAAA,IAC7B,gBAAgB;AAAA,EAClB,CAAC;AACH;",
   "names": []
 }

package/esm/charts/tree-map/hooks/useSetHierarchyNodes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/hooks/useSetHierarchyNodes.tsx"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\nimport { useEffect } from 'react';\n\nimport { useSetState } from '../store/selectors.js';\nimport type { ClusterNode, LeafNode } from '../types/guards/node-guards.js';\nimport type { TreeMapState } from '../types/state.js';\n\nexport const useSetHierarchyNodes = (\n  clusters: HierarchyRectangularNode<ClusterNode>[],\n  leafs: HierarchyRectangularNode<LeafNode>[],\n) => {\n  const setState = useSetState();\n\n  useEffect(() => {\n    setState((prev: TreeMapState) => ({\n      ...prev,\n      hierarchyLeafNodes: leafs,\n      hierarchyClusterNodes: clusters,\n    }));\n  }, [leafs, clusters, setState]);\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\nimport { useEffect } from 'react';\n\nimport { useSetState } from '../store/selectors.js';\nimport type { ClusterNode, LeafNode } from '../types/guards/node-guards.js';\nimport type { TreeMapState } from '../types/state.js';\n\nexport const useSetHierarchyNodes = (\n  clusters: HierarchyRectangularNode<ClusterNode>[],\n  leafs: HierarchyRectangularNode<LeafNode>[],\n) => {\n  const setState = useSetState();\n\n  useEffect(() => {\n    setState((prev: TreeMapState) => ({\n      ...prev,\n      hierarchyLeafNodes: leafs,\n      hierarchyClusterNodes: clusters,\n    }));\n  }, [leafs, clusters, setState]);\n};\n"],
   "mappings": "AACA,SAAS,iBAAiB;AAE1B,SAAS,mBAAmB;AAIrB,MAAM,uBAAuB,CAClC,UACA,UACG;AACH,QAAM,WAAW,YAAY;AAE7B,YAAU,MAAM;AACd,aAAS,CAAC,UAAwB;AAAA,MAChC,GAAG;AAAA,MACH,oBAAoB;AAAA,MACpB,uBAAuB;AAAA,IACzB,EAAE;AAAA,EACJ,GAAG,CAAC,OAAO,UAAU,QAAQ,CAAC;AAChC;",
   "names": []
 }

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

@@ -1,10 +1,16 @@
+import { useNameAccessor } from "../context/NameAccessorContext.js";
 import { useGroupsSelectedState } from "../store/selectors.js";
 import { getFilteredNodes } from "../utils/get-filtered-nodes.js";
 import { getNodesValueSum } from "../utils/get-nodes-value-sum.js";
 const useVisibleNodes = (data) => {
   const groupsSelected = useGroupsSelectedState();
+  const nameAccessor = useNameAccessor();
   const selectedIds = groupsSelected.map((group) => group.id);
-  const filteredNodes = getFilteredNodes(data.tree.children ?? [], selectedIds);
+  const filteredNodes = getFilteredNodes(
+    data.tree.children ?? [],
+    selectedIds,
+    nameAccessor
+  );
   const rootNodeValue = getNodesValueSum(filteredNodes);
   return {
     ...data.tree,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/hooks/useVisibleNodes.ts"],
-  "sourcesContent": ["import { useGroupsSelectedState } from '../store/selectors.js';\nimport type { RootNode } from '../types/guards/node-guards.js';\nimport { type InternalTreeMapData } from '../types/internal.js';\nimport { getFilteredNodes } from '../utils/get-filtered-nodes.js';\nimport { getNodesValueSum } from '../utils/get-nodes-value-sum.js';\n\nexport const useVisibleNodes = (data: InternalTreeMapData): RootNode => {\n  const groupsSelected = useGroupsSelectedState();\n  const selectedIds = groupsSelected.map((group) => group.id);\n\n  const filteredNodes = getFilteredNodes(data.tree.children ?? [], selectedIds);\n  const rootNodeValue = getNodesValueSum(filteredNodes);\n\n  return {\n    ...data.tree,\n    children: filteredNodes,\n    value: rootNodeValue,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,8BAA8B;AAGvC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,CAAC,SAAwC;AACtE,QAAM,iBAAiB,uBAAuB;AAC9C,QAAM,cAAc,eAAe,IAAI,CAAC,UAAU,MAAM,EAAE;AAE1D,QAAM,gBAAgB,iBAAiB,KAAK,KAAK,YAAY,CAAC,GAAG,WAAW;AAC5E,QAAM,gBAAgB,iBAAiB,aAAa;AAEpD,SAAO;AAAA,IACL,GAAG,KAAK;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;",
+  "sourcesContent": ["import { useNameAccessor } from '../context/NameAccessorContext.js';\nimport { useGroupsSelectedState } from '../store/selectors.js';\nimport type { RootNode } from '../types/guards/node-guards.js';\nimport { type InternalTreeMapData } from '../types/internal.js';\nimport { getFilteredNodes } from '../utils/get-filtered-nodes.js';\nimport { getNodesValueSum } from '../utils/get-nodes-value-sum.js';\n\nexport const useVisibleNodes = (data: InternalTreeMapData): RootNode => {\n  const groupsSelected = useGroupsSelectedState();\n  const nameAccessor = useNameAccessor();\n  const selectedIds = groupsSelected.map((group) => group.id);\n\n  const filteredNodes = getFilteredNodes(\n    data.tree.children ?? [],\n    selectedIds,\n    nameAccessor,\n  );\n  const rootNodeValue = getNodesValueSum(filteredNodes);\n\n  return {\n    ...data.tree,\n    children: filteredNodes,\n    value: rootNodeValue,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAGvC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,CAAC,SAAwC;AACtE,QAAM,iBAAiB,uBAAuB;AAC9C,QAAM,eAAe,gBAAgB;AACrC,QAAM,cAAc,eAAe,IAAI,CAAC,UAAU,MAAM,EAAE;AAE1D,QAAM,gBAAgB;AAAA,IACpB,KAAK,KAAK,YAAY,CAAC;AAAA,IACvB;AAAA,IACA;AAAA,EACF;AACA,QAAM,gBAAgB,iBAAiB,aAAa;AAEpD,SAAO;AAAA,IACL,GAAG,KAAK;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AACF;",
   "names": []
 }

package/esm/charts/tree-map/utils/build-overlay-tooltip-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/build-overlay-tooltip-data.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { getTooltipItem } from './get-tooltip-item.js';\nimport type { Data } from '../../core/components/overlay-tooltip/types.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const buildOverlayTooltipData = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n  formatter: Formatter,\n  unit?: string | Unit,\n): Data => {\n  const item = getTooltipItem(formatter, node, unit);\n  const parentName = node.parent?.data.name;\n  const nodeColor =\n    node.parent?.data.color?.Default ?? node.data?.color?.Default ?? '';\n\n  const path = [...node.ancestors()]\n    .reverse()\n    .slice(1)\n    .map((n) => n.data.name);\n  const children = node.children?.map((c) => c.data.name);\n\n  return {\n    geometry: 'treemap',\n    header1: parentName ? [parentName] : [],\n    metadata: { id: item.id, value: node.data.value, path, children },\n    series: [\n      {\n        name: item.name,\n        color: nodeColor,\n        value: item.values[0],\n      },\n    ],\n  };\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { getTooltipItem } from './get-tooltip-item.js';\nimport type { Data } from '../../core/components/overlay-tooltip/types.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const buildOverlayTooltipData = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n  formatter: Formatter,\n  unit?: string | Unit,\n): Data => {\n  const item = getTooltipItem(formatter, node, unit);\n  const parentName = node.parent?.data.name;\n  const nodeColor =\n    node.parent?.data.color?.Default ?? node.data?.color?.Default ?? '';\n\n  const path = [...node.ancestors()]\n    .reverse()\n    .slice(1)\n    .map((n) => n.data.name);\n  const children = node.children?.map((c) => c.data.name);\n\n  return {\n    geometry: 'treemap',\n    header1: parentName ? [parentName] : [],\n    metadata: { id: item.id, value: node.data.value, path, children },\n    series: [\n      {\n        name: item.name,\n        color: nodeColor,\n        value: item.values[0],\n      },\n    ],\n  };\n};\n"],
   "mappings": "AAIA,SAAS,sBAAsB;AAKxB,MAAM,0BAA0B,CACrC,MACA,WACA,SACS;AACT,QAAM,OAAO,eAAe,WAAW,MAAM,IAAI;AACjD,QAAM,aAAa,KAAK,QAAQ,KAAK;AACrC,QAAM,YACJ,KAAK,QAAQ,KAAK,OAAO,WAAW,KAAK,MAAM,OAAO,WAAW;AAEnE,QAAM,OAAO,CAAC,GAAG,KAAK,UAAU,CAAC,EAC9B,QAAQ,EACR,MAAM,CAAC,EACP,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI;AACzB,QAAM,WAAW,KAAK,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK,IAAI;AAEtD,SAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS,aAAa,CAAC,UAAU,IAAI,CAAC;AAAA,IACtC,UAAU,EAAE,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,OAAO,MAAM,SAAS;AAAA,IAChE,QAAQ;AAAA,MACN;AAAA,QACE,MAAM,KAAK;AAAA,QACX,OAAO;AAAA,QACP,OAAO,KAAK,OAAO,CAAC;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-cluster-position.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-cluster-position.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getClusterPosition = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): { x0: number; x1: number; y0: number; y1: number } => ({\n  x0: entry.x0,\n  x1: entry.x1,\n  y0: entry.y0,\n  y1: entry.y1,\n});\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getClusterPosition = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): { x0: number; x1: number; y0: number; y1: number } => ({\n  x0: entry.x0,\n  x1: entry.x1,\n  y0: entry.y0,\n  y1: entry.y1,\n});\n"],
   "mappings": "AAIO,MAAM,qBAAqB,CAChC,WACwD;AAAA,EACxD,IAAI,MAAM;AAAA,EACV,IAAI,MAAM;AAAA,EACV,IAAI,MAAM;AAAA,EACV,IAAI,MAAM;AACZ;",
   "names": []
 }

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

@@ -1,8 +1,29 @@
-const getFilteredNodes = (nodes, selectedIds) => {
+import { getNodesValueSum } from "./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: getNodesValueSum(matchingLeaves)
+      });
+    }
+  }
+  return filteredClusters;
 };
 export {
   getFilteredNodes

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-filtered-nodes.ts"],
-  "sourcesContent": ["import { type InternalTreeMapNode } from '../types/internal.js';\n\nexport const getFilteredNodes = (\n  nodes: InternalTreeMapNode[],\n  selectedIds: string[],\n) => {\n  if (!selectedIds.length) {\n    return nodes;\n  }\n  return nodes.filter((node) => selectedIds.includes(node.name));\n};\n"],
-  "mappings": "AAEO,MAAM,mBAAmB,CAC9B,OACA,gBACG;AACH,MAAI,CAAC,YAAY,QAAQ;AACvB,WAAO;AAAA,EACT;AACA,SAAO,MAAM,OAAO,CAAC,SAAS,YAAY,SAAS,KAAK,IAAI,CAAC;AAC/D;",
+  "sourcesContent": ["import { getNodesValueSum } from './get-nodes-value-sum.js';\nimport { type InternalTreeMapNode } from '../types/internal.js';\nimport type { NameAccessor } from '../types/treemap.js';\n\nexport const getFilteredNodes = (\n  nodes: InternalTreeMapNode[],\n  selectedIds: string[],\n  nameAccessor?: NameAccessor,\n): InternalTreeMapNode[] => {\n  if (!selectedIds.length) {\n    return nodes;\n  }\n\n  if (!nameAccessor) {\n    return getClustersMatchingSelectedNames(nodes, selectedIds);\n  }\n\n  return getClustersWithSelectedLeaves(nodes, selectedIds, nameAccessor);\n};\n\nconst getClustersMatchingSelectedNames = (\n  clusters: InternalTreeMapNode[],\n  selectedIds: string[],\n): InternalTreeMapNode[] =>\n  clusters.filter((cluster) => selectedIds.includes(cluster.name));\n\nconst getClustersWithSelectedLeaves = (\n  clusters: InternalTreeMapNode[],\n  selectedIds: string[],\n  nameAccessor: NameAccessor,\n): InternalTreeMapNode[] => {\n  const filteredClusters: InternalTreeMapNode[] = [];\n\n  for (const cluster of clusters) {\n    const matchingLeaves = cluster.children?.filter((leaf) =>\n      selectedIds.includes(String(leaf[nameAccessor])),\n    );\n\n    if (matchingLeaves?.length) {\n      filteredClusters.push({\n        ...cluster,\n        children: matchingLeaves,\n        value: getNodesValueSum(matchingLeaves),\n      });\n    }\n  }\n\n  return filteredClusters;\n};\n"],
+  "mappings": "AAAA,SAAS,wBAAwB;AAI1B,MAAM,mBAAmB,CAC9B,OACA,aACA,iBAC0B;AAC1B,MAAI,CAAC,YAAY,QAAQ;AACvB,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,cAAc;AACjB,WAAO,iCAAiC,OAAO,WAAW;AAAA,EAC5D;AAEA,SAAO,8BAA8B,OAAO,aAAa,YAAY;AACvE;AAEA,MAAM,mCAAmC,CACvC,UACA,gBAEA,SAAS,OAAO,CAAC,YAAY,YAAY,SAAS,QAAQ,IAAI,CAAC;AAEjE,MAAM,gCAAgC,CACpC,UACA,aACA,iBAC0B;AAC1B,QAAM,mBAA0C,CAAC;AAEjD,aAAW,WAAW,UAAU;AAC9B,UAAM,iBAAiB,QAAQ,UAAU;AAAA,MAAO,CAAC,SAC/C,YAAY,SAAS,OAAO,KAAK,YAAY,CAAC,CAAC;AAAA,IACjD;AAEA,QAAI,gBAAgB,QAAQ;AAC1B,uBAAiB,KAAK;AAAA,QACpB,GAAG;AAAA,QACH,UAAU;AAAA,QACV,OAAO,iBAAiB,cAAc;AAAA,MACxC,CAAC;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-node-color.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-node-color.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\nimport { isUndefined } from 'lodash-es';\n\nimport { DEFAULT_BORDER_COLOR } from '../constants.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getNodeColor = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): string => {\n  const isRootNode = !isUndefined(entry.data.color);\n  const color = isRootNode ? entry.data.color : entry.parent?.data.color;\n  return color?.Default ?? DEFAULT_BORDER_COLOR;\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\nimport { isUndefined } from 'lodash-es';\n\nimport { DEFAULT_BORDER_COLOR } from '../constants.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getNodeColor = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): string => {\n  const isRootNode = !isUndefined(entry.data.color);\n  const color = isRootNode ? entry.data.color : entry.parent?.data.color;\n  return color?.Default ?? DEFAULT_BORDER_COLOR;\n};\n"],
   "mappings": "AACA,SAAS,mBAAmB;AAE5B,SAAS,4BAA4B;AAG9B,MAAM,eAAe,CAC1B,UACW;AACX,QAAM,aAAa,CAAC,YAAY,MAAM,KAAK,KAAK;AAChD,QAAM,QAAQ,aAAa,MAAM,KAAK,QAAQ,MAAM,QAAQ,KAAK;AACjE,SAAO,OAAO,WAAW;AAC3B;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-node-dimension.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-node-dimension.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getNodeDimension = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): { width: number; height: number } => ({\n  width: entry.x1 - entry.x0,\n  height: entry.y1 - entry.y0,\n});\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getNodeDimension = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): { width: number; height: number } => ({\n  width: entry.x1 - entry.x0,\n  height: entry.y1 - entry.y0,\n});\n"],
   "mappings": "AAIO,MAAM,mBAAmB,CAC9B,WACuC;AAAA,EACvC,OAAO,MAAM,KAAK,MAAM;AAAA,EACxB,QAAQ,MAAM,KAAK,MAAM;AAC3B;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-node-opacity.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-node-opacity.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { DEFAULT_FILL_OPACITY } from '../../core/constants.js';\nimport { getOpacity } from '../../core/utils/getOpacity.js';\nimport type {\n  HighlightingMap,\n  InternalTreeMapNode,\n} from '../types/internal.js';\n\nexport const getNodeOpacity = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n  highlightingMap: HighlightingMap,\n  highlightedItem?: LegendItem,\n): number => {\n  const hasHighlightedItem = highlightedItem !== undefined;\n\n  if (!hasHighlightedItem) {\n    return DEFAULT_FILL_OPACITY;\n  }\n\n  const isHighlighted = highlightingMap[entry.data.id].has(\n    highlightedItem.name,\n  );\n\n  return getOpacity(isHighlighted);\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';\nimport { DEFAULT_FILL_OPACITY } from '../../core/constants.js';\nimport { getOpacity } from '../../core/utils/getOpacity.js';\nimport type {\n  HighlightingMap,\n  InternalTreeMapNode,\n} from '../types/internal.js';\n\nexport const getNodeOpacity = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n  highlightingMap: HighlightingMap,\n  highlightedItem?: LegendItem,\n): number => {\n  const hasHighlightedItem = highlightedItem !== undefined;\n\n  if (!hasHighlightedItem) {\n    return DEFAULT_FILL_OPACITY;\n  }\n\n  const isHighlighted = highlightingMap[entry.data.id].has(\n    highlightedItem.name,\n  );\n\n  return getOpacity(isHighlighted);\n};\n"],
   "mappings": "AAGA,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAMpB,MAAM,iBAAiB,CAC5B,OACA,iBACA,oBACW;AACX,QAAM,qBAAqB,oBAAoB;AAE/C,MAAI,CAAC,oBAAoB;AACvB,WAAO;AAAA,EACT;AAEA,QAAM,gBAAgB,gBAAgB,MAAM,KAAK,EAAE,EAAE;AAAA,IACnD,gBAAgB;AAAA,EAClB;AAEA,SAAO,WAAW,aAAa;AACjC;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-node-position.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-node-position.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getNodePosition = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): { x: number; y: number } => ({ x: entry.x0, y: entry.y0 });\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getNodePosition = (\n  entry: HierarchyRectangularNode<InternalTreeMapNode>,\n): { x: number; y: number } => ({ x: entry.x0, y: entry.y0 });\n"],
   "mappings": "AAIO,MAAM,kBAAkB,CAC7B,WAC8B,EAAE,GAAG,MAAM,IAAI,GAAG,MAAM,GAAG;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-tooltip-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-tooltip-data.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport { nodePadding } from './node-padding.js';\nimport { shouldDrawLeafNode } from './should-draw-leaf-node.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getTooltipData = (\n  leafNodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n  clusterNodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n  relativePosition: { x: number; y: number },\n  hasParentLabels: boolean = false,\n) => {\n  const nodes = hasParentLabels ? [...leafNodes, ...clusterNodes] : leafNodes;\n\n  return nodes.find((node) => {\n    const padding = nodePadding(node, hasParentLabels);\n    const showLeafTooltip = shouldDrawLeafNode(node);\n\n    if (!showLeafTooltip && hasParentLabels) {\n      return null;\n    }\n\n    return (\n      node.x0 - padding <= relativePosition.x &&\n      node.x1 + padding >= relativePosition.x &&\n      node.y0 - padding <= relativePosition.y &&\n      node.y1 + padding >= relativePosition.y\n    );\n  });\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport { nodePadding } from './node-padding.js';\nimport { shouldDrawLeafNode } from './should-draw-leaf-node.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const getTooltipData = (\n  leafNodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n  clusterNodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n  relativePosition: { x: number; y: number },\n  hasParentLabels: boolean = false,\n) => {\n  const nodes = hasParentLabels ? [...leafNodes, ...clusterNodes] : leafNodes;\n\n  return nodes.find((node) => {\n    const padding = nodePadding(node, hasParentLabels);\n    const showLeafTooltip = shouldDrawLeafNode(node);\n\n    if (!showLeafTooltip && hasParentLabels) {\n      return null;\n    }\n\n    return (\n      node.x0 - padding <= relativePosition.x &&\n      node.x1 + padding >= relativePosition.x &&\n      node.y0 - padding <= relativePosition.y &&\n      node.y1 + padding >= relativePosition.y\n    );\n  });\n};\n"],
   "mappings": "AAEA,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AAG5B,MAAM,iBAAiB,CAC5B,WACA,cACA,kBACA,kBAA2B,UACxB;AACH,QAAM,QAAQ,kBAAkB,CAAC,GAAG,WAAW,GAAG,YAAY,IAAI;AAElE,SAAO,MAAM,KAAK,CAAC,SAAS;AAC1B,UAAM,UAAU,YAAY,MAAM,eAAe;AACjD,UAAM,kBAAkB,mBAAmB,IAAI;AAE/C,QAAI,CAAC,mBAAmB,iBAAiB;AACvC,aAAO;AAAA,IACT;AAEA,WACE,KAAK,KAAK,WAAW,iBAAiB,KACtC,KAAK,KAAK,WAAW,iBAAiB,KACtC,KAAK,KAAK,WAAW,iBAAiB,KACtC,KAAK,KAAK,WAAW,iBAAiB;AAAA,EAE1C,CAAC;AACH;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-tooltip-item.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-tooltip-item.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { DEFAULT_AGGREGATED_LABEL } from '../constants.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nconst getTooltipItemId = (\n  content?: HierarchyRectangularNode<InternalTreeMapNode>,\n) => {\n  const isCluster = content?.data.children?.length;\n  const parentName = content?.parent?.data.name;\n  const nodeName = content?.data.name;\n  const nodeValue = content?.data.value;\n\n  const isAggregatedNode = nodeName === DEFAULT_AGGREGATED_LABEL;\n  const isAggregatedChild =\n    content?.data.children?.[0].name === DEFAULT_AGGREGATED_LABEL;\n  const isChildOfAggregatedCluster = parentName === DEFAULT_AGGREGATED_LABEL;\n  const isAggregatedCluster = isAggregatedNode && isAggregatedChild;\n\n  if (isChildOfAggregatedCluster || isAggregatedCluster) {\n    return `other-cluster-${nodeValue}`;\n  }\n  if (isAggregatedNode) {\n    return `other-${parentName}-${nodeValue}`;\n  }\n  if (isCluster) {\n    return `cluster-${nodeName}-${nodeValue}`;\n  }\n  return `${parentName}-${nodeName}-${nodeValue}`;\n};\n\nexport const getTooltipItem = (\n  formatter: Formatter,\n  content?: HierarchyRectangularNode<InternalTreeMapNode>,\n  unit?: string | Unit,\n) => ({\n  id: getTooltipItemId(content),\n  name: content?.data.name ?? '-',\n  values: [formatter(content?.data.value ?? 0, unit)],\n});\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { DEFAULT_AGGREGATED_LABEL } from '../constants.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nconst getTooltipItemId = (\n  content?: HierarchyRectangularNode<InternalTreeMapNode>,\n) => {\n  const isCluster = content?.data.children?.length;\n  const parentName = content?.parent?.data.name;\n  const nodeName = content?.data.name;\n  const nodeValue = content?.data.value;\n\n  const isAggregatedNode = nodeName === DEFAULT_AGGREGATED_LABEL;\n  const isAggregatedChild =\n    content?.data.children?.[0].name === DEFAULT_AGGREGATED_LABEL;\n  const isChildOfAggregatedCluster = parentName === DEFAULT_AGGREGATED_LABEL;\n  const isAggregatedCluster = isAggregatedNode && isAggregatedChild;\n\n  if (isChildOfAggregatedCluster || isAggregatedCluster) {\n    return `other-cluster-${nodeValue}`;\n  }\n  if (isAggregatedNode) {\n    return `other-${parentName}-${nodeValue}`;\n  }\n  if (isCluster) {\n    return `cluster-${nodeName}-${nodeValue}`;\n  }\n  return `${parentName}-${nodeName}-${nodeValue}`;\n};\n\nexport const getTooltipItem = (\n  formatter: Formatter,\n  content?: HierarchyRectangularNode<InternalTreeMapNode>,\n  unit?: string | Unit,\n) => ({\n  id: getTooltipItemId(content),\n  name: content?.data.name ?? '-',\n  values: [formatter(content?.data.value ?? 0, unit)],\n});\n"],
   "mappings": "AAKA,SAAS,gCAAgC;AAGzC,MAAM,mBAAmB,CACvB,YACG;AACH,QAAM,YAAY,SAAS,KAAK,UAAU;AAC1C,QAAM,aAAa,SAAS,QAAQ,KAAK;AACzC,QAAM,WAAW,SAAS,KAAK;AAC/B,QAAM,YAAY,SAAS,KAAK;AAEhC,QAAM,mBAAmB,aAAa;AACtC,QAAM,oBACJ,SAAS,KAAK,WAAW,CAAC,EAAE,SAAS;AACvC,QAAM,6BAA6B,eAAe;AAClD,QAAM,sBAAsB,oBAAoB;AAEhD,MAAI,8BAA8B,qBAAqB;AACrD,WAAO,iBAAiB,SAAS;AAAA,EACnC;AACA,MAAI,kBAAkB;AACpB,WAAO,SAAS,UAAU,IAAI,SAAS;AAAA,EACzC;AACA,MAAI,WAAW;AACb,WAAO,WAAW,QAAQ,IAAI,SAAS;AAAA,EACzC;AACA,SAAO,GAAG,UAAU,IAAI,QAAQ,IAAI,SAAS;AAC/C;AAEO,MAAM,iBAAiB,CAC5B,WACA,SACA,UACI;AAAA,EACJ,IAAI,iBAAiB,OAAO;AAAA,EAC5B,MAAM,SAAS,KAAK,QAAQ;AAAA,EAC5B,QAAQ,CAAC,UAAU,SAAS,KAAK,SAAS,GAAG,IAAI,CAAC;AACpD;",
   "names": []
 }

package/esm/charts/tree-map/utils/node-padding.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/node-padding.ts"],
-  "sourcesContent": ["import { HierarchyRectangularNode } from '@visx/hierarchy/lib/types';\n\nimport {\n  NODE_LEAF_PADDING,\n  NODE_CLUSTER_PADDING,\n  NODE_WITH_RECT_CLUSTER_PADDING,\n  NODE_WITH_RECT_PADDING_TOP,\n  ROOT_NODE_WITH_LABELS_OUTER_PADDING,\n  NODE_WITH_RECT_OUTER_PADDING,\n} from '../constants.js';\nimport { type InternalTreeMapNode } from '../types/internal.js';\n\nexport function nodePadding<TTreeNode>(\n  node: HierarchyRectangularNode<TTreeNode>,\n  hasParentLabel: boolean,\n): number {\n  if (node.height === 0) {\n    return NODE_LEAF_PADDING;\n  }\n\n  if (hasParentLabel) {\n    return node.depth > 0\n      ? NODE_CLUSTER_PADDING\n      : NODE_WITH_RECT_CLUSTER_PADDING;\n  }\n\n  return NODE_CLUSTER_PADDING;\n}\n\nexport const nodePaddingTop = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n): number => {\n  return node.depth > 0\n    ? NODE_WITH_RECT_PADDING_TOP\n    : ROOT_NODE_WITH_LABELS_OUTER_PADDING;\n};\n\nexport const nodePaddingOuter = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n): number => {\n  return node.depth > 0\n    ? NODE_WITH_RECT_OUTER_PADDING\n    : ROOT_NODE_WITH_LABELS_OUTER_PADDING;\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport {\n  NODE_LEAF_PADDING,\n  NODE_CLUSTER_PADDING,\n  NODE_WITH_RECT_CLUSTER_PADDING,\n  NODE_WITH_RECT_PADDING_TOP,\n  ROOT_NODE_WITH_LABELS_OUTER_PADDING,\n  NODE_WITH_RECT_OUTER_PADDING,\n} from '../constants.js';\nimport { type InternalTreeMapNode } from '../types/internal.js';\n\nexport function nodePadding<TTreeNode>(\n  node: HierarchyRectangularNode<TTreeNode>,\n  hasParentLabel: boolean,\n): number {\n  if (node.height === 0) {\n    return NODE_LEAF_PADDING;\n  }\n\n  if (hasParentLabel) {\n    return node.depth > 0\n      ? NODE_CLUSTER_PADDING\n      : NODE_WITH_RECT_CLUSTER_PADDING;\n  }\n\n  return NODE_CLUSTER_PADDING;\n}\n\nexport const nodePaddingTop = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n): number => {\n  return node.depth > 0\n    ? NODE_WITH_RECT_PADDING_TOP\n    : ROOT_NODE_WITH_LABELS_OUTER_PADDING;\n};\n\nexport const nodePaddingOuter = (\n  node: HierarchyRectangularNode<InternalTreeMapNode>,\n): number => {\n  return node.depth > 0\n    ? NODE_WITH_RECT_OUTER_PADDING\n    : ROOT_NODE_WITH_LABELS_OUTER_PADDING;\n};\n"],
   "mappings": "AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,SAAS,YACd,MACA,gBACQ;AACR,MAAI,KAAK,WAAW,GAAG;AACrB,WAAO;AAAA,EACT;AAEA,MAAI,gBAAgB;AAClB,WAAO,KAAK,QAAQ,IAChB,uBACA;AAAA,EACN;AAEA,SAAO;AACT;AAEO,MAAM,iBAAiB,CAC5B,SACW;AACX,SAAO,KAAK,QAAQ,IAChB,6BACA;AACN;AAEO,MAAM,mBAAmB,CAC9B,SACW;AACX,SAAO,KAAK,QAAQ,IAChB,+BACA;AACN;",
   "names": []
 }

package/esm/charts/tree-map/utils/should-draw-leaf-node.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/should-draw-leaf-node.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport {\n  RECT_STROKE_WIDTH,\n  MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN,\n  MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN,\n} from '../constants.js';\nimport type { LeafNode } from '../types/guards/node-guards.js';\n\nexport const shouldDrawLeafNode = (\n  leaf: HierarchyRectangularNode<LeafNode>,\n) => {\n  const { y0 = 0, y1 = 0, x0 = 0, x1 = 0 } = leaf.parent ?? {};\n\n  const nodeHeight = Math.abs(y1 - y0);\n  const nodeWidth = Math.abs(x1 - x0);\n\n  const fitHeight =\n    nodeHeight + RECT_STROKE_WIDTH >= MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN;\n\n  const fitWidth =\n    nodeWidth + RECT_STROKE_WIDTH >= MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN;\n\n  return fitHeight && fitWidth;\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport {\n  RECT_STROKE_WIDTH,\n  MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN,\n  MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN,\n} from '../constants.js';\nimport type { LeafNode } from '../types/guards/node-guards.js';\n\nexport const shouldDrawLeafNode = (\n  leaf: HierarchyRectangularNode<LeafNode>,\n) => {\n  const { y0 = 0, y1 = 0, x0 = 0, x1 = 0 } = leaf.parent ?? {};\n\n  const nodeHeight = Math.abs(y1 - y0);\n  const nodeWidth = Math.abs(x1 - x0);\n\n  const fitHeight =\n    nodeHeight + RECT_STROKE_WIDTH >= MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN;\n\n  const fitWidth =\n    nodeWidth + RECT_STROKE_WIDTH >= MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN;\n\n  return fitHeight && fitWidth;\n};\n"],
   "mappings": "AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,MAAM,qBAAqB,CAChC,SACG;AACH,QAAM,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,IAAI,KAAK,UAAU,CAAC;AAE3D,QAAM,aAAa,KAAK,IAAI,KAAK,EAAE;AACnC,QAAM,YAAY,KAAK,IAAI,KAAK,EAAE;AAElC,QAAM,YACJ,aAAa,qBAAqB;AAEpC,QAAM,WACJ,YAAY,qBAAqB;AAEnC,SAAO,aAAa;AACtB;",
   "names": []
 }

package/esm/charts/tree-map/utils/split-nodes-by-depth.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/split-nodes-by-depth.ts"],
-  "sourcesContent": ["import type { HierarchyRectangularNode } from '@visx/hierarchy/lib/types.js';\n\nimport type { ClusterNode, LeafNode } from '../types/guards/node-guards.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const splitNodesByDepth = (\n  nodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n) => {\n  const splitNodes: {\n    clusters: HierarchyRectangularNode<ClusterNode>[];\n    leafs: HierarchyRectangularNode<LeafNode>[];\n  } = { clusters: [], leafs: [] };\n\n  return nodes.reduce((acc, node) => {\n    if (node.depth === 1) {\n      acc.clusters.push(node as HierarchyRectangularNode<ClusterNode>);\n    }\n    if (node.depth > 1) {\n      acc.leafs.push(node as HierarchyRectangularNode<LeafNode>);\n    }\n    return acc;\n  }, splitNodes);\n};\n"],
+  "sourcesContent": ["import type { HierarchyRectangularNode } from 'd3-hierarchy';\n\nimport type { ClusterNode, LeafNode } from '../types/guards/node-guards.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nexport const splitNodesByDepth = (\n  nodes: HierarchyRectangularNode<InternalTreeMapNode>[],\n) => {\n  const splitNodes: {\n    clusters: HierarchyRectangularNode<ClusterNode>[];\n    leafs: HierarchyRectangularNode<LeafNode>[];\n  } = { clusters: [], leafs: [] };\n\n  return nodes.reduce((acc, node) => {\n    if (node.depth === 1) {\n      acc.clusters.push(node as HierarchyRectangularNode<ClusterNode>);\n    }\n    if (node.depth > 1) {\n      acc.leafs.push(node as HierarchyRectangularNode<LeafNode>);\n    }\n    return acc;\n  }, splitNodes);\n};\n"],
   "mappings": "AAKO,MAAM,oBAAoB,CAC/B,UACG;AACH,QAAM,aAGF,EAAE,UAAU,CAAC,GAAG,OAAO,CAAC,EAAE;AAE9B,SAAO,MAAM,OAAO,CAAC,KAAK,SAAS;AACjC,QAAI,KAAK,UAAU,GAAG;AACpB,UAAI,SAAS,KAAK,IAA6C;AAAA,IACjE;AACA,QAAI,KAAK,QAAQ,GAAG;AAClB,UAAI,MAAM,KAAK,IAA0C;AAAA,IAC3D;AACA,WAAO;AAAA,EACT,GAAG,UAAU;AACf;",
   "names": []
 }

package/esm/charts/xy-chart/XYChart.js

@@ -11,10 +11,7 @@ import { BarLabelLayout } from "./components/displays/BarDisplay/BarLabelLayout.
 import { XYChartGridLayout } from "./components/layout/XYChartGridLayout.js";
 import { XYChartOverlay } from "./components/overlay/XYChartOverlay.js";
 import { XYChartThresholdArea } from "./components/thresholds/XYChartThresholdArea.js";
-import {
-  ANNOTATIONS_PADDING_BOTTOM,
-  XY_CHART_ARIA_LABEL
-} from "./constants/defaults.js";
+import { XY_CHART_ARIA_LABEL } from "./constants/defaults.js";
 import { XYChartSelectConfigContext } from "./context/XYChartSelectConfig.context.js";
 import { XYChartTooltipContext } from "./context/XYChartTooltip.context.js";
 import { useVisibleAxesConfig } from "./hooks/useVisibleAxesConfig.js";
@@ -69,9 +66,7 @@ const XYChart = forwardRef(
       annotationsConfig?.fixedTracks,
       hiddenTracks.length
     );
-    const hasVisibleAnnotationTracks = tracksQuantity - hiddenTracks.length > 0;
-    const annotationsPadding = hasVisibleAnnotationTracks ? ANNOTATIONS_PADDING_BOTTOM : 0;
-    const annotationsAreaHeight = annotationsVisibleArea + annotationsPadding;
+    const annotationsAreaHeight = annotationsVisibleArea;
     const showAnnotations = shouldShowAnnotations(
       chartGridHeight,
       tracksQuantity