@dynatrace/strato-components 3.1.3 → 3.2.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/categorical-bar/components/thresholds/CategoricalThresholdBar.tsx"],
-  "sourcesContent": ["import { ThresholdBar } from '../../../core/components/threshold-bar/ThresholdBar.js';\nimport type { ThresholdMarker } from '../../../core/components/threshold-bar/types.js';\nimport { getMarkerValue } from '../../../core/components/threshold-bar/utils/get-marker-value.js';\nimport { getThresholdPixel } from '../../../core/components/threshold-bar/utils/get-threshold-pixel.ts.js';\nimport { isStatic } from '../../../core/types/type-guards.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useCategoricalBarChartBaseConfig } from '../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartThresholds } from '../../hooks/useCategoricalBarChartThresholds.js';\nimport { useFormatter } from '../../hooks/useFormatter.js';\n\ninterface CategoricalThresholdBarProps {\n  length: number;\n}\n\nexport const CategoricalThresholdBar = ({\n  length,\n}: CategoricalThresholdBarProps) => {\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale } = useCategoricalBarChartScales();\n  const setState = useSetState();\n  const formatter = useFormatter();\n  const thresholds = useCategoricalBarChartThresholds();\n\n  const handleHover = (id: string | undefined) => {\n    setState((prev) => ({\n      ...prev,\n      hoveredThresholdId: id,\n    }));\n  };\n\n  const getMarkerProps = (yFirst: number, yLast: number) => ({\n    y0: getThresholdPixel(yFirst, valueScale, layout),\n    y1: getThresholdPixel(yLast, valueScale, layout),\n    value: getMarkerValue({ y0: yFirst, y1: yLast }, formatter),\n  });\n\n  const markers: ThresholdMarker[] = thresholds.map((threshold) => {\n    if (isStatic(threshold.data)) {\n      return {\n        ...threshold,\n        ...getMarkerProps(threshold.data.value, threshold.data.value),\n      };\n    }\n    return {\n      ...threshold,\n      ...getMarkerProps(threshold.data.min, threshold.data.max),\n    };\n  });\n\n  return markers.length ? (\n    <ThresholdBar\n      markers={markers}\n      length={length}\n      layout={layout}\n      onHover={handleHover}\n    />\n  ) : null;\n};\n\nCategoricalThresholdBar['displayName'] = 'TimeseriesThresholdBar';\n"],
-  "mappings": "AAmDI;AAnDJ,SAAS,oBAAoB;AAE7B,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAC7C,SAAS,wCAAwC;AACjD,SAAS,oBAAoB;AAMtB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AACF,MAAoC;AAClC,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,WAAW,IAAI,6BAA6B;AACpD,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,aAAa;AAC/B,QAAM,aAAa,iCAAiC;AAEpD,QAAM,cAAc,CAAC,OAA2B;AAC9C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,oBAAoB;AAAA,IACtB,EAAE;AAAA,EACJ;AAEA,QAAM,iBAAiB,CAAC,QAAgB,WAAmB;AAAA,IACzD,IAAI,kBAAkB,QAAQ,YAAY,MAAM;AAAA,IAChD,IAAI,kBAAkB,OAAO,YAAY,MAAM;AAAA,IAC/C,OAAO,eAAe,EAAE,IAAI,QAAQ,IAAI,MAAM,GAAG,SAAS;AAAA,EAC5D;AAEA,QAAM,UAA6B,WAAW,IAAI,CAAC,cAAc;AAC/D,QAAI,SAAS,UAAU,IAAI,GAAG;AAC5B,aAAO;AAAA,QACL,GAAG;AAAA,QACH,GAAG,eAAe,UAAU,KAAK,OAAO,UAAU,KAAK,KAAK;AAAA,MAC9D;AAAA,IACF;AACA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,eAAe,UAAU,KAAK,KAAK,UAAU,KAAK,GAAG;AAAA,IAC1D;AAAA,EACF,CAAC;AAED,SAAO,QAAQ,SACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA,EACX,IACE;AACN;AAEA,wBAAwB,aAAa,IAAI;",
+  "sourcesContent": ["import { ThresholdBar } from '../../../core/components/threshold-bar/ThresholdBar.js';\nimport type { ThresholdMarker } from '../../../core/components/threshold-bar/types.js';\nimport { getMarkerPixel } from '../../../core/components/threshold-bar/utils/get-marker-pixel.js';\nimport { getMarkerValue } from '../../../core/components/threshold-bar/utils/get-marker-value.js';\nimport { isBoundedRange } from '../../../core/types/type-guards.js';\nimport { useSetState } from '../../hooks/store/selectors.js';\nimport { useCategoricalBarChartBaseConfig } from '../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../../hooks/useCategoricalBarChartScales.js';\nimport { useCategoricalBarChartThresholds } from '../../hooks/useCategoricalBarChartThresholds.js';\nimport { useFormatter } from '../../hooks/useFormatter.js';\n\ninterface CategoricalThresholdBarProps {\n  length: number;\n}\n\nexport const CategoricalThresholdBar = ({\n  length,\n}: CategoricalThresholdBarProps) => {\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale } = useCategoricalBarChartScales();\n  const setState = useSetState();\n  const formatter = useFormatter();\n  const thresholds = useCategoricalBarChartThresholds();\n\n  const handleHover = (id: string | undefined) => {\n    setState((prev) => ({\n      ...prev,\n      hoveredThresholdId: id,\n    }));\n  };\n\n  const getMarkerProps = (yFirst: number, yLast: number) => ({\n    y0: getMarkerPixel(yFirst, valueScale, layout),\n    y1: getMarkerPixel(yLast, valueScale, layout),\n    value: getMarkerValue({ y0: yFirst, y1: yLast }, formatter),\n  });\n\n  const markers: ThresholdMarker[] = thresholds.map((threshold) => {\n    const domainMin = isBoundedRange(threshold.data)\n      ? threshold.data.value\n      : (threshold.data.min as number | null) ?? -Infinity;\n    const domainMax = isBoundedRange(threshold.data)\n      ? threshold.data.value\n      : (threshold.data.max as number | null) ?? Infinity;\n\n    return {\n      ...threshold,\n      ...getMarkerProps(domainMin, domainMax),\n    };\n  });\n\n  return markers.length ? (\n    <ThresholdBar\n      markers={markers}\n      length={length}\n      layout={layout}\n      onHover={handleHover}\n    />\n  ) : null;\n};\n\nCategoricalThresholdBar['displayName'] = 'TimeseriesThresholdBar';\n"],
+  "mappings": "AAoDI;AApDJ,SAAS,oBAAoB;AAE7B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAC7C,SAAS,wCAAwC;AACjD,SAAS,oBAAoB;AAMtB,MAAM,0BAA0B,CAAC;AAAA,EACtC;AACF,MAAoC;AAClC,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,WAAW,IAAI,6BAA6B;AACpD,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,aAAa;AAC/B,QAAM,aAAa,iCAAiC;AAEpD,QAAM,cAAc,CAAC,OAA2B;AAC9C,aAAS,CAAC,UAAU;AAAA,MAClB,GAAG;AAAA,MACH,oBAAoB;AAAA,IACtB,EAAE;AAAA,EACJ;AAEA,QAAM,iBAAiB,CAAC,QAAgB,WAAmB;AAAA,IACzD,IAAI,eAAe,QAAQ,YAAY,MAAM;AAAA,IAC7C,IAAI,eAAe,OAAO,YAAY,MAAM;AAAA,IAC5C,OAAO,eAAe,EAAE,IAAI,QAAQ,IAAI,MAAM,GAAG,SAAS;AAAA,EAC5D;AAEA,QAAM,UAA6B,WAAW,IAAI,CAAC,cAAc;AAC/D,UAAM,YAAY,eAAe,UAAU,IAAI,IAC3C,UAAU,KAAK,QACd,UAAU,KAAK,OAAyB;AAC7C,UAAM,YAAY,eAAe,UAAU,IAAI,IAC3C,UAAU,KAAK,QACd,UAAU,KAAK,OAAyB;AAE7C,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG,eAAe,WAAW,SAAS;AAAA,IACxC;AAAA,EACF,CAAC;AAED,SAAO,QAAQ,SACb;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA;AAAA,EACX,IACE;AACN;AAEA,wBAAwB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/categorical-bar/components/toolbar/CategoricalBarChartToolbar.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { DownloadDataButton } from "./DownloadDataButton.js";
+import { useBehavioralTrackingProps as _useBehavioralTrackingProps } from "../../../../core/hooks/useBehavioralTrackingProps.js";
 import { ChartToolbarRenderer } from "../../../core/components/toolbar/ChartToolbarRenderer.js";
 import { zIndicesCategoricalAreas } from "../../constants.js";
 import { useMouseInBoundsState } from "../../hooks/store/selectors.js";
