@dynatrace/strato-components 3.1.3 → 3.2.1

package/editors/code-editor/CodeEditor.d.ts

@@ -14,21 +14,30 @@ import type { GutterConfiguration } from '../base-code-editor/configuration/getD
  * @public
  */
 export interface CodeEditorProps extends FormControlStateProps, StylingProps, DataTestId, AriaLabelingProps, MaskingProps, BehaviorTrackingProps {
-    /** The language for syntax highlighting and autocompletion.
+    /**
+     * The language for syntax highlighting and autocompletion.
      * @defaultValue 'other'
      */
     language?: 'json' | 'js' | 'jsx' | 'ts' | 'tsx' | 'md' | 'yaml' | 'other';
-    /** The ID for the DOM element. */
+    /**
+     * The ID for the DOM element.
+     */
     id?: string;
-    /** The value (i.e. contents) of the editor.
+    /**
+     * The contents of the editor.
      * @defaultValue ''
      */
     value?: string;
-    /** Callback that is called when the value in the editor changes. */
+    /**
+     * Callback that is called when the value in the editor changes.
+     */
     onChange?: (value: string) => void;
-    /** Displayed initially in the editor when there is no other content. */
+    /**
+     * Displayed initially in the editor when there is no other content.
+     */
     placeholder?: string;
-    /** Whether spellcheck should be enabled.
+    /**
+     * Whether spellcheck should be enabled.
      * @defaultValue false
      */
     spellCheck?: boolean;
@@ -37,26 +46,38 @@ export interface CodeEditorProps extends FormControlStateProps, StylingProps, Da
      * @defaultValue false
      */
     fullHeight?: boolean;
-    /** The start indices (character position) that should be folded initially in uncontrolled scenarios. */
+    /**
+     * The start indices (character position) that should be folded initially in uncontrolled scenarios.
+     */
     defaultFolding?: number[];
-    /** The start indices (character position) that should be folded initially in controlled scenarios.*/
+    /**
+     * The start indices (character position) that should be folded initially in controlled scenarios.
+     */
     folding?: number[];
-    /** Callback that is called when folding changes. */
+    /**
+     * Callback that is called when folding changes.
+     */
     onFoldingChange?: (values: number[]) => void;
-    /** Whether the input is readonly.
+    /**
+     * Whether the input is readonly.
      * @defaultValue false
      */
     readOnly?: boolean;
-    /** Whether long lines should be wrapped.
+    /**
+     * Whether long lines should be wrapped.
      * @defaultValue false
      */
     lineWrap?: boolean;
-    /** Callback that is called when the editor loses focus. */
+    /**
+     * Callback that is called when the editor loses focus.
+     */
     onBlur?: (e: FocusEvent) => void;
-    /** Callback that is called when the editor receives focus. */
+    /**
+     * Callback that is called when the editor receives focus.
+     */
     onFocus?: (e: FocusEvent) => void;
     /**
-     * Provides the gutter configuration to display a gutter next to the fold gutter
+     * Provides the gutter configuration to display a marker next to the fold gutter.
      */
     gutterConfiguration?: GutterConfiguration;
     /**
@@ -89,7 +110,7 @@ export type CodeEditorRef = {
  * Once the editor is focused via the keyboard, the user must press "Enter" to start editing and "Escape" to quit editing and return to the keyboard navigation flow.
  * @public
  */
-export declare const CodeEditor: (props: CodeEditorProps & import("react").RefAttributes<CodeEditorRef>) => React.ReactElement | null;
+export declare const CodeEditor: (props: CodeEditorProps & import("react").RefAttributes<CodeEditorRef>) => import("react").ReactElement | null;
 /**
  * If readOnly is true then there is no autocompletion.
  * @param languageConfig - standard language config

package/editors/code-editor/CodeEditor.js

@@ -47,6 +47,7 @@ const CodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarde
     onChange,
     onBlur,
     onFocus,
+    gutterConfiguration,
     size = "default",
     required = false,
     className: consumerClassName,
@@ -81,6 +82,7 @@ const CodeEditor = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwarde
       configuration: config,
       onBlur,
       onFocus,
+      gutterConfiguration,
       size,
       required,
       className: consumerClassName,

package/editors/dql-editor/DQLEditor.d.ts

@@ -96,4 +96,4 @@ export type DQLEditorRef = {
  * Once the editor is focused via the keyboard, the user must press "Enter" to start editing and "Escape" to quit editing and return to the keyboard navigation flow.
  * @public
  */
-export declare const DQLEditor: (props: DQLEditorProps & import("react").RefAttributes<DQLEditorRef>) => React.ReactElement | null;
+export declare const DQLEditor: (props: DQLEditorProps & import("react").RefAttributes<DQLEditorRef>) => import("react").ReactElement | null;

package/editors/dql-editor/dql/DocumentationLink.js

@@ -43,5 +43,5 @@ const DocumentationLink = ({
   suggestionPart
 }) => {
   const docUrl = generateDocumentationLink(suggestionPart);
-  return docUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalLink.ExternalLink, { href: docUrl, children: "Learn more" }) : null;
+  return docUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ExternalLink.ExternalLink, { href: docUrl, "data-dt-name": "LearnMoreLink", children: "Learn more" }) : null;
 };

package/editors/dql-editor/dql/SuggestionPart.css

@@ -1,4 +1,4 @@
-._yhio8f0-3-1-3 {
+._yhio8f0-3-2-1 {
   display: inline;
   margin-right: 0.5ch;
 }

package/editors/dql-editor/dql/SuggestionPart.sty.js

@@ -22,4 +22,4 @@ __export(SuggestionPart_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionPart_css_exports);
 var import_SuggestionPart_css_ts_vanilla = require("./SuggestionPart.css");
-var suggestionPartSectionInfoCSS = "_yhio8f0-3-1-3";
+var suggestionPartSectionInfoCSS = "_yhio8f0-3-2-1";

package/esm/buttons/button/Button.css

@@ -1,12 +1,12 @@
-._10kgnsa0-3-1-3 {
+._10kgnsa0-3-2-1 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-1-3);
-  color: var(--_bx32h0-3-1-3);
+  background: var(--_bx32h3-3-2-1);
+  color: var(--_bx32h0-3-2-1);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -23,38 +23,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, transform;
 }
