@coinbase/cds-web-visualization 3.4.0-beta.4 → 3.4.0-beta.6

package/dts/chart/utils/interpolate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interpolate.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/interpolate.ts"],"names":[],"mappings":"AAIA,KAAK,WAAW,GACZ,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,GACH,GAAG,CAAC;AAER,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,WAAW,CAAC;IAClB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAoIF;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,YAAY,EAAE,WAAW,EACzB,UAAU,EAAE,WAAW,EACvB,YAAY,CAAC,EAAE,MAAM,GACpB,WAAW,EAAE,CAWf;AAkJD,KAAK,gBAAgB,GAAG,CAAC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,KAAK,OAAO,CAAC;AAmHxF;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,EAAE,CA+BlF;AAED,KAAK,kBAAkB,GAAG;IACxB,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,uBAAuB,CACrC,cAAc,EAAE,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,EAChD,cAAc,EAAE,WAAW,EAAE,GAAG,IAAI,GAAG,SAAS,EAChD,kBAAkB,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GACzD,CAAC,CAAC,EAAE,MAAM,KAAK,WAAW,EAAE,CAoG9B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,eAAe,CAC7B,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC5B,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAC5B,kBAAkB,CAAC,EAAE,gBAAgB,GAAG,kBAAkB,GACzD,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAgDvB"}

package/dts/chart/utils/path.d.ts

