@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/charts/tree-map/components/canvas/utils/canvas-label-utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/tree-map/components/canvas/utils/canvas-label-utils.ts"],
-  "sourcesContent": ["import type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { truncateText } from '../../../../core/utils/text-truncation.js';\nimport { LABEL_OPTIONS } from '../../../constants.js';\nimport type { LabelOptions } from '../../../types/canvas.js';\n\ntype LabelWidthOptions = {\n  nameWidth: number;\n  nameValueWidth: number;\n  multiLineWidth: number;\n};\n\nexport const LINE_SPACING = 2;\nexport const FONT_SIZE_DIFFERENCE = 1;\n\n/**\n * Returns the labelOption that fits the current node\n * @internal\n * @param height - height of the node.\n * @param width - width of the node.\n * @param fontSize - font size of the label.\n * @param padding - padding around the label\n * @param labelWidth - object containing width for each labelFit scenario,\n */\nexport const getLabelFit = (\n  height: number,\n  width: number,\n  fontSize: number,\n  padding: number,\n  labelWidth: LabelWidthOptions,\n) => {\n  const { nameWidth, nameValueWidth, multiLineWidth } = labelWidth;\n  const lineSpacing = 2;\n  const paddingSum = 2 * padding;\n  const availableWidth = width - paddingSum;\n  const minInlineHeight = paddingSum + fontSize;\n  const minMultiLineHeight = paddingSum + fontSize * 2 + lineSpacing;\n\n  const fitMultiLine =\n    height >= minMultiLineHeight && availableWidth >= multiLineWidth;\n  if (fitMultiLine) {\n    return LABEL_OPTIONS.Multi;\n  }\n\n  const fitInline =\n    height >= minInlineHeight && availableWidth >= nameValueWidth;\n  if (fitInline) {\n    return LABEL_OPTIONS.Inline;\n  }\n\n  const fitName = height >= minInlineHeight && availableWidth >= nameWidth;\n  if (fitName) {\n    return LABEL_OPTIONS.Name;\n  }\n\n  const fitEllipsis = height >= minInlineHeight && availableWidth < nameWidth;\n  if (fitEllipsis) {\n    return LABEL_OPTIONS.Ellipsis;\n  }\n\n  return LABEL_OPTIONS.Fallback;\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 */\nexport const getRectCenter = (width: number, height: number) => ({\n  centerX: width / 2,\n  centerY: height / 2,\n});\n\n/**\n * Returns the name width for the given context\n * @internal\n * @param name - current node name.\n * @param ctx - canvas context.\n */\nexport const getNameWidth = (name: string, ctx: CanvasRenderingContext2D) =>\n  ctx.measureText(name).width;\n\n/**\n * Returns the object containing width for each labelFit scenario\n * @internal\n * @param name - current node name.\n * @param value - current node value.\n * @param ctx - canvas context.\n */\nexport const getLabelWidth = (\n  nameWidth: number,\n  value: string,\n  ctx: CanvasRenderingContext2D,\n) => {\n  const nameValueWidth = nameWidth + ctx.measureText(` ${value}`).width;\n  const multiLineWidth = Math.max(nameWidth, ctx.measureText(value).width);\n\n  return {\n    nameWidth,\n    nameValueWidth,\n    multiLineWidth,\n  };\n};\n\n/**\n * Returns the array containing the label items for a given node.\n * Depending on the available space labels are shown in 2 lines or in 1 line or with name only.\n * @internal\n * @param labelFit - current labelFit scenario\n * @param name - current node name.\n * @param value - current node value.\n */\nexport const getAppliedLabels = (\n  labelFit: LabelOptions,\n  name: string,\n  value: string,\n) => {\n  const labelMap = {\n    multi: [name, value],\n    inline: [`${name} ${value}`],\n    name: [name],\n    ellipsis: [name],\n    fallback: [],\n  };\n\n  return labelMap[labelFit];\n};\n\n/**\n * Returns the vertical offset of the labels.\n * @internal\n * @param labels - array of label for the given node.\n * @param labelIndex - current index of the labels array item.\n * @param fontSize - font size value.\n */\nexport const getOffsetY = (\n  labels: string[],\n  labelIndex: number,\n  fontSize: number,\n) => {\n  const downOffsetY = Math.round(fontSize / 2) + LINE_SPACING;\n  const upOffsetY = -1 * downOffsetY - FONT_SIZE_DIFFERENCE;\n  const isMultiLine = labels.length > 1;\n  return isMultiLine ? (labelIndex === 0 ? upOffsetY : downOffsetY) : 0;\n};\n\nexport const applyEllipsis = (\n  ctx: CanvasRenderingContext2D,\n  str: string,\n  maxWidth: number,\n  truncationMode: TruncationMode,\n) => {\n  return truncateText(str, truncationMode, (truncatedText: string) => {\n    const width = ctx.measureText(truncatedText).width;\n    return width <= maxWidth;\n  });\n};\n"],
-  "mappings": "AACA,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AASvB,MAAM,eAAe;AACrB,MAAM,uBAAuB;AAW7B,MAAM,cAAc,CACzB,QACA,OACA,UACA,SACA,eACG;AACH,QAAM,EAAE,WAAW,gBAAgB,eAAe,IAAI;AACtD,QAAM,cAAc;AACpB,QAAM,aAAa,IAAI;AACvB,QAAM,iBAAiB,QAAQ;AAC/B,QAAM,kBAAkB,aAAa;AACrC,QAAM,qBAAqB,aAAa,WAAW,IAAI;AAEvD,QAAM,eACJ,UAAU,sBAAsB,kBAAkB;AACpD,MAAI,cAAc;AAChB,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,YACJ,UAAU,mBAAmB,kBAAkB;AACjD,MAAI,WAAW;AACb,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,UAAU,UAAU,mBAAmB,kBAAkB;AAC/D,MAAI,SAAS;AACX,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,cAAc,UAAU,mBAAmB,iBAAiB;AAClE,MAAI,aAAa;AACf,WAAO,cAAc;AAAA,EACvB;AAEA,SAAO,cAAc;AACvB;AAQO,MAAM,gBAAgB,CAAC,OAAe,YAAoB;AAAA,EAC/D,SAAS,QAAQ;AAAA,EACjB,SAAS,SAAS;AACpB;AAQO,MAAM,eAAe,CAAC,MAAc,QACzC,IAAI,YAAY,IAAI,EAAE;AASjB,MAAM,gBAAgB,CAC3B,WACA,OACA,QACG;AACH,QAAM,iBAAiB,YAAY,IAAI,YAAY,IAAI,KAAK,EAAE,EAAE;AAChE,QAAM,iBAAiB,KAAK,IAAI,WAAW,IAAI,YAAY,KAAK,EAAE,KAAK;AAEvE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAUO,MAAM,mBAAmB,CAC9B,UACA,MACA,UACG;AACH,QAAM,WAAW;AAAA,IACf,OAAO,CAAC,MAAM,KAAK;AAAA,IACnB,QAAQ,CAAC,GAAG,IAAI,IAAI,KAAK,EAAE;AAAA,IAC3B,MAAM,CAAC,IAAI;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,UAAU,CAAC;AAAA,EACb;AAEA,SAAO,SAAS,QAAQ;AAC1B;AASO,MAAM,aAAa,CACxB,QACA,YACA,aACG;AACH,QAAM,cAAc,KAAK,MAAM,WAAW,CAAC,IAAI;AAC/C,QAAM,YAAY,KAAK,cAAc;AACrC,QAAM,cAAc,OAAO,SAAS;AACpC,SAAO,cAAe,eAAe,IAAI,YAAY,cAAe;AACtE;AAEO,MAAM,gBAAgB,CAC3B,KACA,KACA,UACA,mBACG;AACH,SAAO,aAAa,KAAK,gBAAgB,CAAC,kBAA0B;AAClE,UAAM,QAAQ,IAAI,YAAY,aAAa,EAAE;AAC7C,WAAO,SAAS;AAAA,EAClB,CAAC;AACH;",
+  "sourcesContent": ["import type { FontWidthMap } from '../../../../core/components/text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../../../core/components/text-ellipsis/truncate-string.js';\nimport { LABEL_OPTIONS } from '../../../constants.js';\nimport type { LabelOptions } from '../../../types/canvas.js';\n\ntype LabelWidthOptions = {\n  nameWidth: number;\n  nameValueWidth: number;\n  multiLineWidth: number;\n};\n\nexport const LINE_SPACING = 2;\nexport const FONT_SIZE_DIFFERENCE = 1;\n\n/**\n * Returns the labelOption that fits the current node\n * @internal\n * @param height - height of the node.\n * @param width - width of the node.\n * @param fontSize - font size of the label.\n * @param padding - padding around the label\n * @param labelWidth - object containing width for each labelFit scenario,\n */\nexport const getLabelFit = (\n  height: number,\n  width: number,\n  fontSize: number,\n  padding: number,\n  labelWidth: LabelWidthOptions,\n) => {\n  const { nameWidth, nameValueWidth, multiLineWidth } = labelWidth;\n  const lineSpacing = 2;\n  const paddingSum = 2 * padding;\n  const availableWidth = width - paddingSum;\n  const minInlineHeight = paddingSum + fontSize;\n  const minMultiLineHeight = paddingSum + fontSize * 2 + lineSpacing;\n\n  const fitMultiLine =\n    height >= minMultiLineHeight && availableWidth >= multiLineWidth;\n  if (fitMultiLine) {\n    return LABEL_OPTIONS.Multi;\n  }\n\n  const fitInline =\n    height >= minInlineHeight && availableWidth >= nameValueWidth;\n  if (fitInline) {\n    return LABEL_OPTIONS.Inline;\n  }\n\n  const fitName = height >= minInlineHeight && availableWidth >= nameWidth;\n  if (fitName) {\n    return LABEL_OPTIONS.Name;\n  }\n\n  const fitEllipsis = height >= minInlineHeight && availableWidth < nameWidth;\n  if (fitEllipsis) {\n    return LABEL_OPTIONS.Ellipsis;\n  }\n\n  return LABEL_OPTIONS.Fallback;\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 */\nexport const getRectCenter = (width: number, height: number) => ({\n  centerX: width / 2,\n  centerY: height / 2,\n});\n\n/**\n * Returns the object containing width for each labelFit scenario,\n * using the character width map for estimated measurements.\n * @internal\n * @param nameWidth - pre-calculated name width.\n * @param value - current node value.\n * @param charWidthMap - character width map for width estimation.\n */\nexport const getLabelWidth = (\n  nameWidth: number,\n  value: string,\n  charWidthMap: FontWidthMap,\n) => {\n  const nameValueWidth = nameWidth + calculateWidth(` ${value}`, charWidthMap);\n  const multiLineWidth = Math.max(\n    nameWidth,\n    calculateWidth(value, charWidthMap),\n  );\n\n  return { nameWidth, nameValueWidth, multiLineWidth };\n};\n\n/**\n * Returns the array containing the label items for a given node.\n * Depending on the available space labels are shown in 2 lines or in 1 line or with name only.\n * @internal\n * @param labelFit - current labelFit scenario\n * @param name - current node name.\n * @param value - current node value.\n */\nexport const getAppliedLabels = (\n  labelFit: LabelOptions,\n  name: string,\n  value: string,\n) => {\n  const labelMap = {\n    multi: [name, value],\n    inline: [`${name} ${value}`],\n    name: [name],\n    ellipsis: [name],\n    fallback: [],\n  };\n\n  return labelMap[labelFit];\n};\n\n/**\n * Returns the vertical offset of the labels.\n * @internal\n * @param labels - array of label for the given node.\n * @param labelIndex - current index of the labels array item.\n * @param fontSize - font size value.\n */\nexport const getOffsetY = (\n  labels: string[],\n  labelIndex: number,\n  fontSize: number,\n) => {\n  const downOffsetY = Math.round(fontSize / 2) + LINE_SPACING;\n  const upOffsetY = -1 * downOffsetY - FONT_SIZE_DIFFERENCE;\n  const isMultiLine = labels.length > 1;\n  return isMultiLine ? (labelIndex === 0 ? upOffsetY : downOffsetY) : 0;\n};\n"],
+  "mappings": "AACA,SAAS,sBAAsB;AAC/B,SAAS,qBAAqB;AASvB,MAAM,eAAe;AACrB,MAAM,uBAAuB;AAW7B,MAAM,cAAc,CACzB,QACA,OACA,UACA,SACA,eACG;AACH,QAAM,EAAE,WAAW,gBAAgB,eAAe,IAAI;AACtD,QAAM,cAAc;AACpB,QAAM,aAAa,IAAI;AACvB,QAAM,iBAAiB,QAAQ;AAC/B,QAAM,kBAAkB,aAAa;AACrC,QAAM,qBAAqB,aAAa,WAAW,IAAI;AAEvD,QAAM,eACJ,UAAU,sBAAsB,kBAAkB;AACpD,MAAI,cAAc;AAChB,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,YACJ,UAAU,mBAAmB,kBAAkB;AACjD,MAAI,WAAW;AACb,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,UAAU,UAAU,mBAAmB,kBAAkB;AAC/D,MAAI,SAAS;AACX,WAAO,cAAc;AAAA,EACvB;AAEA,QAAM,cAAc,UAAU,mBAAmB,iBAAiB;AAClE,MAAI,aAAa;AACf,WAAO,cAAc;AAAA,EACvB;AAEA,SAAO,cAAc;AACvB;AAQO,MAAM,gBAAgB,CAAC,OAAe,YAAoB;AAAA,EAC/D,SAAS,QAAQ;AAAA,EACjB,SAAS,SAAS;AACpB;AAUO,MAAM,gBAAgB,CAC3B,WACA,OACA,iBACG;AACH,QAAM,iBAAiB,YAAY,eAAe,IAAI,KAAK,IAAI,YAAY;AAC3E,QAAM,iBAAiB,KAAK;AAAA,IAC1B;AAAA,IACA,eAAe,OAAO,YAAY;AAAA,EACpC;AAEA,SAAO,EAAE,WAAW,gBAAgB,eAAe;AACrD;AAUO,MAAM,mBAAmB,CAC9B,UACA,MACA,UACG;AACH,QAAM,WAAW;AAAA,IACf,OAAO,CAAC,MAAM,KAAK;AAAA,IACnB,QAAQ,CAAC,GAAG,IAAI,IAAI,KAAK,EAAE;AAAA,IAC3B,MAAM,CAAC,IAAI;AAAA,IACX,UAAU,CAAC,IAAI;AAAA,IACf,UAAU,CAAC;AAAA,EACb;AAEA,SAAO,SAAS,QAAQ;AAC1B;AASO,MAAM,aAAa,CACxB,QACA,YACA,aACG;AACH,QAAM,cAAc,KAAK,MAAM,WAAW,CAAC,IAAI;AAC/C,QAAM,YAAY,KAAK,cAAc;AACrC,QAAM,cAAc,OAAO,SAAS;AACpC,SAAO,cAAe,eAAe,IAAI,YAAY,cAAe;AACtE;",
   "names": []
 }

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

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { StoreProvider } from "./StoreProvider.js";
 import { ChartSeriesActionContext } from "../../core/components/series-action/ChartSeriesActionContext.js";
 import { ColorRuleContext } from "../../core/context/ColorRuleContext.js";
