@dynatrace/strato-components 3.5.2 → 3.7.0

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/_to-be-removed/utils.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 { useTruncationMode } from '../../hooks/useTruncationMode.js';\n\ntype SeriesData = Data['series'][number];\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\n  if (isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  const series = data.series[0];\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": "AA0BI,SACE,KADF;AA1BJ,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AAEnC,SAAS,yBAAyB;AAU3B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM,OAAO,eAAe,EAAE;AAC9B,QAAM,iBAAiB,kBAAkB;AAEzC,MAAI,mBAAmB,IAAI,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,KAAK,OAAO,CAAC;AAE5B,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 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;",
   "names": []
 }

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

@@ -1,169 +1,98 @@
 import { useCallback } from "react";
-import {
-  getAppliedLabels,
-  getLabelFit,
-  getLabelWidth,
-  getOffsetY,
-  getRectCenter
-} from "./utils/canvas-label-utils.js";
-import { ELLIPSIS_CHARACTER } from "../../../../typography/utils.js";
 import { useCanvas } from "../../../core/components/canvas/hooks/useCanvas.js";
 import { getCanvasColor } from "../../../core/components/canvas/utils/canvas-color.js";
-import {
-  charsFontWidth12pixelsSize400Map,
-  charsFontWidth12pixelsSize500Map
-} from "../../../core/components/text-ellipsis/chars-font-width-map.js";
-import {
-  calculateWidth,
-  truncateString
-} from "../../../core/components/text-ellipsis/truncate-string.js";
 import { getColorByContrast } from "../../../core/utils/color-contrast.js";
 import { getFontDetails } from "../../../core/utils/get-font-details.js";
 import {
-  DEFAULT_CLUSTER_LABEL_FONTSIZE,
-  DEFAULT_CLUSTER_LABEL_LINE_HEIGHT,
-  DEFAULT_FONT_WEIGHT,
   DEFAULT_LABEL_ALIGN,
   DEFAULT_LABEL_BASELINE,
-  DEFAULT_LABEL_FONTSIZE,
-  DEFAULT_LABEL_LINE_HEIGHT,
-  DEFAULT_LABEL_PADDING,
-  INCREASED_FONT_WEIGHT,
-  LABEL_OPTIONS,
   RECT_BORDER_RADIUS
 } from "../../constants.js";
+import { useTextSize } from "../../context/TextSizeContext.js";
 import { useTruncationMode } from "../../hooks/useTruncationMode.js";