@@ -24,7 +24,7 @@ export declare const getPathCurveFunction: (
  * @example
  * ```typescript
  * const chartScale = getChartScale({ chartRect, domain, range, xScale, yScale });
- * const path = getLinePath({ data: [1, 2, 3], chartScale, curve: 'linear' });
+ * const path = getLinePath({ data: [1, 2, 3], chartScale, curve: 'bump' });
  * ```
  */
 export declare const getLinePath: ({
@@ -33,6 +33,7 @@ export declare const getLinePath: ({
   xScale,
   yScale,
   xData,
+  connectNulls,
 }: {
   data: (
     | number
@@ -46,6 +47,11 @@ export declare const getLinePath: ({
   xScale: ChartScaleFunction;
   yScale: ChartScaleFunction;
   xData?: number[];
+  /**
+   * When true, null values are skipped and the line connects across gaps.
+   * By default, null values create gaps in the line.
+   */
+  connectNulls?: boolean;
 }) => string;
 /**
  * Generates an SVG area path string from data using chart scale functions.
@@ -75,13 +81,30 @@ export declare const getAreaPath: ({
   xScale,
   yScale,
   xData,
+  connectNulls,
 }: {
   data: (number | null)[] | Array<[number, number] | null>;
   xScale: ChartScaleFunction;
   yScale: ChartScaleFunction;
   curve: ChartPathCurveType;
   xData?: number[];
+  /**
+   * When true, null values are skipped and the area connects across gaps.
+   * By default null values create gaps in the area.
+   */
+  connectNulls?: boolean;
 }) => string;
+/**
+ * Converts line coordinates to an SVG path string.
+ * Useful for rendering axis lines and tick marks.
+ *
+ * @example
+ * ```typescript
+ * const path = lineToPath(0, 0, 100, 100);
+ * // Returns: "M 0 0 L 100 100"
+ * ```
+ */
+export declare const lineToPath: (x1: number, y1: number, x2: number, y2: number) => string;
 /**
  * Creates an SVG path string for a rectangle with selective corner rounding.
  * Useful for creating bars in charts with optional rounded corners.

package/dts/chart/utils/path.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/path.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,cAAc,GACd,UAAU,GACV,SAAS,GACT,MAAM,GACN,YAAY,GACZ,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAO,kBAA6B,oCAsBxE,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,yCAMzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB,KAAG,MAgBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,yCAMzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB,KAAG,MAgFH,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,GACrB,GAAG,MAAM,EACT,GAAG,MAAM,EACT,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,UAAU,OAAO,EACjB,aAAa,OAAO,KACnB,MA0BF,CAAC"}
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/path.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,KAAK,kBAAkB,EAAsB,MAAM,SAAS,CAAC;AAEtE,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,YAAY,GACZ,QAAQ,GACR,cAAc,GACd,UAAU,GACV,SAAS,GACT,MAAM,GACN,YAAY,GACZ,WAAW,CAAC;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,GAAI,QAAO,kBAA6B,oCAsBxE,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,uDAOzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KAAG,MAoBH,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,WAAW,GAAI,uDAOzB;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC;IACzD,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;IAC3B,KAAK,EAAE,kBAAkB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,KAAG,MAoFH,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,IAAI,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,MAE3E,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,UAAU,GACrB,GAAG,MAAM,EACT,GAAG,MAAM,EACT,OAAO,MAAM,EACb,QAAQ,MAAM,EACd,QAAQ,MAAM,EACd,UAAU,OAAO,EACjB,aAAa,OAAO,KACnB,MA0BF,CAAC"}

package/dts/chart/utils/point.d.ts

@@ -1,4 +1,13 @@
+import type { TextHorizontalAlignment, TextVerticalAlignment } from '../text';
 import { type ChartScaleFunction } from './scale';
+/**
+ * Position a label should be placed relative to the point
+ *
+ * @example
+ * 'top' would have the label be located above the point itself,
+ * and thus the vertical alignment of that text would be bottom.
+ */
+export type PointLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
 /**
  * Get a point from a data value and a scale.
  * @note for categorical scales, the point will be centered within the band.
@@ -72,4 +81,24 @@ export declare const projectPoints: ({
   x: number;
   y: number;
 } | null>;
+/**
+ * Determines text alignment based on label position.
+ * For example, a 'top' position needs the text aligned to the 'bottom' so it appears above the point.
+ */
+export declare const getAlignmentFromPosition: (position: PointLabelPosition) => {
+  horizontalAlignment: TextHorizontalAlignment;
+  verticalAlignment: TextVerticalAlignment;
+};
+/**
+ * Calculates the final label coordinates by applying offset based on position.
+ */
+export declare const getLabelCoordinates: (
+  x: number,
+  y: number,
+  position: PointLabelPosition,
+  offset: number,
+) => {
+  x: number;
+  y: number;
+};
 //# sourceMappingURL=point.d.ts.map

package/dts/chart/utils/point.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAAkD,MAAM,SAAS,CAAC;AAElG;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,kBAAkB,KAAG,MAc9E,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,2BAK1B;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAEzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,yCAM3B;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAqDxC,CAAC"}
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAAE,KAAK,kBAAkB,EAAkD,MAAM,SAAS,CAAC;AAElG;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,kBAAkB,KAAG,MAc9E,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,2BAK1B;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAEzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,yCAM3B;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAqDxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,kBAAkB,KAC3B;IAAE,mBAAmB,EAAE,uBAAuB,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,CAAA;CAyB1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,GAAG,MAAM,EACT,GAAG,MAAM,EACT,UAAU,kBAAkB,EAC5B,QAAQ,MAAM,KACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CA0BxB,CAAC"}

package/dts/chart/utils/scrubber.d.ts

@@ -0,0 +1,39 @@
+import type { Rect } from '@coinbase/cds-common/types';
+export type ScrubberLabelPosition = 'left' | 'right';
+export type LabelPosition = {
+  seriesId: string;
+  x: number;
+  y: number;
+};
+export type LabelDimensions = {
+  width: number;
+  height: number;
+};
+/**
+ * Determines which side (left/right) to place scrubber labels based on available space.
+ * Prefers right side, switches to left when labels would overflow.
+ */
+export declare const getLabelPosition: (
+  beaconX: number,
+  maxLabelWidth: number,
+  drawingArea: Rect,
+  xOffset?: number,
+) => ScrubberLabelPosition;
+type LabelDimension = {
+  seriesId: string;
+  width: number;
+  height: number;
+  preferredX: number;
+  preferredY: number;
+};
+/**
+ * Calculates Y positions for all labels avoiding overlaps while maintaining order.
+ */
+export declare const calculateLabelYPositions: (
+  dimensions: LabelDimension[],
+  drawingArea: Rect,
+  labelHeight: number,
+  minGap: number,
+) => Map<string, number>;
+export {};
+//# sourceMappingURL=scrubber.d.ts.map

package/dts/chart/utils/scrubber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrubber.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scrubber.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAC3B,SAAS,MAAM,EACf,eAAe,MAAM,EACrB,aAAa,IAAI,EACjB,UAAS,MAAW,KACnB,qBASF,CAAC;AAQF,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GACnC,YAAY,cAAc,EAAE,EAC5B,aAAa,IAAI,EACjB,aAAa,MAAM,EACnB,QAAQ,MAAM,KACb,GAAG,CAAC,MAAM,EAAE,MAAM,CAoIpB,CAAC"}

package/dts/chart/utils/transition.d.ts

@@ -0,0 +1,65 @@
+import { type MotionValue, type Transition } from 'framer-motion';
+/**
+ * Default transition configuration used across all chart components.
+ */
+export declare const defaultTransition: Transition;
+/**
+ * Duration in seconds for accessory elements to fade in.
+ */
+export declare const accessoryFadeTransitionDuration = 0.15;
+/**
+ * Delay in seconds before accessory elements fade in.
+ */
+export declare const accessoryFadeTransitionDelay = 0.35;
+/**
+ * Hook for path animation state and transitions.
+ *
+ * @param currentPath - Current target path to animate to
+ * @param initialPath - Initial path for enter animation. When provided, the first animation will go from initialPath to currentPath.
+ * @param transition - Transition configuration
+ * @returns MotionValue containing the current interpolated path string
+ *
+ * @example
+ * // Simple path transition
+ * const animatedPath = usePathTransition({
+ *   currentPath: d ?? '',
+ *   transition: {
+ *     type: 'spring',
+ *     stiffness: 300,
+ *     damping: 20
+ *   }
+ * });
+ *
+ * @example
+ * // Time based animation
+ * const animatedPath = usePathTransition({
+ *   currentPath: targetPath,
+ *   initialPath: baselinePath,
+ *   transition: {
+ *     type: 'tween',
+ *     duration: 0.3,
+ *     ease: 'easeInOut'
+ *   }
+ * });
+ */
+export declare const usePathTransition: ({
+  currentPath,
+  initialPath,
+  transition,
+}: {
+  /**
+   * Current target path to animate to.
+   */
+  currentPath: string;
+  /**
+   * Initial path for enter animation.
+   * When provided, the first animation will go from initialPath to currentPath.
+   * If not provided, defaults to currentPath (no enter animation).
+   */
+  initialPath?: string;
+  /**
+   * Transition configuration
+   */
+  transition?: Transition;
+}) => MotionValue<string>;
+//# sourceMappingURL=transition.d.ts.map

package/dts/chart/utils/transition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,UAAU,EAIhB,MAAM,eAAe,CAAC;AAEvB;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAK/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,OAAO,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,4BAA4B,OAAO,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,iBAAiB,GAAI,2CAI/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CAwDrB,CAAC"}

package/esm/chart/CartesianChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "children", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "width", "height", "className", "style"];
+const _excluded = ["series", "children", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "width", "height", "className", "classNames", "style", "styles"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -20,15 +20,17 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       series,
       children,
       animate = true,
-      xAxis: xAxisConfigInput,
-      yAxis: yAxisConfigInput,
-      inset: insetInput,
+      xAxis: xAxisConfigProp,
+      yAxis: yAxisConfigProp,
+      inset,
       enableScrubbing,
       onScrubberPositionChange,
       width = '100%',
       height = '100%',
       className,
-      style
+      classNames,
+      style,
+      styles
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -36,15 +38,13 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     width: chartWidth,
     height: chartHeight
   } = useDimensions();
-  const internalSvgRef = useRef(null);
-  const userInset = useMemo(() => {
-    return getChartInset(insetInput, defaultChartInset);
-  }, [insetInput]);
+  const svgRef = useRef(null);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
 
   // Axis configs store the properties of each axis, such as id, scale type, domain limit, etc.
   // We only support 1 x axis but allow for multiple y axes.
-  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigInput)[0], [xAxisConfigInput]);
-  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigInput), [yAxisConfigInput]);
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp)[0], [xAxisConfigProp]);
+  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigProp), [yAxisConfigProp]);
   const {
     renderedAxes,
     registerAxis,
@@ -59,10 +59,10 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       height: 0
     };
     const totalInset = {
-      top: userInset.top + axisPadding.top,
-      right: userInset.right + axisPadding.right,
-      bottom: userInset.bottom + axisPadding.bottom,
-      left: userInset.left + axisPadding.left
+      top: calculatedInset.top + axisPadding.top,
+      right: calculatedInset.right + axisPadding.right,
+      bottom: calculatedInset.bottom + axisPadding.bottom,
+      left: calculatedInset.left + axisPadding.left
     };
     const availableWidth = chartWidth - totalInset.left - totalInset.right;
     const availableHeight = chartHeight - totalInset.top - totalInset.bottom;
