@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/charts/tree-map/utils/build-labels.js

@@ -0,0 +1,202 @@
+import { ELLIPSIS_CHARACTER } from "../../../typography/utils.js";
+import {
+  truncateString
+} from "../../core/components/text-ellipsis/truncate-string.js";
+import {
+  AUTO_TEXT_SIZE_PRESETS,
+  DEFAULT_FONT_WEIGHT,
+  DEFAULT_LABEL_FONTSIZE,
+  DEFAULT_LABEL_PADDING,
+  INCREASED_FONT_WEIGHT
+} from "../constants.js";
+import { LabelLayout } from "../types/canvas.js";
+const buildLabels = (labelsConfig, treemapRect, textMeasurer) => {
+  const { withValueOnly } = labelsConfig;
+  const { width, height } = treemapRect;
+  const textTruncator = getTextTruncator(textMeasurer);
+  const availableWidth = width - DEFAULT_LABEL_PADDING * 2;
+  const labelPosition = getLabelPosition(treemapRect);
+  const labelsRect = {
+    ...labelPosition,
+    width: availableWidth,
+    height
+  };
+  if (withValueOnly) {
+    return buildValueLabel(
+      labelsConfig,
+      labelsRect,
+      textMeasurer,
+      textTruncator
+    );
+  }
+  return buildNameValueLabels(
+    labelsConfig,
+    labelsRect,
+    textMeasurer,
+    textTruncator
+  );
+};
+const getTextTruncator = (measureText) => {
+  return (text, fontSize, availableWidth, truncationMode, priority) => {
+    const measure = (t) => measureText(t, fontSize);
+    return truncateString(
+      text,
+      availableWidth,
+      {},
+      truncationMode,
+      priority,
+      measure
+    );
+  };
+};
+const getLabelPosition = ({ width, height, x, y }) => {
+  const { centerX, centerY } = getRectCenter(width, height);
+  return { x: x + centerX, y: y + centerY };
+};
+const getRectCenter = (width, height) => ({
+  centerX: width / 2,
+  centerY: height / 2
+});
+const buildValueLabel = (labelsConfig, labelRect, measureText, truncateText) => {
+  const { value, textSize, truncationMode } = labelsConfig;
+  const { width, x, y } = labelRect;
+  const fontConfig = getFontConfig(value, textSize, width, measureText);
+  const valueWidth = measureText(value, fontConfig.fontSize);
+  const boldFontConfig = getBoldFontConfig(fontConfig);
+  const text = valueWidth > width ? getTruncatedText(
+    width,
+    value,
+    fontConfig.fontSize,
+    truncationMode,
+    truncateText
+  ) : value;
+  return [createLabel(text, boldFontConfig, { x, y })];
+};
+const getFontConfig = (text, textSize, availableWidth, measureText) => {
+  const fontSize = textSize === "auto" ? getAutoFontSize(text, availableWidth, measureText) : textSize;
+  const lineHeight = fontSize * 1.25;
+  return { fontSize, lineHeight, fontWeight: DEFAULT_FONT_WEIGHT };
+};
+const getAutoFontSize = (text, availableWidth, measureText) => {
+  return AUTO_TEXT_SIZE_PRESETS.find((fontSize) => {
+    const valueWidth = measureText(text, fontSize);
+    return valueWidth <= availableWidth;
+  }) ?? DEFAULT_LABEL_FONTSIZE;
+};
+const getBoldFontConfig = (fontConfig) => {
+  return { ...fontConfig, fontWeight: INCREASED_FONT_WEIGHT };
+};
+const getTruncatedText = (availableWidth, value, fontSize, truncationMode, truncateText) => {
+  const truncatedText = truncateText(
+    value,
+    fontSize,
+    availableWidth,
+    truncationMode,
+    "start"
+  );
+  return truncatedText === ELLIPSIS_CHARACTER ? "" : truncatedText;
+};
+const buildNameValueLabels = (labelsConfig, labelsRect, measureText, truncateText) => {
+  const { name, value, textSize } = labelsConfig;
+  const { width, height } = labelsRect;
+  const referenceText = getLongestText(name, value);
+  const fontConfig = getFontConfig(referenceText, textSize, width, measureText);
+  const nameWidth = measureText(name, fontConfig.fontSize);
+  const valueWidth = measureText(value, fontConfig.fontSize);
+  const spaceWidth = measureText(" ", fontConfig.fontSize);
+  const inlineHeight = getInlineHeight(fontConfig.lineHeight);
+  const labelMeasurements = {
+    inlineHeight,
+    multiLineHeight: inlineHeight * 2,
+    nameWidth,
+    valueWidth,
+    nameValueWidth: nameWidth + spaceWidth + valueWidth
+  };
+  const layout = determineLabelLayout(labelMeasurements, width, height);
+  return buildLabelsForLayout(
+    labelsConfig,
+    labelsRect,
+    layout,
+    fontConfig,
+    truncateText
+  );
+};
+const getInlineHeight = (lineHeight) => lineHeight + DEFAULT_LABEL_PADDING;
+const getLongestText = (a, b) => {
+  return a.length > b.length ? a : b;
+};
+const determineLabelLayout = (measurements, availableWidth, containerHeight) => {
+  const { multiLineHeight, inlineHeight, nameValueWidth, nameWidth } = measurements;
+  if (multiLineHeight <= containerHeight) {
+    return LabelLayout.Multi;
+  }
+  if (inlineHeight > containerHeight) {
+    return LabelLayout.Fallback;
+  }
+  if (nameValueWidth <= availableWidth) {
+    return LabelLayout.Inline;
+  }
+  if (nameWidth <= availableWidth) {
+    return LabelLayout.Name;
+  }
+  return LabelLayout.Ellipsis;
+};
+const buildLabelsForLayout = (labelsConfig, labelsRect, layout, fontConfig, truncateText) => {
+  const { name, value, truncationMode } = labelsConfig;
+  const { width, x, y } = labelsRect;
+  const labelPosition = { x, y };
+  switch (layout) {
+    case LabelLayout.Multi: {
+      const offsetY = getInlineHeight(fontConfig.lineHeight) / 2;
+      const boldFontConfig = getBoldFontConfig(fontConfig);
+      const truncatedName = getTruncatedText(
+        width,
+        name,
+        fontConfig.fontSize,
+        truncationMode,
+        truncateText
+      );
+      const truncatedValue = getTruncatedText(
+        width,
+        value,
+        fontConfig.fontSize,
+        truncationMode,
+        truncateText
+      );
+      return [
+        createLabel(truncatedName, fontConfig, {
+          x,
+          y: y - offsetY
+        }),
+        createLabel(truncatedValue, boldFontConfig, {
+          x,
+          y: y + offsetY
+        })
+      ];
+    }
+    case LabelLayout.Inline:
+      return [createLabel(`${name} ${value}`, fontConfig, labelPosition)];
+    case LabelLayout.Name:
+      return [createLabel(name, fontConfig, labelPosition)];
+    case LabelLayout.Ellipsis: {
+      const truncatedText = getTruncatedText(
+        width,
+        name,
+        fontConfig.fontSize,
+        truncationMode,
+        truncateText
+      );
+      return [createLabel(truncatedText, fontConfig, labelPosition)];
+    }
+    case LabelLayout.Fallback:
+    default:
+      return [];
+  }
+};
+const createLabel = (text, fontConfig, position) => {
+  return { text, fontConfig, position };
+};
+export {
+  buildLabels
+};
+//# sourceMappingURL=build-labels.js.map

