@dynatrace/strato-components 3.0.1 → 3.1.1

package/esm/charts/pie/components/PieChartOverlays/PieChartOverlays.sty.js.map

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

package/esm/charts/pie/components/PieChartPlot/PieChartPlot.css

@@ -1,3 +1,3 @@
-._1iotdmn0-3-0-1 {
+._1iotdmn0-3-1-1 {
   position: relative;
 }

package/esm/charts/pie/components/PieChartPlot/PieChartPlot.sty.js

@@ -1,5 +1,5 @@
 import "./PieChartPlot.css";
-var container = "_1iotdmn0-3-0-1";
+var container = "_1iotdmn0-3-1-1";
 export {
   container
 };

package/esm/charts/pie/components/PieChartPlot/PieChartPlot.sty.js.map

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

package/esm/charts/pie/components/PieChartTooltip/components/PieChartTooltipBody.css

@@ -1,4 +1,4 @@
-._spoth0-3-0-1 {
+._spoth0-3-1-1 {
   min-width: 225px;
   max-width: 300px;
 }

package/esm/charts/pie/components/PieChartTooltip/components/PieChartTooltipBody.sty.js

@@ -1,5 +1,5 @@
 import "./PieChartTooltipBody.css";
-var container = "_spoth0-3-0-1";
+var container = "_spoth0-3-1-1";
 export {
   container
 };

package/esm/charts/pie/components/PieChartTooltip/components/PieChartTooltipBody.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/pie/components/PieChartTooltip/components/PieChartTooltipBody.css.ts"],
-  "sourcesContent": ["import './PieChartTooltipBody.css';\nexport var container = '_spoth0-3-0-1';"],
+  "sourcesContent": ["import './PieChartTooltipBody.css';\nexport var container = '_spoth0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/pie/types/pie-chart.config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/types/pie-chart.config.ts"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport {\n  PieChartInternalToolbarConfig,\n  PieChartToolbarConfig,\n} from './toolbar.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\n\n/**\n * @public\n */\nexport type SliceUnit = string;\n\n/**\n * @public\n */\nexport interface SliceData {\n  /** The category of the slice*/\n  category: string;\n  /** The value of the slice */\n  value: number;\n  /**\n   * The color of the slice. Overrides the color assigned from the color palette.\n   *\n   * @deprecated This key will be removed in a future release. Use ColorRule slot instead.\n   */\n  color?: string;\n}\n\n/**\n * @public\n */\nexport interface PieChartData {\n  /** Slice data array */\n  slices: SliceData[];\n  /** The unit of the slices */\n  unit?: SliceUnit;\n}\n\n/**\n * @public\n */\nexport interface PieChartProps extends StylingProps, MaskingProps, DataTestId {\n  /**\n   * Categorical data of the chart.\n   */\n  data: PieChartData;\n  /**\n   * Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container.\n   */\n  width?: number;\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /** Exposed callback to display series actions for a slice  */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  /** Show the loading indicator when truly.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface PieChartContextConfig {\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Config for the labels of the pie chart slices.\n   */\n  labels?: LabelsConfig;\n  /**\n   * Group configuration for the pie chart.\n   * Aggregates multiple slices into a group (matches threshold config).\n   */\n  grouping?: GroupConfig;\n  /**\n   * Legend configuration for the pie chart\n   */\n  legend?: PieChartLegendConfig;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Toolbar configuration\n   */\n  toolbar?: PieChartToolbarConfig;\n  /** Callback to display series actions for a slice */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * @internal\n */\nexport type DonutChartContextConfig = PieChartContextConfig;\n\n/**\n * @public\n */\nexport interface PieChartConfiguration extends PieChartContextConfig {\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n}\n\n/**\n * @internal\n */\nexport type DonutChartConfiguration = PieChartConfiguration;\n\n// Config type holding all the required config used in the pie chart. Considers that the defaults have already been applied.\n/**\n * @internal\n */\nexport type RequiredPieChartConfiguration = Required<\n  Omit<PieChartConfiguration, 'toolbar' | 'seriesActions' | 'colorRules'>\n> & {\n  toolbar?: PieChartInternalToolbarConfig;\n  innerElement?: InnerHandler | ReactNode;\n  colorRules?: ColorRuleProps[];\n};\n\n/**\n * @internal\n */\nexport type RequiredDonutChartConfiguration = RequiredPieChartConfiguration;\n\n/**\n * @internal\n */\nexport type NotRequiredPieChartConfiguration = {\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n};\n\n/**\n * @internal\n */\nexport type NotRequiredDonutChartConfiguration =\n  NotRequiredPieChartConfiguration;\n\n/**\n * @internal\n */\nexport type PieDonutConfig = (\n  | RequiredPieChartConfiguration\n  | RequiredDonutChartConfiguration\n) &\n  (NotRequiredPieChartConfiguration | NotRequiredDonutChartConfiguration);\n\n/**\n * @public\n */\nexport type LabelTypeOptions = 'absolute' | 'relative';\n/**\n * @public\n */\nexport interface LabelsConfig {\n  /**\n   * Hides the slice labels.\n   * @defaultValue false (all the labels are displayed).\n   */\n  hidden?: boolean;\n  /**\n   * Display the label with a relative or absolute value.\n   * @defaultValue 'relative'\n   */\n  valueType?: LabelTypeOptions;\n}\n\n/**\n * @public\n */\nexport const thresholdTypeOptions = [\n  'absolute',\n  'relative',\n  'number-of-slices',\n] as const;\n/**\n * @public\n */\nexport type ThresholdType = (typeof thresholdTypeOptions)[number];\n\n/**\n * @public\n */\nexport interface ThresholdConfig {\n  /**\n   * Type of the grouping threshold. Can be \"relative\", \"absolute\" or \"number-of-slices\".\n   * @defaultValue 'relative'.\n   */\n  type: ThresholdType;\n  /**\n   * Value of the group threshold.\n   * Default is dynamically calculated depending on the chart size for relative and absolute. 10 in case of number-of-slices.\n   */\n  value: number;\n}\n\n/**\n * @public\n */\nexport interface GroupConfig {\n  /**\n   * Name of the group.\n   * @defaultValue 'Other'.\n   */\n  name?: string;\n  /**\n   * The threshold for the group.\n   */\n  threshold: ThresholdConfig;\n}\n\n/**\n * @public\n */\nexport type PieChartLegendConfig = LegendProps;\n\n/**\n * @public\n */\nexport type DonutChartData = PieChartData;\n\n/**\n * @public\n */\nexport interface DonutChartProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId {\n  /**\n   * Categorical data of the chart.\n   */\n  data: DonutChartData;\n  /**\n   * Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container.\n   */\n  width?: number;\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /** Exposed callback to display series actions for a slice  */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  /** Show the loading indicator when truly.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport type DonutChartLegendConfig = PieChartLegendConfig;\n\n// TODO: ADES-3843 Split this type into two different ones, PieChartSlots and DonutChartSlots\n/**\n * @internal\n */\nexport interface PieChartSlots {\n  labels: Partial<LabelsConfig>;\n  grouping: Partial<GroupConfig>;\n  legend: Partial<PieChartLegendConfig>;\n  toolbar: Partial<PieChartToolbarConfig> | undefined;\n  innerElement?: InnerHandler | ReactNode;\n  colorRules: ColorRuleProps[];\n}\n\n/**\n * @internal\n */\nexport type DonutChartSlots = PieChartSlots;\n\n/**\n * @public\n */\nexport type InnerHandler = (value: InnerParams) => ReactNode;\n\n/**\n * @public\n */\nexport type InnerParams = {\n  absoluteValue: number;\n  relativeValue: number;\n  dimensions: { width: number; height: number };\n};\n"],
-  "mappings": "AA0NO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport {\n  PieChartInternalToolbarConfig,\n  PieChartToolbarConfig,\n} from './toolbar.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { MaskingProps } from '../../../core/types/masking-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport type { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendProps } from '../../core/types/legend.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\n\n/**\n * @public\n * @deprecated use string or Unit type instead\n */\nexport type SliceUnit = string;\n\n/**\n * @public\n */\nexport interface SliceData {\n  /** The category of the slice*/\n  category: string;\n  /** The value of the slice */\n  value: number;\n  /**\n   * The color of the slice. Overrides the color assigned from the color palette.\n   *\n   * @deprecated This key will be removed in a future release. Use ColorRule slot instead.\n   */\n  color?: string;\n}\n\n/**\n * @public\n */\nexport interface PieChartData {\n  /** Slice data array */\n  slices: SliceData[];\n  /** The unit of the slices */\n  unit?: string | Unit;\n}\n\n/**\n * @public\n */\nexport interface PieChartProps extends StylingProps, MaskingProps, DataTestId {\n  /**\n   * Categorical data of the chart.\n   */\n  data: PieChartData;\n  /**\n   * The width of the chart. A number or a string with accepted CSS units is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /** Exposed callback to display series actions for a slice  */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  /** Show the loading indicator when truly.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface PieChartContextConfig {\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Config for the labels of the pie chart slices.\n   */\n  labels?: LabelsConfig;\n  /**\n   * Group configuration for the pie chart.\n   * Aggregates multiple slices into a group (matches threshold config).\n   */\n  grouping?: GroupConfig;\n  /**\n   * Legend configuration for the pie chart\n   */\n  legend?: PieChartLegendConfig;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Toolbar configuration\n   */\n  toolbar?: PieChartToolbarConfig;\n  /** Callback to display series actions for a slice */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * @internal\n */\nexport type DonutChartContextConfig = PieChartContextConfig;\n\n/**\n * @public\n */\nexport interface PieChartConfiguration extends PieChartContextConfig {\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n}\n\n/**\n * @internal\n */\nexport type DonutChartConfiguration = PieChartConfiguration;\n\n// Config type holding all the required config used in the pie chart. Considers that the defaults have already been applied.\n/**\n * @internal\n */\nexport type RequiredPieChartConfiguration = Required<\n  Omit<PieChartConfiguration, 'toolbar' | 'seriesActions' | 'colorRules'>\n> & {\n  toolbar?: PieChartInternalToolbarConfig;\n  innerElement?: InnerHandler | ReactNode;\n  colorRules?: ColorRuleProps[];\n};\n\n/**\n * @internal\n */\nexport type RequiredDonutChartConfiguration = RequiredPieChartConfiguration;\n\n/**\n * @internal\n */\nexport type NotRequiredPieChartConfiguration = {\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n};\n\n/**\n * @internal\n */\nexport type NotRequiredDonutChartConfiguration =\n  NotRequiredPieChartConfiguration;\n\n/**\n * @internal\n */\nexport type PieDonutConfig = (\n  | RequiredPieChartConfiguration\n  | RequiredDonutChartConfiguration\n) &\n  (NotRequiredPieChartConfiguration | NotRequiredDonutChartConfiguration);\n\n/**\n * @public\n */\nexport type LabelTypeOptions = 'absolute' | 'relative';\n/**\n * @public\n */\nexport interface LabelsConfig {\n  /**\n   * Hides the slice labels.\n   * @defaultValue false (all the labels are displayed).\n   */\n  hidden?: boolean;\n  /**\n   * Display the label with a relative or absolute value.\n   * @defaultValue 'relative'\n   */\n  valueType?: LabelTypeOptions;\n}\n\n/**\n * @public\n */\nexport const thresholdTypeOptions = [\n  'absolute',\n  'relative',\n  'number-of-slices',\n] as const;\n/**\n * @public\n */\nexport type ThresholdType = (typeof thresholdTypeOptions)[number];\n\n/**\n * @public\n */\nexport interface ThresholdConfig {\n  /**\n   * Type of the grouping threshold. Can be \"relative\", \"absolute\" or \"number-of-slices\".\n   * @defaultValue 'relative'.\n   */\n  type: ThresholdType;\n  /**\n   * Value of the group threshold.\n   * Default is dynamically calculated depending on the chart size for relative and absolute. 10 in case of number-of-slices.\n   */\n  value: number;\n}\n\n/**\n * @public\n */\nexport interface GroupConfig {\n  /**\n   * Name of the group.\n   * @defaultValue 'Other'.\n   */\n  name?: string;\n  /**\n   * The threshold for the group.\n   */\n  threshold: ThresholdConfig;\n}\n\n/**\n * @public\n */\nexport type PieChartLegendConfig = LegendProps;\n\n/**\n * @public\n */\nexport type DonutChartData = PieChartData;\n\n/**\n * @public\n */\nexport interface DonutChartProps\n  extends StylingProps,\n    MaskingProps,\n    DataTestId {\n  /**\n   * Categorical data of the chart.\n   */\n  data: DonutChartData;\n  /**\n   * The width of the chart. A number or a string with accepted CSS units is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /** The height of the chart. If a number is passed, it will be treated as px.\n   * @defaultValue 300px.\n   */\n  height?: number | string;\n  /**\n   * Set of Color palette to be used in charts.\n   * @defaultValue 'categorical'.\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * Custom Formatter for the chart\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /** Exposed callback to display series actions for a slice  */\n  seriesActions?: (slice: SliceData) => SeriesActionsTemplate;\n  /** Show the loading indicator when truly.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport type DonutChartLegendConfig = PieChartLegendConfig;\n\n// TODO: ADES-3843 Split this type into two different ones, PieChartSlots and DonutChartSlots\n/**\n * @internal\n */\nexport interface PieChartSlots {\n  labels: Partial<LabelsConfig>;\n  grouping: Partial<GroupConfig>;\n  legend: Partial<PieChartLegendConfig>;\n  toolbar: Partial<PieChartToolbarConfig> | undefined;\n  innerElement?: InnerHandler | ReactNode;\n  colorRules: ColorRuleProps[];\n}\n\n/**\n * @internal\n */\nexport type DonutChartSlots = PieChartSlots;\n\n/**\n * @public\n */\nexport type InnerHandler = (value: InnerParams) => ReactNode;\n\n/**\n * @public\n */\nexport type InnerParams = {\n  absoluteValue: number;\n  relativeValue: number;\n  dimensions: { width: number; height: number };\n};\n"],
+  "mappings": "AA4NO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/esm/charts/pie/utils/build-group-threshold.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/build-group-threshold.ts"],
-  "sourcesContent": ["import { partition } from 'lodash-es';\n\nimport { buildSlices } from './build-slices.js';\nimport {\n  CustomColorPalette,\n  ColorPalette,\n} from '../../core/types/color-palette.js';\nimport { THRESHOLD_TYPE } from '../types/default.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\nimport {\n  ThresholdConfig,\n  SliceUnit,\n  SliceData,\n  GroupConfig,\n} from '../types/pie-chart.config.js';\n\n/**\n * Group the data depending on which threshold the user has selected\n * @param data - Data received from the dataSet\n * @param grouping - Received grouping config\n * @param colorPalette - Palette to apply to the slices.\n * @param unit - Unit of the data.\n */\nexport function buildGroupThreshold(\n  data: SliceData[],\n  grouping?: GroupConfig,\n  colorPalette?: ColorPalette | CustomColorPalette,\n  unit?: SliceUnit,\n): InternalSliceData[] {\n  const internalSlicesData = buildSlices(data, colorPalette, unit);\n\n  const threshold = grouping?.threshold;\n\n  if (threshold?.type === THRESHOLD_TYPE.NUMBER_OF_SLICES) {\n    return calculateNumberOfSlicesGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  if (threshold?.type === THRESHOLD_TYPE.RELATIVE) {\n    return calculateRelativeGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  if (threshold?.type === THRESHOLD_TYPE.ABSOLUTE) {\n    return calculateAbsoluteGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  return internalSlicesData;\n}\n\n/**\n * Calculates the groups depending on the number of the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateNumberOfSlicesGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName?: string,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n  const slicesToMerge = slicesWithValue.slice(threshold.value - 1);\n  const remainingSlices = slicesWithValue.slice(0, threshold.value - 1);\n\n  if (threshold.value === 0) {\n    return [...slicesToMerge, ...remainingSlices];\n  }\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Calculates the relative value using the threshold value and groups the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateRelativeGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName?: string,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n\n  const [slicesToMerge, remainingSlices] = partition(\n    slicesWithValue,\n    (slice) => slice.relativeValue < threshold.value,\n  );\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Calculates the absolute value using the threshold value and groups the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateAbsoluteGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName: string | undefined,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n\n  const [slicesToMerge, remainingSlices] = partition(\n    slicesWithValue,\n    (slice) => slice.value < threshold.value,\n  );\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Organize the data in different groups and recalculates colors\n * @param slicesToMerge - slices to merge into the Other category\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param groupingName - Name of the group\n * @returns An array of an internal slices.\n */\nfunction generateGroup(\n  slicesToMerge: InternalSliceData[],\n  data: InternalSliceData[],\n  groupingName?: string,\n): InternalSliceData[] {\n  const isWithoutGrouping = !slicesToMerge.length || slicesToMerge.length === 1;\n\n  if (isWithoutGrouping) {\n    return [...data, ...slicesToMerge];\n  }\n\n  // Returns the numerical value of the id of the first slice that is going to be merge\n  const groupIndexValue = slicesToMerge[0].id.split('-')[1];\n\n  const groupId = groupingName\n    ? groupingName + '-' + groupIndexValue\n    : 'other-' + groupIndexValue;\n\n  const mergedSlice = slicesToMerge.reduce(\n    (acc, curr) => ({\n      ...acc,\n      ...curr,\n      category: groupingName ?? 'Other',\n      value: acc.value + curr.value,\n      relativeValue: acc.relativeValue + curr.relativeValue,\n      color: slicesToMerge[0].color,\n      id: groupId,\n    }),\n    {\n      value: 0,\n      relativeValue: 0,\n    } as InternalSliceData,\n  );\n\n  return [...data, mergedSlice];\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;AAgBxB,SAAS,oBACd,MACA,UACA,cACA,MACqB;AACrB,QAAM,qBAAqB,YAAY,MAAM,cAAc,IAAI;AAE/D,QAAM,YAAY,UAAU;AAE5B,MAAI,WAAW,SAAS,eAAe,kBAAkB;AACvD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,SAAS,eAAe,UAAU;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,SAAS,eAAe,UAAU;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,SAAO;AACT;AASA,SAAS,gCACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAC1D,QAAM,gBAAgB,gBAAgB,MAAM,UAAU,QAAQ,CAAC;AAC/D,QAAM,kBAAkB,gBAAgB,MAAM,GAAG,UAAU,QAAQ,CAAC;AAEpE,MAAI,UAAU,UAAU,GAAG;AACzB,WAAO,CAAC,GAAG,eAAe,GAAG,eAAe;AAAA,EAC9C;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,0BACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAE1D,QAAM,CAAC,eAAe,eAAe,IAAI;AAAA,IACvC;AAAA,IACA,CAAC,UAAU,MAAM,gBAAgB,UAAU;AAAA,EAC7C;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,0BACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAE1D,QAAM,CAAC,eAAe,eAAe,IAAI;AAAA,IACvC;AAAA,IACA,CAAC,UAAU,MAAM,QAAQ,UAAU;AAAA,EACrC;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,cACP,eACA,MACA,cACqB;AACrB,QAAM,oBAAoB,CAAC,cAAc,UAAU,cAAc,WAAW;AAE5E,MAAI,mBAAmB;AACrB,WAAO,CAAC,GAAG,MAAM,GAAG,aAAa;AAAA,EACnC;AAGA,QAAM,kBAAkB,cAAc,CAAC,EAAE,GAAG,MAAM,GAAG,EAAE,CAAC;AAExD,QAAM,UAAU,eACZ,eAAe,MAAM,kBACrB,WAAW;AAEf,QAAM,cAAc,cAAc;AAAA,IAChC,CAAC,KAAK,UAAU;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MACH,UAAU,gBAAgB;AAAA,MAC1B,OAAO,IAAI,QAAQ,KAAK;AAAA,MACxB,eAAe,IAAI,gBAAgB,KAAK;AAAA,MACxC,OAAO,cAAc,CAAC,EAAE;AAAA,MACxB,IAAI;AAAA,IACN;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,SAAO,CAAC,GAAG,MAAM,WAAW;AAC9B;",
+  "sourcesContent": ["import { partition } from 'lodash-es';\n\nimport type { Unit } from '@dynatrace-sdk/units';\n\nimport { buildSlices } from './build-slices.js';\nimport {\n  CustomColorPalette,\n  ColorPalette,\n} from '../../core/types/color-palette.js';\nimport { THRESHOLD_TYPE } from '../types/default.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\nimport {\n  ThresholdConfig,\n  SliceData,\n  GroupConfig,\n} from '../types/pie-chart.config.js';\n\n/**\n * Group the data depending on which threshold the user has selected\n * @param data - Data received from the dataSet\n * @param grouping - Received grouping config\n * @param colorPalette - Palette to apply to the slices.\n * @param unit - Unit of the data.\n */\nexport function buildGroupThreshold(\n  data: SliceData[],\n  grouping?: GroupConfig,\n  colorPalette?: ColorPalette | CustomColorPalette,\n  unit?: string | Unit,\n): InternalSliceData[] {\n  const internalSlicesData = buildSlices(data, colorPalette, unit);\n\n  const threshold = grouping?.threshold;\n\n  if (threshold?.type === THRESHOLD_TYPE.NUMBER_OF_SLICES) {\n    return calculateNumberOfSlicesGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  if (threshold?.type === THRESHOLD_TYPE.RELATIVE) {\n    return calculateRelativeGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  if (threshold?.type === THRESHOLD_TYPE.ABSOLUTE) {\n    return calculateAbsoluteGrouping(\n      internalSlicesData,\n      threshold,\n      grouping?.name,\n    );\n  }\n\n  return internalSlicesData;\n}\n\n/**\n * Calculates the groups depending on the number of the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateNumberOfSlicesGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName?: string,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n  const slicesToMerge = slicesWithValue.slice(threshold.value - 1);\n  const remainingSlices = slicesWithValue.slice(0, threshold.value - 1);\n\n  if (threshold.value === 0) {\n    return [...slicesToMerge, ...remainingSlices];\n  }\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Calculates the relative value using the threshold value and groups the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateRelativeGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName?: string,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n\n  const [slicesToMerge, remainingSlices] = partition(\n    slicesWithValue,\n    (slice) => slice.relativeValue < threshold.value,\n  );\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Calculates the absolute value using the threshold value and groups the slices.\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param threshold - Indicates the way to group the slices.\n * @param groupingName - Name for the group.\n * @returns An array of an internal slices.\n */\nfunction calculateAbsoluteGrouping(\n  data: InternalSliceData[],\n  threshold: ThresholdConfig,\n  groupingName: string | undefined,\n): InternalSliceData[] {\n  const slicesWithValue = data.filter((slice) => slice.value);\n\n  const [slicesToMerge, remainingSlices] = partition(\n    slicesWithValue,\n    (slice) => slice.value < threshold.value,\n  );\n\n  return generateGroup(slicesToMerge, remainingSlices, groupingName);\n}\n\n/**\n * Organize the data in different groups and recalculates colors\n * @param slicesToMerge - slices to merge into the Other category\n * @param data - Information received from the dataset already prepared with some metadata.\n * @param groupingName - Name of the group\n * @returns An array of an internal slices.\n */\nfunction generateGroup(\n  slicesToMerge: InternalSliceData[],\n  data: InternalSliceData[],\n  groupingName?: string,\n): InternalSliceData[] {\n  const isWithoutGrouping = !slicesToMerge.length || slicesToMerge.length === 1;\n\n  if (isWithoutGrouping) {\n    return [...data, ...slicesToMerge];\n  }\n\n  // Returns the numerical value of the id of the first slice that is going to be merge\n  const groupIndexValue = slicesToMerge[0].id.split('-')[1];\n\n  const groupId = groupingName\n    ? groupingName + '-' + groupIndexValue\n    : 'other-' + groupIndexValue;\n\n  const mergedSlice = slicesToMerge.reduce(\n    (acc, curr) => ({\n      ...acc,\n      ...curr,\n      category: groupingName ?? 'Other',\n      value: acc.value + curr.value,\n      relativeValue: acc.relativeValue + curr.relativeValue,\n      color: slicesToMerge[0].color,\n      id: groupId,\n    }),\n    {\n      value: 0,\n      relativeValue: 0,\n    } as InternalSliceData,\n  );\n\n  return [...data, mergedSlice];\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAI1B,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;AAexB,SAAS,oBACd,MACA,UACA,cACA,MACqB;AACrB,QAAM,qBAAqB,YAAY,MAAM,cAAc,IAAI;AAE/D,QAAM,YAAY,UAAU;AAE5B,MAAI,WAAW,SAAS,eAAe,kBAAkB;AACvD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,SAAS,eAAe,UAAU;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,MAAI,WAAW,SAAS,eAAe,UAAU;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,EACF;AAEA,SAAO;AACT;AASA,SAAS,gCACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAC1D,QAAM,gBAAgB,gBAAgB,MAAM,UAAU,QAAQ,CAAC;AAC/D,QAAM,kBAAkB,gBAAgB,MAAM,GAAG,UAAU,QAAQ,CAAC;AAEpE,MAAI,UAAU,UAAU,GAAG;AACzB,WAAO,CAAC,GAAG,eAAe,GAAG,eAAe;AAAA,EAC9C;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,0BACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAE1D,QAAM,CAAC,eAAe,eAAe,IAAI;AAAA,IACvC;AAAA,IACA,CAAC,UAAU,MAAM,gBAAgB,UAAU;AAAA,EAC7C;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,0BACP,MACA,WACA,cACqB;AACrB,QAAM,kBAAkB,KAAK,OAAO,CAAC,UAAU,MAAM,KAAK;AAE1D,QAAM,CAAC,eAAe,eAAe,IAAI;AAAA,IACvC;AAAA,IACA,CAAC,UAAU,MAAM,QAAQ,UAAU;AAAA,EACrC;AAEA,SAAO,cAAc,eAAe,iBAAiB,YAAY;AACnE;AASA,SAAS,cACP,eACA,MACA,cACqB;AACrB,QAAM,oBAAoB,CAAC,cAAc,UAAU,cAAc,WAAW;AAE5E,MAAI,mBAAmB;AACrB,WAAO,CAAC,GAAG,MAAM,GAAG,aAAa;AAAA,EACnC;AAGA,QAAM,kBAAkB,cAAc,CAAC,EAAE,GAAG,MAAM,GAAG,EAAE,CAAC;AAExD,QAAM,UAAU,eACZ,eAAe,MAAM,kBACrB,WAAW;AAEf,QAAM,cAAc,cAAc;AAAA,IAChC,CAAC,KAAK,UAAU;AAAA,MACd,GAAG;AAAA,MACH,GAAG;AAAA,MACH,UAAU,gBAAgB;AAAA,MAC1B,OAAO,IAAI,QAAQ,KAAK;AAAA,MACxB,eAAe,IAAI,gBAAgB,KAAK;AAAA,MACxC,OAAO,cAAc,CAAC,EAAE;AAAA,MACxB,IAAI;AAAA,IACN;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,eAAe;AAAA,IACjB;AAAA,EACF;AAEA,SAAO,CAAC,GAAG,MAAM,WAAW;AAC9B;",
   "names": []
 }

package/esm/charts/pie/utils/build-label.js

@@ -1,8 +1,11 @@
 import { labelPosition } from "./label-position.js";
-import { getTextHeight as _getTextHeight, getTextWidth as _getTextWidth } from "../../../typography/utils.js";
-import { ITEM_FONT_STYLES } from "../../core/components/legend/range/constants.js";
-import { isInHorizontalBounds } from "../../core/utils/is-in-horizontal-bounds.js";
-import { truncateText } from "../../core/utils/text-truncation.js";
+import { ELLIPSIS_CHARACTER } from "../../../typography/utils.js";
+import { charsFontWidth12pixelsSize400Map } from "../../core/components/text-ellipsis/chars-font-width-map.js";
+import {
+  calculateWidth,
+  TEXT_HEIGHT,
+  truncateString
+} from "../../core/components/text-ellipsis/truncate-string.js";
 import { LABEL_TYPE_OPTION } from "../constants.js";
 const buildLabel = (arc, path, valueType, formatter, truncationMode, leftCenter) => {
   const outerRadius = path.outerRadius()(arc);
@@ -15,23 +18,17 @@ const buildLabel = (arc, path, valueType, formatter, truncationMode, leftCenter)
     centroidY
   });
   const formattedLabelText = formatLabelText(valueType, formatter, arc.data);
-  const labelText = truncateText(
+  const availableWidth = leftCenter - Math.abs(labelX);
+  const truncated = availableWidth > 0 ? truncateString(
     formattedLabelText,
+    availableWidth,
+    charsFontWidth12pixelsSize400Map,
     truncationMode,
-    (truncatedText) => {
-      const { boxX, boxWidth } = getHorizontalMeasurements(
-        truncatedText,
-        labelX
-      );
-      return isInHorizontalBounds(boxX, boxWidth, leftCenter);
-    }
-  );
+    "start"
+  ) : "";
+  const labelText = truncated === ELLIPSIS_CHARACTER ? "" : truncated;
   const horizontalMeasurements = getHorizontalMeasurements(labelText, labelX);
-  const verticalMeasurements = getVerticalMeasurements(
-    labelX,
-    labelText,
-    labelY
-  );
+  const verticalMeasurements = getVerticalMeasurements(labelText, labelY);
   return {
     ...horizontalMeasurements,
     ...verticalMeasurements,
@@ -43,18 +40,18 @@ const formatLabelText = (valueType, formatter, data) => {
   return labelText.trim();
 };
 const getHorizontalMeasurements = (labelText, labelX) => {
-  const boxWidth = _getTextWidth(labelText, ITEM_FONT_STYLES);
+  const boxWidth = Math.ceil(
+    calculateWidth(labelText, charsFontWidth12pixelsSize400Map)
+  );
   const textX = labelX + (labelX > 0 ? boxWidth / 2 : -boxWidth / 2);
   const boxX = textX - boxWidth / 2;
   return { boxX, boxWidth, textX };
 };
-const getVerticalMeasurements = (labelX, labelText, labelY) => {
-  const labelTextHeight = _getTextHeight(
-    labelX >= 0 ? labelText[0] : labelText[labelText.length - 1],
-    ITEM_FONT_STYLES
-  );
-  const textY = labelY + (labelY > 0 ? labelTextHeight : 0);
-  const boxHeight = _getTextHeight(labelText, ITEM_FONT_STYLES);
+const GLYPH_HEIGHT_RATIO = 5 / 6;
+const TEXT_BOUNDING_BOX_HEIGHT = Math.round(TEXT_HEIGHT * GLYPH_HEIGHT_RATIO);
+const getVerticalMeasurements = (text, labelY) => {
+  const boxHeight = text ? TEXT_BOUNDING_BOX_HEIGHT : 0;
+  const textY = labelY + (labelY > 0 ? boxHeight : 0);
   const boxY = textY - boxHeight;
   return { boxY, boxHeight, textY };
 };

package/esm/charts/pie/utils/build-label.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/build-label.ts"],
-  "sourcesContent": ["import type { Arc, PieArcDatum } from 'd3-shape';\n\nimport { labelPosition } from './label-position.js';\nimport { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { getTextHeight as _getTextHeight, getTextWidth as _getTextWidth } from '../../../typography/utils.js';\nimport { ITEM_FONT_STYLES } from '../../core/components/legend/range/constants.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { isInHorizontalBounds } from '../../core/utils/is-in-horizontal-bounds.js';\nimport { truncateText } from '../../core/utils/text-truncation.js';\nimport { LABEL_TYPE_OPTION } from '../constants.js';\nimport type {\n  InternalLabel,\n  InternalSliceData,\n} from '../types/internal/pie-chart.js';\nimport type { LabelTypeOptions } from '../types/pie-chart.config.js';\n\nexport const buildLabel = (\n  arc: PieArcDatum<InternalSliceData>,\n  path: Arc<unknown, PieArcDatum<InternalSliceData>>,\n  valueType: LabelTypeOptions | undefined,\n  formatter: Formatter,\n  truncationMode: TruncationMode,\n  leftCenter: number,\n): InternalLabel => {\n  const outerRadius = path.outerRadius()(arc);\n  const innerRadius = path.innerRadius()(arc);\n  const [centroidX, centroidY] = path.centroid(arc);\n\n  const { labelX, labelY } = labelPosition({\n    outerRadius,\n    innerRadius,\n    centroidX,\n    centroidY,\n  });\n\n  const formattedLabelText = formatLabelText(valueType, formatter, arc.data);\n  const labelText = truncateText(\n    formattedLabelText,\n    truncationMode,\n    (truncatedText: string) => {\n      const { boxX, boxWidth } = getHorizontalMeasurements(\n        truncatedText,\n        labelX,\n      );\n      return isInHorizontalBounds(boxX, boxWidth, leftCenter);\n    },\n  );\n\n  const horizontalMeasurements = getHorizontalMeasurements(labelText, labelX);\n  const verticalMeasurements = getVerticalMeasurements(\n    labelX,\n    labelText,\n    labelY,\n  );\n\n  return {\n    ...horizontalMeasurements,\n    ...verticalMeasurements,\n    text: labelText,\n  };\n};\n\nconst formatLabelText = (\n  valueType: string | undefined,\n  formatter: Formatter,\n  data: InternalSliceData,\n): string => {\n  const labelText =\n    valueType === LABEL_TYPE_OPTION.Absolute\n      ? formatter(data.value)\n      : `${data.relativeValue.toFixed(0)}%`;\n\n  return labelText.trim();\n};\n\nconst getHorizontalMeasurements = (labelText: string, labelX: number) => {\n  const boxWidth = _getTextWidth(labelText, ITEM_FONT_STYLES);\n  const textX = labelX + (labelX > 0 ? boxWidth / 2 : -boxWidth / 2);\n  const boxX = textX - boxWidth / 2;\n\n  return { boxX, boxWidth, textX };\n};\n\nconst getVerticalMeasurements = (\n  labelX: number,\n  labelText: string,\n  labelY: number,\n) => {\n  const labelTextHeight = _getTextHeight(\n    labelX >= 0 ? labelText[0] : labelText[labelText.length - 1],\n    ITEM_FONT_STYLES,\n  );\n  const textY = labelY + (labelY > 0 ? labelTextHeight : 0);\n  const boxHeight = _getTextHeight(labelText, ITEM_FONT_STYLES);\n  const boxY = textY - boxHeight;\n\n  return { boxY, boxHeight, textY };\n};\n"],
-  "mappings": "AAEA,SAAS,qBAAqB;AAE9B,SAAS,iBAAiB,gBAAgB,gBAAgB,qBAAqB;AAC/E,SAAS,wBAAwB;AAEjC,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAO3B,MAAM,aAAa,CACxB,KACA,MACA,WACA,WACA,gBACA,eACkB;AAClB,QAAM,cAAc,KAAK,YAAY,EAAE,GAAG;AAC1C,QAAM,cAAc,KAAK,YAAY,EAAE,GAAG;AAC1C,QAAM,CAAC,WAAW,SAAS,IAAI,KAAK,SAAS,GAAG;AAEhD,QAAM,EAAE,QAAQ,OAAO,IAAI,cAAc;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,qBAAqB,gBAAgB,WAAW,WAAW,IAAI,IAAI;AACzE,QAAM,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,CAAC,kBAA0B;AACzB,YAAM,EAAE,MAAM,SAAS,IAAI;AAAA,QACzB;AAAA,QACA;AAAA,MACF;AACA,aAAO,qBAAqB,MAAM,UAAU,UAAU;AAAA,IACxD;AAAA,EACF;AAEA,QAAM,yBAAyB,0BAA0B,WAAW,MAAM;AAC1E,QAAM,uBAAuB;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,EACR;AACF;AAEA,MAAM,kBAAkB,CACtB,WACA,WACA,SACW;AACX,QAAM,YACJ,cAAc,kBAAkB,WAC5B,UAAU,KAAK,KAAK,IACpB,GAAG,KAAK,cAAc,QAAQ,CAAC,CAAC;AAEtC,SAAO,UAAU,KAAK;AACxB;AAEA,MAAM,4BAA4B,CAAC,WAAmB,WAAmB;AACvE,QAAM,WAAW,cAAc,WAAW,gBAAgB;AAC1D,QAAM,QAAQ,UAAU,SAAS,IAAI,WAAW,IAAI,CAAC,WAAW;AAChE,QAAM,OAAO,QAAQ,WAAW;AAEhC,SAAO,EAAE,MAAM,UAAU,MAAM;AACjC;AAEA,MAAM,0BAA0B,CAC9B,QACA,WACA,WACG;AACH,QAAM,kBAAkB;AAAA,IACtB,UAAU,IAAI,UAAU,CAAC,IAAI,UAAU,UAAU,SAAS,CAAC;AAAA,IAC3D;AAAA,EACF;AACA,QAAM,QAAQ,UAAU,SAAS,IAAI,kBAAkB;AACvD,QAAM,YAAY,eAAe,WAAW,gBAAgB;AAC5D,QAAM,OAAO,QAAQ;AAErB,SAAO,EAAE,MAAM,WAAW,MAAM;AAClC;",
+  "sourcesContent": ["import type { Arc, PieArcDatum } from 'd3-shape';\n\nimport { labelPosition } from './label-position.js';\nimport { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER } from '../../../typography/utils.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../core/components/text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  TEXT_HEIGHT,\n  truncateString,\n} from '../../core/components/text-ellipsis/truncate-string.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport { LABEL_TYPE_OPTION } from '../constants.js';\nimport type {\n  InternalLabel,\n  InternalSliceData,\n} from '../types/internal/pie-chart.js';\nimport type { LabelTypeOptions } from '../types/pie-chart.config.js';\n\nexport const buildLabel = (\n  arc: PieArcDatum<InternalSliceData>,\n  path: Arc<unknown, PieArcDatum<InternalSliceData>>,\n  valueType: LabelTypeOptions | undefined,\n  formatter: Formatter,\n  truncationMode: TruncationMode,\n  leftCenter: number,\n): InternalLabel => {\n  const outerRadius = path.outerRadius()(arc);\n  const innerRadius = path.innerRadius()(arc);\n  const [centroidX, centroidY] = path.centroid(arc);\n\n  const { labelX, labelY } = labelPosition({\n    outerRadius,\n    innerRadius,\n    centroidX,\n    centroidY,\n  });\n\n  const formattedLabelText = formatLabelText(valueType, formatter, arc.data);\n\n  const availableWidth = leftCenter - Math.abs(labelX);\n  const truncated =\n    availableWidth > 0\n      ? truncateString(\n          formattedLabelText,\n          availableWidth,\n          charsFontWidth12pixelsSize400Map,\n          truncationMode,\n          'start',\n        )\n      : '';\n  const labelText = truncated === ELLIPSIS_CHARACTER ? '' : truncated;\n\n  const horizontalMeasurements = getHorizontalMeasurements(labelText, labelX);\n  const verticalMeasurements = getVerticalMeasurements(labelText, labelY);\n\n  return {\n    ...horizontalMeasurements,\n    ...verticalMeasurements,\n    text: labelText,\n  };\n};\n\nconst formatLabelText = (\n  valueType: string | undefined,\n  formatter: Formatter,\n  data: InternalSliceData,\n): string => {\n  const labelText =\n    valueType === LABEL_TYPE_OPTION.Absolute\n      ? formatter(data.value)\n      : `${data.relativeValue.toFixed(0)}%`;\n\n  return labelText.trim();\n};\n\nconst getHorizontalMeasurements = (labelText: string, labelX: number) => {\n  const boxWidth = Math.ceil(\n    calculateWidth(labelText, charsFontWidth12pixelsSize400Map),\n  );\n  const textX = labelX + (labelX > 0 ? boxWidth / 2 : -boxWidth / 2);\n  const boxX = textX - boxWidth / 2;\n\n  return { boxX, boxWidth, textX };\n};\n\n/**\n * Ratio of the visible glyph bounding-box (cap-height + baseline)\n * to the full em-square for the label font (Roboto/DynatraceFlow 12 px).\n * cap-height \u2248 10 px\n */\nconst GLYPH_HEIGHT_RATIO = 5 / 6;\nconst TEXT_BOUNDING_BOX_HEIGHT = Math.round(TEXT_HEIGHT * GLYPH_HEIGHT_RATIO);\n\nconst getVerticalMeasurements = (text: string, labelY: number) => {\n  const boxHeight = text ? TEXT_BOUNDING_BOX_HEIGHT : 0;\n  const textY = labelY + (labelY > 0 ? boxHeight : 0);\n  const boxY = textY - boxHeight;\n\n  return { boxY, boxHeight, textY };\n};\n"],
+  "mappings": "AAEA,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,wCAAwC;AACjD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAO3B,MAAM,aAAa,CACxB,KACA,MACA,WACA,WACA,gBACA,eACkB;AAClB,QAAM,cAAc,KAAK,YAAY,EAAE,GAAG;AAC1C,QAAM,cAAc,KAAK,YAAY,EAAE,GAAG;AAC1C,QAAM,CAAC,WAAW,SAAS,IAAI,KAAK,SAAS,GAAG;AAEhD,QAAM,EAAE,QAAQ,OAAO,IAAI,cAAc;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,qBAAqB,gBAAgB,WAAW,WAAW,IAAI,IAAI;AAEzE,QAAM,iBAAiB,aAAa,KAAK,IAAI,MAAM;AACnD,QAAM,YACJ,iBAAiB,IACb;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IACA;AACN,QAAM,YAAY,cAAc,qBAAqB,KAAK;AAE1D,QAAM,yBAAyB,0BAA0B,WAAW,MAAM;AAC1E,QAAM,uBAAuB,wBAAwB,WAAW,MAAM;AAEtE,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,IACH,MAAM;AAAA,EACR;AACF;AAEA,MAAM,kBAAkB,CACtB,WACA,WACA,SACW;AACX,QAAM,YACJ,cAAc,kBAAkB,WAC5B,UAAU,KAAK,KAAK,IACpB,GAAG,KAAK,cAAc,QAAQ,CAAC,CAAC;AAEtC,SAAO,UAAU,KAAK;AACxB;AAEA,MAAM,4BAA4B,CAAC,WAAmB,WAAmB;AACvE,QAAM,WAAW,KAAK;AAAA,IACpB,eAAe,WAAW,gCAAgC;AAAA,EAC5D;AACA,QAAM,QAAQ,UAAU,SAAS,IAAI,WAAW,IAAI,CAAC,WAAW;AAChE,QAAM,OAAO,QAAQ,WAAW;AAEhC,SAAO,EAAE,MAAM,UAAU,MAAM;AACjC;AAOA,MAAM,qBAAqB,IAAI;AAC/B,MAAM,2BAA2B,KAAK,MAAM,cAAc,kBAAkB;AAE5E,MAAM,0BAA0B,CAAC,MAAc,WAAmB;AAChE,QAAM,YAAY,OAAO,2BAA2B;AACpD,QAAM,QAAQ,UAAU,SAAS,IAAI,YAAY;AACjD,QAAM,OAAO,QAAQ;AAErB,SAAO,EAAE,MAAM,WAAW,MAAM;AAClC;",
   "names": []
 }

package/esm/charts/pie/utils/build-slices.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/build-slices.ts"],
-  "sourcesContent": ["import {\n  CustomColorPalette,\n  ColorPalette,\n} from '../../core/types/color-palette.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\nimport { SliceUnit, SliceData } from '../types/pie-chart.config.js';\nimport { getSlicePercentage } from '../utils/plot-data.utils.js';\n\nconst DEFAULT_COLOR_PALETTE = 'categorical';\n\n/**\n * Builds the slices and their configurations for the pie and donut chart.\n * @param data - Data received from the dataSet.\n * @param colorPalette - Color to apply to the slices.\n * @returns An array of internal slices.\n */\nexport const buildSlices = (\n  data: SliceData[],\n  colorPalette?: ColorPalette | CustomColorPalette,\n  unit?: SliceUnit,\n): InternalSliceData[] => {\n  const totalAbsoluteValueSum = Object.values(data).reduce(\n    (total, { value }) => total + Math.abs(value),\n    0,\n  );\n\n  return data.map((slice, index) => {\n    const assignedPaletteColor = getColorPalette(\n      slice.category,\n      index,\n      colorPalette ?? DEFAULT_COLOR_PALETTE,\n    );\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const priorityColor = slice.color && { Default: slice.color };\n\n    return {\n      ...slice,\n      id: `${slice.category}-${index}`,\n      relativeValue: getSlicePercentage(slice.value, totalAbsoluteValueSum),\n      color: priorityColor || assignedPaletteColor,\n      _priorityColor: priorityColor || undefined,\n      unit,\n    };\n  });\n};\n"],
-  "mappings": "AAIA,SAAS,uBAAuB;AAGhC,SAAS,0BAA0B;AAEnC,MAAM,wBAAwB;AAQvB,MAAM,cAAc,CACzB,MACA,cACA,SACwB;AACxB,QAAM,wBAAwB,OAAO,OAAO,IAAI,EAAE;AAAA,IAChD,CAAC,OAAO,EAAE,MAAM,MAAM,QAAQ,KAAK,IAAI,KAAK;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,KAAK,IAAI,CAAC,OAAO,UAAU;AAChC,UAAM,uBAAuB;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,IAClB;AAEA,UAAM,gBAAgB,MAAM,SAAS,EAAE,SAAS,MAAM,MAAM;AAE5D,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI,GAAG,MAAM,QAAQ,IAAI,KAAK;AAAA,MAC9B,eAAe,mBAAmB,MAAM,OAAO,qBAAqB;AAAA,MACpE,OAAO,iBAAiB;AAAA,MACxB,gBAAgB,iBAAiB;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
+  "sourcesContent": ["import { type Unit } from '@dynatrace-sdk/units';\n\nimport {\n  CustomColorPalette,\n  ColorPalette,\n} from '../../core/types/color-palette.js';\nimport { getColorPalette } from '../../core/utils/get-color-palette.js';\nimport { InternalSliceData } from '../types/internal/pie-chart.js';\nimport { SliceData } from '../types/pie-chart.config.js';\nimport { getSlicePercentage } from '../utils/plot-data.utils.js';\n\nconst DEFAULT_COLOR_PALETTE = 'categorical';\n\n/**\n * Builds the slices and their configurations for the pie and donut chart.\n * @param data - Data received from the dataSet.\n * @param colorPalette - Color to apply to the slices.\n * @returns An array of internal slices.\n */\nexport const buildSlices = (\n  data: SliceData[],\n  colorPalette?: ColorPalette | CustomColorPalette,\n  unit?: string | Unit,\n): InternalSliceData[] => {\n  const totalAbsoluteValueSum = Object.values(data).reduce(\n    (total, { value }) => total + Math.abs(value),\n    0,\n  );\n\n  return data.map((slice, index) => {\n    const assignedPaletteColor = getColorPalette(\n      slice.category,\n      index,\n      colorPalette ?? DEFAULT_COLOR_PALETTE,\n    );\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const priorityColor = slice.color && { Default: slice.color };\n\n    return {\n      ...slice,\n      id: `${slice.category}-${index}`,\n      relativeValue: getSlicePercentage(slice.value, totalAbsoluteValueSum),\n      color: priorityColor || assignedPaletteColor,\n      _priorityColor: priorityColor || undefined,\n      unit,\n    };\n  });\n};\n"],
+  "mappings": "AAMA,SAAS,uBAAuB;AAGhC,SAAS,0BAA0B;AAEnC,MAAM,wBAAwB;AAQvB,MAAM,cAAc,CACzB,MACA,cACA,SACwB;AACxB,QAAM,wBAAwB,OAAO,OAAO,IAAI,EAAE;AAAA,IAChD,CAAC,OAAO,EAAE,MAAM,MAAM,QAAQ,KAAK,IAAI,KAAK;AAAA,IAC5C;AAAA,EACF;AAEA,SAAO,KAAK,IAAI,CAAC,OAAO,UAAU;AAChC,UAAM,uBAAuB;AAAA,MAC3B,MAAM;AAAA,MACN;AAAA,MACA,gBAAgB;AAAA,IAClB;AAEA,UAAM,gBAAgB,MAAM,SAAS,EAAE,SAAS,MAAM,MAAM;AAE5D,WAAO;AAAA,MACL,GAAG;AAAA,MACH,IAAI,GAAG,MAAM,QAAQ,IAAI,KAAK;AAAA,MAC9B,eAAe,mBAAmB,MAAM,OAAO,qBAAqB;AAAA,MACpE,OAAO,iBAAiB;AAAA,MACxB,gBAAgB,iBAAiB;AAAA,MACjC;AAAA,IACF;AAAA,EACF,CAAC;AACH;",
   "names": []
 }

package/esm/charts/single-value/SingleValue.css

@@ -1,4 +1,4 @@
-._1sfgzlg0-3-0-1 {
+._1sfgzlg0-3-1-1 {
   height: inherit;
   width: inherit;
 }

package/esm/charts/single-value/SingleValue.js

@@ -13,6 +13,7 @@ import { Toolbar } from "./slots/Toolbar.js";
 import { Trend } from "./slots/Trend.js";
 import { iterateSlots } from "./utils/iterate-slots.js";
 import { normalizeConfig } from "./utils/single-value-config.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { getChartStatesTemplates } from "../core/components/chart-states/utils/get-chart-states-template.js";
@@ -39,6 +40,7 @@ const SingleValueRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     applyThresholdBackground,
     ...restProps
   } = props;
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
   const { slots, sparklineChildren } = iterateSlots(children);
   const { emptyState, errorState } = getChartStatesTemplates(children);
   const config = useSingleValueConfig(restProps, slots);
@@ -69,6 +71,7 @@ const SingleValueRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...behavioralTrackingProps,
       role: "img",
       className: clsx(container, customerClassNames),
       style: mergedStyle,

package/esm/charts/single-value/SingleValue.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/single-value/SingleValue.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { SINGLE_VALUE_ARIA_LABEL } from './defaults.js';\nimport { useSingleValueConfig } from './hooks/use-single-value-config.js';\nimport { container } from './SingleValue.sty.js';\nimport { Sparkline } from './slots/Sparkline.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Trend } from './slots/Trend.js';\nimport type { SingleValueRef } from './types/single-value-ref.js';\nimport type { SingleValueProps } from './types/single-value.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { normalizeConfig } from './utils/single-value-config.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { SingleValueRenderer } from '../core/components/single-value-renderer/SingleValueRenderer.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\nconst COMPONENT_NAME = 'SingleValue';\n\n/**\n * Single Value component\n */\nconst SingleValueRoot = /* @__PURE__ */ forwardRef<\n  SingleValueRef,\n  PropsWithChildren<SingleValueProps>\n>((props, forwardedRef) => {\n  const {\n    data,\n    prefixIcon,\n    children,\n    loading = false,\n    width,\n    height,\n    style: customerStyle,\n    className: customerClassNames,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    applyThresholdBackground,\n    ...restProps\n  } = props;\n  const { slots, sparklineChildren } = iterateSlots(children);\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const config = useSingleValueConfig(restProps, slots);\n\n  const sparklineProps = slots.sparkline\n    ? {\n        data: slots.sparkline?.data ?? [],\n        ...config.sparkline,\n      }\n    : undefined;\n  const singleValueRef = useRef<HTMLDivElement>(null);\n\n  const ref = useMergeRefs<SingleValueRef | HTMLDivElement>([\n    forwardedRef,\n    singleValueRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    getConfig: () => {\n      return JSON.stringify({\n        type: ChartType.SingleValue,\n        ...normalizeConfig(config),\n      });\n    },\n  }));\n\n  const chartWidth = coerceSizeValue(width);\n  const chartHeight = coerceSizeValue(height);\n\n  const mergedStyle = {\n    ...customerStyle,\n    ...(chartWidth && { width: chartWidth }),\n    ...(chartHeight && { height: chartHeight }),\n  };\n\n  return (\n    <div\n      role=\"img\"\n      className={clsx(container, customerClassNames)}\n      style={mergedStyle}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={COMPONENT_NAME}\n      ref={ref}\n      aria-label={SINGLE_VALUE_ARIA_LABEL}\n    >\n      <SingleValueRenderer\n        data={data}\n        prefixIcon={prefixIcon}\n        {...config}\n        sparklineProps={sparklineProps}\n        sparklineChildren={sparklineChildren}\n        trendProps={slots.trend}\n        emptyState={emptyState}\n        errorState={errorState}\n        loading={loading}\n        applyThresholdBackground={applyThresholdBackground}\n      >\n        {children}\n      </SingleValueRenderer>\n    </div>\n  );\n});\n\n(\n  SingleValueRoot as typeof SingleValueRoot & { displayName: string }\n).displayName = 'SingleValue';\n\n/**\n * The `SingleValue` is a simple and concise representation of a single data point\n * or metric , which can either be a text or a number.\n * @public\n */\nexport const SingleValue = Object.assign(SingleValueRoot, {\n  Sparkline,\n  Trend,\n  ColorRule,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  Intent,\n  Toolbar,\n});\n"],
-  "mappings": "AAqGM;AArGN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AACrC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,aAAa;AAGtB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB;AAKvB,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,OAAO,kBAAkB,IAAI,aAAa,QAAQ;AAE1D,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,QAAQ;AAEnE,QAAM,SAAS,qBAAqB,WAAW,KAAK;AAEpD,QAAM,iBAAiB,MAAM,YACzB;AAAA,IACE,MAAM,MAAM,WAAW,QAAQ,CAAC;AAAA,IAChC,GAAG,OAAO;AAAA,EACZ,IACA;AACJ,QAAM,iBAAiB,OAAuB,IAAI;AAElD,QAAM,MAAM,aAA8C;AAAA,IACxD;AAAA,IACA;AAAA,EACF,CAAC;AAED,sBAAoB,cAAc,OAAO;AAAA,IACvC,WAAW,MAAM;AACf,aAAO,KAAK,UAAU;AAAA,QACpB,MAAM,UAAU;AAAA,QAChB,GAAG,gBAAgB,MAAM;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF,EAAE;AAEF,QAAM,aAAa,gBAAgB,KAAK;AACxC,QAAM,cAAc,gBAAgB,MAAM;AAE1C,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAI,cAAc,EAAE,OAAO,WAAW;AAAA,IACtC,GAAI,eAAe,EAAE,QAAQ,YAAY;AAAA,EAC3C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,KAAK,WAAW,kBAAkB;AAAA,MAC7C,OAAO;AAAA,MACP,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MACnB;AAAA,MACA,cAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA,YAAY,MAAM;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,gBACA,cAAc;AAOT,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AACF,CAAC;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { SINGLE_VALUE_ARIA_LABEL } from './defaults.js';\nimport { useSingleValueConfig } from './hooks/use-single-value-config.js';\nimport { container } from './SingleValue.sty.js';\nimport { Sparkline } from './slots/Sparkline.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Trend } from './slots/Trend.js';\nimport type { SingleValueRef } from './types/single-value-ref.js';\nimport type { SingleValueProps } from './types/single-value.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { normalizeConfig } from './utils/single-value-config.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { SingleValueRenderer } from '../core/components/single-value-renderer/SingleValueRenderer.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\nconst COMPONENT_NAME = 'SingleValue';\n\n/**\n * Single Value component\n */\nconst SingleValueRoot = /* @__PURE__ */ forwardRef<\n  SingleValueRef,\n  PropsWithChildren<SingleValueProps>\n>((props, forwardedRef) => {\n  const {\n    data,\n    prefixIcon,\n    children,\n    loading = false,\n    width,\n    height,\n    style: customerStyle,\n    className: customerClassNames,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    applyThresholdBackground,\n    ...restProps\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const { slots, sparklineChildren } = iterateSlots(children);\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const config = useSingleValueConfig(restProps, slots);\n\n  const sparklineProps = slots.sparkline\n    ? {\n        data: slots.sparkline?.data ?? [],\n        ...config.sparkline,\n      }\n    : undefined;\n  const singleValueRef = useRef<HTMLDivElement>(null);\n\n  const ref = useMergeRefs<SingleValueRef | HTMLDivElement>([\n    forwardedRef,\n    singleValueRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    getConfig: () => {\n      return JSON.stringify({\n        type: ChartType.SingleValue,\n        ...normalizeConfig(config),\n      });\n    },\n  }));\n\n  const chartWidth = coerceSizeValue(width);\n  const chartHeight = coerceSizeValue(height);\n\n  const mergedStyle = {\n    ...customerStyle,\n    ...(chartWidth && { width: chartWidth }),\n    ...(chartHeight && { height: chartHeight }),\n  };\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      role=\"img\"\n      className={clsx(container, customerClassNames)}\n      style={mergedStyle}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={COMPONENT_NAME}\n      ref={ref}\n      aria-label={SINGLE_VALUE_ARIA_LABEL}\n    >\n      <SingleValueRenderer\n        data={data}\n        prefixIcon={prefixIcon}\n        {...config}\n        sparklineProps={sparklineProps}\n        sparklineChildren={sparklineChildren}\n        trendProps={slots.trend}\n        emptyState={emptyState}\n        errorState={errorState}\n        loading={loading}\n        applyThresholdBackground={applyThresholdBackground}\n      >\n        {children}\n      </SingleValueRenderer>\n    </div>\n  );\n});\n\n(\n  SingleValueRoot as typeof SingleValueRoot & { displayName: string }\n).displayName = 'SingleValue';\n\n/**\n * The `SingleValue` is a simple and concise representation of a single data point\n * or metric , which can either be a text or a number.\n * @public\n */\nexport const SingleValue = Object.assign(SingleValueRoot, {\n  Sparkline,\n  Trend,\n  ColorRule,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  Intent,\n  Toolbar,\n});\n"],
+  "mappings": "AA0GM;AA1GN,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AACrC,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,aAAa;AAGtB,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAEhC,MAAM,iBAAiB;AAKvB,MAAM,kBAAkC,2BAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,KAAK;AAElE,QAAM,EAAE,OAAO,kBAAkB,IAAI,aAAa,QAAQ;AAE1D,QAAM,EAAE,YAAY,WAAW,IAAI,wBAAwB,QAAQ;AAEnE,QAAM,SAAS,qBAAqB,WAAW,KAAK;AAEpD,QAAM,iBAAiB,MAAM,YACzB;AAAA,IACE,MAAM,MAAM,WAAW,QAAQ,CAAC;AAAA,IAChC,GAAG,OAAO;AAAA,EACZ,IACA;AACJ,QAAM,iBAAiB,OAAuB,IAAI;AAElD,QAAM,MAAM,aAA8C;AAAA,IACxD;AAAA,IACA;AAAA,EACF,CAAC;AAED,sBAAoB,cAAc,OAAO;AAAA,IACvC,WAAW,MAAM;AACf,aAAO,KAAK,UAAU;AAAA,QACpB,MAAM,UAAU;AAAA,QAChB,GAAG,gBAAgB,MAAM;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF,EAAE;AAEF,QAAM,aAAa,gBAAgB,KAAK;AACxC,QAAM,cAAc,gBAAgB,MAAM;AAE1C,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAI,cAAc,EAAE,OAAO,WAAW;AAAA,IACtC,GAAI,eAAe,EAAE,QAAQ,YAAY;AAAA,EAC3C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,WAAW,KAAK,WAAW,kBAAkB;AAAA,MAC7C,OAAO;AAAA,MACP,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACb,qBAAmB;AAAA,MACnB;AAAA,MACA,cAAY;AAAA,MAEZ;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACC,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA,YAAY,MAAM;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,gBACA,cAAc;AAOT,MAAM,cAAc,OAAO,OAAO,iBAAiB;AAAA,EACxD;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/esm/charts/single-value/SingleValue.sty.js

@@ -1,5 +1,5 @@
 import "./SingleValue.css";
-var container = "_1sfgzlg0-3-0-1";
+var container = "_1sfgzlg0-3-1-1";
 export {
   container
 };

package/esm/charts/single-value/SingleValue.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/single-value/SingleValue.css.ts"],
-  "sourcesContent": ["import './SingleValue.css';\nexport var container = '_1sfgzlg0-3-0-1';"],
+  "sourcesContent": ["import './SingleValue.css';\nexport var container = '_1sfgzlg0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/single-value-grid/SingleValueGrid.css

@@ -1,7 +1,7 @@
-._1mx9zjb0-3-0-1 {
+._1mx9zjb0-3-1-1 {
   height: 100%;
   width: 100%;
 }
-._1mx9zjb0-3-0-1 > div {
+._1mx9zjb0-3-1-1 > div {
   overflow: hidden;
 }

package/esm/charts/single-value-grid/SingleValueGrid.js

@@ -12,6 +12,7 @@ import { Trend } from "./slots/Trend.js";
 import { Value } from "./slots/Value.js";
 import { calculateGridLayout } from "./utils/calculate-grid-layout.js";
 import { iterateSlots } from "./utils/iterate-slots.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { Grid } from "../../layouts/grid/Grid.js";
@@ -37,6 +38,7 @@ const SingleValueGridRoot = (props) => {
     seriesActions: individualSeriesActions,
     ...gridConfig
   } = props;
+  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);
   const labelCount = useLabelCount(data, labelAccessor);
   const { accessors: slotAccessors, ...slotsConfig } = iterateSlots(
     children,
@@ -63,6 +65,7 @@ const SingleValueGridRoot = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...behavioralTrackingProps,
       ref: refCallback,
       style: {
         ...consumerStyle

package/esm/charts/single-value-grid/SingleValueGrid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/single-value-grid/SingleValueGrid.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren } from 'react';\n\n\nimport { GlobalFontSizeVariables } from './components/GlobalFontSizeVariables.js';\nimport { SingleValueDisplay } from './components/SingleValueDisplay.js';\nimport { DISPLAY_NAME, SINGLE_VALUE_GRID_ARIA_LABEL } from './defaults.js';\nimport { useLabelCount } from './hooks/use-label-count.js';\nimport { GlobalFontSizeProvider } from './providers/global-font-size-provider.js';\nimport { gridRows } from './SingleValueGrid.sty.js';\nimport { Sparkline } from './slots/Sparkline.js';\nimport { SingleValueGridToolbarSlot } from './slots/Toolbar.js';\nimport { Trend } from './slots/Trend.js';\nimport { Value } from './slots/Value.js';\nimport type {\n  SingleValueGridAccessorsConfig,\n  SingleValueGridProps,\n} from './types/single-value-grid.js';\nimport { calculateGridLayout } from './utils/calculate-grid-layout.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { ChartStateHandler } from '../core/components/chart-states/ChartStateHandler.js';\nimport { SingleValueToolbar } from '../core/components/single-value-renderer/SingleValueToolbar.js';\nimport { useThrottledResizeObserver } from '../core/hooks/useThrottledResizeObserver.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\n\nconst COMPONENT_NAME = 'SingleValueGrid';\n\nconst SingleValueGridRoot = (\n  props: PropsWithChildren<SingleValueGridProps>,\n) => {\n  const {\n    loading,\n    data,\n    children,\n    colorAccessor,\n    labelAccessor,\n    prefixIconAccessor,\n    applyThresholdBackground,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    seriesActions: individualSeriesActions,\n    ...gridConfig\n  } = props;\n\n  const labelCount = useLabelCount(data, labelAccessor);\n\n  const { accessors: slotAccessors, ...slotsConfig } = iterateSlots(\n    children,\n    props,\n  );\n\n  const trendCount = slotsConfig.trend !== undefined ? data.length : 0;\n\n  const accessors: SingleValueGridAccessorsConfig = {\n    colorAccessor,\n    labelAccessor,\n    prefixIconAccessor,\n    ...slotAccessors,\n  };\n\n  const propsConfig = {\n    ...gridConfig,\n    ...slotsConfig,\n    applyThresholdBackground,\n  };\n\n  const { height = 0, width = 0, refCallback } = useThrottledResizeObserver();\n\n  const { rowCount, columnCount, lastRowColumnCount, gap } =\n    calculateGridLayout(width, height, data.length);\n\n  const gridItems = data.slice(0, data.length - lastRowColumnCount);\n  const lastRowItems = data.slice(-lastRowColumnCount);\n  const { intents, toolbar } = propsConfig;\n  const displayingGridToolbar = !intents.single;\n\n  return (\n    <div\n      ref={refCallback}\n      style={{\n        ...consumerStyle,\n      }}\n      className={clsx(gridRows)}\n    >\n      <ChartStateHandler\n        height={height}\n        isLoading={!!loading}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        style={consumerStyle}\n        className={consumerClassName}\n        empty={false}\n        emptyState={undefined}\n        errorState={undefined}\n      >\n        {/* Empty children as the loader overlay will be shown */}\n        <GlobalFontSizeProvider\n          valueCount={data.length}\n          labelCount={labelCount}\n          trendCount={trendCount}\n        >\n          <GlobalFontSizeVariables>\n            {displayingGridToolbar ? (\n              <SingleValueToolbar\n                parentHeight={height}\n                intents={displayingGridToolbar ? intents.grid : []}\n                placement={toolbar.placement}\n                hidden={toolbar.hidden}\n              />\n            ) : null}\n\n            <Grid\n              className={clsx(gridRows, consumerClassName)}\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n              data-testid={dataTestId}\n              data-dt-component={COMPONENT_NAME}\n              gridTemplateRows={`repeat(${rowCount}, 1fr)`}\n              gridTemplateColumns={`repeat(${columnCount}, 1fr)`}\n              style={{\n                ...consumerStyle,\n                // Explicitly set this one via the style, as the `gridGap` settable via the\n                // props on the `Grid` component needs to be a valid spacing token\n                gridGap: gap,\n                ...(displayingGridToolbar ? { pointerEvents: 'none' } : {}),\n              }}\n              // NOSONAR: Complex data visualization treated as single image for screen readers\n              role=\"img\"\n              aria-label={SINGLE_VALUE_GRID_ARIA_LABEL}\n            >\n              {gridItems.map((record, index) => (\n                <SingleValueDisplay\n                  key={index}\n                  record={record}\n                  propsConfig={propsConfig}\n                  accessors={accessors}\n                />\n              ))}\n              <Flex\n                className={gridRows}\n                style={{\n                  // Explicitly set this one via the style, as the `gridGap` settable via the\n                  // props on the `Grid` component needs to be a valid spacing token\n                  columnGap: gap,\n                }}\n                gridColumn=\"1 / -1\"\n              >\n                {lastRowItems.map((record, index) => (\n                  <SingleValueDisplay\n                    key={index}\n                    record={record}\n                    propsConfig={propsConfig}\n                    accessors={accessors}\n                  />\n                ))}\n              </Flex>\n            </Grid>\n          </GlobalFontSizeVariables>\n        </GlobalFontSizeProvider>\n      </ChartStateHandler>\n    </div>\n  );\n};\n\nSingleValueGridRoot['displayName'] = DISPLAY_NAME;\n\n/**\n * The SingleValueGrid component\n * @public\n */\nexport const SingleValueGrid = Object.assign(SingleValueGridRoot, {\n  ColorRule,\n  Intent,\n  Sparkline,\n  Toolbar: SingleValueGridToolbarSlot,\n  Trend,\n  Value,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { type PropsWithChildren } from 'react';\n\nimport { GlobalFontSizeVariables } from './components/GlobalFontSizeVariables.js';\nimport { SingleValueDisplay } from './components/SingleValueDisplay.js';\nimport { DISPLAY_NAME, SINGLE_VALUE_GRID_ARIA_LABEL } from './defaults.js';\nimport { useLabelCount } from './hooks/use-label-count.js';\nimport { GlobalFontSizeProvider } from './providers/global-font-size-provider.js';\nimport { gridRows } from './SingleValueGrid.sty.js';\nimport { Sparkline } from './slots/Sparkline.js';\nimport { SingleValueGridToolbarSlot } from './slots/Toolbar.js';\nimport { Trend } from './slots/Trend.js';\nimport { Value } from './slots/Value.js';\nimport type {\n  SingleValueGridAccessorsConfig,\n  SingleValueGridProps,\n} from './types/single-value-grid.js';\nimport { calculateGridLayout } from './utils/calculate-grid-layout.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Grid } from '../../layouts/grid/Grid.js';\nimport { ChartStateHandler } from '../core/components/chart-states/ChartStateHandler.js';\nimport { SingleValueToolbar } from '../core/components/single-value-renderer/SingleValueToolbar.js';\nimport { useThrottledResizeObserver } from '../core/hooks/useThrottledResizeObserver.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\n\nconst COMPONENT_NAME = 'SingleValueGrid';\n\nconst SingleValueGridRoot = (\n  props: PropsWithChildren<SingleValueGridProps>,\n) => {\n  const {\n    loading,\n    data,\n    children,\n    colorAccessor,\n    labelAccessor,\n    prefixIconAccessor,\n    applyThresholdBackground,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    seriesActions: individualSeriesActions,\n    ...gridConfig\n  } = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(props);\n\n  const labelCount = useLabelCount(data, labelAccessor);\n\n  const { accessors: slotAccessors, ...slotsConfig } = iterateSlots(\n    children,\n    props,\n  );\n\n  const trendCount = slotsConfig.trend !== undefined ? data.length : 0;\n\n  const accessors: SingleValueGridAccessorsConfig = {\n    colorAccessor,\n    labelAccessor,\n    prefixIconAccessor,\n    ...slotAccessors,\n  };\n\n  const propsConfig = {\n    ...gridConfig,\n    ...slotsConfig,\n    applyThresholdBackground,\n  };\n\n  const { height = 0, width = 0, refCallback } = useThrottledResizeObserver();\n\n  const { rowCount, columnCount, lastRowColumnCount, gap } =\n    calculateGridLayout(width, height, data.length);\n\n  const gridItems = data.slice(0, data.length - lastRowColumnCount);\n  const lastRowItems = data.slice(-lastRowColumnCount);\n  const { intents, toolbar } = propsConfig;\n  const displayingGridToolbar = !intents.single;\n\n  return (\n    <div\n      {...behavioralTrackingProps}\n      ref={refCallback}\n      style={{\n        ...consumerStyle,\n      }}\n      className={clsx(gridRows)}\n    >\n      <ChartStateHandler\n        height={height}\n        isLoading={!!loading}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        style={consumerStyle}\n        className={consumerClassName}\n        empty={false}\n        emptyState={undefined}\n        errorState={undefined}\n      >\n        {/* Empty children as the loader overlay will be shown */}\n        <GlobalFontSizeProvider\n          valueCount={data.length}\n          labelCount={labelCount}\n          trendCount={trendCount}\n        >\n          <GlobalFontSizeVariables>\n            {displayingGridToolbar ? (\n              <SingleValueToolbar\n                parentHeight={height}\n                intents={displayingGridToolbar ? intents.grid : []}\n                placement={toolbar.placement}\n                hidden={toolbar.hidden}\n              />\n            ) : null}\n\n            <Grid\n              className={clsx(gridRows, consumerClassName)}\n              data-dtrum-mask={dataDtrumMask}\n              data-dtrum-allow={dataDtrumAllow}\n              data-testid={dataTestId}\n              data-dt-component={COMPONENT_NAME}\n              gridTemplateRows={`repeat(${rowCount}, 1fr)`}\n              gridTemplateColumns={`repeat(${columnCount}, 1fr)`}\n              style={{\n                ...consumerStyle,\n                // Explicitly set this one via the style, as the `gridGap` settable via the\n                // props on the `Grid` component needs to be a valid spacing token\n                gridGap: gap,\n                ...(displayingGridToolbar ? { pointerEvents: 'none' } : {}),\n              }}\n              // NOSONAR: Complex data visualization treated as single image for screen readers\n              role=\"img\"\n              aria-label={SINGLE_VALUE_GRID_ARIA_LABEL}\n            >\n              {gridItems.map((record, index) => (\n                <SingleValueDisplay\n                  key={index}\n                  record={record}\n                  propsConfig={propsConfig}\n                  accessors={accessors}\n                />\n              ))}\n              <Flex\n                className={gridRows}\n                style={{\n                  // Explicitly set this one via the style, as the `gridGap` settable via the\n                  // props on the `Grid` component needs to be a valid spacing token\n                  columnGap: gap,\n                }}\n                gridColumn=\"1 / -1\"\n              >\n                {lastRowItems.map((record, index) => (\n                  <SingleValueDisplay\n                    key={index}\n                    record={record}\n                    propsConfig={propsConfig}\n                    accessors={accessors}\n                  />\n                ))}\n              </Flex>\n            </Grid>\n          </GlobalFontSizeVariables>\n        </GlobalFontSizeProvider>\n      </ChartStateHandler>\n    </div>\n  );\n};\n\nSingleValueGridRoot['displayName'] = DISPLAY_NAME;\n\n/**\n * The SingleValueGrid component\n * @public\n */\nexport const SingleValueGrid = Object.assign(SingleValueGridRoot, {\n  ColorRule,\n  Intent,\n  Sparkline,\n  Toolbar: SingleValueGridToolbarSlot,\n  Trend,\n  Value,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/single-value-grid/SingleValueGrid.sty.js

@@ -1,5 +1,5 @@
 import "./SingleValueGrid.css";
-var gridRows = "_1mx9zjb0-3-0-1";
+var gridRows = "_1mx9zjb0-3-1-1";
 export {
   gridRows
 };

package/esm/charts/single-value-grid/SingleValueGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/single-value-grid/SingleValueGrid.css.ts"],
-  "sourcesContent": ["import './SingleValueGrid.css';\nexport var gridRows = '_1mx9zjb0-3-0-1';"],
+  "sourcesContent": ["import './SingleValueGrid.css';\nexport var gridRows = '_1mx9zjb0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/charts/single-value-grid/components/GlobalFontSizeVariables.css

@@ -1,4 +1,4 @@
-._eom86z0-3-0-1 {
+._eom86z0-3-1-1 {
   position: relative;
   width: 100%;
   height: 100%;

package/esm/charts/single-value-grid/components/GlobalFontSizeVariables.sty.js

@@ -1,5 +1,5 @@
 import "./GlobalFontSizeVariables.css";
-var fontSizeWrapper = "_eom86z0-3-0-1";
+var fontSizeWrapper = "_eom86z0-3-1-1";
 export {
   fontSizeWrapper
 };

package/esm/charts/single-value-grid/components/GlobalFontSizeVariables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/single-value-grid/components/GlobalFontSizeVariables.css.ts"],
-  "sourcesContent": ["import './GlobalFontSizeVariables.css';\nexport var fontSizeWrapper = '_eom86z0-3-0-1';"],
+  "sourcesContent": ["import './GlobalFontSizeVariables.css';\nexport var fontSizeWrapper = '_eom86z0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/single-value-grid/components/SingleValueDisplay.js

@@ -74,7 +74,7 @@ const SingleValueDisplay = ({
       sparklineProps,
       trendProps,
       applyThresholdBackground: config.applyThresholdBackground,
-      propsFromGrid: propsFromGrid({ value, ...label ? { label } : {} })
+      propsFromGrid: propsFromGrid(record)
     }
   );
 };

package/esm/charts/single-value-grid/components/SingleValueDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/single-value-grid/components/SingleValueDisplay.tsx"],
-  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useIntl } from 'react-intl';\n\nimport { TrendProps } from '../../core/components/single-value-renderer/components/trend/types/trend-props.js';\nimport { SingleValueRenderer } from '../../core/components/single-value-renderer/SingleValueRenderer.js';\nimport type { SparklineDisplayProps } from '../../core/components/sparkline-display/types/sparkline-display-props.js';\nimport { SingleValueGridMessages } from '../messages.js';\nimport type {\n  SingleValueGridAccessorsConfig,\n  SingleValueGridConfigWithPropsFromGrid,\n} from '../types/single-value-grid.js';\nimport { buildConfig } from '../utils/build-config.js';\nimport { buildPropsFromGrid } from '../utils/build-props-from-grid.js';\nimport { getConfigFromAccessors } from '../utils/get-config-from-accessors.js';\nimport { getDataFromAccessors } from '../utils/get-data-from-accessors.js';\n\nexport const SingleValueDisplay = ({\n  record,\n  propsConfig,\n  accessors,\n}: {\n  record: string | number | Record<string, unknown>;\n  propsConfig: SingleValueGridConfigWithPropsFromGrid;\n  accessors: SingleValueGridAccessorsConfig;\n}) => {\n  const intl = useIntl();\n  const gridIntents = propsConfig.intents.grid;\n  const singleIntents = propsConfig.intents.single;\n  const propsFromGrid = buildPropsFromGrid(\n    propsConfig.toolbar,\n    singleIntents,\n    gridIntents,\n    intl.formatMessage(SingleValueGridMessages.gridIntentsLabel),\n  );\n\n  if (typeof record === 'string' || typeof record === 'number') {\n    // in case it is a simple array of strings or numbers, it will just use the props configuration or the defaults\n    const config = buildConfig(propsConfig);\n\n    return (\n      <SingleValueRenderer\n        data={record}\n        color={config.color}\n        formatter={config.value?.formatter}\n        unit={config.value?.unit}\n        colorRules={config.colorRules}\n        alignment={config.alignment}\n        trendProps={config.trend}\n        applyThresholdBackground={config.applyThresholdBackground}\n        propsFromGrid={propsFromGrid({ value: record })}\n      />\n    );\n  }\n\n  const { label, prefixIcon, value, trendData, sparkline } =\n    getDataFromAccessors(record, accessors);\n\n  // in case it is an array of records, it will override the config with the accessors configuration\n  const accessorsConfig = getConfigFromAccessors(record, accessors);\n\n  const config = buildConfig(propsConfig, accessorsConfig);\n\n  let sparklineProps: SparklineDisplayProps | undefined = undefined;\n\n  if (!isUndefined(sparkline?.data)) {\n    sparklineProps = {\n      ...config.sparkline,\n      data: sparkline.data,\n      xAxis: sparkline.xAxis,\n      yAxis: sparkline.yAxis,\n    };\n  }\n\n  let trendProps: TrendProps | undefined = undefined;\n\n  if (!isUndefined(config.trend) || !isUndefined(trendData)) {\n    trendProps = {\n      ...config.trend,\n      value: trendData?.value,\n      label: trendData?.label,\n      direction: trendData?.direction,\n    };\n  }\n\n  return (\n    <SingleValueRenderer\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      data={value!}\n      dataItem={record}\n      label={label}\n      prefixIcon={prefixIcon}\n      color={config.color}\n      formatter={config.value?.formatter}\n      unit={config.value?.unit}\n      colorRules={config.colorRules}\n      alignment={config.alignment}\n      sparklineProps={sparklineProps}\n      trendProps={trendProps}\n      applyThresholdBackground={config.applyThresholdBackground}\n      propsFromGrid={propsFromGrid({ value, ...(label ? { label } : {}) })}\n    />\n  );\n};\n"],
-  "mappings": "AAwCM;AAxCN,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAGxB,SAAS,2BAA2B;AAEpC,SAAS,+BAA+B;AAKxC,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AAE9B,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,YAAY,QAAQ;AACxC,QAAM,gBAAgB,YAAY,QAAQ;AAC1C,QAAM,gBAAgB;AAAA,IACpB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,KAAK,cAAc,wBAAwB,gBAAgB;AAAA,EAC7D;AAEA,MAAI,OAAO,WAAW,YAAY,OAAO,WAAW,UAAU;AAE5D,UAAMA,UAAS,YAAY,WAAW;AAEtC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAOA,QAAO;AAAA,QACd,WAAWA,QAAO,OAAO;AAAA,QACzB,MAAMA,QAAO,OAAO;AAAA,QACpB,YAAYA,QAAO;AAAA,QACnB,WAAWA,QAAO;AAAA,QAClB,YAAYA,QAAO;AAAA,QACnB,0BAA0BA,QAAO;AAAA,QACjC,eAAe,cAAc,EAAE,OAAO,OAAO,CAAC;AAAA;AAAA,IAChD;AAAA,EAEJ;AAEA,QAAM,EAAE,OAAO,YAAY,OAAO,WAAW,UAAU,IACrD,qBAAqB,QAAQ,SAAS;AAGxC,QAAM,kBAAkB,uBAAuB,QAAQ,SAAS;AAEhE,QAAM,SAAS,YAAY,aAAa,eAAe;AAEvD,MAAI,iBAAoD;AAExD,MAAI,CAAC,YAAY,WAAW,IAAI,GAAG;AACjC,qBAAiB;AAAA,MACf,GAAG,OAAO;AAAA,MACV,MAAM,UAAU;AAAA,MAChB,OAAO,UAAU;AAAA,MACjB,OAAO,UAAU;AAAA,IACnB;AAAA,EACF;AAEA,MAAI,aAAqC;AAEzC,MAAI,CAAC,YAAY,OAAO,KAAK,KAAK,CAAC,YAAY,SAAS,GAAG;AACzD,iBAAa;AAAA,MACX,GAAG,OAAO;AAAA,MACV,OAAO,WAAW;AAAA,MAClB,OAAO,WAAW;AAAA,MAClB,WAAW,WAAW;AAAA,IACxB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM;AAAA,MACN,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,OAAO,OAAO;AAAA,MACd,WAAW,OAAO,OAAO;AAAA,MACzB,MAAM,OAAO,OAAO;AAAA,MACpB,YAAY,OAAO;AAAA,MACnB,WAAW,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,0BAA0B,OAAO;AAAA,MACjC,eAAe,cAAc,EAAE,OAAO,GAAI,QAAQ,EAAE,MAAM,IAAI,CAAC,EAAG,CAAC;AAAA;AAAA,EACrE;AAEJ;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport { useIntl } from 'react-intl';\n\nimport { TrendProps } from '../../core/components/single-value-renderer/components/trend/types/trend-props.js';\nimport { SingleValueRenderer } from '../../core/components/single-value-renderer/SingleValueRenderer.js';\nimport type { SparklineDisplayProps } from '../../core/components/sparkline-display/types/sparkline-display-props.js';\nimport { SingleValueGridMessages } from '../messages.js';\nimport type {\n  SingleValueGridAccessorsConfig,\n  SingleValueGridConfigWithPropsFromGrid,\n} from '../types/single-value-grid.js';\nimport { buildConfig } from '../utils/build-config.js';\nimport { buildPropsFromGrid } from '../utils/build-props-from-grid.js';\nimport { getConfigFromAccessors } from '../utils/get-config-from-accessors.js';\nimport { getDataFromAccessors } from '../utils/get-data-from-accessors.js';\n\nexport const SingleValueDisplay = ({\n  record,\n  propsConfig,\n  accessors,\n}: {\n  record: string | number | Record<string, unknown>;\n  propsConfig: SingleValueGridConfigWithPropsFromGrid;\n  accessors: SingleValueGridAccessorsConfig;\n}) => {\n  const intl = useIntl();\n  const gridIntents = propsConfig.intents.grid;\n  const singleIntents = propsConfig.intents.single;\n  const propsFromGrid = buildPropsFromGrid(\n    propsConfig.toolbar,\n    singleIntents,\n    gridIntents,\n    intl.formatMessage(SingleValueGridMessages.gridIntentsLabel),\n  );\n\n  if (typeof record === 'string' || typeof record === 'number') {\n    // in case it is a simple array of strings or numbers, it will just use the props configuration or the defaults\n    const config = buildConfig(propsConfig);\n\n    return (\n      <SingleValueRenderer\n        data={record}\n        color={config.color}\n        formatter={config.value?.formatter}\n        unit={config.value?.unit}\n        colorRules={config.colorRules}\n        alignment={config.alignment}\n        trendProps={config.trend}\n        applyThresholdBackground={config.applyThresholdBackground}\n        propsFromGrid={propsFromGrid({ value: record })}\n      />\n    );\n  }\n\n  const { label, prefixIcon, value, trendData, sparkline } =\n    getDataFromAccessors(record, accessors);\n\n  // in case it is an array of records, it will override the config with the accessors configuration\n  const accessorsConfig = getConfigFromAccessors(record, accessors);\n\n  const config = buildConfig(propsConfig, accessorsConfig);\n\n  let sparklineProps: SparklineDisplayProps | undefined = undefined;\n\n  if (!isUndefined(sparkline?.data)) {\n    sparklineProps = {\n      ...config.sparkline,\n      data: sparkline.data,\n      xAxis: sparkline.xAxis,\n      yAxis: sparkline.yAxis,\n    };\n  }\n\n  let trendProps: TrendProps | undefined = undefined;\n\n  if (!isUndefined(config.trend) || !isUndefined(trendData)) {\n    trendProps = {\n      ...config.trend,\n      value: trendData?.value,\n      label: trendData?.label,\n      direction: trendData?.direction,\n    };\n  }\n\n  return (\n    <SingleValueRenderer\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      data={value!}\n      dataItem={record}\n      label={label}\n      prefixIcon={prefixIcon}\n      color={config.color}\n      formatter={config.value?.formatter}\n      unit={config.value?.unit}\n      colorRules={config.colorRules}\n      alignment={config.alignment}\n      sparklineProps={sparklineProps}\n      trendProps={trendProps}\n      applyThresholdBackground={config.applyThresholdBackground}\n      propsFromGrid={propsFromGrid(record)}\n    />\n  );\n};\n"],
+  "mappings": "AAwCM;AAxCN,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AAGxB,SAAS,2BAA2B;AAEpC,SAAS,+BAA+B;AAKxC,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AAE9B,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,YAAY,QAAQ;AACxC,QAAM,gBAAgB,YAAY,QAAQ;AAC1C,QAAM,gBAAgB;AAAA,IACpB,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,KAAK,cAAc,wBAAwB,gBAAgB;AAAA,EAC7D;AAEA,MAAI,OAAO,WAAW,YAAY,OAAO,WAAW,UAAU;AAE5D,UAAMA,UAAS,YAAY,WAAW;AAEtC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,OAAOA,QAAO;AAAA,QACd,WAAWA,QAAO,OAAO;AAAA,QACzB,MAAMA,QAAO,OAAO;AAAA,QACpB,YAAYA,QAAO;AAAA,QACnB,WAAWA,QAAO;AAAA,QAClB,YAAYA,QAAO;AAAA,QACnB,0BAA0BA,QAAO;AAAA,QACjC,eAAe,cAAc,EAAE,OAAO,OAAO,CAAC;AAAA;AAAA,IAChD;AAAA,EAEJ;AAEA,QAAM,EAAE,OAAO,YAAY,OAAO,WAAW,UAAU,IACrD,qBAAqB,QAAQ,SAAS;AAGxC,QAAM,kBAAkB,uBAAuB,QAAQ,SAAS;AAEhE,QAAM,SAAS,YAAY,aAAa,eAAe;AAEvD,MAAI,iBAAoD;AAExD,MAAI,CAAC,YAAY,WAAW,IAAI,GAAG;AACjC,qBAAiB;AAAA,MACf,GAAG,OAAO;AAAA,MACV,MAAM,UAAU;AAAA,MAChB,OAAO,UAAU;AAAA,MACjB,OAAO,UAAU;AAAA,IACnB;AAAA,EACF;AAEA,MAAI,aAAqC;AAEzC,MAAI,CAAC,YAAY,OAAO,KAAK,KAAK,CAAC,YAAY,SAAS,GAAG;AACzD,iBAAa;AAAA,MACX,GAAG,OAAO;AAAA,MACV,OAAO,WAAW;AAAA,MAClB,OAAO,WAAW;AAAA,MAClB,WAAW,WAAW;AAAA,IACxB;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM;AAAA,MACN,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,OAAO,OAAO;AAAA,MACd,WAAW,OAAO,OAAO;AAAA,MACzB,MAAM,OAAO,OAAO;AAAA,MACpB,YAAY,OAAO;AAAA,MACnB,WAAW,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,0BAA0B,OAAO;AAAA,MACjC,eAAe,cAAc,MAAM;AAAA;AAAA,EACrC;AAEJ;",
   "names": ["config"]
 }

package/esm/charts/single-value-grid/defaults.js

@@ -9,7 +9,16 @@ const sparklineDefaultProps = {
   style: {},
   "data-testid": "",
   "data-dtrum-mask": false,
-  "data-dtrum-allow": false
+  "data-dtrum-allow": false,
+  "data-dt-name": "",
+  "data-dt-content": "",
+  "data-dt-children-name": "",
+  "data-dt-features": "",
+  "data-dt-properties": "",
+  "data-dt-mouse-over": "",
+  "data-dt-value-content": "",
+  "data-dt-children-value-content": "",
+  "data-dt-ancestor": ""
 };
 const trendDefaultProps = {
   showIcon: true,
@@ -23,7 +32,16 @@ const gridDefaultProps = {
   "data-dtrum-mask": false,
   "data-dtrum-allow": false,
   "data-testid": "",
-  loading: false
+  loading: false,
+  "data-dt-name": "",
+  "data-dt-content": "",
+  "data-dt-children-name": "",
+  "data-dt-features": "",
+  "data-dt-properties": "",
+  "data-dt-mouse-over": "",
+  "data-dt-value-content": "",
+  "data-dt-children-value-content": "",
+  "data-dt-ancestor": ""
 };
 const SINGLE_VALUE_GRID_ARIA_LABEL = "Single value data visualization grid";
 export {