@coinbase/cds-mobile-visualization 0.0.0 → 3.4.0-beta.1

package/esm/chart/Point.js

@@ -0,0 +1,111 @@
+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, useEffect, useMemo } from 'react';
+import { Circle, G } from 'react-native-svg';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from './ChartProvider';
+import { ChartText } from './text';
+import { projectPoint, useScrubberContext } from './utils';
+
+/**
+ * Parameters passed to renderPoints callback function.
+ */
+
+/**
+ * Shared configuration for point appearance and behavior.
+ * Used by line-associated points rendered via Line/LineChart components.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const Point = /*#__PURE__*/memo(_ref => {
+  let {
+    dataX,
+    dataY,
+    yAxisId,
+    fill,
+    radius = 4,
+    opacity,
+    onPress,
+    onScrubberEnter,
+    stroke,
+    strokeWidth = 2,
+    accessibilityLabel,
+    label,
+    labelProps,
+    pixelCoordinates,
+    testID
+  } = _ref;
+  const theme = useTheme();
+  const effectiveStroke = stroke != null ? stroke : theme.color.bg;
+  const {
+    getXScale,
+    getYScale
+  } = useCartesianChartContext();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const xScale = getXScale();
+  const yScale = getYScale(yAxisId);
+
+  // Scrubber detection: check if this point is highlighted by the scrubber
+  const isScrubberHighlighted = scrubberPosition !== undefined && scrubberPosition === dataX;
+
+  // Use provided pixelCoordinates or calculate from data coordinates
+  const pixelCoordinate = useMemo(() => {
+    if (pixelCoordinates) {
+      return pixelCoordinates;
+    }
+    if (!xScale || !yScale) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [pixelCoordinates, xScale, yScale, dataX, dataY]);
+  useEffect(() => {
+    if (isScrubberHighlighted && onScrubberEnter) {
+      onScrubberEnter({
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      });
+    }
+  }, [isScrubberHighlighted, onScrubberEnter, pixelCoordinate.x, pixelCoordinate.y]);
+  if (!xScale || !yScale) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(G, {
+      opacity: opacity,
+      testID: testID,
+      transform: [{
+        translateX: pixelCoordinate.x
+      }, {
+        translateY: pixelCoordinate.y
+      }],
+      children: /*#__PURE__*/_jsx(Circle, {
+        accessibilityLabel: accessibilityLabel,
+        cx: 0,
+        cy: 0,
+        fill: fill != null ? fill : theme.color.fgPrimary,
+        onPress: onPress ? event => onPress({
+          dataX,
+          dataY,
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        }) : undefined,
+        r: radius,
+        stroke: effectiveStroke,
+        strokeWidth: strokeWidth
+      })
+    }), label && /*#__PURE__*/_jsx(ChartText, _extends({
+      x: pixelCoordinate.x,
+      y: pixelCoordinate.y
+    }, labelProps, {
+      children: label
+    }))]
+  });
+});

package/esm/chart/__stories__/CartesianChart.stories.js

