@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

package/esm/chart/line/Line.js

@@ -1,180 +0,0 @@
-const _excluded = ["seriesId", "curve", "type", "areaType", "stroke", "strokeOpacity", "showArea", "LineComponent", "AreaComponent", "opacity", "points", "connectNulls", "transitions", "transition", "gradient"];
-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, { memo, useMemo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile';
-import { Group } from '@shopify/react-native-skia';
-import { Area } from '../area/Area';
-import { useCartesianChartContext } from '../ChartProvider';
-import { Point } from '../point';
-import { getLineData, getLinePath } from '../utils';
-import { evaluateGradientAtValue, getGradientStops } from '../utils/gradient';
-import { convertToSerializableScale } from '../utils/scale';
-import { DottedLine } from './DottedLine';
-import { SolidLine } from './SolidLine';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const Line = /*#__PURE__*/memo(_ref => {
-  var _ref2;
-  let {
-      seriesId,
-      curve = 'bump',
-      type = 'solid',
-      areaType = 'gradient',
-      stroke: strokeProp,
-      strokeOpacity,
-      showArea,
-      LineComponent: SelectedLineComponent,
-      AreaComponent,
-      opacity = 1,
-      points,
-      connectNulls,
-      transitions,
-      transition,
-      gradient: gradientProp
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  const {
-    layout,
-    animate,
-    getSeries,
-    getSeriesData,
-    getXScale,
-    getYScale,
-    getXAxis,
-    getYAxis
-  } = useCartesianChartContext();
-  const matchedSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
-  const gradient = useMemo(() => gradientProp != null ? gradientProp : matchedSeries == null ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries == null ? void 0 : matchedSeries.gradient]);
-  const sourceData = useMemo(() => getSeriesData(seriesId), [getSeriesData, seriesId]);
-  const xAxis = useMemo(() => getXAxis(matchedSeries == null ? void 0 : matchedSeries.xAxisId), [getXAxis, matchedSeries == null ? void 0 : matchedSeries.xAxisId]);
-  const xScale = useMemo(() => getXScale(matchedSeries == null ? void 0 : matchedSeries.xAxisId), [getXScale, matchedSeries == null ? void 0 : matchedSeries.xAxisId]);
-  const yScale = useMemo(() => getYScale(matchedSeries == null ? void 0 : matchedSeries.yAxisId), [getYScale, matchedSeries == null ? void 0 : matchedSeries.yAxisId]);
-  const yAxis = useMemo(() => getYAxis(matchedSeries == null ? void 0 : matchedSeries.yAxisId), [getYAxis, matchedSeries == null ? void 0 : matchedSeries.yAxisId]);
-
-  // Convert sourceData to number array (line only supports numbers, not tuples)
-  const chartData = useMemo(() => getLineData(sourceData), [sourceData]);
-  const categoryAxisIsX = useMemo(() => {
-    return layout !== 'horizontal';
-  }, [layout]);
-  const categoryAxis = useMemo(() => {
-    return categoryAxisIsX ? xAxis : yAxis;
-  }, [categoryAxisIsX, xAxis, yAxis]);
-  const path = useMemo(() => {
-    if (!xScale || !yScale || chartData.length === 0) return '';
-
-    // Get numeric category-axis data if available.
-    const indexData = categoryAxis != null && categoryAxis.data && Array.isArray(categoryAxis.data) && typeof categoryAxis.data[0] === 'number' ? categoryAxis.data : undefined;
-    return getLinePath({
-      data: chartData,
-      xScale,
-      yScale,
-      curve,
-      xData: categoryAxisIsX ? indexData : undefined,
-      yData: !categoryAxisIsX ? indexData : undefined,
-      connectNulls,
-      layout
-    });
-  }, [xScale, yScale, chartData, categoryAxis, curve, categoryAxisIsX, connectNulls, layout]);
-  const LineComponent = useMemo(() => {
-    if (SelectedLineComponent) {
-      return SelectedLineComponent;
-    }
-    switch (type) {
-      case 'dotted':
-        return DottedLine;
-      default:
-        return SolidLine;
-    }
-  }, [SelectedLineComponent, type]);
-
-  // Get series color for stroke
-  const stroke = (_ref2 = strokeProp != null ? strokeProp : matchedSeries == null ? void 0 : matchedSeries.color) != null ? _ref2 : theme.color.fgPrimary;
-  const categoryData = useMemo(() => {
-    const data = categoryAxis == null ? void 0 : categoryAxis.data;
-    return data && Array.isArray(data) && data.length > 0 && typeof data[0] === 'number' ? data : null;
-  }, [categoryAxis]);
-  const gradientConfig = useMemo(() => {
-    if (!gradient || !xScale || !yScale) return;
-    const gradientScale = gradient.axis === 'x' ? xScale : yScale;
-    const serializableScale = convertToSerializableScale(gradientScale);
-    if (!serializableScale) return;
-    const domain = {
-      min: serializableScale.domain[0],
-      max: serializableScale.domain[1]
-    };
-    const stops = getGradientStops(gradient.stops, domain);
-    return {
-      scale: serializableScale,
-      stops
-    };
-  }, [gradient, xScale, yScale]);
-  if (!xScale || !yScale || !path) return;
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [showArea && /*#__PURE__*/_jsx(Area, {
-      AreaComponent: AreaComponent,
-      connectNulls: connectNulls,
-      curve: curve,
-      fill: stroke,
-      fillOpacity: opacity,
-      gradient: gradient,
-      seriesId: seriesId,
-      transition: transition,
-      transitions: transitions,
-      type: areaType
-    }), /*#__PURE__*/_jsx(LineComponent, _extends({
-      d: path,
-      gradient: gradient,
-      stroke: stroke,
-      strokeOpacity: strokeOpacity != null ? strokeOpacity : opacity,
-      transition: transition,
-      transitions: transitions,
-      xAxisId: matchedSeries == null ? void 0 : matchedSeries.xAxisId,
-      yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
-    }, props)), points && /*#__PURE__*/_jsx(Group, {
-      children: chartData.map((value, index) => {
-        if (value === null) return;
-        const indexValue = categoryData && categoryData[index] !== undefined ? categoryData[index] : index;
-        let pointFill = stroke;
-        if (gradientConfig && gradient) {
-          var _gradient$axis;
-          // Match gradient sampling to the chart axis roles for each layout.
-          const gradientAxis = (_gradient$axis = gradient.axis) != null ? _gradient$axis : 'y';
-          const dataValue = gradientAxis === 'x' ? categoryAxisIsX ? indexValue : value : categoryAxisIsX ? value : indexValue;
-          const evaluatedColor = evaluateGradientAtValue(gradientConfig.stops, dataValue, gradientConfig.scale);
-          if (evaluatedColor) {
-            // Apply gradient color to fill if not explicitly set
-            pointFill = evaluatedColor;
-          }
-        }
-
-        // Build defaults that would be passed to Point
-        const defaults = {
-          dataX: categoryAxisIsX ? indexValue : value,
-          dataY: categoryAxisIsX ? value : indexValue,
-          fill: pointFill,
-          xAxisId: matchedSeries == null ? void 0 : matchedSeries.xAxisId,
-          yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId,
-          opacity
-        };
-
-        // If points is true, render with defaults
-        if (points === true) {
-          return /*#__PURE__*/_jsx(Point, _extends({
-            transition: transition,
-            transitions: transitions
-          }, defaults), seriesId + "-" + index);
-        }
-
-        // Call the function with defaults
-        const result = points(defaults);
-        if (!result) return;
-        const pointConfig = result === true ? {} : result;
-        return /*#__PURE__*/_jsx(Point, _extends({
-          transition: transition,
-          transitions: transitions
-        }, defaults, pointConfig), seriesId + "-" + index);
-      })
-    })]
-  });
-});

