@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

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

@@ -1,22 +0,0 @@
-type Props = {
-  compact?: boolean;
-};
-export declare function useSparklineInteractiveConstants({ compact }: Props): {
-  chartHorizontalGutter: number;
-  chartWidth: number;
-  chartHeight: number;
-  chartDimensionStyles: {
-    height: number;
-    width: number;
-  };
-  chartMarkerSize: number;
-  SparklineInteractiveMinMaxLabelHeight: number;
-  SparklineInteractiveMinMaxVerticalGutter: number;
-  chartVerticalLineWidth: number;
-  xRange: number[];
-  yRange: number[];
-  startX: number;
-  endX: number;
-};
-export {};
-//# sourceMappingURL=useSparklineInteractiveConstants.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useSparklineInteractiveConstants.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useSparklineInteractiveConstants.ts"],"names":[],"mappings":"AAWA,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,gCAAgC,CAAC,EAAE,OAAe,EAAE,EAAE,KAAK;;;;;;;;;;;;;;;;EAoC1E"}

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

@@ -1,34 +0,0 @@
-export declare function useSparklineInteractiveLineStyles(): {
-  dotStyle: (
-    | {
-        backgroundColor: string;
-        position?: undefined;
-        top?: undefined;
-        left?: undefined;
-        height?: undefined;
-        width?: undefined;
-        borderRadius?: undefined;
-        opacity?: undefined;
-      }
-    | {
-        position: string;
-        top: number;
-        left: number;
-        height: number;
-        width: number;
-        borderRadius: number;
-        opacity: number;
-        backgroundColor?: undefined;
-      }
-  )[];
-  lineProps: {
-    strokeWidth: number;
-    stroke: string;
-    x1: number;
-    x2: number;
-    y1: number;
-    y2: number;
-    strokeDasharray: number[];
-  };
-};
-//# sourceMappingURL=useSparklineInteractiveLineStyles.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useSparklineInteractiveLineStyles.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive/useSparklineInteractiveLineStyles.ts"],"names":[],"mappings":"AAYA,wBAAgB,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BhD"}

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

@@ -1,118 +0,0 @@
-import React from 'react';
-import type { ReactNode } from 'react';
-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;
-};
-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;
-};
-export type SparklineInteractiveHeaderRef = {
-  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;
-};
-export declare const interpolateSubHeadText: (subHead: SparklineInteractiveSubHead) => string;
-export declare const SparklineInteractiveHeader: React.MemoExoticComponent<
-  React.ForwardRefExoticComponent<
-    {
-      /**
-       * Adds content next to the header. This is useful for interactive buttons
-       */
-      trailing?: ReactNode;
-    } & 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/SparklineInteractiveHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SparklineInteractiveHeader.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive-header/SparklineInteractiveHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqE,MAAM,OAAO,CAAC;AAE1F,OAAO,KAAK,EAAqB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EACV,WAAW,EACX,qCAAqC,EACrC,iCAAiC,EAClC,MAAM,4BAA4B,CAAC;AAKpC,cAAc,gEAAgE,CAAC;AAE/E,MAAM,MAAM,2BAA2B,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,qCAAqC,CAAC;IAC5C;;OAEG;IACH,OAAO,EAAE,iCAAiC,CAAC;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;;;;;;;;OAcG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG;IAC7C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,EAAE,CAAC,MAAM,EAAE,gCAAgC,KAAK,IAAI,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,WAAW,GAAG;IAC1D;;OAEG;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,SAAS,2BAA2B,WAQ1E,CAAC;AAwNF,eAAO,MAAM,0BAA0B;IANrC;;OAEG;eACQ,SAAS;;IAnPpB;;OAEG;kBACW,KAAK,CAAC,SAAS;IAC7B;;OAEG;mBACY,MAAM;IACrB;;OAEG;qBACc,2BAA2B;IAC5C;;OAEG;gBACS,KAAK,CAAC,SAAS;IAC3B;;OAEG;cACO,OAAO;wDAuPlB,CAAC"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"SparklineInteractiveHeader.figma.d.ts","sourceRoot":"","sources":["../../../../src/sparkline/sparkline-interactive-header/__figma__/SparklineInteractiveHeader.figma.tsx"],"names":[],"mappings":""}

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

