@dynatrace/strato-components 3.1.1 → 3.2.0

package/esm/charts/pie/messages.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/pie/messages.ts"],
-  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const PIE_CHART_MESSAGES = defineMessages({\n  downloadAsCsv: {\n    id: '9JhiinIAmqWKBJae',\n    defaultMessage: 'Download as CSV',\n    description:\n      'Text in a tooltip shown when hovering the \"Download data\" button in the pie chart toolbar',\n  },\n  invalidDataset: {\n    id: 'fHGjhiAXIpSTl8T2',\n    defaultMessage: 'No data can be displayed because the value is 0',\n    description: 'Text displayed when the pie chart dataset is invalid',\n  },\n});\n"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const PIE_CHART_MESSAGES = defineMessages({\n  downloadAsCsv: {\n    id: '9JhiinIAmqWKBJae',\n    defaultMessage: 'Download as CSV',\n    description:\n      'Text in a tooltip shown when hovering the \"Download data\" button in the pie chart toolbar',\n  },\n  invalidDataset: {\n    id: 'qoM4Je2O4h920xx0',\n    defaultMessage: 'No data can be displayed because the value is 0',\n    description: 'Text displayed when the pie chart dataset is invalid',\n  },\n});\n"],
   "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,qBAAqB,eAAe;AAAA,EAC/C,eAAe;AAAA,IACb,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,gBAAgB;AAAA,IACd,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AACF,CAAC;",
   "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 * @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;",
+  "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 { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.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\n  extends StylingProps,\n    MaskingProps,\n    DataTestId,\n    BehaviorTrackingProps {\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    BehaviorTrackingProps {\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": "AAiOO,MAAM,uBAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/esm/charts/pie/utils/iterate-slots.js

@@ -5,6 +5,7 @@ import { ColorRule, isValidColorRule } from "../../core/slots/ColorRule.js";
 import { ChartToolbar } from "../../core/slots/toolbar/ChartToolbar.js";
 import { sanitizeProps } from "../../core/slots/toolbar/CompactToolbar.js";
 import { DownloadData } from "../../core/slots/toolbar/DownloadData.js";
+import { extractBehaviorTrackingProps } from "../../core/utils/extract-behavior-tracking-props.js";
 import { Toolbar } from "../shared/slots/Toolbar.js";
 import { DonutChartDownloadCSVSlot } from "../slots/DonutChartDownloadCSV.js";
 import { Grouping as DonutChartGrouping } from "../slots/DonutChartGrouping.js";
@@ -46,7 +47,8 @@ function iterateSlots(children) {
         ...slots,
         toolbar: {
           ...slots.toolbar,
-          ...sanitizeProps(child.props)
+          ...sanitizeProps(child.props),
+          ...extractBehaviorTrackingProps(child.props)
         }
       };
     } else if (isSlot(child, ChartToolbar)) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/pie/utils/iterate-slots.ts"],
-  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { Intent, IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { ColorRule, isValidColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartToolbar } from '../../core/slots/toolbar/ChartToolbar.js';\nimport { sanitizeProps } from '../../core/slots/toolbar/CompactToolbar.js';\nimport { DownloadData } from '../../core/slots/toolbar/DownloadData.js';\nimport type { ChartToolbarConfig } from '../../core/types/toolbar.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport { DonutChartDownloadCSVSlot } from '../slots/DonutChartDownloadCSV.js';\nimport { Grouping as DonutChartGrouping } from '../slots/DonutChartGrouping.js';\nimport { DonutChartInner } from '../slots/DonutChartInner.js';\nimport { Labels as DonutChartLabels } from '../slots/DonutChartLabels.js';\nimport { Legend as DonutChartLegend } from '../slots/DonutChartLegend.js';\nimport { PieChartDownloadCSVSlot } from '../slots/PieChartDownloadCSV.js';\nimport { Grouping as PieChartGrouping } from '../slots/PieChartGrouping.js';\nimport { Labels as PieChartLabels } from '../slots/PieChartLabels.js';\nimport { Legend as PieChartLegend } from '../slots/PieChartLegend.js';\nimport type { PieChartSlots } from '../types/pie-chart.config.js';\n\n/**\n * Generate chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: ReactNode): ChartToolbarConfig => {\n  let slots = {} as ChartToolbarConfig;\n\n  Children.forEach(children, (childInteractions) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    if (isSlot(childInteractions, DownloadData)) {\n      slots = { ...slots, downloadData: { enabled: true } };\n    }\n  });\n\n  return slots;\n};\n\n/**\n * Iterate over the slotted children to merge the configuration.\n * @param children - Slotted children to iterate\n * @returns Merged config as PieChartSlots\n */\nexport function iterateSlots(children: ReactNode): PieChartSlots {\n  let slots: PieChartSlots = {\n    labels: {},\n    grouping: {},\n    legend: {},\n    toolbar: undefined,\n    innerElement: undefined,\n    colorRules: [],\n  };\n\n  let intents: IntentProps[] | undefined;\n\n  Children.map(children, (child) => {\n    if (isSlot(child, DonutChartLabels) || isSlot(child, PieChartLabels)) {\n      slots = { ...slots, labels: child.props };\n    } else if (\n      isSlot(child, PieChartGrouping) ||\n      isSlot(child, DonutChartGrouping)\n    ) {\n      slots = { ...slots, grouping: child.props };\n    } else if (\n      isSlot(child, PieChartLegend) ||\n      isSlot(child, DonutChartLegend)\n    ) {\n      slots = { ...slots, legend: child.props };\n    } else if (isSlot(child, Toolbar)) {\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          ...sanitizeProps(child.props),\n        },\n      };\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbarProps } = child.props;\n\n      const toolbarSlots = iterateChartToolbarSlots(children);\n\n      const toolbar = { ...toolbarProps, ...toolbarSlots };\n      slots = { ...slots, toolbar };\n    } else if (\n      isSlot(child, DonutChartDownloadCSVSlot) ||\n      isSlot(child, PieChartDownloadCSVSlot)\n    ) {\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          downloadData: { enabled: true },\n        },\n      };\n    } else if (isSlot(child, Intent)) {\n      intents = intents ? [...intents, child.props] : [child.props];\n    } else if (isSlot(child, DonutChartInner)) {\n      const inner = child.props.children;\n      slots = { ...slots, innerElement: inner };\n    } else if (isSlot(child, ColorRule)) {\n      isValidColorRule(child.props) && slots.colorRules.push(child.props);\n    }\n  });\n\n  if (intents?.length) {\n    slots = {\n      ...slots,\n      toolbar: {\n        ...slots.toolbar,\n        intents,\n      },\n    };\n  }\n\n  return slots;\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,WAAW,wBAAwB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,eAAe;AACxB,SAAS,iCAAiC;AAC1C,SAAS,YAAY,0BAA0B;AAC/C,SAAS,uBAAuB;AAChC,SAAS,UAAU,wBAAwB;AAC3C,SAAS,UAAU,wBAAwB;AAC3C,SAAS,+BAA+B;AACxC,SAAS,YAAY,wBAAwB;AAC7C,SAAS,UAAU,sBAAsB;AACzC,SAAS,UAAU,sBAAsB;AAQzC,MAAM,2BAA2B,CAAC,aAA4C;AAC5E,MAAI,QAAQ,CAAC;AAEb,WAAS,QAAQ,UAAU,CAAC,sBAAsB;AAEhD,QAAI,OAAO,mBAAmB,YAAY,GAAG;AAC3C,cAAQ,EAAE,GAAG,OAAO,cAAc,EAAE,SAAS,KAAK,EAAE;AAAA,IACtD;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAOO,SAAS,aAAa,UAAoC;AAC/D,MAAI,QAAuB;AAAA,IACzB,QAAQ,CAAC;AAAA,IACT,UAAU,CAAC;AAAA,IACX,QAAQ,CAAC;AAAA,IACT,SAAS;AAAA,IACT,cAAc;AAAA,IACd,YAAY,CAAC;AAAA,EACf;AAEA,MAAI;AAEJ,WAAS,IAAI,UAAU,CAAC,UAAU;AAChC,QAAI,OAAO,OAAO,gBAAgB,KAAK,OAAO,OAAO,cAAc,GAAG;AACpE,cAAQ,EAAE,GAAG,OAAO,QAAQ,MAAM,MAAM;AAAA,IAC1C,WACE,OAAO,OAAO,gBAAgB,KAC9B,OAAO,OAAO,kBAAkB,GAChC;AACA,cAAQ,EAAE,GAAG,OAAO,UAAU,MAAM,MAAM;AAAA,IAC5C,WACE,OAAO,OAAO,cAAc,KAC5B,OAAO,OAAO,gBAAgB,GAC9B;AACA,cAAQ,EAAE,GAAG,OAAO,QAAQ,MAAM,MAAM;AAAA,IAC1C,WAAW,OAAO,OAAO,OAAO,GAAG;AACjC,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,GAAG,cAAc,MAAM,KAAK;AAAA,QAC9B;AAAA,MACF;AAAA,IAEF,WAAW,OAAO,OAAO,YAAY,GAAG;AACtC,YAAM,EAAE,UAAAA,WAAU,GAAG,aAAa,IAAI,MAAM;AAE5C,YAAM,eAAe,yBAAyBA,SAAQ;AAEtD,YAAM,UAAU,EAAE,GAAG,cAAc,GAAG,aAAa;AACnD,cAAQ,EAAE,GAAG,OAAO,QAAQ;AAAA,IAC9B,WACE,OAAO,OAAO,yBAAyB,KACvC,OAAO,OAAO,uBAAuB,GACrC;AACA,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,cAAc,EAAE,SAAS,KAAK;AAAA,QAChC;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,gBAAU,UAAU,CAAC,GAAG,SAAS,MAAM,KAAK,IAAI,CAAC,MAAM,KAAK;AAAA,IAC9D,WAAW,OAAO,OAAO,eAAe,GAAG;AACzC,YAAM,QAAQ,MAAM,MAAM;AAC1B,cAAQ,EAAE,GAAG,OAAO,cAAc,MAAM;AAAA,IAC1C,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,uBAAiB,MAAM,KAAK,KAAK,MAAM,WAAW,KAAK,MAAM,KAAK;AAAA,IACpE;AAAA,EACF,CAAC;AAED,MAAI,SAAS,QAAQ;AACnB,YAAQ;AAAA,MACN,GAAG;AAAA,MACH,SAAS;AAAA,QACP,GAAG,MAAM;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { Intent, IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { ColorRule, isValidColorRule } from '../../core/slots/ColorRule.js';\nimport { ChartToolbar } from '../../core/slots/toolbar/ChartToolbar.js';\nimport { sanitizeProps } from '../../core/slots/toolbar/CompactToolbar.js';\nimport { DownloadData } from '../../core/slots/toolbar/DownloadData.js';\nimport type { ChartToolbarConfig } from '../../core/types/toolbar.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { Toolbar } from '../shared/slots/Toolbar.js';\nimport { DonutChartDownloadCSVSlot } from '../slots/DonutChartDownloadCSV.js';\nimport { Grouping as DonutChartGrouping } from '../slots/DonutChartGrouping.js';\nimport { DonutChartInner } from '../slots/DonutChartInner.js';\nimport { Labels as DonutChartLabels } from '../slots/DonutChartLabels.js';\nimport { Legend as DonutChartLegend } from '../slots/DonutChartLegend.js';\nimport { PieChartDownloadCSVSlot } from '../slots/PieChartDownloadCSV.js';\nimport { Grouping as PieChartGrouping } from '../slots/PieChartGrouping.js';\nimport { Labels as PieChartLabels } from '../slots/PieChartLabels.js';\nimport { Legend as PieChartLegend } from '../slots/PieChartLegend.js';\nimport type { PieChartSlots } from '../types/pie-chart.config.js';\n\n/**\n * Generate chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: ReactNode): ChartToolbarConfig => {\n  let slots = {} as ChartToolbarConfig;\n\n  Children.forEach(children, (childInteractions) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    if (isSlot(childInteractions, DownloadData)) {\n      slots = { ...slots, downloadData: { enabled: true } };\n    }\n  });\n\n  return slots;\n};\n\n/**\n * Iterate over the slotted children to merge the configuration.\n * @param children - Slotted children to iterate\n * @returns Merged config as PieChartSlots\n */\nexport function iterateSlots(children: ReactNode): PieChartSlots {\n  let slots: PieChartSlots = {\n    labels: {},\n    grouping: {},\n    legend: {},\n    toolbar: undefined,\n    innerElement: undefined,\n    colorRules: [],\n  };\n\n  let intents: IntentProps[] | undefined;\n\n  Children.map(children, (child) => {\n    if (isSlot(child, DonutChartLabels) || isSlot(child, PieChartLabels)) {\n      slots = { ...slots, labels: child.props };\n    } else if (\n      isSlot(child, PieChartGrouping) ||\n      isSlot(child, DonutChartGrouping)\n    ) {\n      slots = { ...slots, grouping: child.props };\n    } else if (\n      isSlot(child, PieChartLegend) ||\n      isSlot(child, DonutChartLegend)\n    ) {\n      slots = { ...slots, legend: child.props };\n    } else if (isSlot(child, Toolbar)) {\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          ...sanitizeProps(child.props),\n          ...extractBehaviorTrackingProps(child.props),\n        },\n      };\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbarProps } = child.props;\n\n      const toolbarSlots = iterateChartToolbarSlots(children);\n\n      const toolbar = { ...toolbarProps, ...toolbarSlots };\n      slots = { ...slots, toolbar };\n    } else if (\n      isSlot(child, DonutChartDownloadCSVSlot) ||\n      isSlot(child, PieChartDownloadCSVSlot)\n    ) {\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          downloadData: { enabled: true },\n        },\n      };\n    } else if (isSlot(child, Intent)) {\n      intents = intents ? [...intents, child.props] : [child.props];\n    } else if (isSlot(child, DonutChartInner)) {\n      const inner = child.props.children;\n      slots = { ...slots, innerElement: inner };\n    } else if (isSlot(child, ColorRule)) {\n      isValidColorRule(child.props) && slots.colorRules.push(child.props);\n    }\n  });\n\n  if (intents?.length) {\n    slots = {\n      ...slots,\n      toolbar: {\n        ...slots.toolbar,\n        intents,\n      },\n    };\n  }\n\n  return slots;\n}\n"],
+  "mappings": "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",
   "names": ["children"]
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./SingleValue.css";
-var container = "_1sfgzlg0-3-1-1";
+var container = "_1sfgzlg0-3-2-0";
 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-1-1';"],
