@dynatrace/strato-components 3.7.1 → 3.8.0

package/esm/charts/categorical-bar/hooks/store/state-setters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/categorical-bar/hooks/store/state-setters.ts"],
-  "sourcesContent": ["import type { CategoricalBarChartState } from '../../types/state.js';\n\nexport const setMouseOutBounds = (prev: CategoricalBarChartState) => ({\n  ...prev,\n  overlays: {\n    ...prev.overlays,\n    mouseInBounds: false,\n  },\n});\n"],
-  "mappings": "AAEO,MAAM,oBAAoB,CAAC,UAAoC;AAAA,EACpE,GAAG;AAAA,EACH,UAAU;AAAA,IACR,GAAG,KAAK;AAAA,IACR,eAAe;AAAA,EACjB;AACF;",
+  "sourcesContent": ["import type { CategoricalBarChartState } from '../../types/state.js';\n\nexport const setMouseOutBounds = (prev: CategoricalBarChartState) => ({\n  ...prev,\n  overlays: {\n    ...prev.overlays,\n    mouseInBounds: false,\n    mousePosition: undefined,\n    visibleTooltip: prev.overlays.pinnedTooltip,\n  },\n});\n"],
+  "mappings": "AAEO,MAAM,oBAAoB,CAAC,UAAoC;AAAA,EACpE,GAAG;AAAA,EACH,UAAU;AAAA,IACR,GAAG,KAAK;AAAA,IACR,eAAe;AAAA,IACf,eAAe;AAAA,IACf,gBAAgB,KAAK,SAAS;AAAA,EAChC;AACF;",
   "names": []
 }

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

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { Group } from "@visx/group";
 import { plotLayout } from "../../core/components/chart-grid/ChartGrid.sty.js";
 import { useGridPlotSize } from "../../core/components/chart-grid/hooks/useGridPlotSize.js";
 import { GridLayout } from "../components/grid/GridLayout.js";
