@coinbase/cds-web-visualization 3.4.0-beta.8 → 3.4.0

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

@@ -1,8 +1,14 @@
 import { type MotionValue, type Transition } from 'framer-motion';
 /**
- * Default transition configuration used across all chart components.
+ * Default update transition used across all chart components.
+ * `{ type: 'spring', stiffness: 900, damping: 120, mass: 4 }`
  */
 export declare const defaultTransition: Transition;
+/**
+ * Instant transition that completes immediately with no animation.
+ * Used when a transition is set to `null`.
+ */
+export declare const instantTransition: Transition;
 /**
  * Duration in seconds for accessory elements to fade in.
  */
@@ -11,40 +17,53 @@ export declare const accessoryFadeTransitionDuration = 0.15;
  * Delay in seconds before accessory elements fade in.
  */
 export declare const accessoryFadeTransitionDelay = 0.35;
+/**
+ * Default enter transition for accessory elements (Point, Scrubber beacons).
+ * `{ type: 'tween', duration: 0.15, delay: 0.35 }`
+ */
+export declare const defaultAccessoryEnterTransition: Transition;
+/**
+ * Resolves a transition value based on the animation state and a default.
+ * @note Passing in null will disable an animation.
+ * @note Passing in undefined will use the provided default.
+ */
+export declare const getTransition: (
+  value: Transition | null | undefined,
+  animate: boolean,
+  defaultValue: Transition,
+) => Transition | null;
 /**
  * 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
+ * @param transitions - Transition configuration for enter and update animations
  * @returns MotionValue containing the current interpolated path string
  *
  * @example
  * // Simple path transition
  * const animatedPath = usePathTransition({
  *   currentPath: d ?? '',
- *   transition: {
- *     type: 'spring',
- *     stiffness: 300,
- *     damping: 20
- *   }
+ *   transitions: {
+ *     update: { type: 'spring', stiffness: 300, damping: 20 },
+ *   },
  * });
  *
  * @example
- * // Time based animation
+ * // Enter animation with different initial config (like DefaultBar)
  * const animatedPath = usePathTransition({
  *   currentPath: targetPath,
  *   initialPath: baselinePath,
- *   transition: {
- *     type: 'tween',
- *     duration: 0.3,
- *     ease: 'easeInOut'
- *   }
+ *   transitions: {
+ *     enter: { type: 'tween', duration: 0.5 },
+ *     update: { type: 'spring', stiffness: 900, damping: 120, mass: 4 },
+ *   },
  * });
  */
 export declare const usePathTransition: ({
   currentPath,
   initialPath,
+  transitions,
   transition,
 }: {
   /**
@@ -58,7 +77,24 @@ export declare const usePathTransition: ({
    */
   initialPath?: string;
   /**
-   * Transition configuration
+   * Transition configuration for enter and update animations.
+   */
+  transitions?: {
+    /**
+     * Transition for the initial enter animation (initialPath → currentPath).
+     * Only used when `initialPath` is provided.
+     * If not provided, falls back to `update`.
+     */
+    enter?: Transition | null;
+    /**
+     * Transition for subsequent data update animations.
+     * @default defaultTransition
+     */
+    update?: Transition | null;
+  };
+  /**
+   * Transition for updates.
+   * @deprecated Use `transitions.update` instead.
    */
   transition?: Transition;
 }) => MotionValue<string>;

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

@@ -1 +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"}
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/transition.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,UAAU,EAGhB,MAAM,eAAe,CAAC;AAEvB;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAK/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAG/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,+BAA+B,OAAO,CAAC;AAEpD;;GAEG;AACH,eAAO,MAAM,4BAA4B,OAAO,CAAC;AAEjD;;;GAGG;AACH,eAAO,MAAM,+BAA+B,EAAE,UAI7C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,UAAU,GAAG,IAAI,GAAG,SAAS,EACpC,SAAS,OAAO,EAChB,cAAc,UAAU,KACvB,UAAU,GAAG,IAGf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,iBAAiB,GAAI,wDAK/B;IACD;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE;QACZ;;;;WAIG;QACH,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC1B;;;WAGG;QACH,MAAM,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;KAC5B,CAAC;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,KAAG,WAAW,CAAC,MAAM,CA4DrB,CAAC"}