+  "sourcesContent": ["import './SingleValue.css';\nexport var container = '_1sfgzlg0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/single-value/types/single-value-toolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/single-value/types/single-value-toolbar.ts"],
-  "sourcesContent": ["import { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport {\n  BaseToolbarProps,\n  ChartToolbarConfig,\n  InternalChartToolbarConfig,\n  ToolbarPlacement,\n} from '../../core/types/toolbar.js';\n\n/** Props for the ChartToolbar implementation in SingleValue\n * @public\n */\nexport interface SingleValueToolbarSlotProps extends BaseToolbarProps {\n  /** Decides if the toolbar is draggable\n   * @deprecated - Will be removed in next breaking version. Toolbar is always draggable.\n   * @defaultValue false\n   */\n  draggable?: boolean;\n}\n\n/** Configuration properties for the ChartToolbar in SingleValue\n * @public\n */\nexport interface SingleValueToolbarConfig\n  extends Omit<ChartToolbarConfig, 'downloadData'> {\n  /** Decides the placement of the toolbar */\n  placement: ToolbarPlacement;\n  /** Decides if the toolbar is hidden */\n  hidden: boolean;\n}\n\n/** Internal props for the ChartToolbar implementation in SingleValue\n * @internal\n */\nexport interface SingleValueToolbarInternalProps\n  extends InternalChartToolbarConfig {\n  /** Intents to show in the toolbar */\n  intents?: Array<IntentProps>;\n  /** Decides if the toolbar is hidden */\n  hidden: boolean;\n}\n\nexport const defaultToolbarInternalConfig: SingleValueToolbarInternalProps = {\n  hidden: false,\n  intents: [],\n  placement: 'top-right',\n  collapsed: false,\n  draggable: false,\n};\n"],
-  "mappings": "AAyCO,MAAM,+BAAgE;AAAA,EAC3E,QAAQ;AAAA,EACR,SAAS,CAAC;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;",
+  "sourcesContent": ["import { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport {\n  BaseToolbarProps,\n  InternalChartToolbarConfig,\n} from '../../core/types/toolbar.js';\n\n/** Props for the ChartToolbar implementation in SingleValue\n * @public\n */\nexport interface SingleValueToolbarSlotProps extends BaseToolbarProps {\n  /** Decides if the toolbar is draggable\n   * @deprecated - Will be removed in next breaking version. Toolbar is always draggable.\n   * @defaultValue false\n   */\n  draggable?: boolean;\n}\n\n/** Internal props for the ChartToolbar implementation in SingleValue\n * @internal\n */\nexport interface SingleValueToolbarInternalProps\n  extends InternalChartToolbarConfig {\n  /** Intents to show in the toolbar */\n  intents?: Array<IntentProps>;\n  /** Decides if the toolbar is hidden */\n  hidden: boolean;\n}\n\nexport const defaultToolbarInternalConfig: SingleValueToolbarInternalProps = {\n  hidden: false,\n  intents: [],\n  placement: 'top-right',\n  collapsed: false,\n  draggable: false,\n};\n"],
+  "mappings": "AA4BO,MAAM,+BAAgE;AAAA,EAC3E,QAAQ;AAAA,EACR,SAAS,CAAC;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AACb;",
   "names": []
 }

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

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

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

@@ -17,7 +17,7 @@ import { Intent } from "../../core/slots/Intent/Intent.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { Grid } from "../../layouts/grid/Grid.js";
 import { ChartStateHandler } from "../core/components/chart-states/ChartStateHandler.js";
-import { SingleValueToolbar } from "../core/components/single-value-renderer/SingleValueToolbar.js";
+import { SingleValueToolbar } from "../core/components/single-value-renderer/components/SingleValueToolbar.js";
 import { useThrottledResizeObserver } from "../core/hooks/useThrottledResizeObserver.js";
 import { ColorRule } from "../core/slots/ColorRule.js";
 const COMPONENT_NAME = "SingleValueGrid";

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\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"],
+  "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/components/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-1-1";
+var gridRows = "_1mx9zjb0-3-2-0";
 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-1-1';"],