package/esm/chart/line/LineChart.js

@@ -1,149 +0,0 @@
-const _excluded = ["series", "showArea", "areaType", "type", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "transitions", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "scrubberAccessibilityLabelStep", "layout", "children"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
-  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
-  _excluded4 = ["id", "data", "label", "color", "xAxisId", "yAxisId"];
-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 { forwardRef, memo, useMemo } from 'react';
-import { XAxis } from '../axis/XAxis';
-import { YAxis } from '../axis/YAxis';
-import { CartesianChart } from '../CartesianChart';
-import { Line } from './Line';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getDefaultScrubberAccessibilityStep = function (dataLength, sampleCount) {
-  if (sampleCount === void 0) {
-    sampleCount = 10;
-  }
-  if (dataLength <= 0) return 1;
-  return Math.max(1, Math.ceil(dataLength / sampleCount));
-};
-export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-      series,
-      showArea,
-      areaType,
-      type,
-      LineComponent,
-      AreaComponent,
-      curve,
-      points,
-      strokeWidth,
-      strokeOpacity,
-      connectNulls,
-      transition,
-      transitions,
-      opacity,
-      showXAxis,
-      showYAxis,
-      xAxis,
-      yAxis,
-      inset,
-      scrubberAccessibilityLabelStep,
-      layout = 'vertical',
-      children
-    } = _ref,
-    chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // Convert LineSeries to Series for Chart context
-  const chartSeries = useMemo(() => {
-    return series == null ? void 0 : series.map(s => ({
-      id: s.id,
-      data: s.data,
-      label: s.label,
-      color: s.color,
-      xAxisId: s.xAxisId,
-      yAxisId: s.yAxisId,
-      stackId: s.stackId,
-      gradient: s.gradient,
-      legendShape: s.legendShape
-    }));
-  }, [series]);
-
-  // Split axis props into config props for Chart and visual props for axis components
-  const _ref2 = xAxis || {},
-    {
-      scaleType: xScaleType,
-      data: xData,
-      categoryPadding: xCategoryPadding,
-      domain: xDomain,
-      domainLimit: xDomainLimit,
-      range: xRange,
-      baseline: xBaseline,
-      id: xAxisId
-    } = _ref2,
-    xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  const _ref3 = yAxis || {},
-    {
-      scaleType: yScaleType,
-      data: yData,
-      categoryPadding: yCategoryPadding,
-      domain: yDomain,
-      domainLimit: yDomainLimit,
-      range: yRange,
-      baseline: yBaseline,
-      id: yAxisId
-    } = _ref3,
-    yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  const xAxisConfig = {
-    scaleType: xScaleType,
-    data: xData,
-    categoryPadding: xCategoryPadding,
-    domain: xDomain,
-    domainLimit: xDomainLimit,
-    range: xRange,
-    baseline: xBaseline
-  };
-  const yAxisConfig = {
-    scaleType: yScaleType,
-    data: yData,
-    categoryPadding: yCategoryPadding,
-    domain: yDomain,
-    domainLimit: yDomainLimit,
-    range: yRange,
-    baseline: yBaseline
-  };
-  const categoryAxisData = layout === 'horizontal' ? yData : xData;
-  const lineChartDataLength = useMemo(() => {
-    if (categoryAxisData && categoryAxisData.length > 0) return categoryAxisData.length;
-    if (!series || series.length === 0) return 0;
-    return series.reduce((max, s) => {
-      var _s$data$length, _s$data;
-      return Math.max(max, (_s$data$length = (_s$data = s.data) == null ? void 0 : _s$data.length) != null ? _s$data$length : 0);
-    }, 0);
-  }, [categoryAxisData, series]);
-  const resolvedScrubberAccessibilityLabelStep = useMemo(() => scrubberAccessibilityLabelStep != null ? scrubberAccessibilityLabelStep : getDefaultScrubberAccessibilityStep(lineChartDataLength), [scrubberAccessibilityLabelStep, lineChartDataLength]);
-  return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
-    ref: ref,
-    inset: inset,
-    layout: layout,
-    scrubberAccessibilityLabelStep: resolvedScrubberAccessibilityLabelStep,
-    series: chartSeries,
-    xAxis: xAxisConfig,
-    yAxis: yAxisConfig,
-    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({
-      axisId: xAxisId
-    }, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
-      axisId: yAxisId
-    }, yAxisVisualProps)), series == null ? void 0 : series.map(_ref4 => {
-      let {
-          id
-        } = _ref4,
-        linePropsFromSeries = _objectWithoutPropertiesLoose(_ref4, _excluded4);
-      return /*#__PURE__*/_jsx(Line, _extends({
-        AreaComponent: AreaComponent,
-        LineComponent: LineComponent,
-        areaType: areaType,
-        connectNulls: connectNulls,
-        curve: curve,
-        opacity: opacity,
-        points: points,
-        seriesId: id,
-        showArea: showArea,
-        strokeOpacity: strokeOpacity,
-        strokeWidth: strokeWidth,
-        transition: transition,
-        transitions: transitions,
-        type: type
-      }, linePropsFromSeries), id);
-    }), children]
-  }));
-}));

