@dynatrace/strato-components 3.1.1 → 3.2.0

package/esm/charts/core/components/copy-to-clipboard/copy-to-clipboard-messages.js

@@ -14,6 +14,11 @@ const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({
     id: "aYOFXw5HKPdKKWSu",
     defaultMessage: "Copied",
     description: "Text in a tooltip shown when clicking a tooltip series and copying its series name"
+  },
+  copyField: {
+    id: "XOE5zKTRmqYLBnRf",
+    defaultMessage: "Copy {field}",
+    description: "Label for the copy action in the tooltip, where field is the name of the field to be copied"
   }
 });
 export {

package/esm/charts/core/components/copy-to-clipboard/copy-to-clipboard-messages.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/copy-to-clipboard/copy-to-clipboard-messages.ts"],
-  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({\n  copyActionName: {\n    id: '6vA3zfYytiSPVBZV',\n    defaultMessage: 'Copy name',\n    description:\n      'Text in a tooltip shown when clicking a tooltip item and hovering the copy button next to its name',\n  },\n  tooltipActionCopy: {\n    id: 'FxsZTOljj8LWcZO0',\n    defaultMessage: 'Copy',\n    description: 'Text in a tooltip shown by default when hovering',\n  },\n  actionCopied: {\n    id: 'aYOFXw5HKPdKKWSu',\n    defaultMessage: 'Copied',\n    description:\n      'Text in a tooltip shown when clicking a tooltip series and copying its series name',\n  },\n});\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,6BAA6B,eAAe;AAAA,EACvD,gBAAgB;AAAA,IACd,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,mBAAmB;AAAA,IACjB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;",
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const COPY_TO_CLIPBOARD_MESSAGES = defineMessages({\n  copyActionName: {\n    id: '6vA3zfYytiSPVBZV',\n    defaultMessage: 'Copy name',\n    description:\n      'Text in a tooltip shown when clicking a tooltip item and hovering the copy button next to its name',\n  },\n  tooltipActionCopy: {\n    id: 'FxsZTOljj8LWcZO0',\n    defaultMessage: 'Copy',\n    description: 'Text in a tooltip shown by default when hovering',\n  },\n  actionCopied: {\n    id: 'aYOFXw5HKPdKKWSu',\n    defaultMessage: 'Copied',\n    description:\n      'Text in a tooltip shown when clicking a tooltip series and copying its series name',\n  },\n  copyField: {\n    id: 'XOE5zKTRmqYLBnRf',\n    defaultMessage: 'Copy {field}',\n    description:\n      'Label for the copy action in the tooltip, where field is the name of the field to be copied',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,6BAA6B,eAAe;AAAA,EACvD,gBAAgB;AAAA,IACd,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,mBAAmB;AAAA,IACjB,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,WAAW;AAAA,IACT,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;",
   "names": []
 }

package/esm/charts/core/components/crosshair/HorizontalCrosshair.js

@@ -28,7 +28,8 @@ const HorizontalCrosshair = (props) => {
     isInRange && /* @__PURE__ */ jsx(
       Line,
       {
-        "data-testid": "crosshair",
+        role: "graphics-symbol",
+        "aria-label": "crosshair",
         from,
         to,
         stroke: Colors.Border.Neutral.Accent,

package/esm/charts/core/components/crosshair/HorizontalCrosshair.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/crosshair/HorizontalCrosshair.tsx"],
-  "sourcesContent": ["import { Line } from '@visx/shape';\nimport { inRange } from 'lodash-es';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { LeftMagnifier } from './components/LeftMagnifier.js';\nimport { RightMagnifier } from './components/RightMagnifier.js';\nimport { usePoliteContainer } from '../../../../overlays/hooks/usePoliteContainer.js';\n\ninterface HorizontalCrosshairProps {\n  /** Coordinate y for crosshair */\n  y: number;\n  /** Left label for crosshair */\n  leftLabel?: string;\n  /** Right label for the crosshair */\n  rightLabel?: string;\n  /** Width for crosshair line */\n  width: number;\n  /** Height for crosshair line */\n  height?: number;\n  /** Top margin for crosshair line */\n  top?: number;\n  /** Left offset */\n  leftOffset?: number;\n  /** Right offset */\n  rightOffset?: number;\n  /** Indicates wether the line needs to be dashed */\n  dashed?: boolean;\n  /** Chart bounds to calculate magnifier position */\n  chartBounds?: DOMRect;\n}\n\nexport const HorizontalCrosshair = (props: HorizontalCrosshairProps) => {\n  const {\n    y,\n    leftLabel,\n    rightLabel,\n    width,\n    height = Infinity,\n    top = 0,\n    leftOffset = 0,\n    rightOffset = 0,\n    dashed = true,\n    chartBounds,\n  } = props;\n\n  const lineStrokeDasharray = dashed ? '3,2' : '0,0';\n\n  const Portal = usePoliteContainer();\n\n  const from = { x: -leftOffset, y: top + y };\n  const to = { x: width - leftOffset, y: top + y };\n  const strokeWidth = 1;\n  const isInRange = inRange(y, 0, height + 1);\n\n  return (\n    <>\n      {isInRange && (\n        <Line\n          data-testid=\"crosshair\"\n          from={from}\n          to={to}\n          stroke={Colors.Border.Neutral.Accent}\n          strokeWidth={strokeWidth}\n          strokeDasharray={lineStrokeDasharray}\n          pointerEvents=\"none\"\n        />\n      )}\n      {leftLabel && (\n        <Portal>\n          <LeftMagnifier\n            label={leftLabel}\n            mouseY={y}\n            offset={leftOffset}\n            chartBounds={chartBounds}\n          />\n        </Portal>\n      )}\n      {rightLabel && (\n        <Portal>\n          <RightMagnifier\n            label={rightLabel}\n            mouseY={y}\n            offset={rightOffset}\n            chartBounds={chartBounds}\n          />\n        </Portal>\n      )}\n    </>\n  );\n};\n\nHorizontalCrosshair['displayName'] = 'HorizontalCrosshair';\n"],
-  "mappings": "AAwDI,mBAEI,KAFJ;AAxDJ,SAAS,YAAY;AACrB,SAAS,eAAe;AAExB,OAAO,YAAY;AAEnB,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAyB5B,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,IACb,cAAc;AAAA,IACd,SAAS;AAAA,IACT;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAsB,SAAS,QAAQ;AAE7C,QAAM,SAAS,mBAAmB;AAElC,QAAM,OAAO,EAAE,GAAG,CAAC,YAAY,GAAG,MAAM,EAAE;AAC1C,QAAM,KAAK,EAAE,GAAG,QAAQ,YAAY,GAAG,MAAM,EAAE;AAC/C,QAAM,cAAc;AACpB,QAAM,YAAY,QAAQ,GAAG,GAAG,SAAS,CAAC;AAE1C,SACE,iCACG;AAAA,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA,QAAQ,OAAO,OAAO,QAAQ;AAAA,QAC9B;AAAA,QACA,iBAAiB;AAAA,QACjB,eAAc;AAAA;AAAA,IAChB;AAAA,IAED,aACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA;AAAA,IACF,GACF;AAAA,IAED,cACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA;AAAA,IACF,GACF;AAAA,KAEJ;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
+  "sourcesContent": ["import { Line } from '@visx/shape';\nimport { inRange } from 'lodash-es';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { LeftMagnifier } from './components/LeftMagnifier.js';\nimport { RightMagnifier } from './components/RightMagnifier.js';\nimport { usePoliteContainer } from '../../../../overlays/hooks/usePoliteContainer.js';\n\ninterface HorizontalCrosshairProps {\n  /** Coordinate y for crosshair */\n  y: number;\n  /** Left label for crosshair */\n  leftLabel?: string;\n  /** Right label for the crosshair */\n  rightLabel?: string;\n  /** Width for crosshair line */\n  width: number;\n  /** Height for crosshair line */\n  height?: number;\n  /** Top margin for crosshair line */\n  top?: number;\n  /** Left offset */\n  leftOffset?: number;\n  /** Right offset */\n  rightOffset?: number;\n  /** Indicates wether the line needs to be dashed */\n  dashed?: boolean;\n  /** Chart bounds to calculate magnifier position */\n  chartBounds?: DOMRect;\n}\n\nexport const HorizontalCrosshair = (props: HorizontalCrosshairProps) => {\n  const {\n    y,\n    leftLabel,\n    rightLabel,\n    width,\n    height = Infinity,\n    top = 0,\n    leftOffset = 0,\n    rightOffset = 0,\n    dashed = true,\n    chartBounds,\n  } = props;\n\n  const lineStrokeDasharray = dashed ? '3,2' : '0,0';\n\n  const Portal = usePoliteContainer();\n\n  const from = { x: -leftOffset, y: top + y };\n  const to = { x: width - leftOffset, y: top + y };\n  const strokeWidth = 1;\n  const isInRange = inRange(y, 0, height + 1);\n\n  return (\n    <>\n      {isInRange && (\n        <Line\n          role=\"graphics-symbol\"\n          aria-label=\"crosshair\"\n          from={from}\n          to={to}\n          stroke={Colors.Border.Neutral.Accent}\n          strokeWidth={strokeWidth}\n          strokeDasharray={lineStrokeDasharray}\n          pointerEvents=\"none\"\n        />\n      )}\n      {leftLabel && (\n        <Portal>\n          <LeftMagnifier\n            label={leftLabel}\n            mouseY={y}\n            offset={leftOffset}\n            chartBounds={chartBounds}\n          />\n        </Portal>\n      )}\n      {rightLabel && (\n        <Portal>\n          <RightMagnifier\n            label={rightLabel}\n            mouseY={y}\n            offset={rightOffset}\n            chartBounds={chartBounds}\n          />\n        </Portal>\n      )}\n    </>\n  );\n};\n\nHorizontalCrosshair['displayName'] = 'HorizontalCrosshair';\n"],
+  "mappings": "AAwDI,mBAEI,KAFJ;AAxDJ,SAAS,YAAY;AACrB,SAAS,eAAe;AAExB,OAAO,YAAY;AAEnB,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAyB5B,MAAM,sBAAsB,CAAC,UAAoC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,IACb,cAAc;AAAA,IACd,SAAS;AAAA,IACT;AAAA,EACF,IAAI;AAEJ,QAAM,sBAAsB,SAAS,QAAQ;AAE7C,QAAM,SAAS,mBAAmB;AAElC,QAAM,OAAO,EAAE,GAAG,CAAC,YAAY,GAAG,MAAM,EAAE;AAC1C,QAAM,KAAK,EAAE,GAAG,QAAQ,YAAY,GAAG,MAAM,EAAE;AAC/C,QAAM,cAAc;AACpB,QAAM,YAAY,QAAQ,GAAG,GAAG,SAAS,CAAC;AAE1C,SACE,iCACG;AAAA,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,QAAQ,OAAO,OAAO,QAAQ;AAAA,QAC9B;AAAA,QACA,iBAAiB;AAAA,QACjB,eAAc;AAAA;AAAA,IAChB;AAAA,IAED,aACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA;AAAA,IACF,GACF;AAAA,IAED,cACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR;AAAA;AAAA,IACF,GACF;AAAA,KAEJ;AAEJ;AAEA,oBAAoB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/core/components/crosshair/VerticalCrosshair.js

@@ -37,7 +37,8 @@ const VerticalCrosshair = forwardRef((props, ref) => {
     isInRange && /* @__PURE__ */ jsx(
       Line,
       {
-        "data-testid": "crosshair",
+        role: "graphics-symbol",
+        "aria-label": "crosshair",
         innerRef: ref,
         from,
         to,

package/esm/charts/core/components/crosshair/VerticalCrosshair.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/crosshair/VerticalCrosshair.tsx"],
-  "sourcesContent": ["import { Line } from '@visx/shape';\nimport { inRange } from 'lodash-es';\nimport { forwardRef, type KeyboardEventHandler } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { BottomMagnifier } from './components/BottomMagnifier.js';\nimport { TopMagnifier } from './components/TopMagnifier.js';\nimport type { MagnifierVariant } from './types.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { usePoliteContainer } from '../../../../overlays/hooks/usePoliteContainer.js';\n\ntype VerticalCrosshairProps = {\n  /** Coordinate x for crosshair */\n  x: number;\n  /** Height for crosshair line */\n  height: number;\n  /** Width for crosshair line */\n  width?: number;\n  /** Top margin for crosshair line */\n  top?: number;\n  /** Vertical offset */\n  offset?: number;\n  /** Indicates wether the line needs to be dashed */\n  dashed?: boolean;\n  /** Makes the element accessible through keyboard */\n  focusable?: boolean;\n  /** Chart bounds to calculate magnifier position */\n  chartBounds?: DOMRect;\n  /** bottom label rotation boolean */\n  isBottomLabelRotated?: boolean;\n  /** top label rotation boolean */\n  isTopLabelRotated?: boolean;\n  /** Bottom label for crosshair */\n  bottomLabel?: string;\n  /** Top label for the crosshair */\n  topLabel?: string;\n  /** Triggers on key down */\n  onKeyDown?: KeyboardEventHandler;\n  /** The magnifier variant */\n  variant?: MagnifierVariant;\n};\n\nexport const VerticalCrosshair = forwardRef<\n  SVGLineElement,\n  VerticalCrosshairProps & WithChildren\n>((props: VerticalCrosshairProps, ref) => {\n  const {\n    x,\n    height,\n    width = Infinity,\n    top = 0,\n    offset = 0,\n    dashed = true,\n    focusable,\n    chartBounds,\n    isBottomLabelRotated,\n    isTopLabelRotated,\n    topLabel,\n    bottomLabel,\n    onKeyDown,\n    variant = 'default',\n  } = props;\n  const Portal = usePoliteContainer();\n\n  const lineStrokeDasharray = dashed ? '3,2' : '0,0';\n  const from = { x, y: top };\n  const to = { x, y: top + height };\n  const strokeWidth = 1;\n  const isInRange = inRange(x, 0, width + 1);\n\n  let color = Colors.Background.Field.Neutral.Accent;\n\n  if (variant === 'select') {\n    color = Colors.Border.Primary.Accent;\n  }\n\n  return (\n    <>\n      {isInRange && (\n        <Line\n          data-testid=\"crosshair\"\n          innerRef={ref}\n          from={from}\n          to={to}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeDasharray={lineStrokeDasharray}\n          pointerEvents=\"none\"\n          tabIndex={focusable ? 0 : -1}\n          onKeyDown={onKeyDown}\n        />\n      )}\n      {bottomLabel && (\n        <Portal>\n          <BottomMagnifier\n            label={bottomLabel}\n            mouseX={x}\n            offset={offset}\n            color={color}\n            chartBounds={chartBounds}\n            isRotated={isBottomLabelRotated}\n          />\n        </Portal>\n      )}\n      {topLabel && (\n        <Portal>\n          <TopMagnifier\n            label={topLabel}\n            mouseX={x}\n            offset={offset}\n            color={color}\n            chartBounds={chartBounds}\n            isRotated={isTopLabelRotated}\n          />\n        </Portal>\n      )}\n    </>\n  );\n});\n\n(\n  VerticalCrosshair as typeof VerticalCrosshair & { displayName: string }\n).displayName = 'VerticalCrosshair';\n"],
-  "mappings": "AA8EI,mBAEI,KAFJ;AA9EJ,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,kBAA6C;AAEtD,OAAO,YAAY;AAEnB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,SAAS,0BAA0B;AAiC5B,MAAM,oBAAoB,WAG/B,CAAC,OAA+B,QAAQ;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,IAAI;AACJ,QAAM,SAAS,mBAAmB;AAElC,QAAM,sBAAsB,SAAS,QAAQ;AAC7C,QAAM,OAAO,EAAE,GAAG,GAAG,IAAI;AACzB,QAAM,KAAK,EAAE,GAAG,GAAG,MAAM,OAAO;AAChC,QAAM,cAAc;AACpB,QAAM,YAAY,QAAQ,GAAG,GAAG,QAAQ,CAAC;AAEzC,MAAI,QAAQ,OAAO,WAAW,MAAM,QAAQ;AAE5C,MAAI,YAAY,UAAU;AACxB,YAAQ,OAAO,OAAO,QAAQ;AAAA,EAChC;AAEA,SACE,iCACG;AAAA,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAY;AAAA,QACZ,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA,iBAAiB;AAAA,QACjB,eAAc;AAAA,QACd,UAAU,YAAY,IAAI;AAAA,QAC1B;AAAA;AAAA,IACF;AAAA,IAED,eACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IAED,YACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KAEJ;AAEJ,CAAC;AAGC,kBACA,cAAc;",
+  "sourcesContent": ["import { Line } from '@visx/shape';\nimport { inRange } from 'lodash-es';\nimport { forwardRef, type KeyboardEventHandler } from 'react';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { BottomMagnifier } from './components/BottomMagnifier.js';\nimport { TopMagnifier } from './components/TopMagnifier.js';\nimport type { MagnifierVariant } from './types.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { usePoliteContainer } from '../../../../overlays/hooks/usePoliteContainer.js';\n\ntype VerticalCrosshairProps = {\n  /** Coordinate x for crosshair */\n  x: number;\n  /** Height for crosshair line */\n  height: number;\n  /** Width for crosshair line */\n  width?: number;\n  /** Top margin for crosshair line */\n  top?: number;\n  /** Vertical offset */\n  offset?: number;\n  /** Indicates wether the line needs to be dashed */\n  dashed?: boolean;\n  /** Makes the element accessible through keyboard */\n  focusable?: boolean;\n  /** Chart bounds to calculate magnifier position */\n  chartBounds?: DOMRect;\n  /** bottom label rotation boolean */\n  isBottomLabelRotated?: boolean;\n  /** top label rotation boolean */\n  isTopLabelRotated?: boolean;\n  /** Bottom label for crosshair */\n  bottomLabel?: string;\n  /** Top label for the crosshair */\n  topLabel?: string;\n  /** Triggers on key down */\n  onKeyDown?: KeyboardEventHandler;\n  /** The magnifier variant */\n  variant?: MagnifierVariant;\n};\n\nexport const VerticalCrosshair = forwardRef<\n  SVGLineElement,\n  VerticalCrosshairProps & WithChildren\n>((props: VerticalCrosshairProps, ref) => {\n  const {\n    x,\n    height,\n    width = Infinity,\n    top = 0,\n    offset = 0,\n    dashed = true,\n    focusable,\n    chartBounds,\n    isBottomLabelRotated,\n    isTopLabelRotated,\n    topLabel,\n    bottomLabel,\n    onKeyDown,\n    variant = 'default',\n  } = props;\n  const Portal = usePoliteContainer();\n\n  const lineStrokeDasharray = dashed ? '3,2' : '0,0';\n  const from = { x, y: top };\n  const to = { x, y: top + height };\n  const strokeWidth = 1;\n  const isInRange = inRange(x, 0, width + 1);\n\n  let color = Colors.Background.Field.Neutral.Accent;\n\n  if (variant === 'select') {\n    color = Colors.Border.Primary.Accent;\n  }\n\n  return (\n    <>\n      {isInRange && (\n        <Line\n          role=\"graphics-symbol\"\n          aria-label=\"crosshair\"\n          innerRef={ref}\n          from={from}\n          to={to}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeDasharray={lineStrokeDasharray}\n          pointerEvents=\"none\"\n          tabIndex={focusable ? 0 : -1}\n          onKeyDown={onKeyDown}\n        />\n      )}\n      {bottomLabel && (\n        <Portal>\n          <BottomMagnifier\n            label={bottomLabel}\n            mouseX={x}\n            offset={offset}\n            color={color}\n            chartBounds={chartBounds}\n            isRotated={isBottomLabelRotated}\n          />\n        </Portal>\n      )}\n      {topLabel && (\n        <Portal>\n          <TopMagnifier\n            label={topLabel}\n            mouseX={x}\n            offset={offset}\n            color={color}\n            chartBounds={chartBounds}\n            isRotated={isTopLabelRotated}\n          />\n        </Portal>\n      )}\n    </>\n  );\n});\n\n(\n  VerticalCrosshair as typeof VerticalCrosshair & { displayName: string }\n).displayName = 'VerticalCrosshair';\n"],
+  "mappings": "AA8EI,mBAEI,KAFJ;AA9EJ,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,kBAA6C;AAEtD,OAAO,YAAY;AAEnB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAG7B,SAAS,0BAA0B;AAiC5B,MAAM,oBAAoB,WAG/B,CAAC,OAA+B,QAAQ;AACxC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,IAAI;AACJ,QAAM,SAAS,mBAAmB;AAElC,QAAM,sBAAsB,SAAS,QAAQ;AAC7C,QAAM,OAAO,EAAE,GAAG,GAAG,IAAI;AACzB,QAAM,KAAK,EAAE,GAAG,GAAG,MAAM,OAAO;AAChC,QAAM,cAAc;AACpB,QAAM,YAAY,QAAQ,GAAG,GAAG,QAAQ,CAAC;AAEzC,MAAI,QAAQ,OAAO,WAAW,MAAM,QAAQ;AAE5C,MAAI,YAAY,UAAU;AACxB,YAAQ,OAAO,OAAO,QAAQ;AAAA,EAChC;AAEA,SACE,iCACG;AAAA,iBACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA,iBAAiB;AAAA,QACjB,eAAc;AAAA,QACd,UAAU,YAAY,IAAI;AAAA,QAC1B;AAAA;AAAA,IACF;AAAA,IAED,eACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA;AAAA,IACb,GACF;AAAA,IAED,YACC,oBAAC,UACC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA;AAAA,IACb,GACF;AAAA,KAEJ;AAEJ,CAAC;AAGC,kBACA,cAAc;",
   "names": []
 }

package/esm/charts/core/components/crosshair/components/BottomMagnifier.js

@@ -20,7 +20,7 @@ function BottomMagnifier(props) {
   return /* @__PURE__ */ jsx(
     Magnifier,
     {
-      "data-testid": "bottom-axis-magnifier",
+      "aria-label": "bottom axis magnifier",
       ref: magnifierRef,
       className: clsx(magnifier, isRotated ? rotatedBottomStyle : bottomStyle),
       style: { top, left, backgroundColor: color },

package/esm/charts/core/components/crosshair/components/BottomMagnifier.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/BottomMagnifier.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport {\n  bottom as bottomStyle,\n  magnifier,\n  rotatedBottomStyle,\n} from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function BottomMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseX: number;\n    offset: number;\n    color: string;\n    chartBounds?: DOMRect;\n    isRotated?: boolean;\n  }>,\n) {\n  const { label, mouseX, offset, color, chartBounds, isRotated } = props;\n\n  const { magnifierPosition: left, magnifierRef } = useMagnifierPosition(\n    mouseX,\n    chartBounds?.left ?? 0,\n    chartBounds?.right ?? 0,\n    'horizontal',\n    isRotated,\n  );\n  const top = (chartBounds?.bottom ?? 0) + offset;\n\n  return (\n    <Magnifier\n      data-testid=\"bottom-axis-magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, isRotated ? rotatedBottomStyle : bottomStyle)}\n      style={{ top, left, backgroundColor: color }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
-  "mappings": "AAgCI;AAhCJ,OAAO,UAAU;AAEjB;AAAA,EACE,UAAU;AAAA,EACV;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AAE9B,SAAS,gBACd,OAQA;AACA,QAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO,aAAa,UAAU,IAAI;AAEjE,QAAM,EAAE,mBAAmB,MAAM,aAAa,IAAI;AAAA,IAChD;AAAA,IACA,aAAa,QAAQ;AAAA,IACrB,aAAa,SAAS;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACA,QAAM,OAAO,aAAa,UAAU,KAAK;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,YAAY,qBAAqB,WAAW;AAAA,MACvE,OAAO,EAAE,KAAK,MAAM,iBAAiB,MAAM;AAAA,MAE1C;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport {\n  bottom as bottomStyle,\n  magnifier,\n  rotatedBottomStyle,\n} from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function BottomMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseX: number;\n    offset: number;\n    color: string;\n    chartBounds?: DOMRect;\n    isRotated?: boolean;\n  }>,\n) {\n  const { label, mouseX, offset, color, chartBounds, isRotated } = props;\n\n  const { magnifierPosition: left, magnifierRef } = useMagnifierPosition(\n    mouseX,\n    chartBounds?.left ?? 0,\n    chartBounds?.right ?? 0,\n    'horizontal',\n    isRotated,\n  );\n  const top = (chartBounds?.bottom ?? 0) + offset;\n\n  return (\n    <Magnifier\n      aria-label=\"bottom axis magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, isRotated ? rotatedBottomStyle : bottomStyle)}\n      style={{ top, left, backgroundColor: color }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
+  "mappings": "AAgCI;AAhCJ,OAAO,UAAU;AAEjB;AAAA,EACE,UAAU;AAAA,EACV;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AAE9B,SAAS,gBACd,OAQA;AACA,QAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO,aAAa,UAAU,IAAI;AAEjE,QAAM,EAAE,mBAAmB,MAAM,aAAa,IAAI;AAAA,IAChD;AAAA,IACA,aAAa,QAAQ;AAAA,IACrB,aAAa,SAAS;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACA,QAAM,OAAO,aAAa,UAAU,KAAK;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,YAAY,qBAAqB,WAAW;AAAA,MACvE,OAAO,EAAE,KAAK,MAAM,iBAAiB,MAAM;AAAA,MAE1C;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/crosshair/components/LeftMagnifier.js

@@ -20,7 +20,7 @@ function LeftMagnifier(props) {
   return /* @__PURE__ */ jsx(
     Magnifier,
     {
-      "data-testid": "left-y-axis-magnifier",
+      "aria-label": "left y-axis magnifier",
       ref: magnifierRef,
       className: clsx(magnifier, leftStyle),
       style: { top, left, width: `${textWidth}px` },

package/esm/charts/core/components/crosshair/components/LeftMagnifier.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/LeftMagnifier.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport { left as leftStyle, magnifier } from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function LeftMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseY: number;\n    offset: number;\n    chartBounds?: DOMRect;\n  }>,\n) {\n  const { label, mouseY, offset, chartBounds } = props;\n\n  const { magnifierPosition: top, magnifierRef } = useMagnifierPosition(\n    mouseY,\n    chartBounds?.top ?? 0,\n    chartBounds?.bottom ?? 0,\n    'vertical',\n  );\n\n  const textWidth = Math.ceil(\n    calculateWidth(label, charsFontWidth12pixelsSize400Map),\n  );\n\n  const left =\n    (chartBounds?.left ?? 0) -\n    (magnifierRef.current?.clientWidth ?? 0) -\n    offset;\n\n  return (\n    <Magnifier\n      data-testid=\"left-y-axis-magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, leftStyle)}\n      style={{ top, left, width: `${textWidth}px` }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
-  "mappings": "AAmCI;AAnCJ,OAAO,UAAU;AAEjB,SAAS,QAAQ,WAAW,iBAAiB;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAE9B,SAAS,cACd,OAMA;AACA,QAAM,EAAE,OAAO,QAAQ,QAAQ,YAAY,IAAI;AAE/C,QAAM,EAAE,mBAAmB,KAAK,aAAa,IAAI;AAAA,IAC/C;AAAA,IACA,aAAa,OAAO;AAAA,IACpB,aAAa,UAAU;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,YAAY,KAAK;AAAA,IACrB,eAAe,OAAO,gCAAgC;AAAA,EACxD;AAEA,QAAM,QACH,aAAa,QAAQ,MACrB,aAAa,SAAS,eAAe,KACtC;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,SAAS;AAAA,MACpC,OAAO,EAAE,KAAK,MAAM,OAAO,GAAG,SAAS,KAAK;AAAA,MAE3C;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport { left as leftStyle, magnifier } from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function LeftMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseY: number;\n    offset: number;\n    chartBounds?: DOMRect;\n  }>,\n) {\n  const { label, mouseY, offset, chartBounds } = props;\n\n  const { magnifierPosition: top, magnifierRef } = useMagnifierPosition(\n    mouseY,\n    chartBounds?.top ?? 0,\n    chartBounds?.bottom ?? 0,\n    'vertical',\n  );\n\n  const textWidth = Math.ceil(\n    calculateWidth(label, charsFontWidth12pixelsSize400Map),\n  );\n\n  const left =\n    (chartBounds?.left ?? 0) -\n    (magnifierRef.current?.clientWidth ?? 0) -\n    offset;\n\n  return (\n    <Magnifier\n      aria-label=\"left y-axis magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, leftStyle)}\n      style={{ top, left, width: `${textWidth}px` }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
+  "mappings": "AAmCI;AAnCJ,OAAO,UAAU;AAEjB,SAAS,QAAQ,WAAW,iBAAiB;AAC7C,SAAS,iBAAiB;AAC1B,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAE9B,SAAS,cACd,OAMA;AACA,QAAM,EAAE,OAAO,QAAQ,QAAQ,YAAY,IAAI;AAE/C,QAAM,EAAE,mBAAmB,KAAK,aAAa,IAAI;AAAA,IAC/C;AAAA,IACA,aAAa,OAAO;AAAA,IACpB,aAAa,UAAU;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,YAAY,KAAK;AAAA,IACrB,eAAe,OAAO,gCAAgC;AAAA,EACxD;AAEA,QAAM,QACH,aAAa,QAAQ,MACrB,aAAa,SAAS,eAAe,KACtC;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,SAAS;AAAA,MACpC,OAAO,EAAE,KAAK,MAAM,OAAO,GAAG,SAAS,KAAK;AAAA,MAE3C;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/crosshair/components/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-1-1 {
+._nm3s3e0-3-2-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-default-weight, 400);
@@ -13,24 +13,24 @@
   z-index: var(--dt-elevations-sticky, 10);
   padding: var(--dt-spacings-size-2, 2px) var(--dt-spacings-size-4, 4px);
 }
-._nm3s3e1-3-1-1 {
+._nm3s3e1-3-2-0 {
   margin-left: -2px;
 }
-._nm3s3e2-3-1-1 {
+._nm3s3e2-3-2-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-1-1 {
+._nm3s3e3-3-2-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-1-1 {
+._nm3s3e4-3-2-0 {
   margin-top: -2px;
 }
-._nm3s3e5-3-1-1 {
+._nm3s3e5-3-2-0 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-1-1 {
+._nm3s3e6-3-2-0 {
   transform: rotate(90deg) scaleX(-1) scaleY(-1) translateX(-100%) translateY(-100%);
   transform-origin: left top;
   margin-top: var(--dt-spacings-size-2, 2px);

package/esm/charts/core/components/crosshair/components/Magnifier.sty.js

@@ -1,12 +1,12 @@
 import "./Magnifier.css";
-var bottom = "_nm3s3e3-3-1-1";
-var left = "_nm3s3e1-3-1-1";
-var magnifier = "_nm3s3e0-3-1-1";
+var bottom = "_nm3s3e3-3-2-0";
+var left = "_nm3s3e1-3-2-0";
+var magnifier = "_nm3s3e0-3-2-0";
 var magnifierFontStyles = { fontFamily: "var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)", fontSize: "var(--dt-typography-text-small-default-size, 12px)", fontWeight: "var(--dt-typography-text-small-default-weight, 400)", lineHeight: "var(--dt-typography-text-small-default-line-height, 1.333333333)" };
-var right = "_nm3s3e2-3-1-1";
-var rotatedBottomStyle = "_nm3s3e6-3-1-1";
-var rotatedTopStyle = "_nm3s3e5-3-1-1";
-var top = "_nm3s3e4-3-1-1";
+var right = "_nm3s3e2-3-2-0";
+var rotatedBottomStyle = "_nm3s3e6-3-2-0";
+var rotatedTopStyle = "_nm3s3e5-3-2-0";
+var top = "_nm3s3e4-3-2-0";
 export {
   bottom,
   left,

package/esm/charts/core/components/crosshair/components/Magnifier.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/Magnifier.css.ts"],
-  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-1-1';\nexport var left = '_nm3s3e1-3-1-1';\nexport var magnifier = '_nm3s3e0-3-1-1';\nexport var magnifierFontStyles = {fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',fontSize:'var(--dt-typography-text-small-default-size, 12px)',fontWeight:'var(--dt-typography-text-small-default-weight, 400)',lineHeight:'var(--dt-typography-text-small-default-line-height, 1.333333333)'};\nexport var right = '_nm3s3e2-3-1-1';\nexport var rotatedBottomStyle = '_nm3s3e6-3-1-1';\nexport var rotatedTopStyle = '_nm3s3e5-3-1-1';\nexport var top = '_nm3s3e4-3-1-1';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-2-0';\nexport var left = '_nm3s3e1-3-2-0';\nexport var magnifier = '_nm3s3e0-3-2-0';\nexport var magnifierFontStyles = {fontFamily:'var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif)',fontSize:'var(--dt-typography-text-small-default-size, 12px)',fontWeight:'var(--dt-typography-text-small-default-weight, 400)',lineHeight:'var(--dt-typography-text-small-default-line-height, 1.333333333)'};\nexport var right = '_nm3s3e2-3-2-0';\nexport var rotatedBottomStyle = '_nm3s3e6-3-2-0';\nexport var rotatedTopStyle = '_nm3s3e5-3-2-0';\nexport var top = '_nm3s3e4-3-2-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,sBAAsB,EAAC,YAAW,6FAA4F,UAAS,sDAAqD,YAAW,uDAAsD,YAAW,mEAAkE;AAC9U,IAAI,QAAQ;AACZ,IAAI,qBAAqB;AACzB,IAAI,kBAAkB;AACtB,IAAI,MAAM;",
   "names": []
 }

package/esm/charts/core/components/crosshair/components/RightMagnifier.js

@@ -20,7 +20,7 @@ function RightMagnifier(props) {
   return /* @__PURE__ */ jsx(
     Magnifier,
     {
-      "data-testid": "right-y-axis-magnifier",
+      "aria-label": "right y-axis magnifier",
       ref: magnifierRef,
       className: clsx(magnifier, right),
       style: { top, left, width: `${textWidth}px` },

package/esm/charts/core/components/crosshair/components/RightMagnifier.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/RightMagnifier.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport { magnifier, right } from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function RightMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseY: number;\n    offset: number;\n    chartBounds?: DOMRect;\n  }>,\n) {\n  const { label, mouseY, offset, chartBounds } = props;\n\n  const { magnifierPosition: top, magnifierRef } = useMagnifierPosition(\n    mouseY,\n    chartBounds?.top ?? 0,\n    chartBounds?.bottom ?? 0,\n    'vertical',\n  );\n\n  const textWidth = Math.ceil(\n    calculateWidth(label, charsFontWidth12pixelsSize400Map),\n  );\n\n  const left = (chartBounds?.right ?? 0) + offset;\n\n  return (\n    <Magnifier\n      data-testid=\"right-y-axis-magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, right)}\n      style={{ top, left, width: `${textWidth}px` }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
-  "mappings": "AAgCI;AAhCJ,OAAO,UAAU;AAEjB,SAAS,WAAW,aAAa;AACjC,SAAS,iBAAiB;AAC1B,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAE9B,SAAS,eACd,OAMA;AACA,QAAM,EAAE,OAAO,QAAQ,QAAQ,YAAY,IAAI;AAE/C,QAAM,EAAE,mBAAmB,KAAK,aAAa,IAAI;AAAA,IAC/C;AAAA,IACA,aAAa,OAAO;AAAA,IACpB,aAAa,UAAU;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,YAAY,KAAK;AAAA,IACrB,eAAe,OAAO,gCAAgC;AAAA,EACxD;AAEA,QAAM,QAAQ,aAAa,SAAS,KAAK;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,KAAK;AAAA,MAChC,OAAO,EAAE,KAAK,MAAM,OAAO,GAAG,SAAS,KAAK;AAAA,MAE3C;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport { magnifier, right } from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { charsFontWidth12pixelsSize400Map } from '../../text-ellipsis/chars-font-width-map.js';\nimport { calculateWidth } from '../../text-ellipsis/truncate-string.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function RightMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseY: number;\n    offset: number;\n    chartBounds?: DOMRect;\n  }>,\n) {\n  const { label, mouseY, offset, chartBounds } = props;\n\n  const { magnifierPosition: top, magnifierRef } = useMagnifierPosition(\n    mouseY,\n    chartBounds?.top ?? 0,\n    chartBounds?.bottom ?? 0,\n    'vertical',\n  );\n\n  const textWidth = Math.ceil(\n    calculateWidth(label, charsFontWidth12pixelsSize400Map),\n  );\n\n  const left = (chartBounds?.right ?? 0) + offset;\n\n  return (\n    <Magnifier\n      aria-label=\"right y-axis magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, right)}\n      style={{ top, left, width: `${textWidth}px` }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
+  "mappings": "AAgCI;AAhCJ,OAAO,UAAU;AAEjB,SAAS,WAAW,aAAa;AACjC,SAAS,iBAAiB;AAC1B,SAAS,wCAAwC;AACjD,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAE9B,SAAS,eACd,OAMA;AACA,QAAM,EAAE,OAAO,QAAQ,QAAQ,YAAY,IAAI;AAE/C,QAAM,EAAE,mBAAmB,KAAK,aAAa,IAAI;AAAA,IAC/C;AAAA,IACA,aAAa,OAAO;AAAA,IACpB,aAAa,UAAU;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,YAAY,KAAK;AAAA,IACrB,eAAe,OAAO,gCAAgC;AAAA,EACxD;AAEA,QAAM,QAAQ,aAAa,SAAS,KAAK;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,KAAK;AAAA,MAChC,OAAO,EAAE,KAAK,MAAM,OAAO,GAAG,SAAS,KAAK;AAAA,MAE3C;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/crosshair/components/TopMagnifier.js

@@ -20,7 +20,7 @@ function TopMagnifier(props) {
   return /* @__PURE__ */ jsx(
     Magnifier,
     {
-      "data-testid": "top-axis-magnifier",
+      "aria-label": "top axis magnifier",
       ref: magnifierRef,
       className: clsx(magnifier, isRotated ? rotatedTopStyle : topStyle),
       style: { top, left, backgroundColor: color },

package/esm/charts/core/components/crosshair/components/TopMagnifier.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/crosshair/components/TopMagnifier.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\n\nimport {\n  top as topStyle,\n  magnifier,\n  rotatedTopStyle,\n} from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function TopMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseX: number;\n    offset: number;\n    color: string;\n    chartBounds?: DOMRect;\n    isRotated?: boolean;\n  }>,\n) {\n  const { label, mouseX, color, chartBounds, isRotated } = props;\n\n  const { magnifierPosition: left, magnifierRef } = useMagnifierPosition(\n    mouseX,\n    chartBounds?.left ?? 0,\n    chartBounds?.right ?? 0,\n    'horizontal',\n    isRotated,\n  );\n  const top =\n    (chartBounds?.top || 0) - (magnifierRef.current?.clientHeight || 0);\n\n  return (\n    <Magnifier\n      data-testid=\"top-axis-magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, isRotated ? rotatedTopStyle : topStyle)}\n      style={{ top, left, backgroundColor: color }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
-  "mappings": "AAiCI;AAjCJ,OAAO,UAAU;AAEjB;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AAE9B,SAAS,aACd,OAQA;AACA,QAAM,EAAE,OAAO,QAAQ,OAAO,aAAa,UAAU,IAAI;AAEzD,QAAM,EAAE,mBAAmB,MAAM,aAAa,IAAI;AAAA,IAChD;AAAA,IACA,aAAa,QAAQ;AAAA,IACrB,aAAa,SAAS;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACA,QAAM,OACH,aAAa,OAAO,MAAM,aAAa,SAAS,gBAAgB;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,YAAY,kBAAkB,QAAQ;AAAA,MACjE,OAAO,EAAE,KAAK,MAAM,iBAAiB,MAAM;AAAA,MAE1C;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\n\nimport {\n  top as topStyle,\n  magnifier,\n  rotatedTopStyle,\n} from './Magnifier.sty.js';\nimport { Magnifier } from './Magnifier.js';\nimport { useMagnifierPosition } from '../hooks/useMagnifierPosition.js';\n\nexport function TopMagnifier(\n  props: Readonly<{\n    label: string;\n    mouseX: number;\n    offset: number;\n    color: string;\n    chartBounds?: DOMRect;\n    isRotated?: boolean;\n  }>,\n) {\n  const { label, mouseX, color, chartBounds, isRotated } = props;\n\n  const { magnifierPosition: left, magnifierRef } = useMagnifierPosition(\n    mouseX,\n    chartBounds?.left ?? 0,\n    chartBounds?.right ?? 0,\n    'horizontal',\n    isRotated,\n  );\n  const top =\n    (chartBounds?.top || 0) - (magnifierRef.current?.clientHeight || 0);\n\n  return (\n    <Magnifier\n      aria-label=\"top axis magnifier\"\n      ref={magnifierRef}\n      className={clsx(magnifier, isRotated ? rotatedTopStyle : topStyle)}\n      style={{ top, left, backgroundColor: color }}\n    >\n      {label}\n    </Magnifier>\n  );\n}\n"],
+  "mappings": "AAiCI;AAjCJ,OAAO,UAAU;AAEjB;AAAA,EACE,OAAO;AAAA,EACP;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,4BAA4B;AAE9B,SAAS,aACd,OAQA;AACA,QAAM,EAAE,OAAO,QAAQ,OAAO,aAAa,UAAU,IAAI;AAEzD,QAAM,EAAE,mBAAmB,MAAM,aAAa,IAAI;AAAA,IAChD;AAAA,IACA,aAAa,QAAQ;AAAA,IACrB,aAAa,SAAS;AAAA,IACtB;AAAA,IACA;AAAA,EACF;AACA,QAAM,OACH,aAAa,OAAO,MAAM,aAAa,SAAS,gBAAgB;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAW;AAAA,MACX,KAAK;AAAA,MACL,WAAW,KAAK,WAAW,YAAY,kBAAkB,QAAQ;AAAA,MACjE,OAAO,EAAE,KAAK,MAAM,iBAAiB,MAAM;AAAA,MAE1C;AAAA;AAAA,EACH;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/grid/Grid.js

@@ -7,7 +7,6 @@ import {
   getHorizontalNumTicks
 } from "../../../core/utils/ticks.js";
 const DEFAULTS = {
-  DATA_TEST_ID: "chart-grid",
   HIGHLIGHT_ZERO_LINE: {
     horizontal: true,
     vertical: true
@@ -19,11 +18,12 @@ function Grid({
   xScale,
   yScale,
   highlightZeroLine = DEFAULTS.HIGHLIGHT_ZERO_LINE,
-  "data-testid": dataTestId = DEFAULTS.DATA_TEST_ID
+  xTicks,
+  yTicks
 }) {
   const numTicksRows = getVerticalNumTicks(height);
   const autoNumTicks = getHorizontalNumTicks(width);
-  return /* @__PURE__ */ jsxs(Group, { "data-testid": dataTestId, children: [
+  return /* @__PURE__ */ jsxs(Group, { children: [
     /* @__PURE__ */ jsx(
       GridColumns,
       {
@@ -31,7 +31,8 @@ function Grid({
         height,
         scale: xScale,
         numTicks: autoNumTicks,
-        highlightZeroLine: highlightZeroLine.vertical
+        highlightZeroLine: highlightZeroLine.vertical,
+        ticks: xTicks
       }
     ),
     /* @__PURE__ */ jsx(
@@ -41,7 +42,8 @@ function Grid({
         height,
         scale: yScale,
         numTicks: numTicksRows,
-        highlightZeroLine: highlightZeroLine.horizontal
+        highlightZeroLine: highlightZeroLine.horizontal,
+        ticks: yTicks
       }
     )
   ] });

package/esm/charts/core/components/grid/Grid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/grid/Grid.tsx"],
-  "sourcesContent": ["import { GridProps as VisxGridProps } from '@visx/grid/lib/grids/Grid';\nimport { Group } from '@visx/group';\n\nimport { GridColumns } from '../../../core/components/grid/GridColumns.js';\nimport { GridRows } from '../../../core/components/grid/GridRows.js';\nimport {\n  getVerticalNumTicks,\n  getHorizontalNumTicks,\n} from '../../../core/utils/ticks.js';\nimport type { AnyScale } from '../../types/scales.js';\n\nexport type GridProps = VisxGridProps<AnyScale, AnyScale> & {\n  'data-testid'?: string;\n  highlightZeroLine?: {\n    horizontal?: boolean;\n    vertical?: boolean;\n  };\n};\nconst DEFAULTS = {\n  DATA_TEST_ID: 'chart-grid',\n  HIGHLIGHT_ZERO_LINE: {\n    horizontal: true,\n    vertical: true,\n  },\n};\n/**\n * The grid columns component for charts\n */\nexport function Grid({\n  width,\n  height,\n  xScale,\n  yScale,\n  highlightZeroLine = DEFAULTS.HIGHLIGHT_ZERO_LINE,\n  'data-testid': dataTestId = DEFAULTS.DATA_TEST_ID,\n}: GridProps) {\n  const numTicksRows = getVerticalNumTicks(height);\n  const autoNumTicks = getHorizontalNumTicks(width);\n\n  return (\n    <Group data-testid={dataTestId}>\n      <GridColumns\n        width={width}\n        height={height}\n        scale={xScale}\n        numTicks={autoNumTicks}\n        highlightZeroLine={highlightZeroLine.vertical}\n      />\n      <GridRows\n        width={width}\n        height={height}\n        scale={yScale}\n        numTicks={numTicksRows}\n        highlightZeroLine={highlightZeroLine.horizontal}\n      />\n    </Group>\n  );\n}\n"],
-  "mappings": "AAwCI,SACE,KADF;AAvCJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAUP,MAAM,WAAW;AAAA,EACf,cAAc;AAAA,EACd,qBAAqB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AACF;AAIO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,SAAS;AAAA,EAC7B,eAAe,aAAa,SAAS;AACvC,GAAc;AACZ,QAAM,eAAe,oBAAoB,MAAM;AAC/C,QAAM,eAAe,sBAAsB,KAAK;AAEhD,SACE,qBAAC,SAAM,eAAa,YAClB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA;AAAA,IACvC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA;AAAA,IACvC;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { GridProps as VisxGridProps } from '@visx/grid/lib/grids/Grid';\nimport { Group } from '@visx/group';\n\nimport { GridColumns } from '../../../core/components/grid/GridColumns.js';\nimport { GridRows } from '../../../core/components/grid/GridRows.js';\nimport {\n  getVerticalNumTicks,\n  getHorizontalNumTicks,\n} from '../../../core/utils/ticks.js';\nimport type { AnyScale } from '../../types/scales.js';\n\nexport type GridProps = VisxGridProps<AnyScale, AnyScale> & {\n  highlightZeroLine?: {\n    horizontal?: boolean;\n    vertical?: boolean;\n  };\n  xTicks?: number[];\n  yTicks?: number[];\n};\nconst DEFAULTS = {\n  HIGHLIGHT_ZERO_LINE: {\n    horizontal: true,\n    vertical: true,\n  },\n};\n/**\n * The grid columns component for charts\n */\nexport function Grid({\n  width,\n  height,\n  xScale,\n  yScale,\n  highlightZeroLine = DEFAULTS.HIGHLIGHT_ZERO_LINE,\n  xTicks,\n  yTicks,\n}: GridProps) {\n  const numTicksRows = getVerticalNumTicks(height);\n  const autoNumTicks = getHorizontalNumTicks(width);\n\n  return (\n    <Group>\n      <GridColumns\n        width={width}\n        height={height}\n        scale={xScale}\n        numTicks={autoNumTicks}\n        highlightZeroLine={highlightZeroLine.vertical}\n        ticks={xTicks}\n      />\n      <GridRows\n        width={width}\n        height={height}\n        scale={yScale}\n        numTicks={numTicksRows}\n        highlightZeroLine={highlightZeroLine.horizontal}\n        ticks={yTicks}\n      />\n    </Group>\n  );\n}\n"],
+  "mappings": "AAyCI,SACE,KADF;AAxCJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAWP,MAAM,WAAW;AAAA,EACf,qBAAqB;AAAA,IACnB,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AACF;AAIO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB,SAAS;AAAA,EAC7B;AAAA,EACA;AACF,GAAc;AACZ,QAAM,eAAe,oBAAoB,MAAM;AAC/C,QAAM,eAAe,sBAAsB,KAAK;AAEhD,SACE,qBAAC,SACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA;AAAA,IACT;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA;AAAA,IACT;AAAA,KACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/grid/GridColumns.js

@@ -6,14 +6,32 @@ import { isBandScale } from "../../utils/detect-scale.js";
 const GridColumns = ({
   scale,
   highlightZeroLine = true,
+  ticks,
   ...restProps
-}) => /* @__PURE__ */ jsx(VisxGridColumns, { scale, ...restProps, children: ({ lines }) => /* @__PURE__ */ jsx(
-  GridLines,
-  {
-    lines,
-    highlightAccessor: (from, to) => highlightZeroLine && !isBandScale(scale) && shouldHighlightZeroLine(from, to, scale)
+}) => {
+  if (ticks) {
+    const typedScale = scale;
+    const lines = ticks.map((tick, index) => ({
+      from: { x: Math.max(0, typedScale(tick) ?? 0), y: 0 },
+      to: { x: Math.max(0, typedScale(tick) ?? 0), y: restProps.height },
+      index
+    }));
+    return /* @__PURE__ */ jsx(
+      GridLines,
+      {
+        lines,
+        highlightAccessor: (from, to) => highlightZeroLine && !isBandScale(scale) && shouldHighlightZeroLine(from, to, scale)
+      }
+    );
   }
-) });
+  return /* @__PURE__ */ jsx(VisxGridColumns, { scale, ...restProps, children: ({ lines }) => /* @__PURE__ */ jsx(
+    GridLines,
+    {
+      lines,
+      highlightAccessor: (from, to) => highlightZeroLine && !isBandScale(scale) && shouldHighlightZeroLine(from, to, scale)
+    }
+  ) });
+};
 export {
   GridColumns
 };

package/esm/charts/core/components/grid/GridColumns.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/grid/GridColumns.tsx"],
-  "sourcesContent": ["import { GridColumns as VisxGridColumns } from '@visx/grid';\nimport { AllGridColumnsProps } from '@visx/grid/lib/grids/GridColumns';\n\nimport { GridLines } from './GridLines.js';\nimport { shouldHighlightZeroLine } from './utils/should-highlight-zero-line.js';\nimport type { AnyScale } from '../../types/scales.js';\nimport { isBandScale } from '../../utils/detect-scale.js';\n\nexport type GridColumnsProps = {\n  highlightZeroLine?: boolean;\n} & AllGridColumnsProps<AnyScale>;\n\nexport const GridColumns = ({\n  scale,\n  highlightZeroLine = true,\n  ...restProps\n}: GridColumnsProps) => (\n  <VisxGridColumns scale={scale} {...restProps}>\n    {({ lines }) => (\n      <GridLines\n        lines={lines}\n        highlightAccessor={(from, to) =>\n          highlightZeroLine &&\n          !isBandScale(scale) &&\n          shouldHighlightZeroLine(from, to, scale)\n        }\n      />\n    )}\n  </VisxGridColumns>\n);\n"],
-  "mappings": "AAmBM;AAnBN,SAAS,eAAe,uBAAuB;AAG/C,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AAExC,SAAS,mBAAmB;AAMrB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,MACE,oBAAC,mBAAgB,OAAe,GAAG,WAChC,WAAC,EAAE,MAAM,MACR;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,mBAAmB,CAAC,MAAM,OACxB,qBACA,CAAC,YAAY,KAAK,KAClB,wBAAwB,MAAM,IAAI,KAAK;AAAA;AAE3C,GAEJ;",
+  "sourcesContent": ["import { GridColumns as VisxGridColumns } from '@visx/grid';\nimport { AllGridColumnsProps } from '@visx/grid/lib/grids/GridColumns';\n\nimport { GridLines } from './GridLines.js';\nimport { shouldHighlightZeroLine } from './utils/should-highlight-zero-line.js';\nimport type { AnyScale } from '../../types/scales.js';\nimport { isBandScale } from '../../utils/detect-scale.js';\n\nexport type GridColumnsProps = {\n  highlightZeroLine?: boolean;\n  ticks?: number[];\n} & AllGridColumnsProps<AnyScale>;\n\nexport const GridColumns = ({\n  scale,\n  highlightZeroLine = true,\n  ticks,\n  ...restProps\n}: GridColumnsProps) => {\n  if (ticks) {\n    const typedScale = scale as (value: number) => number | undefined;\n    const lines = ticks.map((tick, index) => ({\n      from: { x: Math.max(0, typedScale(tick) ?? 0), y: 0 },\n      to: { x: Math.max(0, typedScale(tick) ?? 0), y: restProps.height },\n      index,\n    }));\n\n    return (\n      <GridLines\n        lines={lines}\n        highlightAccessor={(from, to) =>\n          highlightZeroLine &&\n          !isBandScale(scale) &&\n          shouldHighlightZeroLine(from, to, scale)\n        }\n      />\n    );\n  }\n\n  return (\n    <VisxGridColumns scale={scale} {...restProps}>\n      {({ lines }) => (\n        <GridLines\n          lines={lines}\n          highlightAccessor={(from, to) =>\n            highlightZeroLine &&\n            !isBandScale(scale) &&\n            shouldHighlightZeroLine(from, to, scale)\n          }\n        />\n      )}\n    </VisxGridColumns>\n  );\n};\n"],
+  "mappings": "AA4BM;AA5BN,SAAS,eAAe,uBAAuB;AAG/C,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AAExC,SAAS,mBAAmB;AAOrB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MAAwB;AACtB,MAAI,OAAO;AACT,UAAM,aAAa;AACnB,UAAM,QAAQ,MAAM,IAAI,CAAC,MAAM,WAAW;AAAA,MACxC,MAAM,EAAE,GAAG,KAAK,IAAI,GAAG,WAAW,IAAI,KAAK,CAAC,GAAG,GAAG,EAAE;AAAA,MACpD,IAAI,EAAE,GAAG,KAAK,IAAI,GAAG,WAAW,IAAI,KAAK,CAAC,GAAG,GAAG,UAAU,OAAO;AAAA,MACjE;AAAA,IACF,EAAE;AAEF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,mBAAmB,CAAC,MAAM,OACxB,qBACA,CAAC,YAAY,KAAK,KAClB,wBAAwB,MAAM,IAAI,KAAK;AAAA;AAAA,IAE3C;AAAA,EAEJ;AAEA,SACE,oBAAC,mBAAgB,OAAe,GAAG,WAChC,WAAC,EAAE,MAAM,MACR;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,mBAAmB,CAAC,MAAM,OACxB,qBACA,CAAC,YAAY,KAAK,KAClB,wBAAwB,MAAM,IAAI,KAAK;AAAA;AAAA,EAE3C,GAEJ;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/grid/GridLine.js

@@ -15,7 +15,6 @@ const GridLine = ({ from, to, highlight = false }) => {
   return /* @__PURE__ */ jsx(
     Line,
     {
-      "data-testid": "visx-chart-grid-line",
       from,
       to,
       stroke,

package/esm/charts/core/components/grid/GridLine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/grid/GridLine.tsx"],
-  "sourcesContent": ["import { GridLines as VisxGridLines } from '@visx/grid/lib/types';\nimport { Line } from '@visx/shape';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nexport type VisxGridLine = VisxGridLines[number];\nexport type VisxGridPoint = VisxGridLine['from'];\n\nexport const DEFAULT_STROKE_WIDTH = '1px';\nexport const DEFAULT_STROKE_COLOR =\n  Colors.Background.Field.Neutral.DefaultActive;\nexport const HIGHLIGHTED_STROKE_WIDTH = '2px';\nexport const HIGHLIGHTED_STROKE_COLOR = Colors.Text.Neutral.Subdued;\n\nexport type GridLineProps = {\n  from: VisxGridPoint;\n  to: VisxGridPoint;\n  highlight?: boolean;\n};\n\nexport const GridLine = ({ from, to, highlight = false }: GridLineProps) => {\n  let stroke = DEFAULT_STROKE_COLOR;\n  let strokeWidth = DEFAULT_STROKE_WIDTH;\n\n  if (highlight) {\n    stroke = HIGHLIGHTED_STROKE_COLOR;\n    strokeWidth = HIGHLIGHTED_STROKE_WIDTH;\n  }\n\n  return (\n    <Line\n      data-testid=\"visx-chart-grid-line\"\n      from={from}\n      to={to}\n      stroke={stroke}\n      strokeWidth={strokeWidth}\n      style={{\n        shapeRendering: 'geometricPrecision',\n      }}\n    />\n  );\n};\n"],
-  "mappings": "AA8BI;AA7BJ,SAAS,YAAY;AAErB,OAAO,YAAY;AAKZ,MAAM,uBAAuB;AAC7B,MAAM,uBACX,OAAO,WAAW,MAAM,QAAQ;AAC3B,MAAM,2BAA2B;AACjC,MAAM,2BAA2B,OAAO,KAAK,QAAQ;AAQrD,MAAM,WAAW,CAAC,EAAE,MAAM,IAAI,YAAY,MAAM,MAAqB;AAC1E,MAAI,SAAS;AACb,MAAI,cAAc;AAElB,MAAI,WAAW;AACb,aAAS;AACT,kBAAc;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,MAClB;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { GridLines as VisxGridLines } from '@visx/grid/lib/types';\nimport { Line } from '@visx/shape';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nexport type VisxGridLine = VisxGridLines[number];\nexport type VisxGridPoint = VisxGridLine['from'];\n\nexport const DEFAULT_STROKE_WIDTH = '1px';\nexport const DEFAULT_STROKE_COLOR =\n  Colors.Background.Field.Neutral.DefaultActive;\nexport const HIGHLIGHTED_STROKE_WIDTH = '2px';\nexport const HIGHLIGHTED_STROKE_COLOR = Colors.Text.Neutral.Subdued;\n\nexport type GridLineProps = {\n  from: VisxGridPoint;\n  to: VisxGridPoint;\n  highlight?: boolean;\n};\n\nexport const GridLine = ({ from, to, highlight = false }: GridLineProps) => {\n  let stroke = DEFAULT_STROKE_COLOR;\n  let strokeWidth = DEFAULT_STROKE_WIDTH;\n\n  if (highlight) {\n    stroke = HIGHLIGHTED_STROKE_COLOR;\n    strokeWidth = HIGHLIGHTED_STROKE_WIDTH;\n  }\n\n  return (\n    <Line\n      from={from}\n      to={to}\n      stroke={stroke}\n      strokeWidth={strokeWidth}\n      style={{\n        shapeRendering: 'geometricPrecision',\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AA8BI;AA7BJ,SAAS,YAAY;AAErB,OAAO,YAAY;AAKZ,MAAM,uBAAuB;AAC7B,MAAM,uBACX,OAAO,WAAW,MAAM,QAAQ;AAC3B,MAAM,2BAA2B;AACjC,MAAM,2BAA2B,OAAO,KAAK,QAAQ;AAQrD,MAAM,WAAW,CAAC,EAAE,MAAM,IAAI,YAAY,MAAM,MAAqB;AAC1E,MAAI,SAAS;AACb,MAAI,cAAc;AAElB,MAAI,WAAW;AACb,aAAS;AACT,kBAAc;AAAA,EAChB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,MAClB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/grid/GridRows.js

@@ -6,14 +6,32 @@ import { isBandScale } from "../../utils/detect-scale.js";
 const GridRows = ({
   scale,
   highlightZeroLine = true,
+  ticks,
   ...restProps
-}) => /* @__PURE__ */ jsx(VisxGridRows, { scale, ...restProps, children: ({ lines }) => /* @__PURE__ */ jsx(
-  GridLines,
-  {
-    lines,
-    highlightAccessor: (from, to) => highlightZeroLine && !isBandScale(scale) && shouldHighlightZeroLine(from, to, scale)
+}) => {
+  if (ticks) {
+    const typedScale = scale;
+    const lines = ticks.map((tick, index) => ({
+      from: { x: 0, y: Math.max(0, typedScale(tick) ?? 0) },
+      to: { x: restProps.width, y: Math.max(0, typedScale(tick) ?? 0) },
+      index
+    }));
+    return /* @__PURE__ */ jsx(
+      GridLines,
+      {
+        lines,
+        highlightAccessor: (from, to) => highlightZeroLine && !isBandScale(scale) && shouldHighlightZeroLine(from, to, scale)
+      }
+    );
   }
-) });
+  return /* @__PURE__ */ jsx(VisxGridRows, { scale, ...restProps, children: ({ lines }) => /* @__PURE__ */ jsx(
+    GridLines,
+    {
+      lines,
+      highlightAccessor: (from, to) => highlightZeroLine && !isBandScale(scale) && shouldHighlightZeroLine(from, to, scale)
+    }
+  ) });
+};
 export {
   GridRows
 };

package/esm/charts/core/components/grid/GridRows.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/grid/GridRows.tsx"],
-  "sourcesContent": ["import { GridRows as VisxGridRows } from '@visx/grid';\nimport { AllGridRowsProps } from '@visx/grid/lib/grids/GridRows';\n\nimport { GridLines } from './GridLines.js';\nimport { shouldHighlightZeroLine } from './utils/should-highlight-zero-line.js';\nimport type { AnyScale } from '../../types/scales.js';\nimport { isBandScale } from '../../utils/detect-scale.js';\n\nexport type GridRowsProps = {\n  highlightZeroLine?: boolean;\n} & AllGridRowsProps<AnyScale>;\n\nexport const GridRows = ({\n  scale,\n  highlightZeroLine = true,\n  ...restProps\n}: GridRowsProps) => (\n  <VisxGridRows scale={scale} {...restProps}>\n    {({ lines }) => (\n      <GridLines\n        lines={lines}\n        highlightAccessor={(from, to) =>\n          highlightZeroLine &&\n          !isBandScale(scale) &&\n          shouldHighlightZeroLine(from, to, scale)\n        }\n      />\n    )}\n  </VisxGridRows>\n);\n"],
-  "mappings": "AAmBM;AAnBN,SAAS,YAAY,oBAAoB;AAGzC,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AAExC,SAAS,mBAAmB;AAMrB,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,MACE,oBAAC,gBAAa,OAAe,GAAG,WAC7B,WAAC,EAAE,MAAM,MACR;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA,mBAAmB,CAAC,MAAM,OACxB,qBACA,CAAC,YAAY,KAAK,KAClB,wBAAwB,MAAM,IAAI,KAAK;AAAA;AAE3C,GAEJ;",
+  "sourcesContent": ["import { GridRows as VisxGridRows } from '@visx/grid';\nimport { AllGridRowsProps } from '@visx/grid/lib/grids/GridRows';\n\nimport { GridLines } from './GridLines.js';\nimport { shouldHighlightZeroLine } from './utils/should-highlight-zero-line.js';\nimport type { AnyScale } from '../../types/scales.js';\nimport { isBandScale } from '../../utils/detect-scale.js';\n\nexport type GridRowsProps = {\n  highlightZeroLine?: boolean;\n  ticks?: number[];\n} & AllGridRowsProps<AnyScale>;\n\nexport const GridRows = ({\n  scale,\n  highlightZeroLine = true,\n  ticks,\n  ...restProps\n}: GridRowsProps) => {\n  if (ticks) {\n    const typedScale = scale as (value: number) => number | undefined;\n    const lines = ticks.map((tick, index) => ({\n      from: { x: 0, y: Math.max(0, typedScale(tick) ?? 0) },\n      to: { x: restProps.width, y: Math.max(0, typedScale(tick) ?? 0) },\n      index,\n    }));\n    return (\n      <GridLines\n        lines={lines}\n        highlightAccessor={(from, to) =>\n          highlightZeroLine &&\n          !isBandScale(scale) &&\n          shouldHighlightZeroLine(from, to, scale)\n        }\n      />\n    );\n  }\n\n  return (\n    <VisxGridRows scale={scale} {...restProps}>\n      {({ lines }) => (\n        <GridLines\n          lines={lines}\n          highlightAccessor={(from, to) =>\n            highlightZeroLine &&\n            !isBandScale(scale) &&\n            shouldHighlightZeroLine(from, to, scale)\n          }\n        />\n      )}\n    </VisxGridRows>\n  );\n};\n"],
+  "mappings": "AA2BM;AA3BN,SAAS,YAAY,oBAAoB;AAGzC,SAAS,iBAAiB;AAC1B,SAAS,+BAA+B;AAExC,SAAS,mBAAmB;AAOrB,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,oBAAoB;AAAA,EACpB;AAAA,EACA,GAAG;AACL,MAAqB;AACnB,MAAI,OAAO;AACT,UAAM,aAAa;AACnB,UAAM,QAAQ,MAAM,IAAI,CAAC,MAAM,WAAW;AAAA,MACxC,MAAM,EAAE,GAAG,GAAG,GAAG,KAAK,IAAI,GAAG,WAAW,IAAI,KAAK,CAAC,EAAE;AAAA,MACpD,IAAI,EAAE,GAAG,UAAU,OAAO,GAAG,KAAK,IAAI,GAAG,WAAW,IAAI,KAAK,CAAC,EAAE;AAAA,MAChE;AAAA,IACF,EAAE;AACF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,mBAAmB,CAAC,MAAM,OACxB,qBACA,CAAC,YAAY,KAAK,KAClB,wBAAwB,MAAM,IAAI,KAAK;AAAA;AAAA,IAE3C;AAAA,EAEJ;AAEA,SACE,oBAAC,gBAAa,OAAe,GAAG,WAC7B,WAAC,EAAE,MAAM,MACR;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,mBAAmB,CAAC,MAAM,OACxB,qBACA,CAAC,YAAY,KAAK,KAClB,wBAAwB,MAAM,IAAI,KAAK;AAAA;AAAA,EAE3C,GAEJ;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.css

@@ -1,4 +1,4 @@
-._nfahiq0-3-1-1 {
+._nfahiq0-3-2-0 {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -6,15 +6,15 @@
   left: 0;
   touch-action: none;
 }
-._nfahiq1-3-1-1 {
+._nfahiq1-3-2-0 {
   cursor: crosshair;
 }
-._nfahiq2-3-1-1 {
+._nfahiq2-3-2-0 {
   cursor: ew-resize;
 }
-._nfahiq3-3-1-1 {
+._nfahiq3-3-2-0 {
   cursor: zoom-in;
 }
-._nfahiq4-3-1-1 {
+._nfahiq4-3-2-0 {
   cursor: zoom-out;
 }

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js

@@ -1,7 +1,7 @@
 import "./InteractionsOverlay.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-1-1", variantClassNames: { mode: { explore: "_nfahiq1-3-1-1", pan: "_nfahiq2-3-1-1", zoom: "_nfahiq3-3-1-1", zoomOut: "_nfahiq4-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
-var interactionsOverlay = "_nfahiq5-3-1-1";
+var chartEventsWrapper = _7a468({ defaultClassName: "_nfahiq0-3-2-0", variantClassNames: { mode: { explore: "_nfahiq1-3-2-0", pan: "_nfahiq2-3-2-0", zoom: "_nfahiq3-3-2-0", zoomOut: "_nfahiq4-3-2-0" } }, defaultVariants: {}, compoundVariants: [] });
+var interactionsOverlay = "_nfahiq5-3-2-0";
 export {
   chartEventsWrapper,
   interactionsOverlay

package/esm/charts/core/components/interactions-overlay/InteractionsOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/interactions-overlay/InteractionsOverlay.css.ts"],
-  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-1-1',variantClassNames:{mode:{explore:'_nfahiq1-3-1-1',pan:'_nfahiq2-3-1-1',zoom:'_nfahiq3-3-1-1',zoomOut:'_nfahiq4-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-1-1';"],
+  "sourcesContent": ["import './InteractionsOverlay.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var chartEventsWrapper = _7a468({defaultClassName:'_nfahiq0-3-2-0',variantClassNames:{mode:{explore:'_nfahiq1-3-2-0',pan:'_nfahiq2-3-2-0',zoom:'_nfahiq3-3-2-0',zoomOut:'_nfahiq4-3-2-0'}},defaultVariants:{},compoundVariants:[]});\nexport var interactionsOverlay = '_nfahiq5-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,MAAK,EAAC,SAAQ,kBAAiB,KAAI,kBAAiB,MAAK,kBAAiB,SAAQ,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClO,IAAI,sBAAsB;",
   "names": []
 }

package/esm/charts/core/components/legend/categorical/ChartLegend.css

@@ -1,4 +1,4 @@
-._9x5f9b0-3-1-1 {
+._9x5f9b0-3-2-0 {
   display: flex;
   align-items: center;
   width: 100%;

package/esm/charts/core/components/legend/categorical/ChartLegend.sty.js

@@ -1,5 +1,5 @@
 import "./ChartLegend.css";
-var legendContainer = "_9x5f9b0-3-1-1";
+var legendContainer = "_9x5f9b0-3-2-0";
 export {
   legendContainer
 };

package/esm/charts/core/components/legend/categorical/ChartLegend.sty.js.map

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

package/esm/charts/core/components/legend/categorical/components/ChartLegendIcon/ChartLegendIcon.css

@@ -1,12 +1,12 @@
-._1wmibjy0-3-1-1 {
+._1wmibjy0-3-2-0 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy1-3-1-1 {
+._1wmibjy1-3-2-0 {
   font-size: var(--dt-spacings-size-8, 8px);
   display: block;
 }
-._1wmibjy2-3-1-1 {
+._1wmibjy2-3-2-0 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: 100%;