@@ -1,29 +0,0 @@
-import type { StyleProp, TextStyle } from 'react-native';
-import type { SparklineInteractiveSubHead } from './SparklineInteractiveHeader';
-export type SparklineInteractiveSubHeadIconColor = SparklineInteractiveSubHead['variant'];
-export declare const styles: {
-  inputReset: {
-    padding: number;
-    margin: number;
-    backgroundColor: string;
-    overflow: 'visible';
-    lineHeight: undefined;
-  };
-  fullWidth: {
-    width: '100%';
-  };
-  tabularNumbers: {
-    fontVariant: 'tabular-nums'[];
-  };
-};
-export declare function useSparklineInteractiveHeaderStyles(): {
-  readonly title: (text: string) => StyleProp<TextStyle>;
-  readonly label: StyleProp<TextStyle>;
-  readonly subHeadIcon: (color: SparklineInteractiveSubHeadIconColor) => StyleProp<TextStyle>;
-  readonly subHead: (
-    color: SparklineInteractiveSubHeadIconColor,
-    useFullWidth?: boolean,
-  ) => StyleProp<TextStyle>;
-  readonly subHeadAccessory: () => StyleProp<TextStyle>;
-};
-//# sourceMappingURL=useSparklineInteractiveHeaderStyles.d.ts.map

package/dts/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSparklineInteractiveHeaderStyles.d.ts","sourceRoot":"","sources":["../../../src/sparkline/sparkline-interactive-header/useSparklineInteractiveHeaderStyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAEhF,MAAM,MAAM,oCAAoC,GAAG,2BAA2B,CAAC,SAAS,CAAC,CAAC;AA0B1F,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAejB,CAAC;AAEH,wBAAgB,mCAAmC;2BA+B/B,MAAM,KAAG,SAAS,CAAC,SAAS,CAAC;oBA+BtC,SAAS,CAAC,SAAS,CAAC;kCAEJ,oCAAoC,KAAG,SAAS,CAAC,SAAS,CAAC;8BAYvE,oCAAoC,6BAE1C,SAAS,CAAC,SAAS,CAAC;qCAUD,SAAS,CAAC,SAAS,CAAC;EAqB/C"}

package/esm/chart/CartesianChart.js