package/esm/chart/line/ReferenceLine.js

@@ -1,132 +0,0 @@
-import { memo } from 'react';
-import { useDerivedValue } from 'react-native-reanimated';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useCartesianChartContext } from '../ChartProvider';
-import { unwrapAnimatedValue } from '../utils';
-import { getPointOnSerializableScale } from '../utils/point';
-import { DefaultReferenceLineLabel } from './DefaultReferenceLineLabel';
-import { DottedLine } from './DottedLine';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const ReferenceLine = /*#__PURE__*/memo(_ref => {
-  let {
-    dataX,
-    dataY,
-    yAxisId,
-    label,
-    labelPosition = dataY !== undefined ? 'right' : 'top',
-    LineComponent = DottedLine,
-    LabelComponent = DefaultReferenceLineLabel,
-    labelElevated,
-    labelFont,
-    labelDx,
-    labelDy,
-    labelHorizontalAlignment,
-    labelVerticalAlignment,
-    labelBoundsInset,
-    stroke,
-    opacity = 1
-  } = _ref;
-  const theme = useTheme();
-  const {
-    getXSerializableScale,
-    getYSerializableScale,
-    drawingArea
-  } = useCartesianChartContext();
-  const xScale = getXSerializableScale();
-  const yScale = getYSerializableScale(yAxisId);
-  const effectiveLineStroke = stroke != null ? stroke : theme.color.bgLine;
-
-  // For horizontal lines (dataY defined): default to verticalAlignment: 'middle'
-  // For vertical lines (dataX defined): default to horizontalAlignment: 'center'
-  const isHorizontal = dataY !== undefined;
-  const xPixel = useDerivedValue(() => {
-    const dataXValue = unwrapAnimatedValue(dataX);
-    return dataXValue !== undefined && xScale ? getPointOnSerializableScale(dataXValue, xScale) : undefined;
-  }, [dataX, xScale]);
-  const yPixel = useDerivedValue(() => {
-    const dataYValue = unwrapAnimatedValue(dataY);
-    return dataYValue !== undefined && yScale ? getPointOnSerializableScale(dataYValue, yScale) : undefined;
-  }, [dataY, yScale]);
-  const horizontalLine = useDerivedValue(() => {
-    if (yPixel.value === undefined) return;
-    return "M" + drawingArea.x + "," + yPixel.value + " L" + (drawingArea.x + drawingArea.width) + "," + yPixel.value;
-  }, [drawingArea, yPixel]);
-  const verticalLine = useDerivedValue(() => {
-    if (xPixel.value === undefined) return;
-    return "M" + xPixel.value + "," + drawingArea.y + " L" + xPixel.value + "," + (drawingArea.y + drawingArea.height);
-  }, [drawingArea, xPixel]);
-  const labelXPixel = useDerivedValue(() => {
-    var _xPixel$value;
-    return (_xPixel$value = xPixel.value) != null ? _xPixel$value : 0;
-  }, [xPixel]);
-  const labelYPixel = useDerivedValue(() => {
-    var _yPixel$value;
-    return (_yPixel$value = yPixel.value) != null ? _yPixel$value : 0;
-  }, [yPixel]);
-  const labelOpacity = useDerivedValue(() => {
-    const isVisible = dataY !== undefined && yPixel.value !== undefined || dataX !== undefined && xPixel.value !== undefined;
-    return isVisible ? unwrapAnimatedValue(opacity) : 0;
-  }, [yPixel, xPixel, opacity]);
-  if (dataY !== undefined) {
-    let labelX;
-    if (labelPosition === 'left') {
-      labelX = drawingArea.x;
-    } else if (labelPosition === 'center') {
-      labelX = drawingArea.x + drawingArea.width / 2;
-    } else {
-      labelX = drawingArea.x + drawingArea.width;
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(LineComponent, {
-        animate: false,
-        d: horizontalLine,
-        stroke: effectiveLineStroke,
-        strokeOpacity: opacity
-      }), label && /*#__PURE__*/_jsx(LabelComponent, {
-        boundsInset: labelBoundsInset,
-        dx: labelDx,
-        dy: labelDy,
-        elevated: labelElevated,
-        font: labelFont,
-        horizontalAlignment: labelHorizontalAlignment,
-        opacity: labelOpacity,
-        verticalAlignment: labelVerticalAlignment != null ? labelVerticalAlignment : isHorizontal ? 'middle' : undefined,
-        x: labelX,
-        y: labelYPixel,
-        children: label
-      })]
-    });
-  }
-
-  // Vertical reference line logic
-  if (dataX !== undefined) {
-    let labelY;
-    if (labelPosition === 'top') {
-      labelY = drawingArea.y;
-    } else if (labelPosition === 'middle') {
-      labelY = drawingArea.y + drawingArea.height / 2;
-    } else {
-      labelY = drawingArea.y + drawingArea.height;
-    }
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(LineComponent, {
-        animate: false,
-        d: verticalLine,
-        stroke: effectiveLineStroke,
-        strokeOpacity: opacity
-      }), label && /*#__PURE__*/_jsx(LabelComponent, {
-        boundsInset: labelBoundsInset,
-        dx: labelDx,
-        dy: labelDy,
-        elevated: labelElevated,
-        font: labelFont,
-        horizontalAlignment: labelHorizontalAlignment != null ? labelHorizontalAlignment : !isHorizontal ? 'center' : undefined,
-        opacity: labelOpacity,
-        verticalAlignment: labelVerticalAlignment,
-        x: labelXPixel,
-        y: labelY,
-        children: label
-      })]
-    });
-  }
-});