-._10kgnsa1-3-1-3 {
+._10kgnsa1-3-2-1 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-1-3 {
+._10kgnsa2-3-2-1 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-1-3 {
+._10kgnsa3-3-2-1 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-1-3 {
+._10kgnsa4-3-2-1 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-1-3 {
+._10kgnsa5-3-2-1 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-1-3 {
+._10kgnsa6-3-2-1 {
   width: 100%;
 }
-._10kgnsa7-3-1-3 {
+._10kgnsa7-3-2-1 {
   width: fit-content;
 }
-._10kgnsa8-3-1-3 {
+._10kgnsa8-3-2-1 {
   position: absolute;
   top: 0;
   left: 0;
@@ -66,19 +66,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-1-3 ._10kgnsa9-3-1-3:not(:has(svg:only-child)) {
+._10kgnsa3-3-2-1 ._10kgnsa9-3-2-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-1-3 ._10kgnsa9-3-1-3:not(:has(svg:only-child)) {
+._10kgnsa4-3-2-1 ._10kgnsa9-3-2-1:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-1-3 {
+._10kgnsab-3-2-1 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/esm/buttons/button/Button.sty.js

@@ -2,10 +2,10 @@ import "../../styles/ellipsis.css";
 import "../../styles/field.css";
 import "./Button.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var button = _7a468({ defaultClassName: "_10kgnsa0-3-1-3", variantClassNames: { textAlign: { start: "_10kgnsa1-3-1-3", center: "_10kgnsa2-3-1-3" }, size: { condensed: "_10kgnsa3-3-1-3", "default": "_10kgnsa4-3-1-3" }, disabled: { true: "_10kgnsa5-3-1-3" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = _7a468({ defaultClassName: "_10kgnsa9-3-1-3", variantClassNames: { textual: { true: "_oqqp1n0-3-1-3", false: "_10kgnsab-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-1-3";
-var widths = { full: "_10kgnsa6-3-1-3", content: "_10kgnsa7-3-1-3" };
+var button = _7a468({ defaultClassName: "_10kgnsa0-3-2-1", variantClassNames: { textAlign: { start: "_10kgnsa1-3-2-1", center: "_10kgnsa2-3-2-1" }, size: { condensed: "_10kgnsa3-3-2-1", "default": "_10kgnsa4-3-2-1" }, disabled: { true: "_10kgnsa5-3-2-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = _7a468({ defaultClassName: "_10kgnsa9-3-2-1", variantClassNames: { textual: { true: "_oqqp1n0-3-2-1", false: "_10kgnsab-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-2-1";
+var widths = { full: "_10kgnsa6-3-2-1", content: "_10kgnsa7-3-2-1" };
 export {
   button,
   label,

package/esm/buttons/button/Button.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/button/Button.css.ts"],
-  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-1-3',variantClassNames:{textAlign:{start:'_10kgnsa1-3-1-3',center:'_10kgnsa2-3-1-3'},size:{condensed:'_10kgnsa3-3-1-3','default':'_10kgnsa4-3-1-3'},disabled:{true:'_10kgnsa5-3-1-3'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-1-3',variantClassNames:{textual:{true:'_oqqp1n0-3-1-3',false:'_10kgnsab-3-1-3'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-1-3';\nexport var widths = {full:'_10kgnsa6-3-1-3',content:'_10kgnsa7-3-1-3'};"],
+  "sourcesContent": ["import '../../styles/ellipsis.css';\nimport '../../styles/field.css';\nimport './Button.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var button = _7a468({defaultClassName:'_10kgnsa0-3-2-1',variantClassNames:{textAlign:{start:'_10kgnsa1-3-2-1',center:'_10kgnsa2-3-2-1'},size:{condensed:'_10kgnsa3-3-2-1','default':'_10kgnsa4-3-2-1'},disabled:{true:'_10kgnsa5-3-2-1'}},defaultVariants:{size:'default',textAlign:'center',disabled:false},compoundVariants:[]});\nexport var label = _7a468({defaultClassName:'_10kgnsa9-3-2-1',variantClassNames:{textual:{true:'_oqqp1n0-3-2-1',false:'_10kgnsab-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var loading = '_10kgnsa8-3-2-1';\nexport var widths = {full:'_10kgnsa6-3-2-1',content:'_10kgnsa7-3-2-1'};"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,OAAM,mBAAkB,QAAO,kBAAiB,GAAE,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,MAAK,WAAU,WAAU,UAAS,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACjU,IAAI,QAAQ,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1K,IAAI,UAAU;AACd,IAAI,SAAS,EAAC,MAAK,mBAAkB,SAAQ,kBAAiB;",
   "names": []
 }

package/esm/buttons/intent-button/IntentButton.css

@@ -1,3 +1,3 @@
-._1xe9ern0-3-1-3 {
+._1xe9ern0-3-2-1 {
   opacity: 0.5;
 }

package/esm/buttons/intent-button/IntentButton.sty.js

@@ -1,5 +1,5 @@
 import "./IntentButton.css";
-var disabledAppIconOpacity = "_1xe9ern0-3-1-3";
+var disabledAppIconOpacity = "_1xe9ern0-3-2-1";
 export {
   disabledAppIconOpacity
 };

package/esm/buttons/intent-button/IntentButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/intent-button/IntentButton.css.ts"],
-  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-1-3';"],
+  "sourcesContent": ["import './IntentButton.css';\nexport var disabledAppIconOpacity = '_1xe9ern0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,yBAAyB;",
   "names": []
 }

package/esm/buttons/notify-button/NotifyButton.css

@@ -1,10 +1,10 @@
-._1j9pkom0-3-1-3 {
+._1j9pkom0-3-2-1 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-16, 16px);
   padding-left: var(--dt-spacings-size-16, 16px);
   padding-right: var(--dt-spacings-size-16, 16px);
 }
-._1j9pkom1-3-1-3 {
+._1j9pkom1-3-2-1 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-6, 6px);

package/esm/buttons/notify-button/NotifyButton.sty.js

@@ -1,6 +1,6 @@
 import "./NotifyButton.css";
-var overlay = "_1j9pkom0-3-1-3";
-var toast = "_1j9pkom1-3-1-3";
+var overlay = "_1j9pkom0-3-2-1";
+var toast = "_1j9pkom1-3-2-1";
 export {
   overlay,
   toast

package/esm/buttons/notify-button/NotifyButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.css.ts"],
-  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-1-3';\nexport var toast = '_1j9pkom1-3-1-3';"],
+  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-2-1';\nexport var toast = '_1j9pkom1-3-2-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,QAAQ;",
   "names": []
 }

package/esm/charts/categorical-bar/CategoricalBarChartLayout.js

@@ -4,7 +4,8 @@ import { CategoricalBarChart } from "./CategoricalBarChart.js";
 import { CategoricalBarChartLegend } from "./components/legend/CategoricalBarChartLegend.js";
 import { useCategoricalBarChartBaseConfig } from "./hooks/useCategoricalBarChartBaseConfig.js";
 import { useCategoricalBarChartData } from "./hooks/useCategoricalBarChartData.js";
-import { isStacked, isGrouped } from "./utils/layout.js";
+import { isGrouped, isStacked } from "./utils/layout.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { ChartLayout } from "../core/components/chart-layout/ChartLayout.js";
 const CategoricalBarChartLayout = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
   const {
@@ -22,6 +23,7 @@ const CategoricalBarChartLayout = /* @__PURE__ */ forwardRef((props, forwardedRe
     "data-dtrum-allow": dataDtrumAllow,
     "data-dt-component": dataDtComponent
   } = props;
+  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);
   const { uniqueDimensions } = useCategoricalBarChartData();
   const { groupMode } = useCategoricalBarChartBaseConfig();
   const canShowLegend = isGrouped(groupMode) || isStacked(groupMode) && uniqueDimensions.length > 1;
@@ -46,6 +48,7 @@ const CategoricalBarChartLayout = /* @__PURE__ */ forwardRef((props, forwardedRe
       showLoader: loading,
       className,
       style,
+      ...behaviorTrackingProps,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       "data-dt-component": dataDtComponent,

package/esm/charts/categorical-bar/CategoricalBarChartLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/categorical-bar/CategoricalBarChartLayout.tsx"],
-  "sourcesContent": ["import { forwardRef, type JSX, type ReactNode, type RefObject } from 'react';\n\nimport { CategoricalBarChart } from './CategoricalBarChart.js';\nimport { CategoricalBarChartLegend } from './components/legend/CategoricalBarChartLegend.js';\nimport { useCategoricalBarChartBaseConfig } from './hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartData } from './hooks/useCategoricalBarChartData.js';\nimport { CategoricalBarChartLegendConfiguration } from './types/categorical-bar-chart.js';\nimport { isStacked, isGrouped } from './utils/layout.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport type { ChartLayoutRef } from '../core/components/chart-layout/types/chart-layout.js';\n\ninterface CategoricalBarChartLayoutProps extends StylingProps, MaskingProps {\n  emptyState?: ReactNode;\n  errorState: ReactNode | ((errorMessage: string) => JSX.Element) | undefined;\n  legend: CategoricalBarChartLegendConfiguration;\n  isEmpty: boolean;\n  loading: boolean;\n  height?: string;\n  width?: number | string;\n  chartLayoutRef: RefObject<ChartLayoutRef | null>;\n  /**\n   * Component identifier for behavioral tracking\n   * @internal\n   */\n  'data-dt-component'?: string;\n}\n\nexport const CategoricalBarChartLayout = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  CategoricalBarChartLayoutProps\n>((props, forwardedRef) => {\n  const {\n    height,\n    width,\n    legend,\n    isEmpty,\n    loading,\n    errorState,\n    emptyState,\n    className,\n    style,\n    chartLayoutRef,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dt-component': dataDtComponent,\n  } = props;\n  const { uniqueDimensions } = useCategoricalBarChartData();\n  const { groupMode } = useCategoricalBarChartBaseConfig();\n\n  const canShowLegend =\n    isGrouped(groupMode) ||\n    (isStacked(groupMode) && uniqueDimensions.length > 1);\n  const {\n    position: legendPosition,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n  } = legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const showLegend = canShowLegend && !legend.hidden;\n\n  return (\n    <ChartLayout\n      ref={chartLayoutRef}\n      chartHeight={height}\n      chartWidth={width}\n      isEmpty={isEmpty}\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={dataDtComponent}\n    >\n      <ChartLayout.Graph>\n        <CategoricalBarChart ref={forwardedRef} />\n      </ChartLayout.Graph>\n      {showLegend && (\n        <ChartLayout.Legend\n          position={legendPosition}\n          initialRatio={legendRatio}\n          onResize={onRatioChange}\n        >\n          <CategoricalBarChartLegend />\n        </ChartLayout.Legend>\n      )}\n    </ChartLayout>\n  );\n});\n\n(\n  CategoricalBarChartLayout as typeof CategoricalBarChartLayout & {\n    displayName: string;\n  }\n).displayName = 'CategoricalBarChartLayout';\n"],
-  "mappings": "AAmEI,SAeI,KAfJ;AAnEJ,SAAS,kBAA4D;AAErE,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,wCAAwC;AACjD,SAAS,kCAAkC;AAE3C,SAAS,WAAW,iBAAiB;AAGrC,SAAS,mBAAmB;AAmBrB,MAAM,4BAA4C,2BAGvD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,EACvB,IAAI;AACJ,QAAM,EAAE,iBAAiB,IAAI,2BAA2B;AACxD,QAAM,EAAE,UAAU,IAAI,iCAAiC;AAEvD,QAAM,gBACJ,UAAU,SAAS,KAClB,UAAU,SAAS,KAAK,iBAAiB,SAAS;AACrD,QAAM;AAAA,IACJ,UAAU;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,gBAAgB;AAEpC,QAAM,aAAa,iBAAiB,CAAC,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,YAAY,OAAZ,EACC,8BAAC,uBAAoB,KAAK,cAAc,GAC1C;AAAA,QACC,cACC;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YAEV,8BAAC,6BAA0B;AAAA;AAAA,QAC7B;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,0BAGA,cAAc;",
+  "sourcesContent": ["import { forwardRef, type JSX, type ReactNode, type RefObject } from 'react';\n\nimport { CategoricalBarChart } from './CategoricalBarChart.js';\nimport { CategoricalBarChartLegend } from './components/legend/CategoricalBarChartLegend.js';\nimport { useCategoricalBarChartBaseConfig } from './hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartData } from './hooks/useCategoricalBarChartData.js';\nimport { CategoricalBarChartLegendConfiguration } from './types/categorical-bar-chart.js';\nimport { isGrouped, isStacked } from './utils/layout.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport type { ChartLayoutRef } from '../core/components/chart-layout/types/chart-layout.js';\n\ninterface CategoricalBarChartLayoutProps extends StylingProps, MaskingProps {\n  emptyState?: ReactNode;\n  errorState: ReactNode | ((errorMessage: string) => JSX.Element) | undefined;\n  legend: CategoricalBarChartLegendConfiguration;\n  isEmpty: boolean;\n  loading: boolean;\n  height?: string;\n  width?: number | string;\n  chartLayoutRef: RefObject<ChartLayoutRef | null>;\n  /**\n   * Component identifier for behavioral tracking\n   * @internal\n   */\n  'data-dt-component'?: string;\n}\n\nexport const CategoricalBarChartLayout = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  CategoricalBarChartLayoutProps\n>((props, forwardedRef) => {\n  const {\n    height,\n    width,\n    legend,\n    isEmpty,\n    loading,\n    errorState,\n    emptyState,\n    className,\n    style,\n    chartLayoutRef,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dt-component': dataDtComponent,\n  } = props;\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n  const { uniqueDimensions } = useCategoricalBarChartData();\n  const { groupMode } = useCategoricalBarChartBaseConfig();\n\n  const canShowLegend =\n    isGrouped(groupMode) ||\n    (isStacked(groupMode) && uniqueDimensions.length > 1);\n  const {\n    position: legendPosition,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n  } = legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const showLegend = canShowLegend && !legend.hidden;\n\n  return (\n    <ChartLayout\n      ref={chartLayoutRef}\n      chartHeight={height}\n      chartWidth={width}\n      isEmpty={isEmpty}\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={dataDtComponent}\n    >\n      <ChartLayout.Graph>\n        <CategoricalBarChart ref={forwardedRef} />\n      </ChartLayout.Graph>\n      {showLegend && (\n        <ChartLayout.Legend\n          position={legendPosition}\n          initialRatio={legendRatio}\n          onResize={onRatioChange}\n        >\n          <CategoricalBarChartLegend />\n        </ChartLayout.Legend>\n      )}\n    </ChartLayout>\n  );\n});\n\n(\n  CategoricalBarChartLayout as typeof CategoricalBarChartLayout & {\n    displayName: string;\n  }\n).displayName = 'CategoricalBarChartLayout';\n"],
+  "mappings": "AAqEI,SAgBI,KAhBJ;AArEJ,SAAS,kBAA4D;AAErE,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,wCAAwC;AACjD,SAAS,kCAAkC;AAE3C,SAAS,WAAW,iBAAiB;AACrC,SAAS,kCAAkC;AAG3C,SAAS,mBAAmB;AAmBrB,MAAM,4BAA4C,2BAGvD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,EACvB,IAAI;AACJ,QAAM,CAAC,qBAAqB,IAAI,2BAA2B,KAAK;AAChE,QAAM,EAAE,iBAAiB,IAAI,2BAA2B;AACxD,QAAM,EAAE,UAAU,IAAI,iCAAiC;AAEvD,QAAM,gBACJ,UAAU,SAAS,KAClB,UAAU,SAAS,KAAK,iBAAiB,SAAS;AACrD,QAAM;AAAA,IACJ,UAAU;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,gBAAgB;AAEpC,QAAM,aAAa,iBAAiB,CAAC,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,YAAY,OAAZ,EACC,8BAAC,uBAAoB,KAAK,cAAc,GAC1C;AAAA,QACC,cACC;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YAEV,8BAAC,6BAA0B;AAAA;AAAA,QAC7B;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,0BAGA,cAAc;",
   "names": []
 }

package/esm/charts/categorical-bar/CategoricalBarChartRoot.js

@@ -27,6 +27,7 @@ import { ValueAxis } from "./slots/ValueAxis.js";
 import { DEFAULT_CHART_HEIGHT } from "./types/defaults.js";
 import { initialState } from "./types/state.js";
 import { buildAndDownloadCsv } from "./utils/build-and-download-csv.js";
+import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { Intent } from "../../core/slots/Intent/Intent.js";
 import { useAutoLegendRefresh } from "../core/components/chart-layout/hooks/useAutoLegendRefresh.js";
@@ -51,6 +52,7 @@ const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow
   } = props;
+  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);
   const chartHeight = coerceSizeValue(heightProp ?? DEFAULT_CHART_HEIGHT);
   const chartConfig = useCategoricalBarChartConfig(props);
   const { emptyState, errorState } = getChartStatesTemplates(props.children);
@@ -105,6 +107,7 @@ const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef((props, forwardedRef)
           legend: chartConfig.legend,
           className,
           style,
+          ...behaviorTrackingProps,
           "data-dtrum-mask": dataDtrumMask,
           "data-dtrum-allow": dataDtrumAllow,
           "data-dt-component": COMPONENT_NAME_BEHAVIOURAL_TRACKING

package/esm/charts/categorical-bar/CategoricalBarChartRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/categorical-bar/CategoricalBarChartRoot.tsx"],
-  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CategoricalBarChartLayout } from './CategoricalBarChartLayout.js';\nimport { DISPLAY_NAME } from './constants.js';\nimport { CategoricalBarChartBaseConfigContext } from './contexts/CategoricalBarChartBaseConfig.context.js';\nimport { CategoricalBarChartLoading } from './contexts/CategoricalBarChartLoading.js';\nimport { CategoricalBarChartRawDataContext } from './contexts/CategoricalBarChartRawData.context.js';\nimport { useSetState } from './hooks/store/selectors.js';\nimport { useCategoricalBarChartConfig } from './hooks/useCategoricalBarChartConfig.js';\nimport { CategoricalBarChartProviders } from './providers/CategoricalBarChartProviders.js';\nimport { CategoricalBarDataProvider } from './providers/CategoricalBarDataProvider.js';\nimport { CategoricalBarFilteredDataProvider } from './providers/CategoricalBarFilteredDataProvider.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport { CategoryAxis } from './slots/CategoryAxis.js';\nimport { CategoricalBarChartDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Legend } from './slots/Legend.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { CategoricalBarChartToolbarSlot } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { ValueAxis } from './slots/ValueAxis.js';\nimport type {\n  CategoricalBarChartProps,\n  CategoricalBarChartRef,\n} from './types/categorical-bar-chart.js';\nimport { DEFAULT_CHART_HEIGHT } from './types/defaults.js';\nimport { initialState } from './types/state.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.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 { ColorRuleContext } from '../core/context/ColorRuleContext.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'CategoricalBarChart';\n\n/**\n * @public\n */\nexport const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef<\n  CategoricalBarChartRef,\n  PropsWithChildren<CategoricalBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    data,\n    height: heightProp,\n    width: widthProp,\n    seriesActions,\n    loading = false,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n\n  const chartHeight = coerceSizeValue(heightProp ?? DEFAULT_CHART_HEIGHT);\n  const chartConfig = useCategoricalBarChartConfig(props);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<CategoricalBarChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    getConfig: () =>\n      JSON.stringify({\n        type: ChartType.CategoricalBar,\n        ...chartConfig,\n      }),\n    downloadData: () => {\n      buildAndDownloadCsv(data);\n    },\n  }));\n\n  const baseConfig = {\n    valueRepresentation: chartConfig.valueRepresentation,\n    colorPalette: chartConfig.colorPalette,\n    layout: chartConfig.layout,\n    groupMode: chartConfig.groupMode,\n    colorPaletteMode: chartConfig.colorPaletteMode,\n    toolbar: chartConfig.toolbar,\n    intents: chartConfig.intents,\n  };\n\n  const setState = useSetState();\n  useEffect(() => {\n    setState(() => initialState);\n  }, [chartConfig]);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <CategoricalBarChartLoading.Provider value={loading}>\n      <CategoricalBarChartBaseConfigContext.Provider value={baseConfig}>\n        <ColorRuleContext.Provider value={chartConfig.colorRules}>\n          <CategoricalBarChartRawDataContext.Provider value={data}>\n            <CategoricalBarDataProvider data={data}>\n              <StoreProvider>\n                <ChartSeriesActionContext.Provider\n                  value={{\n                    // We need a cast here as the provider expects unknown and the\n                    // react context will not be able to carry the generic anyways.\n                    chartSeriesActions: seriesActions as (\n                      series: unknown,\n                    ) => ReactElement<PropsWithChildren>,\n                  }}\n                >\n                  <CategoricalBarChartProviders config={chartConfig}>\n                    <CategoricalBarFilteredDataProvider>\n                      <CategoricalBarChartLayout\n                        chartLayoutRef={chartLayoutRef}\n                        ref={rootRef}\n                        height={chartHeight}\n                        width={widthProp}\n                        emptyState={emptyState}\n                        errorState={errorState}\n                        isEmpty={isEmpty(data)}\n                        loading={loading}\n                        legend={chartConfig.legend}\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                    </CategoricalBarFilteredDataProvider>\n                  </CategoricalBarChartProviders>\n                </ChartSeriesActionContext.Provider>\n              </StoreProvider>\n            </CategoricalBarDataProvider>\n          </CategoricalBarChartRawDataContext.Provider>\n        </ColorRuleContext.Provider>\n      </CategoricalBarChartBaseConfigContext.Provider>\n    </CategoricalBarChartLoading.Provider>\n  );\n});\n\n(\n  CategoricalBarChartRoot as typeof CategoricalBarChartRoot & {\n    displayName: string;\n  }\n).displayName = DISPLAY_NAME;\n\n/**\n * The `CategoricalBarChart` visually displays the frequencies or values of\n * distinct categories using rectangular bars. Each bar's length or height\n * corresponds to the quantity or value associated with a specific category,\n * making it easy to compare the relative differences among categories.\n * @public\n */\nexport const CategoricalBarChart = Object.assign(CategoricalBarChartRoot, {\n  Legend,\n  Tooltip,\n  CategoryAxis,\n  ValueAxis,\n  ThresholdIndicator,\n  Intent,\n  ColorRule,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  Toolbar: CategoricalBarChartToolbarSlot,\n  DownloadCSV: CategoricalBarChartDownloadCSVSlot,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  type ReactElement,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CategoricalBarChartLayout } from './CategoricalBarChartLayout.js';\nimport { DISPLAY_NAME } from './constants.js';\nimport { CategoricalBarChartBaseConfigContext } from './contexts/CategoricalBarChartBaseConfig.context.js';\nimport { CategoricalBarChartLoading } from './contexts/CategoricalBarChartLoading.js';\nimport { CategoricalBarChartRawDataContext } from './contexts/CategoricalBarChartRawData.context.js';\nimport { useSetState } from './hooks/store/selectors.js';\nimport { useCategoricalBarChartConfig } from './hooks/useCategoricalBarChartConfig.js';\nimport { CategoricalBarChartProviders } from './providers/CategoricalBarChartProviders.js';\nimport { CategoricalBarDataProvider } from './providers/CategoricalBarDataProvider.js';\nimport { CategoricalBarFilteredDataProvider } from './providers/CategoricalBarFilteredDataProvider.js';\nimport { StoreProvider } from './providers/StoreProvider.js';\nimport { CategoryAxis } from './slots/CategoryAxis.js';\nimport { CategoricalBarChartDownloadCSVSlot } from './slots/DownloadCSV.js';\nimport { Legend } from './slots/Legend.js';\nimport { ThresholdIndicator } from './slots/ThresholdIndicator.js';\nimport { CategoricalBarChartToolbarSlot } from './slots/Toolbar.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { ValueAxis } from './slots/ValueAxis.js';\nimport type {\n  CategoricalBarChartProps,\n  CategoricalBarChartRef,\n} from './types/categorical-bar-chart.js';\nimport { DEFAULT_CHART_HEIGHT } from './types/defaults.js';\nimport { initialState } from './types/state.js';\nimport { buildAndDownloadCsv } from './utils/build-and-download-csv.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { Intent } from '../../core/slots/Intent/Intent.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 { ColorRuleContext } from '../core/context/ColorRuleContext.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ColorRule } from '../core/slots/ColorRule.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\n/**\n * Component name used for data-dt-component in behavioural tracking\n */\nconst COMPONENT_NAME_BEHAVIOURAL_TRACKING = 'CategoricalBarChart';\n\n/**\n * @public\n */\nexport const CategoricalBarChartRoot = /* @__PURE__ */ forwardRef<\n  CategoricalBarChartRef,\n  PropsWithChildren<CategoricalBarChartProps>\n>((props, forwardedRef) => {\n  const {\n    data,\n    height: heightProp,\n    width: widthProp,\n    seriesActions,\n    loading = false,\n    className,\n    style,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const chartHeight = coerceSizeValue(heightProp ?? DEFAULT_CHART_HEIGHT);\n  const chartConfig = useCategoricalBarChartConfig(props);\n  const { emptyState, errorState } = getChartStatesTemplates(props.children);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<CategoricalBarChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    getConfig: () =>\n      JSON.stringify({\n        type: ChartType.CategoricalBar,\n        ...chartConfig,\n      }),\n    downloadData: () => {\n      buildAndDownloadCsv(data);\n    },\n  }));\n\n  const baseConfig = {\n    valueRepresentation: chartConfig.valueRepresentation,\n    colorPalette: chartConfig.colorPalette,\n    layout: chartConfig.layout,\n    groupMode: chartConfig.groupMode,\n    colorPaletteMode: chartConfig.colorPaletteMode,\n    toolbar: chartConfig.toolbar,\n    intents: chartConfig.intents,\n  };\n\n  const setState = useSetState();\n  useEffect(() => {\n    setState(() => initialState);\n  }, [chartConfig]);\n  const chartLayoutRef = useAutoLegendRefresh(data);\n\n  return (\n    <CategoricalBarChartLoading.Provider value={loading}>\n      <CategoricalBarChartBaseConfigContext.Provider value={baseConfig}>\n        <ColorRuleContext.Provider value={chartConfig.colorRules}>\n          <CategoricalBarChartRawDataContext.Provider value={data}>\n            <CategoricalBarDataProvider data={data}>\n              <StoreProvider>\n                <ChartSeriesActionContext.Provider\n                  value={{\n                    // We need a cast here as the provider expects unknown and the\n                    // react context will not be able to carry the generic anyways.\n                    chartSeriesActions: seriesActions as (\n                      series: unknown,\n                    ) => ReactElement<PropsWithChildren>,\n                  }}\n                >\n                  <CategoricalBarChartProviders config={chartConfig}>\n                    <CategoricalBarFilteredDataProvider>\n                      <CategoricalBarChartLayout\n                        chartLayoutRef={chartLayoutRef}\n                        ref={rootRef}\n                        height={chartHeight}\n                        width={widthProp}\n                        emptyState={emptyState}\n                        errorState={errorState}\n                        isEmpty={isEmpty(data)}\n                        loading={loading}\n                        legend={chartConfig.legend}\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                    </CategoricalBarFilteredDataProvider>\n                  </CategoricalBarChartProviders>\n                </ChartSeriesActionContext.Provider>\n              </StoreProvider>\n            </CategoricalBarDataProvider>\n          </CategoricalBarChartRawDataContext.Provider>\n        </ColorRuleContext.Provider>\n      </CategoricalBarChartBaseConfigContext.Provider>\n    </CategoricalBarChartLoading.Provider>\n  );\n});\n\n(\n  CategoricalBarChartRoot as typeof CategoricalBarChartRoot & {\n    displayName: string;\n  }\n).displayName = DISPLAY_NAME;\n\n/**\n * The `CategoricalBarChart` visually displays the frequencies or values of\n * distinct categories using rectangular bars. Each bar's length or height\n * corresponds to the quantity or value associated with a specific category,\n * making it easy to compare the relative differences among categories.\n * @public\n */\nexport const CategoricalBarChart = Object.assign(CategoricalBarChartRoot, {\n  Legend,\n  Tooltip,\n  CategoryAxis,\n  ValueAxis,\n  ThresholdIndicator,\n  Intent,\n  ColorRule,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n  Toolbar: CategoricalBarChartToolbarSlot,\n  DownloadCSV: CategoricalBarChartDownloadCSVSlot,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-1-3 {
+._1wi8enr0-3-2-1 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-1-3 {
+._1wi8enr1-3-2-1 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.js

@@ -141,7 +141,7 @@ const CategoricalBarChartInspectOverlay = () => {
       {
         className: crosshairLayout,
         "aria-label": CROSSHAIR_BAR_CHART_LABEL,
-        role: "img",
+        role: "graphics-symbol",
         onClick: onClickHandler,
         children: !isVertical(layout) ? /* @__PURE__ */ jsx(
           VerticalCrosshair,

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.tsx"],
-  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport {\n  crosshairLayout,\n  dataPointLayout,\n} from './CategoricalBarChartInspectOverlay.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { getMagnifierLabel } from '../../../../core/components/crosshair/utils/get-magnifier-label.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport { THRESHOLD_BAR_THICKNESS } from '../../../../core/components/threshold-bar/types/constants.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { GroupDataPoint } from '../../../../core/types/data-point.js';\nimport {\n  useMouseInBoundsState,\n  useMousePositionState,\n  useSetState,\n  useTooltipState,\n} from '../../../hooks/store/selectors.js';\nimport { setMouseOutBounds } from '../../../hooks/store/state-setters.js';\nimport { useCategoricalBarChartBaseConfig } from '../../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartData } from '../../../hooks/useCategoricalBarChartData.js';\nimport { useCategoricalBarChartOverlayRef } from '../../../hooks/useCategoricalBarChartOverlayRef.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartThresholds } from '../../../hooks/useCategoricalBarChartThresholds.js';\nimport { useClosestDimensionInThresholdPoints } from '../../../hooks/useClosestDimensionInThresholdPoints.js';\nimport { useClosestDimensionPoint } from '../../../hooks/useClosestDimensionPoint.js';\nimport { useFormatter } from '../../../hooks/useFormatter.js';\nimport { DimensionXYPoint } from '../../../types/categorical-bar-chart-data.js';\nimport { isStacked, isVertical } from '../../../utils/layout.js';\nimport { CategoricalBarChartDatapoints } from '../datapoints/CategoricalBarChartDatapoints.js';\nimport { CategoricalBarChartTooltip } from '../tooltip/CategoricalBarChartTooltip.js';\nimport {\n  generateGroupDataPoints,\n  getGroupDataPointsBy,\n  mapToDataPoint,\n} from '../utils/data-points.js';\n\nexport const CROSSHAIR_BAR_CHART_LABEL = 'crosshair for bar chart';\n\nexport const CategoricalBarChartInspectOverlay = () => {\n  const { layout, groupMode } = useCategoricalBarChartBaseConfig();\n  const { width, height } = useGridPlotSize();\n  const { unit } = useCategoricalBarChartData();\n  const formatter = useFormatter();\n  const { valueScale } = useCategoricalBarChartScales();\n  const { visibleTooltip, pinnedTooltip } = useTooltipState();\n  const mousePosition = useMousePositionState();\n  const thresholds = useCategoricalBarChartThresholds();\n  const chartRef = useCategoricalBarChartOverlayRef();\n  const isInChartBounds = useMouseInBoundsState();\n\n  const chartBounds = chartRef?.current?.getBoundingClientRect();\n\n  const hasThresholds = thresholds && thresholds.length > 0;\n\n  const [pinnedClosestPoint, setPinnedClosestPoint] =\n    useState<DimensionXYPoint>();\n  const [pinnedGroupDataPoint, setPinnedGroupDataPoint] =\n    useState<GroupDataPoint>();\n\n  const magnifierCoordinate = isVertical(layout) ? 'y' : 'x';\n\n  const magnifierValue =\n    mousePosition &&\n    getMagnifierLabel(\n      unit,\n      magnifierCoordinate,\n      formatter,\n      mousePosition.relative,\n      valueScale,\n    );\n  const isGroupedAllowed = isStacked(groupMode);\n\n  const { closestDimensionPoint, closestDimensionPoints } =\n    useClosestDimensionPoint(layout, groupMode, mousePosition?.relative);\n\n  const closestDimensionPointInThreshold = useClosestDimensionInThresholdPoints(\n    layout,\n    groupMode,\n    mousePosition?.relative,\n  );\n\n  const groupDataPoints = generateGroupDataPoints(\n    closestDimensionPoints,\n    isGroupedAllowed,\n    layout,\n    layout === 'vertical' ? height : width,\n  );\n\n  useEffect(() => {\n    if (!visibleTooltip && !pinnedTooltip) {\n      setPinnedClosestPoint((prevState) =>\n        prevState !== undefined ? undefined : prevState,\n      );\n      setPinnedGroupDataPoint((prevState) =>\n        prevState !== undefined ? undefined : prevState,\n      );\n    }\n  }, [visibleTooltip, pinnedTooltip]);\n\n  useEffect(() => {\n    if (pinnedTooltip) {\n      onClickHandler();\n    }\n  }, [width, height]);\n\n  const setState = useSetState();\n\n  const onScrollCallback = () => setState(setMouseOutBounds);\n  const notShowingMagnifiers = pinnedTooltip || !isInChartBounds;\n\n  useApplyCallbackOnScroll(notShowingMagnifiers, onScrollCallback);\n\n  const onClickHandler = () => {\n    setState((prev) => ({\n      ...prev,\n      overlays: {\n        ...prev.overlays,\n        pinnedTooltip: setPinned(prev.overlays.pinnedTooltip),\n      },\n    }));\n\n    setPinnedClosestPoint((prev) =>\n      !prev && visibleTooltip\n        ? closestDimensionPointInThreshold ?? closestDimensionPoint\n        : undefined,\n    );\n    setPinnedGroupDataPoint((prev) => {\n      if (!prev && closestDimensionPoint && visibleTooltip) {\n        const dimensionId = (\n          closestDimensionPointInThreshold ?? closestDimensionPoint\n        )?.datapoint.id;\n\n        return getGroupDataPointsBy(groupDataPoints, dimensionId);\n      }\n\n      return undefined;\n    });\n  };\n\n  const setPinned = (prevPinned: boolean) =>\n    visibleTooltip ? !prevPinned : false;\n\n  const verticalCrosshairX =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint.x ?? 0\n      : mousePosition?.relative.x ?? 0;\n  const verticalCrosshairLabel =\n    pinnedTooltip || !mousePosition ? '' : magnifierValue;\n\n  const horizontalCrosshairY =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint.y ?? 0\n      : mousePosition?.relative.y ?? 0;\n  const horizontalCrosshairLabel =\n    pinnedTooltip || !mousePosition ? '' : magnifierValue;\n\n  const closestPoint =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint\n      : closestDimensionPointInThreshold;\n\n  const groupPoints = pinnedGroupDataPoint\n    ? pinnedGroupDataPoint\n    : groupDataPoints;\n\n  const thresholdSize = hasThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n\n  return (\n    <div className={plotLayout}>\n      {(mousePosition || pinnedTooltip) && (\n        <>\n          <div className={dataPointLayout}>\n            <CategoricalBarChartDatapoints\n              points={groupPoints}\n              closestPoint={closestPoint && mapToDataPoint(closestPoint)}\n            />\n          </div>\n          <div>\n            <CategoricalBarChartTooltip\n              closestDimensionPoint={closestPoint}\n              hasHeader={groupPoints.length > 1}\n              formatter={formatter}\n              unit={unit}\n            />\n          </div>\n        </>\n      )}\n      {pinnedTooltip || isInChartBounds ? (\n        <svg\n          className={crosshairLayout}\n          aria-label={CROSSHAIR_BAR_CHART_LABEL}\n          role=\"img\"\n          onClick={onClickHandler}\n        >\n          {!isVertical(layout) ? (\n            <VerticalCrosshair\n              x={verticalCrosshairX}\n              bottomLabel={verticalCrosshairLabel}\n              height={height + thresholdSize}\n              offset={thresholdSize}\n              dashed={!pinnedTooltip}\n              chartBounds={chartBounds}\n            />\n          ) : (\n            <HorizontalCrosshair\n              width={width + thresholdSize}\n              leftLabel={horizontalCrosshairLabel}\n              leftOffset={thresholdSize}\n              y={horizontalCrosshairY}\n              dashed={!pinnedTooltip}\n              chartBounds={chartBounds}\n            />\n          )}\n        </svg>\n      ) : null}\n    </div>\n  );\n};\n\nCategoricalBarChartInspectOverlay['displayName'] =\n  'CategoricalBarChartInspectOverlay';\n"],
+  "sourcesContent": ["import { useEffect, useState } from 'react';\n\nimport {\n  crosshairLayout,\n  dataPointLayout,\n} from './CategoricalBarChartInspectOverlay.sty.js';\nimport { plotLayout } from '../../../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { HorizontalCrosshair } from '../../../../core/components/crosshair/HorizontalCrosshair.js';\nimport { getMagnifierLabel } from '../../../../core/components/crosshair/utils/get-magnifier-label.js';\nimport { VerticalCrosshair } from '../../../../core/components/crosshair/VerticalCrosshair.js';\nimport { THRESHOLD_BAR_THICKNESS } from '../../../../core/components/threshold-bar/types/constants.js';\nimport { useApplyCallbackOnScroll } from '../../../../core/hooks/useApplyCallbackOnScroll.js';\nimport { GroupDataPoint } from '../../../../core/types/data-point.js';\nimport {\n  useMouseInBoundsState,\n  useMousePositionState,\n  useSetState,\n  useTooltipState,\n} from '../../../hooks/store/selectors.js';\nimport { setMouseOutBounds } from '../../../hooks/store/state-setters.js';\nimport { useCategoricalBarChartBaseConfig } from '../../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartData } from '../../../hooks/useCategoricalBarChartData.js';\nimport { useCategoricalBarChartOverlayRef } from '../../../hooks/useCategoricalBarChartOverlayRef.js';\nimport { useCategoricalBarChartScales } from '../../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartThresholds } from '../../../hooks/useCategoricalBarChartThresholds.js';\nimport { useClosestDimensionInThresholdPoints } from '../../../hooks/useClosestDimensionInThresholdPoints.js';\nimport { useClosestDimensionPoint } from '../../../hooks/useClosestDimensionPoint.js';\nimport { useFormatter } from '../../../hooks/useFormatter.js';\nimport { DimensionXYPoint } from '../../../types/categorical-bar-chart-data.js';\nimport { isStacked, isVertical } from '../../../utils/layout.js';\nimport { CategoricalBarChartDatapoints } from '../datapoints/CategoricalBarChartDatapoints.js';\nimport { CategoricalBarChartTooltip } from '../tooltip/CategoricalBarChartTooltip.js';\nimport {\n  generateGroupDataPoints,\n  getGroupDataPointsBy,\n  mapToDataPoint,\n} from '../utils/data-points.js';\n\nexport const CROSSHAIR_BAR_CHART_LABEL = 'crosshair for bar chart';\n\nexport const CategoricalBarChartInspectOverlay = () => {\n  const { layout, groupMode } = useCategoricalBarChartBaseConfig();\n  const { width, height } = useGridPlotSize();\n  const { unit } = useCategoricalBarChartData();\n  const formatter = useFormatter();\n  const { valueScale } = useCategoricalBarChartScales();\n  const { visibleTooltip, pinnedTooltip } = useTooltipState();\n  const mousePosition = useMousePositionState();\n  const thresholds = useCategoricalBarChartThresholds();\n  const chartRef = useCategoricalBarChartOverlayRef();\n  const isInChartBounds = useMouseInBoundsState();\n\n  const chartBounds = chartRef?.current?.getBoundingClientRect();\n\n  const hasThresholds = thresholds && thresholds.length > 0;\n\n  const [pinnedClosestPoint, setPinnedClosestPoint] =\n    useState<DimensionXYPoint>();\n  const [pinnedGroupDataPoint, setPinnedGroupDataPoint] =\n    useState<GroupDataPoint>();\n\n  const magnifierCoordinate = isVertical(layout) ? 'y' : 'x';\n\n  const magnifierValue =\n    mousePosition &&\n    getMagnifierLabel(\n      unit,\n      magnifierCoordinate,\n      formatter,\n      mousePosition.relative,\n      valueScale,\n    );\n  const isGroupedAllowed = isStacked(groupMode);\n\n  const { closestDimensionPoint, closestDimensionPoints } =\n    useClosestDimensionPoint(layout, groupMode, mousePosition?.relative);\n\n  const closestDimensionPointInThreshold = useClosestDimensionInThresholdPoints(\n    layout,\n    groupMode,\n    mousePosition?.relative,\n  );\n\n  const groupDataPoints = generateGroupDataPoints(\n    closestDimensionPoints,\n    isGroupedAllowed,\n    layout,\n    layout === 'vertical' ? height : width,\n  );\n\n  useEffect(() => {\n    if (!visibleTooltip && !pinnedTooltip) {\n      setPinnedClosestPoint((prevState) =>\n        prevState !== undefined ? undefined : prevState,\n      );\n      setPinnedGroupDataPoint((prevState) =>\n        prevState !== undefined ? undefined : prevState,\n      );\n    }\n  }, [visibleTooltip, pinnedTooltip]);\n\n  useEffect(() => {\n    if (pinnedTooltip) {\n      onClickHandler();\n    }\n  }, [width, height]);\n\n  const setState = useSetState();\n\n  const onScrollCallback = () => setState(setMouseOutBounds);\n  const notShowingMagnifiers = pinnedTooltip || !isInChartBounds;\n\n  useApplyCallbackOnScroll(notShowingMagnifiers, onScrollCallback);\n\n  const onClickHandler = () => {\n    setState((prev) => ({\n      ...prev,\n      overlays: {\n        ...prev.overlays,\n        pinnedTooltip: setPinned(prev.overlays.pinnedTooltip),\n      },\n    }));\n\n    setPinnedClosestPoint((prev) =>\n      !prev && visibleTooltip\n        ? closestDimensionPointInThreshold ?? closestDimensionPoint\n        : undefined,\n    );\n    setPinnedGroupDataPoint((prev) => {\n      if (!prev && closestDimensionPoint && visibleTooltip) {\n        const dimensionId = (\n          closestDimensionPointInThreshold ?? closestDimensionPoint\n        )?.datapoint.id;\n\n        return getGroupDataPointsBy(groupDataPoints, dimensionId);\n      }\n\n      return undefined;\n    });\n  };\n\n  const setPinned = (prevPinned: boolean) =>\n    visibleTooltip ? !prevPinned : false;\n\n  const verticalCrosshairX =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint.x ?? 0\n      : mousePosition?.relative.x ?? 0;\n  const verticalCrosshairLabel =\n    pinnedTooltip || !mousePosition ? '' : magnifierValue;\n\n  const horizontalCrosshairY =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint.y ?? 0\n      : mousePosition?.relative.y ?? 0;\n  const horizontalCrosshairLabel =\n    pinnedTooltip || !mousePosition ? '' : magnifierValue;\n\n  const closestPoint =\n    pinnedTooltip && pinnedClosestPoint\n      ? pinnedClosestPoint\n      : closestDimensionPointInThreshold;\n\n  const groupPoints = pinnedGroupDataPoint\n    ? pinnedGroupDataPoint\n    : groupDataPoints;\n\n  const thresholdSize = hasThresholds ? THRESHOLD_BAR_THICKNESS : 0;\n\n  return (\n    <div className={plotLayout}>\n      {(mousePosition || pinnedTooltip) && (\n        <>\n          <div className={dataPointLayout}>\n            <CategoricalBarChartDatapoints\n              points={groupPoints}\n              closestPoint={closestPoint && mapToDataPoint(closestPoint)}\n            />\n          </div>\n          <div>\n            <CategoricalBarChartTooltip\n              closestDimensionPoint={closestPoint}\n              hasHeader={groupPoints.length > 1}\n              formatter={formatter}\n              unit={unit}\n            />\n          </div>\n        </>\n      )}\n      {pinnedTooltip || isInChartBounds ? (\n        <svg\n          className={crosshairLayout}\n          aria-label={CROSSHAIR_BAR_CHART_LABEL}\n          role=\"graphics-symbol\"\n          onClick={onClickHandler}\n        >\n          {!isVertical(layout) ? (\n            <VerticalCrosshair\n              x={verticalCrosshairX}\n              bottomLabel={verticalCrosshairLabel}\n              height={height + thresholdSize}\n              offset={thresholdSize}\n              dashed={!pinnedTooltip}\n              chartBounds={chartBounds}\n            />\n          ) : (\n            <HorizontalCrosshair\n              width={width + thresholdSize}\n              leftLabel={horizontalCrosshairLabel}\n              leftOffset={thresholdSize}\n              y={horizontalCrosshairY}\n              dashed={!pinnedTooltip}\n              chartBounds={chartBounds}\n            />\n          )}\n        </svg>\n      ) : null}\n    </div>\n  );\n};\n\nCategoricalBarChartInspectOverlay['displayName'] =\n  'CategoricalBarChartInspectOverlay';\n"],
   "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./CategoricalBarChartInspectOverlay.css";
-var crosshairLayout = "_1wi8enr0-3-1-3 _13lzg4k0-3-1-3";
-var dataPointLayout = "_1wi8enr1-3-1-3 _13lzg4k0-3-1-3";
+var crosshairLayout = "_1wi8enr0-3-2-1 _13lzg4k0-3-2-1";
+var dataPointLayout = "_1wi8enr1-3-2-1 _13lzg4k0-3-2-1";
 export {
   crosshairLayout,
   dataPointLayout

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-1-3 _13lzg4k0-3-1-3';\nexport var dataPointLayout = '_1wi8enr1-3-1-3 _13lzg4k0-3-1-3';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-2-1 _13lzg4k0-3-2-1';\nexport var dataPointLayout = '_1wi8enr1-3-2-1 _13lzg4k0-3-2-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/categorical-bar/components/thresholds/CategoricalThresholdBar.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { ThresholdBar } from "../../../core/components/threshold-bar/ThresholdBar.js";
+import { getMarkerPixel } from "../../../core/components/threshold-bar/utils/get-marker-pixel.js";
 import { getMarkerValue } from "../../../core/components/threshold-bar/utils/get-marker-value.js";
-import { getThresholdPixel } from "../../../core/components/threshold-bar/utils/get-threshold-pixel.ts.js";
-import { isStatic } from "../../../core/types/type-guards.js";
+import { isBoundedRange } from "../../../core/types/type-guards.js";
 import { useSetState } from "../../hooks/store/selectors.js";
 import { useCategoricalBarChartBaseConfig } from "../../hooks/useCategoricalBarChartBaseConfig.js";
 import { useCategoricalBarChartScales } from "../../hooks/useCategoricalBarChartScales.js";
@@ -23,20 +23,16 @@ const CategoricalThresholdBar = ({
     }));
   };
   const getMarkerProps = (yFirst, yLast) => ({
-    y0: getThresholdPixel(yFirst, valueScale, layout),
-    y1: getThresholdPixel(yLast, valueScale, layout),
+    y0: getMarkerPixel(yFirst, valueScale, layout),
+    y1: getMarkerPixel(yLast, valueScale, layout),
     value: getMarkerValue({ y0: yFirst, y1: yLast }, formatter)
   });
   const markers = thresholds.map((threshold) => {
-    if (isStatic(threshold.data)) {
-      return {
-        ...threshold,
-        ...getMarkerProps(threshold.data.value, threshold.data.value)
-      };
-    }
+    const domainMin = isBoundedRange(threshold.data) ? threshold.data.value : threshold.data.min ?? -Infinity;
+    const domainMax = isBoundedRange(threshold.data) ? threshold.data.value : threshold.data.max ?? Infinity;
     return {
       ...threshold,
-      ...getMarkerProps(threshold.data.min, threshold.data.max)
+      ...getMarkerProps(domainMin, domainMax)
     };
   });
   return markers.length ? /* @__PURE__ */ jsx(