@dynatrace/strato-components 3.7.1 → 3.9.0

package/charts/core/components/axes/types.d.ts

@@ -1,6 +1,52 @@
-import { AxisScale, SharedAxisProps } from '@visx/axis';
-import type { SVGAttributes } from 'react';
-import { TextProps } from '../../types/text-props.js';
+import type { ReactNode, Ref, SVGAttributes } from 'react';
+import { TextProps, TickLabelProps } from '../../types/text-props.js';
+type NumberLike = {
+    valueOf(): number;
+};
+type AxisScaleOutput = number | NumberLike | undefined;
+type D3ScaleLike<Output> = {
+    (input: any): Output;
+    domain(): any[];
+    range(): any[];
+    copy(): D3ScaleLike<Output>;
+};
+/**
+ * @internal
+ */
+export type AxisScale<Output extends AxisScaleOutput = AxisScaleOutput> = D3ScaleLike<Output>;
+/**
+ * @internal
+ */
+export type TickRendererProps = Partial<TextProps> & {
+    x: number;
+    y: number;
+    formattedValue: string | undefined;
+};
+/**
+ * @internal
+ */
+export interface SharedAxisProps<Scale extends AxisScale> {
+    scale: Scale;
+    orientation?: Orientation;
+    tickFormat?: (value: any, index: number, values: any) => string;
+    tickValues?: readonly any[];
+    numTicks?: number;
+    tickLabelProps?: Partial<TextProps> | TickLabelProps<any>;
+    tickComponent?: (props: TickRendererProps) => ReactNode;
+    label?: string;
+    labelProps?: Partial<TextProps>;
+    labelOffset?: number;
+    labelClassName?: string;
+    rangePadding?: number;
+    hideZero?: boolean;
+    left?: number;
+    top?: number;
+    axisClassName?: string;
+    innerRef?: Ref<SVGGElement>;
+    hideTicks?: boolean;
+    hideAxisLine?: boolean;
+    tickLength?: number;
+}
 /**
  * @internal
  */
@@ -49,3 +95,4 @@ export type TextPropsRequired = Required<Pick<TextProps, 'fill' | 'fontFamily'>>
  * @internal
  */
 export type TickCategory = Record<string, string>;
+export {};

package/charts/core/components/axes/utils/get-tick-label-props.d.ts

@@ -2,30 +2,8 @@ import type { AnyScale } from '../../../types/scales.js';
 import { TickLabelProps } from '../../../types/text-props.js';
 import { TickPrimitiveValue } from '../../../types/tick-value.js';
 import { Orientation, TickLabelLayout } from '../types.js';
-/**
- * Returns tick label props for the bottom axis with domain-aware alignment.
- *
- * Only ticks whose value exactly matches a domain boundary receive edge alignment
- * (`start` for domainMin, `end` for domainMax). All other ticks are center-aligned
- * (`middle`), preventing outermost rendered ticks that don't coincide with domain
- * extremes from being clipped against the chart edge.
- *
- * @param domainMin - domain start as a number (use `+` to convert Date values)
- * @param domainMax - domain end as a number (use `+` to convert Date values)
- */
-export declare const getBottomTickLabelPropsWithDomainAlignment: (domainMin: number, domainMax: number) => TickLabelProps<TickPrimitiveValue>;
 export declare const ELLIPSIS_BUFFER = 2;
-/**
- * Returns tick label props for the top axis with domain-aware alignment.
- *
- * Mirrors `getBottomTickLabelPropsWithDomainAlignment` for the top position:
- * only ticks whose value exactly matches a domain boundary receive edge alignment
- * (`start` for domainMin, `end` for domainMax). All other ticks are center-aligned.
- *
- * @param domainMin - domain start as a number (use `+` to convert Date values)
- * @param domainMax - domain end as a number (use `+` to convert Date values)
- */
-export declare const getTopTickLabelPropsWithDomainAlignment: (domainMin: number, domainMax: number) => TickLabelProps<TickPrimitiveValue>;
+export declare function getYAxisTickLabelProps(position: 'left' | 'right', isCategoricalAxis: boolean, scale: AnyScale | undefined): TickLabelProps<TickPrimitiveValue>;
 export declare const getTickLabelPropsForCategoryAxis: (orientation: Orientation, tickLabelLayout?: TickLabelLayout) => TickLabelProps<TickPrimitiveValue>;
 export declare const bottomTickLabelDateProps: TickLabelProps<Date>;
 export declare const bottomPanTickLabelDateProps: TickLabelProps<Date>;

package/charts/core/components/axes/utils/get-tick-label-props.js