-const textAlign = DEFAULT_LABEL_ALIGN;
-const textBaseline = DEFAULT_LABEL_BASELINE;
-const fontSize = DEFAULT_LABEL_FONTSIZE;
-const fontWeight = DEFAULT_FONT_WEIGHT;
-const padding = DEFAULT_LABEL_PADDING;
-const lineHeight = DEFAULT_LABEL_LINE_HEIGHT;
-const boldFontWeight = INCREASED_FONT_WEIGHT;
-const clusterFontSize = DEFAULT_CLUSTER_LABEL_FONTSIZE;
-const clusterLineHeight = DEFAULT_CLUSTER_LABEL_LINE_HEIGHT;
+import { buildLabels } from "../../utils/build-labels.js";
+import { getTextMeasurer } from "../../utils/text-measure.js";
 function TreeMapSquareRenderer(props) {
   const {
-    x,
-    y,
+    name,
+    value,
     width,
     height,
-    color,
     opacity,
-    name,
-    value,
+    color,
+    x,
+    y,
+    withValueOnly = false,
     skipDrawing = false,
-    withLabel = false,
-    withValueOnly = false
+    withLabel = false
   } = props;
   const truncationMode = useTruncationMode();
+  const textSize = useTextSize();
   const draw = useCallback(
     (ctx) => {
       if (skipDrawing) {
-        return false;
+        return;
       }
-      if (withLabel) {
-        ctx.textAlign = textAlign;
-        ctx.textBaseline = textBaseline;
+      const treemapRect = { width, height, x, y };
+      const treemapRectStyle = { opacity, color };
+      drawTreeMapRect(ctx, treemapRect, treemapRectStyle);
+      if (!withLabel) {
+        return;
       }
-      ctx.moveTo(x, y);
-      ctx.beginPath();
-      ctx.globalAlpha = opacity;
-      ctx.fillStyle = getCanvasColor(color);
-      ctx.filter = "none";
-      ctx.roundRect(x, y, width, height, RECT_BORDER_RADIUS);
-      ctx.fill();
-      if (withLabel && withValueOnly) {
-        ctx.fillStyle = getColorByContrast(ctx.fillStyle);
-        ctx.font = getFontDetails(
-          boldFontWeight,
-          clusterFontSize,
-          clusterLineHeight
-        );
-        const maxWidth = width - padding * 2;
-        const minHeight = padding * 2 + clusterFontSize;
-        const { centerX, centerY } = getRectCenter(width, height);
-        if (height >= minHeight && maxWidth > 0) {
-          const truncatedValue = truncateString(
-            value,
-            maxWidth,
-            charsFontWidth12pixelsSize500Map,
-            truncationMode
-          );
-          ctx.fillText(truncatedValue, x + centerX, y + centerY);
-        }
-      }
-      if (withLabel && !withValueOnly) {
-        ctx.fillStyle = getColorByContrast(ctx.fillStyle);
-        ctx.font = getFontDetails(fontWeight, fontSize, lineHeight);
-        const nameWidth = calculateWidth(
-          name,
-          charsFontWidth12pixelsSize400Map
-        );
-        ctx.font = getFontDetails(
-          boldFontWeight,
-          clusterFontSize,
-          clusterLineHeight
-        );
-        const labelWidth = getLabelWidth(
-          nameWidth,
-          value,
-          charsFontWidth12pixelsSize500Map
-        );
-        const labelFit = getLabelFit(
-          height,
-          width,
-          fontSize,
-          padding,
-          labelWidth
-        );
-        const withEllipsis = labelFit === LABEL_OPTIONS.Ellipsis;
-        const maxWidth = width - padding;
-        const truncatedName = withEllipsis ? truncateString(
-          name,
-          maxWidth,
-          charsFontWidth12pixelsSize400Map,
-          truncationMode,
-          "start"
-        ) : name;
-        const displayedName = truncatedName === ELLIPSIS_CHARACTER ? "" : truncatedName;
-        const labels = getAppliedLabels(labelFit, displayedName, value);
-        const { centerX, centerY } = getRectCenter(width, height);
-        labels.forEach((label, i, array) => {
-          if (i === 1) {
-            ctx.font = getFontDetails(
-              boldFontWeight,
-              clusterFontSize,
-              clusterLineHeight
-            );
-          } else {
-            ctx.font = getFontDetails(fontWeight, fontSize, lineHeight);
-          }
-          const offsetY = getOffsetY(array, i, fontSize);
-          ctx.fillText(label, x + centerX, y + centerY + offsetY);
-        });
-      }
-      return false;
+      const labelsConfig = {
+        name,
+        value,
+        textSize,
+        truncationMode,
+        withValueOnly
+      };
+      const textMeasurer = getTextMeasurer(ctx, textSize);
+      const labels = buildLabels(labelsConfig, treemapRect, textMeasurer);
+      drawLabels(ctx, labels);
     },
     [
-      color,
-      height,
       name,
-      opacity,
-      skipDrawing,
-      truncationMode,
       value,
       width,
-      withLabel,
-      withValueOnly,
+      height,
+      opacity,
+      color,
       x,
-      y
+      y,
+      withValueOnly,
+      skipDrawing,
+      withLabel,
+      truncationMode,
+      textSize
     ]
   );
   useCanvas("treemap-square", draw);
   return null;
 }
 TreeMapSquareRenderer["displayName"] = "TreeMapSquareRenderer";
+const drawTreeMapRect = (ctx, { x, y, width, height }, { opacity, color }) => {
+  ctx.moveTo(x, y);
+  ctx.beginPath();
+  ctx.globalAlpha = opacity;
+  ctx.fillStyle = getCanvasColor(color);
+  ctx.filter = "none";
+  ctx.roundRect(x, y, width, height, RECT_BORDER_RADIUS);
+  ctx.fill();
+};
+const drawLabels = (ctx, labels) => {
+  ctx.textAlign = DEFAULT_LABEL_ALIGN;
+  ctx.textBaseline = DEFAULT_LABEL_BASELINE;
+  ctx.fillStyle = getColorByContrast(ctx.fillStyle);
+  labels.forEach((label) => drawLabel(ctx, label));
+};
+const drawLabel = (ctx, { fontConfig, text, position }) => {
+  ctx.font = getFontDetails(
+    fontConfig.fontWeight,
+    fontConfig.fontSize,
+    fontConfig.lineHeight
+  );
+  ctx.fillText(text, position.x, position.y);
+};
 export {
   TreeMapSquareRenderer
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/tree-map/components/canvas/TreeMapSquareRenderer.tsx"],
-  "sourcesContent": ["import { useCallback } from 'react';\n\nimport {\n  getAppliedLabels,\n  getLabelFit,\n  getLabelWidth,\n  getOffsetY,\n  getRectCenter,\n} from './utils/canvas-label-utils.js';\nimport { ELLIPSIS_CHARACTER } from '../../../../typography/utils.js';\nimport { useCanvas } from '../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../core/components/canvas/utils/canvas-color.js';\nimport {\n  charsFontWidth12pixelsSize400Map,\n  charsFontWidth12pixelsSize500Map,\n} from '../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../core/components/text-ellipsis/truncate-string.js';\nimport { getColorByContrast } from '../../../core/utils/color-contrast.js';\nimport { getFontDetails } from '../../../core/utils/get-font-details.js';\nimport {\n  DEFAULT_CLUSTER_LABEL_FONTSIZE,\n  DEFAULT_CLUSTER_LABEL_LINE_HEIGHT,\n  DEFAULT_FONT_WEIGHT,\n  DEFAULT_LABEL_ALIGN,\n  DEFAULT_LABEL_BASELINE,\n  DEFAULT_LABEL_FONTSIZE,\n  DEFAULT_LABEL_LINE_HEIGHT,\n  DEFAULT_LABEL_PADDING,\n  INCREASED_FONT_WEIGHT,\n  LABEL_OPTIONS,\n  RECT_BORDER_RADIUS,\n} from '../../constants.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\n\ninterface TreeMapSquareRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  color: string;\n  opacity: number;\n  name: string;\n  value: string;\n  skipDrawing?: boolean;\n  withLabel?: boolean;\n  withValueOnly?: boolean;\n}\n\nconst textAlign = DEFAULT_LABEL_ALIGN;\nconst textBaseline = DEFAULT_LABEL_BASELINE;\nconst fontSize = DEFAULT_LABEL_FONTSIZE;\nconst fontWeight = DEFAULT_FONT_WEIGHT;\nconst padding = DEFAULT_LABEL_PADDING;\nconst lineHeight = DEFAULT_LABEL_LINE_HEIGHT;\nconst boldFontWeight = INCREASED_FONT_WEIGHT;\nconst clusterFontSize = DEFAULT_CLUSTER_LABEL_FONTSIZE;\nconst clusterLineHeight = DEFAULT_CLUSTER_LABEL_LINE_HEIGHT;\n\nexport function TreeMapSquareRenderer(props: TreeMapSquareRendererProps) {\n  const {\n    x,\n    y,\n    width,\n    height,\n    color,\n    opacity,\n    name,\n    value,\n    skipDrawing = false,\n    withLabel = false,\n    withValueOnly = false,\n  } = props;\n\n  const truncationMode = useTruncationMode();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      if (skipDrawing) {\n        return false;\n      }\n      if (withLabel) {\n        ctx.textAlign = textAlign;\n        ctx.textBaseline = textBaseline;\n      }\n      ctx.moveTo(x, y);\n      ctx.beginPath();\n      ctx.globalAlpha = opacity;\n\n      ctx.fillStyle = getCanvasColor(color);\n      ctx.filter = 'none';\n      ctx.roundRect(x, y, width, height, RECT_BORDER_RADIUS);\n      ctx.fill();\n\n      if (withLabel && withValueOnly) {\n        ctx.fillStyle = getColorByContrast(ctx.fillStyle);\n        ctx.font = getFontDetails(\n          boldFontWeight,\n          clusterFontSize,\n          clusterLineHeight,\n        );\n\n        const maxWidth = width - padding * 2;\n        const minHeight = padding * 2 + clusterFontSize;\n        const { centerX, centerY } = getRectCenter(width, height);\n\n        if (height >= minHeight && maxWidth > 0) {\n          const truncatedValue = truncateString(\n            value,\n            maxWidth,\n            charsFontWidth12pixelsSize500Map,\n            truncationMode,\n          );\n          ctx.fillText(truncatedValue, x + centerX, y + centerY);\n        }\n      }\n\n      if (withLabel && !withValueOnly) {\n        ctx.fillStyle = getColorByContrast(ctx.fillStyle);\n\n        ctx.font = getFontDetails(fontWeight, fontSize, lineHeight);\n        const nameWidth = calculateWidth(\n          name,\n          charsFontWidth12pixelsSize400Map,\n        );\n\n        ctx.font = getFontDetails(\n          boldFontWeight,\n          clusterFontSize,\n          clusterLineHeight,\n        );\n\n        const labelWidth = getLabelWidth(\n          nameWidth,\n          value,\n          charsFontWidth12pixelsSize500Map,\n        );\n        const labelFit = getLabelFit(\n          height,\n          width,\n          fontSize,\n          padding,\n          labelWidth,\n        );\n\n        const withEllipsis = labelFit === LABEL_OPTIONS.Ellipsis;\n        const maxWidth = width - padding;\n\n        const truncatedName = withEllipsis\n          ? truncateString(\n              name,\n              maxWidth,\n              charsFontWidth12pixelsSize400Map,\n              truncationMode,\n              'start',\n            )\n          : name;\n\n        const displayedName =\n          truncatedName === ELLIPSIS_CHARACTER ? '' : truncatedName;\n\n        const labels = getAppliedLabels(labelFit, displayedName, value);\n\n        const { centerX, centerY } = getRectCenter(width, height);\n\n        labels.forEach((label: string, i: number, array) => {\n          // increaded - bold text for the 'value'\n          if (i === 1) {\n            ctx.font = getFontDetails(\n              boldFontWeight,\n              clusterFontSize,\n              clusterLineHeight,\n            );\n          } else {\n            // regular text for the 'name'\n            ctx.font = getFontDetails(fontWeight, fontSize, lineHeight);\n          }\n          const offsetY = getOffsetY(array, i, fontSize);\n          ctx.fillText(label, x + centerX, y + centerY + offsetY);\n        });\n      }\n\n      return false;\n    },\n    [\n      color,\n      height,\n      name,\n      opacity,\n      skipDrawing,\n      truncationMode,\n      value,\n      width,\n      withLabel,\n      withValueOnly,\n      x,\n      y,\n    ],\n  );\n\n  useCanvas('treemap-square', draw);\n\n  return null;\n}\n\nTreeMapSquareRenderer['displayName'] = 'TreeMapSquareRenderer';\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAgBlC,MAAM,YAAY;AAClB,MAAM,eAAe;AACrB,MAAM,WAAW;AACjB,MAAM,aAAa;AACnB,MAAM,UAAU;AAChB,MAAM,aAAa;AACnB,MAAM,iBAAiB;AACvB,MAAM,kBAAkB;AACxB,MAAM,oBAAoB;AAEnB,SAAS,sBAAsB,OAAmC;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB,IAAI;AAEJ,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,aAAa;AACf,eAAO;AAAA,MACT;AACA,UAAI,WAAW;AACb,YAAI,YAAY;AAChB,YAAI,eAAe;AAAA,MACrB;AACA,UAAI,OAAO,GAAG,CAAC;AACf,UAAI,UAAU;AACd,UAAI,cAAc;AAElB,UAAI,YAAY,eAAe,KAAK;AACpC,UAAI,SAAS;AACb,UAAI,UAAU,GAAG,GAAG,OAAO,QAAQ,kBAAkB;AACrD,UAAI,KAAK;AAET,UAAI,aAAa,eAAe;AAC9B,YAAI,YAAY,mBAAmB,IAAI,SAAS;AAChD,YAAI,OAAO;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAEA,cAAM,WAAW,QAAQ,UAAU;AACnC,cAAM,YAAY,UAAU,IAAI;AAChC,cAAM,EAAE,SAAS,QAAQ,IAAI,cAAc,OAAO,MAAM;AAExD,YAAI,UAAU,aAAa,WAAW,GAAG;AACvC,gBAAM,iBAAiB;AAAA,YACrB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AACA,cAAI,SAAS,gBAAgB,IAAI,SAAS,IAAI,OAAO;AAAA,QACvD;AAAA,MACF;AAEA,UAAI,aAAa,CAAC,eAAe;AAC/B,YAAI,YAAY,mBAAmB,IAAI,SAAS;AAEhD,YAAI,OAAO,eAAe,YAAY,UAAU,UAAU;AAC1D,cAAM,YAAY;AAAA,UAChB;AAAA,UACA;AAAA,QACF;AAEA,YAAI,OAAO;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAEA,cAAM,aAAa;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,QACF;AACA,cAAM,WAAW;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAEA,cAAM,eAAe,aAAa,cAAc;AAChD,cAAM,WAAW,QAAQ;AAEzB,cAAM,gBAAgB,eAClB;AAAA,UACE;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,IACA;AAEJ,cAAM,gBACJ,kBAAkB,qBAAqB,KAAK;AAE9C,cAAM,SAAS,iBAAiB,UAAU,eAAe,KAAK;AAE9D,cAAM,EAAE,SAAS,QAAQ,IAAI,cAAc,OAAO,MAAM;AAExD,eAAO,QAAQ,CAAC,OAAe,GAAW,UAAU;AAElD,cAAI,MAAM,GAAG;AACX,gBAAI,OAAO;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF,OAAO;AAEL,gBAAI,OAAO,eAAe,YAAY,UAAU,UAAU;AAAA,UAC5D;AACA,gBAAM,UAAU,WAAW,OAAO,GAAG,QAAQ;AAC7C,cAAI,SAAS,OAAO,IAAI,SAAS,IAAI,UAAU,OAAO;AAAA,QACxD,CAAC;AAAA,MACH;AAEA,aAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,kBAAkB,IAAI;AAEhC,SAAO;AACT;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { useCallback } from 'react';\n\nimport { useCanvas } from '../../../core/components/canvas/hooks/useCanvas.js';\nimport { getCanvasColor } from '../../../core/components/canvas/utils/canvas-color.js';\nimport { getColorByContrast } from '../../../core/utils/color-contrast.js';\nimport { getFontDetails } from '../../../core/utils/get-font-details.js';\nimport {\n  DEFAULT_LABEL_ALIGN,\n  DEFAULT_LABEL_BASELINE,\n  RECT_BORDER_RADIUS,\n} from '../../constants.js';\nimport { useTextSize } from '../../context/TextSizeContext.js';\nimport { useTruncationMode } from '../../hooks/useTruncationMode.js';\nimport type { TreeMapRect } from '../../types/treemap.js';\nimport { type TreeMapLabel, buildLabels } from '../../utils/build-labels.js';\nimport { getTextMeasurer } from '../../utils/text-measure.js';\n\ninterface TreeMapSquareRendererProps {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  color: string;\n  opacity: number;\n  name: string;\n  value: string;\n  skipDrawing?: boolean;\n  withLabel?: boolean;\n  withValueOnly?: boolean;\n}\n\ntype TreeMapRectStyle = {\n  opacity: number;\n  color: string;\n};\n\nexport function TreeMapSquareRenderer(props: TreeMapSquareRendererProps) {\n  const {\n    name,\n    value,\n    width,\n    height,\n    opacity,\n    color,\n    x,\n    y,\n    withValueOnly = false,\n    skipDrawing = false,\n    withLabel = false,\n  } = props;\n\n  const truncationMode = useTruncationMode();\n  const textSize = useTextSize();\n\n  const draw = useCallback(\n    (ctx: CanvasRenderingContext2D) => {\n      if (skipDrawing) {\n        return;\n      }\n\n      const treemapRect = { width, height, x, y };\n      const treemapRectStyle = { opacity, color };\n\n      drawTreeMapRect(ctx, treemapRect, treemapRectStyle);\n\n      if (!withLabel) {\n        return;\n      }\n\n      const labelsConfig = {\n        name,\n        value,\n        textSize,\n        truncationMode,\n        withValueOnly,\n      };\n      const textMeasurer = getTextMeasurer(ctx, textSize);\n      const labels = buildLabels(labelsConfig, treemapRect, textMeasurer);\n\n      drawLabels(ctx, labels);\n    },\n    [\n      name,\n      value,\n      width,\n      height,\n      opacity,\n      color,\n      x,\n      y,\n      withValueOnly,\n      skipDrawing,\n      withLabel,\n      truncationMode,\n      textSize,\n    ],\n  );\n\n  useCanvas('treemap-square', draw);\n\n  return null;\n}\n\nTreeMapSquareRenderer['displayName'] = 'TreeMapSquareRenderer';\n\nconst drawTreeMapRect = (\n  ctx: CanvasRenderingContext2D,\n  { x, y, width, height }: TreeMapRect,\n  { opacity, color }: TreeMapRectStyle,\n) => {\n  ctx.moveTo(x, y);\n  ctx.beginPath();\n  ctx.globalAlpha = opacity;\n\n  ctx.fillStyle = getCanvasColor(color);\n  ctx.filter = 'none';\n  ctx.roundRect(x, y, width, height, RECT_BORDER_RADIUS);\n  ctx.fill();\n};\n\nconst drawLabels = (ctx: CanvasRenderingContext2D, labels: TreeMapLabel[]) => {\n  ctx.textAlign = DEFAULT_LABEL_ALIGN;\n  ctx.textBaseline = DEFAULT_LABEL_BASELINE;\n  ctx.fillStyle = getColorByContrast(ctx.fillStyle as string);\n\n  labels.forEach((label) => drawLabel(ctx, label));\n};\n\nconst drawLabel = (\n  ctx: CanvasRenderingContext2D,\n  { fontConfig, text, position }: TreeMapLabel,\n) => {\n  ctx.font = getFontDetails(\n    fontConfig.fontWeight,\n    fontConfig.fontSize,\n    fontConfig.lineHeight,\n  );\n  ctx.fillText(text, position.x, position.y);\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAElC,SAA4B,mBAAmB;AAC/C,SAAS,uBAAuB;AAqBzB,SAAS,sBAAsB,OAAmC;AACvE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,YAAY;AAAA,EACd,IAAI;AAEJ,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,WAAW,YAAY;AAE7B,QAAM,OAAO;AAAA,IACX,CAAC,QAAkC;AACjC,UAAI,aAAa;AACf;AAAA,MACF;AAEA,YAAM,cAAc,EAAE,OAAO,QAAQ,GAAG,EAAE;AAC1C,YAAM,mBAAmB,EAAE,SAAS,MAAM;AAE1C,sBAAgB,KAAK,aAAa,gBAAgB;AAElD,UAAI,CAAC,WAAW;AACd;AAAA,MACF;AAEA,YAAM,eAAe;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,YAAM,eAAe,gBAAgB,KAAK,QAAQ;AAClD,YAAM,SAAS,YAAY,cAAc,aAAa,YAAY;AAElE,iBAAW,KAAK,MAAM;AAAA,IACxB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,YAAU,kBAAkB,IAAI;AAEhC,SAAO;AACT;AAEA,sBAAsB,aAAa,IAAI;AAEvC,MAAM,kBAAkB,CACtB,KACA,EAAE,GAAG,GAAG,OAAO,OAAO,GACtB,EAAE,SAAS,MAAM,MACd;AACH,MAAI,OAAO,GAAG,CAAC;AACf,MAAI,UAAU;AACd,MAAI,cAAc;AAElB,MAAI,YAAY,eAAe,KAAK;AACpC,MAAI,SAAS;AACb,MAAI,UAAU,GAAG,GAAG,OAAO,QAAQ,kBAAkB;AACrD,MAAI,KAAK;AACX;AAEA,MAAM,aAAa,CAAC,KAA+B,WAA2B;AAC5E,MAAI,YAAY;AAChB,MAAI,eAAe;AACnB,MAAI,YAAY,mBAAmB,IAAI,SAAmB;AAE1D,SAAO,QAAQ,CAAC,UAAU,UAAU,KAAK,KAAK,CAAC;AACjD;AAEA,MAAM,YAAY,CAChB,KACA,EAAE,YAAY,MAAM,SAAS,MAC1B;AACH,MAAI,OAAO;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AACA,MAAI,SAAS,MAAM,SAAS,GAAG,SAAS,CAAC;AAC3C;",
   "names": []
 }

package/esm/charts/tree-map/constants.js

@@ -56,6 +56,8 @@ const LABEL_FONT_FAMILY = "DT Flow";
 const DEFAULT_FONT_WEIGHT = 400;
 const INCREASED_FONT_WEIGHT = 500;
 const DEFAULT_NAME_ACCESSOR = void 0;
+const DEFAULT_TEXT_SIZE = DEFAULT_LABEL_FONTSIZE;
+const AUTO_TEXT_SIZE_PRESETS = [18, 16, 14, 12];
 const DARK_LABEL_TEXT = "#000000";
 const LIGHT_LABEL_TEXT = "#ffffff";
 const RECT_BORDER_RADIUS = 2;
@@ -76,16 +78,10 @@ const AGGREGATED_NODE_COLOR = Colors.Background.Container.Neutral.Accent;
 const OUT_OF_RANGE_NODE_COLOR = Colors.Background.Container.Neutral.Accent;
 const DEFAULT_RANGE_LEGEND_COLOR = SCALE_FALLBACK_COLOR;
 const DEFAULT_BORDER_COLOR = Colors.Border.Neutral.Accent;
-const LABEL_OPTIONS = {
-  Ellipsis: "ellipsis",
-  Fallback: "fallback",
-  Inline: "inline",
-  Multi: "multi",
-  Name: "name"
-};
 const TREEMAP_CHART_ARIA_LABEL = "Tree Map Chart";
 export {
   AGGREGATED_NODE_COLOR,
+  AUTO_TEXT_SIZE_PRESETS,
   CLUSTER_LABEL_OFFSET_X,
   CLUSTER_LABEL_OFFSET_Y,
   CLUSTER_OTHER_ID,
@@ -111,13 +107,13 @@ export {
   DEFAULT_RANGE_COLOR_PALETTE,
   DEFAULT_RANGE_LEGEND_COLOR,
   DEFAULT_ROOT_NODE_NAME,
+  DEFAULT_TEXT_SIZE,
   DEFAULT_TOOLBAR_PLACEMENT,
   DEFAULT_WIDTH,
   DISPLAY_NAME,
   INCREASED_FONT_WEIGHT,
   LABELS_DISPLAY,
   LABEL_FONT_FAMILY,
-  LABEL_OPTIONS,
   LIGHT_LABEL_TEXT,
   MIN_CLUSTER_HEIGHT,
   MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN,

package/esm/charts/tree-map/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/tree-map/constants.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { LabelOptions, TextAlign, TextBaseline } from './types/canvas.js';\nimport type { LabelsDisplay, NameAccessor } from './types/treemap.js';\nimport { SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport type { MappedObject } from '../core/types/helpers/mapped-object.js';\n\nexport const DISPLAY_NAME = 'TreeMap';\n\nexport const LABELS_DISPLAY = Object.freeze<MappedObject<LabelsDisplay>>({\n  All: 'all',\n  Clusters: 'clusters',\n  ClustersAndValues: 'clusters-and-values',\n  Nodes: 'nodes',\n  None: 'none',\n});\n\nexport const TEXT_ALIGN = Object.freeze<MappedObject<TextAlign>>({\n  Center: 'center',\n  End: 'end',\n  Left: 'left',\n  Right: 'right',\n  Start: 'start',\n});\n\nexport const TEXT_BASELINE = Object.freeze<MappedObject<TextBaseline>>({\n  Alphabetic: 'alphabetic',\n  Bottom: 'bottom',\n  Hanging: 'hanging',\n  Ideographic: 'ideographic',\n  Middle: 'middle',\n  Top: 'top',\n});\n\nexport const NAME_ACCESSOR = Object.freeze<MappedObject<NameAccessor>>({\n  Name: 'name',\n  Value: 'value',\n});\n\nexport const CLUSTER_OTHER_ID = 'other-cluster';\nexport const DEFAULT_AGGREGATED_LABEL = 'Other';\nexport const DEFAULT_ROOT_NODE_NAME = 'root node';\nexport const DEFAULT_WIDTH = '100%';\nexport const DEFAULT_HEIGHT = 300;\nexport const DEFAULT_LOADING_STATE = false;\nexport const DEFAULT_CATEGORICAL_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_RANGE_COLOR_PALETTE = 'moss';\nexport const DEFAULT_MIN_NODE_SIZE = 250;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT = 1000;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT_AND_LABELS = 2000;\nexport const DEFAULT_TOOLBAR_PLACEMENT = 'top-right';\n\nexport const DEFAULT_LABELS_DISPLAY: LabelsDisplay = LABELS_DISPLAY.None;\nexport const DEFAULT_LABEL_ALIGN: TextAlign = TEXT_ALIGN.Center;\nexport const DEFAULT_LABEL_BASELINE: TextBaseline = TEXT_BASELINE.Middle;\nexport const DEFAULT_LABEL_FONTSIZE = 12;\nexport const DEFAULT_LABEL_LINE_HEIGHT = 16;\nexport const DEFAULT_CLUSTER_LABEL_FONTSIZE = 12;\nexport const DEFAULT_CLUSTER_LABEL_LINE_HEIGHT = 20;\nexport const CLUSTER_LABEL_OFFSET_Y = DEFAULT_LABEL_FONTSIZE + 2;\nexport const CLUSTER_LABEL_OFFSET_X = 10;\n\nconst CLUSTER_LABEL_PADDING = 4;\nconst CLUSTER_LABEL_PADDING_SUM = CLUSTER_LABEL_PADDING * 2;\nexport const MIN_CLUSTER_HEIGHT =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const DEFAULT_LABEL_PADDING = 4;\n\nexport const LABEL_FONT_FAMILY = 'DT Flow';\nexport const DEFAULT_FONT_WEIGHT = 400;\nexport const INCREASED_FONT_WEIGHT = 500;\nexport const DEFAULT_NAME_ACCESSOR = undefined;\n\nexport const DARK_LABEL_TEXT = '#000000';\nexport const LIGHT_LABEL_TEXT = '#ffffff';\n\nexport const RECT_BORDER_RADIUS = 2;\nexport const RECT_STROKE_WIDTH = 1;\nexport const RECT_CLUSTER_OPACITY = 0.15;\n\nexport const NODE_LEAF_PADDING = 1; // sets leaf node padding to 2px\nexport const NODE_CLUSTER_PADDING = 2; // sets parent node padding to 6px\nexport const NODE_WITH_RECT_CLUSTER_PADDING = 7;\nexport const NODE_WITH_RECT_PADDING_TOP =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const ROOT_NODE_WITH_LABELS_OUTER_PADDING = 3;\nexport const NODE_WITH_RECT_OUTER_PADDING = 3;\n\nconst MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH = 1;\n\nconst ADDITIONAL_CLUSTER_HEIGHT_SPACING = 2;\nconst ADDITIONAL_CLUSTER_WIDTH_SPACING = 4;\n\nexport const MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE +\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  CLUSTER_LABEL_PADDING_SUM +\n  ADDITIONAL_CLUSTER_HEIGHT_SPACING;\n\nexport const MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN =\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  ADDITIONAL_CLUSTER_WIDTH_SPACING;\n\nexport const AGGREGATED_NODE_COLOR = Colors.Background.Container.Neutral.Accent;\n\nexport const OUT_OF_RANGE_NODE_COLOR =\n  Colors.Background.Container.Neutral.Accent;\n\nexport const DEFAULT_RANGE_LEGEND_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const DEFAULT_BORDER_COLOR = Colors.Border.Neutral.Accent;\n\nexport const LABEL_OPTIONS: MappedObject<LabelOptions> = {\n  Ellipsis: 'ellipsis',\n  Fallback: 'fallback',\n  Inline: 'inline',\n  Multi: 'multi',\n  Name: 'name',\n};\n\nexport const TREEMAP_CHART_ARIA_LABEL = 'Tree Map Chart';\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAInB,SAAS,4BAA4B;AAG9B,MAAM,eAAe;AAErB,MAAM,iBAAiB,OAAO,OAAoC;AAAA,EACvE,KAAK;AAAA,EACL,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AACR,CAAC;AAEM,MAAM,aAAa,OAAO,OAAgC;AAAA,EAC/D,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AACP,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAEM,MAAM,mBAAmB;AACzB,MAAM,2BAA2B;AACjC,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,oCAAoC;AAC1C,MAAM,8BAA8B;AACpC,MAAM,wBAAwB;AAC9B,MAAM,+BAA+B;AACrC,MAAM,0CAA0C;AAChD,MAAM,4BAA4B;AAElC,MAAM,yBAAwC,eAAe;AAC7D,MAAM,sBAAiC,WAAW;AAClD,MAAM,yBAAuC,cAAc;AAC3D,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AACvC,MAAM,oCAAoC;AAC1C,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,yBAAyB;AAEtC,MAAM,wBAAwB;AAC9B,MAAM,4BAA4B,wBAAwB;AACnD,MAAM,qBACX,iCAAiC;AAC5B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAEzB,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAC7B,MAAM,iCAAiC;AACvC,MAAM,6BACX,iCAAiC;AAC5B,MAAM,sCAAsC;AAC5C,MAAM,+BAA+B;AAE5C,MAAM,oCAAoC;AAE1C,MAAM,oCAAoC;AAC1C,MAAM,mCAAmC;AAElC,MAAM,2CACX,iCACA,oCACA,IAAI,oBACJ,4BACA;AAEK,MAAM,0CACX,oCACA,IAAI,oBACJ;AAEK,MAAM,wBAAwB,OAAO,WAAW,UAAU,QAAQ;AAElE,MAAM,0BACX,OAAO,WAAW,UAAU,QAAQ;AAE/B,MAAM,6BAA6B;AAEnC,MAAM,uBAAuB,OAAO,OAAO,QAAQ;AAEnD,MAAM,gBAA4C;AAAA,EACvD,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,2BAA2B;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { TextAlign, TextBaseline } from './types/canvas.js';\nimport type { LabelsDisplay, NameAccessor } from './types/treemap.js';\nimport { SCALE_FALLBACK_COLOR } from '../core/constants.js';\nimport type { MappedObject } from '../core/types/helpers/mapped-object.js';\n\nexport const DISPLAY_NAME = 'TreeMap';\n\nexport const LABELS_DISPLAY = Object.freeze<MappedObject<LabelsDisplay>>({\n  All: 'all',\n  Clusters: 'clusters',\n  ClustersAndValues: 'clusters-and-values',\n  Nodes: 'nodes',\n  None: 'none',\n});\n\nexport const TEXT_ALIGN = Object.freeze<MappedObject<TextAlign>>({\n  Center: 'center',\n  End: 'end',\n  Left: 'left',\n  Right: 'right',\n  Start: 'start',\n});\n\nexport const TEXT_BASELINE = Object.freeze<MappedObject<TextBaseline>>({\n  Alphabetic: 'alphabetic',\n  Bottom: 'bottom',\n  Hanging: 'hanging',\n  Ideographic: 'ideographic',\n  Middle: 'middle',\n  Top: 'top',\n});\n\nexport const NAME_ACCESSOR = Object.freeze<MappedObject<NameAccessor>>({\n  Name: 'name',\n  Value: 'value',\n});\n\nexport const CLUSTER_OTHER_ID = 'other-cluster';\nexport const DEFAULT_AGGREGATED_LABEL = 'Other';\nexport const DEFAULT_ROOT_NODE_NAME = 'root node';\nexport const DEFAULT_WIDTH = '100%';\nexport const DEFAULT_HEIGHT = 300;\nexport const DEFAULT_LOADING_STATE = false;\nexport const DEFAULT_CATEGORICAL_COLOR_PALETTE = 'categorical';\nexport const DEFAULT_RANGE_COLOR_PALETTE = 'moss';\nexport const DEFAULT_MIN_NODE_SIZE = 250;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT = 1000;\nexport const DEFAULT_MIN_NODE_SIZE_PARENT_AND_LABELS = 2000;\nexport const DEFAULT_TOOLBAR_PLACEMENT = 'top-right';\n\nexport const DEFAULT_LABELS_DISPLAY: LabelsDisplay = LABELS_DISPLAY.None;\nexport const DEFAULT_LABEL_ALIGN: TextAlign = TEXT_ALIGN.Center;\nexport const DEFAULT_LABEL_BASELINE: TextBaseline = TEXT_BASELINE.Middle;\nexport const DEFAULT_LABEL_FONTSIZE = 12;\nexport const DEFAULT_LABEL_LINE_HEIGHT = 16;\nexport const DEFAULT_CLUSTER_LABEL_FONTSIZE = 12;\nexport const DEFAULT_CLUSTER_LABEL_LINE_HEIGHT = 20;\nexport const CLUSTER_LABEL_OFFSET_Y = DEFAULT_LABEL_FONTSIZE + 2;\nexport const CLUSTER_LABEL_OFFSET_X = 10;\n\nconst CLUSTER_LABEL_PADDING = 4;\nconst CLUSTER_LABEL_PADDING_SUM = CLUSTER_LABEL_PADDING * 2;\nexport const MIN_CLUSTER_HEIGHT =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const DEFAULT_LABEL_PADDING = 4;\n\nexport const LABEL_FONT_FAMILY = 'DT Flow';\nexport const DEFAULT_FONT_WEIGHT = 400;\nexport const INCREASED_FONT_WEIGHT = 500;\nexport const DEFAULT_NAME_ACCESSOR = undefined;\n\nexport const DEFAULT_TEXT_SIZE: number | 'auto' = DEFAULT_LABEL_FONTSIZE;\n\nexport const AUTO_TEXT_SIZE_PRESETS = [18, 16, 14, 12];\n\nexport const DARK_LABEL_TEXT = '#000000';\nexport const LIGHT_LABEL_TEXT = '#ffffff';\n\nexport const RECT_BORDER_RADIUS = 2;\nexport const RECT_STROKE_WIDTH = 1;\nexport const RECT_CLUSTER_OPACITY = 0.15;\n\nexport const NODE_LEAF_PADDING = 1; // sets leaf node padding to 2px\nexport const NODE_CLUSTER_PADDING = 2; // sets parent node padding to 6px\nexport const NODE_WITH_RECT_CLUSTER_PADDING = 7;\nexport const NODE_WITH_RECT_PADDING_TOP =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE + CLUSTER_LABEL_PADDING_SUM;\nexport const ROOT_NODE_WITH_LABELS_OUTER_PADDING = 3;\nexport const NODE_WITH_RECT_OUTER_PADDING = 3;\n\nconst MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH = 1;\n\nconst ADDITIONAL_CLUSTER_HEIGHT_SPACING = 2;\nconst ADDITIONAL_CLUSTER_WIDTH_SPACING = 4;\n\nexport const MIN_CLUSTER_HEIGHT_WITH_VISIBLE_CHILDREN =\n  DEFAULT_CLUSTER_LABEL_FONTSIZE +\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  CLUSTER_LABEL_PADDING_SUM +\n  ADDITIONAL_CLUSTER_HEIGHT_SPACING;\n\nexport const MIN_CLUSTER_WIDTH_WITH_VISIBLE_CHILDREN =\n  MIN_VISIBLE_NODE_HEIGHT_AND_WIDTH +\n  2 * RECT_STROKE_WIDTH +\n  ADDITIONAL_CLUSTER_WIDTH_SPACING;\n\nexport const AGGREGATED_NODE_COLOR = Colors.Background.Container.Neutral.Accent;\n\nexport const OUT_OF_RANGE_NODE_COLOR =\n  Colors.Background.Container.Neutral.Accent;\n\nexport const DEFAULT_RANGE_LEGEND_COLOR = SCALE_FALLBACK_COLOR;\n\nexport const DEFAULT_BORDER_COLOR = Colors.Border.Neutral.Accent;\n\nexport const TREEMAP_CHART_ARIA_LABEL = 'Tree Map Chart';\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAInB,SAAS,4BAA4B;AAG9B,MAAM,eAAe;AAErB,MAAM,iBAAiB,OAAO,OAAoC;AAAA,EACvE,KAAK;AAAA,EACL,UAAU;AAAA,EACV,mBAAmB;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AACR,CAAC;AAEM,MAAM,aAAa,OAAO,OAAgC;AAAA,EAC/D,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,KAAK;AACP,CAAC;AAEM,MAAM,gBAAgB,OAAO,OAAmC;AAAA,EACrE,MAAM;AAAA,EACN,OAAO;AACT,CAAC;AAEM,MAAM,mBAAmB;AACzB,MAAM,2BAA2B;AACjC,MAAM,yBAAyB;AAC/B,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,wBAAwB;AAC9B,MAAM,oCAAoC;AAC1C,MAAM,8BAA8B;AACpC,MAAM,wBAAwB;AAC9B,MAAM,+BAA+B;AACrC,MAAM,0CAA0C;AAChD,MAAM,4BAA4B;AAElC,MAAM,yBAAwC,eAAe;AAC7D,MAAM,sBAAiC,WAAW;AAClD,MAAM,yBAAuC,cAAc;AAC3D,MAAM,yBAAyB;AAC/B,MAAM,4BAA4B;AAClC,MAAM,iCAAiC;AACvC,MAAM,oCAAoC;AAC1C,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,yBAAyB;AAEtC,MAAM,wBAAwB;AAC9B,MAAM,4BAA4B,wBAAwB;AACnD,MAAM,qBACX,iCAAiC;AAC5B,MAAM,wBAAwB;AAE9B,MAAM,oBAAoB;AAC1B,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAE9B,MAAM,oBAAqC;AAE3C,MAAM,yBAAyB,CAAC,IAAI,IAAI,IAAI,EAAE;AAE9C,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAEzB,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAE7B,MAAM,oBAAoB;AAC1B,MAAM,uBAAuB;AAC7B,MAAM,iCAAiC;AACvC,MAAM,6BACX,iCAAiC;AAC5B,MAAM,sCAAsC;AAC5C,MAAM,+BAA+B;AAE5C,MAAM,oCAAoC;AAE1C,MAAM,oCAAoC;AAC1C,MAAM,mCAAmC;AAElC,MAAM,2CACX,iCACA,oCACA,IAAI,oBACJ,4BACA;AAEK,MAAM,0CACX,oCACA,IAAI,oBACJ;AAEK,MAAM,wBAAwB,OAAO,WAAW,UAAU,QAAQ;AAElE,MAAM,0BACX,OAAO,WAAW,UAAU,QAAQ;AAE/B,MAAM,6BAA6B;AAEnC,MAAM,uBAAuB,OAAO,OAAO,QAAQ;AAEnD,MAAM,2BAA2B;",
   "names": []
 }

package/esm/charts/tree-map/context/TextSizeContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import { DEFAULT_TEXT_SIZE } from "../constants.js";
+const TextSizeContext = createContext(DEFAULT_TEXT_SIZE);
+const useTextSize = () => useContext(TextSizeContext);
+TextSizeContext["displayName"] = "TextSizeContext";
+export {
+  TextSizeContext,
+  useTextSize
+};
+//# sourceMappingURL=TextSizeContext.js.map

package/esm/charts/tree-map/context/TextSizeContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/tree-map/context/TextSizeContext.ts"],
+  "sourcesContent": ["import { createContext, useContext } from 'react';\n\nimport { DEFAULT_TEXT_SIZE } from '../constants.js';\n\nexport const TextSizeContext = createContext<number | 'auto'>(DEFAULT_TEXT_SIZE);\n\nexport const useTextSize = () => useContext(TextSizeContext);\n\nTextSizeContext['displayName'] = 'TextSizeContext';\n"],
+  "mappings": "AAAA,SAAS,eAAe,kBAAkB;AAE1C,SAAS,yBAAyB;AAE3B,MAAM,kBAAkB,cAA+B,iBAAiB;AAExE,MAAM,cAAc,MAAM,WAAW,eAAe;AAE3D,gBAAgB,aAAa,IAAI;",
+  "names": []
+}

package/esm/charts/tree-map/contexts/TreeMapCustomTooltipContext.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+const DEFAULT_CUSTOM_TOOLTIP_CONFIG = {
+  hidden: false
+};
+const TreeMapCustomTooltipContext = createContext(DEFAULT_CUSTOM_TOOLTIP_CONFIG);
+export {
+  DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+  TreeMapCustomTooltipContext
+};
+//# sourceMappingURL=TreeMapCustomTooltipContext.js.map

package/esm/charts/tree-map/contexts/TreeMapCustomTooltipContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/tree-map/contexts/TreeMapCustomTooltipContext.ts"],
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport { TreeMapCustomTooltipConfig } from '../types/treemap-chart.config.js';\n\nexport const DEFAULT_CUSTOM_TOOLTIP_CONFIG: TreeMapCustomTooltipConfig = {\n  hidden: false,\n};\n\nexport const TreeMapCustomTooltipContext =\n  createContext<TreeMapCustomTooltipConfig>(DEFAULT_CUSTOM_TOOLTIP_CONFIG);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAIvB,MAAM,gCAA4D;AAAA,EACvE,QAAQ;AACV;AAEO,MAAM,8BACX,cAA0C,6BAA6B;",
+  "names": []
+}

package/esm/charts/tree-map/defaults.js

@@ -2,7 +2,8 @@ import {
   DEFAULT_CATEGORICAL_COLOR_PALETTE,
   DEFAULT_LABELS_DISPLAY,
   DEFAULT_LOADING_STATE,
-  DEFAULT_NAME_ACCESSOR
+  DEFAULT_NAME_ACCESSOR,
+  DEFAULT_TEXT_SIZE
 } from "./constants.js";
 import {
   DEFAULT_TRUNCATION_MODE,
@@ -23,7 +24,8 @@ const defaultTreeMapConfig = {
   labelsDisplay: DEFAULT_LABELS_DISPLAY,
   nameAccessor: DEFAULT_NAME_ACCESSOR,
   min: void 0,
-  max: void 0
+  max: void 0,
+  textSize: DEFAULT_TEXT_SIZE
 };
 export {
   DEFAULT_LEGEND,

package/esm/charts/tree-map/defaults.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/tree-map/defaults.ts"],
-  "sourcesContent": ["import {\n  DEFAULT_CATEGORICAL_COLOR_PALETTE,\n  DEFAULT_LABELS_DISPLAY,\n  DEFAULT_LOADING_STATE,\n  DEFAULT_NAME_ACCESSOR,\n} from './constants.js';\nimport {\n  TreeMapConfig,\n  TreemapChartLegendConfig,\n} from './types/treemap-chart.config.js';\nimport {\n  DEFAULT_TRUNCATION_MODE,\n  defaultRatio,\n  LEGEND_POSITION,\n} from '../core/constants.js';\n\nexport const DEFAULT_LEGEND: TreemapChartLegendConfig = {\n  position: LEGEND_POSITION.Auto,\n  hidden: false,\n  ratio: defaultRatio,\n};\n\nexport const defaultTreeMapConfig: TreeMapConfig = {\n  colorPalette: DEFAULT_CATEGORICAL_COLOR_PALETTE,\n  formatter: (v: number) => v.toString(),\n  truncationMode: DEFAULT_TRUNCATION_MODE,\n  loading: DEFAULT_LOADING_STATE,\n  legend: DEFAULT_LEGEND,\n  labelsDisplay: DEFAULT_LABELS_DISPLAY,\n  nameAccessor: DEFAULT_NAME_ACCESSOR,\n  min: undefined,\n  max: undefined,\n};\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAA2C;AAAA,EACtD,UAAU,gBAAgB;AAAA,EAC1B,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,uBAAsC;AAAA,EACjD,cAAc;AAAA,EACd,WAAW,CAAC,MAAc,EAAE,SAAS;AAAA,EACrC,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,cAAc;AAAA,EACd,KAAK;AAAA,EACL,KAAK;AACP;",
+  "sourcesContent": ["import {\n  DEFAULT_CATEGORICAL_COLOR_PALETTE,\n  DEFAULT_LABELS_DISPLAY,\n  DEFAULT_LOADING_STATE,\n  DEFAULT_NAME_ACCESSOR,\n  DEFAULT_TEXT_SIZE,\n} from './constants.js';\nimport {\n  TreeMapConfig,\n  TreemapChartLegendConfig,\n} from './types/treemap-chart.config.js';\nimport {\n  DEFAULT_TRUNCATION_MODE,\n  defaultRatio,\n  LEGEND_POSITION,\n} from '../core/constants.js';\n\nexport const DEFAULT_LEGEND: TreemapChartLegendConfig = {\n  position: LEGEND_POSITION.Auto,\n  hidden: false,\n  ratio: defaultRatio,\n};\n\nexport const defaultTreeMapConfig: TreeMapConfig = {\n  colorPalette: DEFAULT_CATEGORICAL_COLOR_PALETTE,\n  formatter: (v: number) => v.toString(),\n  truncationMode: DEFAULT_TRUNCATION_MODE,\n  loading: DEFAULT_LOADING_STATE,\n  legend: DEFAULT_LEGEND,\n  labelsDisplay: DEFAULT_LABELS_DISPLAY,\n  nameAccessor: DEFAULT_NAME_ACCESSOR,\n  min: undefined,\n  max: undefined,\n  textSize: DEFAULT_TEXT_SIZE,\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAKP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,iBAA2C;AAAA,EACtD,UAAU,gBAAgB;AAAA,EAC1B,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,MAAM,uBAAsC;AAAA,EACjD,cAAc;AAAA,EACd,WAAW,CAAC,MAAc,EAAE,SAAS;AAAA,EACrC,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,cAAc;AAAA,EACd,KAAK;AAAA,EACL,KAAK;AAAA,EACL,UAAU;AACZ;",
   "names": []
 }

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

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { TreeMapCustomTooltipContext } from "../contexts/TreeMapCustomTooltipContext.js";
+const useTreeMapCustomTooltip = () => useContext(TreeMapCustomTooltipContext);
+export {
+  useTreeMapCustomTooltip
+};
+//# sourceMappingURL=useTreeMapCustomTooltip.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/tree-map/hooks/useTreeMapCustomTooltip.tsx"],
+  "sourcesContent": ["import { useContext } from 'react';\n\nimport { TreeMapCustomTooltipContext } from '../contexts/TreeMapCustomTooltipContext.js';\n\nexport const useTreeMapCustomTooltip = () =>\n  useContext(TreeMapCustomTooltipContext);\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAS,mCAAmC;AAErC,MAAM,0BAA0B,MACrC,WAAW,2BAA2B;",
+  "names": []
+}

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

@@ -9,8 +9,13 @@ import { FormatterContext } from "../context/FormatterContext.js";
 import { LabelsDisplayContext } from "../context/LabelsDisplayContext.js";
 import { MinMaxConfigContext } from "../context/MinMaxConfigContext.js";
 import { NameAccessorContext } from "../context/NameAccessorContext.js";
+import { TextSizeContext } from "../context/TextSizeContext.js";
 import { ToolbarContext } from "../context/ToolbarContext.js";
 import { TreeMapRawDataContext } from "../context/TreeMapRawDataContext.js";
+import {
+  DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+  TreeMapCustomTooltipContext
+} from "../contexts/TreeMapCustomTooltipContext.js";
 const TreeMapChartProviders = (props) => {
   const {
     data,
@@ -26,7 +31,9 @@ const TreeMapChartProviders = (props) => {
     max: configMax,
     children,
     colorRules = [],
-    unit
+    unit,
+    textSize,
+    tooltip
   } = props;
   const min = configMin === "data-min" ? void 0 : configMin;
   const max = configMax === "data-max" ? void 0 : configMax;
@@ -49,7 +56,13 @@ const TreeMapChartProviders = (props) => {
             formatter,
             truncationMode
           },
-          children: /* @__PURE__ */ jsx(ColorPaletteContext.Provider, { value: colorPalette, children: /* @__PURE__ */ jsx(ChartLegendContext.Provider, { value: legend, children: /* @__PURE__ */ jsx(NameAccessorContext.Provider, { value: nameAccessor, children: /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: toolbar, children: /* @__PURE__ */ jsx(LabelsDisplayContext.Provider, { value: labelsDisplay, children: /* @__PURE__ */ jsx(MinMaxConfigContext.Provider, { value: { min, max }, children: /* @__PURE__ */ jsx(StoreProvider, { children }) }) }) }) }) }) })
+          children: /* @__PURE__ */ jsx(ColorPaletteContext.Provider, { value: colorPalette, children: /* @__PURE__ */ jsx(ChartLegendContext.Provider, { value: legend, children: /* @__PURE__ */ jsx(NameAccessorContext.Provider, { value: nameAccessor, children: /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: toolbar, children: /* @__PURE__ */ jsx(LabelsDisplayContext.Provider, { value: labelsDisplay, children: /* @__PURE__ */ jsx(TextSizeContext.Provider, { value: textSize, children: /* @__PURE__ */ jsx(MinMaxConfigContext.Provider, { value: { min, max }, children: /* @__PURE__ */ jsx(
+            TreeMapCustomTooltipContext.Provider,
+            {
+              value: tooltip ?? DEFAULT_CUSTOM_TOOLTIP_CONFIG,
+              children: /* @__PURE__ */ jsx(StoreProvider, { children })
+            }
+          ) }) }) }) }) }) }) })
         }
       )
     }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/providers/TreeMapChartProviders.tsx"],