package/esm/charts/tree-map/utils/build-labels.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/tree-map/utils/build-labels.ts"],
+  "sourcesContent": ["import { ELLIPSIS_CHARACTER } from '../../../typography/utils.js';\nimport {\n  truncateString,\n  type TruncationPriority,\n} from '../../core/components/text-ellipsis/truncate-string.js';\nimport {\n  AUTO_TEXT_SIZE_PRESETS,\n  DEFAULT_FONT_WEIGHT,\n  DEFAULT_LABEL_FONTSIZE,\n  DEFAULT_LABEL_PADDING,\n  INCREASED_FONT_WEIGHT,\n} from '../constants.js';\nimport type { TextMeasurer } from './text-measure.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { LabelLayout } from '../types/canvas.js';\nimport type { TreeMapRect } from '../types/treemap.js';\n\nexport interface TreeMapLabel {\n  text: string;\n  fontConfig: FontConfig;\n  position: { x: number; y: number };\n}\n\ninterface FontConfig {\n  fontSize: number;\n  fontWeight: number;\n  lineHeight: number;\n}\n\ninterface LabelsConfig {\n  name: string;\n  value: string;\n  withValueOnly: boolean;\n  textSize: 'auto' | number;\n  truncationMode: TruncationMode;\n}\n\n/**\n * Builds the list of labels to render inside a tree-map node.\n * Delegates to either a value-only or a name+value layout based on `labelsConfig.withValueOnly`.\n * @param labelsConfig - display configuration including name, value, truncation mode, and text size.\n * @param treemapRect - bounding rectangle of the tree-map node.\n * @param textMeasurer - function used to measure rendered text width at a given font size.\n * @returns An array of `TreeMapLabel` objects ready for canvas rendering.\n */\nexport const buildLabels = (\n  labelsConfig: LabelsConfig,\n  treemapRect: TreeMapRect,\n  textMeasurer: TextMeasurer,\n): TreeMapLabel[] => {\n  const { withValueOnly } = labelsConfig;\n  const { width, height } = treemapRect;\n  const textTruncator = getTextTruncator(textMeasurer);\n  const availableWidth = width - DEFAULT_LABEL_PADDING * 2;\n  const labelPosition = getLabelPosition(treemapRect);\n  const labelsRect: TreeMapRect = {\n    ...labelPosition,\n    width: availableWidth,\n    height,\n  };\n\n  if (withValueOnly) {\n    return buildValueLabel(\n      labelsConfig,\n      labelsRect,\n      textMeasurer,\n      textTruncator,\n    );\n  }\n\n  return buildNameValueLabels(\n    labelsConfig,\n    labelsRect,\n    textMeasurer,\n    textTruncator,\n  );\n};\n\ntype TextTruncator = (\n  text: string,\n  fontSize: number,\n  availableWidth: number,\n  truncationMode: TruncationMode,\n  priority: TruncationPriority,\n) => string;\n\n/**\n * Creates a `TextTruncator` function bound to the given text measurer.\n * @internal\n * @param measureText - function that returns the rendered pixel width of a string at a given font size.\n * @returns A `TextTruncator` that truncates text to fit within an available width.\n */\nconst getTextTruncator = (measureText: TextMeasurer): TextTruncator => {\n  return (\n    text: string,\n    fontSize: number,\n    availableWidth: number,\n    truncationMode: TruncationMode,\n    priority: TruncationPriority,\n  ) => {\n    const measure = (t: string) => measureText(t, fontSize);\n\n    return truncateString(\n      text,\n      availableWidth,\n      {},\n      truncationMode,\n      priority,\n      measure,\n    );\n  };\n};\n\n/**\n * Computes the centered label position within a tree-map node rectangle.\n * @internal\n * @param treemapRect - bounding rectangle of the tree-map node.\n * @returns The `{ x, y }` canvas coordinates for the label origin.\n */\nconst getLabelPosition = ({ width, height, x, y }: TreeMapRect) => {\n  const { centerX, centerY } = getRectCenter(width, height);\n  return { x: x + centerX, y: y + centerY };\n};\n\n/**\n * Returns the center of the node.\n * @internal\n * @param height - height of the node.\n * @param width - width of the node.\n */\nconst getRectCenter = (width: number, height: number) => ({\n  centerX: width / 2,\n  centerY: height / 2,\n});\n\n/**\n * Builds a single bold label containing only the value text.\n * Truncates the text when it exceeds the available width.\n * @internal\n * @param labelsConfig - display configuration providing the value, text size, and truncation mode.\n * @param labelRect - bounding rectangle available for the label.\n * @param measureText - function used to measure rendered text width.\n * @param truncateText - function used to truncate text to a given width.\n * @returns A single-element `TreeMapLabel` array.\n */\nconst buildValueLabel = (\n  labelsConfig: LabelsConfig,\n  labelRect: TreeMapRect,\n  measureText: TextMeasurer,\n  truncateText: TextTruncator,\n) => {\n  const { value, textSize, truncationMode } = labelsConfig;\n  const { width, x, y } = labelRect;\n  const fontConfig = getFontConfig(value, textSize, width, measureText);\n  const valueWidth = measureText(value, fontConfig.fontSize);\n  const boldFontConfig = getBoldFontConfig(fontConfig);\n  const text =\n    valueWidth > width\n      ? getTruncatedText(\n          width,\n          value,\n          fontConfig.fontSize,\n          truncationMode,\n          truncateText,\n        )\n      : value;\n\n  return [createLabel(text, boldFontConfig, { x, y })];\n};\n\n/**\n * Derives a `FontConfig` for the given text and available width.\n * When `textSize` is `'auto'`, the largest fitting preset size is selected.\n * @internal\n * @param text - the string that needs to fit within `availableWidth`.\n * @param textSize - explicit font size in pixels, or `'auto'` for automatic sizing.\n * @param availableWidth - maximum pixel width the text must fit in.\n * @param measureText - function used to measure rendered text width.\n * @returns A `FontConfig` with `fontSize`, `lineHeight`, and default `fontWeight`.\n */\nconst getFontConfig = (\n  text: string,\n  textSize: 'auto' | number,\n  availableWidth: number,\n  measureText: TextMeasurer,\n): FontConfig => {\n  const fontSize =\n    textSize === 'auto'\n      ? getAutoFontSize(text, availableWidth, measureText)\n      : textSize;\n  const lineHeight = fontSize * 1.25;\n\n  return { fontSize, lineHeight, fontWeight: DEFAULT_FONT_WEIGHT };\n};\n\n/**\n * Selects the largest font size from `AUTO_TEXT_SIZE_PRESETS` at which `text` fits within `availableWidth`.\n * Falls back to `DEFAULT_LABEL_FONTSIZE` when no preset fits.\n * @internal\n * @param text - the string to measure.\n * @param availableWidth - maximum pixel width the text must fit in.\n * @param measureText - function used to measure rendered text width.\n * @returns The chosen font size in pixels.\n */\nconst getAutoFontSize = (\n  text: string,\n  availableWidth: number,\n  measureText: TextMeasurer,\n): number => {\n  return (\n    AUTO_TEXT_SIZE_PRESETS.find((fontSize) => {\n      const valueWidth = measureText(text, fontSize);\n      return valueWidth <= availableWidth;\n    }) ?? DEFAULT_LABEL_FONTSIZE\n  );\n};\n\n/**\n * Returns a copy of `fontConfig` with the font weight increased to `INCREASED_FONT_WEIGHT`.\n * @internal\n * @param fontConfig - base font configuration to derive from.\n * @returns A new `FontConfig` with a heavier font weight.\n */\nconst getBoldFontConfig = (fontConfig: FontConfig) => {\n  return { ...fontConfig, fontWeight: INCREASED_FONT_WEIGHT };\n};\n\n/**\n * Truncates `value` to fit within `availableWidth` at the given `fontSize`.\n * Returns an empty string when truncation produces only an ellipsis character.\n * @internal\n * @param availableWidth - maximum pixel width allowed for the text.\n * @param value - the string to truncate.\n * @param fontSize - font size in pixels used when measuring.\n * @param truncationMode - strategy controlling where the ellipsis is inserted.\n * @param truncateText - the bound truncation function.\n * @returns The truncated string, or an empty string if nothing meaningful remains.\n */\nconst getTruncatedText = (\n  availableWidth: number,\n  value: string,\n  fontSize: number,\n  truncationMode: TruncationMode,\n  truncateText: TextTruncator,\n): string => {\n  const truncatedText = truncateText(\n    value,\n    fontSize,\n    availableWidth,\n    truncationMode,\n    'start',\n  );\n\n  return truncatedText === ELLIPSIS_CHARACTER ? '' : truncatedText;\n};\n\n/**\n * Builds one or two labels for a node that displays both a name and a value.\n * Chooses a layout (multi-line, inline, name-only, ellipsis, or fallback) based\n * on the available space and measured text widths.\n * @internal\n * @param labelsConfig - display configuration providing name, value, text size, and truncation mode.\n * @param labelsRect - bounding rectangle available for the labels.\n * @param measureText - function used to measure rendered text width.\n * @param truncateText - function used to truncate text to a given width.\n * @returns An array of `TreeMapLabel` objects (0\u20132 items).\n */\nconst buildNameValueLabels = (\n  labelsConfig: LabelsConfig,\n  labelsRect: TreeMapRect,\n  measureText: TextMeasurer,\n  truncateText: TextTruncator,\n) => {\n  const { name, value, textSize } = labelsConfig;\n  const { width, height } = labelsRect;\n  const referenceText = getLongestText(name, value);\n  const fontConfig = getFontConfig(referenceText, textSize, width, measureText);\n\n  const nameWidth = measureText(name, fontConfig.fontSize);\n  const valueWidth = measureText(value, fontConfig.fontSize);\n  const spaceWidth = measureText(' ', fontConfig.fontSize);\n  const inlineHeight = getInlineHeight(fontConfig.lineHeight);\n\n  const labelMeasurements = {\n    inlineHeight,\n    multiLineHeight: inlineHeight * 2,\n    nameWidth,\n    valueWidth,\n    nameValueWidth: nameWidth + spaceWidth + valueWidth,\n  };\n  const layout = determineLabelLayout(labelMeasurements, width, height);\n\n  return buildLabelsForLayout(\n    labelsConfig,\n    labelsRect,\n    layout,\n    fontConfig,\n    truncateText,\n  );\n};\n\n/**\n * Computes the total height of a single-line label by adding the default padding to the line height.\n * @internal\n * @param lineHeight - the line height in pixels derived from the font size.\n * @returns The total label height in pixels.\n */\nconst getInlineHeight = (lineHeight: number) =>\n  lineHeight + DEFAULT_LABEL_PADDING;\n\n/**\n * Returns whichever of the two strings has the greater character count.\n * @internal\n * @param a - first string.\n * @param b - second string.\n * @returns The longer string (`a` when lengths are equal).\n */\nconst getLongestText = (a: string, b: string): string => {\n  return a.length > b.length ? a : b;\n};\n\ninterface LabelMeasurements {\n  inlineHeight: number;\n  multiLineHeight: number;\n  nameWidth: number;\n  valueWidth: number;\n  nameValueWidth: number;\n}\n\n/**\n * Determines the best `LabelLayout` variant for the available space.\n * Priority order: `Multi` \u2192 `Inline` \u2192 `Name` \u2192 `Ellipsis` \u2192 `Fallback`.\n * @internal\n * @param measurements - pre-computed width and height metrics for the label text.\n * @param availableWidth - pixel width available for label rendering.\n * @param containerHeight - pixel height available for label rendering.\n * @returns The most detailed `LabelLayout` that fits within the given dimensions.\n */\nconst determineLabelLayout = (\n  measurements: LabelMeasurements,\n  availableWidth: number,\n  containerHeight: number,\n): LabelLayout => {\n  const { multiLineHeight, inlineHeight, nameValueWidth, nameWidth } =\n    measurements;\n\n  if (multiLineHeight <= containerHeight) {\n    return LabelLayout.Multi;\n  }\n\n  if (inlineHeight > containerHeight) {\n    return LabelLayout.Fallback;\n  }\n\n  if (nameValueWidth <= availableWidth) {\n    return LabelLayout.Inline;\n  }\n\n  if (nameWidth <= availableWidth) {\n    return LabelLayout.Name;\n  }\n\n  return LabelLayout.Ellipsis;\n};\n\n/**\n * Produces the final `TreeMapLabel` array for a given `LabelLayout`.\n * Each layout variant determines how many labels are created and how they are positioned.\n * @internal\n * @param labelsConfig - display configuration providing name, value, and truncation mode.\n * @param labelsRect - bounding rectangle used to compute label positions.\n * @param layout - the layout variant selected by `determineLabelLayout`.\n * @param fontConfig - base font configuration shared by all labels in this node.\n * @param truncateText - function used to truncate text in the `Ellipsis` layout.\n * @returns An array of `TreeMapLabel` objects (0\u20132 items depending on the layout).\n */\nconst buildLabelsForLayout = (\n  labelsConfig: LabelsConfig,\n  labelsRect: TreeMapRect,\n  layout: LabelLayout,\n  fontConfig: FontConfig,\n  truncateText: TextTruncator,\n): TreeMapLabel[] => {\n  const { name, value, truncationMode } = labelsConfig;\n  const { width, x, y } = labelsRect;\n  const labelPosition = { x, y };\n\n  switch (layout) {\n    case LabelLayout.Multi: {\n      const offsetY = getInlineHeight(fontConfig.lineHeight) / 2;\n      const boldFontConfig = getBoldFontConfig(fontConfig);\n      const truncatedName = getTruncatedText(\n        width,\n        name,\n        fontConfig.fontSize,\n        truncationMode,\n        truncateText,\n      );\n      const truncatedValue = getTruncatedText(\n        width,\n        value,\n        fontConfig.fontSize,\n        truncationMode,\n        truncateText,\n      );\n\n      return [\n        createLabel(truncatedName, fontConfig, {\n          x: x,\n          y: y - offsetY,\n        }),\n        createLabel(truncatedValue, boldFontConfig, {\n          x: x,\n          y: y + offsetY,\n        }),\n      ];\n    }\n\n    case LabelLayout.Inline:\n      return [createLabel(`${name} ${value}`, fontConfig, labelPosition)];\n\n    case LabelLayout.Name:\n      return [createLabel(name, fontConfig, labelPosition)];\n\n    case LabelLayout.Ellipsis: {\n      const truncatedText = getTruncatedText(\n        width,\n        name,\n        fontConfig.fontSize,\n        truncationMode,\n        truncateText,\n      );\n\n      return [createLabel(truncatedText, fontConfig, labelPosition)];\n    }\n\n    case LabelLayout.Fallback:\n    default:\n      return [];\n  }\n};\n\n/**\n * Constructs a `TreeMapLabel` from its constituent parts.\n * @internal\n * @param text - the string to render.\n * @param fontConfig - font size, weight, and line height for this label.\n * @param position - canvas `{ x, y }` coordinates for the label origin.\n * @returns A fully formed `TreeMapLabel` object.\n */\nconst createLabel = (\n  text: string,\n  fontConfig: FontConfig,\n  position: { x: number; y: number },\n): TreeMapLabel => {\n  return { text, fontConfig, position };\n};\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,mBAAmB;AA+BrB,MAAM,cAAc,CACzB,cACA,aACA,iBACmB;AACnB,QAAM,EAAE,cAAc,IAAI;AAC1B,QAAM,EAAE,OAAO,OAAO,IAAI;AAC1B,QAAM,gBAAgB,iBAAiB,YAAY;AACnD,QAAM,iBAAiB,QAAQ,wBAAwB;AACvD,QAAM,gBAAgB,iBAAiB,WAAW;AAClD,QAAM,aAA0B;AAAA,IAC9B,GAAG;AAAA,IACH,OAAO;AAAA,IACP;AAAA,EACF;AAEA,MAAI,eAAe;AACjB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAgBA,MAAM,mBAAmB,CAAC,gBAA6C;AACrE,SAAO,CACL,MACA,UACA,gBACA,gBACA,aACG;AACH,UAAM,UAAU,CAAC,MAAc,YAAY,GAAG,QAAQ;AAEtD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,CAAC;AAAA,MACD;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;AAQA,MAAM,mBAAmB,CAAC,EAAE,OAAO,QAAQ,GAAG,EAAE,MAAmB;AACjE,QAAM,EAAE,SAAS,QAAQ,IAAI,cAAc,OAAO,MAAM;AACxD,SAAO,EAAE,GAAG,IAAI,SAAS,GAAG,IAAI,QAAQ;AAC1C;AAQA,MAAM,gBAAgB,CAAC,OAAe,YAAoB;AAAA,EACxD,SAAS,QAAQ;AAAA,EACjB,SAAS,SAAS;AACpB;AAYA,MAAM,kBAAkB,CACtB,cACA,WACA,aACA,iBACG;AACH,QAAM,EAAE,OAAO,UAAU,eAAe,IAAI;AAC5C,QAAM,EAAE,OAAO,GAAG,EAAE,IAAI;AACxB,QAAM,aAAa,cAAc,OAAO,UAAU,OAAO,WAAW;AACpE,QAAM,aAAa,YAAY,OAAO,WAAW,QAAQ;AACzD,QAAM,iBAAiB,kBAAkB,UAAU;AACnD,QAAM,OACJ,aAAa,QACT;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,IACA;AAEN,SAAO,CAAC,YAAY,MAAM,gBAAgB,EAAE,GAAG,EAAE,CAAC,CAAC;AACrD;AAYA,MAAM,gBAAgB,CACpB,MACA,UACA,gBACA,gBACe;AACf,QAAM,WACJ,aAAa,SACT,gBAAgB,MAAM,gBAAgB,WAAW,IACjD;AACN,QAAM,aAAa,WAAW;AAE9B,SAAO,EAAE,UAAU,YAAY,YAAY,oBAAoB;AACjE;AAWA,MAAM,kBAAkB,CACtB,MACA,gBACA,gBACW;AACX,SACE,uBAAuB,KAAK,CAAC,aAAa;AACxC,UAAM,aAAa,YAAY,MAAM,QAAQ;AAC7C,WAAO,cAAc;AAAA,EACvB,CAAC,KAAK;AAEV;AAQA,MAAM,oBAAoB,CAAC,eAA2B;AACpD,SAAO,EAAE,GAAG,YAAY,YAAY,sBAAsB;AAC5D;AAaA,MAAM,mBAAmB,CACvB,gBACA,OACA,UACA,gBACA,iBACW;AACX,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO,kBAAkB,qBAAqB,KAAK;AACrD;AAaA,MAAM,uBAAuB,CAC3B,cACA,YACA,aACA,iBACG;AACH,QAAM,EAAE,MAAM,OAAO,SAAS,IAAI;AAClC,QAAM,EAAE,OAAO,OAAO,IAAI;AAC1B,QAAM,gBAAgB,eAAe,MAAM,KAAK;AAChD,QAAM,aAAa,cAAc,eAAe,UAAU,OAAO,WAAW;AAE5E,QAAM,YAAY,YAAY,MAAM,WAAW,QAAQ;AACvD,QAAM,aAAa,YAAY,OAAO,WAAW,QAAQ;AACzD,QAAM,aAAa,YAAY,KAAK,WAAW,QAAQ;AACvD,QAAM,eAAe,gBAAgB,WAAW,UAAU;AAE1D,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA,iBAAiB,eAAe;AAAA,IAChC;AAAA,IACA;AAAA,IACA,gBAAgB,YAAY,aAAa;AAAA,EAC3C;AACA,QAAM,SAAS,qBAAqB,mBAAmB,OAAO,MAAM;AAEpE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAQA,MAAM,kBAAkB,CAAC,eACvB,aAAa;AASf,MAAM,iBAAiB,CAAC,GAAW,MAAsB;AACvD,SAAO,EAAE,SAAS,EAAE,SAAS,IAAI;AACnC;AAmBA,MAAM,uBAAuB,CAC3B,cACA,gBACA,oBACgB;AAChB,QAAM,EAAE,iBAAiB,cAAc,gBAAgB,UAAU,IAC/D;AAEF,MAAI,mBAAmB,iBAAiB;AACtC,WAAO,YAAY;AAAA,EACrB;AAEA,MAAI,eAAe,iBAAiB;AAClC,WAAO,YAAY;AAAA,EACrB;AAEA,MAAI,kBAAkB,gBAAgB;AACpC,WAAO,YAAY;AAAA,EACrB;AAEA,MAAI,aAAa,gBAAgB;AAC/B,WAAO,YAAY;AAAA,EACrB;AAEA,SAAO,YAAY;AACrB;AAaA,MAAM,uBAAuB,CAC3B,cACA,YACA,QACA,YACA,iBACmB;AACnB,QAAM,EAAE,MAAM,OAAO,eAAe,IAAI;AACxC,QAAM,EAAE,OAAO,GAAG,EAAE,IAAI;AACxB,QAAM,gBAAgB,EAAE,GAAG,EAAE;AAE7B,UAAQ,QAAQ;AAAA,IACd,KAAK,YAAY,OAAO;AACtB,YAAM,UAAU,gBAAgB,WAAW,UAAU,IAAI;AACzD,YAAM,iBAAiB,kBAAkB,UAAU;AACnD,YAAM,gBAAgB;AAAA,QACpB;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,MACF;AACA,YAAM,iBAAiB;AAAA,QACrB;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,QACL,YAAY,eAAe,YAAY;AAAA,UACrC;AAAA,UACA,GAAG,IAAI;AAAA,QACT,CAAC;AAAA,QACD,YAAY,gBAAgB,gBAAgB;AAAA,UAC1C;AAAA,UACA,GAAG,IAAI;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IAEA,KAAK,YAAY;AACf,aAAO,CAAC,YAAY,GAAG,IAAI,IAAI,KAAK,IAAI,YAAY,aAAa,CAAC;AAAA,IAEpE,KAAK,YAAY;AACf,aAAO,CAAC,YAAY,MAAM,YAAY,aAAa,CAAC;AAAA,IAEtD,KAAK,YAAY,UAAU;AACzB,YAAM,gBAAgB;AAAA,QACpB;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,MACF;AAEA,aAAO,CAAC,YAAY,eAAe,YAAY,aAAa,CAAC;AAAA,IAC/D;AAAA,IAEA,KAAK,YAAY;AAAA,IACjB;AACE,aAAO,CAAC;AAAA,EACZ;AACF;AAUA,MAAM,cAAc,CAClB,MACA,YACA,aACiB;AACjB,SAAO,EAAE,MAAM,YAAY,SAAS;AACtC;",
+  "names": []
+}

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