package/dts/sparkline/Sparkline.d.ts

@@ -32,7 +32,8 @@ export type SparklineBaseProps = SharedProps & {
 };
 export type SparklineProps = SparklineBaseProps;
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export declare const Sparkline: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<

package/dts/sparkline/Sparkline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQ/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,iPAAiP;IACjP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oQAAoQ;IACpQ,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,kWAAkW;IAClW,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IACnD,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD;;GAEG;AACH,eAAO,MAAM,SAAS;IA/BpB,iPAAiP;iBACpO,MAAM;IACnB,oQAAoQ;WAC7P,MAAM;IACb,8BAA8B;YACtB,MAAM;IACd,kWAAkW;WAC3V,MAAM;IACb,6BAA6B;WACtB,MAAM;IACb,0EAA0E;eAC/D,eAAe,CAAC,sBAAsB,CAAC;IAClD,oOAAoO;yBAC/M,MAAM;IAC3B;;;OAGG;iBACU,mBAAmB;IAChC;;;OAGG;eACQ,iBAAiB;2CA4J7B,CAAC"}
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../src/sparkline/Sparkline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAQ/E,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAGxD,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,GAAG,gBAAgB,CAAC;AAEzE,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG;IAC7C,iPAAiP;IACjP,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oQAAoQ;IACpQ,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,kWAAkW;IAClW,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,eAAe,CAAC,sBAAsB,CAAC,CAAC;IACnD,oOAAoO;IACpO,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,SAAS;IAhCpB,iPAAiP;iBACpO,MAAM;IACnB,oQAAoQ;WAC7P,MAAM;IACb,8BAA8B;YACtB,MAAM;IACd,kWAAkW;WAC3V,MAAM;IACb,6BAA6B;WACtB,MAAM;IACb,0EAA0E;eAC/D,eAAe,CAAC,sBAAsB,CAAC;IAClD,oOAAoO;yBAC/M,MAAM;IAC3B;;;OAGG;iBACU,mBAAmB;IAChC;;;OAGG;eACQ,iBAAiB;2CA6J7B,CAAC"}

package/dts/sparkline/SparklineArea.d.ts

@@ -5,7 +5,8 @@ export type SparklineAreaBaseProps = {
   maskId?: string;
 };
 /**
- * @deprecated Use AreaChart instead.
+ * @deprecated Use AreaChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export declare const SparklineArea: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<

package/dts/sparkline/SparklineArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,iIAazB,CAAC"}
+{"version":3,"file":"SparklineArea.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,iIAazB,CAAC"}

package/dts/sparkline/SparklineGradient.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { SparklinePathRef } from './SparklinePath';
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export declare const SparklineGradient: React.MemoExoticComponent<
   React.ForwardRefExoticComponent<

package/dts/sparkline/SparklineGradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineGradient.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;2CAoB7B,CAAC"}
+{"version":3,"file":"SparklineGradient.d.ts","sourceRoot":"","sources":["../../src/sparkline/SparklineGradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;2CAoB7B,CAAC"}

package/dts/sparkline/sparkline-interactive/SparklineInteractive.d.ts

@@ -193,7 +193,8 @@ declare function SparklineInteractiveWithGeneric<Period extends string>({
   ...props
 }: SparklineInteractiveProps<Period>): import('react/jsx-runtime').JSX.Element;
 /**
- * @deprecated Use LineChart instead.
+ * @deprecated Use LineChart instead. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v4
  */
 export declare const SparklineInteractive: typeof SparklineInteractiveWithGeneric;
 //# sourceMappingURL=SparklineInteractive.d.ts.map

package/dts/sparkline/sparkline-interactive/SparklineInteractive.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SparklineInteractive.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractive.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SparklineInteractive.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/SparklineInteractive.tsx"],"names":[],"mappings":"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"}

package/esm/chart/CartesianChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "children", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "width", "height", "className", "classNames", "style", "styles"];
+const _excluded = ["series", "children", "layout", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "className", "classNames", "style", "styles", "accessibilityLabel"];
 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; }
