@coinbase/cds-mobile-visualization 3.4.0-beta.17 → 3.4.0-beta.19

package/esm/chart/line/__stories__/LineChart.stories.js

@@ -1,17 +1,17 @@
 const _excluded = ["dataX", "dataY"],
   _excluded2 = ["label"],
-  _excluded3 = ["style"],
-  _excluded4 = ["x", "y", "width", "height", "originY", "dataX"];
+  _excluded3 = ["style"];
 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 { forwardRef, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnimatedReaction, useDerivedValue, useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
-import { assets } from '@coinbase/cds-common/internal/data/assets';
-import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { assets, ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import { prices } from '@coinbase/cds-common/internal/data/prices';
 import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { NoopFn } from '@coinbase/cds-common/utils/mockUtils';
 import { useTheme } from '@coinbase/cds-mobile';
+import { DataCard } from '@coinbase/cds-mobile/alpha/data-card/DataCard';
 import { IconButton } from '@coinbase/cds-mobile/buttons';
 import { ListCell } from '@coinbase/cds-mobile/cells';
 import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
@@ -21,16 +21,15 @@ import { SectionHeader } from '@coinbase/cds-mobile/section-header/SectionHeader
 import { Pressable } from '@coinbase/cds-mobile/system';
 import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
 import { Text } from '@coinbase/cds-mobile/typography';
-import { Circle, FontWeight, Group, Line as SkiaLine, Rect, Skia, TextAlign } from '@shopify/react-native-skia';
+import { Circle, FontWeight, Group, Skia, TextAlign } from '@shopify/react-native-skia';
 import { Area, DottedArea } from '../../area';
 import { DefaultAxisTickLabel, XAxis, YAxis } from '../../axis';
-import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { useCartesianChartContext } from '../../ChartProvider';
 import { PeriodSelector, PeriodSelectorActiveIndicator } from '../../PeriodSelector';
 import { Point } from '../../point';
 import { DefaultScrubberBeacon, Scrubber } from '../../scrubber';
-import { buildTransition, defaultTransition, getPointOnSerializableScale, projectPointWithSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
+import { buildTransition, defaultTransition, projectPointWithSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
 import { DottedLine, Line, LineChart, ReferenceLine, SolidLine } from '..';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 function MultipleLine() {
@@ -1178,210 +1177,6 @@ function Performance() {
     })]
   });
 }