@@ -3,10 +3,12 @@ const buildOverlayTooltipData = (node, formatter, unit) => {
   const item = getTooltipItem(formatter, node, unit);
   const parentName = node.parent?.data.name;
   const nodeColor = node.parent?.data.color?.Default ?? node.data?.color?.Default ?? "";
+  const path = [...node.ancestors()].reverse().slice(1).map((n) => n.data.name);
+  const children = node.children?.map((c) => c.data.name);
   return {
     geometry: "treemap",
     header1: parentName ? [parentName] : [],
-    metadata: { id: item.id, value: node.data.value },
+    metadata: { id: item.id, value: node.data.value, path, children },
     series: [
       {
         name: item.name,

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  return {\n    geometry: 'treemap',\n    header1: parentName ? [parentName] : [],\n    metadata: { id: item.id, value: node.data.value },\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,SAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS,aAAa,CAAC,UAAU,IAAI,CAAC;AAAA,IACtC,UAAU,EAAE,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,MAAM;AAAA,IAChD,QAAQ;AAAA,MACN;AAAA,QACE,MAAM,KAAK;AAAA,QACX,OAAO;AAAA,QACP,OAAO,KAAK,OAAO,CAAC;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AACF;",
+  "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"],
+  "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/build-tree-map-chart-config.js

@@ -34,6 +34,7 @@ const buildTreeMapChartConfig = (props, config, slots) => {
   const legend = getLegendConfiguration(config.legend, slots.legend);
   const toolbar = getToolbarConfiguration(config.toolbar, slots.toolbar);
   const colorRules = (config.colorRules ?? []).filter(isValidColorRule).concat(slots.colorRules?.filter(isValidColorRule) ?? []);
+  const textSize = props.textSize ?? config.textSize ?? defaultTreeMapConfig.textSize;
   return {
     colorPalette,
     formatter,
@@ -45,7 +46,9 @@ const buildTreeMapChartConfig = (props, config, slots) => {
     nameAccessor,
     min,
     max,
-    colorRules
+    colorRules,
+    textSize,
+    tooltip: slots.tooltip ?? config.tooltip
   };
 };
 export {

package/esm/charts/tree-map/utils/build-tree-map-chart-config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/build-tree-map-chart-config.ts"],
-  "sourcesContent": ["import { isUndefined, merge } from 'lodash-es';\n\nimport { isValidColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartToolbarProps } from '../../core/types/toolbar.js';\nimport { defaultUnitFormatter } from '../../core/utils/defaultUnitFormatter.js';\nimport { isValidLegendPosition } from '../../core/utils/is-valid-legend-position.js';\nimport { defaultTreeMapConfig } from '../defaults.js';\nimport type {\n  TreemapChartLegendConfig,\n  TreeMapChartSlots,\n  TreeMapChartToolbarConfig,\n  TreeMapConfig,\n  TreeMapContextConfig,\n} from '../types/treemap-chart.config.js';\nimport type { TreeMapProps } from '../types/treemap.js';\n\nconst validateToolbarContextConfig = (\n  contextConfig: TreeMapChartToolbarConfig | undefined,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n) => !isUndefined(contextConfig) && contextConfig.downloadData?.enabled;\n\nconst getToolbarConfiguration = (\n  contextConfig?: TreeMapChartToolbarConfig,\n  slots?: Partial<ChartToolbarProps>,\n) => {\n  const hasValidToolbarConfig =\n    validateToolbarContextConfig(contextConfig) || !isUndefined(slots);\n\n  return hasValidToolbarConfig ? merge({}, contextConfig, slots) : undefined;\n};\n\n/**\n * Builds a LegendConfiguration based on context and slots\n *\n * @param contextLegendConfig - legend config context\n * @param slotsLegendConfig - legend config props\n */\nexport function getLegendConfiguration(\n  contextLegendConfig?: TreemapChartLegendConfig,\n  slotsLegendConfig?: TreemapChartLegendConfig,\n): TreemapChartLegendConfig {\n  let legend = merge(\n    {},\n    defaultTreeMapConfig.legend,\n    contextLegendConfig,\n    slotsLegendConfig,\n  );\n\n  const position =\n    legend.position && isValidLegendPosition(legend.position)\n      ? legend.position\n      : defaultTreeMapConfig.legend.position;\n\n  legend = {\n    ...legend,\n    position,\n  };\n\n  return legend;\n}\n\n/**\n * Build treemap chart configuration.\n *\n * @param props - config from props\n * @param config - config from context\n * @param slots - config from components slots\n * @returns TreeMapConfig\n */\nexport const buildTreeMapChartConfig = (\n  props: TreeMapProps,\n  config: TreeMapContextConfig,\n  slots: TreeMapChartSlots,\n): TreeMapConfig => {\n  const colorPalette =\n    props.colorPalette ??\n    config.colorPalette ??\n    defaultTreeMapConfig.colorPalette;\n\n  const formatter =\n    props.formatter ??\n    config.formatter ??\n    defaultUnitFormatter(props.unit ?? props.data?.unit);\n\n  const truncationMode =\n    props.truncationMode ??\n    config.truncationMode ??\n    defaultTreeMapConfig.truncationMode;\n\n  const loading =\n    props.loading ?? config.loading ?? defaultTreeMapConfig.loading;\n\n  const labelsDisplay =\n    props.labelsDisplay ??\n    config.labelsDisplay ??\n    defaultTreeMapConfig.labelsDisplay;\n\n  const nameAccessor =\n    props.nameAccessor ??\n    config.nameAccessor ??\n    defaultTreeMapConfig.nameAccessor;\n\n  const min = props.min ?? config.min;\n  const max = props.max ?? config.max;\n\n  const legend = getLegendConfiguration(config.legend, slots.legend);\n\n  const toolbar = getToolbarConfiguration(config.toolbar, slots.toolbar);\n\n  const colorRules = (config.colorRules ?? [])\n    .filter(isValidColorRule)\n    .concat(slots.colorRules?.filter(isValidColorRule) ?? []);\n\n  return {\n    colorPalette,\n    formatter,\n    truncationMode,\n    loading,\n    legend,\n    toolbar,\n    labelsDisplay,\n    nameAccessor,\n    min,\n    max,\n    colorRules,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,aAAa,aAAa;AAEnC,SAAS,wBAAwB;AAEjC,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAUrC,MAAM,+BAA+B,CACnC,kBAEG,CAAC,YAAY,aAAa,KAAK,cAAc,cAAc;AAEhE,MAAM,0BAA0B,CAC9B,eACA,UACG;AACH,QAAM,wBACJ,6BAA6B,aAAa,KAAK,CAAC,YAAY,KAAK;AAEnE,SAAO,wBAAwB,MAAM,CAAC,GAAG,eAAe,KAAK,IAAI;AACnE;AAQO,SAAS,uBACd,qBACA,mBAC0B;AAC1B,MAAI,SAAS;AAAA,IACX,CAAC;AAAA,IACD,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WACJ,OAAO,YAAY,sBAAsB,OAAO,QAAQ,IACpD,OAAO,WACP,qBAAqB,OAAO;AAElC,WAAS;AAAA,IACP,GAAG;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AACT;AAUO,MAAM,0BAA0B,CACrC,OACA,QACA,UACkB;AAClB,QAAM,eACJ,MAAM,gBACN,OAAO,gBACP,qBAAqB;AAEvB,QAAM,YACJ,MAAM,aACN,OAAO,aACP,qBAAqB,MAAM,QAAQ,MAAM,MAAM,IAAI;AAErD,QAAM,iBACJ,MAAM,kBACN,OAAO,kBACP,qBAAqB;AAEvB,QAAM,UACJ,MAAM,WAAW,OAAO,WAAW,qBAAqB;AAE1D,QAAM,gBACJ,MAAM,iBACN,OAAO,iBACP,qBAAqB;AAEvB,QAAM,eACJ,MAAM,gBACN,OAAO,gBACP,qBAAqB;AAEvB,QAAM,MAAM,MAAM,OAAO,OAAO;AAChC,QAAM,MAAM,MAAM,OAAO,OAAO;AAEhC,QAAM,SAAS,uBAAuB,OAAO,QAAQ,MAAM,MAAM;AAEjE,QAAM,UAAU,wBAAwB,OAAO,SAAS,MAAM,OAAO;AAErE,QAAM,cAAc,OAAO,cAAc,CAAC,GACvC,OAAO,gBAAgB,EACvB,OAAO,MAAM,YAAY,OAAO,gBAAgB,KAAK,CAAC,CAAC;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { isUndefined, merge } from 'lodash-es';\n\nimport { isValidColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartToolbarProps } from '../../core/types/toolbar.js';\nimport { defaultUnitFormatter } from '../../core/utils/defaultUnitFormatter.js';\nimport { isValidLegendPosition } from '../../core/utils/is-valid-legend-position.js';\nimport { defaultTreeMapConfig } from '../defaults.js';\nimport type {\n  TreemapChartLegendConfig,\n  TreeMapChartSlots,\n  TreeMapChartToolbarConfig,\n  TreeMapConfig,\n  TreeMapContextConfig,\n} from '../types/treemap-chart.config.js';\nimport type { TreeMapProps } from '../types/treemap.js';\n\nconst validateToolbarContextConfig = (\n  contextConfig: TreeMapChartToolbarConfig | undefined,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n) => !isUndefined(contextConfig) && contextConfig.downloadData?.enabled;\n\nconst getToolbarConfiguration = (\n  contextConfig?: TreeMapChartToolbarConfig,\n  slots?: Partial<ChartToolbarProps>,\n) => {\n  const hasValidToolbarConfig =\n    validateToolbarContextConfig(contextConfig) || !isUndefined(slots);\n\n  return hasValidToolbarConfig ? merge({}, contextConfig, slots) : undefined;\n};\n\n/**\n * Builds a LegendConfiguration based on context and slots\n *\n * @param contextLegendConfig - legend config context\n * @param slotsLegendConfig - legend config props\n */\nexport function getLegendConfiguration(\n  contextLegendConfig?: TreemapChartLegendConfig,\n  slotsLegendConfig?: TreemapChartLegendConfig,\n): TreemapChartLegendConfig {\n  let legend = merge(\n    {},\n    defaultTreeMapConfig.legend,\n    contextLegendConfig,\n    slotsLegendConfig,\n  );\n\n  const position =\n    legend.position && isValidLegendPosition(legend.position)\n      ? legend.position\n      : defaultTreeMapConfig.legend.position;\n\n  legend = {\n    ...legend,\n    position,\n  };\n\n  return legend;\n}\n\n/**\n * Build treemap chart configuration.\n *\n * @param props - config from props\n * @param config - config from context\n * @param slots - config from components slots\n * @returns TreeMapConfig\n */\nexport const buildTreeMapChartConfig = (\n  props: TreeMapProps,\n  config: TreeMapContextConfig,\n  slots: TreeMapChartSlots,\n): TreeMapConfig => {\n  const colorPalette =\n    props.colorPalette ??\n    config.colorPalette ??\n    defaultTreeMapConfig.colorPalette;\n\n  const formatter =\n    props.formatter ??\n    config.formatter ??\n    defaultUnitFormatter(props.unit ?? props.data?.unit);\n\n  const truncationMode =\n    props.truncationMode ??\n    config.truncationMode ??\n    defaultTreeMapConfig.truncationMode;\n\n  const loading =\n    props.loading ?? config.loading ?? defaultTreeMapConfig.loading;\n\n  const labelsDisplay =\n    props.labelsDisplay ??\n    config.labelsDisplay ??\n    defaultTreeMapConfig.labelsDisplay;\n\n  const nameAccessor =\n    props.nameAccessor ??\n    config.nameAccessor ??\n    defaultTreeMapConfig.nameAccessor;\n\n  const min = props.min ?? config.min;\n  const max = props.max ?? config.max;\n\n  const legend = getLegendConfiguration(config.legend, slots.legend);\n\n  const toolbar = getToolbarConfiguration(config.toolbar, slots.toolbar);\n\n  const colorRules = (config.colorRules ?? [])\n    .filter(isValidColorRule)\n    .concat(slots.colorRules?.filter(isValidColorRule) ?? []);\n\n  const textSize =\n    props.textSize ?? config.textSize ?? defaultTreeMapConfig.textSize;\n\n  return {\n    colorPalette,\n    formatter,\n    truncationMode,\n    loading,\n    legend,\n    toolbar,\n    labelsDisplay,\n    nameAccessor,\n    min,\n    max,\n    colorRules,\n    textSize,\n    tooltip: slots.tooltip ?? config.tooltip,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,aAAa,aAAa;AAEnC,SAAS,wBAAwB;AAEjC,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AAUrC,MAAM,+BAA+B,CACnC,kBAEG,CAAC,YAAY,aAAa,KAAK,cAAc,cAAc;AAEhE,MAAM,0BAA0B,CAC9B,eACA,UACG;AACH,QAAM,wBACJ,6BAA6B,aAAa,KAAK,CAAC,YAAY,KAAK;AAEnE,SAAO,wBAAwB,MAAM,CAAC,GAAG,eAAe,KAAK,IAAI;AACnE;AAQO,SAAS,uBACd,qBACA,mBAC0B;AAC1B,MAAI,SAAS;AAAA,IACX,CAAC;AAAA,IACD,qBAAqB;AAAA,IACrB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,WACJ,OAAO,YAAY,sBAAsB,OAAO,QAAQ,IACpD,OAAO,WACP,qBAAqB,OAAO;AAElC,WAAS;AAAA,IACP,GAAG;AAAA,IACH;AAAA,EACF;AAEA,SAAO;AACT;AAUO,MAAM,0BAA0B,CACrC,OACA,QACA,UACkB;AAClB,QAAM,eACJ,MAAM,gBACN,OAAO,gBACP,qBAAqB;AAEvB,QAAM,YACJ,MAAM,aACN,OAAO,aACP,qBAAqB,MAAM,QAAQ,MAAM,MAAM,IAAI;AAErD,QAAM,iBACJ,MAAM,kBACN,OAAO,kBACP,qBAAqB;AAEvB,QAAM,UACJ,MAAM,WAAW,OAAO,WAAW,qBAAqB;AAE1D,QAAM,gBACJ,MAAM,iBACN,OAAO,iBACP,qBAAqB;AAEvB,QAAM,eACJ,MAAM,gBACN,OAAO,gBACP,qBAAqB;AAEvB,QAAM,MAAM,MAAM,OAAO,OAAO;AAChC,QAAM,MAAM,MAAM,OAAO,OAAO;AAEhC,QAAM,SAAS,uBAAuB,OAAO,QAAQ,MAAM,MAAM;AAEjE,QAAM,UAAU,wBAAwB,OAAO,SAAS,MAAM,OAAO;AAErE,QAAM,cAAc,OAAO,cAAc,CAAC,GACvC,OAAO,gBAAgB,EACvB,OAAO,MAAM,YAAY,OAAO,gBAAgB,KAAK,CAAC,CAAC;AAE1D,QAAM,WACJ,MAAM,YAAY,OAAO,YAAY,qBAAqB;AAE5D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,MAAM,WAAW,OAAO;AAAA,EACnC;AACF;",
   "names": []
 }

package/esm/charts/tree-map/utils/iterate-slots.js

@@ -28,14 +28,20 @@ const iterateChartToolbarSlots = (children) => {
 function iterateSlots(children) {
   let slots = {
     legend: {},
-    tooltip: false,
+    tooltip: void 0,
     toolbar: void 0,
     colorRules: []
   };
   let intents;
   Children.map(children, (child) => {
     if (isSlot(child, Tooltip)) {
-      slots = { ...slots, tooltip: true };
+      slots = {
+        ...slots,
+        tooltip: {
+          hidden: child.props?.hidden ?? false,
+          template: child.props?.children
+        }
+      };
     } else if (isSlot(child, TreeMapLegend)) {
       const legend = child.props;
       slots = { ...slots, legend };

package/esm/charts/tree-map/utils/iterate-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/iterate-slots.ts"],
-  "sourcesContent": ["import { Children, type PropsWithChildren, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport { Intent, IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartToolbar } from '../../core/slots/toolbar/ChartToolbar.js';\nimport { sanitizeProps } from '../../core/slots/toolbar/CompactToolbar.js';\nimport { DownloadData } from '../../core/slots/toolbar/DownloadData.js';\nimport type { ChartToolbarProps } from '../../core/types/toolbar.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { TreeMapDownloadCSVSlot } from '../slots/DownloadCSV.js';\nimport { Toolbar } from '../slots/Toolbar.js';\nimport { Tooltip } from '../slots/Tooltip.js';\nimport { Legend as TreeMapLegend } from '../slots/TreeMapChartLegend.js';\nimport {\n  TreemapChartLegendConfig,\n  TreeMapChartSlots,\n  type TreeMapChartToolbarConfig,\n} from '../types/treemap-chart.config.js';\n\n/**\n * Generate chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (\n  children: ReactNode,\n): TreeMapChartToolbarConfig => {\n  let slots = {};\n\n  Children.forEach(children, (childInteractions) => {\n    if (isElement(childInteractions)) {\n      switch (childInteractions.type) {\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        case DownloadData:\n          slots = { ...slots, downloadData: { enabled: true } };\n          break;\n      }\n    }\n  });\n\n  return slots;\n};\n\n/**\n * Iterate over the slotted children to merge the configuration.\n * @param children - Slotted children to iterate\n * @returns Merged config as TreemapChartSlots\n */\nexport function iterateSlots(children: ReactNode): TreeMapChartSlots {\n  let slots: TreeMapChartSlots = {\n    legend: {},\n    tooltip: false,\n    toolbar: undefined,\n    colorRules: [],\n  };\n\n  let intents: IntentProps[] | undefined;\n\n  Children.map(children, (child) => {\n    if (isSlot(child, Tooltip)) {\n      slots = { ...slots, tooltip: true };\n    } else if (isSlot(child, TreeMapLegend)) {\n      const legend = child.props as TreemapChartLegendConfig;\n\n      slots = { ...slots, legend };\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbarProps } =\n        child.props as PropsWithChildren<ChartToolbarProps>;\n\n      const toolbarSlots = iterateChartToolbarSlots(children);\n\n      const toolbar = { ...toolbarProps, ...toolbarSlots };\n      slots = { ...slots, toolbar };\n    } else if (isSlot(child, ColorRule)) {\n      const colorRule = child.props;\n      if (slots.colorRules) {\n        slots.colorRules.push(colorRule);\n      }\n    } else if (isSlot(child, Intent)) {\n      intents = intents ? [...intents, child.props] : [child.props];\n    } else if (isSlot(child, Toolbar)) {\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          ...sanitizeProps(child.props),\n          ...extractBehaviorTrackingProps(child.props),\n        },\n      };\n    } else if (isSlot(child, TreeMapDownloadCSVSlot)) {\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          downloadData: { enabled: true },\n        },\n      };\n    }\n  });\n\n  if (intents?.length) {\n    slots = {\n      ...slots,\n      toolbar: {\n        ...slots.toolbar,\n        intents,\n      },\n    };\n  }\n\n  return slots;\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAwD;AACjE,SAAS,iBAAiB;AAE1B,SAAS,cAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,UAAU,qBAAqB;AAYxC,MAAM,2BAA2B,CAC/B,aAC8B;AAC9B,MAAI,QAAQ,CAAC;AAEb,WAAS,QAAQ,UAAU,CAAC,sBAAsB;AAChD,QAAI,UAAU,iBAAiB,GAAG;AAChC,cAAQ,kBAAkB,MAAM;AAAA;AAAA,QAE9B,KAAK;AACH,kBAAQ,EAAE,GAAG,OAAO,cAAc,EAAE,SAAS,KAAK,EAAE;AACpD;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,SAAS,aAAa,UAAwC;AACnE,MAAI,QAA2B;AAAA,IAC7B,QAAQ,CAAC;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY,CAAC;AAAA,EACf;AAEA,MAAI;AAEJ,WAAS,IAAI,UAAU,CAAC,UAAU;AAChC,QAAI,OAAO,OAAO,OAAO,GAAG;AAC1B,cAAQ,EAAE,GAAG,OAAO,SAAS,KAAK;AAAA,IACpC,WAAW,OAAO,OAAO,aAAa,GAAG;AACvC,YAAM,SAAS,MAAM;AAErB,cAAQ,EAAE,GAAG,OAAO,OAAO;AAAA,IAE7B,WAAW,OAAO,OAAO,YAAY,GAAG;AACtC,YAAM,EAAE,UAAAA,WAAU,GAAG,aAAa,IAChC,MAAM;AAER,YAAM,eAAe,yBAAyBA,SAAQ;AAEtD,YAAM,UAAU,EAAE,GAAG,cAAc,GAAG,aAAa;AACnD,cAAQ,EAAE,GAAG,OAAO,QAAQ;AAAA,IAC9B,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM,YAAY,MAAM;AACxB,UAAI,MAAM,YAAY;AACpB,cAAM,WAAW,KAAK,SAAS;AAAA,MACjC;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,gBAAU,UAAU,CAAC,GAAG,SAAS,MAAM,KAAK,IAAI,CAAC,MAAM,KAAK;AAAA,IAC9D,WAAW,OAAO,OAAO,OAAO,GAAG;AACjC,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,GAAG,cAAc,MAAM,KAAK;AAAA,UAC5B,GAAG,6BAA6B,MAAM,KAAK;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,sBAAsB,GAAG;AAChD,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,cAAc,EAAE,SAAS,KAAK;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,SAAS,QAAQ;AACnB,YAAQ;AAAA,MACN,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,MAAM;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { Children, type PropsWithChildren, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport { Intent, IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartToolbar } from '../../core/slots/toolbar/ChartToolbar.js';\nimport { sanitizeProps } from '../../core/slots/toolbar/CompactToolbar.js';\nimport { DownloadData } from '../../core/slots/toolbar/DownloadData.js';\nimport type { ChartToolbarProps } from '../../core/types/toolbar.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { TreeMapDownloadCSVSlot } from '../slots/DownloadCSV.js';\nimport { Toolbar } from '../slots/Toolbar.js';\nimport { Tooltip } from '../slots/Tooltip.js';\nimport { Legend as TreeMapLegend } from '../slots/TreeMapChartLegend.js';\nimport {\n  TreemapChartLegendConfig,\n  TreeMapChartSlots,\n  type TreeMapChartToolbarConfig,\n} from '../types/treemap-chart.config.js';\n\n/**\n * Generate chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (\n  children: ReactNode,\n): TreeMapChartToolbarConfig => {\n  let slots = {};\n\n  Children.forEach(children, (childInteractions) => {\n    if (isElement(childInteractions)) {\n      switch (childInteractions.type) {\n        // eslint-disable-next-line @typescript-eslint/no-deprecated\n        case DownloadData:\n          slots = { ...slots, downloadData: { enabled: true } };\n          break;\n      }\n    }\n  });\n\n  return slots;\n};\n\n/**\n * Iterate over the slotted children to merge the configuration.\n * @param children - Slotted children to iterate\n * @returns Merged config as TreemapChartSlots\n */\nexport function iterateSlots(children: ReactNode): TreeMapChartSlots {\n  let slots: TreeMapChartSlots = {\n    legend: {},\n    tooltip: undefined,\n    toolbar: undefined,\n    colorRules: [],\n  };\n\n  let intents: IntentProps[] | undefined;\n\n  Children.map(children, (child) => {\n    if (isSlot(child, Tooltip)) {\n      slots = {\n        ...slots,\n        tooltip: {\n          hidden: child.props?.hidden ?? false,\n          template: child.props?.children,\n        },\n      };\n    } else if (isSlot(child, TreeMapLegend)) {\n      const legend = child.props as TreemapChartLegendConfig;\n\n      slots = { ...slots, legend };\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbarProps } =\n        child.props as PropsWithChildren<ChartToolbarProps>;\n\n      const toolbarSlots = iterateChartToolbarSlots(children);\n\n      const toolbar = { ...toolbarProps, ...toolbarSlots };\n      slots = { ...slots, toolbar };\n    } else if (isSlot(child, ColorRule)) {\n      const colorRule = child.props;\n      if (slots.colorRules) {\n        slots.colorRules.push(colorRule);\n      }\n    } else if (isSlot(child, Intent)) {\n      intents = intents ? [...intents, child.props] : [child.props];\n    } else if (isSlot(child, Toolbar)) {\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          ...sanitizeProps(child.props),\n          ...extractBehaviorTrackingProps(child.props),\n        },\n      };\n    } else if (isSlot(child, TreeMapDownloadCSVSlot)) {\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          downloadData: { enabled: true },\n        },\n      };\n    }\n  });\n\n  if (intents?.length) {\n    slots = {\n      ...slots,\n      toolbar: {\n        ...slots.toolbar,\n        intents,\n      },\n    };\n  }\n\n  return slots;\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAwD;AACjE,SAAS,iBAAiB;AAE1B,SAAS,cAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,oCAAoC;AAC7C,SAAS,8BAA8B;AACvC,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,UAAU,qBAAqB;AAYxC,MAAM,2BAA2B,CAC/B,aAC8B;AAC9B,MAAI,QAAQ,CAAC;AAEb,WAAS,QAAQ,UAAU,CAAC,sBAAsB;AAChD,QAAI,UAAU,iBAAiB,GAAG;AAChC,cAAQ,kBAAkB,MAAM;AAAA;AAAA,QAE9B,KAAK;AACH,kBAAQ,EAAE,GAAG,OAAO,cAAc,EAAE,SAAS,KAAK,EAAE;AACpD;AAAA,MACJ;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,SAAS,aAAa,UAAwC;AACnE,MAAI,QAA2B;AAAA,IAC7B,QAAQ,CAAC;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY,CAAC;AAAA,EACf;AAEA,MAAI;AAEJ,WAAS,IAAI,UAAU,CAAC,UAAU;AAChC,QAAI,OAAO,OAAO,OAAO,GAAG;AAC1B,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,QAAQ,MAAM,OAAO,UAAU;AAAA,UAC/B,UAAU,MAAM,OAAO;AAAA,QACzB;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,aAAa,GAAG;AACvC,YAAM,SAAS,MAAM;AAErB,cAAQ,EAAE,GAAG,OAAO,OAAO;AAAA,IAE7B,WAAW,OAAO,OAAO,YAAY,GAAG;AACtC,YAAM,EAAE,UAAAA,WAAU,GAAG,aAAa,IAChC,MAAM;AAER,YAAM,eAAe,yBAAyBA,SAAQ;AAEtD,YAAM,UAAU,EAAE,GAAG,cAAc,GAAG,aAAa;AACnD,cAAQ,EAAE,GAAG,OAAO,QAAQ;AAAA,IAC9B,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM,YAAY,MAAM;AACxB,UAAI,MAAM,YAAY;AACpB,cAAM,WAAW,KAAK,SAAS;AAAA,MACjC;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,gBAAU,UAAU,CAAC,GAAG,SAAS,MAAM,KAAK,IAAI,CAAC,MAAM,KAAK;AAAA,IAC9D,WAAW,OAAO,OAAO,OAAO,GAAG;AACjC,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,GAAG,cAAc,MAAM,KAAK;AAAA,UAC5B,GAAG,6BAA6B,MAAM,KAAK;AAAA,QAC7C;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,sBAAsB,GAAG;AAChD,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,cAAc,EAAE,SAAS,KAAK;AAAA,QAChC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,SAAS,QAAQ;AACnB,YAAQ;AAAA,MACN,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,MAAM;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": ["children"]
 }

package/esm/charts/tree-map/utils/text-measure.js

@@ -0,0 +1,41 @@
+import {
+  charsFontWidth12pixelsSize400Map,
+  charsFontWidth14pixelsSize400Map,
+  charsFontWidth16pixelsSize500Map,
+  charsFontWidth18pixelsSize400Map
+} from "../../core/components/text-ellipsis/chars-font-width-map.js";
+import { calculateWidth } from "../../core/components/text-ellipsis/truncate-string.js";
+import { getFontDetails } from "../../core/utils/get-font-details.js";
+import {
+  AUTO_TEXT_SIZE_PRESETS,
+  INCREASED_FONT_WEIGHT
+} from "../constants.js";
+const getTextMeasurer = (ctx, textSize) => {
+  if (textSize === "auto" || isPresetFontSize(textSize)) {
+    return fontWidthMapMeasurer;
+  }
+  return getCanvasContextMeasurer(ctx);
+};
+const isPresetFontSize = (fontSize) => AUTO_TEXT_SIZE_PRESETS.includes(fontSize);
+const fontWidthMapMeasurer = (text, fontSize) => {
+  switch (fontSize) {
+    case 18:
+      return calculateWidth(text, charsFontWidth18pixelsSize400Map);
+    case 16:
+      return calculateWidth(text, charsFontWidth16pixelsSize500Map);
+    case 14:
+      return calculateWidth(text, charsFontWidth14pixelsSize400Map);
+    default:
+      return calculateWidth(text, charsFontWidth12pixelsSize400Map);
+  }
+};
+const getCanvasContextMeasurer = (ctx) => (text, fontSize) => {
+  const lineHeight = fontSize * 1.25;
+  ctx.font = getFontDetails(INCREASED_FONT_WEIGHT, fontSize, lineHeight);
+  const textWidth = ctx.measureText(text).width;
+  return textWidth;
+};
+export {
+  getTextMeasurer
+};
+//# sourceMappingURL=text-measure.js.map

package/esm/charts/tree-map/utils/text-measure.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/charts/tree-map/utils/text-measure.ts"],
+  "sourcesContent": ["import {\n  charsFontWidth12pixelsSize400Map,\n  charsFontWidth14pixelsSize400Map,\n  charsFontWidth16pixelsSize500Map,\n  charsFontWidth18pixelsSize400Map,\n} from '../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../core/components/text-ellipsis/truncate-string.js';\nimport { getFontDetails } from '../../core/utils/get-font-details.js';\nimport {\n  AUTO_TEXT_SIZE_PRESETS,\n  INCREASED_FONT_WEIGHT,\n} from '../constants.js';\n\n/** A function that measures the pixel width of a string at a given font size. */\nexport type TextMeasurer = (text: string, fontSize: number) => number;\n\n/**\n * Returns the appropriate {@link TextMeasurer} for the given text size.\n *\n * When `textSize` is `'auto'` or one of the preset font sizes defined in\n * `AUTO_TEXT_SIZE_PRESETS`, a fast lookup-table measurer is returned.\n * Otherwise a measurer backed by `CanvasRenderingContext2D.measureText` is\n * returned for accurate results with arbitrary font sizes.\n *\n * @param ctx - The 2-D canvas rendering context used as a fallback measurer.\n * @param textSize - The configured font size, or `'auto'` for automatic sizing.\n * @returns A {@link TextMeasurer} suited to the given size.\n */\nexport const getTextMeasurer = (\n  ctx: CanvasRenderingContext2D,\n  textSize: number | 'auto',\n): TextMeasurer => {\n  if (textSize === 'auto' || isPresetFontSize(textSize)) {\n    return fontWidthMapMeasurer;\n  }\n\n  return getCanvasContextMeasurer(ctx);\n};\n\n/** Returns `true` when `fontSize` is one of the predefined preset sizes. */\nconst isPresetFontSize = (fontSize: number) =>\n  AUTO_TEXT_SIZE_PRESETS.includes(fontSize);\n\n/**\n * Measures text width using pre-computed character-width lookup tables.\n * Supports 12 px, 14 px, 16 px, and 18 px font sizes; falls back to the\n * 12 px map for any other size.\n */\nconst fontWidthMapMeasurer: TextMeasurer = (text: string, fontSize: number) => {\n  switch (fontSize) {\n    case 18:\n      return calculateWidth(text, charsFontWidth18pixelsSize400Map);\n    case 16:\n      return calculateWidth(text, charsFontWidth16pixelsSize500Map);\n    case 14:\n      return calculateWidth(text, charsFontWidth14pixelsSize400Map);\n    default:\n      return calculateWidth(text, charsFontWidth12pixelsSize400Map);\n  }\n};\n\n/**\n * Creates a {@link TextMeasurer} that delegates to\n * `CanvasRenderingContext2D.measureText` for accurate width calculation at\n * arbitrary font sizes.\n *\n * @param ctx - The canvas rendering context whose `measureText` will be used.\n * @returns A {@link TextMeasurer} backed by the canvas context.\n */\nconst getCanvasContextMeasurer =\n  (ctx: CanvasRenderingContext2D): TextMeasurer =>\n  (text: string, fontSize: number) => {\n    const lineHeight = fontSize * 1.25;\n    ctx.font = getFontDetails(INCREASED_FONT_WEIGHT, fontSize, lineHeight);\n    const textWidth = ctx.measureText(text).width;\n\n    return textWidth;\n  };\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAiBA,MAAM,kBAAkB,CAC7B,KACA,aACiB;AACjB,MAAI,aAAa,UAAU,iBAAiB,QAAQ,GAAG;AACrD,WAAO;AAAA,EACT;AAEA,SAAO,yBAAyB,GAAG;AACrC;AAGA,MAAM,mBAAmB,CAAC,aACxB,uBAAuB,SAAS,QAAQ;AAO1C,MAAM,uBAAqC,CAAC,MAAc,aAAqB;AAC7E,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,eAAe,MAAM,gCAAgC;AAAA,IAC9D,KAAK;AACH,aAAO,eAAe,MAAM,gCAAgC;AAAA,IAC9D,KAAK;AACH,aAAO,eAAe,MAAM,gCAAgC;AAAA,IAC9D;AACE,aAAO,eAAe,MAAM,gCAAgC;AAAA,EAChE;AACF;AAUA,MAAM,2BACJ,CAAC,QACD,CAAC,MAAc,aAAqB;AAClC,QAAM,aAAa,WAAW;AAC9B,MAAI,OAAO,eAAe,uBAAuB,UAAU,UAAU;AACrE,QAAM,YAAY,IAAI,YAAY,IAAI,EAAE;AAExC,SAAO;AACT;",
+  "names": []
+}

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

@@ -7,6 +7,7 @@ import { XYChartBottomAxisArea } from "./components/axes/XYChartBottomAxisArea.j
 import { XYChartLeftAxisArea } from "./components/axes/XYChartLeftAxisArea.js";
 import { XYChartRightAxisArea } from "./components/axes/XYChartRightAxisArea.js";
 import { XYChartTopAxisArea } from "./components/axes/XYChartTopAxisArea.js";
+import { BarLabelLayout } from "./components/displays/BarDisplay/BarLabelLayout.js";
 import { XYChartGridLayout } from "./components/layout/XYChartGridLayout.js";
 import { XYChartOverlay } from "./components/overlay/XYChartOverlay.js";
 import { XYChartThresholdArea } from "./components/thresholds/XYChartThresholdArea.js";
@@ -14,8 +15,8 @@ import {
   ANNOTATIONS_PADDING_BOTTOM,
   XY_CHART_ARIA_LABEL
 } from "./constants/defaults.js";
-import { XYChartCustomTooltipContext } from "./context/XYChartCustomTooltip.context.js";
 import { XYChartSelectConfigContext } from "./context/XYChartSelectConfig.context.js";
+import { XYChartTooltipContext } from "./context/XYChartTooltip.context.js";
 import { useVisibleAxesConfig } from "./hooks/useVisibleAxesConfig.js";
 import { useXYChartAnnotationsConfig } from "./hooks/useXYChartAnnotationsConfig.js";
 import { useXYChartAnnotationsData } from "./hooks/useXYChartAnnotationsData.js";
@@ -91,7 +92,7 @@ const XYChart = forwardRef(
               annotationsAreaHeight
             ),
             ref: chartAndForwardedRef,
-            children: /* @__PURE__ */ jsx(XYChartCustomTooltipContext.Provider, { value: config.tooltip, children: /* @__PURE__ */ jsx(XYChartSelectConfigContext.Provider, { value: config.select, children: /* @__PURE__ */ jsx(XYChartProviders, { children: /* @__PURE__ */ jsxs(
+            children: /* @__PURE__ */ jsx(XYChartTooltipContext.Provider, { value: config.tooltip, children: /* @__PURE__ */ jsx(XYChartSelectConfigContext.Provider, { value: config.select, children: /* @__PURE__ */ jsx(XYChartProviders, { children: /* @__PURE__ */ jsxs(
               XYChartImperativeHandlerBuilder,
               {
                 chartRef: forwardedRef,
@@ -106,6 +107,7 @@ const XYChart = forwardRef(
                   /* @__PURE__ */ jsxs(ChartGrid.PlotArea, { children: [
                     /* @__PURE__ */ jsx(XYChartGridLayout, {}),
                     /* @__PURE__ */ jsx(XYChartLayout, {}),
+                    /* @__PURE__ */ jsx(BarLabelLayout, {}),
                     /* @__PURE__ */ jsx(XYChartAxisBorder, {}),
                     /* @__PURE__ */ jsx(XYChartAnnotationsIndicators, {}),
                     /* @__PURE__ */ jsx(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/xy-chart/XYChart.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartImperativeHandlerBuilder } from './builders/XYChartImperativeHandlerBuilder.js';\nimport { XYChartAnnotationsArea } from './components/annotations/XYChartAnnotationsArea.js';\nimport { XYChartAnnotationsIndicators } from './components/annotations/XYChartAnnotationsIndicators.js';\nimport { XYChartBottomAxisArea } from './components/axes/XYChartBottomAxisArea.js';\nimport { XYChartLeftAxisArea } from './components/axes/XYChartLeftAxisArea.js';\nimport { XYChartRightAxisArea } from './components/axes/XYChartRightAxisArea.js';\nimport { XYChartTopAxisArea } from './components/axes/XYChartTopAxisArea.js';\nimport { XYChartGridLayout } from './components/layout/XYChartGridLayout.js';\nimport { XYChartOverlay } from './components/overlay/XYChartOverlay.js';\nimport { XYChartThresholdArea } from './components/thresholds/XYChartThresholdArea.js';\nimport {\n  ANNOTATIONS_PADDING_BOTTOM,\n  XY_CHART_ARIA_LABEL,\n} from './constants/defaults.js';\nimport { XYChartCustomTooltipContext } from './context/XYChartCustomTooltip.context.js';\nimport { XYChartSelectConfigContext } from './context/XYChartSelectConfig.context.js';\nimport { useVisibleAxesConfig } from './hooks/useVisibleAxesConfig.js';\nimport { useXYChartAnnotationsConfig } from './hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from './hooks/useXYChartAnnotationsData.js';\nimport { useXYChartAnnotationsHiddenTracks } from './hooks/useXYChartAnnotationsHiddenTracks.js';\nimport { useXYChartData } from './hooks/useXYChartData.js';\nimport { XYChartAxisBorder } from './layout/XYChartAxisBorder.js';\nimport { XYChartLayout } from './layout/XYChartLayout.js';\nimport { XYChartProviders } from './providers/XYChartProviders.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { getPaddingByAxes } from './utils/get-padding-by-axes.js';\nimport {\n  gridTemplateAreas,\n  gridTemplateColumns,\n  gridTemplateRows,\n} from './utils/grid-templates.js';\nimport type { XYChartConfig } from './utils/xy-chart-configuration.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\n\ninterface XYChartProps {\n  config: XYChartConfig;\n}\n\nexport const XYChart = forwardRef<XYChartRef, PropsWithChildren<XYChartProps>>(\n  ({ config }, forwardedRef) => {\n    const loading = useChartLayoutLoading();\n    const { width, height } = useGraphSize();\n    const chartRef = useRef<HTMLDivElement>(null);\n    const chartAndForwardedRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n      forwardedRef,\n      chartRef,\n    ]);\n    const { top, bottom, left, right } = useVisibleAxesConfig();\n    const { axesMetadata } = useXYChartData();\n\n    const topAxisMaxSize = top?.tickLabelMaxSize;\n    const bottomAxisMaxSize = bottom?.tickLabelMaxSize;\n    const leftAxisMaxSize = left?.tickLabelMaxSize;\n    const rightAxisMaxSize = right?.tickLabelMaxSize;\n    const paddings = getPaddingByAxes({ top, bottom, left, right });\n    const chartGridHeight = height - paddings.vertical();\n    const chartGridWidth = width - paddings.horizontal();\n\n    const annotationsData = useXYChartAnnotationsData();\n    const annotationsConfig = useXYChartAnnotationsConfig();\n    const tracksQuantity = annotationsData?.size ?? 0;\n    const hiddenTracks = useXYChartAnnotationsHiddenTracks();\n\n    const annotationsVisibleArea = getAnnotationsVisibleArea(\n      tracksQuantity,\n      annotationsConfig?.fixedTracks,\n      hiddenTracks.length,\n    );\n\n    const annotationsAreaHeight =\n      annotationsVisibleArea +\n      (tracksQuantity - hiddenTracks.length > 0\n        ? ANNOTATIONS_PADDING_BOTTOM\n        : 0);\n\n    return (\n      <div\n        className={defaultChartSize}\n        style={{\n          paddingTop: paddings.top,\n          paddingLeft: paddings.left,\n        }}\n        aria-label={XY_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <ChartGrid\n          width={chartGridWidth}\n          height={chartGridHeight}\n          gridTemplateAreas={gridTemplateAreas}\n          gridTemplateColumns={gridTemplateColumns(\n            leftAxisMaxSize,\n            rightAxisMaxSize,\n          )}\n          gridTemplateRows={gridTemplateRows(\n            bottomAxisMaxSize,\n            topAxisMaxSize,\n            annotationsAreaHeight,\n          )}\n          ref={chartAndForwardedRef}\n        >\n          <XYChartCustomTooltipContext.Provider value={config.tooltip}>\n            <XYChartSelectConfigContext.Provider value={config.select}>\n              <XYChartProviders>\n                <XYChartImperativeHandlerBuilder\n                  chartRef={forwardedRef}\n                  containerRef={chartRef}\n                  config={config}\n                >\n                  <XYChartTopAxisArea />\n                  <XYChartBottomAxisArea />\n                  <XYChartLeftAxisArea />\n                  <XYChartRightAxisArea />\n\n                  {!!tracksQuantity && <XYChartAnnotationsArea />}\n                  <ChartGrid.PlotArea>\n                    <XYChartGridLayout />\n                    <XYChartLayout />\n                    <XYChartAxisBorder />\n                    <XYChartAnnotationsIndicators />\n                    <ChartLoaderOverlay\n                      loading={loading}\n                      zoomEnabled={axesMetadata.isZoomEnabled}\n                    >\n                      <XYChartOverlay />\n                    </ChartLoaderOverlay>\n                  </ChartGrid.PlotArea>\n                  <XYChartThresholdArea />\n                </XYChartImperativeHandlerBuilder>\n              </XYChartProviders>\n            </XYChartSelectConfigContext.Provider>\n          </XYChartCustomTooltipContext.Provider>\n        </ChartGrid>\n      </div>\n    );\n  },\n);\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, useRef } from 'react';\n\nimport { XYChartImperativeHandlerBuilder } from './builders/XYChartImperativeHandlerBuilder.js';\nimport { XYChartAnnotationsArea } from './components/annotations/XYChartAnnotationsArea.js';\nimport { XYChartAnnotationsIndicators } from './components/annotations/XYChartAnnotationsIndicators.js';\nimport { XYChartBottomAxisArea } from './components/axes/XYChartBottomAxisArea.js';\nimport { XYChartLeftAxisArea } from './components/axes/XYChartLeftAxisArea.js';\nimport { XYChartRightAxisArea } from './components/axes/XYChartRightAxisArea.js';\nimport { XYChartTopAxisArea } from './components/axes/XYChartTopAxisArea.js';\nimport { BarLabelLayout } from './components/displays/BarDisplay/BarLabelLayout.js';\nimport { XYChartGridLayout } from './components/layout/XYChartGridLayout.js';\nimport { XYChartOverlay } from './components/overlay/XYChartOverlay.js';\nimport { XYChartThresholdArea } from './components/thresholds/XYChartThresholdArea.js';\nimport {\n  ANNOTATIONS_PADDING_BOTTOM,\n  XY_CHART_ARIA_LABEL,\n} from './constants/defaults.js';\nimport { XYChartSelectConfigContext } from './context/XYChartSelectConfig.context.js';\nimport { XYChartTooltipContext } from './context/XYChartTooltip.context.js';\nimport { useVisibleAxesConfig } from './hooks/useVisibleAxesConfig.js';\nimport { useXYChartAnnotationsConfig } from './hooks/useXYChartAnnotationsConfig.js';\nimport { useXYChartAnnotationsData } from './hooks/useXYChartAnnotationsData.js';\nimport { useXYChartAnnotationsHiddenTracks } from './hooks/useXYChartAnnotationsHiddenTracks.js';\nimport { useXYChartData } from './hooks/useXYChartData.js';\nimport { XYChartAxisBorder } from './layout/XYChartAxisBorder.js';\nimport { XYChartLayout } from './layout/XYChartLayout.js';\nimport { XYChartProviders } from './providers/XYChartProviders.js';\nimport { XYChartRef } from './types/xy-chart.js';\nimport { getPaddingByAxes } from './utils/get-padding-by-axes.js';\nimport {\n  gridTemplateAreas,\n  gridTemplateColumns,\n  gridTemplateRows,\n} from './utils/grid-templates.js';\nimport type { XYChartConfig } from './utils/xy-chart-configuration.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { getAnnotationsVisibleArea } from '../core/components/annotations/utils/get-annotations-visible-area.js';\nimport { ChartGrid } from '../core/components/chart-grid/ChartGridRoot.js';\nimport { useChartLayoutLoading } from '../core/components/chart-layout/hooks/useChartLayoutLoading.js';\nimport { useGraphSize } from '../core/components/chart-layout/hooks/useGraphSize.js';\nimport { ChartLoaderOverlay } from '../core/components/chart-loader-overlay/ChartLoaderOverlay.js';\n\ninterface XYChartProps {\n  config: XYChartConfig;\n}\n\nexport const XYChart = forwardRef<XYChartRef, PropsWithChildren<XYChartProps>>(\n  ({ config }, forwardedRef) => {\n    const loading = useChartLayoutLoading();\n    const { width, height } = useGraphSize();\n    const chartRef = useRef<HTMLDivElement>(null);\n    const chartAndForwardedRef = useMergeRefs<XYChartRef | HTMLDivElement>([\n      forwardedRef,\n      chartRef,\n    ]);\n    const { top, bottom, left, right } = useVisibleAxesConfig();\n    const { axesMetadata } = useXYChartData();\n\n    const topAxisMaxSize = top?.tickLabelMaxSize;\n    const bottomAxisMaxSize = bottom?.tickLabelMaxSize;\n    const leftAxisMaxSize = left?.tickLabelMaxSize;\n    const rightAxisMaxSize = right?.tickLabelMaxSize;\n    const paddings = getPaddingByAxes({ top, bottom, left, right });\n    const chartGridHeight = height - paddings.vertical();\n    const chartGridWidth = width - paddings.horizontal();\n\n    const annotationsData = useXYChartAnnotationsData();\n    const annotationsConfig = useXYChartAnnotationsConfig();\n    const tracksQuantity = annotationsData?.size ?? 0;\n    const hiddenTracks = useXYChartAnnotationsHiddenTracks();\n\n    const annotationsVisibleArea = getAnnotationsVisibleArea(\n      tracksQuantity,\n      annotationsConfig?.fixedTracks,\n      hiddenTracks.length,\n    );\n\n    const annotationsAreaHeight =\n      annotationsVisibleArea +\n      (tracksQuantity - hiddenTracks.length > 0\n        ? ANNOTATIONS_PADDING_BOTTOM\n        : 0);\n\n    return (\n      <div\n        className={defaultChartSize}\n        style={{\n          paddingTop: paddings.top,\n          paddingLeft: paddings.left,\n        }}\n        aria-label={XY_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <ChartGrid\n          width={chartGridWidth}\n          height={chartGridHeight}\n          gridTemplateAreas={gridTemplateAreas}\n          gridTemplateColumns={gridTemplateColumns(\n            leftAxisMaxSize,\n            rightAxisMaxSize,\n          )}\n          gridTemplateRows={gridTemplateRows(\n            bottomAxisMaxSize,\n            topAxisMaxSize,\n            annotationsAreaHeight,\n          )}\n          ref={chartAndForwardedRef}\n        >\n          <XYChartTooltipContext.Provider value={config.tooltip}>\n            <XYChartSelectConfigContext.Provider value={config.select}>\n              <XYChartProviders>\n                <XYChartImperativeHandlerBuilder\n                  chartRef={forwardedRef}\n                  containerRef={chartRef}\n                  config={config}\n                >\n                  <XYChartTopAxisArea />\n                  <XYChartBottomAxisArea />\n                  <XYChartLeftAxisArea />\n                  <XYChartRightAxisArea />\n\n                  {!!tracksQuantity && <XYChartAnnotationsArea />}\n                  <ChartGrid.PlotArea>\n                    <XYChartGridLayout />\n                    <XYChartLayout />\n                    <BarLabelLayout />\n                    <XYChartAxisBorder />\n                    <XYChartAnnotationsIndicators />\n                    <ChartLoaderOverlay\n                      loading={loading}\n                      zoomEnabled={axesMetadata.isZoomEnabled}\n                    >\n                      <XYChartOverlay />\n                    </ChartLoaderOverlay>\n                  </ChartGrid.PlotArea>\n                  <XYChartThresholdArea />\n                </XYChartImperativeHandlerBuilder>\n              </XYChartProviders>\n            </XYChartSelectConfigContext.Provider>\n          </XYChartTooltipContext.Provider>\n        </ChartGrid>\n      </div>\n    );\n  },\n);\n\n(XYChart as typeof XYChart & { displayName: string }).displayName = 'XYChart';\n"],
+  "mappings": "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",
   "names": []
 }