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

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

@@ -1,21 +1,23 @@
 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 { memo, useCallback, useMemo, useState } 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 { Text } from '@coinbase/cds-mobile/typography';
+import { Circle, Group, Skia } 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, GradientLine, ReferenceLine, SolidLine } from '../';
+import { CartesianChart, DottedArea, ReferenceLine, SolidLine } from '../';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultChartHeight = 250;
 const LineStyles = () => {
@@ -47,14 +49,9 @@ const LineStyles = () => {
       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,
+      LineComponent: lineProps => /*#__PURE__*/_jsx(SolidLine, _extends({}, lineProps, {
         strokeWidth: 4
-      }),
+      })),
       curve: "natural",
       seriesId: "lowerMiddle"
     }), /*#__PURE__*/_jsx(Line, {
@@ -108,7 +105,7 @@ const EarningsHistory = () => {
 
     // 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, {
+    return /*#__PURE__*/_jsx(Group, {
       children: data.map((value, index) => {
         if (value === null || value === undefined) return null;
 
@@ -122,9 +119,9 @@ const EarningsHistory = () => {
         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,
-          fill: (series == null ? void 0 : series.color) || theme.color.fgPrimary,
           opacity: opacity,
           r: diameter / 2
         }, seriesId + "-" + index);
@@ -171,7 +168,8 @@ const EarningsHistory = () => {
         style: [styles.legendDot, {
           opacity
         }]
-      }), /*#__PURE__*/_jsx(TextLabel2, {
+      }), /*#__PURE__*/_jsx(Text, {
+        font: "label2",
         children: label
       })]
     });
@@ -186,7 +184,6 @@ const EarningsHistory = () => {
         left: 0,
         right: 0
       },
-      overflow: "visible",
       series: [{
         id: 'estimatedEPS',
         data: estimatedEPS,
@@ -229,27 +226,24 @@ const EarningsHistory = () => {
     })]
   });
 };
-const PriceWithVolume = () => {
+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 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',
@@ -258,110 +252,151 @@ const PriceWithVolume = () => {
   }, []);
   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, {
+  }, [formatDate]);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    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,
-    children: [/*#__PURE__*/_jsxs(HStack, {
+    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,
-      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
-            }
-          })
+        alignItems: "flex-end",
+        justifyContent: "center",
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "label1",
+          children: formatDate(currentDate)
+        }), /*#__PURE__*/_jsx(Text, {
+          font: "label2",
+          children: volumeText
         })]
-      })]
-    }), /*#__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']
+      }), /*#__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];
@@ -402,11 +437,11 @@ function TradingTrends() {
     },
     yAxis: [{
       id: 'profit',
-      range: _ref5 => {
+      range: _ref8 => {
         let {
           min,
           max
-        } = _ref5;
+        } = _ref8;
         return {
           min: min,
           max: max - 64
@@ -418,11 +453,11 @@ function TradingTrends() {
       }
     }, {
       id: 'revenue',
-      range: _ref6 => {
+      range: _ref9 => {
         let {
           min,
           max
-        } = _ref6;
+        } = _ref9;
         return {
           min: max - 64,
           max
@@ -446,11 +481,220 @@ function TradingTrends() {
       seriesIds: ['gains', 'losses']
     }), /*#__PURE__*/_jsx(Line, {
       showArea: true,
-      curve: "monotone",
       seriesId: "revenue"
     })]
   });
 }