@@ -16,6 +17,7 @@ const CategoricalBarChartToolbar = ({
   const { toolbar, intents } = useCategoricalBarChartBaseConfig();
   const isInChartBounds = useMouseInBoundsState();
   const isDownloadEnabled = !!toolbar.downloadData?.enabled;
+  const behaviorTrackingProps = _useBehavioralTrackingProps(toolbar)[0];
   if (toolbar.hidden || !(isDownloadEnabled || intents.length)) {
     return null;
   }
@@ -44,6 +46,7 @@ const CategoricalBarChartToolbar = ({
       isDownloadEnabled: showMenuToolbarButton,
       handleDownloadDataToolbar,
       removeDragHandle: true,
+      ...behaviorTrackingProps,
       children: showDefaultToolbarDownloadButton && /* @__PURE__ */ jsx(DownloadDataButton, { hideTooltip: isTooltipHidden })
     }
   );

package/esm/charts/categorical-bar/components/toolbar/CategoricalBarChartToolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/categorical-bar/components/toolbar/CategoricalBarChartToolbar.tsx"],
-  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent, useState } from 'react';\n\nimport { DownloadDataButton } from './DownloadDataButton.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { A11yToolbarTabIndex } from '../../../core/types/toolbar.js';\nimport { zIndicesCategoricalAreas } from '../../constants.js';\nimport { useMouseInBoundsState } from '../../hooks/store/selectors.js';\nimport { useCategoricalBarChartBaseConfig } from '../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartRawData } from '../../hooks/useCategoricalBarChartRawData.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\ntype CategoricalBarChartToolbarProps = {\n  onMouseEnter: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  onMouseLeave: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n\nexport const CategoricalBarChartToolbar = ({\n  onMouseEnter,\n  onMouseLeave,\n}: CategoricalBarChartToolbarProps) => {\n  const [isTooltipHidden, setIsTooltipHidden] = useState(false);\n  const rawData = useCategoricalBarChartRawData();\n  const { toolbar, intents } = useCategoricalBarChartBaseConfig();\n  const isInChartBounds = useMouseInBoundsState();\n\n  const isDownloadEnabled = !!toolbar.downloadData?.enabled;\n\n  if (toolbar.hidden || !(isDownloadEnabled || intents.length)) {\n    return null;\n  }\n\n  const handleToggleMenu = (open: boolean): void => {\n    !open && onMouseLeave();\n  };\n\n  /** Handles the download button when clicked. */\n  const handleDownloadDataToolbar = () => buildAndDownloadCsv(rawData);\n\n  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents.length;\n  const showMenuToolbarButton = isDownloadEnabled && !!intents.length;\n  const initialA11yState: A11yToolbarTabIndex[] =\n    showDefaultToolbarDownloadButton ? [{ download: 0 }] : [{ intent: 0 }];\n\n  return (\n    <ChartToolbarRenderer\n      visible={isInChartBounds}\n      placement={toolbar.placement}\n      collapsed={toolbar.collapsed}\n      draggable={true}\n      zIndex={zIndicesCategoricalAreas.toolbar}\n      initialA11yState={initialA11yState}\n      onToggleToolbar={setIsTooltipHidden}\n      onToggleMenu={handleToggleMenu}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      menuDisplayMode=\"never\"\n      intents={intents}\n      isDownloadEnabled={showMenuToolbarButton}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      removeDragHandle\n    >\n      {showDefaultToolbarDownloadButton && (\n        <DownloadDataButton hideTooltip={isTooltipHidden} />\n      )}\n    </ChartToolbarRenderer>\n  );\n};\n"],
-  "mappings": "AA8DQ;AA9DR,SAA6C,gBAAgB;AAE7D,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AAErC,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,wCAAwC;AACjD,SAAS,qCAAqC;AAC9C,SAAS,2BAA2B;AAO7B,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,UAAU,8BAA8B;AAC9C,QAAM,EAAE,SAAS,QAAQ,IAAI,iCAAiC;AAC9D,QAAM,kBAAkB,sBAAsB;AAE9C,QAAM,oBAAoB,CAAC,CAAC,QAAQ,cAAc;AAElD,MAAI,QAAQ,UAAU,EAAE,qBAAqB,QAAQ,SAAS;AAC5D,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,CAAC,SAAwB;AAChD,KAAC,QAAQ,aAAa;AAAA,EACxB;AAGA,QAAM,4BAA4B,MAAM,oBAAoB,OAAO;AAEnE,QAAM,mCAAmC,qBAAqB,CAAC,QAAQ;AACvE,QAAM,wBAAwB,qBAAqB,CAAC,CAAC,QAAQ;AAC7D,QAAM,mBACJ,mCAAmC,CAAC,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,QAAQ;AAAA,MACnB,WAAW,QAAQ;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ,yBAAyB;AAAA,MACjC;AAAA,MACA,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,iBAAgB;AAAA,MAChB;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,kBAAgB;AAAA,MAEf,8CACC,oBAAC,sBAAmB,aAAa,iBAAiB;AAAA;AAAA,EAEtD;AAEJ;",
+  "sourcesContent": ["import { type MouseEvent as ReactMouseEvent, useState } from 'react';\n\nimport { DownloadDataButton } from './DownloadDataButton.js';\nimport { useBehavioralTrackingProps as _useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { ChartToolbarRenderer } from '../../../core/components/toolbar/ChartToolbarRenderer.js';\nimport { A11yToolbarTabIndex } from '../../../core/types/toolbar.js';\nimport { zIndicesCategoricalAreas } from '../../constants.js';\nimport { useMouseInBoundsState } from '../../hooks/store/selectors.js';\nimport { useCategoricalBarChartBaseConfig } from '../../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartRawData } from '../../hooks/useCategoricalBarChartRawData.js';\nimport { buildAndDownloadCsv } from '../../utils/build-and-download-csv.js';\n\ntype CategoricalBarChartToolbarProps = {\n  onMouseEnter: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n  onMouseLeave: (event?: ReactMouseEvent<HTMLDivElement, MouseEvent>) => void;\n};\n\nexport const CategoricalBarChartToolbar = ({\n  onMouseEnter,\n  onMouseLeave,\n}: CategoricalBarChartToolbarProps) => {\n  const [isTooltipHidden, setIsTooltipHidden] = useState(false);\n  const rawData = useCategoricalBarChartRawData();\n  const { toolbar, intents } = useCategoricalBarChartBaseConfig();\n  const isInChartBounds = useMouseInBoundsState();\n\n  const isDownloadEnabled = !!toolbar.downloadData?.enabled;\n  const behaviorTrackingProps = _useBehavioralTrackingProps(toolbar)[0];\n\n  if (toolbar.hidden || !(isDownloadEnabled || intents.length)) {\n    return null;\n  }\n\n  const handleToggleMenu = (open: boolean): void => {\n    !open && onMouseLeave();\n  };\n\n  /** Handles the download button when clicked. */\n  const handleDownloadDataToolbar = () => buildAndDownloadCsv(rawData);\n\n  const showDefaultToolbarDownloadButton = isDownloadEnabled && !intents.length;\n  const showMenuToolbarButton = isDownloadEnabled && !!intents.length;\n  const initialA11yState: A11yToolbarTabIndex[] =\n    showDefaultToolbarDownloadButton ? [{ download: 0 }] : [{ intent: 0 }];\n\n  return (\n    <ChartToolbarRenderer\n      visible={isInChartBounds}\n      placement={toolbar.placement}\n      collapsed={toolbar.collapsed}\n      draggable={true}\n      zIndex={zIndicesCategoricalAreas.toolbar}\n      initialA11yState={initialA11yState}\n      onToggleToolbar={setIsTooltipHidden}\n      onToggleMenu={handleToggleMenu}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      menuDisplayMode=\"never\"\n      intents={intents}\n      isDownloadEnabled={showMenuToolbarButton}\n      handleDownloadDataToolbar={handleDownloadDataToolbar}\n      removeDragHandle\n      {...behaviorTrackingProps}\n    >\n      {showDefaultToolbarDownloadButton && (\n        <DownloadDataButton hideTooltip={isTooltipHidden} />\n      )}\n    </ChartToolbarRenderer>\n  );\n};\n"],
+  "mappings": "AAiEQ;AAjER,SAA6C,gBAAgB;AAE7D,SAAS,0BAA0B;AACnC,SAAS,8BAA8B,mCAAmC;AAC1E,SAAS,4BAA4B;AAErC,SAAS,gCAAgC;AACzC,SAAS,6BAA6B;AACtC,SAAS,wCAAwC;AACjD,SAAS,qCAAqC;AAC9C,SAAS,2BAA2B;AAO7B,MAAM,6BAA6B,CAAC;AAAA,EACzC;AAAA,EACA;AACF,MAAuC;AACrC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAC5D,QAAM,UAAU,8BAA8B;AAC9C,QAAM,EAAE,SAAS,QAAQ,IAAI,iCAAiC;AAC9D,QAAM,kBAAkB,sBAAsB;AAE9C,QAAM,oBAAoB,CAAC,CAAC,QAAQ,cAAc;AAClD,QAAM,wBAAwB,4BAA4B,OAAO,EAAE,CAAC;AAEpE,MAAI,QAAQ,UAAU,EAAE,qBAAqB,QAAQ,SAAS;AAC5D,WAAO;AAAA,EACT;AAEA,QAAM,mBAAmB,CAAC,SAAwB;AAChD,KAAC,QAAQ,aAAa;AAAA,EACxB;AAGA,QAAM,4BAA4B,MAAM,oBAAoB,OAAO;AAEnE,QAAM,mCAAmC,qBAAqB,CAAC,QAAQ;AACvE,QAAM,wBAAwB,qBAAqB,CAAC,CAAC,QAAQ;AAC7D,QAAM,mBACJ,mCAAmC,CAAC,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;AAEvE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW,QAAQ;AAAA,MACnB,WAAW,QAAQ;AAAA,MACnB,WAAW;AAAA,MACX,QAAQ,yBAAyB;AAAA,MACjC;AAAA,MACA,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA,iBAAgB;AAAA,MAChB;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MACA,kBAAgB;AAAA,MACf,GAAG;AAAA,MAEH,8CACC,oBAAC,sBAAmB,aAAa,iBAAiB;AAAA;AAAA,EAEtD;AAEJ;",
   "names": []
 }

package/esm/charts/categorical-bar/layout/CategoricalGridZeroLineLayout.js