@@ -72,11 +72,15 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       width: availableWidth > 0 ? availableWidth : 0,
       height: availableHeight > 0 ? availableHeight : 0
     };
-  }, [chartHeight, chartWidth, userInset, axisPadding]);
-
-  // Axes contain the config along with domain and range, which get calculated here.
-  const xAxis = useMemo(() => {
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return undefined;
+  }, [chartHeight, chartWidth, calculatedInset, axisPadding]);
+  const {
+    xAxis,
+    xScale
+  } = useMemo(() => {
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      xAxis: undefined,
+      xScale: undefined
+    };
     const domain = getAxisDomain(xAxisConfig, series !== null && series !== void 0 ? series : [], 'x');
     const range = getAxisRange(xAxisConfig, chartRect, 'x');
     const axisConfig = {
@@ -87,11 +91,43 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       categoryPadding: xAxisConfig.categoryPadding,
       domainLimit: xAxisConfig.domainLimit
     };
-    return axisConfig;
+
+    // Create the scale
+    const scale = getAxisScale({
+      config: axisConfig,
+      type: 'x',
+      range: axisConfig.range,
+      dataDomain: axisConfig.domain
+    });
+    if (!scale) return {
+      xAxis: undefined,
+      xScale: undefined
+    };
+
+    // Update axis config with actual scale domain (after .nice() or other adjustments)
+    const scaleDomain = scale.domain();
+    const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+      min: scaleDomain[0],
+      max: scaleDomain[1]
+    } : axisConfig.domain;
+    const finalAxisConfig = _objectSpread(_objectSpread({}, axisConfig), {}, {
+      domain: actualDomain
+    });
+    return {
+      xAxis: finalAxisConfig,
+      xScale: scale
+    };
   }, [xAxisConfig, series, chartRect]);