+  "sourcesContent": ["import './SingleValueGrid.css';\nexport var gridRows = '_1mx9zjb0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._eom86z0-3-1-1 {
+._eom86z0-3-2-0 {
   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-1-1";
+var fontSizeWrapper = "_eom86z0-3-2-0";
 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-1-1';"],
+  "sourcesContent": ["import './GlobalFontSizeVariables.css';\nexport var fontSizeWrapper = '_eom86z0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import { defineMessages } from "react-intl";
 const SingleValueGridMessages = defineMessages({
   gridIntentsLabel: {
-    id: "Vb+X1c0b1t+3YJ1F",
+    id: "HnUFKqpr47NWwlve",
     defaultMessage: "Grid options",
     description: "Label for the grid intents in the SingleValueGrid toolbar"
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/single-value-grid/messages.ts"],
-  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const SingleValueGridMessages = defineMessages({\n  gridIntentsLabel: {\n    id: 'Vb+X1c0b1t+3YJ1F',\n    defaultMessage: 'Grid options',\n    description: 'Label for the grid intents in the SingleValueGrid toolbar',\n  },\n});\n"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const SingleValueGridMessages = defineMessages({\n  gridIntentsLabel: {\n    id: 'HnUFKqpr47NWwlve',\n    defaultMessage: 'Grid options',\n    description: 'Label for the grid intents in the SingleValueGrid toolbar',\n  },\n});\n"],
   "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,0BAA0B,eAAe;AAAA,EACpD,kBAAkB;AAAA,IAChB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AACF,CAAC;",
   "names": []
 }

package/esm/charts/single-value-grid/utils/iterate-slots.js

@@ -3,6 +3,8 @@ import { Intent } from "../../../core/slots/Intent/Intent.js";
 import { isSlot } from "../../../core/utils/is-slot.js";
 import { iterateSparklineSlots } from "../../core/components/sparkline-display/utils/iterate-sparkline-slots.js";
 import { ColorRule, isValidColorRule } from "../../core/slots/ColorRule.js";
+import { sanitizeProps } from "../../core/slots/toolbar/CompactToolbar.js";
+import { extractBehaviorTrackingProps } from "../../core/utils/extract-behavior-tracking-props.js";
 import { Sparkline } from "../slots/Sparkline.js";
 import { SingleValueGridToolbarSlot } from "../slots/Toolbar.js";
 import { Trend } from "../slots/Trend.js";
@@ -12,7 +14,16 @@ const iterateSlots = (children, props) => {
     intents: { grid: [], single: void 0, none: true },
     toolbar: {
       hidden: false,
-      placement: (props.alignment || "") === "end" ? "top-left" : "top-right"
+      placement: (props.alignment || "") === "end" ? "top-left" : "top-right",
+      "data-dt-content": "",
+      "data-dt-name": "",
+      "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 accessors = {};
@@ -69,7 +80,8 @@ const iterateSlots = (children, props) => {
     } else if (isSlot(child, SingleValueGridToolbarSlot)) {
       slots.toolbar = {
         ...slots.toolbar,
-        ...child.props
+        ...sanitizeProps(child.props),
+        ...extractBehaviorTrackingProps(child.props)
       };
     }
   });

package/esm/charts/single-value-grid/utils/iterate-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/single-value-grid/utils/iterate-slots.ts"],
-  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { iterateSparklineSlots } from '../../core/components/sparkline-display/utils/iterate-sparkline-slots.js';\nimport { ColorRule, isValidColorRule } from '../../core/slots/ColorRule.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.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 {\n  PartialSingleValueGridConfig,\n  SingleValueGridAccessorsConfig,\n  type SingleValueGridIntentsConfig,\n  type SingleValueGridProps,\n  type SingleValueGridToolbarConfig,\n} from '../types/single-value-grid.js';\n\ntype SlotsConfig = PartialSingleValueGridConfig & {\n  intents: SingleValueGridIntentsConfig;\n  toolbar: SingleValueGridToolbarConfig;\n};\n\nexport const iterateSlots = (\n  children: ReactNode,\n  props: Pick<SingleValueGridProps, 'alignment' | 'seriesActions'>,\n): SlotsConfig & {\n  accessors: SingleValueGridAccessorsConfig;\n} => {\n  const slots: SlotsConfig = {\n    intents: { grid: [], single: undefined, none: true },\n    toolbar: {\n      hidden: false,\n      placement: (props.alignment || '') === 'end' ? 'top-left' : 'top-right',\n    },\n  };\n  const accessors: SingleValueGridAccessorsConfig = {};\n  const colorRules: ColorRuleProps[] = [];\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Value)) {\n      const { dataAccessor, formatterAccessor, unitAccessor, ...valueProps } =\n        child.props;\n\n      slots.value = valueProps;\n\n      accessors.value = {\n        dataAccessor,\n        formatterAccessor,\n        unitAccessor,\n      };\n    } else if (isSlot(child, Sparkline)) {\n      const {\n        children: sparklineSlots,\n        dataAccessor,\n        colorAccessor,\n        ...sparklineProps\n      } = child.props;\n      const { xAxis, yAxis } = iterateSparklineSlots(sparklineSlots);\n\n      slots.sparkline = sparklineProps;\n\n      accessors.sparkline = {\n        dataAccessor,\n        colorAccessor,\n        xAxis,\n        yAxis,\n      };\n    } else if (isSlot(child, Trend)) {\n      const {\n        directionAccessor,\n        valueAccessor,\n        labelAccessor,\n        formatterAccessor,\n        inverseTrendAccessor,\n        ...trendProps\n      } = child.props;\n\n      slots.trend = trendProps;\n\n      accessors.trend = {\n        directionAccessor,\n        valueAccessor,\n        labelAccessor,\n        formatterAccessor,\n        inverseTrendAccessor,\n      };\n    } else if (isSlot(child, ColorRule)) {\n      const colorRule = child.props;\n      if (isValidColorRule(colorRule)) {\n        colorRules.push(colorRule);\n      }\n    } else if (isSlot(child, Intent)) {\n      slots.intents.grid.push(child.props);\n      slots.intents.none = false;\n    } else if (isSlot(child, SingleValueGridToolbarSlot)) {\n      slots.toolbar = {\n        ...slots.toolbar,\n        ...child.props,\n      };\n    }\n  });\n\n  if (colorRules.length > 0) {\n    slots.colorRules = colorRules;\n  }\n\n  if (slots.toolbar.hidden) {\n    slots.intents = {\n      ...slots.intents,\n      grid: [],\n      none: true,\n    };\n  } else {\n    if (props.seriesActions) {\n      slots.intents = {\n        ...slots.intents,\n        single: props.seriesActions,\n        none: false,\n      };\n    }\n\n    if (slots.intents.none) {\n      slots.toolbar = {\n        ...slots.toolbar,\n        hidden: true,\n      };\n    }\n  }\n\n  return { ...slots, accessors };\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,WAAW,wBAAwB;AAE5C,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,aAAa;AAcf,MAAM,eAAe,CAC1B,UACA,UAGG;AACH,QAAM,QAAqB;AAAA,IACzB,SAAS,EAAE,MAAM,CAAC,GAAG,QAAQ,QAAW,MAAM,KAAK;AAAA,IACnD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,YAAY,MAAM,aAAa,QAAQ,QAAQ,aAAa;AAAA,IAC9D;AAAA,EACF;AACA,QAAM,YAA4C,CAAC;AACnD,QAAM,aAA+B,CAAC;AAEtC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,KAAK,GAAG;AACxB,YAAM,EAAE,cAAc,mBAAmB,cAAc,GAAG,WAAW,IACnE,MAAM;AAER,YAAM,QAAQ;AAEd,gBAAU,QAAQ;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AACV,YAAM,EAAE,OAAO,MAAM,IAAI,sBAAsB,cAAc;AAE7D,YAAM,YAAY;AAElB,gBAAU,YAAY;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,KAAK,GAAG;AAC/B,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,YAAM,QAAQ;AAEd,gBAAU,QAAQ;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM,YAAY,MAAM;AACxB,UAAI,iBAAiB,SAAS,GAAG;AAC/B,mBAAW,KAAK,SAAS;AAAA,MAC3B;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,YAAM,QAAQ,KAAK,KAAK,MAAM,KAAK;AACnC,YAAM,QAAQ,OAAO;AAAA,IACvB,WAAW,OAAO,OAAO,0BAA0B,GAAG;AACpD,YAAM,UAAU;AAAA,QACd,GAAG,MAAM;AAAA,QACT,GAAG,MAAM;AAAA,MACX;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,WAAW,SAAS,GAAG;AACzB,UAAM,aAAa;AAAA,EACrB;AAEA,MAAI,MAAM,QAAQ,QAAQ;AACxB,UAAM,UAAU;AAAA,MACd,GAAG,MAAM;AAAA,MACT,MAAM,CAAC;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,QAAI,MAAM,eAAe;AACvB,YAAM,UAAU;AAAA,QACd,GAAG,MAAM;AAAA,QACT,QAAQ,MAAM;AAAA,QACd,MAAM;AAAA,MACR;AAAA,IACF;AAEA,QAAI,MAAM,QAAQ,MAAM;AACtB,YAAM,UAAU;AAAA,QACd,GAAG,MAAM;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,OAAO,UAAU;AAC/B;",
+  "sourcesContent": ["import { Children, type ReactNode } from 'react';\n\nimport { Intent } from '../../../core/slots/Intent/Intent.js';\nimport { isSlot } from '../../../core/utils/is-slot.js';\nimport { iterateSparklineSlots } from '../../core/components/sparkline-display/utils/iterate-sparkline-slots.js';\nimport { ColorRule, isValidColorRule } from '../../core/slots/ColorRule.js';\nimport { sanitizeProps } from '../../core/slots/toolbar/CompactToolbar.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.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 {\n  PartialSingleValueGridConfig,\n  SingleValueGridAccessorsConfig,\n  type SingleValueGridIntentsConfig,\n  type SingleValueGridProps,\n  type SingleValueGridToolbarConfig,\n} from '../types/single-value-grid.js';\n\ntype SlotsConfig = PartialSingleValueGridConfig & {\n  intents: SingleValueGridIntentsConfig;\n  toolbar: SingleValueGridToolbarConfig;\n};\n\nexport const iterateSlots = (\n  children: ReactNode,\n  props: Pick<SingleValueGridProps, 'alignment' | 'seriesActions'>,\n): SlotsConfig & {\n  accessors: SingleValueGridAccessorsConfig;\n} => {\n  const slots: SlotsConfig = {\n    intents: { grid: [], single: undefined, none: true },\n    toolbar: {\n      hidden: false,\n      placement: (props.alignment || '') === 'end' ? 'top-left' : 'top-right',\n      'data-dt-content': '',\n      'data-dt-name': '',\n      'data-dt-children-name': '',\n      'data-dt-features': '',\n      'data-dt-properties': '',\n      'data-dt-mouse-over': '',\n      'data-dt-value-content': '',\n      'data-dt-children-value-content': '',\n      'data-dt-ancestor': '',\n    },\n  };\n  const accessors: SingleValueGridAccessorsConfig = {};\n  const colorRules: ColorRuleProps[] = [];\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Value)) {\n      const { dataAccessor, formatterAccessor, unitAccessor, ...valueProps } =\n        child.props;\n\n      slots.value = valueProps;\n\n      accessors.value = {\n        dataAccessor,\n        formatterAccessor,\n        unitAccessor,\n      };\n    } else if (isSlot(child, Sparkline)) {\n      const {\n        children: sparklineSlots,\n        dataAccessor,\n        colorAccessor,\n        ...sparklineProps\n      } = child.props;\n      const { xAxis, yAxis } = iterateSparklineSlots(sparklineSlots);\n\n      slots.sparkline = sparklineProps;\n\n      accessors.sparkline = {\n        dataAccessor,\n        colorAccessor,\n        xAxis,\n        yAxis,\n      };\n    } else if (isSlot(child, Trend)) {\n      const {\n        directionAccessor,\n        valueAccessor,\n        labelAccessor,\n        formatterAccessor,\n        inverseTrendAccessor,\n        ...trendProps\n      } = child.props;\n\n      slots.trend = trendProps;\n\n      accessors.trend = {\n        directionAccessor,\n        valueAccessor,\n        labelAccessor,\n        formatterAccessor,\n        inverseTrendAccessor,\n      };\n    } else if (isSlot(child, ColorRule)) {\n      const colorRule = child.props;\n      if (isValidColorRule(colorRule)) {\n        colorRules.push(colorRule);\n      }\n    } else if (isSlot(child, Intent)) {\n      slots.intents.grid.push(child.props);\n      slots.intents.none = false;\n    } else if (isSlot(child, SingleValueGridToolbarSlot)) {\n      slots.toolbar = {\n        ...slots.toolbar,\n        ...sanitizeProps(child.props),\n        ...extractBehaviorTrackingProps(child.props),\n      };\n    }\n  });\n\n  if (colorRules.length > 0) {\n    slots.colorRules = colorRules;\n  }\n\n  if (slots.toolbar.hidden) {\n    slots.intents = {\n      ...slots.intents,\n      grid: [],\n      none: true,\n    };\n  } else {\n    if (props.seriesActions) {\n      slots.intents = {\n        ...slots.intents,\n        single: props.seriesActions,\n        none: false,\n      };\n    }\n\n    if (slots.intents.none) {\n      slots.toolbar = {\n        ...slots.toolbar,\n        hidden: true,\n      };\n    }\n  }\n\n  return { ...slots, accessors };\n};\n"],
+  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,WAAW,wBAAwB;AAC5C,SAAS,qBAAqB;AAE9B,SAAS,oCAAoC;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,aAAa;AAcf,MAAM,eAAe,CAC1B,UACA,UAGG;AACH,QAAM,QAAqB;AAAA,IACzB,SAAS,EAAE,MAAM,CAAC,GAAG,QAAQ,QAAW,MAAM,KAAK;AAAA,IACnD,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,YAAY,MAAM,aAAa,QAAQ,QAAQ,aAAa;AAAA,MAC5D,mBAAmB;AAAA,MACnB,gBAAgB;AAAA,MAChB,yBAAyB;AAAA,MACzB,oBAAoB;AAAA,MACpB,sBAAsB;AAAA,MACtB,sBAAsB;AAAA,MACtB,yBAAyB;AAAA,MACzB,kCAAkC;AAAA,MAClC,oBAAoB;AAAA,IACtB;AAAA,EACF;AACA,QAAM,YAA4C,CAAC;AACnD,QAAM,aAA+B,CAAC;AACtC,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,KAAK,GAAG;AACxB,YAAM,EAAE,cAAc,mBAAmB,cAAc,GAAG,WAAW,IACnE,MAAM;AAER,YAAM,QAAQ;AAEd,gBAAU,QAAQ;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AACV,YAAM,EAAE,OAAO,MAAM,IAAI,sBAAsB,cAAc;AAE7D,YAAM,YAAY;AAElB,gBAAU,YAAY;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,KAAK,GAAG;AAC/B,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL,IAAI,MAAM;AAEV,YAAM,QAAQ;AAEd,gBAAU,QAAQ;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM,YAAY,MAAM;AACxB,UAAI,iBAAiB,SAAS,GAAG;AAC/B,mBAAW,KAAK,SAAS;AAAA,MAC3B;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,YAAM,QAAQ,KAAK,KAAK,MAAM,KAAK;AACnC,YAAM,QAAQ,OAAO;AAAA,IACvB,WAAW,OAAO,OAAO,0BAA0B,GAAG;AACpD,YAAM,UAAU;AAAA,QACd,GAAG,MAAM;AAAA,QACT,GAAG,cAAc,MAAM,KAAK;AAAA,QAC5B,GAAG,6BAA6B,MAAM,KAAK;AAAA,MAC7C;AAAA,IACF;AAAA,EACF,CAAC;AAED,MAAI,WAAW,SAAS,GAAG;AACzB,UAAM,aAAa;AAAA,EACrB;AAEA,MAAI,MAAM,QAAQ,QAAQ;AACxB,UAAM,UAAU;AAAA,MACd,GAAG,MAAM;AAAA,MACT,MAAM,CAAC;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF,OAAO;AACL,QAAI,MAAM,eAAe;AACvB,YAAM,UAAU;AAAA,QACd,GAAG,MAAM;AAAA,QACT,QAAQ,MAAM;AAAA,QACd,MAAM;AAAA,MACR;AAAA,IACF;AAEA,QAAI,MAAM,QAAQ,MAAM;AACtB,YAAM,UAAU;AAAA,QACd,GAAG,MAAM;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,GAAG,OAAO,UAAU;AAC/B;",
   "names": []
 }

package/esm/charts/timeseries/TimeseriesChartRoot.js

@@ -32,6 +32,7 @@ import {
   hasSeriesWithDatapoints,
   splitTimeseriesPerVariant
 } from "./utils/timeseries.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { ChartLayout } from "../core/components/chart-layout/ChartLayout.js";
 import { useAutoLegendRefresh } from "../core/components/chart-layout/hooks/useAutoLegendRefresh.js";
@@ -70,6 +71,7 @@ const TimeseriesChartRoot = forwardRef((props, forwardedRef) => {
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow
   } = props;
+  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);
   const chartHeight = coerceSizeValue(heightProp) || TIMESERIES_CHART_DEFAULT_HEIGHT;
   const dataPerVariant = splitTimeseriesPerVariant(
     data ?? [],
@@ -132,6 +134,7 @@ const TimeseriesChartRoot = forwardRef((props, forwardedRef) => {
                   showLoader: loading,
                   className,
                   style,
+                  ...behaviorTrackingProps,
                   "data-dtrum-mask": dataDtrumMask,
                   "data-dtrum-allow": dataDtrumAllow,
                   "data-dt-component": COMPONENT_NAME_BEHAVIOURAL_TRACKING,

package/esm/charts/timeseries/TimeseriesChartRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/timeseries/TimeseriesChartRoot.tsx"],
-  "sourcesContent": ["import { forwardRef, type PropsWithChildren, type ReactElement } from 'react';\n\nimport { TimeseriesChartLegend } from './components/legend/TimeseriesChartLegend.js';\nimport { TIMESERIES_CHART_DEFAULT_VARIANT } from './constants.js';\nimport { TimeseriesChartLoadingContext } from './context/TimeseriesChartLoading.context.js';\nimport { TimeseriesRawDataContext } from './context/TimeseriesRawData.context.js';\nimport { useTimeseriesChartConfig } from './hooks/useTimeseriesChartConfig.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport { TimeseriesChartIdProvider } from './providers/TimeseriesChartIdProvider.js';\nimport { TimeseriesConfigProvider } from './providers/TimeseriesConfigProviders.js';\nimport { TimeseriesDataProvider } from './providers/TimeseriesDataProvider.js';\nimport { TimeseriesFilteredDataProvider } from './providers/TimeseriesFilteredDataProvider.js';\nimport { TimeseriesMinMaxXAxisProvider } from './providers/TimeseriesMinMaxXAxisProvider.js';\nimport { Annotations } from './slots/annotations/Annotations.js';\nimport { Marker } from './slots/annotations/Marker.js';\nimport { Track } from './slots/annotations/Track.js';\nimport { Legend } from './slots/Legend.js';\nimport { Pan } from './slots/Pan.js';\nimport { Select } from './slots/Select.js';\nimport { Area } from './slots/shapes/Area.js';\nimport { Band } from './slots/shapes/Band.js';\nimport { Bar } from './slots/shapes/Bar.js';\nimport { Line } from './slots/shapes/Line.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport { Zoom } from './slots/Zoom.js';\nimport { TimeseriesChart as TimeseriesChartInternal } from './TimeseriesChart.js';\nimport { TimeseriesChartProps } from './types/timeseries-props.js';\nimport { TimeseriesChartRef } from './types/timeseries-ref.js';\nimport {\n  hasSeriesWithDatapoints,\n  splitTimeseriesPerVariant,\n} from './utils/timeseries.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { ChartSeriesActionContext } from '../core/components/series-action/ChartSeriesActionContext.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 { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\nimport { AnnotationsTooltip } from './slots/annotations/Tooltip.js';\nimport { TimeseriesChartDownloadCSVSlot } from './slots/DownloadCSV.js';\n\n/**\n * The default max height used for the timeserieschart when no explicit\n * height is given\n */\nconst TIMESERIES_CHART_DEFAULT_HEIGHT = 300;\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'TimeseriesChart';\n\n/**\n * TimeseriesChart component\n */\nconst TimeseriesChartRoot = forwardRef<\n  TimeseriesChartRef,\n  TimeseriesChartProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    data,\n    gapPolicy,\n    pointsDisplay,\n    colorPalette,\n    truncationMode,\n    variant = TIMESERIES_CHART_DEFAULT_VARIANT,\n    valueRepresentation,\n    height: heightProp,\n    width,\n    seriesActions,\n    onMessage,\n    loading = false,\n    curve,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n\n  const chartHeight =\n    coerceSizeValue(heightProp) || TIMESERIES_CHART_DEFAULT_HEIGHT;\n  const dataPerVariant = splitTimeseriesPerVariant(\n    data ?? [],\n    children,\n    variant,\n  );\n  const config = useTimeseriesChartConfig(children, {\n    gapPolicy,\n    pointsDisplay,\n    valueRepresentation,\n    colorPalette,\n    truncationMode,\n    curve,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  });\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const { shapePriority, ...rawDataPerVariant } = dataPerVariant;\n  const hasSeries = hasSeriesWithDatapoints(dataPerVariant);\n\n  const {\n    position: legendPosition,\n    onRatioChange,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    hidden: isLegendHidden,\n  } = config.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <TimeseriesChartIdProvider>\n      <TimeseriesChartLoadingContext.Provider value={loading}>\n        <TimeseriesConfigProvider config={config}>\n          <TimeseriesRawDataContext.Provider value={rawDataPerVariant}>\n            <TimeseriesDataProvider\n              data={dataPerVariant}\n              valueRepresentation={config.valueRepresentation}\n              onMessage={onMessage}\n            >\n              <TimeseriesMinMaxXAxisProvider>\n                <ChartSeriesActionContext.Provider\n                  value={{\n                    chartSeriesActions: seriesActions as (\n                      series: unknown,\n                      datapoint?: unknown,\n                    ) => ReactElement<PropsWithChildren>,\n                  }}\n                >\n                  <StoreProvider\n                    data={dataPerVariant}\n                    currentDomain={config.currentZoom}\n                    initialDomain={config.initialZoom}\n                    infiniteZoom={config.infiniteZoom}\n                  >\n                    <TimeseriesFilteredDataProvider>\n                      <ChartLayout\n                        ref={chartLayoutRef}\n                        chartHeight={chartHeight}\n                        chartWidth={width}\n                        isEmpty={!hasSeries}\n                        emptyState={emptyState}\n                        errorState={errorState}\n                        showLoader={loading}\n                        className={className}\n                        style={style}\n                        data-dtrum-mask={dataDtrumMask}\n                        data-dtrum-allow={dataDtrumAllow}\n                        data-dt-component={COMPONENT_NAME_BEHAVIOURAL_TRACKING}\n                      >\n                        <ChartLayout.Graph>\n                          <TimeseriesChartInternal\n                            ref={forwardedRef}\n                            config={config}\n                          />\n                        </ChartLayout.Graph>\n                        {!isLegendHidden && (\n                          <ChartLayout.Legend\n                            position={legendPosition}\n                            initialRatio={legendRatio}\n                            onResize={onRatioChange}\n                          >\n                            <TimeseriesChartLegend />\n                          </ChartLayout.Legend>\n                        )}\n                      </ChartLayout>\n                    </TimeseriesFilteredDataProvider>\n                  </StoreProvider>\n                </ChartSeriesActionContext.Provider>\n              </TimeseriesMinMaxXAxisProvider>\n            </TimeseriesDataProvider>\n          </TimeseriesRawDataContext.Provider>\n        </TimeseriesConfigProvider>\n      </TimeseriesChartLoadingContext.Provider>\n    </TimeseriesChartIdProvider>\n  );\n});\n\n(\n  TimeseriesChartRoot as typeof TimeseriesChartRoot & { displayName: string }\n).displayName = 'TimeseriesChartRoot';\n\n/**\n * The `TimeseriesChart` visually represents data in sequential order of time.\n * It's used to observe trends, patterns, and fluctuations in the data over a\n * specific time period.\n * @public\n */\nexport const TimeseriesChart = Object.assign(TimeseriesChartRoot, {\n  Band,\n  Legend,\n  YAxis,\n  XAxis,\n  Tooltip,\n  Annotations,\n  Line,\n  Area,\n  Bar,\n  ThresholdIndicator,\n  Select,\n  Intent,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n  Toolbar,\n  DownloadCSV: TimeseriesChartDownloadCSVSlot,\n  Pan,\n  Zoom,\n});\n\n/**\n * Annotations Slots\n * @public\n */\nexport const TimeseriesAnnotations = Object.assign(\n  {},\n  {\n    Marker,\n    Track,\n    Tooltip: AnnotationsTooltip,\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { forwardRef, type PropsWithChildren, type ReactElement } from 'react';\n\nimport { TimeseriesChartLegend } from './components/legend/TimeseriesChartLegend.js';\nimport { TIMESERIES_CHART_DEFAULT_VARIANT } from './constants.js';\nimport { TimeseriesChartLoadingContext } from './context/TimeseriesChartLoading.context.js';\nimport { TimeseriesRawDataContext } from './context/TimeseriesRawData.context.js';\nimport { useTimeseriesChartConfig } from './hooks/useTimeseriesChartConfig.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport { TimeseriesChartIdProvider } from './providers/TimeseriesChartIdProvider.js';\nimport { TimeseriesConfigProvider } from './providers/TimeseriesConfigProviders.js';\nimport { TimeseriesDataProvider } from './providers/TimeseriesDataProvider.js';\nimport { TimeseriesFilteredDataProvider } from './providers/TimeseriesFilteredDataProvider.js';\nimport { TimeseriesMinMaxXAxisProvider } from './providers/TimeseriesMinMaxXAxisProvider.js';\nimport { Annotations } from './slots/annotations/Annotations.js';\nimport { Marker } from './slots/annotations/Marker.js';\nimport { Track } from './slots/annotations/Track.js';\nimport { Legend } from './slots/Legend.js';\nimport { Pan } from './slots/Pan.js';\nimport { Select } from './slots/Select.js';\nimport { Area } from './slots/shapes/Area.js';\nimport { Band } from './slots/shapes/Band.js';\nimport { Bar } from './slots/shapes/Bar.js';\nimport { Line } from './slots/shapes/Line.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { Toolbar } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { XAxis } from './slots/XAxis.js';\nimport { YAxis } from './slots/YAxis.js';\nimport { Zoom } from './slots/Zoom.js';\nimport { TimeseriesChart as TimeseriesChartInternal } from './TimeseriesChart.js';\nimport { TimeseriesChartProps } from './types/timeseries-props.js';\nimport { TimeseriesChartRef } from './types/timeseries-ref.js';\nimport {\n  hasSeriesWithDatapoints,\n  splitTimeseriesPerVariant,\n} from './utils/timeseries.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { Intent } from '../../core/slots/Intent/Intent.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport { useAutoLegendRefresh } from '../core/components/chart-layout/hooks/useAutoLegendRefresh.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { ChartSeriesActionContext } from '../core/components/series-action/ChartSeriesActionContext.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 { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\nimport { AnnotationsTooltip } from './slots/annotations/Tooltip.js';\nimport { TimeseriesChartDownloadCSVSlot } from './slots/DownloadCSV.js';\n\n/**\n * The default max height used for the timeserieschart when no explicit\n * height is given\n */\nconst TIMESERIES_CHART_DEFAULT_HEIGHT = 300;\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'TimeseriesChart';\n\n/**\n * TimeseriesChart component\n */\nconst TimeseriesChartRoot = forwardRef<\n  TimeseriesChartRef,\n  TimeseriesChartProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    data,\n    gapPolicy,\n    pointsDisplay,\n    colorPalette,\n    truncationMode,\n    variant = TIMESERIES_CHART_DEFAULT_VARIANT,\n    valueRepresentation,\n    height: heightProp,\n    width,\n    seriesActions,\n    onMessage,\n    loading = false,\n    curve,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const chartHeight =\n    coerceSizeValue(heightProp) || TIMESERIES_CHART_DEFAULT_HEIGHT;\n  const dataPerVariant = splitTimeseriesPerVariant(\n    data ?? [],\n    children,\n    variant,\n  );\n  const config = useTimeseriesChartConfig(children, {\n    gapPolicy,\n    pointsDisplay,\n    valueRepresentation,\n    colorPalette,\n    truncationMode,\n    curve,\n    initialZoom,\n    currentZoom,\n    onZoomChange,\n    infiniteZoom,\n  });\n\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const { shapePriority, ...rawDataPerVariant } = dataPerVariant;\n  const hasSeries = hasSeriesWithDatapoints(dataPerVariant);\n\n  const {\n    position: legendPosition,\n    onRatioChange,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    hidden: isLegendHidden,\n  } = config.legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <TimeseriesChartIdProvider>\n      <TimeseriesChartLoadingContext.Provider value={loading}>\n        <TimeseriesConfigProvider config={config}>\n          <TimeseriesRawDataContext.Provider value={rawDataPerVariant}>\n            <TimeseriesDataProvider\n              data={dataPerVariant}\n              valueRepresentation={config.valueRepresentation}\n              onMessage={onMessage}\n            >\n              <TimeseriesMinMaxXAxisProvider>\n                <ChartSeriesActionContext.Provider\n                  value={{\n                    chartSeriesActions: seriesActions as (\n                      series: unknown,\n                      datapoint?: unknown,\n                    ) => ReactElement<PropsWithChildren>,\n                  }}\n                >\n                  <StoreProvider\n                    data={dataPerVariant}\n                    currentDomain={config.currentZoom}\n                    initialDomain={config.initialZoom}\n                    infiniteZoom={config.infiniteZoom}\n                  >\n                    <TimeseriesFilteredDataProvider>\n                      <ChartLayout\n                        ref={chartLayoutRef}\n                        chartHeight={chartHeight}\n                        chartWidth={width}\n                        isEmpty={!hasSeries}\n                        emptyState={emptyState}\n                        errorState={errorState}\n                        showLoader={loading}\n                        className={className}\n                        style={style}\n                        {...behaviorTrackingProps}\n                        data-dtrum-mask={dataDtrumMask}\n                        data-dtrum-allow={dataDtrumAllow}\n                        data-dt-component={COMPONENT_NAME_BEHAVIOURAL_TRACKING}\n                      >\n                        <ChartLayout.Graph>\n                          <TimeseriesChartInternal\n                            ref={forwardedRef}\n                            config={config}\n                          />\n                        </ChartLayout.Graph>\n                        {!isLegendHidden && (\n                          <ChartLayout.Legend\n                            position={legendPosition}\n                            initialRatio={legendRatio}\n                            onResize={onRatioChange}\n                          >\n                            <TimeseriesChartLegend />\n                          </ChartLayout.Legend>\n                        )}\n                      </ChartLayout>\n                    </TimeseriesFilteredDataProvider>\n                  </StoreProvider>\n                </ChartSeriesActionContext.Provider>\n              </TimeseriesMinMaxXAxisProvider>\n            </TimeseriesDataProvider>\n          </TimeseriesRawDataContext.Provider>\n        </TimeseriesConfigProvider>\n      </TimeseriesChartLoadingContext.Provider>\n    </TimeseriesChartIdProvider>\n  );\n});\n\n(\n  TimeseriesChartRoot as typeof TimeseriesChartRoot & { displayName: string }\n).displayName = 'TimeseriesChartRoot';\n\n/**\n * The `TimeseriesChart` visually represents data in sequential order of time.\n * It's used to observe trends, patterns, and fluctuations in the data over a\n * specific time period.\n * @public\n */\nexport const TimeseriesChart = Object.assign(TimeseriesChartRoot, {\n  Band,\n  Legend,\n  YAxis,\n  XAxis,\n  Tooltip,\n  Annotations,\n  Line,\n  Area,\n  Bar,\n  ThresholdIndicator,\n  Select,\n  Intent,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  ColorRule,\n  Toolbar,\n  DownloadCSV: TimeseriesChartDownloadCSVSlot,\n  Pan,\n  Zoom,\n});\n\n/**\n * Annotations Slots\n * @public\n */\nexport const TimeseriesAnnotations = Object.assign(\n  {},\n  {\n    Marker,\n    Track,\n    Tooltip: AnnotationsTooltip,\n  },\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css

@@ -1,6 +1,6 @@
-._19z0vdp0-3-1-1 {
+._19z0vdp0-3-2-0 {
   position: relative;
 }
-._19z0vdp1-3-1-1 {
+._19z0vdp1-3-2-0 {
   touch-action: none;
 }

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js

@@ -1,6 +1,6 @@
 import "./TimeseriesTimeBottomAxisArea.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var timeBottomAxisContainer = _7a468({ defaultClassName: "_19z0vdp0-3-1-1", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = _7a468({ defaultClassName: "_19z0vdp0-3-2-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   timeBottomAxisContainer
 };

package/esm/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css.ts"],
-  "sourcesContent": ["import './TimeseriesTimeBottomAxisArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var timeBottomAxisContainer = _7a468({defaultClassName:'_19z0vdp0-3-1-1',variantClassNames:{isTouchableDevice:{true:'_19z0vdp1-3-1-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './TimeseriesTimeBottomAxisArea.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var timeBottomAxisContainer = _7a468({defaultClassName:'_19z0vdp0-3-2-0',variantClassNames:{isTouchableDevice:{true:'_19z0vdp1-3-2-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,mBAAkB,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/timeseries/components/displays/area/AreaChartDisplay.js

@@ -29,7 +29,7 @@ const AreaChartDisplay = ({
     index,
     (point) => definedAccessor(point, datapointsMap)
   );
-  return /* @__PURE__ */ jsx("div", { role: "application", "aria-label": AREA_CHART_DISPLAY_ARIA_LABEL, children: areaSeries.map((series) => {
+  return /* @__PURE__ */ jsx("figure", { "aria-label": AREA_CHART_DISPLAY_ARIA_LABEL, children: areaSeries.map((series) => {
     const seriesMetadata = safeGet(seriesMap, series);
     const displayPoints = shouldDisplayPoints(
       seriesMetadata.pointsDisplay,

package/esm/charts/timeseries/components/displays/area/AreaChartDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/displays/area/AreaChartDisplay.tsx"],
-  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { definedAccessor, xAxisAccessor as x, y0, y1 } from './accessors.js';\nimport { AreaCanvas } from '../../../../core/components/canvas/components/AreaCanvas.js';\nimport { shouldDisplayPoints } from '../../../../core/components/canvas/utils/display-points.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../../core/constants.js';\nimport type { ChartUnit } from '../../../../core/types/chart-unit.js';\nimport { TimeseriesDatapoint } from '../../../../core/types/timeseries.js';\nimport { isIsolatedPoint } from '../../../../core/utils/is-isolated-point.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { AREA_CHART_DISPLAY_ARIA_LABEL } from '../../../constants.js';\nimport { useSeriesCurve } from '../../../hooks/useSeriesCurve.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useYScales } from '../../../hooks/useYScales.js';\nimport { TimeseriesAreaSlotProps } from '../../../types/timeseries.js';\nimport { getYScaleByUnit } from '../../../utils/yAxis.js';\nimport { BaseDisplayProps } from '../shared/types.js';\nimport { getClampedTimeScale } from '../shared/utils/clamp-value.js';\n\nexport interface AreaChartDisplayProps extends BaseDisplayProps {\n  series: TimeseriesAreaSlotProps[];\n}\n\n/*\n * Displays the passed series as stacked area chart.\n * The series are stacked based on their order, starting with the first series rendered at the bottom.\n */\nexport const AreaChartDisplay = ({\n  series: timeseries,\n  xScale,\n}: AreaChartDisplayProps) => {\n  const yScale = useYScales();\n  const curve = useSeriesCurve();\n\n  const { width, height } = useGridPlotSize();\n  const { seriesMap, datapointsMap } = useTimeseriesFilteredData();\n\n  const areaSeries = useMemo(() => [...timeseries].reverse(), [timeseries]);\n\n  const yScaleByUnit = (unit: ChartUnit) => getYScaleByUnit(unit, yScale);\n\n  const clampedScale = getClampedTimeScale(xScale);\n\n  const isolatedAccessor =\n    (displayPoints: boolean) =>\n    (datapoints: TimeseriesDatapoint[], index: number) =>\n      displayPoints ||\n      isIsolatedPoint(datapoints, index, (point) =>\n        definedAccessor(point, datapointsMap),\n      );\n\n  return (\n    <div role=\"application\" aria-label={AREA_CHART_DISPLAY_ARIA_LABEL}>\n      {areaSeries.map((series) => {\n        const seriesMetadata = safeGet(seriesMap, series);\n\n        const displayPoints = shouldDisplayPoints(\n          seriesMetadata.pointsDisplay,\n          width,\n          series.datapoints.length,\n        );\n\n        return (\n          <AreaCanvas\n            key={seriesMetadata.id}\n            data={series.datapoints}\n            canvasWidth={width}\n            canvasHeight={height}\n            x={x(xScale, datapointsMap, clampedScale)}\n            y0={y0(yScaleByUnit, seriesMetadata, datapointsMap)}\n            y1={y1(yScaleByUnit, seriesMetadata, datapointsMap)}\n            defined={(point) => definedAccessor(point, datapointsMap)}\n            displayScatterPlot={isolatedAccessor(displayPoints)}\n            color={() => seriesMetadata.color.Default}\n            opacity={DEFAULT_FILL_OPACITY}\n            curve={curve}\n            enableDotOverflow\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nAreaChartDisplay['displayName'] = 'AreaChartDisplay';\n"],
-  "mappings": "AAgEU;AAhEV,SAAS,eAAe;AAExB,SAAS,iBAAiB,iBAAiB,GAAG,IAAI,UAAU;AAC5D,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAGrC,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,qCAAqC;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAE3B,SAAS,uBAAuB;AAEhC,SAAS,2BAA2B;AAU7B,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAQ;AAAA,EACR;AACF,MAA6B;AAC3B,QAAM,SAAS,WAAW;AAC1B,QAAM,QAAQ,eAAe;AAE7B,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,EAAE,WAAW,cAAc,IAAI,0BAA0B;AAE/D,QAAM,aAAa,QAAQ,MAAM,CAAC,GAAG,UAAU,EAAE,QAAQ,GAAG,CAAC,UAAU,CAAC;AAExE,QAAM,eAAe,CAAC,SAAoB,gBAAgB,MAAM,MAAM;AAEtE,QAAM,eAAe,oBAAoB,MAAM;AAE/C,QAAM,mBACJ,CAAC,kBACD,CAAC,YAAmC,UAClC,iBACA;AAAA,IAAgB;AAAA,IAAY;AAAA,IAAO,CAAC,UAClC,gBAAgB,OAAO,aAAa;AAAA,EACtC;AAEJ,SACE,oBAAC,SAAI,MAAK,eAAc,cAAY,+BACjC,qBAAW,IAAI,CAAC,WAAW;AAC1B,UAAM,iBAAiB,QAAQ,WAAW,MAAM;AAEhD,UAAM,gBAAgB;AAAA,MACpB,eAAe;AAAA,MACf;AAAA,MACA,OAAO,WAAW;AAAA,IACpB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,OAAO;AAAA,QACb,aAAa;AAAA,QACb,cAAc;AAAA,QACd,GAAG,EAAE,QAAQ,eAAe,YAAY;AAAA,QACxC,IAAI,GAAG,cAAc,gBAAgB,aAAa;AAAA,QAClD,IAAI,GAAG,cAAc,gBAAgB,aAAa;AAAA,QAClD,SAAS,CAAC,UAAU,gBAAgB,OAAO,aAAa;AAAA,QACxD,oBAAoB,iBAAiB,aAAa;AAAA,QAClD,OAAO,MAAM,eAAe,MAAM;AAAA,QAClC,SAAS;AAAA,QACT;AAAA,QACA,mBAAiB;AAAA;AAAA,MAZZ,eAAe;AAAA,IAatB;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
+  "sourcesContent": ["import { useMemo } from 'react';\n\nimport { definedAccessor, xAxisAccessor as x, y0, y1 } from './accessors.js';\nimport { AreaCanvas } from '../../../../core/components/canvas/components/AreaCanvas.js';\nimport { shouldDisplayPoints } from '../../../../core/components/canvas/utils/display-points.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../../core/constants.js';\nimport type { ChartUnit } from '../../../../core/types/chart-unit.js';\nimport { TimeseriesDatapoint } from '../../../../core/types/timeseries.js';\nimport { isIsolatedPoint } from '../../../../core/utils/is-isolated-point.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { AREA_CHART_DISPLAY_ARIA_LABEL } from '../../../constants.js';\nimport { useSeriesCurve } from '../../../hooks/useSeriesCurve.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useYScales } from '../../../hooks/useYScales.js';\nimport { TimeseriesAreaSlotProps } from '../../../types/timeseries.js';\nimport { getYScaleByUnit } from '../../../utils/yAxis.js';\nimport { BaseDisplayProps } from '../shared/types.js';\nimport { getClampedTimeScale } from '../shared/utils/clamp-value.js';\n\nexport interface AreaChartDisplayProps extends BaseDisplayProps {\n  series: TimeseriesAreaSlotProps[];\n}\n\n/*\n * Displays the passed series as stacked area chart.\n * The series are stacked based on their order, starting with the first series rendered at the bottom.\n */\nexport const AreaChartDisplay = ({\n  series: timeseries,\n  xScale,\n}: AreaChartDisplayProps) => {\n  const yScale = useYScales();\n  const curve = useSeriesCurve();\n\n  const { width, height } = useGridPlotSize();\n  const { seriesMap, datapointsMap } = useTimeseriesFilteredData();\n\n  const areaSeries = useMemo(() => [...timeseries].reverse(), [timeseries]);\n\n  const yScaleByUnit = (unit: ChartUnit) => getYScaleByUnit(unit, yScale);\n\n  const clampedScale = getClampedTimeScale(xScale);\n\n  const isolatedAccessor =\n    (displayPoints: boolean) =>\n    (datapoints: TimeseriesDatapoint[], index: number) =>\n      displayPoints ||\n      isIsolatedPoint(datapoints, index, (point) =>\n        definedAccessor(point, datapointsMap),\n      );\n\n  return (\n    <figure aria-label={AREA_CHART_DISPLAY_ARIA_LABEL}>\n      {areaSeries.map((series) => {\n        const seriesMetadata = safeGet(seriesMap, series);\n\n        const displayPoints = shouldDisplayPoints(\n          seriesMetadata.pointsDisplay,\n          width,\n          series.datapoints.length,\n        );\n\n        return (\n          <AreaCanvas\n            key={seriesMetadata.id}\n            data={series.datapoints}\n            canvasWidth={width}\n            canvasHeight={height}\n            x={x(xScale, datapointsMap, clampedScale)}\n            y0={y0(yScaleByUnit, seriesMetadata, datapointsMap)}\n            y1={y1(yScaleByUnit, seriesMetadata, datapointsMap)}\n            defined={(point) => definedAccessor(point, datapointsMap)}\n            displayScatterPlot={isolatedAccessor(displayPoints)}\n            color={() => seriesMetadata.color.Default}\n            opacity={DEFAULT_FILL_OPACITY}\n            curve={curve}\n            enableDotOverflow\n          />\n        );\n      })}\n    </figure>\n  );\n};\n\nAreaChartDisplay['displayName'] = 'AreaChartDisplay';\n"],
+  "mappings": "AAgEU;AAhEV,SAAS,eAAe;AAExB,SAAS,iBAAiB,iBAAiB,GAAG,IAAI,UAAU;AAC5D,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAGrC,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,qCAAqC;AAC9C,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAE3B,SAAS,uBAAuB;AAEhC,SAAS,2BAA2B;AAU7B,MAAM,mBAAmB,CAAC;AAAA,EAC/B,QAAQ;AAAA,EACR;AACF,MAA6B;AAC3B,QAAM,SAAS,WAAW;AAC1B,QAAM,QAAQ,eAAe;AAE7B,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,EAAE,WAAW,cAAc,IAAI,0BAA0B;AAE/D,QAAM,aAAa,QAAQ,MAAM,CAAC,GAAG,UAAU,EAAE,QAAQ,GAAG,CAAC,UAAU,CAAC;AAExE,QAAM,eAAe,CAAC,SAAoB,gBAAgB,MAAM,MAAM;AAEtE,QAAM,eAAe,oBAAoB,MAAM;AAE/C,QAAM,mBACJ,CAAC,kBACD,CAAC,YAAmC,UAClC,iBACA;AAAA,IAAgB;AAAA,IAAY;AAAA,IAAO,CAAC,UAClC,gBAAgB,OAAO,aAAa;AAAA,EACtC;AAEJ,SACE,oBAAC,YAAO,cAAY,+BACjB,qBAAW,IAAI,CAAC,WAAW;AAC1B,UAAM,iBAAiB,QAAQ,WAAW,MAAM;AAEhD,UAAM,gBAAgB;AAAA,MACpB,eAAe;AAAA,MACf;AAAA,MACA,OAAO,WAAW;AAAA,IACpB;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,OAAO;AAAA,QACb,aAAa;AAAA,QACb,cAAc;AAAA,QACd,GAAG,EAAE,QAAQ,eAAe,YAAY;AAAA,QACxC,IAAI,GAAG,cAAc,gBAAgB,aAAa;AAAA,QAClD,IAAI,GAAG,cAAc,gBAAgB,aAAa;AAAA,QAClD,SAAS,CAAC,UAAU,gBAAgB,OAAO,aAAa;AAAA,QACxD,oBAAoB,iBAAiB,aAAa;AAAA,QAClD,OAAO,MAAM,eAAe,MAAM;AAAA,QAClC,SAAS;AAAA,QACT;AAAA,QACA,mBAAiB;AAAA;AAAA,MAZZ,eAAe;AAAA,IAatB;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,iBAAiB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/timeseries/components/displays/bar/BarChartDisplay.js

@@ -14,7 +14,7 @@ const BarChartDisplay = ({
   const yScale = useYScales();
   const { width: widthPlot, height: heightPlot } = useGridPlotSize();
   const { seriesMap, datapointsMap } = useTimeseriesFilteredData();
-  return /* @__PURE__ */ jsx("div", { role: "application", "aria-label": BAR_CHART_DISPLAY_ARIA_LABEL, children: barSeries.map((series) => {
+  return /* @__PURE__ */ jsx("figure", { "aria-label": BAR_CHART_DISPLAY_ARIA_LABEL, children: barSeries.map((series) => {
     const seriesMetadata = safeGet(seriesMap, series);
     return /* @__PURE__ */ jsx(
       BarCanvas,

package/esm/charts/timeseries/components/displays/bar/BarChartDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/timeseries/components/displays/bar/BarChartDisplay.tsx"],
-  "sourcesContent": ["import { height, width, x, y } from './accessors.js';\nimport { BarCanvas } from '../../../../core/components/canvas/components/BarCanvas.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../../core/constants.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { BAR_CHART_DISPLAY_ARIA_LABEL } from '../../../constants.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useYScales } from '../../../hooks/useYScales.js';\nimport { TimeseriesBarSlotProps } from '../../../types/timeseries.js';\nimport { BaseDisplayProps } from '../shared/types.js';\n\nexport interface BarChartDisplayProps extends BaseDisplayProps {\n  series: TimeseriesBarSlotProps[];\n}\n\n/**\n * Displays the passed series as stacked bar chart.\n */\nexport const BarChartDisplay = ({\n  series: barSeries,\n  xScale,\n}: BarChartDisplayProps) => {\n  const yScale = useYScales();\n  const { width: widthPlot, height: heightPlot } = useGridPlotSize();\n  const { seriesMap, datapointsMap } = useTimeseriesFilteredData();\n\n  return (\n    <div role=\"application\" aria-label={BAR_CHART_DISPLAY_ARIA_LABEL}>\n      {barSeries.map((series) => {\n        const seriesMetadata = safeGet(seriesMap, series);\n\n        return (\n          <BarCanvas\n            key={seriesMetadata.id}\n            data={series.datapoints}\n            canvasWidth={widthPlot}\n            canvasHeight={heightPlot}\n            x={x(datapointsMap, xScale)}\n            y={y(datapointsMap, yScale)}\n            width={width(datapointsMap, xScale)}\n            height={height(datapointsMap, yScale)}\n            strokeWidth={1}\n            color={() => seriesMetadata.color.Default}\n            opacity={() => DEFAULT_FILL_OPACITY}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nBarChartDisplay['displayName'] = 'BarChartDisplay';\n"],
-  "mappings": "AAgCU;AAhCV,SAAS,QAAQ,OAAO,GAAG,SAAS;AACpC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,eAAe;AACxB,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAWpB,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAQ;AAAA,EACR;AACF,MAA4B;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,EAAE,OAAO,WAAW,QAAQ,WAAW,IAAI,gBAAgB;AACjE,QAAM,EAAE,WAAW,cAAc,IAAI,0BAA0B;AAE/D,SACE,oBAAC,SAAI,MAAK,eAAc,cAAY,8BACjC,oBAAU,IAAI,CAAC,WAAW;AACzB,UAAM,iBAAiB,QAAQ,WAAW,MAAM;AAEhD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,OAAO;AAAA,QACb,aAAa;AAAA,QACb,cAAc;AAAA,QACd,GAAG,EAAE,eAAe,MAAM;AAAA,QAC1B,GAAG,EAAE,eAAe,MAAM;AAAA,QAC1B,OAAO,MAAM,eAAe,MAAM;AAAA,QAClC,QAAQ,OAAO,eAAe,MAAM;AAAA,QACpC,aAAa;AAAA,QACb,OAAO,MAAM,eAAe,MAAM;AAAA,QAClC,SAAS,MAAM;AAAA;AAAA,MAVV,eAAe;AAAA,IAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
+  "sourcesContent": ["import { height, width, x, y } from './accessors.js';\nimport { BarCanvas } from '../../../../core/components/canvas/components/BarCanvas.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { DEFAULT_FILL_OPACITY } from '../../../../core/constants.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport { BAR_CHART_DISPLAY_ARIA_LABEL } from '../../../constants.js';\nimport { useTimeseriesFilteredData } from '../../../hooks/useTimeseriesFilteredData.js';\nimport { useYScales } from '../../../hooks/useYScales.js';\nimport { TimeseriesBarSlotProps } from '../../../types/timeseries.js';\nimport { BaseDisplayProps } from '../shared/types.js';\n\nexport interface BarChartDisplayProps extends BaseDisplayProps {\n  series: TimeseriesBarSlotProps[];\n}\n\n/**\n * Displays the passed series as stacked bar chart.\n */\nexport const BarChartDisplay = ({\n  series: barSeries,\n  xScale,\n}: BarChartDisplayProps) => {\n  const yScale = useYScales();\n  const { width: widthPlot, height: heightPlot } = useGridPlotSize();\n  const { seriesMap, datapointsMap } = useTimeseriesFilteredData();\n\n  return (\n    <figure aria-label={BAR_CHART_DISPLAY_ARIA_LABEL}>\n      {barSeries.map((series) => {\n        const seriesMetadata = safeGet(seriesMap, series);\n\n        return (\n          <BarCanvas\n            key={seriesMetadata.id}\n            data={series.datapoints}\n            canvasWidth={widthPlot}\n            canvasHeight={heightPlot}\n            x={x(datapointsMap, xScale)}\n            y={y(datapointsMap, yScale)}\n            width={width(datapointsMap, xScale)}\n            height={height(datapointsMap, yScale)}\n            strokeWidth={1}\n            color={() => seriesMetadata.color.Default}\n            opacity={() => DEFAULT_FILL_OPACITY}\n          />\n        );\n      })}\n    </figure>\n  );\n};\n\nBarChartDisplay['displayName'] = 'BarChartDisplay';\n"],
+  "mappings": "AAgCU;AAhCV,SAAS,QAAQ,OAAO,GAAG,SAAS;AACpC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,eAAe;AACxB,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;AAC1C,SAAS,kBAAkB;AAWpB,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAQ;AAAA,EACR;AACF,MAA4B;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,EAAE,OAAO,WAAW,QAAQ,WAAW,IAAI,gBAAgB;AACjE,QAAM,EAAE,WAAW,cAAc,IAAI,0BAA0B;AAE/D,SACE,oBAAC,YAAO,cAAY,8BACjB,oBAAU,IAAI,CAAC,WAAW;AACzB,UAAM,iBAAiB,QAAQ,WAAW,MAAM;AAEhD,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,OAAO;AAAA,QACb,aAAa;AAAA,QACb,cAAc;AAAA,QACd,GAAG,EAAE,eAAe,MAAM;AAAA,QAC1B,GAAG,EAAE,eAAe,MAAM;AAAA,QAC1B,OAAO,MAAM,eAAe,MAAM;AAAA,QAClC,QAAQ,OAAO,eAAe,MAAM;AAAA,QACpC,aAAa;AAAA,QACb,OAAO,MAAM,eAAe,MAAM;AAAA,QAClC,SAAS,MAAM;AAAA;AAAA,MAVV,eAAe;AAAA,IAWtB;AAAA,EAEJ,CAAC,GACH;AAEJ;AAEA,gBAAgB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/timeseries/components/displays/line/LineChartDisplay.js

@@ -27,7 +27,7 @@ const LineChartDisplay = ({ series, xScale }) => {
     (point) => definedAccessor(point, datapointsMap)
   );
   const clampedScale = getClampedTimeScale(xScale);
-  return /* @__PURE__ */ jsx("div", { role: "application", "aria-label": LINE_CHART_DISPLAY_ARIA_LABEL, children: lineSeries.map((series2) => {
+  return /* @__PURE__ */ jsx("figure", { "aria-label": LINE_CHART_DISPLAY_ARIA_LABEL, children: lineSeries.map((series2) => {
     const seriesMetadata = safeGet(seriesMap, series2);
     const displayPoints = shouldDisplayPoints(
       seriesMetadata.pointsDisplay,