@@ -24,11 +25,16 @@ const TreeMapChartProviders = (props) => {
     min: configMin,
     max: configMax,
     children,
-    colorRules = []
+    colorRules = [],
+    unit
   } = props;
   const min = configMin === "data-min" ? void 0 : configMin;
   const max = configMax === "data-max" ? void 0 : configMax;
-  return /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: colorRules, children: /* @__PURE__ */ jsx(TreeMapRawDataContext.Provider, { value: data, children: /* @__PURE__ */ jsx(
+  const memoizedRawData = useMemo(
+    () => ({ ...data, unit: unit ?? data.unit }),
+    [data, unit]
+  );
+  return /* @__PURE__ */ jsx(ColorRuleContext.Provider, { value: colorRules, children: /* @__PURE__ */ jsx(TreeMapRawDataContext.Provider, { value: memoizedRawData, children: /* @__PURE__ */ jsx(
     ChartSeriesActionContext.Provider,
     {
       value: {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/providers/TreeMapChartProviders.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRuleContext } from '../../core/context/ColorRuleContext.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { ColoredRange } from '../../core/types/colored-range.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport type { ChartToolbarConfig } from '../../core/types/toolbar.js';\nimport { ChartLegendContext } from '../context/ChartLegendContext.js';\nimport { ColorPaletteContext } from '../context/ColorPaletteContext.js';\nimport { FormatterContext } from '../context/FormatterContext.js';\nimport { LabelsDisplayContext } from '../context/LabelsDisplayContext.js';\nimport { MinMaxConfigContext } from '../context/MinMaxConfigContext.js';\nimport { NameAccessorContext } from '../context/NameAccessorContext.js';\nimport { ToolbarContext } from '../context/ToolbarContext.js';\nimport { TreeMapRawDataContext } from '../context/TreeMapRawDataContext.js';\nimport type { TreeMapFormatter } from '../types/internal.js';\nimport type {\n  LabelsDisplay,\n  NameAccessor,\n  TreeMapData,\n  TreeMapLeafNode,\n} from '../types/treemap.js';\n\ninterface TreeMapChartProvidersProps extends PropsWithChildren {\n  data: TreeMapData;\n  seriesActions?: (node: TreeMapLeafNode) => SeriesActionsTemplate;\n  formatter: TreeMapFormatter;\n  truncationMode: TruncationMode;\n  legend: LegendProps;\n  toolbar?: ChartToolbarConfig;\n  labelsDisplay: LabelsDisplay;\n  nameAccessor?: NameAccessor;\n  colorPalette: ColorPalette | CustomColorPalette | ColoredRange[];\n  min?: 'data-min' | number;\n  max?: 'data-max' | number;\n  colorRules?: ColorRuleProps[];\n}\n\nexport const TreeMapChartProviders = (props: TreeMapChartProvidersProps) => {\n  const {\n    data,\n    seriesActions,\n    formatter,\n    truncationMode,\n    legend,\n    toolbar,\n    labelsDisplay,\n    nameAccessor,\n    colorPalette,\n    min: configMin,\n    max: configMax,\n    children,\n    colorRules = [],\n  } = props;\n\n  const min = configMin === 'data-min' ? undefined : configMin;\n  const max = configMax === 'data-max' ? undefined : configMax;\n\n  return (\n    <ColorRuleContext.Provider value={colorRules}>\n      <TreeMapRawDataContext.Provider value={data}>\n        <ChartSeriesActionContext.Provider\n          value={{\n            // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n            // @ts-ignore Strict mode transition - needs to be investigated\n            chartSeriesActions: seriesActions,\n          }}\n        >\n          <FormatterContext.Provider\n            value={{\n              formatter,\n              truncationMode,\n            }}\n          >\n            <ColorPaletteContext.Provider value={colorPalette}>\n              <ChartLegendContext.Provider value={legend}>\n                <NameAccessorContext.Provider value={nameAccessor}>\n                  <ToolbarContext.Provider value={toolbar}>\n                    <LabelsDisplayContext.Provider value={labelsDisplay}>\n                      <MinMaxConfigContext.Provider value={{ min, max }}>\n                        <StoreProvider>{children}</StoreProvider>\n                      </MinMaxConfigContext.Provider>\n                    </LabelsDisplayContext.Provider>\n                  </ToolbarContext.Provider>\n                </NameAccessorContext.Provider>\n              </ChartLegendContext.Provider>\n            </ColorPaletteContext.Provider>\n          </FormatterContext.Provider>\n        </ChartSeriesActionContext.Provider>\n      </TreeMapRawDataContext.Provider>\n    </ColorRuleContext.Provider>\n  );\n};\n\nTreeMapChartProviders['displayName'] = 'TreeMapChartProviders';\n"],
-  "mappings": "AAwFwB;AAtFxB,SAAS,qBAAqB;AAE9B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAUjC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAwB/B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA,aAAa,CAAC;AAAA,EAChB,IAAI;AAEJ,QAAM,MAAM,cAAc,aAAa,SAAY;AACnD,QAAM,MAAM,cAAc,aAAa,SAAY;AAEnD,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAChC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,MACrC;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB;AAAA,MACtB;AAAA,MAEA;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAClC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,eACpC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,KAAK,IAAI,GAC9C,8BAAC,iBAAe,UAAS,GAC3B,GACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { useMemo, type PropsWithChildren } from 'react';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { StoreProvider } from './StoreProvider.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ChartSeriesActionContext } from '../../core/components/series-action/ChartSeriesActionContext.js';\nimport { ColorRuleContext } from '../../core/context/ColorRuleContext.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { ColoredRange } from '../../core/types/colored-range.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport type { ChartToolbarConfig } from '../../core/types/toolbar.js';\nimport { ChartLegendContext } from '../context/ChartLegendContext.js';\nimport { ColorPaletteContext } from '../context/ColorPaletteContext.js';\nimport { FormatterContext } from '../context/FormatterContext.js';\nimport { LabelsDisplayContext } from '../context/LabelsDisplayContext.js';\nimport { MinMaxConfigContext } from '../context/MinMaxConfigContext.js';\nimport { NameAccessorContext } from '../context/NameAccessorContext.js';\nimport { ToolbarContext } from '../context/ToolbarContext.js';\nimport { TreeMapRawDataContext } from '../context/TreeMapRawDataContext.js';\nimport type { TreeMapFormatter } from '../types/internal.js';\nimport type {\n  LabelsDisplay,\n  NameAccessor,\n  TreeMapData,\n  TreeMapLeafNode,\n} from '../types/treemap.js';\n\ninterface TreeMapChartProvidersProps extends PropsWithChildren {\n  data: TreeMapData;\n  seriesActions?: (node: TreeMapLeafNode) => SeriesActionsTemplate;\n  formatter: TreeMapFormatter;\n  truncationMode: TruncationMode;\n  legend: LegendProps;\n  toolbar?: ChartToolbarConfig;\n  labelsDisplay: LabelsDisplay;\n  nameAccessor?: NameAccessor;\n  colorPalette: ColorPalette | CustomColorPalette | ColoredRange[];\n  min?: 'data-min' | number;\n  max?: 'data-max' | number;\n  colorRules?: ColorRuleProps[];\n  unit?: string | Unit;\n}\n\nexport const TreeMapChartProviders = (props: TreeMapChartProvidersProps) => {\n  const {\n    data,\n    seriesActions,\n    formatter,\n    truncationMode,\n    legend,\n    toolbar,\n    labelsDisplay,\n    nameAccessor,\n    colorPalette,\n    min: configMin,\n    max: configMax,\n    children,\n    colorRules = [],\n    unit,\n  } = props;\n\n  const min = configMin === 'data-min' ? undefined : configMin;\n  const max = configMax === 'data-max' ? undefined : configMax;\n\n  const memoizedRawData = useMemo(\n    () => ({ ...data, unit: unit ?? data.unit }),\n    [data, unit],\n  );\n\n  return (\n    <ColorRuleContext.Provider value={colorRules}>\n      <TreeMapRawDataContext.Provider value={memoizedRawData}>\n        <ChartSeriesActionContext.Provider\n          value={{\n            // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n            // @ts-ignore Strict mode transition - needs to be investigated\n            chartSeriesActions: seriesActions,\n          }}\n        >\n          <FormatterContext.Provider\n            value={{\n              formatter,\n              truncationMode,\n            }}\n          >\n            <ColorPaletteContext.Provider value={colorPalette}>\n              <ChartLegendContext.Provider value={legend}>\n                <NameAccessorContext.Provider value={nameAccessor}>\n                  <ToolbarContext.Provider value={toolbar}>\n                    <LabelsDisplayContext.Provider value={labelsDisplay}>\n                      <MinMaxConfigContext.Provider value={{ min, max }}>\n                        <StoreProvider>{children}</StoreProvider>\n                      </MinMaxConfigContext.Provider>\n                    </LabelsDisplayContext.Provider>\n                  </ToolbarContext.Provider>\n                </NameAccessorContext.Provider>\n              </ChartLegendContext.Provider>\n            </ColorPaletteContext.Provider>\n          </FormatterContext.Provider>\n        </ChartSeriesActionContext.Provider>\n      </TreeMapRawDataContext.Provider>\n    </ColorRuleContext.Provider>\n  );\n};\n\nTreeMapChartProviders['displayName'] = 'TreeMapChartProviders';\n"],
+  "mappings": "AAiGwB;AAjGxB,SAAS,eAAuC;AAIhD,SAAS,qBAAqB;AAE9B,SAAS,gCAAgC;AACzC,SAAS,wBAAwB;AAUjC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAyB/B,MAAM,wBAAwB,CAAC,UAAsC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AAAA,IACA,aAAa,CAAC;AAAA,IACd;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,cAAc,aAAa,SAAY;AACnD,QAAM,MAAM,cAAc,aAAa,SAAY;AAEnD,QAAM,kBAAkB;AAAA,IACtB,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,KAAK,KAAK;AAAA,IAC1C,CAAC,MAAM,IAAI;AAAA,EACb;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,YAChC,8BAAC,sBAAsB,UAAtB,EAA+B,OAAO,iBACrC;AAAA,IAAC,yBAAyB;AAAA,IAAzB;AAAA,MACC,OAAO;AAAA;AAAA;AAAA,QAGL,oBAAoB;AAAA,MACtB;AAAA,MAEA;AAAA,QAAC,iBAAiB;AAAA,QAAjB;AAAA,UACC,OAAO;AAAA,YACL;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,mBAAmB,UAAnB,EAA4B,OAAO,QAClC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,cACnC,8BAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,qBAAqB,UAArB,EAA8B,OAAO,eACpC,8BAAC,oBAAoB,UAApB,EAA6B,OAAO,EAAE,KAAK,IAAI,GAC9C,8BAAC,iBAAe,UAAS,GAC3B,GACF,GACF,GACF,GACF,GACF;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

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

@@ -25,18 +25,18 @@ const TreeMapInternalDataProvider = (props) => {
     if (isRangeLegend) {
       return getColoredInternalRangeData(
         data,
-        unit,
         rangeColorPalette,
         minMaxConfig,
-        colorRules
+        colorRules,
+        unit
       );
     }
     return getColoredInternalCategoricalData(
       data,
-      unit,
       categoricalColorPalette,
       nameAccessor,
-      colorRules
+      colorRules,
+      unit
     );
   }, [
     isRangeLegend,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/providers/TreeMapInternalDataProvider.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren } from 'react';\nimport { useMemo } from 'react';\n\nimport { useColorRuleConfig } from '../../core/context/ColorRuleContext.js';\nimport { NAME_ACCESSOR } from '../constants.js';\nimport { useColorPalette } from '../context/ColorPaletteContext.js';\nimport { useNameAccessor } from '../context/NameAccessorContext.js';\nimport { TreeMapInternalDataContext } from '../context/TreeMapInternalDataContext.js';\nimport { useTreeMapRawData } from '../context/TreeMapRawDataContext.js';\nimport { useMinMaxConfig } from '../hooks/useMinMaxConfig.js';\nimport { useSetState } from '../store/selectors.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\nimport { getColoredInternalCategoricalData } from '../utils/get-colored-internal-categorical-data.js';\nimport { getColoredInternalRangeData } from '../utils/get-colored-internal-range-data.js';\nimport { getTreeMapColorPalette } from '../utils/get-tree-map-color-palette.js';\n\ninterface TreeMapDataProviderProps extends PropsWithChildren {\n  data: InternalTreeMapNode;\n}\n\nexport const TreeMapInternalDataProvider = (\n  props: TreeMapDataProviderProps,\n) => {\n  const { data, children } = props;\n  const colorPalette = useColorPalette();\n  const setState = useSetState();\n  const nameAccessor = useNameAccessor();\n  const { unit } = useTreeMapRawData();\n  const minMaxConfig = useMinMaxConfig();\n  const colorRules = useColorRuleConfig();\n\n  const isRangeLegend = nameAccessor === NAME_ACCESSOR.Value;\n\n  const { rangeColorPalette, categoricalColorPalette } =\n    getTreeMapColorPalette(colorPalette);\n\n  const { data: internalData, legendColorMap } = useMemo(() => {\n    if (isRangeLegend) {\n      return getColoredInternalRangeData(\n        data,\n        unit,\n        rangeColorPalette,\n        minMaxConfig,\n        colorRules,\n      );\n    }\n\n    return getColoredInternalCategoricalData(\n      data,\n      unit,\n      categoricalColorPalette,\n      nameAccessor,\n      colorRules,\n    );\n  }, [\n    isRangeLegend,\n    data,\n    unit,\n    categoricalColorPalette,\n    nameAccessor,\n    rangeColorPalette,\n    minMaxConfig,\n    colorRules,\n  ]);\n\n  setState((prev) => ({\n    ...prev,\n    colorMap: legendColorMap,\n  }));\n\n  return (\n    <TreeMapInternalDataContext.Provider value={internalData}>\n      {children}\n    </TreeMapInternalDataContext.Provider>\n  );\n};\n\nTreeMapInternalDataProvider['displayName'] = 'TreeMapInternalDataProvider';\n"],
+  "sourcesContent": ["import { type PropsWithChildren } from 'react';\nimport { useMemo } from 'react';\n\nimport { useColorRuleConfig } from '../../core/context/ColorRuleContext.js';\nimport { NAME_ACCESSOR } from '../constants.js';\nimport { useColorPalette } from '../context/ColorPaletteContext.js';\nimport { useNameAccessor } from '../context/NameAccessorContext.js';\nimport { TreeMapInternalDataContext } from '../context/TreeMapInternalDataContext.js';\nimport { useTreeMapRawData } from '../context/TreeMapRawDataContext.js';\nimport { useMinMaxConfig } from '../hooks/useMinMaxConfig.js';\nimport { useSetState } from '../store/selectors.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\nimport { getColoredInternalCategoricalData } from '../utils/get-colored-internal-categorical-data.js';\nimport { getColoredInternalRangeData } from '../utils/get-colored-internal-range-data.js';\nimport { getTreeMapColorPalette } from '../utils/get-tree-map-color-palette.js';\n\ninterface TreeMapDataProviderProps extends PropsWithChildren {\n  data: InternalTreeMapNode;\n}\n\nexport const TreeMapInternalDataProvider = (\n  props: TreeMapDataProviderProps,\n) => {\n  const { data, children } = props;\n  const colorPalette = useColorPalette();\n  const setState = useSetState();\n  const nameAccessor = useNameAccessor();\n  const { unit } = useTreeMapRawData();\n  const minMaxConfig = useMinMaxConfig();\n  const colorRules = useColorRuleConfig();\n\n  const isRangeLegend = nameAccessor === NAME_ACCESSOR.Value;\n\n  const { rangeColorPalette, categoricalColorPalette } =\n    getTreeMapColorPalette(colorPalette);\n\n  const { data: internalData, legendColorMap } = useMemo(() => {\n    if (isRangeLegend) {\n      return getColoredInternalRangeData(\n        data,\n        rangeColorPalette,\n        minMaxConfig,\n        colorRules,\n        unit,\n      );\n    }\n\n    return getColoredInternalCategoricalData(\n      data,\n      categoricalColorPalette,\n      nameAccessor,\n      colorRules,\n      unit,\n    );\n  }, [\n    isRangeLegend,\n    data,\n    unit,\n    categoricalColorPalette,\n    nameAccessor,\n    rangeColorPalette,\n    minMaxConfig,\n    colorRules,\n  ]);\n\n  setState((prev) => ({\n    ...prev,\n    colorMap: legendColorMap,\n  }));\n\n  return (\n    <TreeMapInternalDataContext.Provider value={internalData}>\n      {children}\n    </TreeMapInternalDataContext.Provider>\n  );\n};\n\nTreeMapInternalDataProvider['displayName'] = 'TreeMapInternalDataProvider';\n"],
   "mappings": "AAuEI;AAtEJ,SAAS,eAAe;AAExB,SAAS,0BAA0B;AACnC,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,kCAAkC;AAC3C,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,SAAS,yCAAyC;AAClD,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AAMhC,MAAM,8BAA8B,CACzC,UACG;AACH,QAAM,EAAE,MAAM,SAAS,IAAI;AAC3B,QAAM,eAAe,gBAAgB;AACrC,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,gBAAgB;AACrC,QAAM,EAAE,KAAK,IAAI,kBAAkB;AACnC,QAAM,eAAe,gBAAgB;AACrC,QAAM,aAAa,mBAAmB;AAEtC,QAAM,gBAAgB,iBAAiB,cAAc;AAErD,QAAM,EAAE,mBAAmB,wBAAwB,IACjD,uBAAuB,YAAY;AAErC,QAAM,EAAE,MAAM,cAAc,eAAe,IAAI,QAAQ,MAAM;AAC3D,QAAI,eAAe;AACjB,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,WAAS,CAAC,UAAU;AAAA,IAClB,GAAG;AAAA,IACH,UAAU;AAAA,EACZ,EAAE;AAEF,SACE,oBAAC,2BAA2B,UAA3B,EAAoC,OAAO,cACzC,UACH;AAEJ;AAEA,4BAA4B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/tree-map/utils/build-color-rule.js

@@ -2,16 +2,17 @@ import { get, isNil, pick } from "lodash-es";
 import { isValidRangeColorRule } from "./is-valid-range-color-rule.js";
 import { getColorPalette } from "../../core/utils/get-color-palette.js";
 import { getAccessor } from "../../core/utils/getAccessor.js";
+import { getValidColor } from "../../core/utils/getValidColor.js";
 import {
   buildValidator,
   VALUE_MATCHERS
 } from "../../core/utils/validators.js";
 import { NAME_ACCESSOR } from "../constants.js";
-const getRuleColor = (rule, subject) => rule.colorPalette ? getColorPalette(`${JSON.stringify(subject)}`, 0, rule.colorPalette).Default : rule.color;
+const getRuleColor = (rule, subject) => rule.colorPalette ? getColorPalette(`${JSON.stringify(subject)}`, 0, rule.colorPalette).Default : getValidColor(rule.color ?? "");
 const getSubject = (rule, node, defaultValueAccessor) => {
   const valueAccessor = rule.valueAccessor;
   if (!valueAccessor) {
-    return defaultValueAccessor === NAME_ACCESSOR.Name ? node.name : node.value;
+    return defaultValueAccessor === NAME_ACCESSOR.Value ? node.value : node.name;
   }
   if (valueAccessor === NAME_ACCESSOR.Name) {
     return node.name;

package/esm/charts/tree-map/utils/build-color-rule.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/build-color-rule.ts"],
-  "sourcesContent": ["import { get, isNil, pick } from 'lodash-es';\n\nimport { isValidRangeColorRule } from './is-valid-range-color-rule.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport { getAccessor } from '../../core/utils/getAccessor.js';\nimport {\n  buildValidator,\n  Range,\n  VALUE_MATCHERS,\n} from '../../core/utils/validators.js';\nimport { NAME_ACCESSOR } from '../constants.js';\nimport type {\n  InternalTreeMapNode,\n  RangeLegendColorMap,\n} from '../types/internal.js';\nimport { NameAccessor } from '../types/treemap.js';\n\nconst getRuleColor = (rule: ColorRuleProps, subject: string | number | Range) =>\n  rule.colorPalette\n    ? getColorPalette(`${JSON.stringify(subject)}`, 0, rule.colorPalette)\n        .Default\n    : rule.color;\n\nconst getSubject = (\n  rule: ColorRuleProps,\n  node: InternalTreeMapNode,\n  defaultValueAccessor?: NameAccessor,\n) => {\n  const valueAccessor = rule.valueAccessor;\n\n  if (!valueAccessor) {\n    return defaultValueAccessor === NAME_ACCESSOR.Name ? node.name : node.value;\n  }\n\n  if (valueAccessor === NAME_ACCESSOR.Name) {\n    return node.name;\n  }\n\n  if (valueAccessor === NAME_ACCESSOR.Value) {\n    return node.value;\n  }\n\n  const accessor = getAccessor(valueAccessor);\n  if (accessor) {\n    const value = get(node, accessor);\n    if (!isNil(value)) {\n      return value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * Function to apply color rules to a node\n * @param node - InternalTreeMapNode\n * @param colorRules - raw color rules to apply\n * @param defaultValueAccessor - accessor to use when no valueAccessor is specified\n * @returns - color token\n */\nexport const buildColorRule = (\n  node: InternalTreeMapNode,\n  colorRules?: ColorRuleProps[],\n  defaultValueAccessor?: NameAccessor,\n) => {\n  if (!colorRules || colorRules.length === 0) {\n    return undefined;\n  }\n\n  const isValid = buildValidator(VALUE_MATCHERS);\n\n  for (let index = colorRules.length - 1; index >= 0; index--) {\n    const rule = colorRules[index];\n    const subject = getSubject(rule, node, defaultValueAccessor);\n\n    if (!isNil(subject) && isValid(subject, rule.comparator, rule.matchValue)) {\n      return getRuleColor(rule, subject);\n    }\n  }\n\n  return undefined;\n};\n\nexport const buildColorRangeLegendRule = (\n  legendColorMap: RangeLegendColorMap,\n  colorRules?: ColorRuleProps[],\n) => {\n  if (!colorRules || colorRules.length === 0) {\n    return undefined;\n  }\n\n  const colorRuleMap: RangeLegendColorMap = new Map();\n\n  colorRules.forEach((rule) => {\n    legendColorMap.forEach((_, key) => {\n      const range = pick(key, ['from', 'to']);\n\n      if (!isNil(range) && isValidRangeColorRule(range, rule)) {\n        const color = getRuleColor(rule, range);\n\n        colorRuleMap.set(key, {\n          color: { Default: color },\n        });\n      }\n    });\n  });\n\n  return {\n    for: (range: Record<string, number>) => {\n      return colorRuleMap.get(range);\n    },\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,KAAK,OAAO,YAAY;AAEjC,SAAS,6BAA6B;AAEtC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AACP,SAAS,qBAAqB;AAO9B,MAAM,eAAe,CAAC,MAAsB,YAC1C,KAAK,eACD,gBAAgB,GAAG,KAAK,UAAU,OAAO,CAAC,IAAI,GAAG,KAAK,YAAY,EAC/D,UACH,KAAK;AAEX,MAAM,aAAa,CACjB,MACA,MACA,yBACG;AACH,QAAM,gBAAgB,KAAK;AAE3B,MAAI,CAAC,eAAe;AAClB,WAAO,yBAAyB,cAAc,OAAO,KAAK,OAAO,KAAK;AAAA,EACxE;AAEA,MAAI,kBAAkB,cAAc,MAAM;AACxC,WAAO,KAAK;AAAA,EACd;AAEA,MAAI,kBAAkB,cAAc,OAAO;AACzC,WAAO,KAAK;AAAA,EACd;AAEA,QAAM,WAAW,YAAY,aAAa;AAC1C,MAAI,UAAU;AACZ,UAAM,QAAQ,IAAI,MAAM,QAAQ;AAChC,QAAI,CAAC,MAAM,KAAK,GAAG;AACjB,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AACT;AASO,MAAM,iBAAiB,CAC5B,MACA,YACA,yBACG;AACH,MAAI,CAAC,cAAc,WAAW,WAAW,GAAG;AAC1C,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,eAAe,cAAc;AAE7C,WAAS,QAAQ,WAAW,SAAS,GAAG,SAAS,GAAG,SAAS;AAC3D,UAAM,OAAO,WAAW,KAAK;AAC7B,UAAM,UAAU,WAAW,MAAM,MAAM,oBAAoB;AAE3D,QAAI,CAAC,MAAM,OAAO,KAAK,QAAQ,SAAS,KAAK,YAAY,KAAK,UAAU,GAAG;AACzE,aAAO,aAAa,MAAM,OAAO;AAAA,IACnC;AAAA,EACF;AAEA,SAAO;AACT;AAEO,MAAM,4BAA4B,CACvC,gBACA,eACG;AACH,MAAI,CAAC,cAAc,WAAW,WAAW,GAAG;AAC1C,WAAO;AAAA,EACT;AAEA,QAAM,eAAoC,oBAAI,IAAI;AAElD,aAAW,QAAQ,CAAC,SAAS;AAC3B,mBAAe,QAAQ,CAAC,GAAG,QAAQ;AACjC,YAAM,QAAQ,KAAK,KAAK,CAAC,QAAQ,IAAI,CAAC;AAEtC,UAAI,CAAC,MAAM,KAAK,KAAK,sBAAsB,OAAO,IAAI,GAAG;AACvD,cAAM,QAAQ,aAAa,MAAM,KAAK;AAEtC,qBAAa,IAAI,KAAK;AAAA,UACpB,OAAO,EAAE,SAAS,MAAM;AAAA,QAC1B,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AAAA,IACL,KAAK,CAAC,UAAkC;AACtC,aAAO,aAAa,IAAI,KAAK;AAAA,IAC/B;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { get, isNil, pick } from 'lodash-es';\n\nimport { isValidRangeColorRule } from './is-valid-range-color-rule.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport { getAccessor } from '../../core/utils/getAccessor.js';\nimport { getValidColor } from '../../core/utils/getValidColor.js';\nimport {\n  buildValidator,\n  Range,\n  VALUE_MATCHERS,\n} from '../../core/utils/validators.js';\nimport { NAME_ACCESSOR } from '../constants.js';\nimport type {\n  InternalTreeMapNode,\n  RangeLegendColorMap,\n} from '../types/internal.js';\nimport { NameAccessor } from '../types/treemap.js';\n\nconst getRuleColor = (rule: ColorRuleProps, subject: string | number | Range) =>\n  rule.colorPalette\n    ? getColorPalette(`${JSON.stringify(subject)}`, 0, rule.colorPalette)\n        .Default\n    : getValidColor(rule.color ?? '');\n\nconst getSubject = (\n  rule: ColorRuleProps,\n  node: InternalTreeMapNode,\n  defaultValueAccessor?: NameAccessor,\n) => {\n  const valueAccessor = rule.valueAccessor;\n\n  if (!valueAccessor) {\n    return defaultValueAccessor === NAME_ACCESSOR.Value\n      ? node.value\n      : node.name;\n  }\n\n  if (valueAccessor === NAME_ACCESSOR.Name) {\n    return node.name;\n  }\n\n  if (valueAccessor === NAME_ACCESSOR.Value) {\n    return node.value;\n  }\n\n  const accessor = getAccessor(valueAccessor);\n  if (accessor) {\n    const value = get(node, accessor);\n    if (!isNil(value)) {\n      return value;\n    }\n  }\n\n  return null;\n};\n\n/**\n * Function to apply color rules to a node\n * @param node - InternalTreeMapNode\n * @param colorRules - raw color rules to apply\n * @param defaultValueAccessor - accessor to use when no valueAccessor is specified\n * @returns - color token\n */\nexport const buildColorRule = (\n  node: InternalTreeMapNode,\n  colorRules?: ColorRuleProps[],\n  defaultValueAccessor?: NameAccessor,\n) => {\n  if (!colorRules || colorRules.length === 0) {\n    return undefined;\n  }\n\n  const isValid = buildValidator(VALUE_MATCHERS);\n\n  for (let index = colorRules.length - 1; index >= 0; index--) {\n    const rule = colorRules[index];\n    const subject = getSubject(rule, node, defaultValueAccessor);\n\n    if (!isNil(subject) && isValid(subject, rule.comparator, rule.matchValue)) {\n      return getRuleColor(rule, subject);\n    }\n  }\n\n  return undefined;\n};\n\nexport const buildColorRangeLegendRule = (\n  legendColorMap: RangeLegendColorMap,\n  colorRules?: ColorRuleProps[],\n) => {\n  if (!colorRules || colorRules.length === 0) {\n    return undefined;\n  }\n\n  const colorRuleMap: RangeLegendColorMap = new Map();\n\n  colorRules.forEach((rule) => {\n    legendColorMap.forEach((_, key) => {\n      const range = pick(key, ['from', 'to']);\n\n      if (!isNil(range) && isValidRangeColorRule(range, rule)) {\n        const color = getRuleColor(rule, range);\n\n        colorRuleMap.set(key, {\n          color: { Default: color },\n        });\n      }\n    });\n  });\n\n  return {\n    for: (range: Record<string, number>) => {\n      return colorRuleMap.get(range);\n    },\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,KAAK,OAAO,YAAY;AAEjC,SAAS,6BAA6B;AAEtC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AACP,SAAS,qBAAqB;AAO9B,MAAM,eAAe,CAAC,MAAsB,YAC1C,KAAK,eACD,gBAAgB,GAAG,KAAK,UAAU,OAAO,CAAC,IAAI,GAAG,KAAK,YAAY,EAC/D,UACH,cAAc,KAAK,SAAS,EAAE;AAEpC,MAAM,aAAa,CACjB,MACA,MACA,yBACG;AACH,QAAM,gBAAgB,KAAK;AAE3B,MAAI,CAAC,eAAe;AAClB,WAAO,yBAAyB,cAAc,QAC1C,KAAK,QACL,KAAK;AAAA,EACX;AAEA,MAAI,kBAAkB,cAAc,MAAM;AACxC,WAAO,KAAK;AAAA,EACd;AAEA,MAAI,kBAAkB,cAAc,OAAO;AACzC,WAAO,KAAK;AAAA,EACd;AAEA,QAAM,WAAW,YAAY,aAAa;AAC1C,MAAI,UAAU;AACZ,UAAM,QAAQ,IAAI,MAAM,QAAQ;AAChC,QAAI,CAAC,MAAM,KAAK,GAAG;AACjB,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO;AACT;AASO,MAAM,iBAAiB,CAC5B,MACA,YACA,yBACG;AACH,MAAI,CAAC,cAAc,WAAW,WAAW,GAAG;AAC1C,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,eAAe,cAAc;AAE7C,WAAS,QAAQ,WAAW,SAAS,GAAG,SAAS,GAAG,SAAS;AAC3D,UAAM,OAAO,WAAW,KAAK;AAC7B,UAAM,UAAU,WAAW,MAAM,MAAM,oBAAoB;AAE3D,QAAI,CAAC,MAAM,OAAO,KAAK,QAAQ,SAAS,KAAK,YAAY,KAAK,UAAU,GAAG;AACzE,aAAO,aAAa,MAAM,OAAO;AAAA,IACnC;AAAA,EACF;AAEA,SAAO;AACT;AAEO,MAAM,4BAA4B,CACvC,gBACA,eACG;AACH,MAAI,CAAC,cAAc,WAAW,WAAW,GAAG;AAC1C,WAAO;AAAA,EACT;AAEA,QAAM,eAAoC,oBAAI,IAAI;AAElD,aAAW,QAAQ,CAAC,SAAS;AAC3B,mBAAe,QAAQ,CAAC,GAAG,QAAQ;AACjC,YAAM,QAAQ,KAAK,KAAK,CAAC,QAAQ,IAAI,CAAC;AAEtC,UAAI,CAAC,MAAM,KAAK,KAAK,sBAAsB,OAAO,IAAI,GAAG;AACvD,cAAM,QAAQ,aAAa,MAAM,KAAK;AAEtC,qBAAa,IAAI,KAAK;AAAA,UACpB,OAAO,EAAE,SAAS,MAAM;AAAA,QAC1B,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AAED,SAAO;AAAA,IACL,KAAK,CAAC,UAAkC;AACtC,aAAO,aAAa,IAAI,KAAK;AAAA,IAC/B;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -24,7 +24,7 @@ function getLegendConfiguration(contextLegendConfig, slotsLegendConfig) {
 }
 const buildTreeMapChartConfig = (props, config, slots) => {
   const colorPalette = props.colorPalette ?? config.colorPalette ?? defaultTreeMapConfig.colorPalette;
-  const formatter = props.formatter ?? config.formatter ?? defaultUnitFormatter(props.data?.unit);
+  const formatter = props.formatter ?? config.formatter ?? defaultUnitFormatter(props.unit ?? props.data?.unit);
   const truncationMode = props.truncationMode ?? config.truncationMode ?? defaultTreeMapConfig.truncationMode;
   const loading = props.loading ?? config.loading ?? defaultTreeMapConfig.loading;
   const labelsDisplay = props.labelsDisplay ?? config.labelsDisplay ?? defaultTreeMapConfig.labelsDisplay;

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.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,MAAM,IAAI;AAEvC,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  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;",
   "names": []
 }

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

@@ -7,15 +7,25 @@ const getColoredLeafNodes = (nodes, legendColorMap, colorRules, defaultValueAcce
   ...node,
   color: getLeafColor(node, legendColorMap, colorRules, defaultValueAccessor)
 }));
-const getCategoricalColoredNodes = (rootNode, legendColorMap, nameAccessor) => {
+const getCategoricalColoredNodes = (rootNode, legendColorMap, nameAccessor, colorRules) => {
   const clusterNodes = rootNode.children ?? [];
   return clusterNodes.map((clusterNode) => ({
     ...clusterNode,
     ...nameAccessor && {
-      children: getColoredLeafNodes(clusterNode.children || [], legendColorMap)
+      children: getColoredLeafNodes(
+        clusterNode.children || [],
+        legendColorMap,
+        colorRules,
+        nameAccessor
+      )
     },
     ...!nameAccessor && {
-      color: legendColorMap.get(clusterNode.name)?.color
+      color: legendColorMap.get(clusterNode.name)?.color,
+      children: getColoredLeafNodes(
+        clusterNode.children || [],
+        legendColorMap,
+        colorRules
+      )
     }
   }));
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-categorical-colored-nodes.ts"],
-  "sourcesContent": ["import { buildColorRule } from './build-color-rule.js';\nimport { ColorToken } from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type {\n  CategoricalLegendColorMap,\n  InternalTreeMapNode,\n  LegendColorMap,\n} from '../types/internal.js';\nimport { type NameAccessor } from '../types/treemap.js';\n\nconst getLeafColor = (\n  node: InternalTreeMapNode,\n  legendColorMap: LegendColorMap,\n  colorRules?: ColorRuleProps[],\n  defaultValueAccessor?: NameAccessor,\n): ColorToken | undefined => {\n  const ruleColor = buildColorRule(node, colorRules, defaultValueAccessor);\n  return ruleColor\n    ? { Default: ruleColor }\n    : (legendColorMap as CategoricalLegendColorMap).get(node.name)?.color;\n};\n\nconst getColoredLeafNodes = (\n  nodes: InternalTreeMapNode[],\n  legendColorMap: LegendColorMap,\n  colorRules?: ColorRuleProps[],\n  defaultValueAccessor?: NameAccessor,\n) =>\n  nodes.map((node) => ({\n    ...node,\n    color: getLeafColor(node, legendColorMap, colorRules, defaultValueAccessor),\n  }));\n\n/**\n * Function to apply colorPalette to the tree\n * @param rootNode - InternalTreeMapNode\n * @param legendColorMap - data structure for coloring the nodes\n * @param nameAccessor - targeted property on the leaf node\n * @returns - children array with applied colors\n */\nexport const getCategoricalColoredNodes = (\n  rootNode: InternalTreeMapNode,\n  legendColorMap: LegendColorMap,\n  nameAccessor?: NameAccessor,\n) => {\n  const clusterNodes = rootNode.children ?? [];\n\n  return clusterNodes.map((clusterNode) => ({\n    ...clusterNode,\n    ...(nameAccessor && {\n      children: getColoredLeafNodes(clusterNode.children || [], legendColorMap),\n    }),\n    ...(!nameAccessor && {\n      color: (legendColorMap as CategoricalLegendColorMap).get(clusterNode.name)\n        ?.color,\n    }),\n  }));\n};\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAU/B,MAAM,eAAe,CACnB,MACA,gBACA,YACA,yBAC2B;AAC3B,QAAM,YAAY,eAAe,MAAM,YAAY,oBAAoB;AACvE,SAAO,YACH,EAAE,SAAS,UAAU,IACpB,eAA6C,IAAI,KAAK,IAAI,GAAG;AACpE;AAEA,MAAM,sBAAsB,CAC1B,OACA,gBACA,YACA,yBAEA,MAAM,IAAI,CAAC,UAAU;AAAA,EACnB,GAAG;AAAA,EACH,OAAO,aAAa,MAAM,gBAAgB,YAAY,oBAAoB;AAC5E,EAAE;AASG,MAAM,6BAA6B,CACxC,UACA,gBACA,iBACG;AACH,QAAM,eAAe,SAAS,YAAY,CAAC;AAE3C,SAAO,aAAa,IAAI,CAAC,iBAAiB;AAAA,IACxC,GAAG;AAAA,IACH,GAAI,gBAAgB;AAAA,MAClB,UAAU,oBAAoB,YAAY,YAAY,CAAC,GAAG,cAAc;AAAA,IAC1E;AAAA,IACA,GAAI,CAAC,gBAAgB;AAAA,MACnB,OAAQ,eAA6C,IAAI,YAAY,IAAI,GACrE;AAAA,IACN;AAAA,EACF,EAAE;AACJ;",
+  "sourcesContent": ["import { buildColorRule } from './build-color-rule.js';\nimport { ColorToken } from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type {\n  CategoricalLegendColorMap,\n  InternalTreeMapNode,\n  LegendColorMap,\n} from '../types/internal.js';\nimport { type NameAccessor } from '../types/treemap.js';\n\nconst getLeafColor = (\n  node: InternalTreeMapNode,\n  legendColorMap: LegendColorMap,\n  colorRules?: ColorRuleProps[],\n  defaultValueAccessor?: NameAccessor,\n): ColorToken | undefined => {\n  const ruleColor = buildColorRule(node, colorRules, defaultValueAccessor);\n  return ruleColor\n    ? { Default: ruleColor }\n    : (legendColorMap as CategoricalLegendColorMap).get(node.name)?.color;\n};\n\nconst getColoredLeafNodes = (\n  nodes: InternalTreeMapNode[],\n  legendColorMap: LegendColorMap,\n  colorRules?: ColorRuleProps[],\n  defaultValueAccessor?: NameAccessor,\n) =>\n  nodes.map((node) => ({\n    ...node,\n    color: getLeafColor(node, legendColorMap, colorRules, defaultValueAccessor),\n  }));\n\n/**\n * Function to apply colorPalette to the tree\n * @param rootNode - InternalTreeMapNode\n * @param legendColorMap - data structure for coloring the nodes\n * @param nameAccessor - targeted property on the leaf node\n * @param colorRules - raw color rules to apply\n * @returns - children array with applied colors\n */\nexport const getCategoricalColoredNodes = (\n  rootNode: InternalTreeMapNode,\n  legendColorMap: LegendColorMap,\n  nameAccessor?: NameAccessor,\n  colorRules?: ColorRuleProps[],\n) => {\n  const clusterNodes = rootNode.children ?? [];\n\n  return clusterNodes.map((clusterNode) => ({\n    ...clusterNode,\n    ...(nameAccessor && {\n      children: getColoredLeafNodes(\n        clusterNode.children || [],\n        legendColorMap,\n        colorRules,\n        nameAccessor,\n      ),\n    }),\n    ...(!nameAccessor && {\n      color: (legendColorMap as CategoricalLegendColorMap).get(clusterNode.name)\n        ?.color,\n      children: getColoredLeafNodes(\n        clusterNode.children || [],\n        legendColorMap,\n        colorRules,\n      ),\n    }),\n  }));\n};\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAU/B,MAAM,eAAe,CACnB,MACA,gBACA,YACA,yBAC2B;AAC3B,QAAM,YAAY,eAAe,MAAM,YAAY,oBAAoB;AACvE,SAAO,YACH,EAAE,SAAS,UAAU,IACpB,eAA6C,IAAI,KAAK,IAAI,GAAG;AACpE;AAEA,MAAM,sBAAsB,CAC1B,OACA,gBACA,YACA,yBAEA,MAAM,IAAI,CAAC,UAAU;AAAA,EACnB,GAAG;AAAA,EACH,OAAO,aAAa,MAAM,gBAAgB,YAAY,oBAAoB;AAC5E,EAAE;AAUG,MAAM,6BAA6B,CACxC,UACA,gBACA,cACA,eACG;AACH,QAAM,eAAe,SAAS,YAAY,CAAC;AAE3C,SAAO,aAAa,IAAI,CAAC,iBAAiB;AAAA,IACxC,GAAG;AAAA,IACH,GAAI,gBAAgB;AAAA,MAClB,UAAU;AAAA,QACR,YAAY,YAAY,CAAC;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA,GAAI,CAAC,gBAAgB;AAAA,MACnB,OAAQ,eAA6C,IAAI,YAAY,IAAI,GACrE;AAAA,MACJ,UAAU;AAAA,QACR,YAAY,YAAY,CAAC;AAAA,QACzB;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,EAAE;AACJ;",
   "names": []
 }

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

@@ -3,23 +3,26 @@ import { getColorPalette } from "../../core/utils/get-color-palette.js";
 const getCategoricalLegendColorMap = (rootNode, colorPalette, nameAccessor, colorRules) => {
   const legendColorMap = /* @__PURE__ */ new Map();
   let colorIdx = 0;
+  const legendTarget = nameAccessor ?? "name";
+  const legendColorRules = colorRules.filter(
+    (rule) => !rule.valueAccessor || rule.valueAccessor === legendTarget
+  );
   rootNode.children?.forEach((cluster) => {
     if (nameAccessor) {
       cluster.children?.forEach((node) => {
         const labelKey = node[nameAccessor];
-        const ruleColor = buildColorRule(node, colorRules, nameAccessor);
+        const ruleColor = buildColorRule(node, legendColorRules, nameAccessor);
         if (!legendColorMap.has(labelKey)) {
           const colorToken = ruleColor ? { Default: ruleColor } : getColorPalette(labelKey, colorIdx, colorPalette);
           legendColorMap.set(labelKey, { color: colorToken });
-          if (!ruleColor) {
-            colorIdx++;
-          }
+          colorIdx++;
         }
       });
     } else {
       const labelKey = cluster.name;
+      const ruleColor = buildColorRule(cluster, legendColorRules);
       if (!legendColorMap.has(labelKey)) {
-        const colorToken = getColorPalette(labelKey, colorIdx, colorPalette);
+        const colorToken = ruleColor ? { Default: ruleColor } : getColorPalette(labelKey, colorIdx, colorPalette);
         legendColorMap.set(labelKey, {
           color: colorToken,
           value: cluster.value

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-categorical-legend-color-map.ts"],
-  "sourcesContent": ["import { buildColorRule } from './build-color-rule.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport type {\n  CategoricalLegendColorMap,\n  InternalTreeMapNode,\n  LegendColorMap,\n} from '../types/internal.js';\nimport type { NameAccessor } from '../types/treemap.js';\n\n/**\n * Function to map clusters or nodes to color tokens\n * @param rootNode - InternalTreeMapNode\n * @param colorPalette - color palette\n * @param nameAccessor - targeted property on the leaf node\n * @param colorRules -\n * @returns - LegendColorMap\n */\nexport const getCategoricalLegendColorMap = (\n  rootNode: InternalTreeMapNode,\n  colorPalette: ColorPalette | CustomColorPalette,\n  nameAccessor: NameAccessor | undefined,\n  colorRules: ColorRuleProps[],\n) => {\n  const legendColorMap: LegendColorMap = new Map() as CategoricalLegendColorMap;\n  let colorIdx = 0;\n\n  rootNode.children?.forEach((cluster) => {\n    if (nameAccessor) {\n      cluster.children?.forEach((node) => {\n        const labelKey = node[nameAccessor] as string;\n        const ruleColor = buildColorRule(node, colorRules, nameAccessor);\n        if (!legendColorMap.has(labelKey)) {\n          const colorToken = ruleColor\n            ? { Default: ruleColor }\n            : getColorPalette(labelKey, colorIdx, colorPalette);\n          legendColorMap.set(labelKey, { color: colorToken });\n          if (!ruleColor) {\n            colorIdx++;\n          }\n        }\n      });\n    } else {\n      const labelKey = cluster.name;\n      if (!legendColorMap.has(labelKey)) {\n        const colorToken = getColorPalette(labelKey, colorIdx, colorPalette);\n        legendColorMap.set(labelKey, {\n          color: colorToken,\n          value: cluster.value,\n        });\n        colorIdx++;\n      }\n    }\n  });\n\n  return legendColorMap;\n};\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAM/B,SAAS,uBAAuB;AAgBzB,MAAM,+BAA+B,CAC1C,UACA,cACA,cACA,eACG;AACH,QAAM,iBAAiC,oBAAI,IAAI;AAC/C,MAAI,WAAW;AAEf,WAAS,UAAU,QAAQ,CAAC,YAAY;AACtC,QAAI,cAAc;AAChB,cAAQ,UAAU,QAAQ,CAAC,SAAS;AAClC,cAAM,WAAW,KAAK,YAAY;AAClC,cAAM,YAAY,eAAe,MAAM,YAAY,YAAY;AAC/D,YAAI,CAAC,eAAe,IAAI,QAAQ,GAAG;AACjC,gBAAM,aAAa,YACf,EAAE,SAAS,UAAU,IACrB,gBAAgB,UAAU,UAAU,YAAY;AACpD,yBAAe,IAAI,UAAU,EAAE,OAAO,WAAW,CAAC;AAClD,cAAI,CAAC,WAAW;AACd;AAAA,UACF;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,OAAO;AACL,YAAM,WAAW,QAAQ;AACzB,UAAI,CAAC,eAAe,IAAI,QAAQ,GAAG;AACjC,cAAM,aAAa,gBAAgB,UAAU,UAAU,YAAY;AACnE,uBAAe,IAAI,UAAU;AAAA,UAC3B,OAAO;AAAA,UACP,OAAO,QAAQ;AAAA,QACjB,CAAC;AACD;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "sourcesContent": ["import { buildColorRule } from './build-color-rule.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport type {\n  CategoricalLegendColorMap,\n  InternalTreeMapNode,\n  LegendColorMap,\n} from '../types/internal.js';\nimport type { NameAccessor } from '../types/treemap.js';\n\n/**\n * Function to map clusters or nodes to color tokens\n * @param rootNode - InternalTreeMapNode\n * @param colorPalette - color palette\n * @param nameAccessor - targeted property on the leaf node\n * @param colorRules - color rules to apply to the legend\n * @returns - LegendColorMap\n */\nexport const getCategoricalLegendColorMap = (\n  rootNode: InternalTreeMapNode,\n  colorPalette: ColorPalette | CustomColorPalette,\n  nameAccessor: NameAccessor | undefined,\n  colorRules: ColorRuleProps[],\n) => {\n  const legendColorMap: LegendColorMap = new Map() as CategoricalLegendColorMap;\n  let colorIdx = 0;\n\n  const legendTarget = nameAccessor ?? 'name';\n  const legendColorRules = colorRules.filter(\n    (rule) => !rule.valueAccessor || rule.valueAccessor === legendTarget,\n  );\n\n  rootNode.children?.forEach((cluster) => {\n    if (nameAccessor) {\n      cluster.children?.forEach((node) => {\n        const labelKey = node[nameAccessor] as string;\n        const ruleColor = buildColorRule(node, legendColorRules, nameAccessor);\n        if (!legendColorMap.has(labelKey)) {\n          const colorToken = ruleColor\n            ? { Default: ruleColor }\n            : getColorPalette(labelKey, colorIdx, colorPalette);\n          legendColorMap.set(labelKey, { color: colorToken });\n          colorIdx++;\n        }\n      });\n    } else {\n      const labelKey = cluster.name;\n      const ruleColor = buildColorRule(cluster, legendColorRules);\n      if (!legendColorMap.has(labelKey)) {\n        const colorToken = ruleColor\n          ? { Default: ruleColor }\n          : getColorPalette(labelKey, colorIdx, colorPalette);\n        legendColorMap.set(labelKey, {\n          color: colorToken,\n          value: cluster.value,\n        });\n        colorIdx++;\n      }\n    }\n  });\n\n  return legendColorMap;\n};\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAM/B,SAAS,uBAAuB;AAgBzB,MAAM,+BAA+B,CAC1C,UACA,cACA,cACA,eACG;AACH,QAAM,iBAAiC,oBAAI,IAAI;AAC/C,MAAI,WAAW;AAEf,QAAM,eAAe,gBAAgB;AACrC,QAAM,mBAAmB,WAAW;AAAA,IAClC,CAAC,SAAS,CAAC,KAAK,iBAAiB,KAAK,kBAAkB;AAAA,EAC1D;AAEA,WAAS,UAAU,QAAQ,CAAC,YAAY;AACtC,QAAI,cAAc;AAChB,cAAQ,UAAU,QAAQ,CAAC,SAAS;AAClC,cAAM,WAAW,KAAK,YAAY;AAClC,cAAM,YAAY,eAAe,MAAM,kBAAkB,YAAY;AACrE,YAAI,CAAC,eAAe,IAAI,QAAQ,GAAG;AACjC,gBAAM,aAAa,YACf,EAAE,SAAS,UAAU,IACrB,gBAAgB,UAAU,UAAU,YAAY;AACpD,yBAAe,IAAI,UAAU,EAAE,OAAO,WAAW,CAAC;AAClD;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,OAAO;AACL,YAAM,WAAW,QAAQ;AACzB,YAAM,YAAY,eAAe,SAAS,gBAAgB;AAC1D,UAAI,CAAC,eAAe,IAAI,QAAQ,GAAG;AACjC,cAAM,aAAa,YACf,EAAE,SAAS,UAAU,IACrB,gBAAgB,UAAU,UAAU,YAAY;AACpD,uBAAe,IAAI,UAAU;AAAA,UAC3B,OAAO;AAAA,UACP,OAAO,QAAQ;AAAA,QACjB,CAAC;AACD;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-colored-internal-categorical-data.js

@@ -1,7 +1,7 @@
 import { getCategoricalColoredNodes } from "./get-categorical-colored-nodes.js";
 import { getCategoricalLegendColorMap } from "./get-categorical-legend-color-map.js";
 import { DEFAULT_ROOT_NODE_NAME } from "../constants.js";
-function getColoredInternalCategoricalData(tree, unit, colorPalette, nameAccessor, colorRules) {
+function getColoredInternalCategoricalData(tree, colorPalette, nameAccessor, colorRules, unit) {
   const legendColorMap = getCategoricalLegendColorMap(
     tree,
     colorPalette,
@@ -11,7 +11,8 @@ function getColoredInternalCategoricalData(tree, unit, colorPalette, nameAccesso
   const nodeArray = getCategoricalColoredNodes(
     tree,
     legendColorMap,
-    nameAccessor
+    nameAccessor,
+    colorRules
   );
   const rootNodeName = tree.name ?? DEFAULT_ROOT_NODE_NAME;
   const data = {

package/esm/charts/tree-map/utils/get-colored-internal-categorical-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-colored-internal-categorical-data.ts"],
-  "sourcesContent": ["import { getCategoricalColoredNodes } from './get-categorical-colored-nodes.js';\nimport { getCategoricalLegendColorMap } from './get-categorical-legend-color-map.js';\nimport {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { DEFAULT_ROOT_NODE_NAME } from '../constants.js';\nimport {\n  type ColoredInternalTreeMapData,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { type NameAccessor } from '../types/treemap.js';\n\n/**\n * Function to map the consumer dataset to the internal one that is sorted, colored.\n * Creates the mapping between internal data and the legend items/colors\n * @param tree - treemap root node\n * @param unit - tree data unit\n * @param colorPalette - applied color palette\n * @param nameAccessor - targeted property on the leaf node\n * @param colorRules - raw color rules to apply\n * @returns - InternalTreemapData and Coloring map\n */\nexport function getColoredInternalCategoricalData(\n  tree: InternalTreeMapNode,\n  unit: string | undefined,\n  colorPalette: ColorPalette | CustomColorPalette,\n  nameAccessor: NameAccessor | undefined,\n  colorRules: ColorRuleProps[],\n): ColoredInternalTreeMapData {\n  const legendColorMap = getCategoricalLegendColorMap(\n    tree,\n    colorPalette,\n    nameAccessor,\n    colorRules,\n  );\n\n  const nodeArray = getCategoricalColoredNodes(\n    tree,\n    legendColorMap,\n    nameAccessor,\n  );\n\n  const rootNodeName = tree.name ?? DEFAULT_ROOT_NODE_NAME;\n\n  const data = {\n    tree: {\n      ...tree,\n      children: nodeArray,\n      name: rootNodeName,\n      id: DEFAULT_ROOT_NODE_NAME,\n    },\n    unit,\n  };\n\n  return { data, legendColorMap };\n}\n"],
-  "mappings": "AAAA,SAAS,kCAAkC;AAC3C,SAAS,oCAAoC;AAM7C,SAAS,8BAA8B;AAiBhC,SAAS,kCACd,MACA,MACA,cACA,cACA,YAC4B;AAC5B,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,eAAe,KAAK,QAAQ;AAElC,QAAM,OAAO;AAAA,IACX,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,UAAU;AAAA,MACV,MAAM;AAAA,MACN,IAAI;AAAA,IACN;AAAA,IACA;AAAA,EACF;AAEA,SAAO,EAAE,MAAM,eAAe;AAChC;",
+  "sourcesContent": ["import type { Unit } from '@dynatrace-sdk/units';\n\nimport { getCategoricalColoredNodes } from './get-categorical-colored-nodes.js';\nimport { getCategoricalLegendColorMap } from './get-categorical-legend-color-map.js';\nimport {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { DEFAULT_ROOT_NODE_NAME } from '../constants.js';\nimport {\n  type ColoredInternalTreeMapData,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\nimport { type NameAccessor } from '../types/treemap.js';\n\n/**\n * Function to map the consumer dataset to the internal one that is sorted, colored.\n * Creates the mapping between internal data and the legend items/colors\n * @param tree - treemap root node\n * @param unit - tree data unit\n * @param colorPalette - applied color palette\n * @param nameAccessor - targeted property on the leaf node\n * @param colorRules - raw color rules to apply\n * @returns - InternalTreemapData and Coloring map\n */\nexport function getColoredInternalCategoricalData(\n  tree: InternalTreeMapNode,\n  colorPalette: ColorPalette | CustomColorPalette,\n  nameAccessor: NameAccessor | undefined,\n  colorRules: ColorRuleProps[],\n  unit?: string | Unit,\n): ColoredInternalTreeMapData {\n  const legendColorMap = getCategoricalLegendColorMap(\n    tree,\n    colorPalette,\n    nameAccessor,\n    colorRules,\n  );\n\n  const nodeArray = getCategoricalColoredNodes(\n    tree,\n    legendColorMap,\n    nameAccessor,\n    colorRules,\n  );\n\n  const rootNodeName = tree.name ?? DEFAULT_ROOT_NODE_NAME;\n\n  const data = {\n    tree: {\n      ...tree,\n      children: nodeArray,\n      name: rootNodeName,\n      id: DEFAULT_ROOT_NODE_NAME,\n    },\n    unit,\n  };\n\n  return { data, legendColorMap };\n}\n"],
+  "mappings": "AAEA,SAAS,kCAAkC;AAC3C,SAAS,oCAAoC;AAM7C,SAAS,8BAA8B;AAiBhC,SAAS,kCACd,MACA,cACA,cACA,YACA,MAC4B;AAC5B,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,eAAe,KAAK,QAAQ;AAElC,QAAM,OAAO;AAAA,IACX,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,UAAU;AAAA,MACV,MAAM;AAAA,MACN,IAAI;AAAA,IACN;AAAA,IACA;AAAA,EACF;AAEA,SAAO,EAAE,MAAM,eAAe;AAChC;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-colored-internal-range-data.js

@@ -11,7 +11,7 @@ import {
   DEFAULT_RANGE_LEGEND_COLOR,
   DEFAULT_ROOT_NODE_NAME
 } from "../constants.js";
-function getColoredInternalRangeData(tree, unit, colorPalette, minMaxConfig, colorRules) {
+function getColoredInternalRangeData(tree, colorPalette, minMaxConfig, colorRules, unit) {
   const hasCustomRanges = !isValidColorPalette(colorPalette);
   let { min, max } = minMaxConfig;
   if (isUndefined(min) || isUndefined(max)) {

package/esm/charts/tree-map/utils/get-colored-internal-range-data.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-colored-internal-range-data.ts"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport { buildColorRangeLegendRule } from './build-color-rule.js';\nimport { getDataExtent } from './get-data-extent.js';\nimport { getRangeColoredNodes } from './get-range-colored-nodes.js';\nimport { getRangeLegendColorMap } from './get-range-legend-color-map.js';\nimport { getRangeLegendWithColorRules } from './get-range-legend-with-color-rules.js';\nimport type { ColorPalette } from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { ColoredRange } from '../../core/types/colored-range.js';\nimport type { MinMax } from '../../core/types/min-max.js';\nimport { buildQuantizeScaleFromColorPalette } from '../../core/utils/build-quantize-scale-from-color-palette.js';\nimport { buildThresholdScaleFromRanges } from '../../core/utils/build-threshold-scale-from-ranges.js';\nimport { isValidColorPalette } from '../../core/utils/is-valid-color-palette.js';\nimport {\n  DEFAULT_RANGE_LEGEND_COLOR,\n  DEFAULT_ROOT_NODE_NAME,\n} from '../constants.js';\nimport {\n  type ColoredInternalTreeMapData,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\n\n/**\n * Function to map the consumer dataset to the internal one that is sorted, colored.\n * Creates the mapping between internal data and the legend items/colors\n * @param tree -\n * @param unit -\n * @param colorPalette -\n * @param minMaxConfig -\n * @param colorRules - raw color rules to apply\n * @returns - InternalTreemapData and Coloring map\n */\nexport function getColoredInternalRangeData(\n  tree: InternalTreeMapNode,\n  unit: string | undefined,\n  colorPalette: ColorPalette | ColoredRange[],\n  minMaxConfig: Partial<MinMax>,\n  colorRules: ColorRuleProps[],\n): ColoredInternalTreeMapData {\n  const hasCustomRanges = !isValidColorPalette(colorPalette);\n\n  let { min, max } = minMaxConfig;\n  if (isUndefined(min) || isUndefined(max)) {\n    const [extentMin, extentMax] = getDataExtent(tree);\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    min ??= extentMin!;\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    max ??= extentMax!;\n  }\n\n  const scale = !hasCustomRanges\n    ? buildQuantizeScaleFromColorPalette(min, max, colorPalette)\n    : buildThresholdScaleFromRanges(\n        colorPalette as ColoredRange[],\n        DEFAULT_RANGE_LEGEND_COLOR,\n        minMaxConfig,\n      );\n\n  const baseLegendColorMap = getRangeLegendColorMap(\n    scale,\n    min,\n    max,\n    hasCustomRanges,\n  );\n  const colorRulesMap = buildColorRangeLegendRule(\n    baseLegendColorMap,\n    colorRules,\n  );\n  const legendColorMap = getRangeLegendWithColorRules(\n    baseLegendColorMap,\n    colorRulesMap,\n  );\n  const nodeArray = getRangeColoredNodes(tree, scale, min, max, colorRules);\n  const rootNodeName = tree.name ?? DEFAULT_ROOT_NODE_NAME;\n\n  const data = {\n    tree: {\n      ...tree,\n      children: nodeArray,\n      name: rootNodeName,\n      id: DEFAULT_ROOT_NODE_NAME,\n    },\n    unit,\n  };\n\n  return { data, legendColorMap };\n}\n"],
-  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,oCAAoC;AAK7C,SAAS,0CAA0C;AACnD,SAAS,qCAAqC;AAC9C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAgBA,SAAS,4BACd,MACA,MACA,cACA,cACA,YAC4B;AAC5B,QAAM,kBAAkB,CAAC,oBAAoB,YAAY;AAEzD,MAAI,EAAE,KAAK,IAAI,IAAI;AACnB,MAAI,YAAY,GAAG,KAAK,YAAY,GAAG,GAAG;AACxC,UAAM,CAAC,WAAW,SAAS,IAAI,cAAc,IAAI;AAEjD,YAAQ;AAER,YAAQ;AAAA,EACV;AAEA,QAAM,QAAQ,CAAC,kBACX,mCAAmC,KAAK,KAAK,YAAY,IACzD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEJ,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY,qBAAqB,MAAM,OAAO,KAAK,KAAK,UAAU;AACxE,QAAM,eAAe,KAAK,QAAQ;AAElC,QAAM,OAAO;AAAA,IACX,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,UAAU;AAAA,MACV,MAAM;AAAA,MACN,IAAI;AAAA,IACN;AAAA,IACA;AAAA,EACF;AAEA,SAAO,EAAE,MAAM,eAAe;AAChC;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { buildColorRangeLegendRule } from './build-color-rule.js';\nimport { getDataExtent } from './get-data-extent.js';\nimport { getRangeColoredNodes } from './get-range-colored-nodes.js';\nimport { getRangeLegendColorMap } from './get-range-legend-color-map.js';\nimport { getRangeLegendWithColorRules } from './get-range-legend-with-color-rules.js';\nimport type { ColorPalette } from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { ColoredRange } from '../../core/types/colored-range.js';\nimport type { MinMax } from '../../core/types/min-max.js';\nimport { buildQuantizeScaleFromColorPalette } from '../../core/utils/build-quantize-scale-from-color-palette.js';\nimport { buildThresholdScaleFromRanges } from '../../core/utils/build-threshold-scale-from-ranges.js';\nimport { isValidColorPalette } from '../../core/utils/is-valid-color-palette.js';\nimport {\n  DEFAULT_RANGE_LEGEND_COLOR,\n  DEFAULT_ROOT_NODE_NAME,\n} from '../constants.js';\nimport {\n  type ColoredInternalTreeMapData,\n  type InternalTreeMapNode,\n} from '../types/internal.js';\n\n/**\n * Function to map the consumer dataset to the internal one that is sorted, colored.\n * Creates the mapping between internal data and the legend items/colors\n * @param tree -\n * @param unit -\n * @param colorPalette -\n * @param minMaxConfig -\n * @param colorRules - raw color rules to apply\n * @returns - InternalTreemapData and Coloring map\n */\nexport function getColoredInternalRangeData(\n  tree: InternalTreeMapNode,\n  colorPalette: ColorPalette | ColoredRange[],\n  minMaxConfig: Partial<MinMax>,\n  colorRules: ColorRuleProps[],\n  unit?: string | Unit,\n): ColoredInternalTreeMapData {\n  const hasCustomRanges = !isValidColorPalette(colorPalette);\n\n  let { min, max } = minMaxConfig;\n  if (isUndefined(min) || isUndefined(max)) {\n    const [extentMin, extentMax] = getDataExtent(tree);\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    min ??= extentMin!;\n    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n    max ??= extentMax!;\n  }\n\n  const scale = !hasCustomRanges\n    ? buildQuantizeScaleFromColorPalette(min, max, colorPalette)\n    : buildThresholdScaleFromRanges(\n        colorPalette as ColoredRange[],\n        DEFAULT_RANGE_LEGEND_COLOR,\n        minMaxConfig,\n      );\n\n  const baseLegendColorMap = getRangeLegendColorMap(\n    scale,\n    min,\n    max,\n    hasCustomRanges,\n  );\n  const colorRulesMap = buildColorRangeLegendRule(\n    baseLegendColorMap,\n    colorRules,\n  );\n  const legendColorMap = getRangeLegendWithColorRules(\n    baseLegendColorMap,\n    colorRulesMap,\n  );\n  const nodeArray = getRangeColoredNodes(tree, scale, min, max, colorRules);\n  const rootNodeName = tree.name ?? DEFAULT_ROOT_NODE_NAME;\n\n  const data = {\n    tree: {\n      ...tree,\n      children: nodeArray,\n      name: rootNodeName,\n      id: DEFAULT_ROOT_NODE_NAME,\n    },\n    unit,\n  };\n\n  return { data, legendColorMap };\n}\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAI5B,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,oCAAoC;AAK7C,SAAS,0CAA0C;AACnD,SAAS,qCAAqC;AAC9C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAgBA,SAAS,4BACd,MACA,cACA,cACA,YACA,MAC4B;AAC5B,QAAM,kBAAkB,CAAC,oBAAoB,YAAY;AAEzD,MAAI,EAAE,KAAK,IAAI,IAAI;AACnB,MAAI,YAAY,GAAG,KAAK,YAAY,GAAG,GAAG;AACxC,UAAM,CAAC,WAAW,SAAS,IAAI,cAAc,IAAI;AAEjD,YAAQ;AAER,YAAQ;AAAA,EACV;AAEA,QAAM,QAAQ,CAAC,kBACX,mCAAmC,KAAK,KAAK,YAAY,IACzD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEJ,QAAM,qBAAqB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,gBAAgB;AAAA,IACpB;AAAA,IACA;AAAA,EACF;AACA,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,EACF;AACA,QAAM,YAAY,qBAAqB,MAAM,OAAO,KAAK,KAAK,UAAU;AACxE,QAAM,eAAe,KAAK,QAAQ;AAElC,QAAM,OAAO;AAAA,IACX,MAAM;AAAA,MACJ,GAAG;AAAA,MACH,UAAU;AAAA,MACV,MAAM;AAAA,MACN,IAAI;AAAA,IACN;AAAA,IACA;AAAA,EACF;AAEA,SAAO,EAAE,MAAM,eAAe;AAChC;",
   "names": []
 }

package/esm/charts/tree-map/utils/get-mapped-tree.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-mapped-tree.ts"],
-  "sourcesContent": ["import type { Formatter } from '../../core/types/formatter.js';\nimport { DEFAULT_ROOT_NODE_NAME } from '../constants.js';\nimport { getAppliedFormatter } from './get-applied-formatter.js';\nimport type {\n  InternalTreeMapNode,\n  TreeMapFormatter,\n} from '../types/internal.js';\nimport {\n  TreeMapRootNode,\n  type TreeMapClusterNode,\n  type TreeMapLeafNode,\n} from '../types/treemap.js';\n\nconst getNodeId = (clusterName: string, leafName?: string) => {\n  const name = leafName\n    ? `${clusterName}-${leafName}`\n    : `cluster-${clusterName}`;\n  return name;\n};\n\nconst getMappedLeafNode = (\n  leafNode: TreeMapLeafNode,\n  clusterName: string,\n  formatter: Formatter,\n  unit?: string,\n) => {\n  return {\n    ...leafNode,\n    id: getNodeId(clusterName, leafNode.name),\n    formattedValue: formatter(leafNode.value ?? 0, unit),\n  };\n};\n\nconst getMappedCluster = (\n  cluster: TreeMapClusterNode,\n  formatter: Formatter,\n  unit?: string,\n) => {\n  const clusterName = cluster.name;\n  const clusterId = getNodeId(clusterName);\n  // 'nodes' are mapped to 'children' => nodes are removed from the cluster\n  const { nodes, ...clusterRest } = cluster;\n  return {\n    ...clusterRest,\n    id: clusterId,\n    children: (cluster.nodes ?? []).map((leaf) =>\n      getMappedLeafNode(leaf, clusterName, formatter, unit),\n    ),\n  };\n};\n\n/**\n * Map nodes to children prop\n * @param rootNode - TreeMap root node\n * @returns - InternalTreeMapNode\n */\nexport const getMappedTree = (\n  rootNode: TreeMapRootNode,\n  formatter: TreeMapFormatter,\n  unit?: string,\n): InternalTreeMapNode => {\n  const clusters = [...(rootNode.nodes ?? [])];\n\n  const appliedFormatter = getAppliedFormatter(formatter);\n  const children = clusters.map((cluster) =>\n    getMappedCluster(cluster, appliedFormatter, unit),\n  );\n\n  const rootNodeName = rootNode.name ?? DEFAULT_ROOT_NODE_NAME;\n\n  // 'nodes' are mapped to 'children' => 'nodes' are removed from the rootNode\n  const { nodes, ...rootNodeRest } = rootNode;\n\n  return {\n    ...rootNodeRest,\n    children,\n    id: DEFAULT_ROOT_NODE_NAME,\n    name: rootNodeName,\n  };\n};\n"],
-  "mappings": "AACA,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AAWpC,MAAM,YAAY,CAAC,aAAqB,aAAsB;AAC5D,QAAM,OAAO,WACT,GAAG,WAAW,IAAI,QAAQ,KAC1B,WAAW,WAAW;AAC1B,SAAO;AACT;AAEA,MAAM,oBAAoB,CACxB,UACA,aACA,WACA,SACG;AACH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,IAAI,UAAU,aAAa,SAAS,IAAI;AAAA,IACxC,gBAAgB,UAAU,SAAS,SAAS,GAAG,IAAI;AAAA,EACrD;AACF;AAEA,MAAM,mBAAmB,CACvB,SACA,WACA,SACG;AACH,QAAM,cAAc,QAAQ;AAC5B,QAAM,YAAY,UAAU,WAAW;AAEvC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,SAAO;AAAA,IACL,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,WAAW,QAAQ,SAAS,CAAC,GAAG;AAAA,MAAI,CAAC,SACnC,kBAAkB,MAAM,aAAa,WAAW,IAAI;AAAA,IACtD;AAAA,EACF;AACF;AAOO,MAAM,gBAAgB,CAC3B,UACA,WACA,SACwB;AACxB,QAAM,WAAW,CAAC,GAAI,SAAS,SAAS,CAAC,CAAE;AAE3C,QAAM,mBAAmB,oBAAoB,SAAS;AACtD,QAAM,WAAW,SAAS;AAAA,IAAI,CAAC,YAC7B,iBAAiB,SAAS,kBAAkB,IAAI;AAAA,EAClD;AAEA,QAAM,eAAe,SAAS,QAAQ;AAGtC,QAAM,EAAE,OAAO,GAAG,aAAa,IAAI;AAEnC,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import type { Unit } from '@dynatrace-sdk/units';\n\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { DEFAULT_ROOT_NODE_NAME } from '../constants.js';\nimport { getAppliedFormatter } from './get-applied-formatter.js';\nimport type {\n  InternalTreeMapNode,\n  TreeMapFormatter,\n} from '../types/internal.js';\nimport {\n  TreeMapRootNode,\n  type TreeMapClusterNode,\n  type TreeMapLeafNode,\n} from '../types/treemap.js';\n\nconst getNodeId = (clusterName: string, leafName?: string) => {\n  const name = leafName\n    ? `${clusterName}-${leafName}`\n    : `cluster-${clusterName}`;\n  return name;\n};\n\nconst getMappedLeafNode = (\n  leafNode: TreeMapLeafNode,\n  clusterName: string,\n  formatter: Formatter,\n  unit?: string | Unit,\n) => {\n  return {\n    ...leafNode,\n    id: getNodeId(clusterName, leafNode.name),\n    formattedValue: formatter(leafNode.value ?? 0, unit),\n  };\n};\n\nconst getMappedCluster = (\n  cluster: TreeMapClusterNode,\n  formatter: Formatter,\n  unit?: string | Unit,\n) => {\n  const clusterName = cluster.name;\n  const clusterId = getNodeId(clusterName);\n  // 'nodes' are mapped to 'children' => nodes are removed from the cluster\n  const { nodes, ...clusterRest } = cluster;\n  return {\n    ...clusterRest,\n    id: clusterId,\n    children: (cluster.nodes ?? []).map((leaf) =>\n      getMappedLeafNode(leaf, clusterName, formatter, unit),\n    ),\n  };\n};\n\n/**\n * Map nodes to children prop\n * @param rootNode - TreeMap root node\n * @returns - InternalTreeMapNode\n */\nexport const getMappedTree = (\n  rootNode: TreeMapRootNode,\n  formatter: TreeMapFormatter,\n  unit?: string | Unit,\n): InternalTreeMapNode => {\n  const clusters = [...(rootNode.nodes ?? [])];\n\n  const appliedFormatter = getAppliedFormatter(formatter);\n  const children = clusters.map((cluster) =>\n    getMappedCluster(cluster, appliedFormatter, unit),\n  );\n\n  const rootNodeName = rootNode.name ?? DEFAULT_ROOT_NODE_NAME;\n\n  // 'nodes' are mapped to 'children' => 'nodes' are removed from the rootNode\n  const { nodes, ...rootNodeRest } = rootNode;\n\n  return {\n    ...rootNodeRest,\n    children,\n    id: DEFAULT_ROOT_NODE_NAME,\n    name: rootNodeName,\n  };\n};\n"],
+  "mappings": "AAGA,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AAWpC,MAAM,YAAY,CAAC,aAAqB,aAAsB;AAC5D,QAAM,OAAO,WACT,GAAG,WAAW,IAAI,QAAQ,KAC1B,WAAW,WAAW;AAC1B,SAAO;AACT;AAEA,MAAM,oBAAoB,CACxB,UACA,aACA,WACA,SACG;AACH,SAAO;AAAA,IACL,GAAG;AAAA,IACH,IAAI,UAAU,aAAa,SAAS,IAAI;AAAA,IACxC,gBAAgB,UAAU,SAAS,SAAS,GAAG,IAAI;AAAA,EACrD;AACF;AAEA,MAAM,mBAAmB,CACvB,SACA,WACA,SACG;AACH,QAAM,cAAc,QAAQ;AAC5B,QAAM,YAAY,UAAU,WAAW;AAEvC,QAAM,EAAE,OAAO,GAAG,YAAY,IAAI;AAClC,SAAO;AAAA,IACL,GAAG;AAAA,IACH,IAAI;AAAA,IACJ,WAAW,QAAQ,SAAS,CAAC,GAAG;AAAA,MAAI,CAAC,SACnC,kBAAkB,MAAM,aAAa,WAAW,IAAI;AAAA,IACtD;AAAA,EACF;AACF;AAOO,MAAM,gBAAgB,CAC3B,UACA,WACA,SACwB;AACxB,QAAM,WAAW,CAAC,GAAI,SAAS,SAAS,CAAC,CAAE;AAE3C,QAAM,mBAAmB,oBAAoB,SAAS;AACtD,QAAM,WAAW,SAAS;AAAA,IAAI,CAAC,YAC7B,iBAAiB,SAAS,kBAAkB,IAAI;AAAA,EAClD;AAEA,QAAM,eAAe,SAAS,QAAQ;AAGtC,QAAM,EAAE,OAAO,GAAG,aAAa,IAAI;AAEnC,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,IAAI;AAAA,IACJ,MAAM;AAAA,EACR;AACF;",
   "names": []
 }

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

@@ -2,7 +2,7 @@ import { buildColorRule } from "./build-color-rule.js";
 import { getTokenComputedStyle } from "../../core/utils/getTokenComputedStyle.js";
 import { OUT_OF_RANGE_NODE_COLOR } from "../constants.js";
 const getColoredLeafNodes = (nodes, scale, min, max, colorRules) => nodes.map((node) => {
-  const ruleColor = buildColorRule(node, colorRules);
+  const ruleColor = buildColorRule(node, colorRules, "value");
   return {
     ...node,
     color: { Default: ruleColor ?? getNodeColor(node, scale, min, max) }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/get-range-colored-nodes.ts"],
-  "sourcesContent": ["import type { ScaleThreshold, ScaleQuantize } from 'd3-scale';\n\nimport { buildColorRule } from './build-color-rule.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { getTokenComputedStyle } from '../../core/utils/getTokenComputedStyle.js';\nimport { OUT_OF_RANGE_NODE_COLOR } from '../constants.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nconst getColoredLeafNodes = (\n  nodes: InternalTreeMapNode[],\n  scale: ScaleQuantize<string, never> | ScaleThreshold<number, string>,\n  min: number,\n  max: number,\n  colorRules: ColorRuleProps[],\n) =>\n  nodes.map((node) => {\n    const ruleColor = buildColorRule(node, colorRules);\n    return {\n      ...node,\n      color: { Default: ruleColor ?? getNodeColor(node, scale, min, max) },\n    };\n  });\n\nconst getNodeColor = (\n  node: InternalTreeMapNode,\n  scale: ScaleQuantize<string, never> | ScaleThreshold<number, string>,\n  min: number,\n  max: number,\n) => {\n  if (node.value >= min && node.value <= max) {\n    return getTokenComputedStyle(scale(node.value));\n  }\n\n  return OUT_OF_RANGE_NODE_COLOR;\n};\n\n/**\n * Function to apply colorPalette to the tree\n * @param rootNode - InternalTreeMapNode\n * @param scale -\n * @param min -\n * @param max -\n * @param colorRules -\n * @returns - children array with applied colors\n */\nexport const getRangeColoredNodes = (\n  rootNode: InternalTreeMapNode,\n  scale: ScaleQuantize<string, never> | ScaleThreshold<number, string>,\n  min: number,\n  max: number,\n  colorRules: ColorRuleProps[],\n) =>\n  rootNode.children?.map((clusterNode) => ({\n    ...clusterNode,\n    children: getColoredLeafNodes(\n      clusterNode.children || [],\n      scale,\n      min,\n      max,\n      colorRules,\n    ),\n  }));\n"],
-  "mappings": "AAEA,SAAS,sBAAsB;AAE/B,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AAGxC,MAAM,sBAAsB,CAC1B,OACA,OACA,KACA,KACA,eAEA,MAAM,IAAI,CAAC,SAAS;AAClB,QAAM,YAAY,eAAe,MAAM,UAAU;AACjD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO,EAAE,SAAS,aAAa,aAAa,MAAM,OAAO,KAAK,GAAG,EAAE;AAAA,EACrE;AACF,CAAC;AAEH,MAAM,eAAe,CACnB,MACA,OACA,KACA,QACG;AACH,MAAI,KAAK,SAAS,OAAO,KAAK,SAAS,KAAK;AAC1C,WAAO,sBAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EAChD;AAEA,SAAO;AACT;AAWO,MAAM,uBAAuB,CAClC,UACA,OACA,KACA,KACA,eAEA,SAAS,UAAU,IAAI,CAAC,iBAAiB;AAAA,EACvC,GAAG;AAAA,EACH,UAAU;AAAA,IACR,YAAY,YAAY,CAAC;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,EAAE;",
+  "sourcesContent": ["import type { ScaleThreshold, ScaleQuantize } from 'd3-scale';\n\nimport { buildColorRule } from './build-color-rule.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { getTokenComputedStyle } from '../../core/utils/getTokenComputedStyle.js';\nimport { OUT_OF_RANGE_NODE_COLOR } from '../constants.js';\nimport type { InternalTreeMapNode } from '../types/internal.js';\n\nconst getColoredLeafNodes = (\n  nodes: InternalTreeMapNode[],\n  scale: ScaleQuantize<string, never> | ScaleThreshold<number, string>,\n  min: number,\n  max: number,\n  colorRules: ColorRuleProps[],\n) =>\n  nodes.map((node) => {\n    const ruleColor = buildColorRule(node, colorRules, 'value');\n    return {\n      ...node,\n      color: { Default: ruleColor ?? getNodeColor(node, scale, min, max) },\n    };\n  });\n\nconst getNodeColor = (\n  node: InternalTreeMapNode,\n  scale: ScaleQuantize<string, never> | ScaleThreshold<number, string>,\n  min: number,\n  max: number,\n) => {\n  if (node.value >= min && node.value <= max) {\n    return getTokenComputedStyle(scale(node.value));\n  }\n\n  return OUT_OF_RANGE_NODE_COLOR;\n};\n\n/**\n * Function to apply colorPalette to the tree\n * @param rootNode - InternalTreeMapNode\n * @param scale -\n * @param min -\n * @param max -\n * @param colorRules -\n * @returns - children array with applied colors\n */\nexport const getRangeColoredNodes = (\n  rootNode: InternalTreeMapNode,\n  scale: ScaleQuantize<string, never> | ScaleThreshold<number, string>,\n  min: number,\n  max: number,\n  colorRules: ColorRuleProps[],\n) =>\n  rootNode.children?.map((clusterNode) => ({\n    ...clusterNode,\n    children: getColoredLeafNodes(\n      clusterNode.children || [],\n      scale,\n      min,\n      max,\n      colorRules,\n    ),\n  }));\n"],
+  "mappings": "AAEA,SAAS,sBAAsB;AAE/B,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AAGxC,MAAM,sBAAsB,CAC1B,OACA,OACA,KACA,KACA,eAEA,MAAM,IAAI,CAAC,SAAS;AAClB,QAAM,YAAY,eAAe,MAAM,YAAY,OAAO;AAC1D,SAAO;AAAA,IACL,GAAG;AAAA,IACH,OAAO,EAAE,SAAS,aAAa,aAAa,MAAM,OAAO,KAAK,GAAG,EAAE;AAAA,EACrE;AACF,CAAC;AAEH,MAAM,eAAe,CACnB,MACA,OACA,KACA,QACG;AACH,MAAI,KAAK,SAAS,OAAO,KAAK,SAAS,KAAK;AAC1C,WAAO,sBAAsB,MAAM,KAAK,KAAK,CAAC;AAAA,EAChD;AAEA,SAAO;AACT;AAWO,MAAM,uBAAuB,CAClC,UACA,OACA,KACA,KACA,eAEA,SAAS,UAAU,IAAI,CAAC,iBAAiB;AAAA,EACvC,GAAG;AAAA,EACH,UAAU;AAAA,IACR,YAAY,YAAY,CAAC;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,EAAE;",
   "names": []
 }

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

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

package/esm/charts/tree-map/utils/map-to-internal-tree.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/tree-map/utils/map-to-internal-tree.ts"],
-  "sourcesContent": ["import { clusterizeNodes } from './clusterize-nodes.js';\nimport { getFilteredTree } from './get-filtered-tree.js';\nimport { getMappedTree } from './get-mapped-tree.js';\nimport type { TreeMapFormatter } from '../types/internal.js';\nimport type { TreeMapRootNode } from '../types/treemap.js';\n\nexport function mapToInternalTree(\n  tree: TreeMapRootNode,\n  formatter: TreeMapFormatter,\n  unit?: string,\n) {\n  const clusterizedTree = clusterizeNodes(tree);\n  const mappedTree = getMappedTree(clusterizedTree, formatter, unit);\n  const filteredTree = getFilteredTree(mappedTree);\n\n  return filteredTree;\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAIvB,SAAS,kBACd,MACA,WACA,MACA;AACA,QAAM,kBAAkB,gBAAgB,IAAI;AAC5C,QAAM,aAAa,cAAc,iBAAiB,WAAW,IAAI;AACjE,QAAM,eAAe,gBAAgB,UAAU;AAE/C,SAAO;AACT;",
+  "sourcesContent": ["import type { Unit } from '@dynatrace-sdk/units';\n\nimport { clusterizeNodes } from './clusterize-nodes.js';\nimport { getFilteredTree } from './get-filtered-tree.js';\nimport { getMappedTree } from './get-mapped-tree.js';\nimport type { TreeMapFormatter } from '../types/internal.js';\nimport type { TreeMapRootNode } from '../types/treemap.js';\n\nexport function mapToInternalTree(\n  tree: TreeMapRootNode,\n  formatter: TreeMapFormatter,\n  unit?: string | Unit,\n) {\n  const clusterizedTree = clusterizeNodes(tree);\n  const mappedTree = getMappedTree(clusterizedTree, formatter, unit);\n  const filteredTree = getFilteredTree(mappedTree);\n\n  return filteredTree;\n}\n"],
+  "mappings": "AAEA,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAIvB,SAAS,kBACd,MACA,WACA,MACA;AACA,QAAM,kBAAkB,gBAAgB,IAAI;AAC5C,QAAM,aAAa,cAAc,iBAAiB,WAAW,IAAI;AACjE,QAAM,eAAe,gBAAgB,UAAU;AAE/C,SAAO;AACT;",
   "names": []
 }