@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

package/esm/chart/area/DottedArea.js

@@ -0,0 +1,80 @@
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "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, useMemo } from 'react';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Group, Skia } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
+import { Path } from '../Path';
+import { createGradient, getBaseline } from '../utils';
+import { getDottedAreaPath } from '../utils/path';
+import { usePathTransition } from '../utils/transition';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A customizable dotted area gradient component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
+ */
+export const DottedArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill: fillProp,
+      patternSize = 4,
+      dotSize = 1,
+      peakOpacity = 1,
+      baselineOpacity = 0,
+      baseline,
+      yAxisId,
+      gradient: gradientProp,
+      animate: animateProp,
+      transition
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const {
+    drawingArea,
+    animate,
+    getYAxis
+  } = useCartesianChartContext();
+  const yAxisConfig = getYAxis(yAxisId);
+  const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const dottedPath = useMemo(() => {
+    if (!drawingArea) return '';
+    return getDottedAreaPath({
+      x: drawingArea.x,
+      y: drawingArea.y,
+      width: drawingArea.width,
+      height: drawingArea.height
+    }, patternSize, dotSize);
+  }, [drawingArea, patternSize, dotSize]);
+  const animatedClipPath = usePathTransition({
+    currentPath: d,
+    transition
+  });
+  const staticClipPath = useMemo(() => {
+    var _Skia$Path$MakeFromSV;
+    if (!d) return;
+    return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(d)) != null ? _Skia$Path$MakeFromSV : undefined;
+  }, [d]);
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!yAxisConfig) return;
+    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
+    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
+  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
+  return /*#__PURE__*/_jsx(Group, {
+    clip: animate ? animatedClipPath : staticClipPath,
+    children: /*#__PURE__*/_jsx(Path, _extends({
+      animate: animateProp != null ? animateProp : animate,
+      d: dottedPath,
+      fill: fill,
+      transition: transition
+    }, pathProps, {
+      children: gradient && /*#__PURE__*/_jsx(Gradient, {
+        gradient: gradient,
+        yAxisId: yAxisId
+      })
+    }))
+  });
+});

package/esm/chart/area/GradientArea.js

@@ -0,0 +1,54 @@
+const _excluded = ["d", "fill", "fillOpacity", "gradient", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "animate", "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, useMemo } from 'react';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
+import { Path } from '../Path';
+import { createGradient, getBaseline } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A customizable gradient area component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
+ */
+export const GradientArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill: fillProp,
+      fillOpacity = 1,
+      gradient: gradientProp,
+      peakOpacity = 0.3,
+      baselineOpacity = 0,
+      baseline,
+      yAxisId,
+      animate,
+      transition
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    getYAxis
+  } = useCartesianChartContext();
+  const theme = useTheme();
+  const yAxisConfig = getYAxis(yAxisId);
+  const fill = useMemo(() => fillProp != null ? fillProp : theme.color.fgPrimary, [fillProp, theme.color.fgPrimary]);
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!yAxisConfig) return;
+    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
+    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
+  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
+  return /*#__PURE__*/_jsx(Path, _extends({
+    animate: animate,
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    transition: transition
+  }, pathProps, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      gradient: gradient,
+      yAxisId: yAxisId
+    })
+  }));
+});

package/esm/chart/area/SolidArea.js

@@ -0,0 +1,38 @@
+const _excluded = ["d", "fill", "fillOpacity", "yAxisId", "animate", "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 { 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 area component.
+ * When a gradient is provided, renders with gradient fill.
+ * Otherwise, renders with solid fill.
+ */
+export const SolidArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill,
+      fillOpacity = 1,
+      yAxisId,
+      animate,
+      transition,
+      gradient
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(Path, _extends({
+    animate: animate,
+    d: d,
+    fill: fill != null ? fill : theme.color.fgPrimary,
+    fillOpacity: fillOpacity,
+    transition: transition
+  }, pathProps, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      gradient: gradient,
+      yAxisId: yAxisId
+    })
+  }));
+});

package/esm/chart/area/__stories__/AreaChart.stories.js

