@coinbase/cds-web-visualization 3.3.0 → 3.4.0-beta.2

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

@@ -1,17 +1,30 @@
 import React from 'react';
 import type { ChartGetMarker } from '@coinbase/cds-common';
 import type { SparklineInteractiveBaseProps } from './SparklineInteractive';
-export declare const scrubHandlerStaticClassName = "cds-sparkline--scrubhandler";
+export declare const scrubHandlerStaticClassName = 'cds-sparkline--scrubhandler';
 export declare function fadeInMask(domNode?: HTMLElement | null): void;
-type SparklineInteractiveScrubHandlerWebProps<Period extends string> = Pick<SparklineInteractiveBaseProps<Period>, 'onScrub' | 'formatHoverDate' | 'formatHoverPrice'> & {
-    getMarker: ChartGetMarker;
-    selectedPeriod: Period;
-    onScrubEnd?: () => void;
-    onScrubStart?: () => void;
-    disabled?: boolean;
-    children: React.ReactNode;
+type SparklineInteractiveScrubHandlerWebProps<Period extends string> = Pick<
+  SparklineInteractiveBaseProps<Period>,
+  'onScrub' | 'formatHoverDate' | 'formatHoverPrice'
+> & {
+  getMarker: ChartGetMarker;
+  selectedPeriod: Period;
+  onScrubEnd?: () => void;
+  onScrubStart?: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
 };
-declare const SparklineInteractiveScrubHandlerWithGeneric: <Period extends string>({ onScrubEnd, onScrubStart, children, disabled, onScrub, getMarker, selectedPeriod, formatHoverDate, formatHoverPrice, }: SparklineInteractiveScrubHandlerWebProps<Period>) => import("react/jsx-runtime").JSX.Element;
+declare const SparklineInteractiveScrubHandlerWithGeneric: <Period extends string>({
+  onScrubEnd,
+  onScrubStart,
+  children,
+  disabled,
+  onScrub,
+  getMarker,
+  selectedPeriod,
+  formatHoverDate,
+  formatHoverPrice,
+}: SparklineInteractiveScrubHandlerWebProps<Period>) => import('react/jsx-runtime').JSX.Element;
 export declare const SparklineInteractiveScrubHandler: typeof SparklineInteractiveScrubHandlerWithGeneric;
 export {};
-//# sourceMappingURL=SparklineInteractiveScrubHandler.d.ts.map
+//# sourceMappingURL=SparklineInteractiveScrubHandler.d.ts.map

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

@@ -1,18 +1,18 @@
 import React from 'react';
 import type { Dispatch, SetStateAction } from 'react';
 type SparklineInteractiveScrubContextInterface = {
-    setLineDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
-    setMaskDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
-    setHoverDateDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
-    setHoverPriceDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
-    lineDOMNode: HTMLDivElement | null;
-    maskDOMNode: HTMLDivElement | null;
-    hoverDateDOMNode: HTMLSpanElement | null;
-    hoverPriceDOMNode: HTMLSpanElement | null;
+  setLineDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
+  setMaskDOMNode: Dispatch<SetStateAction<HTMLDivElement | null>>;
+  setHoverDateDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
+  setHoverPriceDOMNode: Dispatch<SetStateAction<HTMLSpanElement | null>>;
+  lineDOMNode: HTMLDivElement | null;
+  maskDOMNode: HTMLDivElement | null;
+  hoverDateDOMNode: HTMLSpanElement | null;
+  hoverPriceDOMNode: HTMLSpanElement | null;
 };
-export declare const SparklineInteractiveScrubProvider: React.MemoExoticComponent<({ children }: {
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element>;
+export declare const SparklineInteractiveScrubProvider: React.MemoExoticComponent<
+  ({ children }: { children: React.ReactNode }) => import('react/jsx-runtime').JSX.Element
+>;
 export declare function useSparklineInteractiveScrubContext(): SparklineInteractiveScrubContextInterface;
 export {};
-//# sourceMappingURL=SparklineInteractiveScrubProvider.d.ts.map
+//# sourceMappingURL=SparklineInteractiveScrubProvider.d.ts.map

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

@@ -2,22 +2,30 @@ import React from 'react';
 import type { ChartDataPoint, ChartTimeseries } from '@coinbase/cds-common/types';
 import type { Area, Line } from 'd3-shape';
 export type TimeseriesPathOnRenderParams = {
-    path: string;
-    area: string;
+  path: string;
+  area: string;
 };
 export type TimeseriesPathProps = {
-    lineFn: Line<ChartDataPoint>;
-    areaFn: Area<ChartDataPoint>;
-    timeseries: ChartTimeseries;
-    initialPath: string;
-    onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+  lineFn: Line<ChartDataPoint>;
+  areaFn: Area<ChartDataPoint>;
+  timeseries: ChartTimeseries;
+  initialPath: string;
+  onRender?: ({ path, area }: TimeseriesPathOnRenderParams) => void;
 };
 export type SparklineInteractiveTimeseriesPathsProps = {
-    initialPath: string;
-    data: ChartTimeseries[];
-    width: number;
-    height: number;
-    onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
+  initialPath: string;
+  data: ChartTimeseries[];
+  width: number;
+  height: number;
+  onRender: ({ path, area }: TimeseriesPathOnRenderParams) => void;
 };
-export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<({ data, width, height, initialPath, onRender }: SparklineInteractiveTimeseriesPathsProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map
+export declare const SparklineInteractiveTimeseriesPaths: React.MemoExoticComponent<
+  ({
+    data,
+    width,
+    height,
+    initialPath,
+    onRender,
+  }: SparklineInteractiveTimeseriesPathsProps) => import('react/jsx-runtime').JSX.Element
+>;
+//# sourceMappingURL=SparklineInteractiveTimeseriesPaths.d.ts.map

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

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=SparklineInteractive.figma.d.ts.map
+//# sourceMappingURL=SparklineInteractive.figma.d.ts.map

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

@@ -1,3 +1,3 @@
 export declare function fadeOut(domNode?: HTMLElement | null): void;
 export declare function fadeIn(domNode?: HTMLElement | null): void;
-//# sourceMappingURL=fade.d.ts.map
+//# sourceMappingURL=fade.d.ts.map

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

@@ -1,13 +1,13 @@
 export declare function useSparklineInteractiveConstants(): {
-    chartWidth: number;
-    chartHeight: number;
-    chartDimensionStyles: {
-        height: number;
-        width: number;
-    };
-    xRange: number[];
-    yRange: number[];
-    startX: number;
-    endX: number;
+  chartWidth: number;
+  chartHeight: number;
+  chartDimensionStyles: {
+    height: number;
+    width: number;
+  };
+  xRange: number[];
+  yRange: number[];
+  startX: number;
+  endX: number;
 };
-//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map
+//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map

package/dts/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.d.ts

@@ -1,104 +1,112 @@
 import React from 'react';
-import type { SharedProps, SparklineInteractiveHeaderSignVariant, SparklineInteractiveHeaderVariant } from '@coinbase/cds-common/types';
+import type {
+  SharedProps,
+  SparklineInteractiveHeaderSignVariant,
+  SparklineInteractiveHeaderVariant,
+} from '@coinbase/cds-common/types';
 export * from '@coinbase/cds-common/types/SparklineInteractiveHeaderBaseProps';
 export type SparklineInteractiveSubHead = {
-    /**
-     * Free form percentage change
-     */
-    percent: string;
-    /**
-     * Sign to denote the change in price
-     */
-    sign: SparklineInteractiveHeaderSignVariant;
-    /**
-     * The variant to use for the price and percentage change
-     */
-    variant: SparklineInteractiveHeaderVariant;
-    /**
-     * Show the dollar amount of price change
-     */
-    priceChange?: string;
-    /**
-     * The accessoryText to show after the price and / or percentage change. An example is "All time"
-     */
-    accessoryText?: string;
-    /**
-     * The accessibilityLabel to show for the price and / or percentage change. This should be localized
-     * @example
-     * // First, configure your i18n strings
-     * const messages = defineMessages({
-     *   subHeadPrefix: {
-     *     id: `${i18nKey}.subHeadPrefix`,
-     *     defaultMessage: 'Price increase in the amount of',
-     *     description: 'A prefix to make it clear which direction the price action was moving',
-     *   }
-     * });
-     *
-     * // then  provide the translated string the accessibilityLabel prop
-     * messages.subHeadPrefix
-     */
-    accessibilityLabel?: string;
+  /**
+   * Free form percentage change
+   */
+  percent: string;
+  /**
+   * Sign to denote the change in price
+   */
+  sign: SparklineInteractiveHeaderSignVariant;
+  /**
+   * The variant to use for the price and percentage change
+   */
+  variant: SparklineInteractiveHeaderVariant;
+  /**
+   * Show the dollar amount of price change
+   */
+  priceChange?: string;
+  /**
+   * The accessoryText to show after the price and / or percentage change. An example is "All time"
+   */
+  accessoryText?: string;
+  /**
+   * The accessibilityLabel to show for the price and / or percentage change. This should be localized
+   * @example
+   * // First, configure your i18n strings
+   * const messages = defineMessages({
+   *   subHeadPrefix: {
+   *     id: `${i18nKey}.subHeadPrefix`,
+   *     defaultMessage: 'Price increase in the amount of',
+   *     description: 'A prefix to make it clear which direction the price action was moving',
+   *   }
+   * });
+   *
+   * // then  provide the translated string the accessibilityLabel prop
+   * messages.subHeadPrefix
+   */
+  accessibilityLabel?: string;
 };
 export type SparklineInteractiveHeaderValues = {
-    /**
-     * Describes what the Header represents e.g. Bitcoin Price
-     */
-    label?: string;
-    /**
-     * Main content of header, this is usually the price
-     */
-    title?: React.ReactNode;
-    /**
-     * Provides additional information about the title, such as a price change
-     */
-    subHead?: SparklineInteractiveSubHead;
+  /**
+   * Describes what the Header represents e.g. Bitcoin Price
+   */
+  label?: string;
+  /**
+   * Main content of header, this is usually the price
+   */
+  title?: React.ReactNode;
+  /**
+   * Provides additional information about the title, such as a price change
+   */
+  subHead?: SparklineInteractiveSubHead;
 };
 export type SparklineInteractiveHeaderRef = {
-    update: (params: SparklineInteractiveHeaderValues) => void;
+  update: (params: SparklineInteractiveHeaderValues) => void;
 };
 export type SparklineInteractiveHeaderProps = SharedProps & {
-    /**
-     * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
-     */
-    defaultTitle: React.ReactNode;
-    /**
-     * Default label, changing this prop has no effect once the default is rendered.
-     */
-    defaultLabel?: string;
-    /**
-     * Default SubHead, changing this prop has no effect once the default is rendered.
-     */
-    defaultSubHead?: SparklineInteractiveSubHead;
-    /**
-     * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
-     */
-    labelNode?: React.ReactNode;
-    /**
-     * Reduce the font size used for the header itself.
-     */
-    compact?: boolean;
+  /**
+   * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+   */
+  defaultTitle: React.ReactNode;
+  /**
+   * Default label, changing this prop has no effect once the default is rendered.
+   */
+  defaultLabel?: string;
+  /**
+   * Default SubHead, changing this prop has no effect once the default is rendered.
+   */
+  defaultSubHead?: SparklineInteractiveSubHead;
+  /**
+   * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+   */
+  labelNode?: React.ReactNode;
+  /**
+   * Reduce the font size used for the header itself.
+   */
+  compact?: boolean;
 };
 export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
-export declare const SparklineInteractiveHeader: React.MemoExoticComponent<React.ForwardRefExoticComponent<SharedProps & {
-    /**
-     * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
-     */
-    defaultTitle: React.ReactNode;
-    /**
-     * Default label, changing this prop has no effect once the default is rendered.
-     */
-    defaultLabel?: string;
-    /**
-     * Default SubHead, changing this prop has no effect once the default is rendered.
-     */
-    defaultSubHead?: SparklineInteractiveSubHead;
-    /**
-     * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
-     */
-    labelNode?: React.ReactNode;
-    /**
-     * Reduce the font size used for the header itself.
-     */
-    compact?: boolean;
-} & React.RefAttributes<SparklineInteractiveHeaderRef>>>;
-//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map
+export declare const SparklineInteractiveHeader: React.MemoExoticComponent<
+  React.ForwardRefExoticComponent<
+    SharedProps & {
+      /**
+       * Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates.
+       */
+      defaultTitle: React.ReactNode;
+      /**
+       * Default label, changing this prop has no effect once the default is rendered.
+       */
+      defaultLabel?: string;
+      /**
+       * Default SubHead, changing this prop has no effect once the default is rendered.
+       */
+      defaultSubHead?: SparklineInteractiveSubHead;
+      /**
+       * Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates.
+       */
+      labelNode?: React.ReactNode;
+      /**
+       * Reduce the font size used for the header itself.
+       */
+      compact?: boolean;
+    } & React.RefAttributes<SparklineInteractiveHeaderRef>
+  >
+>;
+//# sourceMappingURL=SparklineInteractiveHeader.d.ts.map

package/dts/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.d.ts

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map
+//# sourceMappingURL=SparklineInteractiveHeader.figma.d.ts.map

package/esm/chart/CartesianChart.css

@@ -0,0 +1 @@
+.cds-focusStylesCss-f4oy7ru:focus{outline:none;}.cds-focusStylesCss-f4oy7ru:focus-visible{outline:2px solid var(--color-bgPrimary);outline-offset:2px;}

package/esm/chart/CartesianChart.js

@@ -0,0 +1,258 @@
+const _excluded = ["series", "children", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "width", "height", "className", "style"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useCallback, useMemo, useRef } from 'react';
+import { cx } from '@coinbase/cds-web';
+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";
+const focusStylesCss = "cds-focusStylesCss-f4oy7ru";
+export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      children,
+      animate = true,
+      xAxis: xAxisConfigInput,
+      yAxis: yAxisConfigInput,
+      inset: insetInput,
+      enableScrubbing,
+      onScrubberPositionChange,
+      width = '100%',
+      height = '100%',
+      className,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    observe,
+    width: chartWidth,
+    height: chartHeight
+  } = useDimensions();
+  const internalSvgRef = useRef(null);
+  const userInset = useMemo(() => {
+    return getChartInset(insetInput, defaultChartInset);
+  }, [insetInput]);
+
+  // 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 {
+    renderedAxes,
+    registerAxis,
+    unregisterAxis,
+    axisPadding
+  } = useTotalAxisPadding();
+  const chartRect = useMemo(() => {
+    if (chartWidth <= 0 || chartHeight <= 0) return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    const totalInset = {
+      top: userInset.top + axisPadding.top,
+      right: userInset.right + axisPadding.right,
+      bottom: userInset.bottom + axisPadding.bottom,
+      left: userInset.left + axisPadding.left
+    };
+    const availableWidth = chartWidth - totalInset.left - totalInset.right;
+    const availableHeight = chartHeight - totalInset.top - totalInset.bottom;
+    return {
+      x: totalInset.left,
+      y: totalInset.top,
+      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;
+    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
+    };
+    return axisConfig;
+  }, [xAxisConfig, series, chartRect]);
+  const yAxes = useMemo(() => {
+    const axes = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return axes;
+    yAxisConfig.forEach(axisParam => {
+      var _axisParam$id, _series$filter, _axisParam$domainLimi;
+      const axisId = (_axisParam$id = axisParam.id) !== null && _axisParam$id !== void 0 ? _axisParam$id : defaultAxisId;
+
+      // Get relevant series data
+      const relevantSeries = (_series$filter = 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 : [];
+
+      // Calculate domain and range in one pass
+      const domain = getAxisDomain(axisParam, relevantSeries, 'y');
+      const range = getAxisRange(axisParam, chartRect, 'y');
+      axes.set(axisId, {
+        scaleType: axisParam.scaleType,
+        domain,
+        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) => {
+      const scale = getAxisScale({
+        config: axisConfig,
+        type: 'y',
+        range: axisConfig.range,
+        dataDomain: axisConfig.domain
+      });
+      if (scale) {
+        scales.set(axisId, scale);
+      }
+    });
+    return scales;
+  }, [chartRect, yAxes]);
+  const getXAxis = useCallback(() => xAxis, [xAxis]);
+  const getYAxis = useCallback(id => yAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [yAxes]);
+  const getXScale = useCallback(() => xScale, [xScale]);
+  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(() => {
+    if (!series) return new Map();
+    return calculateStackedSeriesData(series);
+  }, [series]);
+  const getStackedSeriesData = useCallback(seriesId => {
+    if (!seriesId) return undefined;
+    return stackedDataMap.get(seriesId);
+  }, [stackedDataMap]);
+  const getAxisBounds = useCallback(axisId => {
+    const axis = renderedAxes.get(axisId);
+    if (!axis || !chartRect) return;
+    const axesAtPosition = Array.from(renderedAxes.values()).filter(a => a.position === axis.position).sort((a, b) => a.id.localeCompare(b.id));
+    const axisIndex = axesAtPosition.findIndex(a => a.id === axisId);
+    if (axisIndex === -1) return;
+
+    // Calculate offset from previous axes at the same position
+    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;
+      return {
+        x: chartRect.x,
+        y: startY,
+        width: chartRect.width,
+        height: axis.size
+      };
+    } else if (axis.position === 'bottom') {
+      // Position below the chart rect, accounting for user inset
+      const startY = chartRect.y + chartRect.height + offsetFromPreviousAxes;
+      return {
+        x: chartRect.x,
+        y: startY,
+        width: chartRect.width,
+        height: axis.size
+      };
+    } else if (axis.position === 'left') {
+      // Position to the left of the chart rect, accounting for user inset
+      const startX = userInset.left + offsetFromPreviousAxes;
+      return {
+        x: startX,
+        y: chartRect.y,
+        width: axis.size,
+        height: chartRect.height
+      };
+    } else {
+      // right - position to the right of the chart rect, accounting for user inset
+      const startX = chartRect.x + chartRect.width + offsetFromPreviousAxes;
+      return {
+        x: startX,
+        y: chartRect.y,
+        width: axis.size,
+        height: chartRect.height
+      };
+    }
+  }, [renderedAxes, chartRect, userInset]);
+  const contextValue = useMemo(() => ({
+    series: series !== null && series !== void 0 ? series : [],
+    getSeries,
+    getSeriesData: getStackedSeriesData,
+    animate,
+    width: chartWidth,
+    height: chartHeight,
+    getXAxis,
+    getYAxis,
+    getXScale,
+    getYScale,
+    drawingArea: chartRect,
+    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
+      })
+    })
+  }));
+}));
+import "./CartesianChart.css";

package/esm/chart/ChartProvider.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+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.');
+  }
+  return context;
+};
+export const CartesianChartProvider = CartesianChartContext.Provider;