@@ -24,7 +24,7 @@ const CategoricalGridZeroLineLayout = () => {
     "svg",
     {
       className: plotLayout,
-      role: "img",
+      role: "graphics-symbol",
       "aria-label": "categorical grid zero line",
       children: /* @__PURE__ */ jsx(GridLine, { from, to, highlight: true })
     }

package/esm/charts/categorical-bar/layout/CategoricalGridZeroLineLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/layout/CategoricalGridZeroLineLayout.tsx"],
-  "sourcesContent": ["import { plotLayout } from '../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { GridLine } from '../../core/components/grid/GridLine.js';\nimport { useCategoricalBarChartBaseConfig } from '../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../hooks/useCategoricalBarChartScales.js';\nimport { buildZeroLine } from '../utils/build-zero-line.js';\nimport { isVertical } from '../utils/layout.js';\n\nexport const CategoricalGridZeroLineLayout = () => {\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale: scale } = useCategoricalBarChartScales();\n\n  const { width, height } = useGridPlotSize();\n  const zeroLineValue = scale(0) ?? 0;\n\n  const referenceSize = isVertical(layout) ? height : width;\n\n  if (zeroLineValue === referenceSize || zeroLineValue === 0) {\n    return null;\n  }\n\n  const {\n    show: showLine,\n    from,\n    to,\n  } = buildZeroLine(layout, zeroLineValue, width, height);\n\n  return showLine ? (\n    <svg\n      className={plotLayout}\n      role=\"img\"\n      aria-label=\"categorical grid zero line\"\n    >\n      <GridLine from={from} to={to} highlight />\n    </svg>\n  ) : null;\n};\n\nCategoricalGridZeroLineLayout['displayName'] = 'CategoricalGridZeroLineLayout';\n"],
+  "sourcesContent": ["import { plotLayout } from '../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { GridLine } from '../../core/components/grid/GridLine.js';\nimport { useCategoricalBarChartBaseConfig } from '../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../hooks/useCategoricalBarChartScales.js';\nimport { buildZeroLine } from '../utils/build-zero-line.js';\nimport { isVertical } from '../utils/layout.js';\n\nexport const CategoricalGridZeroLineLayout = () => {\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale: scale } = useCategoricalBarChartScales();\n\n  const { width, height } = useGridPlotSize();\n  const zeroLineValue = scale(0) ?? 0;\n\n  const referenceSize = isVertical(layout) ? height : width;\n\n  if (zeroLineValue === referenceSize || zeroLineValue === 0) {\n    return null;\n  }\n\n  const {\n    show: showLine,\n    from,\n    to,\n  } = buildZeroLine(layout, zeroLineValue, width, height);\n\n  return showLine ? (\n    <svg\n      className={plotLayout}\n      role=\"graphics-symbol\"\n      aria-label=\"categorical grid zero line\"\n    >\n      <GridLine from={from} to={to} highlight />\n    </svg>\n  ) : null;\n};\n\nCategoricalGridZeroLineLayout['displayName'] = 'CategoricalGridZeroLineLayout';\n"],
   "mappings": "AAiCM;AAjCN,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAC7C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAEpB,MAAM,gCAAgC,MAAM;AACjD,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,YAAY,MAAM,IAAI,6BAA6B;AAE3D,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,gBAAgB,MAAM,CAAC,KAAK;AAElC,QAAM,gBAAgB,WAAW,MAAM,IAAI,SAAS;AAEpD,MAAI,kBAAkB,iBAAiB,kBAAkB,GAAG;AAC1D,WAAO;AAAA,EACT;AAEA,QAAM;AAAA,IACJ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,cAAc,QAAQ,eAAe,OAAO,MAAM;AAEtD,SAAO,WACL;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAW;AAAA,MAEX,8BAAC,YAAS,MAAY,IAAQ,WAAS,MAAC;AAAA;AAAA,EAC1C,IACE;AACN;AAEA,8BAA8B,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/categorical-bar/types/categorical-bar-chart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/types/categorical-bar-chart.ts"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  ColorPaletteMode,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendPosition, LegendProps } from '../../core/types/legend.js';\nimport type {\n  AxisScaleType,\n  ValueRepresentation,\n} from '../../core/types/scales.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport {\n  ChartToolbarConfig,\n  InternalChartToolbarConfigured,\n} from '../../core/types/toolbar.js';\nimport type { WithId } from '../../core/types/with-id.js';\nimport type { CategoricalBarChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js';\n\n//region Common\n/**\n * Defines whether the item is displayed horizontally or vertically.\n * @public\n */\nexport const layoutOptions = ['horizontal', 'vertical'] as const;\n/**\n * @public\n */\nexport type Layout = (typeof layoutOptions)[number];\n\n/**\n * Strategy used for grouping the bars in a bar chart.\n * @public\n */\nexport const groupModeOptions = ['grouped', 'stacked'] as const;\n/**\n * @public\n */\nexport type GroupMode = (typeof groupModeOptions)[number];\n\n/**\n * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n * @public\n */\nexport const categoricalChartTooltipVariantOptions = [\n  'single',\n  'grouped',\n] as const;\n/**\n * @public\n */\nexport type CategoricalChartTooltipVariant =\n  (typeof categoricalChartTooltipVariantOptions)[number];\n\n//endregion\n\n//region Slots\n/**\n * @internal\n */\nexport interface CategoricalBarChartSlots {\n  legend: {\n    position?: LegendPosition;\n    hidden?: boolean;\n  };\n  tooltip: {\n    variant?: CategoricalChartTooltipVariant;\n  };\n  valueAxis: {\n    label?: string;\n    min?: number;\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  categoryAxis: {\n    tickLabelLayout?: Layout;\n    label?: string;\n  };\n  thresholds: CategoricalBarChartThresholdIndicatorProps[];\n  toolbar: Partial<CategoricalBarChartToolbarInternalConfigured>;\n  colorRules: ColorRuleProps[];\n  intents: InternalCategoricalBarChartConfig['intents'];\n}\n\n//endregion\n\n//region Configuration\n/**\n * @public\n */\nexport interface CategoricalBarChartConfiguration {\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   * @defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a categories.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Tooltip config for the chart\n   */\n  tooltip?: {\n    /**\n     * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n     */\n    variant?: CategoricalChartTooltipVariant;\n  };\n  /**\n   * Config for the axis holding the category\n   */\n  categoryAxis?: {\n    /**\n     * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n     * @defaultValue 'horizontal'\n     */\n    tickLabelLayout?: Layout;\n    // Optional axis label\n    label?: string;\n  };\n  /**\n   * Config for the axis holding the category values\n   */\n  valueAxis?: {\n    // Optional axis label\n    label?: string;\n    // Min value to be represented on a value axis\n    min?: number;\n    // Max value to be represented on a value axis\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  // Config for the chart legend config.\n  legend?: {\n    /**\n     * Defines the position where to show the chart legend.\n     * @defaultValue \"auto\"\n     */\n    position?: LegendPosition;\n    /**\n     * Whether the legend is hidden or shown\n     * @defaultValue \"false\" - the legend is shown\n     */\n    hidden?: boolean;\n  };\n  /**\n   * Truncation mode to use (start, middle, end)\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"multi-colored\" - each bar gets a color in the palette sequentially\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /**\n   * ThresholdIndicator configuration for the categorical bar chart value axis.\n   */\n  thresholdIndicators?: CategoricalBarChartThresholdConfiguration[];\n  /**\n   * Config for the chart toolbar\n   */\n  toolbar?: CategoricalBarChartToolbarConfiguration;\n  /**\n   * Color rules to apply to the bars\n   */\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * Config type holding all the required config used in the categorical bar chart. Considers that the defaults have already been applied.\n * @public\n */\nexport type RequiredCategoricalBarChartConfiguration =\n  Required<CategoricalBarChartConfiguration> & {\n    tooltip: CategoricalBarChartTooltipConfiguration;\n    legend: CategoricalBarChartLegendConfiguration;\n    categoryAxis: CategoricalBarChartCategoryAxisConfiguration;\n    thresholdIndicators: InternalCategoricalBarChartThresholdConfiguration[];\n    toolbar?: CategoricalBarChartToolbarConfiguration;\n  };\n\n/**\n * @internal\n */\nexport type InternalCategoricalBarChartConfig = Omit<\n  RequiredCategoricalBarChartConfiguration,\n  'toolbar'\n> & {\n  intents: IntentProps[];\n  toolbar: CategoricalBarChartToolbarInternalConfigured &\n    Required<\n      Pick<\n        CategoricalBarChartToolbarInternalConfigured,\n        'placement' | 'hidden' | 'downloadData'\n      >\n    >;\n};\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipConfiguration {\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendConfiguration = LegendProps;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisConfiguration {\n  label?: string;\n  min?: number;\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartToolbarConfiguration = ChartToolbarConfig & {\n  hidden?: boolean;\n};\n\n/**\n * @internal\n */\nexport interface CategoricalBarChartToolbarInternalConfigured\n  extends InternalChartToolbarConfigured {\n  hidden?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisConfiguration {\n  label?: string;\n  tickLabelLayout: Layout;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartThresholdConfiguration =\n  CategoricalBarChartThresholdIndicatorProps;\n\n/**\n * @public\n */\nexport type InternalCategoricalBarChartThresholdConfiguration =\n  WithId<CategoricalBarChartThresholdConfiguration>;\n//endregion\n\n//region Props\n// TODO: ADES-5109 we need to support Unit in the categoricalBarChart\n/**\n * @public\n * @deprecated CategoricalUnit is deprecated, use string | Unit instead.\n */\nexport type CategoricalUnit = string;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartData extends Record<string, unknown> {\n  category: string;\n  value: number | Record<string, number>;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  unit?: CategoricalUnit | string | Unit;\n  /* @deprecated - use color rules instead. This key will be removed in a future release */\n  color?: string;\n}\n\n/**\n * Ref of the Categorical bar chart\n * @public\n */\nexport interface CategoricalBarChartRef {\n  /** Chart div element */\n  element: HTMLDivElement | null;\n  /** Returns the current serialized config of the categorical bar chart .*/\n  getConfig: () => string;\n  /** Downloads map raw data .*/\n  downloadData: () => void;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartProps extends StylingProps, MaskingProps {\n  /**\n   * Data object for the categorical bar chart\n   */\n  data: CategoricalBarChartData[];\n  /**\n   * Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Chart width. When a number is specified, it's treated as pixels,\n   * otherwise a valid width string is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   *@defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a category.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Category actions to be shown in the legend and tooltip actions\n   */\n  seriesActions?: (series: Record<string, unknown>) => SeriesActionsTemplate;\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   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"single-color\" - each bar gets the same color\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /** Show the loading indicator when truthy.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipProps {\n  /**\n   * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.\n   */\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisProps {\n  /**\n   * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'horizontal'\n   */\n  tickLabelLayout?: Layout;\n  // Optional axis label\n  label?: string;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisProps {\n  // Optional axis label\n  label?: string;\n  // Min value to be represented on a value axis\n  min?: number;\n  // Max value to be represented on a value axis\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendProps = LegendProps;\n\n/**\n * @internal\n */\nexport type CategoricalValueScales =\n  | ScaleLinear<number, number>\n  | ScaleSymLog<number, number>;\n"],
-  "mappings": "AAqCO,MAAM,gBAAgB,CAAC,cAAc,UAAU;AAU/C,MAAM,mBAAmB,CAAC,WAAW,SAAS;AAU9C,MAAM,wCAAwC;AAAA,EACnD;AAAA,EACA;AACF;",
+  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport type { BehaviorTrackingProps } from '../../../core/types/behavior-tracking-props.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  ColorPaletteMode,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendPosition, LegendProps } from '../../core/types/legend.js';\nimport type {\n  AxisScaleType,\n  ValueRepresentation,\n} from '../../core/types/scales.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport {\n  ChartToolbarConfig,\n  InternalChartToolbarConfigured,\n} from '../../core/types/toolbar.js';\nimport type { WithId } from '../../core/types/with-id.js';\nimport type { CategoricalBarChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js';\n\n//region Common\n/**\n * Defines whether the item is displayed horizontally or vertically.\n * @public\n */\nexport const layoutOptions = ['horizontal', 'vertical'] as const;\n/**\n * @public\n */\nexport type Layout = (typeof layoutOptions)[number];\n\n/**\n * Strategy used for grouping the bars in a bar chart.\n * @public\n */\nexport const groupModeOptions = ['grouped', 'stacked'] as const;\n/**\n * @public\n */\nexport type GroupMode = (typeof groupModeOptions)[number];\n\n/**\n * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n * @public\n */\nexport const categoricalChartTooltipVariantOptions = [\n  'single',\n  'grouped',\n] as const;\n/**\n * @public\n */\nexport type CategoricalChartTooltipVariant =\n  (typeof categoricalChartTooltipVariantOptions)[number];\n\n//endregion\n\n//region Slots\n/**\n * @internal\n */\nexport interface CategoricalBarChartSlots {\n  legend: {\n    position?: LegendPosition;\n    hidden?: boolean;\n  };\n  tooltip: {\n    variant?: CategoricalChartTooltipVariant;\n  };\n  valueAxis: {\n    label?: string;\n    min?: number;\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  categoryAxis: {\n    tickLabelLayout?: Layout;\n    label?: string;\n  };\n  thresholds: CategoricalBarChartThresholdIndicatorProps[];\n  toolbar: Partial<CategoricalBarChartToolbarInternalConfigured>;\n  colorRules: ColorRuleProps[];\n  intents: InternalCategoricalBarChartConfig['intents'];\n}\n\n//endregion\n\n//region Configuration\n/**\n * @public\n */\nexport interface CategoricalBarChartConfiguration {\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   * @defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a categories.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Tooltip config for the chart\n   */\n  tooltip?: {\n    /**\n     * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n     */\n    variant?: CategoricalChartTooltipVariant;\n  };\n  /**\n   * Config for the axis holding the category\n   */\n  categoryAxis?: {\n    /**\n     * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n     * @defaultValue 'horizontal'\n     */\n    tickLabelLayout?: Layout;\n    // Optional axis label\n    label?: string;\n  };\n  /**\n   * Config for the axis holding the category values\n   */\n  valueAxis?: {\n    // Optional axis label\n    label?: string;\n    // Min value to be represented on a value axis\n    min?: number;\n    // Max value to be represented on a value axis\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  // Config for the chart legend config.\n  legend?: {\n    /**\n     * Defines the position where to show the chart legend.\n     * @defaultValue \"auto\"\n     */\n    position?: LegendPosition;\n    /**\n     * Whether the legend is hidden or shown\n     * @defaultValue \"false\" - the legend is shown\n     */\n    hidden?: boolean;\n  };\n  /**\n   * Truncation mode to use (start, middle, end)\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"multi-colored\" - each bar gets a color in the palette sequentially\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /**\n   * ThresholdIndicator configuration for the categorical bar chart value axis.\n   */\n  thresholdIndicators?: CategoricalBarChartThresholdConfiguration[];\n  /**\n   * Config for the chart toolbar\n   */\n  toolbar?: CategoricalBarChartToolbarConfiguration;\n  /**\n   * Color rules to apply to the bars\n   */\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * Config type holding all the required config used in the categorical bar chart. Considers that the defaults have already been applied.\n * @public\n */\nexport type RequiredCategoricalBarChartConfiguration =\n  Required<CategoricalBarChartConfiguration> & {\n    tooltip: CategoricalBarChartTooltipConfiguration;\n    legend: CategoricalBarChartLegendConfiguration;\n    categoryAxis: CategoricalBarChartCategoryAxisConfiguration;\n    thresholdIndicators: InternalCategoricalBarChartThresholdConfiguration[];\n    toolbar?: CategoricalBarChartToolbarConfiguration;\n  };\n\n/**\n * @internal\n */\nexport type InternalCategoricalBarChartConfig = Omit<\n  RequiredCategoricalBarChartConfiguration,\n  'toolbar'\n> & {\n  intents: IntentProps[];\n  toolbar: CategoricalBarChartToolbarInternalConfigured &\n    Required<\n      Pick<\n        CategoricalBarChartToolbarInternalConfigured,\n        'placement' | 'hidden' | 'downloadData'\n      >\n    >;\n};\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipConfiguration {\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendConfiguration = LegendProps;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisConfiguration {\n  label?: string;\n  min?: number;\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartToolbarConfiguration = ChartToolbarConfig & {\n  hidden?: boolean;\n};\n\n/**\n * @internal\n */\nexport interface CategoricalBarChartToolbarInternalConfigured\n  extends InternalChartToolbarConfigured {\n  hidden?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisConfiguration {\n  label?: string;\n  tickLabelLayout: Layout;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartThresholdConfiguration =\n  CategoricalBarChartThresholdIndicatorProps;\n\n/**\n * @public\n */\nexport type InternalCategoricalBarChartThresholdConfiguration =\n  WithId<CategoricalBarChartThresholdConfiguration>;\n//endregion\n\n//region Props\n// TODO: ADES-5109 we need to support Unit in the categoricalBarChart\n/**\n * @public\n * @deprecated CategoricalUnit is deprecated, use string | Unit instead.\n */\nexport type CategoricalUnit = string;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartData extends Record<string, unknown> {\n  category: string;\n  value: number | Record<string, number>;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  unit?: CategoricalUnit | string | Unit;\n  /* @deprecated - use color rules instead. This key will be removed in a future release */\n  color?: string;\n}\n\n/**\n * Ref of the Categorical bar chart\n * @public\n */\nexport interface CategoricalBarChartRef {\n  /** Chart div element */\n  element: HTMLDivElement | null;\n  /** Returns the current serialized config of the categorical bar chart .*/\n  getConfig: () => string;\n  /** Downloads map raw data .*/\n  downloadData: () => void;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartProps\n  extends StylingProps,\n    MaskingProps,\n    BehaviorTrackingProps {\n  /**\n   * Data object for the categorical bar chart\n   */\n  data: CategoricalBarChartData[];\n  /**\n   * Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Chart width. When a number is specified, it's treated as pixels,\n   * otherwise a valid width string is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   *@defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a category.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Category actions to be shown in the legend and tooltip actions\n   */\n  seriesActions?: (series: Record<string, unknown>) => SeriesActionsTemplate;\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   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"single-color\" - each bar gets the same color\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /** Show the loading indicator when truthy.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipProps {\n  /**\n   * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.\n   */\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisProps {\n  /**\n   * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'horizontal'\n   */\n  tickLabelLayout?: Layout;\n  // Optional axis label\n  label?: string;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisProps {\n  // Optional axis label\n  label?: string;\n  // Min value to be represented on a value axis\n  min?: number;\n  // Max value to be represented on a value axis\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendProps = LegendProps;\n\n/**\n * @internal\n */\nexport type CategoricalValueScales =\n  | ScaleLinear<number, number>\n  | ScaleSymLog<number, number>;\n"],
+  "mappings": "AAsCO,MAAM,gBAAgB,CAAC,cAAc,UAAU;AAU/C,MAAM,mBAAmB,CAAC,WAAW,SAAS;AAU9C,MAAM,wCAAwC;AAAA,EACnD;AAAA,EACA;AACF;",
   "names": []
 }