@@ -0,0 +1,476 @@
+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, useCallback, useMemo } from 'react';
+import { Image, ScrollView, StyleSheet } from 'react-native';
+import { Circle, G } from 'react-native-svg';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { TextLabel1, TextLabel2, TextTitle1, TextTitle2 } from '@coinbase/cds-mobile/typography';
+import { Area } from '../area/Area';
+import { XAxis, YAxis } from '../axis';
+import { BarPlot } from '../bar/BarPlot';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Line } from '../line/Line';
+import { Scrubber } from '../scrubber/Scrubber';
+import { isCategoricalScale } from '../utils';
+import { CartesianChart, DottedArea, GradientLine, ReferenceLine, SolidLine } from '../';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultChartHeight = 250;
+const LineStyles = () => {
+  const topChartData = [15, 28, 32, 44, 46, 36, 40, 45, 48, 38];
+  const upperMiddleChartData = [12, 23, 21, 29, 34, 28, 31, 38, 42, 35];
+  const lowerMiddleChartData = [8, 15, 14, 25, 20, 18, 22, 28, 24, 30];
+  const bottomChartData = [4, 8, 11, 15, 16, 14, 16, 10, 12, 14];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'top',
+      data: topChartData
+    }, {
+      id: 'upperMiddle',
+      data: upperMiddleChartData,
+      color: '#ef4444'
+    }, {
+      id: 'lowerMiddle',
+      data: lowerMiddleChartData,
+      color: '#f59e0b'
+    }, {
+      id: 'bottom',
+      data: bottomChartData,
+      color: '#800080'
+    }],
+    children: [/*#__PURE__*/_jsx(Line, {
+      seriesId: "top"
+    }), /*#__PURE__*/_jsx(Line, {
+      seriesId: "upperMiddle",
+      type: "dotted"
+    }), /*#__PURE__*/_jsx(Line, {
+      LineComponent: lineProps => /*#__PURE__*/_jsx(GradientLine, {
+        d: lineProps.d,
+        endColor: "#F7931A",
+        startColor: "#E3D74D",
+        stroke: lineProps.stroke,
+        strokeOpacity: lineProps.strokeOpacity,
+        strokeWidth: 4
+      }),
+      curve: "natural",
+      seriesId: "lowerMiddle"
+    }), /*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      AreaComponent: DottedArea,
+      curve: "step",
+      seriesId: "bottom"
+    })]
+  });
+};
+const MultipleChart = () => {
+  const barData = [1, 2, 3, 2, 1];
+  const lineData = [4, 3, 1, 3, 4];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'bar',
+      data: barData
+    }, {
+      id: 'line',
+      data: lineData
+    }],
+    children: [/*#__PURE__*/_jsx(Area, {
+      seriesId: "bar",
+      type: "dotted"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "line"
+    })]
+  });
+};
+const EarningsHistory = () => {
+  const theme = useTheme();
+  const CirclePlot = /*#__PURE__*/memo(_ref => {
+    let {
+      seriesId,
+      opacity = 1
+    } = _ref;
+    const {
+      getSeries,
+      getSeriesData,
+      getXScale,
+      getYScale
+    } = useCartesianChartContext();
+    const series = getSeries(seriesId);
+    const data = getSeriesData(seriesId);
+    const xScale = getXScale();
+    const yScale = getYScale(series == null ? void 0 : series.yAxisId);
+    if (!xScale || !yScale || !data || !isCategoricalScale(xScale)) return null;
+    const yScaleSize = Math.abs(yScale.range()[1] - yScale.range()[0]);
+
+    // Have circle diameter be the smaller of the x scale bandwidth or 10% of the y space available
+    const diameter = Math.min(xScale.bandwidth(), yScaleSize / 10);
+    return /*#__PURE__*/_jsx(G, {
+      children: data.map((value, index) => {
+        if (value === null || value === undefined) return null;
+
+        // Get x position from band scale - center of the band
+        const xPos = xScale(index);
+        if (xPos === undefined) return null;
+        const centerX = xPos + xScale.bandwidth() / 2;
+
+        // Get y position from value
+        const yValue = Array.isArray(value) ? value[1] : value;
+        const centerY = yScale(yValue);
+        if (centerY === undefined) return null;
+        return /*#__PURE__*/_jsx(Circle, {
+          cx: centerX,
+          cy: centerY,
+          fill: (series == null ? void 0 : series.color) || theme.color.fgPrimary,
+          opacity: opacity,
+          r: diameter / 2
+        }, seriesId + "-" + index);
+      })
+    });
+  });
+  const quarters = useMemo(() => ['Q1', 'Q2', 'Q3', 'Q4'], []);
+  const estimatedEPS = useMemo(() => [1.71, 1.82, 1.93, 2.34], []);
+  const actualEPS = useMemo(() => [1.68, 1.83, 2.01, 2.24], []);
+  const formatEarningAmount = useCallback(value => {
+    return "$" + value.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  }, []);
+  const surprisePercentage = useCallback(index => {
+    const percentage = (actualEPS[index] - estimatedEPS[index]) / estimatedEPS[index];
+    const percentageString = percentage.toLocaleString('en-US', {
+      style: 'percent',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+    const prefix = percentage > 0 ? '+' : '';
+    return "" + prefix + percentageString;
+  }, [actualEPS, estimatedEPS]);
+  const styles = StyleSheet.create({
+    legendDot: {
+      width: 10,
+      height: 10,
+      borderRadius: 1000,
+      backgroundColor: theme.color.bgPositive
+    }
+  });
+  const LegendItem = /*#__PURE__*/memo(_ref2 => {
+    let {
+      opacity = 1,
+      label
+    } = _ref2;
+    return /*#__PURE__*/_jsxs(Box, {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 0.5,
+      children: [/*#__PURE__*/_jsx(Box, {
+        style: [styles.legendDot, {
+          opacity
+        }]
+      }), /*#__PURE__*/_jsx(TextLabel2, {
+        children: label
+      })]
+    });
+  });
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 0.5,
+    children: [/*#__PURE__*/_jsxs(CartesianChart, {
+      height: defaultChartHeight,
+      inset: {
+        top: 32,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      overflow: "visible",
+      series: [{
+        id: 'estimatedEPS',
+        data: estimatedEPS,
+        color: theme.color.bgPositive
+      }, {
+        id: 'actualEPS',
+        data: actualEPS,
+        color: theme.color.bgPositive
+      }],
+      xAxis: {
+        scaleType: 'band',
+        categoryPadding: 0.25
+      },
+      children: [/*#__PURE__*/_jsx(YAxis, {
+        showGrid: true,
+        position: "left",
+        requestedTickCount: 3,
+        tickLabelFormatter: formatEarningAmount
+      }), /*#__PURE__*/_jsx(XAxis, {
+        height: 20,
+        tickLabelFormatter: index => quarters[index]
+      }), /*#__PURE__*/_jsx(XAxis, {
+        height: 20,
+        tickLabelFormatter: surprisePercentage
+      }), /*#__PURE__*/_jsx(CirclePlot, {
+        opacity: 0.5,
+        seriesId: "estimatedEPS"
+      }), /*#__PURE__*/_jsx(CirclePlot, {
+        seriesId: "actualEPS"
+      })]
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      justifyContent: "flex-end",
+      children: [/*#__PURE__*/_jsx(LegendItem, {
+        label: "Estimated EPS",
+        opacity: 0.5
+      }), /*#__PURE__*/_jsx(LegendItem, {
+        label: "Actual EPS"
+      })]
+    })]
+  });
+};
+const PriceWithVolume = () => {
+  const theme = useTheme();
+  const btcData = btcCandles.slice(0, 180).reverse();
+  const btcPrices = btcData.map(candle => parseFloat(candle.close));
+  const btcVolumes = btcData.map(candle => parseFloat(candle.volume));
+  const btcDates = btcData.map(candle => new Date(parseInt(candle.start) * 1000));
+  const formatPrice = useCallback(price => {
+    return "$" + price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  }, []);
+  const formatPriceInThousands = useCallback(price => {
+    return "$" + (price / 1000).toLocaleString('en-US', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    }) + "k";
+  }, []);
+  const formatVolume = useCallback(volume => {
+    return (volume / 1000).toFixed(2) + "K";
+  }, []);
+  const formatDate = useCallback(date => {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric'
+    });
+  }, []);
+  const scrubberLabel = useCallback(dataIndex => {
+    return formatDate(btcDates[dataIndex]);
+  }, [btcDates, formatDate]);
+
+  // Display the last values in the header
+  const displayIndex = btcPrices.length - 1;
+  const currentPrice = btcPrices[displayIndex];
+  const currentVolume = btcVolumes[displayIndex];
+  const currentDate = btcDates[displayIndex];
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      justifyContent: "space-between",
+      paddingX: 0,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        gap: 0,
+        children: [/*#__PURE__*/_jsx(TextTitle1, {
+          children: "Bitcoin"
+        }), /*#__PURE__*/_jsx(TextTitle2, {
+          children: formatPrice(currentPrice)
+        })]
+      }), /*#__PURE__*/_jsxs(HStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsxs(VStack, {
+          alignItems: "flex-end",
+          justifyContent: "center",
+          children: [/*#__PURE__*/_jsx(TextLabel1, {
+            children: formatDate(currentDate)
+          }), /*#__PURE__*/_jsx(TextLabel2, {
+            children: formatVolume(currentVolume)
+          })]
+        }), /*#__PURE__*/_jsx(VStack, {
+          justifyContent: "center",
+          children: /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: assets.btc.imageUrl
+            },
+            style: {
+              width: theme.iconSize.l,
+              height: theme.iconSize.l,
+              borderRadius: 1000
+            }
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(CartesianChart, {
+      enableScrubbing: true,
+      height: defaultChartHeight,
+      series: [{
+        id: 'prices',
+        data: btcPrices,
+        color: assets.btc.color,
+        yAxisId: 'price'
+      }, {
+        id: 'volume',
+        data: btcVolumes,
+        color: theme.color.fgMuted,
+        yAxisId: 'volume'
+      }],
+      xAxis: {
+        scaleType: 'band'
+      },
+      yAxis: [{
+        id: 'price',
+        domain: _ref3 => {
+          let {
+            min,
+            max
+          } = _ref3;
+          return {
+            min: min * 0.9,
+            max
+          };
+        }
+      }, {
+        id: 'volume',
+        range: _ref4 => {
+          let {
+            min,
+            max
+          } = _ref4;
+          return {
+            min: max - 32,
+            max
+          };
+        }
+      }],
+      children: [/*#__PURE__*/_jsx(YAxis, {
+        showGrid: true,
+        axisId: "price",
+        tickLabelFormatter: formatPriceInThousands,
+        width: 20
+      }), /*#__PURE__*/_jsx(BarPlot, {
+        seriesIds: ['volume']
+      }), /*#__PURE__*/_jsx(Line, {
+        showArea: true,
+        curve: "monotone",
+        seriesId: "prices"
+      }), /*#__PURE__*/_jsx(Scrubber, {
+        label: scrubberLabel,
+        seriesIds: ['prices']
+      })]
+    })]
+  });
+};
+function TradingTrends() {
+  const theme = useTheme();
+  const profitData = [34, 24, 28, -4, 8, -16, -3, 12, 24, 18, 20, 28];
+  const gains = profitData.map(value => value > 0 ? value : 0);
+  const losses = profitData.map(value => value < 0 ? value : 0);
+  const renderProfit = useCallback(value => {
+    return "$" + value + "M";
+  }, []);
+  const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+    strokeWidth: 1
+  })));
+  const ThickSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+    strokeWidth: 2
+  })));
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 250,
+    series: [{
+      id: 'gains',
+      data: gains,
+      yAxisId: 'profit',
+      color: theme.color.bgPositive,
+      stackId: 'bars'
+    }, {
+      id: 'losses',
+      data: losses,
+      yAxisId: 'profit',
+      color: theme.color.bgNegative,
+      stackId: 'bars'
+    }, {
+      id: 'revenue',
+      data: [128, 118, 122, 116, 120, 114, 118, 122, 126, 130, 134, 138],
+      yAxisId: 'revenue',
+      color: theme.color.fgMuted
+    }],
+    xAxis: {
+      scaleType: 'band',
+      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    },
+    yAxis: [{
+      id: 'profit',
+      range: _ref5 => {
+        let {
+          min,
+          max
+        } = _ref5;
+        return {
+          min: min,
+          max: max - 64
+        };
+      },
+      domain: {
+        min: -40,
+        max: 40
+      }
+    }, {
+      id: 'revenue',
+      range: _ref6 => {
+        let {
+          min,
+          max
+        } = _ref6;
+        return {
+          min: max - 64,
+          max
+        };
+      },
+      domain: {
+        min: 100
+      }
+    }],
+    children: [/*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      GridLineComponent: ThinSolidLine,
+      axisId: "profit",
+      position: "left",
+      tickLabelFormatter: renderProfit
+    }), /*#__PURE__*/_jsx(XAxis, {}), /*#__PURE__*/_jsx(ReferenceLine, {
+      LineComponent: ThickSolidLine,
+      dataY: 0,
+      yAxisId: "profit"
+    }), /*#__PURE__*/_jsx(BarPlot, {
+      seriesIds: ['gains', 'losses']
+    }), /*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      curve: "monotone",
+      seriesId: "revenue"
+    })]
+  });
+}
+const ChartStories = () => {
+  return /*#__PURE__*/_jsx(ScrollView, {
+    children: /*#__PURE__*/_jsxs(ExampleScreen, {
+      children: [/*#__PURE__*/_jsx(Example, {
+        title: "Line Styles",
+        children: /*#__PURE__*/_jsx(LineStyles, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Multiple Types",
+        children: /*#__PURE__*/_jsx(MultipleChart, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Earnings History",
+        children: /*#__PURE__*/_jsx(EarningsHistory, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Price With Volume",
+        children: /*#__PURE__*/_jsx(PriceWithVolume, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Trading Trends",
+        children: /*#__PURE__*/_jsx(TradingTrends, {})
+      })]
+    })
+  });
+};
+export default ChartStories;

package/esm/chart/__stories__/Chart.stories.js

@@ -0,0 +1,79 @@
+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 { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { CartesianChart, DottedArea, GradientLine, Line, LineChart } from '../';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultChartHeight = 250;
+const BasicLineChart = () => {
+  const chartData = [65, 78, 45, 88, 92, 73, 69];
+  return /*#__PURE__*/_jsx(LineChart, {
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'monthly-growth',
+      data: chartData,
+      label: 'Monthly Growth',
+      color: '#2ca02c'
+    }],
+    yAxis: {
+      requestedTickCount: 2,
+      tickLabelFormatter: value => "$" + value,
+      showGrid: true
+    }
+  });
+};
+const LineStyles = () => {
+  const topChartData = [15, 28, 32, 44, 46, 36, 40, 45, 48, 38];
+  const upperMiddleChartData = [12, 23, 21, 29, 34, 28, 31, 38, 42, 35];
+  const lowerMiddleChartData = [8, 15, 14, 25, 20, 18, 22, 28, 24, 30];
+  const bottomChartData = [4, 8, 11, 15, 16, 14, 16, 10, 12, 14];
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: defaultChartHeight,
+    series: [{
+      id: 'top',
+      data: topChartData
+    }, {
+      id: 'upperMiddle',
+      data: upperMiddleChartData,
+      color: '#ef4444'
+    }, {
+      id: 'lowerMiddle',
+      data: lowerMiddleChartData,
+      color: '#f59e0b'
+    }, {
+      id: 'bottom',
+      data: bottomChartData,
+      color: '#800080'
+    }],
+    children: [/*#__PURE__*/_jsx(Line, {
+      seriesId: "top"
+    }), /*#__PURE__*/_jsx(Line, {
+      seriesId: "upperMiddle",
+      type: "dotted"
+    }), /*#__PURE__*/_jsx(Line, {
+      LineComponent: props => /*#__PURE__*/_jsx(GradientLine, _extends({}, props, {
+        endColor: "#F7931A",
+        startColor: "#E3D74D",
+        strokeWidth: 4
+      })),
+      curve: "natural",
+      seriesId: "lowerMiddle"
+    }), /*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      AreaComponent: DottedArea,
+      curve: "step",
+      seriesId: "bottom"
+    })]
+  });
+};
+const ChartStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic Line Chart",
+      children: /*#__PURE__*/_jsx(BasicLineChart, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Line Styles",
+      children: /*#__PURE__*/_jsx(LineStyles, {})
+    })]
+  });
+};
+export default ChartStories;