-  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRuleContext } from '../../core/context/ColorRuleContext.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { ColoredRange } from '../../core/types/colored-range.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport type { ChartToolbarConfig } from '../../core/types/toolbar.js';\nimport { ChartLegendContext } from '../context/ChartLegendContext.js';\nimport { ColorPaletteContext } from '../context/ColorPaletteContext.js';\nimport { FormatterContext } from '../context/FormatterContext.js';\nimport { LabelsDisplayContext } from '../context/LabelsDisplayContext.js';\nimport { MinMaxConfigContext } from '../context/MinMaxConfigContext.js';\nimport { NameAccessorContext } from '../context/NameAccessorContext.js';\nimport { ToolbarContext } from '../context/ToolbarContext.js';\nimport { TreeMapRawDataContext } from '../context/TreeMapRawDataContext.js';\nimport type { TreeMapFormatter } from '../types/internal.js';\nimport type {\n  LabelsDisplay,\n  NameAccessor,\n  TreeMapData,\n  TreeMapLeafNode,\n} from '../types/treemap.js';\n\ninterface TreeMapChartProvidersProps extends PropsWithChildren {\n  data: TreeMapData;\n  seriesActions?: (node: TreeMapLeafNode) => SeriesActionsTemplate;\n  formatter: TreeMapFormatter;\n  truncationMode: TruncationMode;\n  legend: LegendProps;\n  toolbar?: ChartToolbarConfig;\n  labelsDisplay: LabelsDisplay;\n  nameAccessor?: NameAccessor;\n  colorPalette: ColorPalette | CustomColorPalette | ColoredRange[];\n  min?: 'data-min' | number;\n  max?: 'data-max' | number;\n  colorRules?: ColorRuleProps[];\n  unit?: string | Unit;\n}\n\nexport const TreeMapChartProviders = (props: TreeMapChartProvidersProps) => {\n  const {\n    data,\n    seriesActions,\n    formatter,\n    truncationMode,\n    legend,\n    toolbar,\n    labelsDisplay,\n    nameAccessor,\n    colorPalette,\n    min: configMin,\n    max: configMax,\n    children,\n    colorRules = [],\n    unit,\n  } = props;\n\n  const min = configMin === 'data-min' ? undefined : configMin;\n  const max = configMax === 'data-max' ? undefined : configMax;\n\n  const memoizedRawData = useMemo(\n    () => ({ ...data, unit: unit ?? data.unit }),\n    [data, unit],\n  );\n\n  return (\n    <ColorRuleContext.Provider value={colorRules}>\n      <TreeMapRawDataContext.Provider value={memoizedRawData}>\n        <ChartSeriesActionContext.Provider\n          value={{\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            chartSeriesActions: seriesActions,\n          }}\n        >\n          <FormatterContext.Provider\n            value={{\n              formatter,\n              truncationMode,\n            }}\n          >\n            <ColorPaletteContext.Provider value={colorPalette}>\n              <ChartLegendContext.Provider value={legend}>\n                <NameAccessorContext.Provider value={nameAccessor}>\n                  <ToolbarContext.Provider value={toolbar}>\n                    <LabelsDisplayContext.Provider value={labelsDisplay}>\n                      <MinMaxConfigContext.Provider value={{ min, max }}>\n                        <StoreProvider>{children}</StoreProvider>\n                      </MinMaxConfigContext.Provider>\n                    </LabelsDisplayContext.Provider>\n                  </ToolbarContext.Provider>\n                </NameAccessorContext.Provider>\n              </ChartLegendContext.Provider>\n            </ColorPaletteContext.Provider>\n          </FormatterContext.Provider>\n        </ChartSeriesActionContext.Provider>\n      </TreeMapRawDataContext.Provider>\n    </ColorRuleContext.Provider>\n  );\n};\n\nTreeMapChartProviders['displayName'] = 'TreeMapChartProviders';\n"],
-  "mappings": "AAiGwB;AAjGxB,SAAS,eAAuC;AAIhD,SAAS,qBAAqB;AAE9B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAUjC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAyB/B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA,aAAa,CAAC;AAAA,IACd;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,cAAc,aAAa,SAAY;AACnD,QAAM,MAAM,cAAc,aAAa,SAAY;AAEnD,QAAM,kBAAkB;AAAA,IACtB,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,KAAK,KAAK;AAAA,IAC1C,CAAC,MAAM,IAAI;AAAA,EACb;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAChC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,iBACrC;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB;AAAA,MACtB;AAAA,MAEA;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAClC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,eACpC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,KAAK,IAAI,GAC9C,8BAAC,iBAAe,UAAS,GAC3B,GACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRuleContext } from '../../core/context/ColorRuleContext.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { ColoredRange } from '../../core/types/colored-range.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport type { ChartToolbarConfig } from '../../core/types/toolbar.js';\nimport { ChartLegendContext } from '../context/ChartLegendContext.js';\nimport { ColorPaletteContext } from '../context/ColorPaletteContext.js';\nimport { FormatterContext } from '../context/FormatterContext.js';\nimport { LabelsDisplayContext } from '../context/LabelsDisplayContext.js';\nimport { MinMaxConfigContext } from '../context/MinMaxConfigContext.js';\nimport { NameAccessorContext } from '../context/NameAccessorContext.js';\nimport { TextSizeContext } from '../context/TextSizeContext.js';\nimport { ToolbarContext } from '../context/ToolbarContext.js';\nimport { TreeMapRawDataContext } from '../context/TreeMapRawDataContext.js';\nimport {\n  DEFAULT_CUSTOM_TOOLTIP_CONFIG,\n  TreeMapCustomTooltipContext,\n} from '../contexts/TreeMapCustomTooltipContext.js';\nimport type { TreeMapFormatter } from '../types/internal.js';\nimport type { TreeMapCustomTooltipConfig } from '../types/treemap-chart.config.js';\nimport type {\n  LabelsDisplay,\n  NameAccessor,\n  TreeMapData,\n  TreeMapLeafNode,\n} from '../types/treemap.js';\n\ninterface TreeMapChartProvidersProps extends PropsWithChildren {\n  data: TreeMapData;\n  seriesActions?: (node: TreeMapLeafNode) => SeriesActionsTemplate;\n  formatter: TreeMapFormatter;\n  truncationMode: TruncationMode;\n  legend: LegendProps;\n  toolbar?: ChartToolbarConfig;\n  labelsDisplay: LabelsDisplay;\n  nameAccessor?: NameAccessor;\n  colorPalette: ColorPalette | CustomColorPalette | ColoredRange[];\n  min?: 'data-min' | number;\n  max?: 'data-max' | number;\n  colorRules?: ColorRuleProps[];\n  unit?: string | Unit;\n  textSize: number | 'auto';\n  tooltip?: TreeMapCustomTooltipConfig;\n}\n\nexport const TreeMapChartProviders = (props: TreeMapChartProvidersProps) => {\n  const {\n    data,\n    seriesActions,\n    formatter,\n    truncationMode,\n    legend,\n    toolbar,\n    labelsDisplay,\n    nameAccessor,\n    colorPalette,\n    min: configMin,\n    max: configMax,\n    children,\n    colorRules = [],\n    unit,\n    textSize,\n    tooltip,\n  } = props;\n\n  const min = configMin === 'data-min' ? undefined : configMin;\n  const max = configMax === 'data-max' ? undefined : configMax;\n\n  const memoizedRawData = useMemo(\n    () => ({ ...data, unit: unit ?? data.unit }),\n    [data, unit],\n  );\n\n  return (\n    <ColorRuleContext.Provider value={colorRules}>\n      <TreeMapRawDataContext.Provider value={memoizedRawData}>\n        <ChartSeriesActionContext.Provider\n          value={{\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            chartSeriesActions: seriesActions,\n          }}\n        >\n          <FormatterContext.Provider\n            value={{\n              formatter,\n              truncationMode,\n            }}\n          >\n            <ColorPaletteContext.Provider value={colorPalette}>\n              <ChartLegendContext.Provider value={legend}>\n                <NameAccessorContext.Provider value={nameAccessor}>\n                  <ToolbarContext.Provider value={toolbar}>\n                    <LabelsDisplayContext.Provider value={labelsDisplay}>\n                      <TextSizeContext.Provider value={textSize}>\n                        <MinMaxConfigContext.Provider value={{ min, max }}>\n                          <TreeMapCustomTooltipContext.Provider\n                            value={tooltip ?? DEFAULT_CUSTOM_TOOLTIP_CONFIG}\n                          >\n                            <StoreProvider>{children}</StoreProvider>\n                          </TreeMapCustomTooltipContext.Provider>\n                        </MinMaxConfigContext.Provider>\n                      </TextSizeContext.Provider>\n                    </LabelsDisplayContext.Provider>\n                  </ToolbarContext.Provider>\n                </NameAccessorContext.Provider>\n              </ChartLegendContext.Provider>\n            </ColorPaletteContext.Provider>\n          </FormatterContext.Provider>\n        </ChartSeriesActionContext.Provider>\n      </TreeMapRawDataContext.Provider>\n    </ColorRuleContext.Provider>\n  );\n};\n\nTreeMapChartProviders['displayName'] = 'TreeMapChartProviders';\n"],
+  "mappings": "AA+G4B;AA/G5B,SAAS,eAAuC;AAIhD,SAAS,qBAAqB;AAE9B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAUjC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AA4BA,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA,aAAa,CAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,cAAc,aAAa,SAAY;AACnD,QAAM,MAAM,cAAc,aAAa,SAAY;AAEnD,QAAM,kBAAkB;AAAA,IACtB,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,KAAK,KAAK;AAAA,IAC1C,CAAC,MAAM,IAAI;AAAA,EACb;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAChC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,iBACrC;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB;AAAA,MACtB;AAAA,MAEA;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAClC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,eACpC,8BAAC,gBAAgB,UAAhB,EAAyB,OAAO,UAC/B,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,KAAK,IAAI,GAC9C;AAAA,YAAC,4BAA4B;AAAA,YAA5B;AAAA,cACC,OAAO,WAAW;AAAA,cAElB,8BAAC,iBAAe,UAAS;AAAA;AAAA,UAC3B,GACF,GACF,GACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/tree-map/slots/Tooltip.js