@@ -9,7 +8,7 @@ const CategoricalGridLayout = () => {
   const { width, height } = useGridPlotSize();
   const { layout } = useCategoricalBarChartBaseConfig();
   const { valueScale } = useCategoricalBarChartScales();
-  return /* @__PURE__ */ jsx("svg", { className: plotLayout, children: /* @__PURE__ */ jsx(Group, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { className: plotLayout, children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
     GridLayout,
     {
       layout,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/layout/CategoricalGridLayout.tsx"],
-  "sourcesContent": ["import { Group } from '@visx/group';\n\nimport { plotLayout } from '../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { GridLayout } from '../components/grid/GridLayout.js';\nimport { useCategoricalBarChartBaseConfig } from '../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../hooks/useCategoricalBarChartScales.js';\n\nexport const CategoricalGridLayout = () => {\n  const { width, height } = useGridPlotSize();\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale } = useCategoricalBarChartScales();\n\n  return (\n    <svg className={plotLayout}>\n      <Group>\n        <GridLayout\n          layout={layout}\n          width={width}\n          height={height}\n          scale={valueScale}\n        />\n      </Group>\n    </svg>\n  );\n};\n\nCategoricalGridLayout['displayName'] = 'CategoricalGridLayout';\n"],
-  "mappings": "AAgBQ;AAhBR,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAEtC,MAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,WAAW,IAAI,6BAA6B;AAEpD,SACE,oBAAC,SAAI,WAAW,YACd,8BAAC,SACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA;AAAA,EACT,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { plotLayout } from '../../core/components/chart-grid/ChartGrid.sty.js';\nimport { useGridPlotSize } from '../../core/components/chart-grid/hooks/useGridPlotSize.js';\nimport { GridLayout } from '../components/grid/GridLayout.js';\nimport { useCategoricalBarChartBaseConfig } from '../hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartScales } from '../hooks/useCategoricalBarChartScales.js';\n\nexport const CategoricalGridLayout = () => {\n  const { width, height } = useGridPlotSize();\n  const { layout } = useCategoricalBarChartBaseConfig();\n  const { valueScale } = useCategoricalBarChartScales();\n\n  return (\n    <svg className={plotLayout}>\n      <g>\n        <GridLayout\n          layout={layout}\n          width={width}\n          height={height}\n          scale={valueScale}\n        />\n      </g>\n    </svg>\n  );\n};\n\nCategoricalGridLayout['displayName'] = 'CategoricalGridLayout';\n"],
+  "mappings": "AAcQ;AAdR,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,kBAAkB;AAC3B,SAAS,wCAAwC;AACjD,SAAS,oCAAoC;AAEtC,MAAM,wBAAwB,MAAM;AACzC,QAAM,EAAE,OAAO,OAAO,IAAI,gBAAgB;AAC1C,QAAM,EAAE,OAAO,IAAI,iCAAiC;AACpD,QAAM,EAAE,WAAW,IAAI,6BAA6B;AAEpD,SACE,oBAAC,SAAI,WAAW,YACd,8BAAC,OACC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA;AAAA,EACT,GACF,GACF;AAEJ;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

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

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

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

@@ -1,5 +1,5 @@
 import "./AnnotationsAtom.css";
-var wrapper = "_145zb630-3-7-1";
+var wrapper = "_145zb630-3-8-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-7-1';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

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

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

package/esm/charts/core/components/annotations/components/canvas/utils/calculate-marker-width-and-content.js

@@ -78,12 +78,11 @@ function resolveExpandedStringLayout(content, width, isRange, textOverflow, boun
     };
   }
   if (xPosition - markerWidth >= trackLeftBoundary) {
-    const adjustedX = !isRange && textOverflow === "expand" ? xPosition - markerWidth : xPosition;
     return {
       sanitizedContent: content,
       calculatedMarkerWidth: markerWidth,
       valueMarkerOrientation: "right",
-      calculatedX: adjustedX
+      calculatedX: xPosition
     };
   }
   if (xPosition + markerWidth <= trackRightBoundary) {

package/esm/charts/core/components/annotations/components/canvas/utils/calculate-marker-width-and-content.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/utils/calculate-marker-width-and-content.ts"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { checkMarkerFitCentered } from './check-marker-fit-centered.js';\nimport { getDefaultValueMarkerPointerPosition } from './get-default-value-marker-pointer-position.js';\nimport { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER } from '../../../../../../../typography/utils.js';\nimport { charsFontWidth12pixelsSize500Map } from '../../../../text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../../text-ellipsis/truncate-string.js';\nimport { MARKER_CONTENT_TO_BORDER_PADDING } from '../../../constants.js';\nimport type { TextOverflowOptions } from '../../../types/marker.js';\nimport type { ValueMarkerPointerPosition } from '../renderers/value-marker-renderer/types.js';\n\nconst MIN_TEXT_TO_RENDER = `W${ELLIPSIS_CHARACTER}W`;\nconst RANGE_MARKER_WITH_SYMBOL_MIN_WIDTH = 20;\n\ntype TrackBoundaries = {\n  xPosition: number;\n  trackLeftBoundary: number;\n  trackRightBoundary: number;\n  markerWidth: number;\n  defaultPointer: ValueMarkerPointerPosition;\n};\n\ntype MarkerLayoutInput = {\n  trackWidth: number;\n  trackLeftBoundary: number;\n  content: ReactNode;\n  width: number;\n  x: number;\n  isRange: boolean;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n};\n\ntype MarkerLayout = {\n  sanitizedContent: ReactNode;\n  calculatedMarkerWidth: number;\n  valueMarkerOrientation: ValueMarkerPointerPosition;\n  calculatedX: number;\n};\n\nfunction getAvailableWidth(width: number) {\n  return width - MARKER_CONTENT_TO_BORDER_PADDING * 2;\n}\n\nfunction getSanitizedContent(\n  content: string,\n  availableWidth: number,\n  truncateMode?: TruncationMode,\n) {\n  const minimumContentAllowedWidth = calculateWidth(\n    MIN_TEXT_TO_RENDER,\n    charsFontWidth12pixelsSize500Map,\n  );\n\n  if (minimumContentAllowedWidth > availableWidth) {\n    return '';\n  }\n\n  return truncateString(\n    content,\n    availableWidth,\n    charsFontWidth12pixelsSize500Map,\n    truncateMode,\n  );\n}\n\nfunction resolveConstrainedLayout(\n  content: string,\n  xPosition: number,\n  markerWidth: number,\n  trackLeftBoundary: number,\n  trackRightBoundary: number,\n  isRange: boolean,\n  truncateMode?: TruncationMode,\n): MarkerLayout {\n  const spaceToTheRight = trackRightBoundary - xPosition;\n  const moreSpaceRight = spaceToTheRight > xPosition;\n  const constrainedWidth = moreSpaceRight\n    ? Math.min(spaceToTheRight, markerWidth)\n    : xPosition - trackLeftBoundary;\n  return {\n    sanitizedContent: getSanitizedContent(\n      content,\n      getAvailableWidth(constrainedWidth),\n      truncateMode,\n    ),\n    calculatedMarkerWidth: constrainedWidth,\n    valueMarkerOrientation: moreSpaceRight ? 'left' : 'right',\n    calculatedX: !moreSpaceRight && isRange ? trackLeftBoundary : xPosition,\n  };\n}\n\nfunction resolveExpandedStringLayout(\n  content: string,\n  width: number,\n  isRange: boolean,\n  textOverflow: TextOverflowOptions,\n  boundaries: TrackBoundaries,\n  truncateMode?: TruncationMode,\n): MarkerLayout {\n  const {\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n    markerWidth,\n    defaultPointer,\n  } = boundaries;\n\n  if (isRange && textOverflow !== 'expand') {\n    return {\n      sanitizedContent: getSanitizedContent(\n        content,\n        getAvailableWidth(width),\n        truncateMode,\n      ),\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const canExpandCenter = checkMarkerFitCentered(\n    xPosition,\n    markerWidth,\n    trackLeftBoundary,\n    trackRightBoundary,\n  );\n\n  if (canExpandCenter) {\n    const adjustedX = isRange\n      ? width / 2 + xPosition - markerWidth / 2\n      : xPosition;\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: adjustedX,\n    };\n  }\n\n  if (xPosition - markerWidth >= trackLeftBoundary) {\n    const adjustedX =\n      !isRange && textOverflow === 'expand'\n        ? xPosition - markerWidth\n        : xPosition;\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: 'right',\n      calculatedX: adjustedX,\n    };\n  }\n\n  if (xPosition + markerWidth <= trackRightBoundary) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: 'left',\n      calculatedX: xPosition,\n    };\n  }\n\n  return resolveConstrainedLayout(\n    content,\n    xPosition,\n    markerWidth,\n    trackLeftBoundary,\n    trackRightBoundary,\n    isRange,\n    truncateMode,\n  );\n}\n\nexport function calculateMarkerWidthAndContent({\n  trackWidth,\n  trackLeftBoundary,\n  content,\n  width,\n  x,\n  isRange,\n  textOverflow,\n  truncateMode,\n}: MarkerLayoutInput): MarkerLayout {\n  const trackRightBoundary = trackWidth + trackLeftBoundary;\n  const xPosition = trackLeftBoundary + x;\n  const defaultPointer = getDefaultValueMarkerPointerPosition(\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n  );\n\n  if (typeof content !== 'string') {\n    const sanitizedContent =\n      isRange && RANGE_MARKER_WITH_SYMBOL_MIN_WIDTH > getAvailableWidth(width)\n        ? ''\n        : content;\n    return {\n      sanitizedContent,\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const textWidth = calculateWidth(content, charsFontWidth12pixelsSize500Map);\n  const markerWidth = Math.max(\n    textWidth + MARKER_CONTENT_TO_BORDER_PADDING * 2,\n    width,\n  );\n\n  if (markerWidth <= width) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const boundaries: TrackBoundaries = {\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n    markerWidth,\n    defaultPointer,\n  };\n\n  return resolveExpandedStringLayout(\n    content,\n    width,\n    isRange,\n    textOverflow,\n    boundaries,\n    truncateMode,\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type ReactNode } from 'react';\n\nimport { checkMarkerFitCentered } from './check-marker-fit-centered.js';\nimport { getDefaultValueMarkerPointerPosition } from './get-default-value-marker-pointer-position.js';\nimport { TruncationMode } from '../../../../../../../typography/text-ellipsis/TextEllipsis.js';\nimport { ELLIPSIS_CHARACTER } from '../../../../../../../typography/utils.js';\nimport { charsFontWidth12pixelsSize500Map } from '../../../../text-ellipsis/chars-font-width-map.js';\nimport {\n  calculateWidth,\n  truncateString,\n} from '../../../../text-ellipsis/truncate-string.js';\nimport { MARKER_CONTENT_TO_BORDER_PADDING } from '../../../constants.js';\nimport type { TextOverflowOptions } from '../../../types/marker.js';\nimport type { ValueMarkerPointerPosition } from '../renderers/value-marker-renderer/types.js';\n\nconst MIN_TEXT_TO_RENDER = `W${ELLIPSIS_CHARACTER}W`;\nconst RANGE_MARKER_WITH_SYMBOL_MIN_WIDTH = 20;\n\ntype TrackBoundaries = {\n  xPosition: number;\n  trackLeftBoundary: number;\n  trackRightBoundary: number;\n  markerWidth: number;\n  defaultPointer: ValueMarkerPointerPosition;\n};\n\ntype MarkerLayoutInput = {\n  trackWidth: number;\n  trackLeftBoundary: number;\n  content: ReactNode;\n  width: number;\n  x: number;\n  isRange: boolean;\n  textOverflow: TextOverflowOptions;\n  truncateMode?: TruncationMode;\n};\n\ntype MarkerLayout = {\n  sanitizedContent: ReactNode;\n  calculatedMarkerWidth: number;\n  valueMarkerOrientation: ValueMarkerPointerPosition;\n  calculatedX: number;\n};\n\nfunction getAvailableWidth(width: number) {\n  return width - MARKER_CONTENT_TO_BORDER_PADDING * 2;\n}\n\nfunction getSanitizedContent(\n  content: string,\n  availableWidth: number,\n  truncateMode?: TruncationMode,\n) {\n  const minimumContentAllowedWidth = calculateWidth(\n    MIN_TEXT_TO_RENDER,\n    charsFontWidth12pixelsSize500Map,\n  );\n\n  if (minimumContentAllowedWidth > availableWidth) {\n    return '';\n  }\n\n  return truncateString(\n    content,\n    availableWidth,\n    charsFontWidth12pixelsSize500Map,\n    truncateMode,\n  );\n}\n\nfunction resolveConstrainedLayout(\n  content: string,\n  xPosition: number,\n  markerWidth: number,\n  trackLeftBoundary: number,\n  trackRightBoundary: number,\n  isRange: boolean,\n  truncateMode?: TruncationMode,\n): MarkerLayout {\n  const spaceToTheRight = trackRightBoundary - xPosition;\n  const moreSpaceRight = spaceToTheRight > xPosition;\n  const constrainedWidth = moreSpaceRight\n    ? Math.min(spaceToTheRight, markerWidth)\n    : xPosition - trackLeftBoundary;\n  return {\n    sanitizedContent: getSanitizedContent(\n      content,\n      getAvailableWidth(constrainedWidth),\n      truncateMode,\n    ),\n    calculatedMarkerWidth: constrainedWidth,\n    valueMarkerOrientation: moreSpaceRight ? 'left' : 'right',\n    calculatedX: !moreSpaceRight && isRange ? trackLeftBoundary : xPosition,\n  };\n}\n\nfunction resolveExpandedStringLayout(\n  content: string,\n  width: number,\n  isRange: boolean,\n  textOverflow: TextOverflowOptions,\n  boundaries: TrackBoundaries,\n  truncateMode?: TruncationMode,\n): MarkerLayout {\n  const {\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n    markerWidth,\n    defaultPointer,\n  } = boundaries;\n\n  if (isRange && textOverflow !== 'expand') {\n    return {\n      sanitizedContent: getSanitizedContent(\n        content,\n        getAvailableWidth(width),\n        truncateMode,\n      ),\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const canExpandCenter = checkMarkerFitCentered(\n    xPosition,\n    markerWidth,\n    trackLeftBoundary,\n    trackRightBoundary,\n  );\n\n  if (canExpandCenter) {\n    const adjustedX = isRange\n      ? width / 2 + xPosition - markerWidth / 2\n      : xPosition;\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: adjustedX,\n    };\n  }\n\n  if (xPosition - markerWidth >= trackLeftBoundary) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: 'right',\n      calculatedX: xPosition,\n    };\n  }\n\n  if (xPosition + markerWidth <= trackRightBoundary) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: markerWidth,\n      valueMarkerOrientation: 'left',\n      calculatedX: xPosition,\n    };\n  }\n\n  return resolveConstrainedLayout(\n    content,\n    xPosition,\n    markerWidth,\n    trackLeftBoundary,\n    trackRightBoundary,\n    isRange,\n    truncateMode,\n  );\n}\n\nexport function calculateMarkerWidthAndContent({\n  trackWidth,\n  trackLeftBoundary,\n  content,\n  width,\n  x,\n  isRange,\n  textOverflow,\n  truncateMode,\n}: MarkerLayoutInput): MarkerLayout {\n  const trackRightBoundary = trackWidth + trackLeftBoundary;\n  const xPosition = trackLeftBoundary + x;\n  const defaultPointer = getDefaultValueMarkerPointerPosition(\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n  );\n\n  if (typeof content !== 'string') {\n    const sanitizedContent =\n      isRange && RANGE_MARKER_WITH_SYMBOL_MIN_WIDTH > getAvailableWidth(width)\n        ? ''\n        : content;\n    return {\n      sanitizedContent,\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const textWidth = calculateWidth(content, charsFontWidth12pixelsSize500Map);\n  const markerWidth = Math.max(\n    textWidth + MARKER_CONTENT_TO_BORDER_PADDING * 2,\n    width,\n  );\n\n  if (markerWidth <= width) {\n    return {\n      sanitizedContent: content,\n      calculatedMarkerWidth: width,\n      valueMarkerOrientation: defaultPointer,\n      calculatedX: xPosition,\n    };\n  }\n\n  const boundaries: TrackBoundaries = {\n    xPosition,\n    trackLeftBoundary,\n    trackRightBoundary,\n    markerWidth,\n    defaultPointer,\n  };\n\n  return resolveExpandedStringLayout(\n    content,\n    width,\n    isRange,\n    textOverflow,\n    boundaries,\n    truncateMode,\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._107efci0-3-7-1 {
+._107efci0-3-8-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-7-1";
+var annotationsOverlay = "_107efci0-3-8-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-7-1';"],
+  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._uzgvu30-3-7-1 {
+._uzgvu30-3-8-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-7-1";
+var scrollWrapper = "_uzgvu30-3-8-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-7-1';"],
+  "sourcesContent": ["import './AnnotationsScrollWrapper.css';\nexport var scrollWrapper = '_uzgvu30-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,gBAAgB;",
   "names": []
 }

package/esm/charts/core/components/annotations/utils/aggregate-markers-coords.js

@@ -1,16 +1,16 @@
 import { Children } from "react";
 import { isElement } from "react-is";
 import Colors from "@dynatrace/strato-design-tokens/colors";
-import {
-  calculateRangeMarkerCoordinates,
-  calculateValueMarkerCoordinates
-} from "./calculate-expand-marker-coordinates.js";
+import { calculateRangeMarkerCoordinates } from "./calculate-expand-marker-coordinates.js";
+import { resolveValueMarkerHitArea } from "./resolve-value-marker-hit-area.js";
 import { isSlot } from "../../../../../core/utils/is-slot.js";
 import {
   getColorByContrast,
   getColorTokenDefaultValue
 } from "../../../utils/color-contrast.js";
 import { getTokenComputedStyle } from "../../../utils/getTokenComputedStyle.js";
+import { VALUE_MARKER_WIDTH } from "../components/canvas/renderers/value-marker-renderer/constants.js";
+import { calculateMarkerWidthAndContent } from "../components/canvas/utils/calculate-marker-width-and-content.js";
 import { MarkerAtom } from "../slots/MarkerAtom.js";
 import { TrackAtom } from "../slots/TrackAtom.js";
 function aggregateMarkersCoords(children, trackWidth) {
@@ -32,10 +32,24 @@ function aggregateMarkersCoords(children, trackWidth) {
           markersByTrackConfig.push(marker.props);
           const { textOverflow, content, x, width } = marker.props;
           if (marker.props.width === 0) {
-            markerAtomCoords = calculateValueMarkerCoordinates(
+            const {
+              calculatedX,
+              calculatedMarkerWidth,
+              valueMarkerOrientation
+            } = calculateMarkerWidthAndContent({
+              trackWidth,
+              trackLeftBoundary: 0,
               content,
+              width: VALUE_MARKER_WIDTH,
               x,
-              trackWidth
+              isRange: false,
+              textOverflow,
+              truncateMode: marker.props.truncateMode
+            });
+            markerAtomCoords = resolveValueMarkerHitArea(
+              calculatedX,
+              calculatedMarkerWidth,
+              valueMarkerOrientation
             );
           } else {
             markerAtomCoords = calculateRangeMarkerCoordinates(

package/esm/charts/core/components/annotations/utils/aggregate-markers-coords.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/annotations/utils/aggregate-markers-coords.ts"],
-  "sourcesContent": ["import { Children, type ReactElement, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  calculateRangeMarkerCoordinates,\n  calculateValueMarkerCoordinates,\n} from './calculate-expand-marker-coordinates.js';\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport {\n  getColorByContrast,\n  getColorTokenDefaultValue,\n} from '../../../utils/color-contrast.js';\nimport { getTokenComputedStyle } from '../../../utils/getTokenComputedStyle.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport {\n  MarkerEventHandlersMap,\n  TrackEventHandlersMap,\n} from '../types/event-handlers.js';\nimport { MarkerCoords, MarkersCoordsPerTrack } from '../types/marker-coords.js';\nimport { MarkerAtomProps } from '../types/marker.js';\nimport { TrackAtomProps } from '../types/track.js';\n\nexport function aggregateMarkersCoords(\n  children: ReactNode,\n  trackWidth: number,\n) {\n  const markersPerTrack: MarkersCoordsPerTrack[] = [];\n\n  const markerEventHandlers: MarkerEventHandlersMap = {};\n  const trackEventHandlers: TrackEventHandlersMap = {};\n\n  const tracksConfig: (TrackAtomProps & { markers: MarkerAtomProps[] })[] = [];\n  const icons: Array<[ReactElement, string]> = [];\n\n  Children.forEach(children, (track, trackIndex) => {\n    if (isSlot(track, TrackAtom)) {\n      markersPerTrack[trackIndex] = [];\n\n      trackEventHandlers[trackIndex] = {\n        onMouseEnter: track.props.onMouseEnter,\n      };\n\n      const markersByTrackConfig: MarkerAtomProps[] = [];\n      Children.forEach(track.props.children, (marker) => {\n        if (isSlot(marker, MarkerAtom)) {\n          let markerAtomCoords: MarkerCoords;\n          markersByTrackConfig.push(marker.props);\n\n          const { textOverflow, content, x, width } = marker.props;\n\n          if (marker.props.width === 0) {\n            markerAtomCoords = calculateValueMarkerCoordinates(\n              content,\n              x,\n              trackWidth,\n            );\n          } else {\n            markerAtomCoords = calculateRangeMarkerCoordinates(\n              content,\n              x,\n              width,\n              trackWidth,\n              textOverflow,\n            );\n          }\n\n          markerEventHandlers[`${trackIndex}_${markerAtomCoords.join('_')}`] = {\n            onMouseEnter: marker.props.onMouseEnter,\n            onMouseMove: marker.props.onMouseMove,\n            onMouseLeave: marker.props.onMouseLeave,\n            onClick: marker.props.onClick,\n          };\n\n          markersPerTrack[trackIndex].push(markerAtomCoords);\n          if (isElement(marker.props.content)) {\n            const markerColor = getTokenComputedStyle(marker.props.color);\n            const lightTextColor = getColorTokenDefaultValue(\n              Colors.Text.Neutral.OnAccent.Default,\n            );\n            const darkTextColor = getColorTokenDefaultValue(\n              Colors.Text.Neutral.Default,\n            );\n            const contrastTextColor = getColorByContrast(\n              markerColor,\n              lightTextColor,\n              darkTextColor,\n            );\n\n            icons.push([marker.props.content, contrastTextColor]);\n          }\n        }\n      });\n\n      tracksConfig.push({ ...track.props, markers: markersByTrackConfig });\n    }\n  });\n\n  return {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAmD;AAC5D,SAAS,iBAAiB;AAE1B,OAAO,YAAY;AAEnB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AASnB,SAAS,uBACd,UACA,YACA;AACA,QAAM,kBAA2C,CAAC;AAElD,QAAM,sBAA8C,CAAC;AACrD,QAAM,qBAA4C,CAAC;AAEnD,QAAM,eAAoE,CAAC;AAC3E,QAAM,QAAuC,CAAC;AAE9C,WAAS,QAAQ,UAAU,CAAC,OAAO,eAAe;AAChD,QAAI,OAAO,OAAO,SAAS,GAAG;AAC5B,sBAAgB,UAAU,IAAI,CAAC;AAE/B,yBAAmB,UAAU,IAAI;AAAA,QAC/B,cAAc,MAAM,MAAM;AAAA,MAC5B;AAEA,YAAM,uBAA0C,CAAC;AACjD,eAAS,QAAQ,MAAM,MAAM,UAAU,CAAC,WAAW;AACjD,YAAI,OAAO,QAAQ,UAAU,GAAG;AAC9B,cAAI;AACJ,+BAAqB,KAAK,OAAO,KAAK;AAEtC,gBAAM,EAAE,cAAc,SAAS,GAAG,MAAM,IAAI,OAAO;AAEnD,cAAI,OAAO,MAAM,UAAU,GAAG;AAC5B,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF,OAAO;AACL,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF;AAEA,8BAAoB,GAAG,UAAU,IAAI,iBAAiB,KAAK,GAAG,CAAC,EAAE,IAAI;AAAA,YACnE,cAAc,OAAO,MAAM;AAAA,YAC3B,aAAa,OAAO,MAAM;AAAA,YAC1B,cAAc,OAAO,MAAM;AAAA,YAC3B,SAAS,OAAO,MAAM;AAAA,UACxB;AAEA,0BAAgB,UAAU,EAAE,KAAK,gBAAgB;AACjD,cAAI,UAAU,OAAO,MAAM,OAAO,GAAG;AACnC,kBAAM,cAAc,sBAAsB,OAAO,MAAM,KAAK;AAC5D,kBAAM,iBAAiB;AAAA,cACrB,OAAO,KAAK,QAAQ,SAAS;AAAA,YAC/B;AACA,kBAAM,gBAAgB;AAAA,cACpB,OAAO,KAAK,QAAQ;AAAA,YACtB;AACA,kBAAM,oBAAoB;AAAA,cACxB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAEA,kBAAM,KAAK,CAAC,OAAO,MAAM,SAAS,iBAAiB,CAAC;AAAA,UACtD;AAAA,QACF;AAAA,MACF,CAAC;AAED,mBAAa,KAAK,EAAE,GAAG,MAAM,OAAO,SAAS,qBAAqB,CAAC;AAAA,IACrE;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { Children, type ReactElement, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { calculateRangeMarkerCoordinates } from './calculate-expand-marker-coordinates.js';\nimport { resolveValueMarkerHitArea } from './resolve-value-marker-hit-area.js';\nimport { isSlot } from '../../../../../core/utils/is-slot.js';\nimport {\n  getColorByContrast,\n  getColorTokenDefaultValue,\n} from '../../../utils/color-contrast.js';\nimport { getTokenComputedStyle } from '../../../utils/getTokenComputedStyle.js';\nimport { VALUE_MARKER_WIDTH } from '../components/canvas/renderers/value-marker-renderer/constants.js';\nimport { calculateMarkerWidthAndContent } from '../components/canvas/utils/calculate-marker-width-and-content.js';\nimport { MarkerAtom } from '../slots/MarkerAtom.js';\nimport { TrackAtom } from '../slots/TrackAtom.js';\nimport {\n  MarkerEventHandlersMap,\n  TrackEventHandlersMap,\n} from '../types/event-handlers.js';\nimport { MarkerCoords, MarkersCoordsPerTrack } from '../types/marker-coords.js';\nimport { MarkerAtomProps } from '../types/marker.js';\nimport { TrackAtomProps } from '../types/track.js';\n\nexport function aggregateMarkersCoords(\n  children: ReactNode,\n  trackWidth: number,\n) {\n  const markersPerTrack: MarkersCoordsPerTrack[] = [];\n\n  const markerEventHandlers: MarkerEventHandlersMap = {};\n  const trackEventHandlers: TrackEventHandlersMap = {};\n\n  const tracksConfig: (TrackAtomProps & { markers: MarkerAtomProps[] })[] = [];\n  const icons: Array<[ReactElement, string]> = [];\n\n  Children.forEach(children, (track, trackIndex) => {\n    if (isSlot(track, TrackAtom)) {\n      markersPerTrack[trackIndex] = [];\n\n      trackEventHandlers[trackIndex] = {\n        onMouseEnter: track.props.onMouseEnter,\n      };\n\n      const markersByTrackConfig: MarkerAtomProps[] = [];\n      Children.forEach(track.props.children, (marker) => {\n        if (isSlot(marker, MarkerAtom)) {\n          let markerAtomCoords: MarkerCoords;\n          markersByTrackConfig.push(marker.props);\n\n          const { textOverflow, content, x, width } = marker.props;\n\n          if (marker.props.width === 0) {\n            const {\n              calculatedX,\n              calculatedMarkerWidth,\n              valueMarkerOrientation,\n            } = calculateMarkerWidthAndContent({\n              trackWidth,\n              trackLeftBoundary: 0,\n              content,\n              width: VALUE_MARKER_WIDTH,\n              x,\n              isRange: false,\n              textOverflow,\n              truncateMode: marker.props.truncateMode,\n            });\n            markerAtomCoords = resolveValueMarkerHitArea(\n              calculatedX,\n              calculatedMarkerWidth,\n              valueMarkerOrientation,\n            );\n          } else {\n            markerAtomCoords = calculateRangeMarkerCoordinates(\n              content,\n              x,\n              width,\n              trackWidth,\n              textOverflow,\n            );\n          }\n\n          markerEventHandlers[`${trackIndex}_${markerAtomCoords.join('_')}`] = {\n            onMouseEnter: marker.props.onMouseEnter,\n            onMouseMove: marker.props.onMouseMove,\n            onMouseLeave: marker.props.onMouseLeave,\n            onClick: marker.props.onClick,\n          };\n\n          markersPerTrack[trackIndex].push(markerAtomCoords);\n          if (isElement(marker.props.content)) {\n            const markerColor = getTokenComputedStyle(marker.props.color);\n            const lightTextColor = getColorTokenDefaultValue(\n              Colors.Text.Neutral.OnAccent.Default,\n            );\n            const darkTextColor = getColorTokenDefaultValue(\n              Colors.Text.Neutral.Default,\n            );\n            const contrastTextColor = getColorByContrast(\n              markerColor,\n              lightTextColor,\n              darkTextColor,\n            );\n\n            icons.push([marker.props.content, contrastTextColor]);\n          }\n        }\n      });\n\n      tracksConfig.push({ ...track.props, markers: markersByTrackConfig });\n    }\n  });\n\n  return {\n    markersPerTrack,\n    markerEventHandlers,\n    trackEventHandlers,\n    icons,\n    tracksConfig,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAmD;AAC5D,SAAS,iBAAiB;AAE1B,OAAO,YAAY;AAEnB,SAAS,uCAAuC;AAChD,SAAS,iCAAiC;AAC1C,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,0BAA0B;AACnC,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AASnB,SAAS,uBACd,UACA,YACA;AACA,QAAM,kBAA2C,CAAC;AAElD,QAAM,sBAA8C,CAAC;AACrD,QAAM,qBAA4C,CAAC;AAEnD,QAAM,eAAoE,CAAC;AAC3E,QAAM,QAAuC,CAAC;AAE9C,WAAS,QAAQ,UAAU,CAAC,OAAO,eAAe;AAChD,QAAI,OAAO,OAAO,SAAS,GAAG;AAC5B,sBAAgB,UAAU,IAAI,CAAC;AAE/B,yBAAmB,UAAU,IAAI;AAAA,QAC/B,cAAc,MAAM,MAAM;AAAA,MAC5B;AAEA,YAAM,uBAA0C,CAAC;AACjD,eAAS,QAAQ,MAAM,MAAM,UAAU,CAAC,WAAW;AACjD,YAAI,OAAO,QAAQ,UAAU,GAAG;AAC9B,cAAI;AACJ,+BAAqB,KAAK,OAAO,KAAK;AAEtC,gBAAM,EAAE,cAAc,SAAS,GAAG,MAAM,IAAI,OAAO;AAEnD,cAAI,OAAO,MAAM,UAAU,GAAG;AAC5B,kBAAM;AAAA,cACJ;AAAA,cACA;AAAA,cACA;AAAA,YACF,IAAI,+BAA+B;AAAA,cACjC;AAAA,cACA,mBAAmB;AAAA,cACnB;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,cAAc,OAAO,MAAM;AAAA,YAC7B,CAAC;AACD,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF,OAAO;AACL,+BAAmB;AAAA,cACjB;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,UACF;AAEA,8BAAoB,GAAG,UAAU,IAAI,iBAAiB,KAAK,GAAG,CAAC,EAAE,IAAI;AAAA,YACnE,cAAc,OAAO,MAAM;AAAA,YAC3B,aAAa,OAAO,MAAM;AAAA,YAC1B,cAAc,OAAO,MAAM;AAAA,YAC3B,SAAS,OAAO,MAAM;AAAA,UACxB;AAEA,0BAAgB,UAAU,EAAE,KAAK,gBAAgB;AACjD,cAAI,UAAU,OAAO,MAAM,OAAO,GAAG;AACnC,kBAAM,cAAc,sBAAsB,OAAO,MAAM,KAAK;AAC5D,kBAAM,iBAAiB;AAAA,cACrB,OAAO,KAAK,QAAQ,SAAS;AAAA,YAC/B;AACA,kBAAM,gBAAgB;AAAA,cACpB,OAAO,KAAK,QAAQ;AAAA,YACtB;AACA,kBAAM,oBAAoB;AAAA,cACxB;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAEA,kBAAM,KAAK,CAAC,OAAO,MAAM,SAAS,iBAAiB,CAAC;AAAA,UACtD;AAAA,QACF;AAAA,MACF,CAAC;AAED,mBAAa,KAAK,EAAE,GAAG,MAAM,OAAO,SAAS,qBAAqB,CAAC;AAAA,IACrE;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/utils/resolve-value-marker-hit-area.js

@@ -0,0 +1,14 @@
+function resolveValueMarkerHitArea(calculatedX, calculatedMarkerWidth, orientation) {
+  if (orientation === "right") {
+    return [calculatedX - calculatedMarkerWidth, calculatedX];
+  }
+  if (orientation === "left") {
+    return [calculatedX, calculatedX + calculatedMarkerWidth];
+  }
+  const half = calculatedMarkerWidth / 2;
+  return [calculatedX - half, calculatedX + half];
+}
+export {
+  resolveValueMarkerHitArea
+};
+//# sourceMappingURL=resolve-value-marker-hit-area.js.map

package/esm/charts/core/components/annotations/utils/resolve-value-marker-hit-area.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/annotations/utils/resolve-value-marker-hit-area.ts"],
+  "sourcesContent": ["import type { ValueMarkerPointerPosition } from '../components/canvas/renderers/value-marker-renderer/types.js';\nimport type { MarkerCoords } from '../types/marker-coords.js';\n\nexport function resolveValueMarkerHitArea(\n  calculatedX: number,\n  calculatedMarkerWidth: number,\n  orientation: ValueMarkerPointerPosition,\n): MarkerCoords {\n  if (orientation === 'right') {\n    return [calculatedX - calculatedMarkerWidth, calculatedX];\n  }\n  if (orientation === 'left') {\n    return [calculatedX, calculatedX + calculatedMarkerWidth];\n  }\n  const half = calculatedMarkerWidth / 2;\n  return [calculatedX - half, calculatedX + half];\n}\n"],
+  "mappings": "AAGO,SAAS,0BACd,aACA,uBACA,aACc;AACd,MAAI,gBAAgB,SAAS;AAC3B,WAAO,CAAC,cAAc,uBAAuB,WAAW;AAAA,EAC1D;AACA,MAAI,gBAAgB,QAAQ;AAC1B,WAAO,CAAC,aAAa,cAAc,qBAAqB;AAAA,EAC1D;AACA,QAAM,OAAO,wBAAwB;AACrC,SAAO,CAAC,cAAc,MAAM,cAAc,IAAI;AAChD;",
+  "names": []
+}

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

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

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

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { Axis as VisxAxis } from "@visx/axis";
 import { axis } from "./Axis.sty.js";
+import { AxisPrimitive } from "./AxisPrimitive.js";
 import {
-  AXIS_TICK_LENGTH,
   axisFontBaseProps,
   axisFontProps,
   DEFAULT_AXIS_FONT_COLOR
@@ -50,14 +49,11 @@ const Axis = ({
       role: restProps.role,
       "aria-label": restProps["aria-label"] ?? void 0,
       children: /* @__PURE__ */ jsx(
-        VisxAxis,
+        AxisPrimitive,
         {
           label: truncatedLabel,
           labelProps: size === "small" ? labelProps : labelBaseProps,
           tickLabelProps: defaultTickLabelProps,
-          tickLength: AXIS_TICK_LENGTH,
-          hideTicks: true,
-          hideAxisLine: true,
           ...restProps
         }
       )

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\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;",
+  "sourcesContent": ["import { axis } from './Axis.sty.js';\nimport { AxisPrimitive } from './AxisPrimitive.js';\nimport {\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      <AxisPrimitive\n        label={truncatedLabel}\n        labelProps={size === 'small' ? labelProps : labelBaseProps}\n        tickLabelProps={defaultTickLabelProps}\n        {...restProps}\n      />\n    </svg>\n  );\n};\nAxis['displayName'] = 'Axis';\n"],
+  "mappings": "AAqEM;AArEN,SAAS,YAAY;AACrB,SAAS,qBAAqB;AAC9B;AAAA,EACE;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,UACf,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-7-1";
+var axis = "_90oaxp0-3-8-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-7-1';"],
+  "sourcesContent": ["import './Axis.css';\nexport var axis = '_90oaxp0-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,OAAO;",
   "names": []
 }

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

@@ -0,0 +1,203 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getTickValueAsNumber } from "../../../../core/utils/get-tick-value-as-number.js";
+import { getTicks } from "../../../../core/utils/get-ticks.js";
+const TICK_LABEL_FONT_SIZE = 10;
+const SVG_OVERFLOW_STYLE = { overflow: "visible" };
+const defaultTextProps = {
+  textAnchor: "middle",
+  fontFamily: "Arial",
+  fontSize: 10,
+  fill: "#222"
+};
+function getStartDy(verticalAnchor) {
+  if (verticalAnchor === "start") {
+    return "0.71em";
+  }
+  if (verticalAnchor === "middle") {
+    return "0.355em";
+  }
+  return "0";
+}
+function getTickPosition(scale) {
+  const s = scale;
+  if ("bandwidth" in s) {
+    let offset = s.bandwidth();
+    offset /= 2;
+    if (s.round()) {
+      offset = Math.round(offset);
+    }
+    return (d) => {
+      const scaledValue = s(d);
+      return typeof scaledValue === "number" ? scaledValue + offset : scaledValue;
+    };
+  }
+  return scale;
+}
+function getTickFormatter(scale) {
+  const s = scale;
+  if ("tickFormat" in s) {
+    return s.tickFormat();
+  }
+  return String;
+}
+function createHorizontalPoint(coords) {
+  return coords;
+}
+function createVerticalPoint(coords) {
+  return { x: coords.y, y: coords.x };
+}
+function getLabelTransform({
+  labelOffset,
+  labelProps,
+  orientation,
+  range
+}) {
+  const sign = orientation === "left" || orientation === "top" ? -1 : 1;
+  if (orientation === "top" || orientation === "bottom") {
+    const yBottomOffset = orientation === "bottom" && typeof labelProps.fontSize === "number" ? labelProps.fontSize : 0;
+    return {
+      x: (Number(range[0]) + Number(range[range.length - 1])) / 2,
+      y: sign * (labelOffset + TICK_LABEL_FONT_SIZE + yBottomOffset),
+      transform: void 0
+    };
+  }
+  return {
+    x: sign * ((Number(range[0]) + Number(range[range.length - 1])) / 2),
+    y: -labelOffset,
+    transform: `rotate(${sign * 90})`
+  };
+}
+function AxisPrimitive({
+  scale,
+  orientation = "bottom",
+  tickComponent,
+  tickLabelProps,
+  tickFormat,
+  numTicks = 10,
+  tickValues,
+  hideZero = false,
+  label = "",
+  labelClassName,
+  labelOffset = 14,
+  labelProps,
+  left = 0,
+  top: topOffset = 0,
+  axisClassName,
+  innerRef
+}) {
+  const isTop = orientation === "top";
+  const horizontal = isTop || orientation === "bottom";
+  const tickPosition = getTickPosition(scale);
+  const format = tickFormat ?? getTickFormatter(scale);
+  const filteredTickValues = (tickValues ?? getTicks(scale, numTicks)).filter(
+    (value) => !hideZero || value !== 0 && value !== "0"
+  ).map((value, index) => ({ value, index }));
+  const pointCreator = horizontal ? createHorizontalPoint : createVerticalPoint;
+  const ticks = filteredTickValues.map(
+    ({ value, index }) => {
+      const scaledValue = getTickValueAsNumber(tickPosition(value));
+      return {
+        value,
+        index,
+        to: pointCreator({ x: scaledValue, y: 0 }),
+        formattedValue: format(
+          value,
+          index,
+          filteredTickValues
+        )
+      };
+    }
+  );
+  const tickLabelPropsDefault = {
+    ...defaultTextProps,
+    ...typeof tickLabelProps === "object" ? tickLabelProps : null
+  };
+  const allTickLabelProps = ticks.map(
+    ({ value, index }) => typeof tickLabelProps === "function" ? tickLabelProps(value, index, filteredTickValues) : tickLabelPropsDefault
+  );
+  const combinedLabelProps = { ...defaultTextProps, ...labelProps };
+  const labelTransform = label ? getLabelTransform({
+    labelOffset,
+    labelProps: combinedLabelProps,
+    orientation,
+    range: scale.range()
+  }) : void 0;
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: axisClassName ? `visx-axis ${axisClassName}` : "visx-axis",
+      ref: innerRef,
+      transform: `translate(${left}, ${topOffset})`,
+      children: [
+        ticks.map(({ value, index, to, formattedValue }) => {
+          const currentTickLabelProps = allTickLabelProps[index] ?? {};
+          const tickYCoord = to.y + (horizontal && orientation !== "top" ? TICK_LABEL_FONT_SIZE : 0);
+          const effectiveX = currentTickLabelProps.x ?? to.x;
+          const effectiveY = currentTickLabelProps.y ?? tickYCoord;
+          const dxOffset = currentTickLabelProps.dx ?? 0;
+          const dyOffset = currentTickLabelProps.dy ?? 0;
+          const startDy = getStartDy(
+            currentTickLabelProps.verticalAnchor ?? "end"
+          );
+          const tickAngle = currentTickLabelProps.angle;
+          const tickTransform = tickAngle ? `rotate(${tickAngle}, ${effectiveX}, ${effectiveY})` : void 0;
+          const defaultTickElement = /* @__PURE__ */ jsx(
+            "svg",
+            {
+              x: dxOffset,
+              y: dyOffset,
+              fontSize: currentTickLabelProps.fontSize,
+              style: SVG_OVERFLOW_STYLE,
+              children: /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: effectiveX,
+                  y: effectiveY,
+                  transform: tickTransform,
+                  textAnchor: currentTickLabelProps.textAnchor,
+                  fontFamily: currentTickLabelProps.fontFamily,
+                  fontSize: currentTickLabelProps.fontSize,
+                  fill: currentTickLabelProps.fill,
+                  children: /* @__PURE__ */ jsx("tspan", { x: effectiveX, dy: startDy, children: formattedValue })
+                }
+              )
+            }
+          );
+          return /* @__PURE__ */ jsx("g", { className: "visx-axis-tick", children: tickComponent ? tickComponent({
+            ...currentTickLabelProps,
+            x: to.x,
+            y: tickYCoord,
+            formattedValue
+          }) : defaultTickElement }, `visx-tick-${value}-${index}`);
+        }),
+        label && labelTransform && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            x: 0,
+            y: 0,
+            fontSize: combinedLabelProps.fontSize,
+            style: SVG_OVERFLOW_STYLE,
+            children: /* @__PURE__ */ jsx(
+              "text",
+              {
+                className: labelClassName ? `visx-axis-label ${labelClassName}` : "visx-axis-label",
+                x: labelTransform.x,
+                y: labelTransform.y,
+                transform: labelTransform.transform,
+                textAnchor: combinedLabelProps.textAnchor,
+                fontFamily: combinedLabelProps.fontFamily,
+                fontSize: combinedLabelProps.fontSize,
+                fill: combinedLabelProps.fill,
+                children: /* @__PURE__ */ jsx("tspan", { x: labelTransform.x, dy: "0", children: label })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AxisPrimitive
+};
+//# sourceMappingURL=AxisPrimitive.js.map