@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

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

@@ -1,659 +0,0 @@
-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, ScrollView, 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 { 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 { Text } from '@coinbase/cds-mobile/typography';
-import { Circle, Group } from '@shopify/react-native-skia';
-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__*/_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, {})
-      }), /*#__PURE__*/_jsx(Example, {
-        title: "Scatterplot with Custom Labels",
-        children: /*#__PURE__*/_jsx(ScatterplotWithCustomLabels, {})
-      })]
-    })
-  });
-};
-export default ChartStories;