-  const yAxes = useMemo(() => {
+  const {
+    yAxes,
+    yScales
+  } = useMemo(() => {
     const axes = new Map();
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return axes;
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      yAxes: axes,
+      yScales: scales
+    };
     yAxisConfig.forEach(axisParam => {
       var _axisParam$id, _series$filter, _axisParam$domainLimi;
       const axisId = (_axisParam$id = axisParam.id) !== null && _axisParam$id !== void 0 ? _axisParam$id : defaultAxisId;
@@ -102,36 +138,19 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
         return ((_s$yAxisId = s.yAxisId) !== null && _s$yAxisId !== void 0 ? _s$yAxisId : defaultAxisId) === axisId;
       })) !== null && _series$filter !== void 0 ? _series$filter : [];
 
-      // Calculate domain and range in one pass
-      const domain = getAxisDomain(axisParam, relevantSeries, 'y');
+      // Calculate domain and range
+      const dataDomain = getAxisDomain(axisParam, relevantSeries, 'y');
       const range = getAxisRange(axisParam, chartRect, 'y');
-      axes.set(axisId, {
+      const axisConfig = {
         scaleType: axisParam.scaleType,
-        domain,
+        domain: dataDomain,
         range,
         data: axisParam.data,
         categoryPadding: axisParam.categoryPadding,
         domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) !== null && _axisParam$domainLimi !== void 0 ? _axisParam$domainLimi : 'nice'
-      });
-    });
-    return axes;
-  }, [yAxisConfig, series, chartRect]);
+      };
 
-  // Scales are the functions that convert data values to visual positions.
-  // They are calculated here based on the above axes.
-  const xScale = useMemo(() => {
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0 || xAxis === undefined) return undefined;
-    return getAxisScale({
-      config: xAxis,
-      type: 'x',
-      range: xAxis.range,
-      dataDomain: xAxis.domain
-    });
-  }, [chartRect, xAxis]);
-  const yScales = useMemo(() => {
-    const scales = new Map();
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return scales;
-    yAxes.forEach((axisConfig, axisId) => {
+      // Create the scale
       const scale = getAxisScale({
         config: axisConfig,
         type: 'y',
@@ -140,10 +159,23 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       });
       if (scale) {
         scales.set(axisId, scale);
+
+        // Update axis config with actual scale domain (after .nice() or other adjustments)
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _objectSpread(_objectSpread({}, axisConfig), {}, {
+          domain: actualDomain
+        }));
       }
     });
-    return scales;
-  }, [chartRect, yAxes]);
+    return {
+      yAxes: axes,
+      yScales: scales
+    };
+  }, [yAxisConfig, series, chartRect]);
   const getXAxis = useCallback(() => xAxis, [xAxis]);
   const getYAxis = useCallback(id => yAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [yAxes]);
   const getXScale = useCallback(() => xScale, [xScale]);
@@ -157,6 +189,20 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     if (!seriesId) return undefined;
     return stackedDataMap.get(seriesId);
   }, [stackedDataMap]);