@@ -12,25 +12,31 @@ import { useDimensions } from '@coinbase/cds-web/hooks/useDimensions';
 import { Box } from '@coinbase/cds-web/layout';
 import { ScrubberProvider } from './scrubber/ScrubberProvider';
 import { CartesianChartProvider } from './ChartProvider';
-import { defaultAxisId, defaultChartInset, getAxisConfig, getAxisDomain, getAxisRange, getAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Legend } from './legend';
+import { defaultAxisId, defaultHorizontalLayoutChartInset, defaultVerticalLayoutChartInset, getAxisConfig, getAxisRange, getCartesianAxisDomain, getCartesianAxisScale, getChartInset, getStackedSeriesData as calculateStackedSeriesData, useTotalAxisPadding } from './utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const focusStylesCss = "cds-focusStylesCss-f4oy7ru";
 export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
       series,
       children,
+      layout = 'vertical',
       animate = true,
       xAxis: xAxisConfigProp,
       yAxis: yAxisConfigProp,
       inset,
       enableScrubbing,
       onScrubberPositionChange,
+      legend,
+      legendPosition = 'bottom',
+      legendAccessibilityLabel,
       width = '100%',
       height = '100%',
       className,
       classNames,
       style,
-      styles
+      styles,
+      accessibilityLabel
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -39,12 +45,20 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     height: chartHeight
   } = useDimensions();
   const svgRef = useRef(null);
-  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
+  const calculatedInset = useMemo(() => getChartInset(inset, layout === 'horizontal' ? defaultHorizontalLayoutChartInset : defaultVerticalLayoutChartInset), [inset, layout]);
 
   // 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', xAxisConfigProp)[0], [xAxisConfigProp]);
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp), [xAxisConfigProp]);
   const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigProp), [yAxisConfigProp]);