@@ -0,0 +1,100 @@
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { DottedLine } from '../../line';
+import { Scrubber } from '../../scrubber/Scrubber';
+import { AreaChart } from '..';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BasicExample = () => {
+  return /*#__PURE__*/_jsx(AreaChart, {
+    enableScrubbing: true,
+    showYAxis: true,
+    height: 400,
+    series: [{
+      id: 'pageViews',
+      data: [24, 13, 98, 39, 48, 38, 43]
+    }],
+    yAxis: {
+      showGrid: true,
+      domain: {
+        min: 0
+      }
+    },
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const StackedExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsx(AreaChart, {
+    enableScrubbing: true,
+    showLines: true,
+    stacked: true,
+    curve: "natural",
+    height: 256,
+    series: [{
+      id: 'currentRewards',
+      data: [100, 150, 200, 280, 380, 500, 650, 820, 1020, 1250, 1510, 1800, 2120, 2470, 2850, 3260, 3700, 4170],
+      color: theme.color.fg
+    }, {
+      id: 'potentialRewards',
+      data: [150, 220, 300, 400, 520, 660, 820, 1000, 1200, 1420, 1660, 1920, 2200, 2500, 2820, 3160, 3520, 3900],
+      color: theme.color.fgPositive,
+      type: 'dotted',
+      LineComponent: DottedLine
+    }],
+    type: "dotted",
+    children: /*#__PURE__*/_jsx(Scrubber, {})
+  });
+};
+const AreaChartStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(BasicExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Stacked",
+      children: /*#__PURE__*/_jsx(StackedExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Negative Values",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: true,
+        showLines: true,
+        showYAxis: true,
+        height: 400,
+        series: [{
+          id: 'pageViews',
+          data: [24, 13, -98, 39, 48, 38, 43]
+        }],
+        type: "solid",
+        yAxis: {
+          showGrid: true
+        },
+        children: /*#__PURE__*/_jsx(Scrubber, {})
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Styles",
+      children: /*#__PURE__*/_jsx(AreaChart, {
+        enableScrubbing: false,
+        height: 350,
+        series: [{
+          id: 'visitors',
+          data: [450, 520, 480, 600, 750, 680, 590],
+          label: 'Weekly Visitors',
+          color: '#fb4d3d',
+          type: 'dotted'
+        }, {
+          id: 'repeatVisitors',
+          data: [250, 200, 150, 140, 100, 80, 50],
+          label: 'Weekly Repeat Visitors',
+          color: '#16a34a'
+        }, {
+          id: 'signups',
+          data: [45, 62, 55, 250, 380, 400, 450],
+          label: 'Weekly Signups',
+          color: '#2563eb',
+          type: 'gradient'
+        }]
+      })
+    })]
+  });
+};
+export default AreaChartStories;

package/esm/chart/area/index.js

@@ -0,0 +1,7 @@
+// codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
+export * from './Area';
+export * from './AreaChart';
+export * from './DottedArea';
+export * from './GradientArea';
+export * from './SolidArea';
+// codegen:end

package/esm/chart/axis/Axis.js

@@ -0,0 +1,45 @@
+/**
+ * Animation variants for grouped axis tick labels - initial mount
+ * Note: Mobile currently doesn't use these variants. Axes render immediately without animation.
+ * Web uses similar variants with delay to match path enter animation timing.
+ */
+export const axisTickLabelsInitialAnimationVariants = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      duration: 0,
+      delay: 0
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.15
+    }
+  }
+};
+
+/**
+ * Animation variants for axis elements - updates (used for both grid lines and tick labels)
+ */
+export const axisUpdateAnimationVariants = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1,
+    transition: {
+      duration: 0.15,
+      delay: 0.15 // For updates: fade out 150ms, then fade in 150ms
+    }
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 0.15
+    }
+  }
+};

package/esm/chart/axis/DefaultAxisTickLabel.js

@@ -0,0 +1,11 @@
+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); }
+import { memo } from 'react';
+import { ChartText } from '../text';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * DefaultAxisTickLabel is the default label component for axis tick labels.
+ * Provides standard styling for both X and Y axis tick labels.
+ */
+export const DefaultAxisTickLabel = /*#__PURE__*/memo(props => {
+  return /*#__PURE__*/_jsx(ChartText, _extends({}, props));
+});

package/esm/chart/axis/XAxis.js