package/esm/chart/line/SolidLine.js

@@ -1,53 +0,0 @@
-const _excluded = ["fill", "stroke", "strokeCap", "strokeJoin", "strokeOpacity", "strokeWidth", "gradient", "xAxisId", "yAxisId", "d", "animate", "transitions", "transition"];
-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 { memo } from 'react';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Gradient } from '../gradient';
-import { Path } from '../Path';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A customizable solid line component.
- * Supports gradient for gradient effects and smooth data transitions via AnimatedPath.
- */
-export const SolidLine = /*#__PURE__*/memo(_ref => {
-  var _transitions$update;
-  let {
-      fill = 'none',
-      stroke,
-      strokeCap = 'round',
-      strokeJoin = 'round',
-      strokeOpacity = 1,
-      strokeWidth = 2,
-      gradient,
-      xAxisId,
-      yAxisId,
-      d,
-      animate,
-      transitions,
-      transition
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const theme = useTheme();
-  return /*#__PURE__*/_jsx(Path, _extends({
-    animate: animate,
-    clipOffset: strokeWidth,
-    d: d,
-    fill: fill,
-    stroke: stroke != null ? stroke : theme.color.fgPrimary,
-    strokeCap: strokeCap,
-    strokeJoin: strokeJoin,
-    strokeOpacity: strokeOpacity,
-    strokeWidth: strokeWidth,
-    transition: transition,
-    transitions: transitions
-  }, props, {
-    children: gradient && /*#__PURE__*/_jsx(Gradient, {
-      animate: animate,
-      gradient: gradient,
-      transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
-      xAxisId: xAxisId,
-      yAxisId: yAxisId
-    })
-  }));
-});