@@ -1,431 +0,0 @@
-const _excluded = ["series", "children", "layout", "animate", "enableScrubbing", "getScrubberAccessibilityLabel", "scrubberAccessibilityLabelStep", "xAxis", "yAxis", "inset", "onScrubberPositionChange", "legend", "legendPosition", "legendAccessibilityLabel", "width", "height", "style", "styles", "allowOverflowGestures", "fontFamilies", "fontProvider", "collapsable", "accessible", "accessibilityLabel", "accessibilityLiveRegion"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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 } from 'react';
-import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
-import { Box } from '@coinbase/cds-mobile/layout';
-import { Canvas, Skia } from '@shopify/react-native-skia';
-import { ScrubberAccessibilityView } from './scrubber/ScrubberAccessibilityView';
-import { ScrubberProvider } from './scrubber/ScrubberProvider';
-import { convertToSerializableScale } from './utils/scale';
-import { useChartContextBridge } from './ChartContextBridge';
-import { CartesianChartProvider } from './ChartProvider';
-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 ChartCanvas = /*#__PURE__*/memo(_ref => {
-  let {
-    children,
-    style,
-    accessible = true,
-    accessibilityLabel,
-    accessibilityLiveRegion = 'polite'
-  } = _ref;
-  const ContextBridge = useChartContextBridge();
-  const isAccessible = accessible && accessibilityLabel !== null;
-  return /*#__PURE__*/_jsx(Canvas, {
-    accessibilityLabel: isAccessible ? accessibilityLabel : undefined,
-    accessibilityLiveRegion: isAccessible ? accessibilityLiveRegion : undefined,
-    accessible: isAccessible,
-    style: [{
-      width: '100%',
-      height: '100%'
-    }, style],
-    children: /*#__PURE__*/_jsx(ContextBridge, {
-      children: children
-    })
-  });
-});
-export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-      series,
-      children,
-      layout = 'vertical',
-      animate = true,
-      enableScrubbing,
-      getScrubberAccessibilityLabel,
-      scrubberAccessibilityLabelStep,
-      xAxis: xAxisConfigProp,
-      yAxis: yAxisConfigProp,
-      inset,
-      onScrubberPositionChange,
-      legend,
-      legendPosition = 'bottom',
-      legendAccessibilityLabel,
-      width = '100%',
-      height = '100%',
-      style,
-      styles,
-      allowOverflowGestures,
-      fontFamilies,
-      fontProvider: fontProviderProp,
-      // React Native will collapse views by default when only used
-      // to group children, which interferes with gesture-handler
-      // https://docs.swmansion.com/react-native-gesture-handler/docs/gestures/gesture-detector/#:~:text=%7B%0A%20%20return%20%3C-,View,-collapsable%3D%7B
-      collapsable = false,
-      accessible = true,
-      accessibilityLabel,
-      accessibilityLiveRegion = 'polite'
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  const [containerLayout, onContainerLayout] = useLayout();
-  const chartWidth = containerLayout.width;
-  const chartHeight = containerLayout.height;
-  const calculatedInset = useMemo(() => getChartInset(inset, layout === 'horizontal' ? defaultHorizontalLayoutChartInset : defaultVerticalLayoutChartInset), [inset, layout]);
-  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,
-    unregisterAxis,
-    axisPadding
-  } = useTotalAxisPadding();
-  const totalInset = useMemo(() => ({
-    top: calculatedInset.top + axisPadding.top,
-    right: calculatedInset.right + axisPadding.right,
-    bottom: calculatedInset.bottom + axisPadding.bottom,
-    left: calculatedInset.left + axisPadding.left
-  }), [calculatedInset, axisPadding]);
-  const chartRect = useMemo(() => {
-    if (chartWidth <= 0 || chartHeight <= 0) return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    };
-    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, totalInset]);
-  const {
-    xAxes,
-    xScales
-  } = useMemo(() => {
-    const axes = new Map();
-    const scales = new Map();
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
-      xAxes: axes,
-      xScales: scales
-    };
-    xAxisConfig.forEach(axisParam => {
-      var _axisParam$id, _series$filter, _axisParam$domainLimi;
-      const axisId = (_axisParam$id = axisParam.id) != null ? _axisParam$id : defaultAxisId;
-
-      // Get relevant series data.
-      const relevantSeries = xAxisConfig.length > 1 ? (_series$filter = series == null ? void 0 : series.filter(s => {
-        var _s$xAxisId;
-        return ((_s$xAxisId = s.xAxisId) != null ? _s$xAxisId : defaultAxisId) === axisId;
-      })) != null ? _series$filter : [] : series != null ? series : [];
-
-      // 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 : layout === 'horizontal' ? 'nice' : 'strict',
-        baseline: axisParam.baseline
-      };
-
-      // 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, _extends({}, axisConfig, {
-          domain: actualDomain
-        }));
-      }
-    });
-    return {
-      xAxes: axes,
-      xScales: scales
-    };
-  }, [xAxisConfig, series, chartRect, layout]);
-
-  // We need a set of serialized scales usable in UI thread.
-  const xSerializableScales = useMemo(() => {
-    const serializableScales = new Map();
-    xScales.forEach((scale, id) => {
-      const serializableScale = convertToSerializableScale(scale);
-      if (serializableScale) {
-        serializableScales.set(id, serializableScale);
-      }
-    });
-    return serializableScales;
-  }, [xScales]);
-  const {
-    yAxes,
-    yScales
-  } = useMemo(() => {
-    const axes = new Map();
-    const scales = new Map();
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
-      yAxes: axes,
-      yScales: scales
-    };
-    yAxisConfig.forEach(axisParam => {
-      var _axisParam$id2, _series$filter2, _axisParam$domainLimi2;
-      const axisId = (_axisParam$id2 = axisParam.id) != null ? _axisParam$id2 : defaultAxisId;
-
-      // Get relevant series data.
-      const relevantSeries = yAxisConfig.length > 1 ? (_series$filter2 = series == null ? void 0 : series.filter(s => {
-        var _s$yAxisId;
-        return ((_s$yAxisId = s.yAxisId) != null ? _s$yAxisId : defaultAxisId) === axisId;
-      })) != null ? _series$filter2 : [] : series != null ? series : [];
-
-      // Calculate domain and range.
-      const dataDomain = getCartesianAxisDomain(axisParam, relevantSeries, 'y', layout);
-      const range = getAxisRange(axisParam, chartRect, 'y');
-      const axisConfig = {
-        scaleType: axisParam.scaleType,
-        domain: dataDomain,
-        range,
-        data: axisParam.data,
-        categoryPadding: axisParam.categoryPadding,
-        domainLimit: (_axisParam$domainLimi2 = axisParam.domainLimit) != null ? _axisParam$domainLimi2 : layout === 'horizontal' ? 'strict' : 'nice',
-        baseline: axisParam.baseline
-      };
-
-      // Create the scale.
-      const scale = getCartesianAxisScale({
-        config: axisConfig,
-        type: 'y',
-        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, _extends({}, axisConfig, {
-          domain: actualDomain
-        }));
-      }
-    });
-    return {
-      yAxes: axes,
-      yScales: scales
-    };
-  }, [yAxisConfig, series, chartRect, layout]);
-
-  // We need a set of serialized scales usable in UI thread
-  const ySerializableScales = useMemo(() => {
-    const serializableScales = new Map();
-    yScales.forEach((scale, id) => {
-      const serializableScale = convertToSerializableScale(scale);
-      if (serializableScale) {
-        serializableScales.set(id, serializableScale);
-      }
-    });
-    return serializableScales;
-  }, [yScales]);
-  const getXAxis = useCallback(id => xAxes.get(id != null ? id : defaultAxisId), [xAxes]);
-  const getYAxis = useCallback(id => yAxes.get(id != null ? id : defaultAxisId), [yAxes]);
-  const getXScale = useCallback(id => xScales.get(id != null ? id : defaultAxisId), [xScales]);
-  const getYScale = useCallback(id => yScales.get(id != null ? id : defaultAxisId), [yScales]);
-  const getXSerializableScale = useCallback(id => xSerializableScales.get(id != null ? id : defaultAxisId), [xSerializableScales]);
-  const getYSerializableScale = useCallback(id => ySerializableScales.get(id != null ? id : defaultAxisId), [ySerializableScales]);
-  const getSeries = useCallback(seriesId => series == null ? void 0 : series.find(s => s.id === seriesId), [series]);
-  const stackedDataMap = useMemo(() => {
-    if (!series) return new Map();
-    return calculateStackedSeriesData(series, layout, xAxisConfig, yAxisConfig);
-  }, [series, layout, xAxisConfig, yAxisConfig]);
-  const getStackedSeriesData = useCallback(seriesId => {
-    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$ : yAxisConfig[0] : (_yAxisConfig$ = yAxisConfig[0]) != null ? _yAxisConfig$ : xAxisConfig[0];
-  }, [categoryAxisIsX, xAxisConfig, yAxisConfig]);
-  const dataLength = useMemo(() => {
-    // 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.
-    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 ? void 0 : seriesData.length) != null ? _seriesData$length : 0);
-    }, 0);
-  }, [categoryAxisConfig, series, getStackedSeriesData]);
-  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 = calculatedInset.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 = calculatedInset.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, calculatedInset]);
-  const fontProvider = useMemo(() => {
-    if (fontProviderProp) return fontProviderProp;
-    return Skia.TypefaceFontProvider.Make();
-  }, [fontProviderProp]);
-  const contextValue = useMemo(() => ({
-    layout,
-    series: series != null ? series : [],
-    getSeries,
-    getSeriesData: getStackedSeriesData,
-    animate,
-    width: chartWidth,
-    height: chartHeight,
-    fontFamilies,
-    fontProvider,
-    getXAxis,
-    getYAxis,
-    getXScale,
-    getYScale,
-    getXSerializableScale,
-    getYSerializableScale,
-    drawingArea: chartRect,
-    dataLength,
-    registerAxis,
-    unregisterAxis,
-    getAxisBounds
-  }), [layout, series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, fontFamilies, fontProvider, getXAxis, getYAxis, getXScale, getYScale, getXSerializableScale, getYSerializableScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
-  const rootStyles = useMemo(() => {
-    return [style, styles == null ? void 0 : styles.root];
-  }, [style, styles == null ? 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(() => _extends({
-    ref,
-    height,
-    style: rootStyles,
-    width
-  }, props), [ref, height, rootStyles, width, props]);
-  return /*#__PURE__*/_jsx(CartesianChartProvider, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx(ScrubberProvider, {
-      allowOverflowGestures: allowOverflowGestures,
-      enableScrubbing: enableScrubbing,
-      onScrubberPositionChange: onScrubberPositionChange,
-      children: legend ? /*#__PURE__*/_jsxs(Box, _extends({
-        flexDirection: legendPosition === 'top' || legendPosition === 'bottom' ? 'column' : 'row'
-      }, rootBoxProps, {
-        children: [(legendPosition === 'top' || legendPosition === 'left') && legendElement, /*#__PURE__*/_jsxs(Box, {
-          collapsable: collapsable,
-          onLayout: onContainerLayout,
-          style: {
-            flex: 1
-          },
-          children: [/*#__PURE__*/_jsx(ChartCanvas, {
-            accessibilityLabel: accessibilityLabel,
-            accessibilityLiveRegion: accessibilityLiveRegion,
-            accessible: accessible,
-            style: styles == null ? void 0 : styles.chart,
-            children: children
-          }), /*#__PURE__*/_jsx(ScrubberAccessibilityView, {
-            accessibilityLabel: getScrubberAccessibilityLabel,
-            accessibilityStep: scrubberAccessibilityLabelStep
-          })]
-        }), (legendPosition === 'bottom' || legendPosition === 'right') && legendElement]
-      })) : /*#__PURE__*/_jsxs(Box, _extends({
-        collapsable: collapsable,
-        onLayout: onContainerLayout
-      }, rootBoxProps, {
-        children: [/*#__PURE__*/_jsx(ChartCanvas, {
-          accessibilityLabel: accessibilityLabel,
-          accessibilityLiveRegion: accessibilityLiveRegion,
-          accessible: accessible,
-          style: styles == null ? void 0 : styles.chart,
-          children: children
-        }), /*#__PURE__*/_jsx(ScrubberAccessibilityView, {
-          accessibilityLabel: getScrubberAccessibilityLabel,
-          accessibilityStep: scrubberAccessibilityLabelStep
-        })]
-      }))
-    })
-  });
-}));