@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/charts/core/components/chart-layout/components/styles.css

@@ -1,46 +1,46 @@
-._l1klj80-3-7-0 {
+._l1klj80-3-8-0 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-7-0 {
+._l1klj81-3-8-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-7-0 {
+._l1klj83-3-8-0 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-7-0 {
+._l1klj84-3-8-0 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-7-0 {
+._l1klj85-3-8-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-7-0 {
+._l1klj86-3-8-0 {
   height: 100%;
 }
-._l1klj87-3-7-0 {
+._l1klj87-3-8-0 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-7-0 {
+._l1klj88-3-8-0 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-7-0 {
+._l1klj89-3-8-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-7-0 {
+._l1klj8a-3-8-0 {
   background: var(--dt-colors-border-neutral-default, #dadbe4);
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border-radius: var(--dt-spacings-size-8, 8px);
   touch-action: none;
 }
-._l1klj8a-3-7-0:hover {
+._l1klj8a-3-8-0:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-7-0 {
+._l1klj8b-3-8-0 {
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 36px;
   width: 2px;
@@ -49,11 +49,11 @@
   grid-area: horizontalResize;
   align-self: center;
 }
-._l1klj8b-3-7-0:hover {
+._l1klj8b-3-8-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-7-0 {
+._l1klj8c-3-8-0 {
   transition: width var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   height: 2px;
   width: 36px;
@@ -62,7 +62,7 @@
   grid-area: verticalResize;
   align-self: flex-end;
 }
-._l1klj8c-3-7-0:hover {
+._l1klj8c-3-8-0:hover {
   width: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }

package/esm/charts/core/components/chart-layout/components/styles.sty.js

@@ -1,9 +1,9 @@
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-7-0", variantClassNames: { loading: { true: "_l1klj81-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-7-0", variantClassNames: { orientation: { horizontal: "_l1klj87-3-7-0", vertical: "_l1klj88-3-7-0" }, loading: { true: "_l1klj89-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-7-0", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-7-0", vertical: "_l1klj8c-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-7-0", variantClassNames: { orientation: { horizontal: "_l1klj83-3-7-0", vertical: "_l1klj84-3-7-0" }, loading: { true: "_l1klj85-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = _7a468({ defaultClassName: "_l1klj80-3-8-0", variantClassNames: { loading: { true: "_l1klj81-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = _7a468({ defaultClassName: "_l1klj86-3-8-0", variantClassNames: { orientation: { horizontal: "_l1klj87-3-8-0", vertical: "_l1klj88-3-8-0" }, loading: { true: "_l1klj89-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = _7a468({ defaultClassName: "_l1klj8a-3-8-0", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-8-0", vertical: "_l1klj8c-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = _7a468({ defaultClassName: "_l1klj82-3-8-0", variantClassNames: { orientation: { horizontal: "_l1klj83-3-8-0", vertical: "_l1klj84-3-8-0" }, loading: { true: "_l1klj85-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   graphContainer,
   legendContainer,

package/esm/charts/core/components/chart-layout/components/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/chart-layout/components/styles.css.ts"],
-  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-7-0',variantClassNames:{loading:{true:'_l1klj81-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-7-0',variantClassNames:{orientation:{horizontal:'_l1klj87-3-7-0',vertical:'_l1klj88-3-7-0'},loading:{true:'_l1klj89-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-7-0',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-7-0',vertical:'_l1klj8c-3-7-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-7-0',variantClassNames:{orientation:{horizontal:'_l1klj83-3-7-0',vertical:'_l1klj84-3-7-0'},loading:{true:'_l1klj85-3-7-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var graphContainer = _7a468({defaultClassName:'_l1klj80-3-8-0',variantClassNames:{loading:{true:'_l1klj81-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendContainer = _7a468({defaultClassName:'_l1klj86-3-8-0',variantClassNames:{orientation:{horizontal:'_l1klj87-3-8-0',vertical:'_l1klj88-3-8-0'},loading:{true:'_l1klj89-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var legendResizeLine = _7a468({defaultClassName:'_l1klj8a-3-8-0',variantClassNames:{orientation:{horizontal:'_l1klj8b-3-8-0',vertical:'_l1klj8c-3-8-0'}},defaultVariants:{},compoundVariants:[]});\nexport var resizeContainer = _7a468({defaultClassName:'_l1klj82-3-8-0',variantClassNames:{orientation:{horizontal:'_l1klj83-3-8-0',vertical:'_l1klj84-3-8-0'},loading:{true:'_l1klj85-3-8-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1J,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,YAAW,kBAAiB,UAAS,iBAAgB,GAAE,SAAQ,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC/N,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,YAAW,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAChM,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,YAAW,kBAAiB,UAAS,iBAAgB,GAAE,SAAQ,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/chart-states/ChartState.css

@@ -1,16 +1,16 @@
-._4pqs4v0-3-7-0 {
+._4pqs4v0-3-8-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v1-3-7-0 {
+._4pqs4v1-3-8-0 {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._4pqs4v2-3-7-0 {
+._4pqs4v2-3-8-0 {
   align-items: center;
   justify-content: center;
 }
-._4pqs4v3-3-7-0 {
+._4pqs4v3-3-8-0 {
   position: relative;
   width: 100%;
 }

package/esm/charts/core/components/chart-states/ChartState.sty.js

@@ -1,8 +1,8 @@
 import "./ChartState.css";
-var container = "_4pqs4v3-3-7-0";
-var emptyText = "_4pqs4v1-3-7-0";
-var errorText = "_4pqs4v0-3-7-0";
-var wrapper = "_4pqs4v2-3-7-0";
+var container = "_4pqs4v3-3-8-0";
+var emptyText = "_4pqs4v1-3-8-0";
+var errorText = "_4pqs4v0-3-8-0";
+var wrapper = "_4pqs4v2-3-8-0";
 export {
   container,
   emptyText,

package/esm/charts/core/components/chart-states/ChartState.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/chart-states/ChartState.css.ts"],
-  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-7-0';\nexport var emptyText = '_4pqs4v1-3-7-0';\nexport var errorText = '_4pqs4v0-3-7-0';\nexport var wrapper = '_4pqs4v2-3-7-0';"],
+  "sourcesContent": ["import './ChartState.css';\nexport var container = '_4pqs4v3-3-8-0';\nexport var emptyText = '_4pqs4v1-3-8-0';\nexport var errorText = '_4pqs4v0-3-8-0';\nexport var wrapper = '_4pqs4v2-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,UAAU;",
   "names": []
 }

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

@@ -1,5 +1,4 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Line } from "@visx/shape";
 import { inRange } from "lodash-es";
 import Colors from "@dynatrace/strato-design-tokens/colors";
 import { LeftMagnifier } from "./components/LeftMagnifier.js";
@@ -26,15 +25,18 @@ const HorizontalCrosshair = (props) => {
   const isInRange = inRange(y, 0, height + 1);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isInRange && /* @__PURE__ */ jsx(
-      Line,
+      "line",
       {
         role: "graphics-symbol",
         "aria-label": "crosshair",
-        from,
-        to,
+        x1: from.x,
+        y1: from.y,
+        x2: to.x,
+        y2: to.y,
         stroke: Colors.Border.Neutral.Accent,
         strokeWidth,
         strokeDasharray: lineStrokeDasharray,
+        shapeRendering: "crispEdges",
         pointerEvents: "none"
       }
     ),

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          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;",
+  "sourcesContent": ["import { 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          x1={from.x}\n          y1={from.y}\n          x2={to.x}\n          y2={to.y}\n          stroke={Colors.Border.Neutral.Accent}\n          strokeWidth={strokeWidth}\n          strokeDasharray={lineStrokeDasharray}\n          shapeRendering=\"crispEdges\"\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": "AAuDI,mBAEI,KAFJ;AAvDJ,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,IAAI,KAAK;AAAA,QACT,IAAI,KAAK;AAAA,QACT,IAAI,GAAG;AAAA,QACP,IAAI,GAAG;AAAA,QACP,QAAQ,OAAO,OAAO,QAAQ;AAAA,QAC9B;AAAA,QACA,iBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,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

@@ -1,5 +1,4 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Line } from "@visx/shape";
 import { inRange } from "lodash-es";
 import { forwardRef } from "react";
 import Colors from "@dynatrace/strato-design-tokens/colors";
@@ -35,16 +34,19 @@ const VerticalCrosshair = forwardRef((props, ref) => {
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     isInRange && /* @__PURE__ */ jsx(
-      Line,
+      "line",
       {
         role: "graphics-symbol",
         "aria-label": "crosshair",
-        innerRef: ref,
-        from,
-        to,
+        ref,
+        x1: from.x,
+        y1: from.y,
+        x2: to.x,
+        y2: to.y,
         stroke: color,
         strokeWidth,
         strokeDasharray: lineStrokeDasharray,
+        shapeRendering: "crispEdges",
         pointerEvents: "none",
         tabIndex: focusable ? 0 : -1,
         onKeyDown

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          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;",
+  "sourcesContent": ["import { 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          ref={ref}\n          x1={from.x}\n          y1={from.y}\n          x2={to.x}\n          y2={to.y}\n          stroke={color}\n          strokeWidth={strokeWidth}\n          strokeDasharray={lineStrokeDasharray}\n          shapeRendering=\"crispEdges\"\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": "AA6EI,mBAEI,KAFJ;AA7EJ,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;AAAA,QACA,IAAI,KAAK;AAAA,QACT,IAAI,KAAK;AAAA,QACT,IAAI,GAAG;AAAA,QACP,IAAI,GAAG;AAAA,QACP,QAAQ;AAAA,QACR;AAAA,QACA,iBAAiB;AAAA,QACjB,gBAAe;AAAA,QACf,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/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-7-0 {
+._nm3s3e0-3-8-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-7-0 {
+._nm3s3e1-3-8-0 {
   margin-left: -2px;
 }
-._nm3s3e2-3-7-0 {
+._nm3s3e2-3-8-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-7-0 {
+._nm3s3e3-3-8-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-7-0 {
+._nm3s3e4-3-8-0 {
   margin-top: -2px;
 }
-._nm3s3e5-3-7-0 {
+._nm3s3e5-3-8-0 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-7-0 {
+._nm3s3e6-3-8-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-7-0";
-var left = "_nm3s3e1-3-7-0";
-var magnifier = "_nm3s3e0-3-7-0";
+var bottom = "_nm3s3e3-3-8-0";
+var left = "_nm3s3e1-3-8-0";
+var magnifier = "_nm3s3e0-3-8-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-7-0";
-var rotatedBottomStyle = "_nm3s3e6-3-7-0";
-var rotatedTopStyle = "_nm3s3e5-3-7-0";
-var top = "_nm3s3e4-3-7-0";
+var right = "_nm3s3e2-3-8-0";
+var rotatedBottomStyle = "_nm3s3e6-3-8-0";
+var rotatedTopStyle = "_nm3s3e5-3-8-0";
+var top = "_nm3s3e4-3-8-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-7-0';\nexport var left = '_nm3s3e1-3-7-0';\nexport var magnifier = '_nm3s3e0-3-7-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-7-0';\nexport var rotatedBottomStyle = '_nm3s3e6-3-7-0';\nexport var rotatedTopStyle = '_nm3s3e5-3-7-0';\nexport var top = '_nm3s3e4-3-7-0';"],
+  "sourcesContent": ["import './Magnifier.css';\nexport var bottom = '_nm3s3e3-3-8-0';\nexport var left = '_nm3s3e1-3-8-0';\nexport var magnifier = '_nm3s3e0-3-8-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-8-0';\nexport var rotatedBottomStyle = '_nm3s3e6-3-8-0';\nexport var rotatedTopStyle = '_nm3s3e5-3-8-0';\nexport var top = '_nm3s3e4-3-8-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/grid/Grid.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Group } from "@visx/group";
 import { GridColumns } from "../../../core/components/grid/GridColumns.js";
 import { GridRows } from "../../../core/components/grid/GridRows.js";
 import {
@@ -28,11 +27,10 @@ function Grid({
   const autoNumTicks = getHorizontalNumTicks(width);
   const xNumTicks = xCategoryOffset !== void 0 && isBandScale(xScale) ? xScale.domain().length : autoNumTicks;
   const yNumTicks = yCategoryOffset !== void 0 && isBandScale(yScale) ? yScale.domain().length : numTicksRows;
-  return /* @__PURE__ */ jsxs(Group, { children: [
+  return /* @__PURE__ */ jsxs("g", { children: [
     /* @__PURE__ */ jsx(
       GridColumns,
       {
-        width,
         height,
         scale: xScale,
         numTicks: xNumTicks,
@@ -45,7 +43,6 @@ function Grid({
       GridRows,
       {
         width,
-        height,
         scale: yScale,
         numTicks: yNumTicks,
         highlightZeroLine: highlightZeroLine.horizontal,

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';\nimport { isBandScale } from '../../utils/detect-scale.js';\n\nexport type GridProps = VisxGridProps<AnyScale, AnyScale> & {\n  highlightZeroLine?: {\n    horizontal?: boolean;\n    vertical?: boolean;\n  };\n  xTicks?: number[];\n  yTicks?: number[];\n  xCategoryOffset?: number;\n  yCategoryOffset?: 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  xCategoryOffset,\n  yCategoryOffset,\n}: GridProps) {\n  const numTicksRows = getVerticalNumTicks(height);\n  const autoNumTicks = getHorizontalNumTicks(width);\n\n  const xNumTicks =\n    xCategoryOffset !== undefined && isBandScale(xScale)\n      ? xScale.domain().length\n      : autoNumTicks;\n\n  const yNumTicks =\n    yCategoryOffset !== undefined && isBandScale(yScale)\n      ? yScale.domain().length\n      : numTicksRows;\n\n  return (\n    <Group>\n      <GridColumns\n        width={width}\n        height={height}\n        scale={xScale}\n        numTicks={xNumTicks}\n        highlightZeroLine={highlightZeroLine.vertical}\n        ticks={xTicks}\n        offset={xCategoryOffset}\n      />\n      <GridRows\n        width={width}\n        height={height}\n        scale={yScale}\n        numTicks={yNumTicks}\n        highlightZeroLine={highlightZeroLine.horizontal}\n        ticks={yTicks}\n        offset={yCategoryOffset}\n      />\n    </Group>\n  );\n}\n"],
-  "mappings": "AAwDI,SACE,KADF;AAvDJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAY5B,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;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,eAAe,oBAAoB,MAAM;AAC/C,QAAM,eAAe,sBAAsB,KAAK;AAEhD,QAAM,YACJ,oBAAoB,UAAa,YAAY,MAAM,IAC/C,OAAO,OAAO,EAAE,SAChB;AAEN,QAAM,YACJ,oBAAoB,UAAa,YAAY,MAAM,IAC/C,OAAO,OAAO,EAAE,SAChB;AAEN,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,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import { 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';\nimport { isBandScale } from '../../utils/detect-scale.js';\n\nexport type GridProps = {\n  width: number;\n  height: number;\n  xScale: AnyScale;\n  yScale: AnyScale;\n  highlightZeroLine?: {\n    horizontal?: boolean;\n    vertical?: boolean;\n  };\n  xTicks?: number[];\n  yTicks?: number[];\n  xCategoryOffset?: number;\n  yCategoryOffset?: 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  xCategoryOffset,\n  yCategoryOffset,\n}: GridProps) {\n  const numTicksRows = getVerticalNumTicks(height);\n  const autoNumTicks = getHorizontalNumTicks(width);\n\n  const xNumTicks =\n    xCategoryOffset !== undefined && isBandScale(xScale)\n      ? xScale.domain().length\n      : autoNumTicks;\n\n  const yNumTicks =\n    yCategoryOffset !== undefined && isBandScale(yScale)\n      ? yScale.domain().length\n      : numTicksRows;\n\n  return (\n    <g>\n      <GridColumns\n        height={height}\n        scale={xScale}\n        numTicks={xNumTicks}\n        highlightZeroLine={highlightZeroLine.vertical}\n        ticks={xTicks}\n        offset={xCategoryOffset}\n      />\n      <GridRows\n        width={width}\n        scale={yScale}\n        numTicks={yNumTicks}\n        highlightZeroLine={highlightZeroLine.horizontal}\n        ticks={yTicks}\n        offset={yCategoryOffset}\n      />\n    </g>\n  );\n}\n"],
+  "mappings": "AAyDI,SACE,KADF;AAzDJ,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAgB5B,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;AAAA,EACA;AAAA,EACA;AACF,GAAc;AACZ,QAAM,eAAe,oBAAoB,MAAM;AAC/C,QAAM,eAAe,sBAAsB,KAAK;AAEhD,QAAM,YACJ,oBAAoB,UAAa,YAAY,MAAM,IAC/C,OAAO,OAAO,EAAE,SAChB;AAEN,QAAM,YACJ,oBAAoB,UAAa,YAAY,MAAM,IAC/C,OAAO,OAAO,EAAE,SAChB;AAEN,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,UAAU;AAAA,QACV,mBAAmB,kBAAkB;AAAA,QACrC,OAAO;AAAA,QACP,QAAQ;AAAA;AAAA,IACV;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -1,19 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import { GridColumns as VisxGridColumns } from "@visx/grid";
 import { GridLines } from "./GridLines.js";
+import { computeGridLines } from "./utils/compute-grid-lines.js";
 import { shouldHighlightZeroLine } from "./utils/should-highlight-zero-line.js";
 import { isBandScale } from "../../utils/detect-scale.js";
 const GridColumns = ({
   scale,
+  height,
+  numTicks,
+  offset,
   highlightZeroLine = true,
-  ticks,
-  ...restProps
+  ticks
 }) => {
   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 },
+      to: { x: Math.max(0, typedScale(tick) ?? 0), y: height },
       index
     }));
     return /* @__PURE__ */ jsx(
@@ -24,13 +26,13 @@ const GridColumns = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(VisxGridColumns, { scale, ...restProps, children: ({ lines }) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     GridLines,
     {
-      lines,
+      lines: computeGridLines(scale, numTicks, offset, height, "x"),
       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  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;",
+  "sourcesContent": ["import { GridLines } from './GridLines.js';\nimport { computeGridLines } from './utils/compute-grid-lines.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  scale: AnyScale;\n  height: number;\n  numTicks?: number;\n  offset?: number;\n  highlightZeroLine?: boolean;\n  ticks?: number[];\n};\n\nexport const GridColumns = ({\n  scale,\n  height,\n  numTicks,\n  offset,\n  highlightZeroLine = true,\n  ticks,\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: 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    <GridLines\n      lines={computeGridLines(scale, numTicks, offset, height, 'x')}\n      highlightAccessor={(from, to) =>\n        highlightZeroLine &&\n        !isBandScale(scale) &&\n        shouldHighlightZeroLine(from, to, scale)\n      }\n    />\n  );\n};\n"],
+  "mappings": "AAgCM;AAhCN,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AAExC,SAAS,mBAAmB;AAWrB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AACF,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,OAAO;AAAA,MACvD;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;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,iBAAiB,OAAO,UAAU,QAAQ,QAAQ,GAAG;AAAA,MAC5D,mBAAmB,CAAC,MAAM,OACxB,qBACA,CAAC,YAAY,KAAK,KAClB,wBAAwB,MAAM,IAAI,KAAK;AAAA;AAAA,EAE3C;AAEJ;",
   "names": []
 }

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

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-import { Line } from "@visx/shape";
 import Colors from "@dynatrace/strato-design-tokens/colors";
 const DEFAULT_STROKE_WIDTH = "1px";
 const DEFAULT_STROKE_COLOR = Colors.Background.Field.Neutral.DefaultActive;
@@ -13,10 +12,12 @@ const GridLine = ({ from, to, highlight = false }) => {
     strokeWidth = HIGHLIGHTED_STROKE_WIDTH;
   }
   return /* @__PURE__ */ jsx(
-    Line,
+    "line",
     {
-      from,
-      to,
+      x1: from.x,
+      y1: from.y,
+      x2: to.x,
+      y2: to.y,
       stroke,
       strokeWidth,
       style: {

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      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;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nexport type GridLines = Array<{\n  from: { x?: number; y?: number };\n  to: { x?: number; y?: number };\n  index: number;\n}>;\n\nexport type GridPointFrom = GridLines[number]['from'];\nexport type GridPointTo = GridLines[number]['to'];\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: GridPointFrom;\n  to: GridPointTo;\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      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      stroke={stroke}\n      strokeWidth={strokeWidth}\n      style={{\n        shapeRendering: 'geometricPrecision',\n      }}\n    />\n  );\n};\n"],
+  "mappings": "AAiCI;AAjCJ,OAAO,YAAY;AAWZ,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,IAAI,KAAK;AAAA,MACT,IAAI,KAAK;AAAA,MACT,IAAI,GAAG;AAAA,MACP,IAAI,GAAG;AAAA,MACP;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACL,gBAAgB;AAAA,MAClB;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/grid/GridLines.tsx"],
-  "sourcesContent": ["import { GridLines as VisxGridLines } from '@visx/grid/lib/types';\n\nimport { GridLine } from './GridLine.js';\n\nexport type GridLinesProps = {\n  lines: VisxGridLines;\n  highlightAccessor?: (\n    from: { x?: number; y?: number },\n    to: { x?: number; y?: number },\n  ) => boolean;\n};\n\nexport const GridLines = ({\n  lines,\n  highlightAccessor = () => false,\n}: GridLinesProps) => (\n  <>\n    {lines.map(({ from, to, index }) => (\n      <GridLine\n        key={`grid-line-${index}`}\n        from={from}\n        to={to}\n        highlight={highlightAccessor(from, to)}\n      />\n    ))}\n  </>\n);\n"],
-  "mappings": "AAgBE,mBAEI,WAFJ;AAdF,SAAS,gBAAgB;AAUlB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,oBAAoB,MAAM;AAC5B,MACE,gCACG,gBAAM,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM,MAC5B;AAAA,EAAC;AAAA;AAAA,IAEC;AAAA,IACA;AAAA,IACA,WAAW,kBAAkB,MAAM,EAAE;AAAA;AAAA,EAHhC,aAAa,KAAK;AAIzB,CACD,GACH;",
+  "sourcesContent": ["import type { GridLines as GridLinesData } from './GridLine.js';\nimport { GridLine } from './GridLine.js';\n\nexport type GridLinesProps = {\n  lines: GridLinesData;\n  highlightAccessor?: (\n    from: { x?: number; y?: number },\n    to: { x?: number; y?: number },\n  ) => boolean;\n};\n\nexport const GridLines = ({\n  lines,\n  highlightAccessor = () => false,\n}: GridLinesProps) => (\n  <>\n    {lines.map(({ from, to, index }) => (\n      <GridLine\n        key={`grid-line-${index}`}\n        from={from}\n        to={to}\n        highlight={highlightAccessor(from, to)}\n      />\n    ))}\n  </>\n);\n"],
+  "mappings": "AAeE,mBAEI,WAFJ;AAdF,SAAS,gBAAgB;AAUlB,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,oBAAoB,MAAM;AAC5B,MACE,gCACG,gBAAM,IAAI,CAAC,EAAE,MAAM,IAAI,MAAM,MAC5B;AAAA,EAAC;AAAA;AAAA,IAEC;AAAA,IACA;AAAA,IACA,WAAW,kBAAkB,MAAM,EAAE;AAAA;AAAA,EAHhC,aAAa,KAAK;AAIzB,CACD,GACH;",
   "names": []
 }

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

@@ -1,19 +1,21 @@
 import { jsx } from "react/jsx-runtime";
-import { GridRows as VisxGridRows } from "@visx/grid";
 import { GridLines } from "./GridLines.js";
+import { computeGridLines } from "./utils/compute-grid-lines.js";
 import { shouldHighlightZeroLine } from "./utils/should-highlight-zero-line.js";
 import { isBandScale } from "../../utils/detect-scale.js";
 const GridRows = ({
   scale,
+  width,
+  numTicks,
+  offset,
   highlightZeroLine = true,
-  ticks,
-  ...restProps
+  ticks
 }) => {
   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) },
+      to: { x: width, y: Math.max(0, typedScale(tick) ?? 0) },
       index
     }));
     return /* @__PURE__ */ jsx(
@@ -24,13 +26,13 @@ const GridRows = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx(VisxGridRows, { scale, ...restProps, children: ({ lines }) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     GridLines,
     {
-      lines,
+      lines: computeGridLines(scale, numTicks, offset, width, "y"),
       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  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;",
+  "sourcesContent": ["import { GridLines } from './GridLines.js';\nimport { computeGridLines } from './utils/compute-grid-lines.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  scale: AnyScale;\n  width: number;\n  numTicks?: number;\n  offset?: number;\n  highlightZeroLine?: boolean;\n  ticks?: number[];\n};\n\nexport const GridRows = ({\n  scale,\n  width,\n  numTicks,\n  offset,\n  highlightZeroLine = true,\n  ticks,\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: 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    <GridLines\n      lines={computeGridLines(scale, numTicks, offset, width, 'y')}\n      highlightAccessor={(from, to) =>\n        highlightZeroLine &&\n        !isBandScale(scale) &&\n        shouldHighlightZeroLine(from, to, scale)\n      }\n    />\n  );\n};\n"],
+  "mappings": "AA+BM;AA/BN,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AAExC,SAAS,mBAAmB;AAWrB,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB;AACF,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,OAAO,GAAG,KAAK,IAAI,GAAG,WAAW,IAAI,KAAK,CAAC,EAAE;AAAA,MACtD;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;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,iBAAiB,OAAO,UAAU,QAAQ,OAAO,GAAG;AAAA,MAC3D,mBAAmB,CAAC,MAAM,OACxB,qBACA,CAAC,YAAY,KAAK,KAClB,wBAAwB,MAAM,IAAI,KAAK;AAAA;AAAA,EAE3C;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/grid/utils/compute-grid-lines.js

@@ -0,0 +1,17 @@
+import { getTicks } from "../../../../../core/utils/get-ticks.js";
+function computeGridLines(scale, numTicks, offset, extent, axis) {
+  const bandwidth = "bandwidth" in scale ? scale.bandwidth() : 0;
+  const scaleOffset = (offset ?? 0) + bandwidth / 2;
+  const resolvedTicks = getTicks(scale, numTicks);
+  return resolvedTicks.map((tick, index) => {
+    const pos = Math.max(
+      0,
+      (scale(tick) ?? 0) + scaleOffset
+    );
+    return axis === "x" ? { from: { x: pos, y: 0 }, to: { x: pos, y: extent }, index } : { from: { x: 0, y: pos }, to: { x: extent, y: pos }, index };
+  });
+}
+export {
+  computeGridLines
+};
+//# sourceMappingURL=compute-grid-lines.js.map

package/esm/charts/core/components/grid/utils/compute-grid-lines.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/core/components/grid/utils/compute-grid-lines.ts"],
+  "sourcesContent": ["import { getTicks, TickValue } from '../../../../../core/utils/get-ticks.js';\nimport type { AnyScale } from '../../../types/scales.js';\nimport type { GridLines } from '../GridLine.js';\n\n/**\n * Computes the line segments for a grid axis by mapping scale ticks to pixel positions.\n *\n * @param scale - The d3 scale for this axis.\n * @param numTicks - Desired tick count hint passed to the scale.\n * @param offset - Additional pixel offset applied to all lines (e.g. band centering from the parent).\n * @param extent - The perpendicular dimension: height for columns (vertical lines), width for rows (horizontal lines).\n * @param axis - Which axis these lines run along. `'x'` produces vertical column lines; `'y'` produces horizontal row lines.\n */\n\ntype ScaleWithTickValue = (tick: TickValue) => number | undefined;\n\nexport function computeGridLines(\n  scale: AnyScale,\n  numTicks: number | undefined,\n  offset: number | undefined,\n  extent: number,\n  axis: 'x' | 'y',\n): GridLines {\n  const bandwidth =\n    'bandwidth' in scale ? (scale as { bandwidth(): number }).bandwidth() : 0;\n  const scaleOffset = (offset ?? 0) + bandwidth / 2;\n  const resolvedTicks = getTicks(scale, numTicks);\n\n  return resolvedTicks.map((tick, index) => {\n    // Math.max(0, ...) prevents negative pixel positions \u2014 consistent with the manual ticks path\n    const pos = Math.max(\n      0,\n      ((scale as ScaleWithTickValue)(tick) ?? 0) + scaleOffset,\n    );\n    return axis === 'x'\n      ? { from: { x: pos, y: 0 }, to: { x: pos, y: extent }, index }\n      : { from: { x: 0, y: pos }, to: { x: extent, y: pos }, index };\n  });\n}\n"],
+  "mappings": "AAAA,SAAS,gBAA2B;AAgB7B,SAAS,iBACd,OACA,UACA,QACA,QACA,MACW;AACX,QAAM,YACJ,eAAe,QAAS,MAAkC,UAAU,IAAI;AAC1E,QAAM,eAAe,UAAU,KAAK,YAAY;AAChD,QAAM,gBAAgB,SAAS,OAAO,QAAQ;AAE9C,SAAO,cAAc,IAAI,CAAC,MAAM,UAAU;AAExC,UAAM,MAAM,KAAK;AAAA,MACf;AAAA,OACE,MAA6B,IAAI,KAAK,KAAK;AAAA,IAC/C;AACA,WAAO,SAAS,MACZ,EAAE,MAAM,EAAE,GAAG,KAAK,GAAG,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,IAC3D,EAAE,MAAM,EAAE,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM;AAAA,EACjE,CAAC;AACH;",
+  "names": []
+}