@@ -1,4 +1,4 @@
-const Tooltip = () => null;
+const Tooltip = (props) => null;
 Tooltip["displayName"] = "TreeMap.Tooltip";
 export {
   Tooltip

package/esm/charts/tree-map/slots/Tooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/slots/Tooltip.tsx"],
-  "sourcesContent": ["export const Tooltip = () => null;\n\nTooltip['displayName'] = 'TreeMap.Tooltip';\n"],
-  "mappings": "AAAO,MAAM,UAAU,MAAM;AAE7B,QAAQ,aAAa,IAAI;",
+  "sourcesContent": ["import type { TreeMapCustomTooltipProps } from '../types/treemap-chart.config.js';\n\nexport const Tooltip = (props: TreeMapCustomTooltipProps) => null;\n\nTooltip['displayName'] = 'TreeMap.Tooltip';\n"],
+  "mappings": "AAEO,MAAM,UAAU,CAAC,UAAqC;AAE7D,QAAQ,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/tree-map/types/canvas.js

@@ -1 +1,12 @@
+var LabelLayout = /* @__PURE__ */ ((LabelLayout2) => {
+  LabelLayout2["Ellipsis"] = "ellipsis";
+  LabelLayout2["Fallback"] = "fallback";
+  LabelLayout2["Inline"] = "inline";
+  LabelLayout2["Multi"] = "multi";
+  LabelLayout2["Name"] = "name";
+  return LabelLayout2;
+})(LabelLayout || {});
+export {
+  LabelLayout
+};
 //# sourceMappingURL=canvas.js.map

package/esm/charts/tree-map/types/canvas.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
+  "sources": ["../../../../../src/charts/tree-map/types/canvas.ts"],
+  "sourcesContent": ["export type TextAlign = 'left' | 'right' | 'center' | 'start' | 'end';\nexport type TextBaseline =\n  | 'top'\n  | 'hanging'\n  | 'middle'\n  | 'alphabetic'\n  | 'ideographic'\n  | 'bottom';\n\nexport interface BorderDetails {\n  enabled: boolean;\n  color?: string;\n}\n\nexport enum LabelLayout {\n  Ellipsis = 'ellipsis',\n  Fallback = 'fallback',\n  Inline = 'inline',\n  Multi = 'multi',\n  Name = 'name',\n}\n"],
+  "mappings": "AAcO,IAAK,cAAL,kBAAKA,iBAAL;AACL,EAAAA,aAAA,cAAW;AACX,EAAAA,aAAA,cAAW;AACX,EAAAA,aAAA,YAAS;AACT,EAAAA,aAAA,WAAQ;AACR,EAAAA,aAAA,UAAO;AALG,SAAAA;AAAA,GAAA;",
+  "names": ["LabelLayout"]
 }