+  const dataLength = useMemo(() => {
+    // If xAxis has categorical data, use that length
+    if (xAxisConfig.data && xAxisConfig.data.length > 0) {
+      return xAxisConfig.data.length;
+    }
+
+    // Otherwise, find the longest series
+    if (!series || series.length === 0) return 0;
+    return series.reduce((max, s) => {
+      var _seriesData$length;
+      const seriesData = getStackedSeriesData(s.id);
+      return Math.max(max, (_seriesData$length = seriesData === null || seriesData === void 0 ? void 0 : seriesData.length) !== null && _seriesData$length !== void 0 ? _seriesData$length : 0);
+    }, 0);
+  }, [xAxisConfig.data, series, getStackedSeriesData]);
   const getAxisBounds = useCallback(axisId => {
     const axis = renderedAxes.get(axisId);
     if (!axis || !chartRect) return;
@@ -168,7 +214,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     const offsetFromPreviousAxes = axesAtPosition.slice(0, axisIndex).reduce((sum, a) => sum + a.size, 0);
     if (axis.position === 'top') {
       // Position above the chart rect, accounting for user inset
-      const startY = userInset.top + offsetFromPreviousAxes;
+      const startY = calculatedInset.top + offsetFromPreviousAxes;
       return {
         x: chartRect.x,
         y: startY,
@@ -186,7 +232,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       };
     } else if (axis.position === 'left') {
       // Position to the left of the chart rect, accounting for user inset
-      const startX = userInset.left + offsetFromPreviousAxes;
+      const startX = calculatedInset.left + offsetFromPreviousAxes;
       return {
         x: startX,
         y: chartRect.y,
@@ -203,7 +249,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
         height: chartRect.height
       };
     }
-  }, [renderedAxes, chartRect, userInset]);
+  }, [renderedAxes, chartRect, calculatedInset]);
   const contextValue = useMemo(() => ({
     series: series !== null && series !== void 0 ? series : [],
     getSeries,
@@ -216,43 +262,52 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     getXScale,
     getYScale,
     drawingArea: chartRect,
+    dataLength,
     registerAxis,
     unregisterAxis,
     getAxisBounds
-  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, registerAxis, unregisterAxis, getAxisBounds]);
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
-    ref: node => {
-      // Handle the observe ref, internal ref, and forwarded ref
-      observe(node);
-      if (internalSvgRef.current !== node) {
-        internalSvgRef.current = node;
-      }
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-      }
-    },
-    "aria-live": "polite",
-    as: "svg",
-    className: cx(enableScrubbing && focusStylesCss, className),
-    height: height,
-    role: "figure",
-    style: style,
-    tabIndex: enableScrubbing ? 0 : undefined,
-    width: width
-  }, props), {}, {
-    children: /*#__PURE__*/_jsx(CartesianChartProvider, {
-      value: contextValue,
-      children: /*#__PURE__*/_jsx(ScrubberProvider, {
-        enableScrubbing: !!enableScrubbing,
-        onScrubberPositionChange: onScrubberPositionChange,
-        svgRef: internalSvgRef,
-        children: children
-      })
+  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  const rootClassNames = useMemo(() => cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root), [className, classNames]);
+  const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  return /*#__PURE__*/_jsx(CartesianChartProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(ScrubberProvider, {
+      enableScrubbing: !!enableScrubbing,
+      onScrubberPositionChange: onScrubberPositionChange,
+      svgRef: svgRef,
+      children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+        ref: node => {
+          observe(node);
+        },
+        className: rootClassNames,
+        height: height,
+        style: rootStyles,
+        width: width
+      }, props), {}, {
+        children: /*#__PURE__*/_jsx(Box, {
+          ref: node => {
+            const svgElement = node;
+            svgRef.current = svgElement;
+            // Forward the ref to the user
+            if (ref) {
+              if (typeof ref === 'function') {
+                ref(svgElement);
+              } else {
+                ref.current = svgElement;
+              }
+            }
+          },
+          "aria-live": "polite",
+          as: "svg",
+          className: cx(enableScrubbing && focusStylesCss, classNames === null || classNames === void 0 ? void 0 : classNames.chart),
+          height: "100%",
+          style: styles === null || styles === void 0 ? void 0 : styles.chart,
+          tabIndex: enableScrubbing ? 0 : undefined,
+          width: "100%",
+          children: children
+        })
+      }))
     })
-  }));
+  });
 }));
 import "./CartesianChart.css";