-const candlestickStockData = btcCandles.slice(0, 90).reverse();
-const CandlesticksHeader = /*#__PURE__*/memo(_ref11 => {
-  let {
-    currentIndex
-  } = _ref11;
-  const formatPrice = useCallback(price => {
-    return new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD'
-    }).format(parseFloat(price));
-  }, []);
-  const formatThousandsPriceNumber = useCallback(price => {
-    const formattedPrice = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000);
-    return formattedPrice + "k";
-  }, []);
-  const currentText = useMemo(() => {
-    if (currentIndex !== undefined) {
-      return "Open: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].open)) + ", Close: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].close)) + ", Volume: " + (parseFloat(candlestickStockData[currentIndex].volume) / 1000).toFixed(2) + "k";
-    }
-    return formatPrice(candlestickStockData[candlestickStockData.length - 1].close);
-  }, [currentIndex, formatThousandsPriceNumber, formatPrice]);
-  return /*#__PURE__*/_jsx(Text, {
-    "aria-live": "polite",
-    font: "headline",
-    children: currentText
-  });
-});
-const CandlesticksChart = /*#__PURE__*/memo(_ref12 => {
-  let {
-    infoTextId,
-    onScrubberPositionChange
-  } = _ref12;
-  const theme = useTheme();
-  const min = useMemo(() => Math.min(...candlestickStockData.map(data => parseFloat(data.low))), []);
-  const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
-    strokeWidth: 1
-  })));
-
-  // Custom line component that renders a rect to highlight the entire bandwidth
-  const BandwidthHighlight = /*#__PURE__*/memo(_ref13 => {
-    let {
-      stroke
-    } = _ref13;
-    const {
-      getXSerializableScale,
-      drawingArea
-    } = useCartesianChartContext();
-    const {
-      scrubberPosition
-    } = useScrubberContext();
-    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
-    const rectWidth = useMemo(() => {
-      if (xScale !== undefined && xScale.type === 'band') {
-        return xScale.bandwidth;
-      }
-      return 0;
-    }, [xScale]);
-    const xPos = useDerivedValue(() => {
-      const position = unwrapAnimatedValue(scrubberPosition);
-      const xPos = position !== undefined && xScale ? getPointOnSerializableScale(position, xScale) : undefined;
-      return xPos !== undefined ? xPos - rectWidth / 2 : 0;
-    }, [scrubberPosition, xScale]);
-    const opacity = useDerivedValue(() => xPos.value !== undefined ? 1 : 0, [xPos]);
-    return /*#__PURE__*/_jsx(Rect, {
-      color: stroke,
-      height: drawingArea.height,
-      opacity: opacity,
-      width: rectWidth,
-      x: xPos,
-      y: drawingArea.y
-    });
-  });
-  const candlesData = useMemo(() => candlestickStockData.map(data => [parseFloat(data.low), parseFloat(data.high)]), []);
-  const CandlestickBarComponent = /*#__PURE__*/memo(_ref14 => {
-    var _yScale, _yScale2;
-    let {
-        x,
-        y,
-        width,
-        height,
-        dataX
-      } = _ref14,
-      props = _objectWithoutPropertiesLoose(_ref14, _excluded4);
-    const {
-      getYScale
-    } = useCartesianChartContext();
-    const yScale = getYScale();
-    const wickX = x + width / 2;
-    const timePeriodValue = candlestickStockData[dataX];
-    const open = parseFloat(timePeriodValue.open);
-    const close = parseFloat(timePeriodValue.close);
-    const bullish = open < close;
-    const theme = useTheme();
-    const color = bullish ? theme.color.fgPositive : theme.color.fgNegative;
-    const openY = (_yScale = yScale == null ? void 0 : yScale(open)) != null ? _yScale : 0;
-    const closeY = (_yScale2 = yScale == null ? void 0 : yScale(close)) != null ? _yScale2 : 0;
-    const bodyHeight = Math.abs(openY - closeY);
-    const bodyY = openY < closeY ? openY : closeY;
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(SkiaLine, {
-        color: color,
-        p1: {
-          x: wickX,
-          y
-        },
-        p2: {
-          x: wickX,
-          y: y + height
-        },
-        strokeWidth: 1
-      }), /*#__PURE__*/_jsx(Rect, {
-        color: color,
-        height: bodyHeight,
-        width: width,
-        x: x,
-        y: bodyY
-      })]
-    });
-  });
-  const formatThousandsPriceNumber = useCallback(price => {
-    const formattedPrice = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0
-    }).format(price / 1000);
-    return formattedPrice + "k";
-  }, []);
-  const formatTime = useCallback(index => {
-    if (index === null || index === undefined || index >= candlestickStockData.length) return '';
-    const ts = parseInt(candlestickStockData[index].start);
-    return new Date(ts * 1000).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric'
-    });
-  }, []);
-  return /*#__PURE__*/_jsxs(CartesianChart, {
-    enableScrubbing: true,
-    animate: false,
-    "aria-labelledby": infoTextId,
-    borderRadius: 0,
-    height: 150,
-    inset: {
-      top: 8,
-      bottom: 8,
-      left: 0,
-      right: 0
-    },
-    onScrubberPositionChange: onScrubberPositionChange,
-    series: [{
-      id: 'stock-prices',
-      data: candlesData
-    }],
-    xAxis: {
-      scaleType: 'band'
-    },
-    yAxis: {
-      domain: {
-        min
-      }
-    },
-    children: [/*#__PURE__*/_jsx(XAxis, {
-      tickLabelFormatter: formatTime
-    }), /*#__PURE__*/_jsx(YAxis, {
-      showGrid: true,
-      GridLineComponent: ThinSolidLine,
-      tickLabelFormatter: formatThousandsPriceNumber,
-      width: 40
-    }), /*#__PURE__*/_jsx(Scrubber, {
-      hideOverlay: true,
-      LineComponent: BandwidthHighlight,
-      lineStroke: theme.color.fgMuted,
-      seriesIds: []
-    }), /*#__PURE__*/_jsx(BarPlot, {
-      BarComponent: CandlestickBarComponent,
-      BarStackComponent: _ref15 => {
-        let {
-          children
-        } = _ref15;
-        return /*#__PURE__*/_jsx("g", {
-          children: children
-        });
-      }
-    })]
-  });
-});
-function Candlesticks() {
-  const infoTextId = useId();
-  const [currentIndex, setCurrentIndex] = useState();
-  return /*#__PURE__*/_jsxs(VStack, {
-    gap: 2,
-    children: [/*#__PURE__*/_jsx(CandlesticksHeader, {
-      currentIndex: currentIndex
-    }), /*#__PURE__*/_jsx(CandlesticksChart, {
-      infoTextId: infoTextId,
-      onScrubberPositionChange: setCurrentIndex
-    })]
-  });
-}
 function MonotoneAssetPrice() {
   const theme = useTheme();
   const prices = sparklineInteractiveData.hour;
@@ -1455,14 +1250,14 @@ function MonotoneAssetPrice() {
     dy: -12,
     horizontalAlignment: "left"
   })), []);