+const UVGradient = {
+  axis: 'y',
+  stops: [{
+    offset: 0,
+    color: 'green'
+  }, {
+    offset: 3,
+    color: 'yellow'
+  }, {
+    offset: 5,
+    color: 'orange'
+  }, {
+    offset: 8,
+    color: 'red'
+  }, {
+    offset: 10,
+    color: 'purple'
+  }]
+};
+const PreviousData = /*#__PURE__*/memo(_ref0 => {
+  let {
+    children,
+    currentHour,
+    clipOffset = 0
+  } = _ref0;
+  // we will clip the data to the current hour
+  const {
+    drawingArea,
+    getXScale
+  } = useCartesianChartContext();
+  const xScale = getXScale();
+  const currentHourX = xScale == null ? void 0 : xScale(currentHour);
+  const clipPath = useMemo(() => {
+    if (!xScale || currentHourX === undefined) return null;
+
+    // Create a rectangle from top-left of drawing area to currentHourX on the right
+    // Apply clipOffset to left, top, and bottom edges only (NOT to currentHourX)
+    const pathString = "M " + (drawingArea.x - clipOffset) + " " + (drawingArea.y - clipOffset) + " L " + currentHourX + " " + (drawingArea.y - clipOffset) + " L " + currentHourX + " " + (drawingArea.y + drawingArea.height + clipOffset) + " L " + (drawingArea.x - clipOffset) + " " + (drawingArea.y + drawingArea.height + clipOffset) + " Z";
+    return Skia.Path.MakeFromSVGString(pathString);
+  }, [xScale, currentHourX, drawingArea, clipOffset]);
+  if (!clipPath) return null;
+  return /*#__PURE__*/_jsx(Group, {
+    clip: clipPath,
+    opacity: 0.75,
+    children: children
+  });
+});
+const FutureData = /*#__PURE__*/memo(_ref1 => {
+  let {
+    children,
+    currentHour,
+    clipOffset = 0
+  } = _ref1;
+  // we will clip the data from the current hour to the right edge
+  const {
+    drawingArea,
+    getXScale
+  } = useCartesianChartContext();
+  const xScale = getXScale();
+  const currentHourX = xScale == null ? void 0 : xScale(currentHour);
+  const clipPath = useMemo(() => {
+    if (!xScale || currentHourX === undefined) return null;
+
+    // Create a rectangle from currentHourX to right edge of drawing area
+    // Apply clipOffset to top, bottom, and right, but NOT left (currentHourX)
+    const pathString = "M " + currentHourX + " " + (drawingArea.y - clipOffset) + " L " + (drawingArea.x + drawingArea.width + clipOffset) + " " + (drawingArea.y - clipOffset) + " L " + (drawingArea.x + drawingArea.width + clipOffset) + " " + (drawingArea.y + drawingArea.height + clipOffset) + " L " + currentHourX + " " + (drawingArea.y + drawingArea.height + clipOffset) + " Z";
+    return Skia.Path.MakeFromSVGString(pathString);
+  }, [xScale, currentHourX, drawingArea, clipOffset]);
+  if (!clipPath) return null;
+  return /*#__PURE__*/_jsx(Group, {
+    clip: clipPath,
+    children: children
+  });
+});
+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(_ref10 => {
+    let {
+      x,
+      y,
+      offset = 0,
+      children
+    } = _ref10;
+    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, {
@@ -469,6 +713,9 @@ const ChartStories = () => {
       }), /*#__PURE__*/_jsx(Example, {
         title: "Trading Trends",
         children: /*#__PURE__*/_jsx(TradingTrends, {})
+      }), /*#__PURE__*/_jsx(Example, {
+        title: "Scatterplot with Custom Labels",
+        children: /*#__PURE__*/_jsx(ScatterplotWithCustomLabels, {})
       })]
     })
   });

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

@@ -1,6 +1,6 @@
 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 { CartesianChart, DottedArea, Line, LineChart, SolidLine } from '../';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const defaultChartHeight = 250;
 const BasicLineChart = () => {
@@ -50,9 +50,7 @@ const LineStyles = () => {
       seriesId: "upperMiddle",
       type: "dotted"
     }), /*#__PURE__*/_jsx(Line, {
-      LineComponent: props => /*#__PURE__*/_jsx(GradientLine, _extends({}, props, {
-        endColor: "#F7931A",
-        startColor: "#E3D74D",
+      LineComponent: props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
         strokeWidth: 4
       })),
       curve: "natural",