@dynatrace/strato-components 3.6.0 → 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": "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",
+  "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,
@@ -46,6 +47,7 @@ const buildTreeMapChartConfig = (props, config, slots) => {
     min,
     max,
     colorRules,
+    textSize,
     tooltip: slots.tooltip ?? config.tooltip
   };
 };

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    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,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,SAAS,MAAM,WAAW,OAAO;AAAA,EACnC;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/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

@@ -15,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";
@@ -92,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,

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 { 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 { 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                    <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          </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": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./AxisArea.css";
-var axisContainerStyle = "_bidc430-3-6-0";
+var axisContainerStyle = "_bidc430-3-7-0";
 export {
   axisContainerStyle
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisArea.css.ts"],
-  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-6-0';"],
+  "sourcesContent": ["import './AxisArea.css';\nexport var axisContainerStyle = '_bidc430-3-7-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

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

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

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

@@ -1,7 +1,7 @@
 import "./AxisTickWithTruncation.css";
-var directionValue = "var(--_z2zz8y0-3-6-0)";
-var tickStyle = "_z2zz8y2-3-6-0";
-var widthContainer = "var(--_z2zz8y1-3-6-0)";
+var directionValue = "var(--_z2zz8y0-3-7-0)";
+var tickStyle = "_z2zz8y2-3-7-0";
+var widthContainer = "var(--_z2zz8y1-3-7-0)";
 export {
   directionValue,
   tickStyle,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/axes/AxisTickWithTruncation.css.ts"],
-  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-6-0)';\nexport var tickStyle = '_z2zz8y2-3-6-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-6-0)';"],
+  "sourcesContent": ["import './AxisTickWithTruncation.css';\nexport var directionValue = 'var(--_z2zz8y0-3-7-0)';\nexport var tickStyle = '_z2zz8y2-3-7-0';\nexport var widthContainer = 'var(--_z2zz8y1-3-7-0)';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,YAAY;AAChB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelLayout.js

@@ -1,18 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { BarLabelOverlay } from "./BarLabelOverlay.js";
 import { plotLayout } from "../../../../core/components/chart-grid/ChartGrid.sty.js";
+import { CANVAS_DIMMED_OPACITY } from "../../../../core/utils/apply-opacity-to-canvas.js";
 import { zIndicesXYChartAreas } from "../../../constants/xy-chart-z-index-areas.js";
 import { useBarData } from "../../../hooks/useBarData.js";
 import { useXYChartScales } from "../../../hooks/useXYChartScales.js";
+import { useXYChartHighlightedSeriesIdsState } from "../../../store/selectors.js";
+import { getHighlightedSeries } from "../../../utils/get-highlighted-series.js";
 function BarLabelLayout() {
   const axisIdToScales = useXYChartScales();
   const { filteredSeriesWithDatapoints, seriesToMetadata } = useBarData();
+  const highlightedSeriesId = useXYChartHighlightedSeriesIdsState();
   const labelSeries = filteredSeriesWithDatapoints.filter(
     (s) => s.hasLabels === true
   );
   if (labelSeries.length === 0) {
     return null;
   }
+  const highlightedSeries = highlightedSeriesId ? getHighlightedSeries(labelSeries, highlightedSeriesId) : void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -26,12 +31,14 @@ function BarLabelLayout() {
         if (!metadata) {
           return null;
         }
+        const opacity = highlightedSeries && series !== highlightedSeries ? +CANVAS_DIMMED_OPACITY : void 0;
         return /* @__PURE__ */ jsx(
           BarLabelOverlay,
           {
             axisIdToScales,
             series,
-            metadata
+            metadata,
+            opacity
           },
           series.id
         );

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/displays/BarDisplay/BarLabelLayout.tsx"],
-  "sourcesContent": ["import { BarLabelOverlay } from './BarLabelOverlay.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { zIndicesXYChartAreas } from '../../../constants/xy-chart-z-index-areas.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\n\n/**\n * Chart-level wrapper that mounts the HTML bar labels for every bar series\n * with `hasLabels === true`. Rendered as a sibling of the canvas plot inside\n * `<ChartGrid.PlotArea>` because HTML cannot live inside `<canvas>` \u2014 see\n * `./BarDisplay.tsx` for the canvas-paint counterpart.\n */\nexport function BarLabelLayout() {\n  const axisIdToScales = useXYChartScales();\n  const { filteredSeriesWithDatapoints, seriesToMetadata } = useBarData();\n\n  const labelSeries = filteredSeriesWithDatapoints.filter(\n    (s) => s.hasLabels === true,\n  );\n\n  if (labelSeries.length === 0) {\n    return null;\n  }\n\n  // z-index above the canvas (`plot` layer) so the HTML labels render on top\n  // of the 0.8-opacity bar fills \u2014 otherwise the canvas paints over the\n  // labels and blends them with the bar color.\n  return (\n    <div\n      className={plotLayout}\n      style={{\n        zIndex: zIndicesXYChartAreas.plot + 1,\n        pointerEvents: 'none',\n      }}\n    >\n      {labelSeries.map((series) => {\n        const metadata = seriesToMetadata.get(series);\n        if (!metadata) {\n          return null;\n        }\n        return (\n          <BarLabelOverlay\n            key={series.id}\n            axisIdToScales={axisIdToScales}\n            series={series}\n            metadata={metadata}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nBarLabelLayout['displayName'] = 'BarLabelLayout';\n"],
-  "mappings": "AAyCU;AAzCV,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAQ1B,SAAS,iBAAiB;AAC/B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,8BAA8B,iBAAiB,IAAI,WAAW;AAEtE,QAAM,cAAc,6BAA6B;AAAA,IAC/C,CAAC,MAAM,EAAE,cAAc;AAAA,EACzB;AAEA,MAAI,YAAY,WAAW,GAAG;AAC5B,WAAO;AAAA,EACT;AAKA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ,qBAAqB,OAAO;AAAA,QACpC,eAAe;AAAA,MACjB;AAAA,MAEC,sBAAY,IAAI,CAAC,WAAW;AAC3B,cAAM,WAAW,iBAAiB,IAAI,MAAM;AAC5C,YAAI,CAAC,UAAU;AACb,iBAAO;AAAA,QACT;AACA,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAHK,OAAO;AAAA,QAId;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,eAAe,aAAa,IAAI;",
+  "sourcesContent": ["import { BarLabelOverlay } from './BarLabelOverlay.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { CANVAS_DIMMED_OPACITY } from '../../../../core/utils/apply-opacity-to-canvas.js';\nimport { zIndicesXYChartAreas } from '../../../constants/xy-chart-z-index-areas.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useXYChartScales } from '../../../hooks/useXYChartScales.js';\nimport { useXYChartHighlightedSeriesIdsState } from '../../../store/selectors.js';\nimport { getHighlightedSeries } from '../../../utils/get-highlighted-series.js';\n\n/**\n * Chart-level wrapper that mounts the HTML bar labels for every bar series\n * with `hasLabels === true`. Rendered as a sibling of the canvas plot inside\n * `<ChartGrid.PlotArea>` because HTML cannot live inside `<canvas>` \u2014 see\n * `./BarDisplay.tsx` for the canvas-paint counterpart.\n */\nexport function BarLabelLayout() {\n  const axisIdToScales = useXYChartScales();\n  const { filteredSeriesWithDatapoints, seriesToMetadata } = useBarData();\n  const highlightedSeriesId = useXYChartHighlightedSeriesIdsState();\n\n  const labelSeries = filteredSeriesWithDatapoints.filter(\n    (s) => s.hasLabels === true,\n  );\n\n  if (labelSeries.length === 0) {\n    return null;\n  }\n\n  const highlightedSeries = highlightedSeriesId\n    ? getHighlightedSeries(labelSeries, highlightedSeriesId)\n    : undefined;\n\n  // z-index above the canvas (`plot` layer) so the HTML labels render on top\n  // of the 0.8-opacity bar fills \u2014 otherwise the canvas paints over the\n  // labels and blends them with the bar color.\n  return (\n    <div\n      className={plotLayout}\n      style={{\n        zIndex: zIndicesXYChartAreas.plot + 1,\n        pointerEvents: 'none',\n      }}\n    >\n      {labelSeries.map((series) => {\n        const metadata = seriesToMetadata.get(series);\n        if (!metadata) {\n          return null;\n        }\n        const opacity =\n          highlightedSeries && series !== highlightedSeries\n            ? +CANVAS_DIMMED_OPACITY\n            : undefined;\n        return (\n          <BarLabelOverlay\n            key={series.id}\n            axisIdToScales={axisIdToScales}\n            series={series}\n            metadata={metadata}\n            opacity={opacity}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\nBarLabelLayout['displayName'] = 'BarLabelLayout';\n"],
+  "mappings": "AAqDU;AArDV,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AACtC,SAAS,4BAA4B;AACrC,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,2CAA2C;AACpD,SAAS,4BAA4B;AAQ9B,SAAS,iBAAiB;AAC/B,QAAM,iBAAiB,iBAAiB;AACxC,QAAM,EAAE,8BAA8B,iBAAiB,IAAI,WAAW;AACtE,QAAM,sBAAsB,oCAAoC;AAEhE,QAAM,cAAc,6BAA6B;AAAA,IAC/C,CAAC,MAAM,EAAE,cAAc;AAAA,EACzB;AAEA,MAAI,YAAY,WAAW,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,oBAAoB,sBACtB,qBAAqB,aAAa,mBAAmB,IACrD;AAKJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QACL,QAAQ,qBAAqB,OAAO;AAAA,QACpC,eAAe;AAAA,MACjB;AAAA,MAEC,sBAAY,IAAI,CAAC,WAAW;AAC3B,cAAM,WAAW,iBAAiB,IAAI,MAAM;AAC5C,YAAI,CAAC,UAAU;AACb,iBAAO;AAAA,QACT;AACA,cAAM,UACJ,qBAAqB,WAAW,oBAC5B,CAAC,wBACD;AACN,eACE;AAAA,UAAC;AAAA;AAAA,YAEC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,UAJK,OAAO;AAAA,QAKd;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,eAAe,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.css

@@ -1,10 +1,10 @@
-._b76tm80-3-6-0 {
+._b76tm80-3-7-0 {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
 }
-._b76tm81-3-6-0 {
+._b76tm81-3-7-0 {
   position: absolute;
   white-space: nowrap;
   font-size: var(--dt-typography-text-small-default-size, 12px);
@@ -12,7 +12,7 @@
   font-weight: var(--dt-typography-text-small-default-weight, 400);
   line-height: 1;
 }
-._b76tm82-3-6-0 {
+._b76tm82-3-7-0 {
   position: absolute;
   overflow: hidden;
   pointer-events: none;

package/esm/charts/xy-chart/components/displays/BarDisplay/BarLabelOverlay.js

@@ -42,7 +42,8 @@ function filterToScaleDomain(data, scale, isVertical) {
 function BarLabelOverlay({
   axisIdToScales,
   series,
-  metadata
+  metadata,
+  opacity
 }) {
   const { width: canvasWidth, height: canvasHeight } = useGridPlotSize();
   const { datapointMetadataMap, axisIdToScaleDomain } = useXYChartData();
@@ -101,7 +102,8 @@ function BarLabelOverlay({
     isVertical ? xScale : yScale,
     isVertical
   );
-  return /* @__PURE__ */ jsx("div", { className: overlayContainer, children: data.map((datum, index) => {
+  const dimStyle = opacity !== void 0 ? { opacity } : void 0;
+  return /* @__PURE__ */ jsx("div", { className: overlayContainer, style: dimStyle, children: data.map((datum, index) => {
     const text = datum.label;
     if (!text) {
       return null;