+
+  // Horizontal layout supports multiple value axes on x, but only a single category axis on y.
+  // Vertical layout keeps a single x-axis to preserve existing behavior.
+  if (layout === 'horizontal' && yAxisConfig.length > 1) {
+    throw new Error('When layout="horizontal", only one y-axis is supported. See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
+  if (layout !== 'horizontal' && xAxisConfig.length > 1) {
+    throw new Error('Multiple x-axes are only supported when layout="horizontal". See https://cds.coinbase.com/components/charts/CartesianChart.');
+  }
   const {
     renderedAxes,
     registerAxis,
@@ -74,50 +88,64 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     };
   }, [chartHeight, chartWidth, calculatedInset, axisPadding]);
   const {
-    xAxis,
-    xScale
+    xAxes,
+    xScales
   } = useMemo(() => {
+    const axes = new Map();
+    const scales = new Map();
     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 = {
-      scaleType: xAxisConfig.scaleType,
-      domain,
-      range,
-      data: xAxisConfig.data,
-      categoryPadding: xAxisConfig.categoryPadding,
-      domainLimit: xAxisConfig.domainLimit
+      xAxes: axes,
+      xScales: scales
     };
+    xAxisConfig.forEach(axisParam => {
+      var _axisParam$id, _series$filter, _axisParam$domainLimi;
+      const axisId = (_axisParam$id = axisParam.id) !== null && _axisParam$id !== void 0 ? _axisParam$id : defaultAxisId;
 
-    // Create the scale
-    const scale = getAxisScale({
-      config: axisConfig,
-      type: 'x',
-      range: axisConfig.range,
-      dataDomain: axisConfig.domain
-    });
-    if (!scale) return {
-      xAxis: undefined,
-      xScale: undefined
-    };
+      // Get relevant series data
+      const relevantSeries = xAxisConfig.length > 1 ? (_series$filter = series === null || series === void 0 ? void 0 : series.filter(s => {
+        var _s$xAxisId;
+        return ((_s$xAxisId = s.xAxisId) !== null && _s$xAxisId !== void 0 ? _s$xAxisId : defaultAxisId) === axisId;
+      })) !== null && _series$filter !== void 0 ? _series$filter : [] : series !== null && series !== void 0 ? series : [];
 
-    // 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
+      // Calculate domain and range
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'x', layout);
+      const range = getAxisRange(axisParam, chartRect, 'x');
+      const axisConfig = {
+        scaleType: axisParam.scaleType,
+        domain: dataDomain,
+        range,
+        data: axisParam.data,
+        categoryPadding: axisParam.categoryPadding,
+        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) !== null && _axisParam$domainLimi !== void 0 ? _axisParam$domainLimi : layout === 'horizontal' ? 'nice' : 'strict'
+      };
+
+      // Create the scale
+      const scale = getCartesianAxisScale({
+        config: axisConfig,
+        type: 'x',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain,
+        layout
+      });
+      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 {
-      xAxis: finalAxisConfig,
-      xScale: scale
+      xAxes: axes,
+      xScales: scales
     };
-  }, [xAxisConfig, series, chartRect]);
+  }, [xAxisConfig, series, chartRect, layout]);
   const {
     yAxes,
     yScales
@@ -129,17 +157,17 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       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;
+      var _axisParam$id2, _series$filter2, _axisParam$domainLimi2;
+      const axisId = (_axisParam$id2 = axisParam.id) !== null && _axisParam$id2 !== void 0 ? _axisParam$id2 : defaultAxisId;
 
       // Get relevant series data
-      const relevantSeries = (_series$filter = series === null || series === void 0 ? void 0 : series.filter(s => {
+      const relevantSeries = yAxisConfig.length > 1 ? (_series$filter2 = series === null || series === void 0 ? void 0 : series.filter(s => {
         var _s$yAxisId;
         return ((_s$yAxisId = s.yAxisId) !== null && _s$yAxisId !== void 0 ? _s$yAxisId : defaultAxisId) === axisId;
-      })) !== null && _series$filter !== void 0 ? _series$filter : [];
+      })) !== null && _series$filter2 !== void 0 ? _series$filter2 : [] : series !== null && series !== void 0 ? series : [];
 
       // Calculate domain and range
-      const dataDomain = getAxisDomain(axisParam, relevantSeries, 'y');
+      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'y', layout);
       const range = getAxisRange(axisParam, chartRect, 'y');
       const axisConfig = {
         scaleType: axisParam.scaleType,
@@ -147,15 +175,16 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
         range,
         data: axisParam.data,
         categoryPadding: axisParam.categoryPadding,
-        domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) !== null && _axisParam$domainLimi !== void 0 ? _axisParam$domainLimi : 'nice'
+        domainLimit: (_axisParam$domainLimi2 = axisParam.domainLimit) !== null && _axisParam$domainLimi2 !== void 0 ? _axisParam$domainLimi2 : layout === 'horizontal' ? 'strict' : 'nice'
       };
 
       // Create the scale
-      const scale = getAxisScale({
+      const scale = getCartesianAxisScale({
         config: axisConfig,
         type: 'y',
         range: axisConfig.range,
-        dataDomain: axisConfig.domain
+        dataDomain: axisConfig.domain,
+        layout
       });
       if (scale) {
         scales.set(axisId, scale);
@@ -175,10 +204,10 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       yAxes: axes,
       yScales: scales
     };
-  }, [yAxisConfig, series, chartRect]);
-  const getXAxis = useCallback(() => xAxis, [xAxis]);
+  }, [yAxisConfig, series, chartRect, layout]);
+  const getXAxis = useCallback(id => xAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [xAxes]);
   const getYAxis = useCallback(id => yAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [yAxes]);
-  const getXScale = useCallback(() => xScale, [xScale]);
+  const getXScale = useCallback(id => xScales.get(id !== null && id !== void 0 ? id : defaultAxisId), [xScales]);
   const getYScale = useCallback(id => yScales.get(id !== null && id !== void 0 ? id : defaultAxisId), [yScales]);
   const getSeries = useCallback(seriesId => series === null || series === void 0 ? void 0 : series.find(s => s.id === seriesId), [series]);
   const stackedDataMap = useMemo(() => {
@@ -189,10 +218,17 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     if (!seriesId) return undefined;
     return stackedDataMap.get(seriesId);
   }, [stackedDataMap]);