@@ -20,15 +20,14 @@ __export(get_tick_label_props_exports, {
   ELLIPSIS_BUFFER: () => ELLIPSIS_BUFFER,
   bottomPanTickLabelDateProps: () => bottomPanTickLabelDateProps,
   bottomTickLabelDateProps: () => bottomTickLabelDateProps,
-  getBottomTickLabelPropsWithDomainAlignment: () => getBottomTickLabelPropsWithDomainAlignment,
   getTickLabelPropsForCategoryAxis: () => getTickLabelPropsForCategoryAxis,
   getTickLabelPropsForGanttAxis: () => getTickLabelPropsForGanttAxis,
   getTickLabelPropsForValueAxis: () => getTickLabelPropsForValueAxis,
-  getTopTickLabelPropsWithDomainAlignment: () => getTopTickLabelPropsWithDomainAlignment,
-  getXAxisTickLabelProps: () => getXAxisTickLabelProps
+  getXAxisTickLabelProps: () => getXAxisTickLabelProps,
+  getYAxisTickLabelProps: () => getYAxisTickLabelProps
 });
 module.exports = __toCommonJS(get_tick_label_props_exports);
-var import_get_tick_value_as_number = require("../../../utils/get-tick-value-as-number.js");
+var import_get_tick_value_as_number = require("../../../../../core/utils/get-tick-value-as-number.js");
 var import_constants = require("../constants.js");
 const getBottomTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
   return (value) => {
@@ -123,6 +122,48 @@ const getTopTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
     };
   };
 };
