@coinbase/cds-mobile 8.66.2 → 9.0.0-rc.1

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

@@ -0,0 +1,657 @@
+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, useState } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { Circle, Group } from '@shopify/react-native-skia';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { useTheme } from '../../../hooks/useTheme';
+import { Box, HStack, VStack } from '../../../layout';
+import { Text } from '../../../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 { Point } from '../point/Point';
+import { Scrubber } from '../scrubber/Scrubber';
+import { ChartText } from '../text';
+import { isCategoricalScale } from '../utils';
+import { CartesianChart, DottedArea, 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(SolidLine, _extends({}, lineProps, {
+        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(Group, {
+      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, {
+          color: (series == null ? void 0 : series.color) || theme.color.fgPrimary,
+          cx: centerX,
+          cy: centerY,
+          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 LegendEntry = /*#__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(Text, {
+        font: "label2",
+        children: label
+      })]
+    });
+  });
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 0.5,
+    children: [/*#__PURE__*/_jsxs(CartesianChart, {
+      height: defaultChartHeight,
+      inset: {
+        top: 32,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      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(LegendEntry, {
+        label: "Estimated EPS",
+        opacity: 0.5
+      }), /*#__PURE__*/_jsx(LegendEntry, {
+        label: "Actual EPS"
+      })]
+    })]
+  });
+};
+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 displayIndex = btcPrices.length - 1;
+const currentPrice = btcPrices[displayIndex];
+const currentDate = btcDates[displayIndex];
+const PriceWithVolumeChart = /*#__PURE__*/memo(_ref3 => {
+  let {
+    onScrubberPositionChange
+  } = _ref3;
+  const theme = useTheme();
+  const formatPriceInThousands = useCallback(price => {
+    return "$" + (price / 1000).toLocaleString('en-US', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    }) + "k";
+  }, []);
+  const formatDate = useCallback(date => {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric'
+    });
+  }, []);
+  const formatVolume = useCallback(volume => {
+    return (volume / 1000).toFixed(2) + "K";
+  }, []);
+  const scrubberLabel = useCallback(dataIndex => {
+    return formatDate(btcDates[dataIndex]);
+  }, [formatDate]);
+  const chartAccessibilityLabel = useMemo(() => {
+    const lastIndex = btcPrices.length - 1;
+    return "Bitcoin chart. Current date " + formatDate(btcDates[lastIndex]) + ". Current price " + formatPriceInThousands(btcPrices[lastIndex]) + ". Current volume " + formatVolume(btcVolumes[lastIndex]) + ".";
+  }, [formatDate, formatPriceInThousands, formatVolume]);
+  const getScrubberAccessibilityLabel = useCallback(dataIndex => "Bitcoin on " + formatDate(btcDates[dataIndex]) + ". Price " + formatPriceInThousands(btcPrices[dataIndex]) + ". Volume " + formatVolume(btcVolumes[dataIndex]) + ".", [formatDate, formatPriceInThousands, formatVolume]);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    accessibilityLabel: chartAccessibilityLabel,
+    getScrubberAccessibilityLabel: getScrubberAccessibilityLabel,
+    height: defaultChartHeight,
+    onScrubberPositionChange: onScrubberPositionChange,
+    series: [{
+      id: 'prices',
+      data: btcPrices,
+      color: assets.btc.color,
+      yAxisId: 'price'
+    }, {
+      id: 'volume',
+      data: btcVolumes,
+      color: theme.color.fgMuted,
+      yAxisId: 'volume'
+    }],
+    xAxis: {
+      scaleType: 'band',
+      range: _ref4 => {
+        let {
+          min,
+          max
+        } = _ref4;
+        return {
+          min,
+          max: max - 8
+        };
+      }
+    },
+    yAxis: [{
+      id: 'price',
+      domain: _ref5 => {
+        let {
+          min,
+          max
+        } = _ref5;
+        return {
+          min: min * 0.9,
+          max
+        };
+      }
+    }, {
+      id: 'volume',
+      range: _ref6 => {
+        let {
+          min,
+          max
+        } = _ref6;
+        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,
+      seriesId: "prices"
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      label: scrubberLabel,
+      seriesIds: ['prices']
+    })]
+  });
+});
+const PriceWithVolumeHeader = /*#__PURE__*/memo(_ref7 => {
+  let {
+    currentIndex
+  } = _ref7;
+  const theme = useTheme();
+  const formatPrice = useCallback(price => {
+    return "$" + price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    });
+  }, []);
+  const formatDate = useCallback(date => {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric'
+    });
+  }, []);
+  const formatVolume = useCallback(volume => {
+    return (volume / 1000).toFixed(2) + "K";
+  }, []);
+  const volumeText = useMemo(() => {
+    return formatVolume(currentIndex !== undefined ? btcVolumes[currentIndex] : btcVolumes[displayIndex]);
+  }, [currentIndex, formatVolume]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    gap: 2,
+    justifyContent: "space-between",
+    paddingX: 0,
+    children: [/*#__PURE__*/_jsxs(VStack, {
+      gap: 0,
+      children: [/*#__PURE__*/_jsx(Text, {
+        font: "title1",
+        children: "Bitcoin"
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "title2",
+        children: formatPrice(currentPrice)
+      })]
+    }), /*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        alignItems: "flex-end",
+        justifyContent: "center",
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "label1",
+          children: formatDate(currentDate)
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "label2",
+          children: volumeText
+        })]
+      }), /*#__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
+          }
+        })
+      })]
+    })]
+  });
+});
+const PriceWithVolume = /*#__PURE__*/memo(() => {
+  const [currentIndex, setCurrentIndex] = useState();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(PriceWithVolumeHeader, {
+      currentIndex: currentIndex
+    }), /*#__PURE__*/_jsx(PriceWithVolumeChart, {
+      onScrubberPositionChange: setCurrentIndex
+    })]
+  });
+});
+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: _ref8 => {
+        let {
+          min,
+          max
+        } = _ref8;
+        return {
+          min: min,
+          max: max - 64
+        };
+      },
+      domain: {
+        min: -40,
+        max: 40
+      }
+    }, {
+      id: 'revenue',
+      range: _ref9 => {
+        let {
+          min,
+          max
+        } = _ref9;
+        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,
+      seriesId: "revenue"
+    })]
+  });
+}
+const ScatterplotWithCustomLabels = /*#__PURE__*/memo(() => {
+  const theme = useTheme();
+  const dataPoints = useMemo(() => [{
+    x: 12,
+    y: 34,
+    label: 'A',
+    color: theme.color.accentBoldBlue
+  }, {
+    x: 28,
+    y: 67,
+    label: 'B',
+    color: theme.color.accentBoldBlue
+  }, {
+    x: 45,
+    y: 23,
+    label: 'C',
+    color: theme.color.accentBoldBlue
+  }, {
+    x: 67,
+    y: 89,
+    label: 'D',
+    color: theme.color.bgPositive
+  }, {
+    x: 82,
+    y: 76,
+    label: 'E',
+    color: theme.color.bgPositive
+  }, {
+    x: 34,
+    y: 91,
+    label: 'F',
+    color: theme.color.bgPositive
+  }, {
+    x: 56,
+    y: 45,
+    label: 'G',
+    color: theme.color.bgPositive
+  }, {
+    x: 19,
+    y: 12,
+    label: 'H',
+    color: theme.color.fgWarning
+  }, {
+    x: 73,
+    y: 28,
+    label: 'I',
+    color: theme.color.fgWarning
+  }, {
+    x: 91,
+    y: 54,
+    label: 'J',
+    color: theme.color.fgWarning
+  }, {
+    x: 15,
+    y: 58,
+    label: 'K',
+    color: theme.color.fgPrimary
+  }, {
+    x: 39,
+    y: 72,
+    label: 'L',
+    color: theme.color.fgPrimary
+  }, {
+    x: 88,
+    y: 15,
+    label: 'M',
+    color: theme.color.fgPrimary
+  }, {
+    x: 52,
+    y: 82,
+    label: 'N',
+    color: theme.color.fgPrimary
+  }], [theme]);
+
+  // Calculate domain based on data
+  const xValues = useMemo(() => dataPoints.map(p => p.x), [dataPoints]);
+  const yValues = useMemo(() => dataPoints.map(p => p.y), [dataPoints]);
+  const xMin = Math.min(...xValues);
+  const xMax = Math.max(...xValues);
+  const yMin = Math.min(...yValues);
+  const yMax = Math.max(...yValues);
+
+  // Custom label component that places labels to the top-right
+  const TopRightPointLabel = useCallback(_ref0 => {
+    let {
+      x,
+      y,
+      offset = 0,
+      children
+    } = _ref0;
+    return /*#__PURE__*/_jsx(ChartText, {
+      font: "label1",
+      fontWeight: 600,
+      horizontalAlignment: "left",
+      verticalAlignment: "bottom",
+      x: x + offset,
+      y: y - offset,
+      children: children
+    });
+  }, []);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 300,
+    xAxis: {
+      domain: {
+        min: xMin,
+        max: xMax
+      },
+      domainLimit: 'nice'
+    },
+    yAxis: {
+      domain: {
+        min: yMin,
+        max: yMax
+      },
+      domainLimit: 'nice'
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      showTickMarks: true,
+      position: "left"
+    }), dataPoints.map((point, index) => /*#__PURE__*/_jsx(Point, {
+      LabelComponent: TopRightPointLabel,
+      dataX: point.x,
+      dataY: point.y,
+      fill: point.color,
+      label: point.label,
+      labelOffset: 8,
+      radius: 5
+    }, index))]
+  });
+});
+const ChartStories = () => {
+  return /*#__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, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Scatterplot with Custom Labels",
+      children: /*#__PURE__*/_jsx(ScatterplotWithCustomLabels, {})
+    })]
+  });
+};
+export default ChartStories;