package/esm/charts/categorical-bar/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 { CategoryAxis } from "../slots/CategoryAxis.js";
 import { CategoricalBarChartDownloadCSVSlot } from "../slots/DownloadCSV.js";
 import { Legend } from "../slots/Legend.js";
@@ -83,7 +84,8 @@ const iterateSlots = (children) => {
     } else if (isSlot(child, CategoricalBarChartToolbarSlot)) {
       slots.toolbar = {
         ...slots.toolbar,
-        ...sanitizeProps(child.props)
+        ...sanitizeProps(child.props),
+        ...extractBehaviorTrackingProps(child.props)
       };
     } else if (isSlot(child, CategoricalBarChartDownloadCSVSlot)) {
       slots.toolbar.downloadData ||= { enabled: false };

package/esm/charts/categorical-bar/utils/iterate-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/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 { 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 { CategoryAxis } from '../slots/CategoryAxis.js';\nimport { CategoricalBarChartDownloadCSVSlot } from '../slots/DownloadCSV.js';\nimport { Legend } from '../slots/Legend.js';\nimport {\n  CategoricalBarChartThresholdIndicatorProps,\n  ThresholdIndicator,\n} from '../slots/ThresholdIndicator.js';\nimport { CategoricalBarChartToolbarSlot } from '../slots/Toolbar.js';\nimport { Tooltip } from '../slots/Tooltip.js';\nimport { ValueAxis } from '../slots/ValueAxis.js';\nimport {\n  CategoricalBarChartSlots,\n  CategoricalBarChartToolbarConfiguration,\n} from '../types/categorical-bar-chart.js';\n\n/**\n * Generate chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (\n  children: ReactNode,\n): CategoricalBarChartToolbarConfiguration => {\n  let slots = {};\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\nexport const iterateSlots = (children: ReactNode) => {\n  let slots: CategoricalBarChartSlots = {\n    legend: {},\n    tooltip: {},\n    valueAxis: {},\n    categoryAxis: {},\n    thresholds: [],\n    toolbar: {},\n    colorRules: [],\n    intents: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Legend)) {\n      const legend = child.props;\n\n      slots = {\n        ...slots,\n        legend,\n      };\n    } else if (isSlot(child, CategoryAxis)) {\n      const categoryAxis = child.props;\n      slots = {\n        ...slots,\n        categoryAxis,\n      };\n    } else if (isSlot(child, ValueAxis)) {\n      const valueAxis = child.props;\n\n      slots = {\n        ...slots,\n        valueAxis,\n      };\n    } else if (isSlot(child, Tooltip)) {\n      const tooltip = child.props;\n      slots = {\n        ...slots,\n        tooltip,\n      };\n    } else if (isSlot(child, ThresholdIndicator)) {\n      const thresholdProps =\n        child.props as CategoricalBarChartThresholdIndicatorProps;\n      slots.thresholds.push(thresholdProps);\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbar } = child.props;\n\n      const toolbarChildren = iterateChartToolbarSlots(children);\n\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          ...toolbar,\n          ...toolbarChildren,\n        },\n      };\n    } else if (isSlot(child, Intent)) {\n      slots.intents.push(child.props);\n    } else if (isSlot(child, ColorRule)) {\n      const colorRule = child.props;\n      if (isValidColorRule(colorRule)) {\n        slots.colorRules.push(colorRule);\n      }\n    } else if (isSlot(child, CategoricalBarChartToolbarSlot)) {\n      slots.toolbar = {\n        ...slots.toolbar,\n        ...sanitizeProps(child.props),\n      };\n    } else if (isSlot(child, CategoricalBarChartDownloadCSVSlot)) {\n      slots.toolbar.downloadData ||= { enabled: false };\n      slots.toolbar.downloadData.enabled = true;\n    }\n  });\n\n  return slots;\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,WAAW,wBAAwB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,oBAAoB;AAC7B,SAAS,0CAA0C;AACnD,SAAS,cAAc;AACvB;AAAA,EAEE;AAAA,OACK;AACP,SAAS,sCAAsC;AAC/C,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAW1B,MAAM,2BAA2B,CAC/B,aAC4C;AAC5C,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;AAEO,MAAM,eAAe,CAAC,aAAwB;AACnD,MAAI,QAAkC;AAAA,IACpC,QAAQ,CAAC;AAAA,IACT,SAAS,CAAC;AAAA,IACV,WAAW,CAAC;AAAA,IACZ,cAAc,CAAC;AAAA,IACf,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,IACV,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,EACZ;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,MAAM,GAAG;AACzB,YAAM,SAAS,MAAM;AAErB,cAAQ;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,YAAY,GAAG;AACtC,YAAM,eAAe,MAAM;AAC3B,cAAQ;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM,YAAY,MAAM;AAExB,cAAQ;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,OAAO,GAAG;AACjC,YAAM,UAAU,MAAM;AACtB,cAAQ;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,kBAAkB,GAAG;AAC5C,YAAM,iBACJ,MAAM;AACR,YAAM,WAAW,KAAK,cAAc;AAAA,IAEtC,WAAW,OAAO,OAAO,YAAY,GAAG;AACtC,YAAM,EAAE,UAAAA,WAAU,GAAG,QAAQ,IAAI,MAAM;AAEvC,YAAM,kBAAkB,yBAAyBA,SAAQ;AAEzD,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,YAAM,QAAQ,KAAK,MAAM,KAAK;AAAA,IAChC,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM,YAAY,MAAM;AACxB,UAAI,iBAAiB,SAAS,GAAG;AAC/B,cAAM,WAAW,KAAK,SAAS;AAAA,MACjC;AAAA,IACF,WAAW,OAAO,OAAO,8BAA8B,GAAG;AACxD,YAAM,UAAU;AAAA,QACd,GAAG,MAAM;AAAA,QACT,GAAG,cAAc,MAAM,KAAK;AAAA,MAC9B;AAAA,IACF,WAAW,OAAO,OAAO,kCAAkC,GAAG;AAC5D,YAAM,QAAQ,iBAAiB,EAAE,SAAS,MAAM;AAChD,YAAM,QAAQ,aAAa,UAAU;AAAA,IACvC;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
+  "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 { 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 { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { CategoryAxis } from '../slots/CategoryAxis.js';\nimport { CategoricalBarChartDownloadCSVSlot } from '../slots/DownloadCSV.js';\nimport { Legend } from '../slots/Legend.js';\nimport {\n  CategoricalBarChartThresholdIndicatorProps,\n  ThresholdIndicator,\n} from '../slots/ThresholdIndicator.js';\nimport { CategoricalBarChartToolbarSlot } from '../slots/Toolbar.js';\nimport { Tooltip } from '../slots/Tooltip.js';\nimport { ValueAxis } from '../slots/ValueAxis.js';\nimport {\n  CategoricalBarChartSlots,\n  CategoricalBarChartToolbarConfiguration,\n} from '../types/categorical-bar-chart.js';\n\n/**\n * Generate chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (\n  children: ReactNode,\n): CategoricalBarChartToolbarConfiguration => {\n  let slots = {};\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\nexport const iterateSlots = (children: ReactNode) => {\n  let slots: CategoricalBarChartSlots = {\n    legend: {},\n    tooltip: {},\n    valueAxis: {},\n    categoryAxis: {},\n    thresholds: [],\n    toolbar: {},\n    colorRules: [],\n    intents: [],\n  };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, Legend)) {\n      const legend = child.props;\n\n      slots = {\n        ...slots,\n        legend,\n      };\n    } else if (isSlot(child, CategoryAxis)) {\n      const categoryAxis = child.props;\n      slots = {\n        ...slots,\n        categoryAxis,\n      };\n    } else if (isSlot(child, ValueAxis)) {\n      const valueAxis = child.props;\n\n      slots = {\n        ...slots,\n        valueAxis,\n      };\n    } else if (isSlot(child, Tooltip)) {\n      const tooltip = child.props;\n      slots = {\n        ...slots,\n        tooltip,\n      };\n    } else if (isSlot(child, ThresholdIndicator)) {\n      const thresholdProps =\n        child.props as CategoricalBarChartThresholdIndicatorProps;\n      slots.thresholds.push(thresholdProps);\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n    } else if (isSlot(child, ChartToolbar)) {\n      const { children, ...toolbar } = child.props;\n\n      const toolbarChildren = iterateChartToolbarSlots(children);\n\n      slots = {\n        ...slots,\n        toolbar: {\n          ...slots.toolbar,\n          ...toolbar,\n          ...toolbarChildren,\n        },\n      };\n    } else if (isSlot(child, Intent)) {\n      slots.intents.push(child.props);\n    } else if (isSlot(child, ColorRule)) {\n      const colorRule = child.props;\n      if (isValidColorRule(colorRule)) {\n        slots.colorRules.push(colorRule);\n      }\n    } else if (isSlot(child, CategoricalBarChartToolbarSlot)) {\n      slots.toolbar = {\n        ...slots.toolbar,\n        ...sanitizeProps(child.props),\n        ...extractBehaviorTrackingProps(child.props),\n      };\n    } else if (isSlot(child, CategoricalBarChartDownloadCSVSlot)) {\n      slots.toolbar.downloadData ||= { enabled: false };\n      slots.toolbar.downloadData.enabled = true;\n    }\n  });\n\n  return slots;\n};\n"],
+  "mappings": "AAAA,SAAS,gBAAgC;AAEzC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,WAAW,wBAAwB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,oCAAoC;AAC7C,SAAS,oBAAoB;AAC7B,SAAS,0CAA0C;AACnD,SAAS,cAAc;AACvB;AAAA,EAEE;AAAA,OACK;AACP,SAAS,sCAAsC;AAC/C,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAW1B,MAAM,2BAA2B,CAC/B,aAC4C;AAC5C,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;AAEO,MAAM,eAAe,CAAC,aAAwB;AACnD,MAAI,QAAkC;AAAA,IACpC,QAAQ,CAAC;AAAA,IACT,SAAS,CAAC;AAAA,IACV,WAAW,CAAC;AAAA,IACZ,cAAc,CAAC;AAAA,IACf,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,IACV,YAAY,CAAC;AAAA,IACb,SAAS,CAAC;AAAA,EACZ;AAEA,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,MAAM,GAAG;AACzB,YAAM,SAAS,MAAM;AAErB,cAAQ;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,YAAY,GAAG;AACtC,YAAM,eAAe,MAAM;AAC3B,cAAQ;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM,YAAY,MAAM;AAExB,cAAQ;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,OAAO,GAAG;AACjC,YAAM,UAAU,MAAM;AACtB,cAAQ;AAAA,QACN,GAAG;AAAA,QACH;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,kBAAkB,GAAG;AAC5C,YAAM,iBACJ,MAAM;AACR,YAAM,WAAW,KAAK,cAAc;AAAA,IAEtC,WAAW,OAAO,OAAO,YAAY,GAAG;AACtC,YAAM,EAAE,UAAAA,WAAU,GAAG,QAAQ,IAAI,MAAM;AAEvC,YAAM,kBAAkB,yBAAyBA,SAAQ;AAEzD,cAAQ;AAAA,QACN,GAAG;AAAA,QACH,SAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,YAAM,QAAQ,KAAK,MAAM,KAAK;AAAA,IAChC,WAAW,OAAO,OAAO,SAAS,GAAG;AACnC,YAAM,YAAY,MAAM;AACxB,UAAI,iBAAiB,SAAS,GAAG;AAC/B,cAAM,WAAW,KAAK,SAAS;AAAA,MACjC;AAAA,IACF,WAAW,OAAO,OAAO,8BAA8B,GAAG;AACxD,YAAM,UAAU;AAAA,QACd,GAAG,MAAM;AAAA,QACT,GAAG,cAAc,MAAM,KAAK;AAAA,QAC5B,GAAG,6BAA6B,MAAM,KAAK;AAAA,MAC7C;AAAA,IACF,WAAW,OAAO,OAAO,kCAAkC,GAAG;AAC5D,YAAM,QAAQ,iBAAiB,EAAE,SAAS,MAAM;AAChD,YAAM,QAAQ,aAAa,UAAU;AAAA,IACvC;AAAA,EACF,CAAC;AAED,SAAO;AACT;",
   "names": ["children"]
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.css

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

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsAtom.css";
-var wrapper = "_145zb630-3-1-3";
+var wrapper = "_145zb630-3-2-0";
 export {
   wrapper
 };

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.css.ts"],
-  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-1-3';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-1-3 {
+._1yc349j0-3-2-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsCanvasLayout.css";
-var canvasContainer = "_1yc349j0-3-1-3";
+var canvasContainer = "_1yc349j0-3-2-0";
 export {
   canvasContainer
 };

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css.ts"],
-  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-1-3';"],
+  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css

@@ -1,4 +1,4 @@
-._107efci0-3-1-3 {
+._107efci0-3-2-0 {
   position: absolute;
   top: 0;
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsOverlays.css";
-var annotationsOverlay = "_107efci0-3-1-3";
+var annotationsOverlay = "_107efci0-3-2-0";
 export {
   annotationsOverlay
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css.ts"],
-  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-1-3';"],
+  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css

@@ -1,4 +1,4 @@
-._uzgvu30-3-1-3 {
+._uzgvu30-3-2-0 {
   position: relative;
   overflow-x: hidden;
   overflow-y: auto;

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsScrollWrapper.css";
-var scrollWrapper = "_uzgvu30-3-1-3";
+var scrollWrapper = "_uzgvu30-3-2-0";
 export {
   scrollWrapper
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsScrollWrapper.css.ts"],
-  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-1-3';"],
+  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/core/components/annotations/constants.js

@@ -34,8 +34,6 @@ const DEFAULT_TRUNCATION_MODE = "middle";
 const DEFAULT_INTEGRATION_TEXT_OVERFLOW = "expand";
 var TestIds = /* @__PURE__ */ ((TestIds2) => {
   TestIds2["Marker"] = "marker";
-  TestIds2["CircleMarker"] = "circle-marker";
-  TestIds2["PillMarker"] = "pill-marker";
   TestIds2["Track"] = "track";
   TestIds2["MarkerGroup"] = "marker-group";
   TestIds2["AnnotationIndicator"] = "annotation-indicator";

package/esm/charts/core/components/annotations/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/constants.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nexport const DEFAULT_LABELS_WIDTH = 60;\nexport const DEFAULT_LABELS_OFFSET = 20;\nexport const TRACK_HEIGHT = 24;\nexport const TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Default;\nexport const EMPHASIZED_TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Accent;\nexport const TRACK_SEPARATOR_STROKE_WIDTH = 1;\nexport const TRACK_PADDING_Y = 1;\n\nexport const LABEL_OFFSET = 12;\nexport const PILL_MARKER_HEIGHT = 20;\nexport const OUTLINE_STROKE_WIDTH = 2;\n\nexport const DEFAULT_MARKER_COLOR = Colors.Charts.Categorical.Color01.Default;\n\nexport const MARKER_RADIUS = 10;\nexport const MINIMUM_MARKER_WIDTH = 3;\nexport const MARKER_OPACITY = 0.85;\nexport const MARKER_STROKE_WIDTH = 1;\nexport const MARKER_STROKE_COLOR = Colors.Background.Base.Default;\nexport const OUTER_CIRCLE_RADIUS = MARKER_RADIUS + OUTLINE_STROKE_WIDTH;\n\nexport const SCROLLBAR_THRESHOLD = 15;\nexport const SCROLLBAR_WIDTH = 8;\nexport const DEFAULT_ICON_COLOR = Colors.Text.Neutral.OnAccent.Default;\n\nexport const MARKER_PROPS = {\n  opacity: MARKER_OPACITY,\n  stroke: MARKER_STROKE_COLOR,\n  strokeWidth: MARKER_STROKE_WIDTH,\n};\n\nexport const DEFAULT_TRACK_HIDDEN = false;\nexport const DEFAULT_MARKER_PRIORITY = 0;\nexport const DEFAULT_MARKER_HIDDEN = false;\nexport const DEFAULT_TOOLTIP_Y_OFFSET = 40;\nexport const DEFAULT_SHOW_LABELS = true;\nexport const DEFAULT_TEXT_OVERFLOW = 'truncate';\nexport const DEFAULT_TRUNCATION_MODE = 'middle';\nexport const DEFAULT_INTEGRATION_TEXT_OVERFLOW = 'expand';\n\nexport const enum TestIds {\n  Marker = 'marker',\n  CircleMarker = 'circle-marker',\n  PillMarker = 'pill-marker',\n  Track = 'track',\n  MarkerGroup = 'marker-group',\n  AnnotationIndicator = 'annotation-indicator',\n}\n\nexport const MARKER_ICON_OFFSET = 2;\nexport const MARKER_LABEL_PADDING = 6;\nexport const FOREIGN_OBJECT_THRESHOLD = 8;\nexport const MARKER_BORDER_RADIUS = 2;\nexport const MARKER_CONTENT_TO_BORDER_PADDING = 4;\nexport const MARGIN_TOP_STROKE = 1;\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAEZ,MAAM,uBAAuB;AAC7B,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AACrB,MAAM,wBAAwB,OAAO,OAAO,QAAQ;AACpD,MAAM,mCAAmC,OAAO,OAAO,QAAQ;AAC/D,MAAM,+BAA+B;AACrC,MAAM,kBAAkB;AAExB,MAAM,eAAe;AACrB,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAE7B,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAE/D,MAAM,gBAAgB;AACtB,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB,OAAO,WAAW,KAAK;AACnD,MAAM,sBAAsB,gBAAgB;AAE5C,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AACxB,MAAM,qBAAqB,OAAO,KAAK,QAAQ,SAAS;AAExD,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEO,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,0BAA0B;AAChC,MAAM,oCAAoC;AAE1C,IAAW,UAAX,kBAAWA,aAAX;AACL,EAAAA,SAAA,YAAS;AACT,EAAAA,SAAA,kBAAe;AACf,EAAAA,SAAA,gBAAa;AACb,EAAAA,SAAA,WAAQ;AACR,EAAAA,SAAA,iBAAc;AACd,EAAAA,SAAA,yBAAsB;AANN,SAAAA;AAAA,GAAA;AASX,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,mCAAmC;AACzC,MAAM,oBAAoB;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nexport const DEFAULT_LABELS_WIDTH = 60;\nexport const DEFAULT_LABELS_OFFSET = 20;\nexport const TRACK_HEIGHT = 24;\nexport const TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Default;\nexport const EMPHASIZED_TRACK_SEPARATOR_COLOR = Colors.Border.Neutral.Accent;\nexport const TRACK_SEPARATOR_STROKE_WIDTH = 1;\nexport const TRACK_PADDING_Y = 1;\n\nexport const LABEL_OFFSET = 12;\nexport const PILL_MARKER_HEIGHT = 20;\nexport const OUTLINE_STROKE_WIDTH = 2;\n\nexport const DEFAULT_MARKER_COLOR = Colors.Charts.Categorical.Color01.Default;\n\nexport const MARKER_RADIUS = 10;\nexport const MINIMUM_MARKER_WIDTH = 3;\nexport const MARKER_OPACITY = 0.85;\nexport const MARKER_STROKE_WIDTH = 1;\nexport const MARKER_STROKE_COLOR = Colors.Background.Base.Default;\nexport const OUTER_CIRCLE_RADIUS = MARKER_RADIUS + OUTLINE_STROKE_WIDTH;\n\nexport const SCROLLBAR_THRESHOLD = 15;\nexport const SCROLLBAR_WIDTH = 8;\nexport const DEFAULT_ICON_COLOR = Colors.Text.Neutral.OnAccent.Default;\n\nexport const MARKER_PROPS = {\n  opacity: MARKER_OPACITY,\n  stroke: MARKER_STROKE_COLOR,\n  strokeWidth: MARKER_STROKE_WIDTH,\n};\n\nexport const DEFAULT_TRACK_HIDDEN = false;\nexport const DEFAULT_MARKER_PRIORITY = 0;\nexport const DEFAULT_MARKER_HIDDEN = false;\nexport const DEFAULT_TOOLTIP_Y_OFFSET = 40;\nexport const DEFAULT_SHOW_LABELS = true;\nexport const DEFAULT_TEXT_OVERFLOW = 'truncate';\nexport const DEFAULT_TRUNCATION_MODE = 'middle';\nexport const DEFAULT_INTEGRATION_TEXT_OVERFLOW = 'expand';\n\nexport const enum TestIds {\n  Marker = 'marker',\n  Track = 'track',\n  MarkerGroup = 'marker-group',\n  AnnotationIndicator = 'annotation-indicator',\n}\n\nexport const MARKER_ICON_OFFSET = 2;\nexport const MARKER_LABEL_PADDING = 6;\nexport const FOREIGN_OBJECT_THRESHOLD = 8;\nexport const MARKER_BORDER_RADIUS = 2;\nexport const MARKER_CONTENT_TO_BORDER_PADDING = 4;\nexport const MARGIN_TOP_STROKE = 1;\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAEZ,MAAM,uBAAuB;AAC7B,MAAM,wBAAwB;AAC9B,MAAM,eAAe;AACrB,MAAM,wBAAwB,OAAO,OAAO,QAAQ;AACpD,MAAM,mCAAmC,OAAO,OAAO,QAAQ;AAC/D,MAAM,+BAA+B;AACrC,MAAM,kBAAkB;AAExB,MAAM,eAAe;AACrB,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAE7B,MAAM,uBAAuB,OAAO,OAAO,YAAY,QAAQ;AAE/D,MAAM,gBAAgB;AACtB,MAAM,uBAAuB;AAC7B,MAAM,iBAAiB;AACvB,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB,OAAO,WAAW,KAAK;AACnD,MAAM,sBAAsB,gBAAgB;AAE5C,MAAM,sBAAsB;AAC5B,MAAM,kBAAkB;AACxB,MAAM,qBAAqB,OAAO,KAAK,QAAQ,SAAS;AAExD,MAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf;AAEO,MAAM,uBAAuB;AAC7B,MAAM,0BAA0B;AAChC,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,sBAAsB;AAC5B,MAAM,wBAAwB;AAC9B,MAAM,0BAA0B;AAChC,MAAM,oCAAoC;AAE1C,IAAW,UAAX,kBAAWA,aAAX;AACL,EAAAA,SAAA,YAAS;AACT,EAAAA,SAAA,WAAQ;AACR,EAAAA,SAAA,iBAAc;AACd,EAAAA,SAAA,yBAAsB;AAJN,SAAAA;AAAA,GAAA;AAOX,MAAM,qBAAqB;AAC3B,MAAM,uBAAuB;AAC7B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAC7B,MAAM,mCAAmC;AACzC,MAAM,oBAAoB;",
   "names": ["TestIds"]
 }

package/esm/charts/core/components/axes/Axis.css

@@ -1,4 +1,4 @@
-._90oaxp0-3-1-3 {
+._90oaxp0-3-2-0 {
   display: block;
   overflow: visible;
 }

package/esm/charts/core/components/axes/Axis.js

@@ -41,14 +41,12 @@ const Axis = ({
     size === "small" ? charsFontWidth12pixelsSize400Map : charsFontWidth14pixelsSize400Map,
     "middle"
   ) : "";
-  const testId = restProps["data-testid"];
   return /* @__PURE__ */ jsx(
     "svg",
     {
       className: axis,
       width,
       height,
-      "data-testid": testId,
       role: restProps.role,
       "aria-label": restProps["aria-label"] ?? void 0,
       children: /* @__PURE__ */ jsx(

package/esm/charts/core/components/axes/Axis.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/axes/Axis.tsx"],
-  "sourcesContent": ["import { Axis as VisxAxis } from '@visx/axis';\n\nimport { axis } from './Axis.sty.js';\nimport {\n  AXIS_TICK_LENGTH,\n  axisFontBaseProps,\n  axisFontProps,\n  DEFAULT_AXIS_FONT_COLOR,\n} from './constants.js';\nimport { AxisProps } from './types.js';\nimport { TextProps, TickLabelProps } from '../../types/text-props.js';\nimport { TickPrimitiveValue } from '../../types/tick-value.js';\nimport {\n  charsFontWidth14pixelsSize400Map,\n  charsFontWidth12pixelsSize400Map,\n} from '../text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../text-ellipsis/truncate-string.js';\n\nconst labelProps: TextProps = { ...axisFontProps, textAnchor: 'middle' };\nconst labelBaseProps: TextProps = {\n  ...axisFontBaseProps,\n  textAnchor: 'middle',\n};\n\n/**\n * @internal\n */\nexport const Axis = ({\n  width = '100%',\n  height = '100%',\n  containerSize,\n  label,\n  size = 'small',\n  tickLabelProps = (...args) => ({}),\n  tickColor,\n  ...restProps\n}: AxisProps) => {\n  const fontProps = {\n    ...(size === 'small' ? axisFontProps : axisFontBaseProps),\n    fill: tickColor ?? DEFAULT_AXIS_FONT_COLOR,\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  const defaultTickLabelProps: TickLabelProps<TickPrimitiveValue> = (\n    ...args: [TickPrimitiveValue, number, any]\n  ) => ({\n    ...fontProps,\n    ...(typeof tickLabelProps === 'function'\n      ? tickLabelProps(...args)\n      : tickLabelProps),\n  });\n\n  const truncatedLabel = label\n    ? truncateString(\n        label,\n        containerSize,\n        size === 'small'\n          ? charsFontWidth12pixelsSize400Map\n          : charsFontWidth14pixelsSize400Map,\n        'middle',\n      )\n    : '';\n  const testId = (restProps as unknown as Record<string, string>)[\n    'data-testid'\n  ];\n\n  return (\n    <svg\n      className={axis}\n      width={width}\n      height={height}\n      data-testid={testId}\n      role={restProps.role}\n      aria-label={restProps['aria-label'] ?? undefined}\n    >\n      <VisxAxis\n        label={truncatedLabel}\n        labelProps={size === 'small' ? labelProps : labelBaseProps}\n        tickLabelProps={defaultTickLabelProps}\n        tickLength={AXIS_TICK_LENGTH}\n        hideTicks\n        hideAxisLine\n        {...restProps}\n      />\n    </svg>\n  );\n};\nAxis['displayName'] = 'Axis';\n"],
-  "mappings": "AA2EM;AA3EN,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,aAAwB,EAAE,GAAG,eAAe,YAAY,SAAS;AACvE,MAAM,iBAA4B;AAAA,EAChC,GAAG;AAAA,EACH,YAAY;AACd;AAKO,MAAM,OAAO,CAAC;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,iBAAiB,IAAI,UAAU,CAAC;AAAA,EAChC;AAAA,EACA,GAAG;AACL,MAAiB;AACf,QAAM,YAAY;AAAA,IAChB,GAAI,SAAS,UAAU,gBAAgB;AAAA,IACvC,MAAM,aAAa;AAAA,EACrB;AAGA,QAAM,wBAA4D,IAC7D,UACC;AAAA,IACJ,GAAG;AAAA,IACH,GAAI,OAAO,mBAAmB,aAC1B,eAAe,GAAG,IAAI,IACtB;AAAA,EACN;AAEA,QAAM,iBAAiB,QACnB;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS,UACL,mCACA;AAAA,IACJ;AAAA,EACF,IACA;AACJ,QAAM,SAAU,UACd,aACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACb,MAAM,UAAU;AAAA,MAChB,cAAY,UAAU,YAAY,KAAK;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,YAAY,SAAS,UAAU,aAAa;AAAA,UAC5C,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,WAAS;AAAA,UACT,cAAY;AAAA,UACX,GAAG;AAAA;AAAA,MACN;AAAA;AAAA,EACF;AAEJ;AACA,KAAK,aAAa,IAAI;",
+  "sourcesContent": ["import { Axis as VisxAxis } from '@visx/axis';\n\nimport { axis } from './Axis.sty.js';\nimport {\n  AXIS_TICK_LENGTH,\n  axisFontBaseProps,\n  axisFontProps,\n  DEFAULT_AXIS_FONT_COLOR,\n} from './constants.js';\nimport { AxisProps } from './types.js';\nimport { TextProps, TickLabelProps } from '../../types/text-props.js';\nimport { TickPrimitiveValue } from '../../types/tick-value.js';\nimport {\n  charsFontWidth14pixelsSize400Map,\n  charsFontWidth12pixelsSize400Map,\n} from '../text-ellipsis/chars-font-width-map.js';\nimport { truncateString } from '../text-ellipsis/truncate-string.js';\n\nconst labelProps: TextProps = { ...axisFontProps, textAnchor: 'middle' };\nconst labelBaseProps: TextProps = {\n  ...axisFontBaseProps,\n  textAnchor: 'middle',\n};\n\n/**\n * @internal\n */\nexport const Axis = ({\n  width = '100%',\n  height = '100%',\n  containerSize,\n  label,\n  size = 'small',\n  tickLabelProps = (...args) => ({}),\n  tickColor,\n  ...restProps\n}: AxisProps) => {\n  const fontProps = {\n    ...(size === 'small' ? axisFontProps : axisFontBaseProps),\n    fill: tickColor ?? DEFAULT_AXIS_FONT_COLOR,\n  };\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  const defaultTickLabelProps: TickLabelProps<TickPrimitiveValue> = (\n    ...args: [TickPrimitiveValue, number, any]\n  ) => ({\n    ...fontProps,\n    ...(typeof tickLabelProps === 'function'\n      ? tickLabelProps(...args)\n      : tickLabelProps),\n  });\n\n  const truncatedLabel = label\n    ? truncateString(\n        label,\n        containerSize,\n        size === 'small'\n          ? charsFontWidth12pixelsSize400Map\n          : charsFontWidth14pixelsSize400Map,\n        'middle',\n      )\n    : '';\n\n  return (\n    <svg\n      className={axis}\n      width={width}\n      height={height}\n      role={restProps.role}\n      aria-label={restProps['aria-label'] ?? undefined}\n    >\n      <VisxAxis\n        label={truncatedLabel}\n        labelProps={size === 'small' ? labelProps : labelBaseProps}\n        tickLabelProps={defaultTickLabelProps}\n        tickLength={AXIS_TICK_LENGTH}\n        hideTicks\n        hideAxisLine\n        {...restProps}\n      />\n    </svg>\n  );\n};\nAxis['displayName'] = 'Axis';\n"],
+  "mappings": "AAuEM;AAvEN,SAAS,QAAQ,gBAAgB;AAEjC,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAE/B,MAAM,aAAwB,EAAE,GAAG,eAAe,YAAY,SAAS;AACvE,MAAM,iBAA4B;AAAA,EAChC,GAAG;AAAA,EACH,YAAY;AACd;AAKO,MAAM,OAAO,CAAC;AAAA,EACnB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,iBAAiB,IAAI,UAAU,CAAC;AAAA,EAChC;AAAA,EACA,GAAG;AACL,MAAiB;AACf,QAAM,YAAY;AAAA,IAChB,GAAI,SAAS,UAAU,gBAAgB;AAAA,IACvC,MAAM,aAAa;AAAA,EACrB;AAGA,QAAM,wBAA4D,IAC7D,UACC;AAAA,IACJ,GAAG;AAAA,IACH,GAAI,OAAO,mBAAmB,aAC1B,eAAe,GAAG,IAAI,IACtB;AAAA,EACN;AAEA,QAAM,iBAAiB,QACnB;AAAA,IACE;AAAA,IACA;AAAA,IACA,SAAS,UACL,mCACA;AAAA,IACJ;AAAA,EACF,IACA;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA,MAAM,UAAU;AAAA,MAChB,cAAY,UAAU,YAAY,KAAK;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,YAAY,SAAS,UAAU,aAAa;AAAA,UAC5C,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,WAAS;AAAA,UACT,cAAY;AAAA,UACX,GAAG;AAAA;AAAA,MACN;AAAA;AAAA,EACF;AAEJ;AACA,KAAK,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/axes/Axis.sty.js

@@ -1,5 +1,5 @@
 import "./Axis.css";
-var axis = "_90oaxp0-3-1-3";
+var axis = "_90oaxp0-3-2-0";
 export {
   axis
 };

package/esm/charts/core/components/axes/Axis.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/axes/Axis.css.ts"],
-  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-1-3';"],
+  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

package/esm/charts/core/components/axes/components/CategoryBottomAxis.js

@@ -46,7 +46,8 @@ const CategoryBottomAxis = (props) => {
       children: /* @__PURE__ */ jsx(
         AxisBottom,
         {
-          "data-testid": "category-axis-bottom",
+          role: "graphics-symbol",
+          "aria-label": "category axis bottom",
           scale,
           containerSize: containerWidth,
           height: containerHeight,

package/esm/charts/core/components/axes/components/CategoryBottomAxis.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/axes/components/CategoryBottomAxis.tsx"],
-  "sourcesContent": ["import { TickRendererProps } from '@visx/axis';\nimport { getTicks } from '@visx/scale';\nimport type { ScaleBand } from 'd3-scale';\n\nimport { DivAxisWrapper } from './DivAxisWrapper.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { AxisBottom } from '../AxisBottom.js';\nimport { axisFontProps, EMOJI_REGEX } from '../constants.js';\nimport { TickLabelLayout, TickCategory } from '../types.js';\nimport { TickLabel } from './TickLabel.js';\nimport { getXTickMaxSize } from '../utils/calculate-axis-size.js';\nimport { getTickLabelPropsForCategoryAxis } from '../utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../utils/is-tick-label-visible.js';\nimport { getCategoryBottomAxisProps } from './utils/getCategoryBottomAxisProps.js';\n\n/**\n * @internal\n */\nexport interface CategoryBottomAxisProps {\n  scale: ScaleBand<string>;\n  containerWidth: number;\n  containerHeight: number;\n  categories: TickCategory;\n  label?: string;\n  tickLabelLayout?: TickLabelLayout;\n  truncationMode?: TruncationMode;\n  isVerticalLayout?: boolean;\n}\n\n/**\n * @internal\n */\nexport const CategoryBottomAxis = (props: CategoryBottomAxisProps) => {\n  const {\n    scale,\n    containerWidth,\n    categories,\n    containerHeight,\n    tickLabelLayout = 'horizontal',\n    label,\n    truncationMode = 'end',\n  } = props;\n\n  const ticks = getTicks(scale);\n  const tickNames = ticks.map((tickId) => categories[tickId]) ?? 'Unknown';\n  const isTickRotated = tickLabelLayout === 'vertical';\n  const isTickLabelVisible = isTickLabelSpaceAvailable(scale.step());\n\n  const maxSize = getXTickMaxSize(\n    containerHeight,\n    containerWidth,\n    isTickRotated,\n    scale,\n    label,\n  );\n\n  const tickLabelProps = getTickLabelPropsForCategoryAxis(\n    'bottom',\n    tickLabelLayout,\n  );\n\n  const tickNameHasEmoji = tickNames.some((name) => EMOJI_REGEX.test(name));\n\n  const tickFormat = (_: unknown, index: number) => tickNames[index];\n  return isTickLabelVisible ? (\n    <DivAxisWrapper\n      divAxisStyle={axisFontProps}\n      ticks={tickNames}\n      label={label}\n      isTickVertical\n      isTickRotated={isTickRotated}\n    >\n      <AxisBottom\n        data-testid=\"category-axis-bottom\"\n        scale={scale}\n        containerSize={containerWidth}\n        height={containerHeight}\n        tickComponent={({\n          x: renderX,\n          y: renderY,\n          ...rest\n        }: Omit<\n          TickRendererProps,\n          | 'aria-dropeffect'\n          | 'aria-grabbed'\n          | 'onKeyPress'\n          | 'onKeyPressCapture'\n        >) => {\n          const {\n            x,\n            y,\n            foreignObjectInlineStyle,\n            foreignObjectContentInlineStyle,\n          } = getCategoryBottomAxisProps(\n            renderX,\n            isTickRotated,\n            maxSize,\n            tickNameHasEmoji,\n          );\n\n          return (\n            <TickLabel\n              foreignObjectInlineStyle={foreignObjectInlineStyle}\n              foreignObjectContentInlineStyle={foreignObjectContentInlineStyle}\n              isTickRotated={isTickRotated}\n              truncationMode={truncationMode}\n              maxSize={maxSize}\n              x={x}\n              y={y}\n              {...rest}\n            />\n          );\n        }}\n        tickValues={ticks}\n        tickLabelProps={tickLabelProps}\n        tickFormat={tickFormat}\n        label={label}\n        width={containerWidth}\n      />\n    </DivAxisWrapper>\n  ) : null;\n};\n\nCategoryBottomAxis['displayName'] = 'CategoryBottomAxis';\n"],
-  "mappings": "AAqGY;AApGZ,SAAS,gBAAgB;AAGzB,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AAC3B,SAAS,eAAe,mBAAmB;AAE3C,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAmBpC,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,iBAAiB;AAAA,EACnB,IAAI;AAEJ,QAAM,QAAQ,SAAS,KAAK;AAC5B,QAAM,YAAY,MAAM,IAAI,CAAC,WAAW,WAAW,MAAM,CAAC,KAAK;AAC/D,QAAM,gBAAgB,oBAAoB;AAC1C,QAAM,qBAAqB,0BAA0B,MAAM,KAAK,CAAC;AAEjE,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAmB,UAAU,KAAK,CAAC,SAAS,YAAY,KAAK,IAAI,CAAC;AAExE,QAAM,aAAa,CAAC,GAAY,UAAkB,UAAU,KAAK;AACjE,SAAO,qBACL;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP;AAAA,MACA,gBAAc;AAAA,MACd;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ;AAAA,UACA,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,eAAe,CAAC;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAG;AAAA,UACL,MAMM;AACJ,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF,IAAI;AAAA,cACF;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAEA,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA,UAEJ;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF,IACE;AACN;AAEA,mBAAmB,aAAa,IAAI;",
+  "sourcesContent": ["import { TickRendererProps } from '@visx/axis';\nimport { getTicks } from '@visx/scale';\nimport type { ScaleBand } from 'd3-scale';\n\nimport { DivAxisWrapper } from './DivAxisWrapper.js';\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { AxisBottom } from '../AxisBottom.js';\nimport { axisFontProps, EMOJI_REGEX } from '../constants.js';\nimport { TickLabelLayout, TickCategory } from '../types.js';\nimport { TickLabel } from './TickLabel.js';\nimport { getXTickMaxSize } from '../utils/calculate-axis-size.js';\nimport { getTickLabelPropsForCategoryAxis } from '../utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../utils/is-tick-label-visible.js';\nimport { getCategoryBottomAxisProps } from './utils/getCategoryBottomAxisProps.js';\n\n/**\n * @internal\n */\nexport interface CategoryBottomAxisProps {\n  scale: ScaleBand<string>;\n  containerWidth: number;\n  containerHeight: number;\n  categories: TickCategory;\n  label?: string;\n  tickLabelLayout?: TickLabelLayout;\n  truncationMode?: TruncationMode;\n  isVerticalLayout?: boolean;\n}\n\n/**\n * @internal\n */\nexport const CategoryBottomAxis = (props: CategoryBottomAxisProps) => {\n  const {\n    scale,\n    containerWidth,\n    categories,\n    containerHeight,\n    tickLabelLayout = 'horizontal',\n    label,\n    truncationMode = 'end',\n  } = props;\n\n  const ticks = getTicks(scale);\n  const tickNames = ticks.map((tickId) => categories[tickId]) ?? 'Unknown';\n  const isTickRotated = tickLabelLayout === 'vertical';\n  const isTickLabelVisible = isTickLabelSpaceAvailable(scale.step());\n\n  const maxSize = getXTickMaxSize(\n    containerHeight,\n    containerWidth,\n    isTickRotated,\n    scale,\n    label,\n  );\n\n  const tickLabelProps = getTickLabelPropsForCategoryAxis(\n    'bottom',\n    tickLabelLayout,\n  );\n\n  const tickNameHasEmoji = tickNames.some((name) => EMOJI_REGEX.test(name));\n\n  const tickFormat = (_: unknown, index: number) => tickNames[index];\n  return isTickLabelVisible ? (\n    <DivAxisWrapper\n      divAxisStyle={axisFontProps}\n      ticks={tickNames}\n      label={label}\n      isTickVertical\n      isTickRotated={isTickRotated}\n    >\n      <AxisBottom\n        role=\"graphics-symbol\"\n        aria-label=\"category axis bottom\"\n        scale={scale}\n        containerSize={containerWidth}\n        height={containerHeight}\n        tickComponent={({\n          x: renderX,\n          y: renderY,\n          ...rest\n        }: Omit<\n          TickRendererProps,\n          | 'aria-dropeffect'\n          | 'aria-grabbed'\n          | 'onKeyPress'\n          | 'onKeyPressCapture'\n        >) => {\n          const {\n            x,\n            y,\n            foreignObjectInlineStyle,\n            foreignObjectContentInlineStyle,\n          } = getCategoryBottomAxisProps(\n            renderX,\n            isTickRotated,\n            maxSize,\n            tickNameHasEmoji,\n          );\n\n          return (\n            <TickLabel\n              foreignObjectInlineStyle={foreignObjectInlineStyle}\n              foreignObjectContentInlineStyle={foreignObjectContentInlineStyle}\n              isTickRotated={isTickRotated}\n              truncationMode={truncationMode}\n              maxSize={maxSize}\n              x={x}\n              y={y}\n              {...rest}\n            />\n          );\n        }}\n        tickValues={ticks}\n        tickLabelProps={tickLabelProps}\n        tickFormat={tickFormat}\n        label={label}\n        width={containerWidth}\n      />\n    </DivAxisWrapper>\n  ) : null;\n};\n\nCategoryBottomAxis['displayName'] = 'CategoryBottomAxis';\n"],
+  "mappings": "AAsGY;AArGZ,SAAS,gBAAgB;AAGzB,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AAC3B,SAAS,eAAe,mBAAmB;AAE3C,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,SAAS,iCAAiC;AAC1C,SAAS,kCAAkC;AAmBpC,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA,iBAAiB;AAAA,EACnB,IAAI;AAEJ,QAAM,QAAQ,SAAS,KAAK;AAC5B,QAAM,YAAY,MAAM,IAAI,CAAC,WAAW,WAAW,MAAM,CAAC,KAAK;AAC/D,QAAM,gBAAgB,oBAAoB;AAC1C,QAAM,qBAAqB,0BAA0B,MAAM,KAAK,CAAC;AAEjE,QAAM,UAAU;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,iBAAiB;AAAA,IACrB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,mBAAmB,UAAU,KAAK,CAAC,SAAS,YAAY,KAAK,IAAI,CAAC;AAExE,QAAM,aAAa,CAAC,GAAY,UAAkB,UAAU,KAAK;AACjE,SAAO,qBACL;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP;AAAA,MACA,gBAAc;AAAA,MACd;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX;AAAA,UACA,eAAe;AAAA,UACf,QAAQ;AAAA,UACR,eAAe,CAAC;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAG;AAAA,UACL,MAMM;AACJ,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF,IAAI;AAAA,cACF;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAEA,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA,UAEJ;AAAA,UACA,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF,IACE;AACN;AAEA,mBAAmB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/axes/components/CategoryLeftAxis.js

@@ -35,7 +35,8 @@ const CategoryLeftAxis = (props) => {
       children: /* @__PURE__ */ jsx(
         AxisLeft,
         {
-          "data-testid": "category-axis-left",
+          role: "graphics-symbol",
+          "aria-label": "category axis left",
           scale,
           containerSize: containerHeight,
           width: containerWidth,

package/esm/charts/core/components/axes/components/CategoryLeftAxis.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/axes/components/CategoryLeftAxis.tsx"],
-  "sourcesContent": ["import { TickRendererProps } from '@visx/axis';\nimport { getTicks } from '@visx/scale';\nimport type { ScaleBand } from 'd3-scale';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { DEFAULT_TRUNCATION_MODE } from '../../../constants.js';\nimport { AxisLeft } from '../AxisLeft.js';\nimport { axisFontProps, EMOJI_REGEX } from '../constants.js';\nimport { TickCategory } from '../types.js';\nimport { DivAxisWrapper } from './DivAxisWrapper.js';\nimport { TickLabel } from './TickLabel.js';\nimport { getYTickMaxSize } from '../utils/calculate-axis-size.js';\nimport { getTickLabelPropsForCategoryAxis } from '../utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../utils/is-tick-label-visible.js';\nimport { getCategoryLeftAxisProps } from './utils/getCategoryLeftAxisProps.js';\n\n/**\n * @internal\n */\nexport interface CategoryLeftAxisProps {\n  scale: ScaleBand<string>;\n  containerWidth: number;\n  containerHeight: number;\n  categories: TickCategory;\n  label?: string;\n  truncationMode?: TruncationMode;\n  isVerticalLayout?: boolean;\n}\n\nconst TICK_LABEL_PROPS = getTickLabelPropsForCategoryAxis('left');\n\n/**\n * @internal\n */\nexport const CategoryLeftAxis = (props: CategoryLeftAxisProps) => {\n  const {\n    scale,\n    containerWidth,\n    containerHeight,\n    label,\n    categories,\n    truncationMode = DEFAULT_TRUNCATION_MODE,\n    isVerticalLayout = true,\n  } = props;\n\n  const ticks = getTicks(scale);\n  const tickNames = ticks.map((tickId) => categories[tickId]) ?? 'Unknown';\n  const maxSize = getYTickMaxSize(containerWidth, label);\n\n  const tickFormat = (_: unknown, index: number) => tickNames[index];\n\n  const isTickLabelVisible = isTickLabelSpaceAvailable(scale.step());\n\n  const tickNameHasEmoji = tickNames.some((name) => EMOJI_REGEX.test(name));\n\n  return isTickLabelVisible ? (\n    <DivAxisWrapper\n      divAxisStyle={axisFontProps}\n      ticks={tickNames}\n      label={label}\n    >\n      <AxisLeft\n        data-testid=\"category-axis-left\"\n        scale={scale}\n        containerSize={containerHeight}\n        width={containerWidth}\n        tickComponent={({\n          x: renderX,\n          y: renderY,\n          ...rest\n        }: Omit<\n          TickRendererProps,\n          | 'aria-dropeffect'\n          | 'aria-grabbed'\n          | 'onKeyPress'\n          | 'onKeyPressCapture'\n        >) => {\n          const {\n            x,\n            y,\n            foreignObjectInlineStyle,\n            foreignObjectContentInlineStyle,\n          } = getCategoryLeftAxisProps(\n            renderX,\n            renderY,\n            isVerticalLayout,\n            maxSize,\n            tickNameHasEmoji,\n          );\n\n          return (\n            <TickLabel\n              foreignObjectInlineStyle={foreignObjectInlineStyle}\n              foreignObjectContentInlineStyle={foreignObjectContentInlineStyle}\n              truncationMode={truncationMode}\n              maxSize={maxSize}\n              x={x}\n              y={y}\n              {...rest}\n            />\n          );\n        }}\n        tickValues={ticks}\n        tickLabelProps={TICK_LABEL_PROPS}\n        tickFormat={tickFormat}\n        label={label}\n      />\n    </DivAxisWrapper>\n  ) : null;\n};\n\nCategoryLeftAxis['displayName'] = 'CategoryLeftAxis';\n"],
-  "mappings": "AA2FY;AA1FZ,SAAS,gBAAgB;AAIzB,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,eAAe,mBAAmB;AAE3C,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,SAAS,iCAAiC;AAC1C,SAAS,gCAAgC;AAezC,MAAM,mBAAmB,iCAAiC,MAAM;AAKzD,MAAM,mBAAmB,CAAC,UAAiC;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,EACrB,IAAI;AAEJ,QAAM,QAAQ,SAAS,KAAK;AAC5B,QAAM,YAAY,MAAM,IAAI,CAAC,WAAW,WAAW,MAAM,CAAC,KAAK;AAC/D,QAAM,UAAU,gBAAgB,gBAAgB,KAAK;AAErD,QAAM,aAAa,CAAC,GAAY,UAAkB,UAAU,KAAK;AAEjE,QAAM,qBAAqB,0BAA0B,MAAM,KAAK,CAAC;AAEjE,QAAM,mBAAmB,UAAU,KAAK,CAAC,SAAS,YAAY,KAAK,IAAI,CAAC;AAExE,SAAO,qBACL;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ;AAAA,UACA,eAAe;AAAA,UACf,OAAO;AAAA,UACP,eAAe,CAAC;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAG;AAAA,UACL,MAMM;AACJ,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF,IAAI;AAAA,cACF;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAEA,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA,UAEJ;AAAA,UACA,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,IACE;AACN;AAEA,iBAAiB,aAAa,IAAI;",
+  "sourcesContent": ["import { TickRendererProps } from '@visx/axis';\nimport { getTicks } from '@visx/scale';\nimport type { ScaleBand } from 'd3-scale';\n\nimport type { TruncationMode } from '../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { DEFAULT_TRUNCATION_MODE } from '../../../constants.js';\nimport { AxisLeft } from '../AxisLeft.js';\nimport { axisFontProps, EMOJI_REGEX } from '../constants.js';\nimport { TickCategory } from '../types.js';\nimport { DivAxisWrapper } from './DivAxisWrapper.js';\nimport { TickLabel } from './TickLabel.js';\nimport { getYTickMaxSize } from '../utils/calculate-axis-size.js';\nimport { getTickLabelPropsForCategoryAxis } from '../utils/get-tick-label-props.js';\nimport { isTickLabelSpaceAvailable } from '../utils/is-tick-label-visible.js';\nimport { getCategoryLeftAxisProps } from './utils/getCategoryLeftAxisProps.js';\n\n/**\n * @internal\n */\nexport interface CategoryLeftAxisProps {\n  scale: ScaleBand<string>;\n  containerWidth: number;\n  containerHeight: number;\n  categories: TickCategory;\n  label?: string;\n  truncationMode?: TruncationMode;\n  isVerticalLayout?: boolean;\n}\n\nconst TICK_LABEL_PROPS = getTickLabelPropsForCategoryAxis('left');\n\n/**\n * @internal\n */\nexport const CategoryLeftAxis = (props: CategoryLeftAxisProps) => {\n  const {\n    scale,\n    containerWidth,\n    containerHeight,\n    label,\n    categories,\n    truncationMode = DEFAULT_TRUNCATION_MODE,\n    isVerticalLayout = true,\n  } = props;\n\n  const ticks = getTicks(scale);\n  const tickNames = ticks.map((tickId) => categories[tickId]) ?? 'Unknown';\n  const maxSize = getYTickMaxSize(containerWidth, label);\n\n  const tickFormat = (_: unknown, index: number) => tickNames[index];\n\n  const isTickLabelVisible = isTickLabelSpaceAvailable(scale.step());\n\n  const tickNameHasEmoji = tickNames.some((name) => EMOJI_REGEX.test(name));\n\n  return isTickLabelVisible ? (\n    <DivAxisWrapper\n      divAxisStyle={axisFontProps}\n      ticks={tickNames}\n      label={label}\n    >\n      <AxisLeft\n        role=\"graphics-symbol\"\n        aria-label=\"category axis left\"\n        scale={scale}\n        containerSize={containerHeight}\n        width={containerWidth}\n        tickComponent={({\n          x: renderX,\n          y: renderY,\n          ...rest\n        }: Omit<\n          TickRendererProps,\n          | 'aria-dropeffect'\n          | 'aria-grabbed'\n          | 'onKeyPress'\n          | 'onKeyPressCapture'\n        >) => {\n          const {\n            x,\n            y,\n            foreignObjectInlineStyle,\n            foreignObjectContentInlineStyle,\n          } = getCategoryLeftAxisProps(\n            renderX,\n            renderY,\n            isVerticalLayout,\n            maxSize,\n            tickNameHasEmoji,\n          );\n\n          return (\n            <TickLabel\n              foreignObjectInlineStyle={foreignObjectInlineStyle}\n              foreignObjectContentInlineStyle={foreignObjectContentInlineStyle}\n              truncationMode={truncationMode}\n              maxSize={maxSize}\n              x={x}\n              y={y}\n              {...rest}\n            />\n          );\n        }}\n        tickValues={ticks}\n        tickLabelProps={TICK_LABEL_PROPS}\n        tickFormat={tickFormat}\n        label={label}\n      />\n    </DivAxisWrapper>\n  ) : null;\n};\n\nCategoryLeftAxis['displayName'] = 'CategoryLeftAxis';\n"],
+  "mappings": "AA4FY;AA3FZ,SAAS,gBAAgB;AAIzB,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,eAAe,mBAAmB;AAE3C,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,wCAAwC;AACjD,SAAS,iCAAiC;AAC1C,SAAS,gCAAgC;AAezC,MAAM,mBAAmB,iCAAiC,MAAM;AAKzD,MAAM,mBAAmB,CAAC,UAAiC;AAChE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,EACrB,IAAI;AAEJ,QAAM,QAAQ,SAAS,KAAK;AAC5B,QAAM,YAAY,MAAM,IAAI,CAAC,WAAW,WAAW,MAAM,CAAC,KAAK;AAC/D,QAAM,UAAU,gBAAgB,gBAAgB,KAAK;AAErD,QAAM,aAAa,CAAC,GAAY,UAAkB,UAAU,KAAK;AAEjE,QAAM,qBAAqB,0BAA0B,MAAM,KAAK,CAAC;AAEjE,QAAM,mBAAmB,UAAU,KAAK,CAAC,SAAS,YAAY,KAAK,IAAI,CAAC;AAExE,SAAO,qBACL;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX;AAAA,UACA,eAAe;AAAA,UACf,OAAO;AAAA,UACP,eAAe,CAAC;AAAA,YACd,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAG;AAAA,UACL,MAMM;AACJ,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF,IAAI;AAAA,cACF;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAEA,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA;AAAA,YACN;AAAA,UAEJ;AAAA,UACA,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,IACE;AACN;AAEA,iBAAiB,aAAa,IAAI;",
   "names": []
 }