+const getLeftTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
+  return (value) => {
+    const numericValue = (0, import_get_tick_value_as_number.getTickValueAsNumber)(value);
+    let verticalAnchor = import_constants.TICK_ALIGMENT.Middle;
+    if (numericValue === domainMin) {
+      verticalAnchor = import_constants.TICK_ALIGMENT.End;
+    } else if (numericValue === domainMax) {
+      verticalAnchor = import_constants.TICK_ALIGMENT.Start;
+    }
+    return {
+      x: -import_constants.Y_AXES_TICK_LINE_OFFSET,
+      textAnchor: import_constants.TICK_ALIGMENT.End,
+      verticalAnchor
+    };
+  };
+};
+const getRightTickLabelPropsWithDomainAlignment = (domainMin, domainMax) => {
+  return (value) => {
+    const numericValue = (0, import_get_tick_value_as_number.getTickValueAsNumber)(value);
+    let verticalAnchor = import_constants.TICK_ALIGMENT.Middle;
+    if (numericValue === domainMin) {
+      verticalAnchor = import_constants.TICK_ALIGMENT.End;
+    } else if (numericValue === domainMax) {
+      verticalAnchor = import_constants.TICK_ALIGMENT.Start;
+    }
+    return {
+      x: +import_constants.Y_AXES_TICK_LINE_OFFSET,
+      textAnchor: import_constants.TICK_ALIGMENT.Start,
+      verticalAnchor
+    };
+  };
+};
+function getYAxisTickLabelProps(position, isCategoricalAxis, scale) {
+  if (isCategoricalAxis) {
+    return getTickLabelPropsForValueAxis(position);
+  }
+  if (scale) {
+    const domain = scale.domain();
+    return position === "left" ? getLeftTickLabelPropsWithDomainAlignment(+domain[0], +domain[1]) : getRightTickLabelPropsWithDomainAlignment(+domain[0], +domain[1]);
+  }
+  return getTickLabelPropsForValueAxis(position);
+}
 const getTickLabelPropsForCategoryAxis = (orientation, tickLabelLayout = "horizontal") => {
   if (orientation === "left") {
     return leftTickCategoricalLabelProps;

package/charts/core/components/chart-grid/ChartGrid.css

@@ -1,13 +1,13 @@
-._13lzg4k0-3-7-1 {
+._13lzg4k0-3-9-0 {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
 }
-._13lzg4k1-3-7-1 {
+._13lzg4k1-3-9-0 {
   box-sizing: content-box;
 }
-._13lzg4k2-3-7-1 {
+._13lzg4k2-3-9-0 {
   position: relative;
 }

package/charts/core/components/chart-grid/ChartGrid.sty.js

@@ -23,6 +23,6 @@ __export(ChartGrid_css_exports, {
 });
 module.exports = __toCommonJS(ChartGrid_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("./ChartGrid.css");
-var area = "_13lzg4k1-3-7-1";
-var plot = "_13lzg4k2-3-7-1";
-var plotLayout = "_13lzg4k0-3-7-1";
+var area = "_13lzg4k1-3-9-0";
+var plot = "_13lzg4k2-3-9-0";
+var plotLayout = "_13lzg4k0-3-9-0";

package/charts/core/components/chart-grid/ChartGridArea.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ChartGridArea_exports = {};
 __export(ChartGridArea_exports, {
@@ -31,15 +21,15 @@ __export(ChartGridArea_exports, {
 });
 module.exports = __toCommonJS(ChartGridArea_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_use_resize_observer = __toESM(require("use-resize-observer"));
 var import_ChartGrid_css = require("./ChartGrid.sty.js");
+var import_useResizeObserver = require("../../../../core/hooks/useResizeObserver.js");
 var import_Grid = require("../../../../layouts/grid/Grid.js");
 const ChartGridArea = ({
   gridArea,
   children,
   ...rest
 }) => {
-  const { width, height, ref } = (0, import_use_resize_observer.default)();
+  const { width, height, ref } = (0, import_useResizeObserver.useResizeObserver)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Grid.Grid,
     {

package/charts/core/components/chart-grid/constants.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Minimum chart grid height (in px) required to display annotations.
+ * Below this threshold, annotations are hidden to prevent visual clipping.
+ * @internal
+ */
+export declare const MIN_HEIGHT_FOR_ANNOTATIONS = 160;
+/**
+ * Minimum chart grid height (in px) required to display top/bottom axes.
+ * Below this threshold, axes are hidden to maximize the plot area.
+ * @internal
+ */
+export declare const MIN_HEIGHT_FOR_AXES = 50;
+/**
+ * Determines whether annotations should be visible based on chart height
+ * and whether annotation tracks exist.
+ * @internal
+ */
+export declare function shouldShowAnnotations(chartGridHeight: number, tracksQuantity: number): boolean;
+/**
+ * Determines whether top/bottom axes should be visible based on chart height.
+ * @internal
+ */
+export declare function shouldShowAxes(chartGridHeight: number): boolean;

package/charts/core/components/chart-grid/constants.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var constants_exports = {};
+__export(constants_exports, {
+  MIN_HEIGHT_FOR_ANNOTATIONS: () => MIN_HEIGHT_FOR_ANNOTATIONS,
+  MIN_HEIGHT_FOR_AXES: () => MIN_HEIGHT_FOR_AXES,
+  shouldShowAnnotations: () => shouldShowAnnotations,
+  shouldShowAxes: () => shouldShowAxes
+});
+module.exports = __toCommonJS(constants_exports);
+const MIN_HEIGHT_FOR_ANNOTATIONS = 160;
+const MIN_HEIGHT_FOR_AXES = 50;
+function shouldShowAnnotations(chartGridHeight, tracksQuantity) {
+  return tracksQuantity > 0 && chartGridHeight >= MIN_HEIGHT_FOR_ANNOTATIONS;
+}
+function shouldShowAxes(chartGridHeight) {
+  return chartGridHeight >= MIN_HEIGHT_FOR_AXES;
+}

package/charts/core/components/chart-grid/providers/GridPlotSizeProvider.js

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var GridPlotSizeProvider_exports = {};
 __export(GridPlotSizeProvider_exports, {
@@ -32,10 +22,10 @@ __export(GridPlotSizeProvider_exports, {
 module.exports = __toCommonJS(GridPlotSizeProvider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_use_resize_observer = __toESM(require("use-resize-observer"));
+var import_useResizeObserver = require("../../../../../core/hooks/useResizeObserver.js");
 var import_GridPlotContext = require("../context/GridPlotContext.js");
 const GridPlotSizeProvider = ({ children }) => {
-  const { width = 0, height = 0, ref } = (0, import_use_resize_observer.default)();
+  const { width = 0, height = 0, ref } = (0, import_useResizeObserver.useResizeObserver)();
   const context = (0, import_react.useMemo)(() => ({ width, height, ref }), [width, height, ref]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_GridPlotContext.GridPlotContext.Provider, { value: context, children });
 };

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

@@ -1,46 +1,46 @@
-._l1klj80-3-7-1 {
+._l1klj80-3-9-0 {
   min-width: 0;
   grid-area: graphArea;
 }
-._l1klj81-3-7-1 {
+._l1klj81-3-9-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj83-3-7-1 {
+._l1klj83-3-9-0 {
   height: inherit;
   grid-area: horizontalResize;
 }
-._l1klj84-3-7-1 {
+._l1klj84-3-9-0 {
   width: 100%;
   grid-area: verticalResize;
 }
-._l1klj85-3-7-1 {
+._l1klj85-3-9-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj86-3-7-1 {
+._l1klj86-3-9-0 {
   height: 100%;
 }
-._l1klj87-3-7-1 {
+._l1klj87-3-9-0 {
   grid-area: verticalLegend;
 }
-._l1klj88-3-7-1 {
+._l1klj88-3-9-0 {
   grid-area: horizontalLegend;
 }
-._l1klj89-3-7-1 {
+._l1klj89-3-9-0 {
   filter: opacity(40%);
   pointer-events: none;
 }
-._l1klj8a-3-7-1 {
+._l1klj8a-3-9-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-1:hover {
+._l1klj8a-3-9-0:hover {
   background: var(--dt-colors-border-primary-accent, #464cce);
 }
-._l1klj8b-3-7-1 {
+._l1klj8b-3-9-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-1:hover {
+._l1klj8b-3-9-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._l1klj8c-3-7-1 {
+._l1klj8c-3-9-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-1:hover {
+._l1klj8c-3-9-0:hover {
   width: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }

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

@@ -25,7 +25,7 @@ __export(styles_css_exports, {
 module.exports = __toCommonJS(styles_css_exports);
 var import_styles_css_ts_vanilla = require("./styles.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var graphContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj80-3-7-1", variantClassNames: { loading: { true: "_l1klj81-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj86-3-7-1", variantClassNames: { orientation: { horizontal: "_l1klj87-3-7-1", vertical: "_l1klj88-3-7-1" }, loading: { true: "_l1klj89-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var legendResizeLine = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj8a-3-7-1", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-7-1", vertical: "_l1klj8c-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var resizeContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj82-3-7-1", variantClassNames: { orientation: { horizontal: "_l1klj83-3-7-1", vertical: "_l1klj84-3-7-1" }, loading: { true: "_l1klj85-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var graphContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj80-3-9-0", variantClassNames: { loading: { true: "_l1klj81-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj86-3-9-0", variantClassNames: { orientation: { horizontal: "_l1klj87-3-9-0", vertical: "_l1klj88-3-9-0" }, loading: { true: "_l1klj89-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var legendResizeLine = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj8a-3-9-0", variantClassNames: { orientation: { horizontal: "_l1klj8b-3-9-0", vertical: "_l1klj8c-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
+var resizeContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_l1klj82-3-9-0", variantClassNames: { orientation: { horizontal: "_l1klj83-3-9-0", vertical: "_l1klj84-3-9-0" }, loading: { true: "_l1klj85-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });

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

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

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

@@ -24,7 +24,7 @@ __export(ChartState_css_exports, {
 });
 module.exports = __toCommonJS(ChartState_css_exports);
 var import_ChartState_css_ts_vanilla = require("./ChartState.css");
-var container = "_4pqs4v3-3-7-1";
-var emptyText = "_4pqs4v1-3-7-1";
-var errorText = "_4pqs4v0-3-7-1";
-var wrapper = "_4pqs4v2-3-7-1";
+var container = "_4pqs4v3-3-9-0";
+var emptyText = "_4pqs4v1-3-9-0";
+var errorText = "_4pqs4v0-3-9-0";
+var wrapper = "_4pqs4v2-3-9-0";

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

@@ -31,7 +31,6 @@ __export(HorizontalCrosshair_exports, {
 });
 module.exports = __toCommonJS(HorizontalCrosshair_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_shape = require("@visx/shape");
 var import_lodash_es = require("lodash");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_LeftMagnifier = require("./components/LeftMagnifier.js");
@@ -58,15 +57,18 @@ const HorizontalCrosshair = (props) => {
   const isInRange = (0, import_lodash_es.inRange)(y, 0, height + 1);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     isInRange && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_shape.Line,
+      "line",
       {
         role: "graphics-symbol",
         "aria-label": "crosshair",
-        from,
-        to,
+        x1: from.x,
+        y1: from.y,
+        x2: to.x,
+        y2: to.y,
         stroke: import_colors.default.Border.Neutral.Accent,
         strokeWidth,
         strokeDasharray: lineStrokeDasharray,
+        shapeRendering: "crispEdges",
         pointerEvents: "none"
       }
     ),

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

@@ -31,7 +31,6 @@ __export(VerticalCrosshair_exports, {
 });
 module.exports = __toCommonJS(VerticalCrosshair_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_shape = require("@visx/shape");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
@@ -67,16 +66,19 @@ const VerticalCrosshair = (0, import_react.forwardRef)((props, ref) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     isInRange && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_shape.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/charts/core/components/crosshair/components/Magnifier.css

@@ -1,4 +1,4 @@
-._nm3s3e0-3-7-1 {
+._nm3s3e0-3-9-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-1 {
+._nm3s3e1-3-9-0 {
   margin-left: -2px;
 }
-._nm3s3e2-3-7-1 {
+._nm3s3e2-3-9-0 {
   margin-left: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e3-3-7-1 {
+._nm3s3e3-3-9-0 {
   margin-top: var(--dt-spacings-size-2, 2px);
 }
-._nm3s3e4-3-7-1 {
+._nm3s3e4-3-9-0 {
   margin-top: -2px;
 }
-._nm3s3e5-3-7-1 {
+._nm3s3e5-3-9-0 {
   transform: rotate(-90deg);
   transform-origin: left bottom;
   margin-top: -2px;
 }
-._nm3s3e6-3-7-1 {
+._nm3s3e6-3-9-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/charts/core/components/crosshair/components/Magnifier.sty.js

@@ -28,11 +28,11 @@ __export(Magnifier_css_exports, {
 });
 module.exports = __toCommonJS(Magnifier_css_exports);
 var import_Magnifier_css_ts_vanilla = require("./Magnifier.css");
-var bottom = "_nm3s3e3-3-7-1";
-var left = "_nm3s3e1-3-7-1";
-var magnifier = "_nm3s3e0-3-7-1";
+var bottom = "_nm3s3e3-3-9-0";
+var left = "_nm3s3e1-3-9-0";
+var magnifier = "_nm3s3e0-3-9-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-1";
-var rotatedBottomStyle = "_nm3s3e6-3-7-1";
-var rotatedTopStyle = "_nm3s3e5-3-7-1";
-var top = "_nm3s3e4-3-7-1";
+var right = "_nm3s3e2-3-9-0";
+var rotatedBottomStyle = "_nm3s3e6-3-9-0";
+var rotatedTopStyle = "_nm3s3e5-3-9-0";
+var top = "_nm3s3e4-3-9-0";

package/charts/core/components/grid/Grid.d.ts

@@ -1,6 +1,9 @@
-import { GridProps as VisxGridProps } from '@visx/grid/lib/grids/Grid';
 import type { AnyScale } from '../../types/scales.js';
-export type GridProps = VisxGridProps<AnyScale, AnyScale> & {
+export type GridProps = {
+    width: number;
+    height: number;
+    xScale: AnyScale;
+    yScale: AnyScale;
     highlightZeroLine?: {
         horizontal?: boolean;
         vertical?: boolean;

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

@@ -21,7 +21,6 @@ __export(Grid_exports, {
 });
 module.exports = __toCommonJS(Grid_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_group = require("@visx/group");
 var import_GridColumns = require("../../../core/components/grid/GridColumns.js");
 var import_GridRows = require("../../../core/components/grid/GridRows.js");
 var import_ticks = require("../../../core/utils/ticks.js");
@@ -47,11 +46,10 @@ function Grid({
   const autoNumTicks = (0, import_ticks.getHorizontalNumTicks)(width);
   const xNumTicks = xCategoryOffset !== void 0 && (0, import_detect_scale.isBandScale)(xScale) ? xScale.domain().length : autoNumTicks;
   const yNumTicks = yCategoryOffset !== void 0 && (0, import_detect_scale.isBandScale)(yScale) ? yScale.domain().length : numTicksRows;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_group.Group, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_GridColumns.GridColumns,
       {
-        width,
         height,
         scale: xScale,
         numTicks: xNumTicks,
@@ -64,7 +62,6 @@ function Grid({
       import_GridRows.GridRows,
       {
         width,
-        height,
         scale: yScale,
         numTicks: yNumTicks,
         highlightZeroLine: highlightZeroLine.horizontal,

package/charts/core/components/grid/GridColumns.d.ts

@@ -1,7 +1,10 @@
-import { AllGridColumnsProps } from '@visx/grid/lib/grids/GridColumns';
 import type { AnyScale } from '../../types/scales.js';
 export type GridColumnsProps = {
+    scale: AnyScale;
+    height: number;
+    numTicks?: number;
+    offset?: number;
     highlightZeroLine?: boolean;
     ticks?: number[];
-} & AllGridColumnsProps<AnyScale>;
-export declare const GridColumns: ({ scale, highlightZeroLine, ticks, ...restProps }: GridColumnsProps) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const GridColumns: ({ scale, height, numTicks, offset, highlightZeroLine, ticks, }: GridColumnsProps) => import("react/jsx-runtime").JSX.Element;