+  const categoryAxisIsX = useMemo(() => {
+    return layout !== 'horizontal';
+  }, [layout]);
+  const categoryAxisConfig = useMemo(() => {
+    var _xAxisConfig$, _yAxisConfig$;
+    return categoryAxisIsX ? (_xAxisConfig$ = xAxisConfig[0]) !== null && _xAxisConfig$ !== void 0 ? _xAxisConfig$ : yAxisConfig[0] : (_yAxisConfig$ = yAxisConfig[0]) !== null && _yAxisConfig$ !== void 0 ? _yAxisConfig$ : xAxisConfig[0];
+  }, [categoryAxisIsX, xAxisConfig, yAxisConfig]);
   const dataLength = useMemo(() => {
-    // If xAxis has categorical data, use that length
-    if (xAxisConfig.data && xAxisConfig.data.length > 0) {
-      return xAxisConfig.data.length;
+    // If category axis has categorical data, use that length
+    if (categoryAxisConfig.data && categoryAxisConfig.data.length > 0) {
+      return categoryAxisConfig.data.length;
     }
 
     // Otherwise, find the longest series
@@ -202,7 +238,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       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]);
+  }, [categoryAxisConfig, series, getStackedSeriesData]);
   const getAxisBounds = useCallback(axisId => {
     const axis = renderedAxes.get(axisId);
     if (!axis || !chartRect) return;
@@ -251,6 +287,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     }
   }, [renderedAxes, chartRect, calculatedInset]);
   const contextValue = useMemo(() => ({
+    layout,
     series: series !== null && series !== void 0 ? series : [],
     getSeries,
     getSeriesData: getStackedSeriesData,
@@ -266,46 +303,73 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     registerAxis,
     unregisterAxis,
     getAxisBounds
-  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  }), [layout, 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]);
+  const legendElement = useMemo(() => {
+    if (!legend) return;
+    if (legend === true) {
+      const isHorizontal = legendPosition === 'top' || legendPosition === 'bottom';
+      const flexDirection = isHorizontal ? 'row' : 'column';
+      return /*#__PURE__*/_jsx(Legend, {
+        accessibilityLabel: legendAccessibilityLabel,
+        flexDirection: flexDirection
+      });
+    }
+    return legend;
+  }, [legend, legendAccessibilityLabel, legendPosition]);
+  const rootBoxProps = useMemo(() => _objectSpread({
+    className: rootClassNames,
+    height,
+    style: rootStyles,
+    width
+  }, props), [rootClassNames, height, rootStyles, width, props]);
+  const chartContent = /*#__PURE__*/_jsx(Box, {
+    ref: node => {
+      observe(node);
+    },
+    height: legend ? undefined : height,
+    style: {
+      flex: 1,
+      minHeight: 0,
+      minWidth: 0
+    },
+    width: legend ? undefined : width,
+    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;
+          }
+        }
+      },
+      accessibilityLabel: accessibilityLabel,
+      "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
+    })
+  });
   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
-        })
+      children: legend ? /*#__PURE__*/_jsxs(Box, _objectSpread(_objectSpread({}, rootBoxProps), {}, {
+        flexDirection: legendPosition === 'top' || legendPosition === 'bottom' ? 'column' : 'row',
+        children: [(legendPosition === 'top' || legendPosition === 'left') && legendElement, chartContent, (legendPosition === 'bottom' || legendPosition === 'right') && legendElement]
+      })) : /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({}, rootBoxProps), {}, {
+        children: chartContent
       }))
     })
   });

package/esm/chart/ChartProvider.js

@@ -1,9 +1,9 @@
 import { createContext, useContext } from 'react';
-const CartesianChartContext = /*#__PURE__*/createContext(undefined);
+export const CartesianChartContext = /*#__PURE__*/createContext(undefined);
 export const useCartesianChartContext = () => {
   const context = useContext(CartesianChartContext);
   if (!context) {
-    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See http://cds.coinbase.com/components/graphs/CartesianChart.');
+    throw new Error('useCartesianChartContext must be used within a CartesianChart component. See https://cds.coinbase.com/components/charts/CartesianChart.');
   }
   return context;
 };