-  const CustomScrubberBeacon = /*#__PURE__*/memo(_ref16 => {
+  const CustomScrubberBeacon = /*#__PURE__*/memo(_ref11 => {
     let {
       dataX,
       dataY,
       seriesId,
       isIdle,
       animate = true
-    } = _ref16;
+    } = _ref11;
     const {
       getSeries,
       getXSerializableScale,
@@ -1538,10 +1333,10 @@ function MonotoneAssetPrice() {
       color: theme.color.fg,
       gradient: {
         axis: 'x',
-        stops: _ref17 => {
+        stops: _ref12 => {
           let {
             min
-          } = _ref17;
+          } = _ref12;
           return [{
             offset: min,
             color: theme.color.fg,
@@ -1555,10 +1350,10 @@ function MonotoneAssetPrice() {
       }
     }],
     xAxis: {
-      range: _ref18 => {
+      range: _ref13 => {
         let {
           max
-        } = _ref18;
+        } = _ref13;
         return {
           min: 96,
           max
@@ -1609,11 +1404,11 @@ function ServiceAvailability() {
       id: 'availability',
       data: availabilityEvents.map(event => event.availability),
       gradient: {
-        stops: _ref19 => {
+        stops: _ref14 => {
           let {
             min,
             max
-          } = _ref19;
+          } = _ref14;
           return [{
             offset: min,
             color: theme.color.fgNegative
@@ -1640,11 +1435,11 @@ function ServiceAvailability() {
       data: availabilityEvents.map(event => event.date.getTime())
     },
     yAxis: {
-      domain: _ref20 => {
+      domain: _ref15 => {
         let {
           min,
           max
-        } = _ref20;
+        } = _ref15;
         return {
           min: Math.max(min - 2, 0),
           max: Math.min(max + 2, 100)
@@ -1804,6 +1599,110 @@ function ForecastAssetPrice() {
     }), /*#__PURE__*/_jsx(CustomScrubber, {})]
   });
 }
+function DataCardWithLineChart() {
+  const {
+    spectrum
+  } = useTheme();
+  const exampleThumbnail = /*#__PURE__*/_jsx(RemoteImage, {
+    accessibilityLabel: "Ethereum",
+    shape: "circle",
+    size: "xl",
+    source: ethBackground,
+    testID: "thumbnail"
+  });
+  const getLineChartSeries = useCallback(() => [{
+    id: 'price',
+    data: prices.slice(0, 30).map(price => parseFloat(price)),
+    color: "rgb(" + spectrum.green70 + ")"
+  }], [spectrum.green70]);
+  const lineChartSeries = useMemo(() => getLineChartSeries(), [getLineChartSeries]);
+  const lineChartSeries2 = useMemo(() => getLineChartSeries(), [getLineChartSeries]);
+  const ref = useRef(null);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(DataCard, {
+      layout: "vertical",
+      subtitle: "Price trend",
+      thumbnail: exampleThumbnail,
+      title: "Line Chart Card",
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 120,
+        inset: 0,
+        series: lineChartSeries
+      })
+    }), /*#__PURE__*/_jsx(DataCard, {
+      layout: "vertical",
+      subtitle: "Price trend",
+      thumbnail: exampleThumbnail,
+      title: "Line Chart with Tag",
+      titleAccessory: /*#__PURE__*/_jsx(Text, {
+        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+        font: "label1",
+        children: "\u2197 25.25%"
+      }),
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 100,
+        inset: 0,
+        series: lineChartSeries
+      })
+    }), /*#__PURE__*/_jsx(DataCard, {
+      ref: ref,
+      renderAsPressable: true,
+      layout: "vertical",
+      onPress: NoopFn,
+      subtitle: "Clickable line chart card",
+      thumbnail: exampleThumbnail,
+      title: "Actionable Line Chart",
+      titleAccessory: /*#__PURE__*/_jsx(Text, {
+        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+        font: "label1",
+        children: "\u2197 8.5%"
+      }),
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        accessibilityLabel: "Ethereum price chart",
+        areaType: "dotted",
+        height: 120,
+        inset: 0,
+        series: lineChartSeries,
+        showXAxis: false,
+        showYAxis: false
+      })
+    }), /*#__PURE__*/_jsx(DataCard, {
+      layout: "vertical",
+      subtitle: "Price trend",
+      thumbnail: /*#__PURE__*/_jsx(RemoteImage, {
+        accessibilityLabel: "Bitcoin",
+        shape: "circle",
+        size: "xl",
+        source: assets.btc.imageUrl,
+        testID: "thumbnail"
+      }),
+      title: "Card with Line Chart",
+      titleAccessory: /*#__PURE__*/_jsx(Text, {
+        dangerouslySetColor: "rgb(" + spectrum.green70 + ")",
+        font: "label1",
+        children: "\u2197 25.25%"
+      }),
+      children: /*#__PURE__*/_jsx(LineChart, {
+        showArea: true,
+        accessibilityLabel: "Price chart",
+        areaType: "dotted",
+        height: 100,
+        inset: 0,
+        series: lineChartSeries2,
+        showXAxis: false,
+        showYAxis: false
+      })
+    })]
+  });
+}
 function ExampleNavigator() {
   const theme = useTheme();
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -1953,11 +1852,11 @@ function ExampleNavigator() {
       }],
       xAxis: {
         // Give space before the end of the chart for the scrubber
-        range: _ref21 => {
+        range: _ref16 => {
           let {
             min,
             max
-          } = _ref21;
+          } = _ref16;
           return {
             min,
             max: max - 24
@@ -1988,9 +1887,6 @@ function ExampleNavigator() {
   }, {
     title: 'Performance',
     component: /*#__PURE__*/_jsx(Performance, {})
-  }, {
-    title: 'Candlesticks',
-    component: /*#__PURE__*/_jsx(Candlesticks, {})
   }, {
     title: 'Monotone Asset Price',
     component: /*#__PURE__*/_jsx(MonotoneAssetPrice, {})
@@ -2000,17 +1896,19 @@ function ExampleNavigator() {
   }, {
     title: 'Forecast Asset Price',
     component: /*#__PURE__*/_jsx(ForecastAssetPrice, {})
+  }, {
+    title: 'In DataCard',
+    component: /*#__PURE__*/_jsx(DataCardWithLineChart, {})
   }], [theme.color.fg, theme.color.fgPositive, theme.spectrum.gray50]);
   const currentExample = examples[currentIndex];
-  const isFirstExample = currentIndex === 0;
-  const isLastExample = currentIndex === examples.length - 1;
   const handlePrevious = useCallback(() => {
-    setCurrentIndex(prev => Math.max(0, prev - 1));
-  }, []);
+    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
+  }, [examples.length]);
   const handleNext = useCallback(() => {
-    setCurrentIndex(prev => Math.min(examples.length - 1, prev + 1));
+    setCurrentIndex(prev => (prev + 1 + examples.length) % examples.length);
   }, [examples.length]);
   return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
     children: /*#__PURE__*/_jsxs(VStack, {
       gap: 4,
       children: [/*#__PURE__*/_jsxs(HStack, {
@@ -2020,13 +1918,11 @@ function ExampleNavigator() {
         children: [/*#__PURE__*/_jsx(IconButton, {
           accessibilityHint: "Navigate to previous example",
           accessibilityLabel: "Previous",
-          disabled: isFirstExample,
           name: "arrowLeft",
           onPress: handlePrevious,
           variant: "secondary"
         }), /*#__PURE__*/_jsxs(VStack, {
           alignItems: "center",
-          gap: 1,
           children: [/*#__PURE__*/_jsx(Text, {
             font: "title3",
             children: currentExample.title
@@ -2038,7 +1934,6 @@ function ExampleNavigator() {
         }), /*#__PURE__*/_jsx(IconButton, {
           accessibilityHint: "Navigate to next example",
           accessibilityLabel: "Next",
-          disabled: isLastExample,
           name: "arrowRight",
           onPress: handleNext,
           variant: "secondary"

package/esm/chart/line/__stories__/ReferenceLine.stories.js

@@ -1,9 +1,14 @@
 const _excluded = ["accentColor", "yellowColor"];
 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, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
+import { useDerivedValue, withTiming } from 'react-native-reanimated';
+import { sparklineInteractiveData } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useCartesianChartContext } from '../../ChartProvider';
+import { Scrubber } from '../../scrubber';
+import { getPointOnSerializableScale, useScrubberContext } from '../../utils';
 import { DefaultReferenceLineLabel } from '../DefaultReferenceLineLabel';
 import { DottedLine } from '../DottedLine';
 import { LineChart } from '../LineChart';
@@ -126,7 +131,96 @@ const ReferenceLineStories = () => {
           stroke: theme.color.bgWarning
         })
       })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Start Price Reference Line",
+      children: /*#__PURE__*/_jsx(StartPriceReferenceLine, {})
     })]
   });
 };
+const FADE_ZONE = 128;
+const StartPriceLabel = /*#__PURE__*/memo(props => {
+  const theme = useTheme();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const {
+    getXSerializableScale,
+    drawingArea
+  } = useCartesianChartContext();
+  const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+  const opacity = useDerivedValue(() => {
+    if (scrubberPosition.value === undefined) return withTiming(0, {
+      duration: 250
+    });
+    if (!xScale) return withTiming(1, {
+      duration: 250
+    });
+    const scrubX = getPointOnSerializableScale(scrubberPosition.value, xScale);
+    const rightEdge = drawingArea.x + drawingArea.width;
+    const target = rightEdge - scrubX >= FADE_ZONE ? 1 : 0;
+    return withTiming(target, {
+      duration: 250
+    });
+  }, [scrubberPosition, xScale, drawingArea]);
+  return /*#__PURE__*/_jsx(DefaultReferenceLineLabel, _extends({}, props, {
+    background: theme.color.bgSecondary,
+    borderRadius: 12.5,
+    color: theme.color.fg,
+    font: "label1",
+    inset: {
+      top: 4,
+      bottom: 4,
+      left: 8,
+      right: 8
+    },
+    opacity: opacity
+  }));
+});
+function StartPriceReferenceLine() {
+  const theme = useTheme();
+  const hourData = useMemo(() => sparklineInteractiveData.hour, []);
+  const startPrice = hourData[0].value;
+  const endPrice = hourData[hourData.length - 1].value;
+  const isPositive = endPrice >= startPrice;
+  const seriesColor = isPositive ? theme.color.fgPositive : theme.color.fgNegative;
+  return /*#__PURE__*/_jsxs(LineChart, {
+    enableScrubbing: true,
+    showArea: true,
+    areaType: "dotted",
+    height: 300,
+    inset: 0,
+    series: [{
+      id: 'hourly-prices',
+      data: hourData.map(d => d.value),
+      color: seriesColor
+    }],
+    xAxis: {
+      range: _ref2 => {
+        let {
+          min,
+          max
+        } = _ref2;
+        return {
+          min,
+          max: max - 24
+        };
+      }
+    },
+    children: [/*#__PURE__*/_jsx(Scrubber, {}), /*#__PURE__*/_jsx(ReferenceLine, {
+      LabelComponent: StartPriceLabel,
+      LineComponent: props => /*#__PURE__*/_jsx(DottedLine, _extends({}, props, {
+        dashIntervals: [0, 16],
+        strokeWidth: 3
+      })),
+      dataY: startPrice,
+      label: startPrice.toLocaleString('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }),
+      labelDx: -12,
+      labelHorizontalAlignment: "right",
+      stroke: theme.color.fgMuted
+    })]
+  });
+}
 export default ReferenceLineStories;