@@ -0,0 +1,188 @@
+const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height"];
+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, useCallback, useEffect, useId, useMemo } from 'react';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Group } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { DottedLine } from '../line/DottedLine';
+import { ReferenceLine } from '../line/ReferenceLine';
+import { SolidLine } from '../line/SolidLine';
+import { ChartText } from '../text/ChartText';
+import { ChartTextGroup } from '../text/ChartTextGroup';
+import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
+import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AXIS_HEIGHT = 32;
+const LABEL_SIZE = 20;
+export const XAxis = /*#__PURE__*/memo(_ref => {
+  let {
+      position = 'bottom',
+      showGrid,
+      requestedTickCount,
+      ticks,
+      tickLabelFormatter,
+      TickLabelComponent = DefaultAxisTickLabel,
+      GridLineComponent = DottedLine,
+      LineComponent = SolidLine,
+      TickMarkLineComponent = SolidLine,
+      tickMarkLabelGap = 2,
+      minTickLabelGap = 4,
+      showTickMarks,
+      showLine,
+      tickMarkSize = 4,
+      tickInterval = 32,
+      tickMinStep = 1,
+      tickMaxStep,
+      label,
+      labelGap = 4,
+      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const registrationId = useId();
+  const {
+    animate,
+    getXScale,
+    getXAxis,
+    registerAxis,
+    unregisterAxis,
+    getAxisBounds
+  } = useCartesianChartContext();
+  const xScale = getXScale();
+  const xAxis = getXAxis();
+  const axisBounds = getAxisBounds(registrationId);
+
+  // Note: gridOpacity not currently used in Skia version
+  // const gridOpacity = useSharedValue(1);
+
+  useEffect(() => {
+    registerAxis(registrationId, position, height);
+    return () => unregisterAxis(registrationId);
+  }, [registrationId, registerAxis, unregisterAxis, position, height]);
+  const formatTick = useCallback(value => {
+    var _tickLabelFormatter;
+    // If we have string labels and no custom formatter, use the labels
+    const axisData = xAxis == null ? void 0 : xAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+    let finalValue = value;
+
+    // For band scales with string data, value is an index
+    if (hasStringLabels && typeof value === 'number' && axisData[value] !== undefined) {
+      finalValue = axisData[value];
+    }
+
+    // Use the formatter (if provided) or the value itself
+    return (_tickLabelFormatter = tickLabelFormatter == null ? void 0 : tickLabelFormatter(finalValue)) != null ? _tickLabelFormatter : finalValue;
+  }, [xAxis == null ? void 0 : xAxis.data, tickLabelFormatter]);
+  const ticksData = useMemo(() => {
+    if (!xScale) return [];
+
+    // Check if we have string labels
+    const axisData = xAxis == null ? void 0 : xAxis.data;
+    const hasStringLabels = axisData && Array.isArray(axisData) && typeof axisData[0] === 'string';
+
+    // For band scales, we need categories
+    let categories;
+    if (hasStringLabels) {
+      categories = axisData;
+    } else if (isCategoricalScale(xScale)) {
+      // For band scales without explicit string data, generate numeric categories
+      // based on the domain of the scale
+      const domain = xScale.domain();
+      categories = domain.map(String);
+    }
+    let possibleTickValues;
+
+    // If we have discrete data, we can use the indices as possible tick values
+    if (axisData && Array.isArray(axisData) && (typeof axisData[0] === 'string' || typeof axisData[0] === 'number' && isCategoricalScale(xScale))) {
+      possibleTickValues = Array.from({
+        length: axisData.length
+      }, (_, i) => i);
+    }
+    return getAxisTicksData({
+      scaleFunction: xScale,
+      ticks,
+      requestedTickCount,
+      categories,
+      possibleTickValues,
+      tickInterval: tickInterval,
+      options: {
+        minStep: tickMinStep,
+        maxStep: tickMaxStep
+      }
+    });
+  }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis == null ? void 0 : xAxis.data]);
+  const chartTextData = useMemo(() => {
+    if (!axisBounds) return null;
+    return ticksData.map(tick => {
+      const tickOffset = tickMarkLabelGap + (showTickMarks ? tickMarkSize : 0);
+
+      // Use AXIS_HEIGHT for centering, not full axisBounds.height
+      // This ensures tick labels are centered in the axis area, not including label space
+      const availableSpace = AXIS_HEIGHT - tickOffset;
+      const labelOffset = availableSpace / 2;
+
+      // For bottom position: start at axisBounds.y
+      // For top position with label: start at axisBounds.y + LABEL_SIZE
+      const baseY = position === 'top' && label ? axisBounds.y + LABEL_SIZE : axisBounds.y;
+      const labelY = position === 'top' ? baseY + labelOffset - tickOffset : baseY + labelOffset + tickOffset;
+      return {
+        x: tick.position,
+        y: labelY,
+        label: String(formatTick(tick.tick)),
+        chartTextProps: {
+          color: theme.color.fgMuted,
+          verticalAlignment: 'middle',
+          horizontalAlignment: 'center'
+        }
+      };
+    });
+  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, label]);
+  if (!xScale || !axisBounds) return;
+  const labelX = axisBounds.x + axisBounds.width / 2;
+  const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
+  return /*#__PURE__*/_jsxs(Group, {
+    children: [showGrid && /*#__PURE__*/_jsx(Group, {
+      children: ticksData.map((tick, index) => {
+        const verticalLine = /*#__PURE__*/_jsx(ReferenceLine, {
+          LineComponent: GridLineComponent,
+          dataX: tick.tick
+        });
+        return /*#__PURE__*/_jsx(Group, {
+          children: verticalLine
+        }, "grid-" + tick.tick + "-" + index);
+      })
+    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
+      children: ticksData.map((tick, index) => {
+        const tickY = position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height;
+        const tickY2 = position === 'bottom' ? axisBounds.y + tickMarkSize : axisBounds.y + axisBounds.height - tickMarkSize;
+        return /*#__PURE__*/_jsx(TickMarkLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(tick.position, tickY, tick.position, tickY2),
+          stroke: theme.color.fg,
+          strokeCap: "square",
+          strokeWidth: 1
+        }, "tick-mark-" + tick.tick + "-" + index);
+      })
+    }), showLine && /*#__PURE__*/_jsx(LineComponent, {
+      animate: false,
+      clipPath: null,
+      d: lineToPath(axisBounds.x, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height, axisBounds.x + axisBounds.width, position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height),
+      stroke: theme.color.fg,
+      strokeCap: "square",
+      strokeWidth: 1
+    }), label && /*#__PURE__*/_jsx(ChartText, {
+      horizontalAlignment: "center",
+      verticalAlignment: "middle",
+      x: labelX,
+      y: labelY,
+      children: label
+    })]
+  });
+});