@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.2

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

@@ -0,0 +1,294 @@
+const _excluded = ["label"];
+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; }
+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 { forwardRef, memo, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { useTabsContext } from '@coinbase/cds-common/tabs/TabsContext';
+import { IconButton } from '@coinbase/cds-mobile/buttons';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import { TextHeadline, TextLabel1 } from '@coinbase/cds-mobile/typography';
+import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  component: PeriodSelector,
+  title: 'Components/Chart/PeriodSelector'
+};
+const Example = _ref => {
+  let {
+    children,
+    title,
+    description
+  } = _ref;
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(TextHeadline, {
+      children: title
+    }), description, children]
+  });
+};
+const PeriodSelectorExample = () => {
+  const tabs = [{
+    id: '1H',
+    label: '1H'
+  }, {
+    id: '1D',
+    label: '1D'
+  }, {
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: '1Y',
+    label: '1Y'
+  }, {
+    id: 'All',
+    label: 'All'
+  }];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    activeTab: activeTab,
+    onChange: tab => setActiveTab(tab),
+    tabs: tabs
+  });
+};
+const MinWidthPeriodSelectorExample = () => {
+  const tabs = [{
+    id: '1H',
+    label: '1H'
+  }, {
+    id: '1D',
+    label: '1D'
+  }, {
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: '1Y',
+    label: '1Y'
+  }, {
+    id: 'All',
+    label: 'All'
+  }];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    activeTab: activeTab,
+    gap: 2,
+    onChange: tab => setActiveTab(tab),
+    tabs: tabs,
+    width: "fit-content"
+  });
+};
+const LivePeriodSelectorExample = () => {
+  const tabs = useMemo(() => [{
+    id: '1H',
+    label: /*#__PURE__*/_jsx(LiveTabLabel, {})
+  }, {
+    id: '1D',
+    label: '1D'
+  }, {
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: '1Y',
+    label: '1Y'
+  }, {
+    id: 'All',
+    label: 'All'
+  }], []);
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
+  const activeBackground = useMemo(() => !isLive ? 'bgPrimaryWash' : 'bgNegativeWash', [isLive]);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    activeBackground: activeBackground,
+    activeTab: activeTab,
+    onChange: setActiveTab,
+    tabs: tabs
+  });
+};
+const TooManyPeriodsSelectorExample = () => {
+  const theme = useTheme();
+  const tabs = useMemo(() => [{
+    id: '1H',
+    label: /*#__PURE__*/_jsx(LiveTabLabel, {})
+  }, {
+    id: '1D',
+    label: '1D'
+  }, {
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: 'YTD',
+    label: 'YTD'
+  }, {
+    id: '1Y',
+    label: '1Y'
+  }, {
+    id: '5Y',
+    label: '5Y'
+  }, {
+    id: 'All',
+    label: 'All'
+  }], []);
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
+  const activeBackground = useMemo(() => !isLive ? 'bgPrimaryWash' : 'bgNegativeWash', [isLive]);
+  const gradientOverlayStyles = useMemo(() => [{
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    top: 0,
+    width: theme.space[4],
+    backgroundColor: theme.color.bgPrimary,
+    opacity: 0.8
+  }], [theme.space, theme.color.bgPrimary]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    maxWidth: "100%",
+    overflow: "hidden",
+    width: "100%",
+    children: [/*#__PURE__*/_jsxs(Box, {
+      flexGrow: 1,
+      overflow: "hidden",
+      position: "relative",
+      children: [/*#__PURE__*/_jsx(Box, {
+        overflow: "scroll",
+        paddingEnd: 2,
+        children: /*#__PURE__*/_jsx(PeriodSelector, {
+          activeBackground: activeBackground,
+          activeTab: activeTab,
+          gap: 1,
+          justifyContent: "flex-start",
+          onChange: setActiveTab,
+          tabs: tabs,
+          width: "fit-content"
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        style: gradientOverlayStyles
+      })]
+    }), /*#__PURE__*/_jsx(IconButton, {
+      compact: true,
+      accessibilityLabel: "Configure chart",
+      flexShrink: 0,
+      height: 36,
+      name: "filter",
+      variant: "secondary"
+    })]
+  });
+};
+const btcColor = assets.btc.color;
+const BTCActiveIndicator = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
+  background: btcColor + "1A"
+})));
+const BTCActiveExcludingLiveIndicator = /*#__PURE__*/memo(props => {
+  const theme = useTheme();
+  const {
+    activeTab
+  } = useTabsContext();
+  const isLive = useMemo(() => (activeTab == null ? void 0 : activeTab.id) === '1H', [activeTab]);
+  const backgroundColor = useMemo(() => isLive ? theme.color.bgNegativeWash : btcColor + "1A", [isLive, theme.color.bgNegativeWash]);
+  return /*#__PURE__*/_jsx(PeriodSelectorActiveIndicator, _extends({}, props, {
+    background: backgroundColor
+  }));
+});
+const BTCTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      label
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const {
+    activeTab
+  } = useTabsContext();
+  const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
+  const textColor = isActive ? btcColor : undefined;
+  return /*#__PURE__*/_jsx(SegmentedTab, _extends({
+    ref: ref,
+    label: /*#__PURE__*/_jsx(TextLabel1, {
+      dangerouslySetColor: textColor,
+      children: label
+    })
+  }, props));
+}));
+const ColoredPeriodSelectorExample = () => {
+  const tabs = [{
+    id: '1H',
+    label: /*#__PURE__*/_jsx(LiveTabLabel, {
+      dangerouslySetColor: btcColor
+    })
+  }, {
+    id: '1D',
+    label: '1D'
+  }, {
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: '1Y',
+    label: '1Y'
+  }, {
+    id: 'All',
+    label: 'All'
+  }];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    TabComponent: BTCTab,
+    TabsActiveIndicatorComponent: BTCActiveIndicator,
+    activeTab: activeTab,
+    onChange: tab => setActiveTab(tab),
+    tabs: tabs
+  });
+};
+const ColoredExcludingLivePeriodSelectorExample = () => {
+  const tabs = [{
+    id: '1H',
+    label: /*#__PURE__*/_jsx(LiveTabLabel, {})
+  }, {
+    id: '1D',
+    label: '1D'
+  }, {
+    id: '1W',
+    label: '1W'
+  }, {
+    id: '1M',
+    label: '1M'
+  }, {
+    id: '1Y',
+    label: '1Y'
+  }, {
+    id: 'All',
+    label: 'All'
+  }];
+  const [activeTab, setActiveTab] = useState(tabs[0]);
+  return /*#__PURE__*/_jsx(PeriodSelector, {
+    TabComponent: BTCTab,
+    TabsActiveIndicatorComponent: BTCActiveExcludingLiveIndicator,
+    activeTab: activeTab,
+    onChange: tab => setActiveTab(tab),
+    tabs: tabs
+  });
+};
+export const All = () => {
+  return /*#__PURE__*/_jsx(VStack, {
+    gap: 2,
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Basic Example",
+      children: /*#__PURE__*/_jsx(PeriodSelectorExample, {})
+    })
+  });
+};

package/esm/chart/area/Area.js

@@ -0,0 +1,85 @@
+import React, { memo, useMemo } from 'react';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getAreaPath } from '../utils';
+import { DottedArea } from './DottedArea';
+import { GradientArea } from './GradientArea';
+import { SolidArea } from './SolidArea';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Area = /*#__PURE__*/memo(_ref => {
+  var _ref2;
+  let {
+    seriesId,
+    curve = 'linear',
+    type = 'solid',
+    AreaComponent: SelectedAreaComponent,
+    fill: specifiedFill,
+    fillOpacity = 1,
+    stroke,
+    strokeWidth,
+    baseline
+  } = _ref;
+  const theme = useTheme();
+  const {
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale,
+    getXAxis,
+    drawingArea
+  } = useCartesianChartContext();
+
+  // Get sourceData from series (using stacked data if available)
+  const matchedSeries = useMemo(() => getSeries(seriesId), [seriesId, getSeries]);
+
+  // Check for stacked data first, then fall back to raw data
+  const sourceData = useMemo(() => {
+    return getSeriesData(seriesId) || null;
+  }, [seriesId, getSeriesData]);
+
+  // Get scales and axes for this series
+  const xAxis = getXAxis();
+  const xScale = getXScale();
+  const yScale = getYScale(matchedSeries == null ? void 0 : matchedSeries.yAxisId);
+  const area = useMemo(() => {
+    if (!sourceData || sourceData.length === 0 || !xScale || !yScale) return '';
+
+    // Get numeric x-axis data if available
+    const xData = xAxis != null && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
+    return getAreaPath({
+      data: sourceData,
+      xScale,
+      yScale,
+      curve,
+      xData
+    });
+  }, [sourceData, xScale, yScale, curve, xAxis == null ? void 0 : xAxis.data]);
+  const AreaComponent = useMemo(() => {
+    if (SelectedAreaComponent) {
+      return SelectedAreaComponent;
+    }
+    switch (type) {
+      case 'solid':
+        return SolidArea;
+      case 'dotted':
+        return DottedArea;
+      case 'gradient':
+      default:
+        return GradientArea;
+    }
+  }, [SelectedAreaComponent, type]);
+  if (!xScale || !yScale || !sourceData || !area) {
+    return null;
+  }
+  const fill = (_ref2 = specifiedFill != null ? specifiedFill : matchedSeries == null ? void 0 : matchedSeries.color) != null ? _ref2 : theme.color.fgPrimary;
+  return /*#__PURE__*/_jsx(AreaComponent, {
+    baseline: baseline,
+    clipRect: drawingArea,
+    d: area,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
+  });
+});

package/esm/chart/area/AreaChart.js

@@ -0,0 +1,146 @@
+const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
+  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
+  _excluded4 = ["id", "data", "label", "color", "yAxisId", "opacity", "LineComponent", "stackId"],
+  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId"];
+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, useMemo } from 'react';
+import { XAxis, YAxis } from '../axis';
+import { CartesianChart } from '../CartesianChart';
+import { Line } from '../line/Line';
+import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
+import { Area } from './Area';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      stacked,
+      AreaComponent,
+      curve,
+      fillOpacity,
+      type,
+      LineComponent,
+      strokeWidth,
+      showXAxis,
+      showYAxis,
+      showLines,
+      lineType = 'solid',
+      xAxis,
+      yAxis,
+      inset: userInset,
+      children
+    } = _ref,
+    chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
+
+  // Convert AreaSeries to Series for Chart context
+  const chartSeries = useMemo(() => {
+    return series == null ? void 0 : series.map(s => ({
+      id: s.id,
+      data: s.data,
+      label: s.label,
+      color: s.color,
+      yAxisId: s.yAxisId,
+      stackId: s.stackId
+    }));
+  }, [series]);
+  const transformedSeries = useMemo(() => {
+    if (!stacked || !chartSeries) return chartSeries;
+    return chartSeries.map(s => {
+      var _s$stackId;
+      return _extends({}, s, {
+        stackId: (_s$stackId = s.stackId) != null ? _s$stackId : defaultStackId
+      });
+    });
+  }, [chartSeries, stacked]);
+  const seriesToRender = transformedSeries != null ? transformedSeries : chartSeries;
+
+  // Split axis props into config props for Chart and visual props for axis components
+  const _ref2 = xAxis || {},
+    {
+      scaleType: xScaleType,
+      data: xData,
+      categoryPadding: xCategoryPadding,
+      domain: xDomain,
+      domainLimit: xDomainLimit,
+      range: xRange
+    } = _ref2,
+    xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const _ref3 = yAxis || {},
+    {
+      scaleType: yScaleType,
+      data: yData,
+      categoryPadding: yCategoryPadding,
+      domain: yDomain,
+      domainLimit: yDomainLimit,
+      range: yRange,
+      id: yAxisId
+    } = _ref3,
+    yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+  const xAxisConfig = {
+    scaleType: xScaleType,
+    data: xData,
+    categoryPadding: xCategoryPadding,
+    domain: xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange
+  };
+  const hasNegativeValues = useMemo(() => {
+    if (!series) return false;
+    return series.some(s => {
+      var _s$data;
+      return (_s$data = s.data) == null ? void 0 : _s$data.some(value => typeof value === 'number' && value < 0 || Array.isArray(value) && value.some(v => typeof v === 'number' && v < 0));
+    });
+  }, [series]);
+
+  // Set default min domain to 0 for area chart, but only if there are no negative values
+  const yAxisConfig = {
+    scaleType: yScaleType,
+    data: yData,
+    categoryPadding: yCategoryPadding,
+    domain: hasNegativeValues ? yDomain : _extends({
+      min: 0
+    }, yDomain),
+    domainLimit: yDomainLimit,
+    range: yRange
+  };
+  return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, chartProps, {
+    ref: ref,
+    inset: calculatedInset,
+    series: seriesToRender,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig,
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _extends({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _extends({
+      axisId: yAxisId
+    }, yAxisVisualProps)), series == null ? void 0 : series.map(_ref4 => {
+      let {
+          id
+        } = _ref4,
+        areaPropsFromSeries = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+      return /*#__PURE__*/_jsx(Area, _extends({
+        AreaComponent: AreaComponent,
+        curve: curve,
+        fillOpacity: fillOpacity,
+        seriesId: id,
+        type: type
+      }, areaPropsFromSeries), id);
+    }), showLines && (series == null ? void 0 : series.map(_ref5 => {
+      let {
+          id,
+          color
+        } = _ref5,
+        linePropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+      return /*#__PURE__*/_jsx(Line, _extends({
+        LineComponent: LineComponent,
+        curve: curve,
+        seriesId: id // Line component now handles stacked data automatically
+        ,
+        stroke: color // Default to series color
+        ,
+        strokeWidth: strokeWidth,
+        type: lineType
+      }, linePropsFromSeries), id + "-line");
+    })), children]
+  }));
+}));

package/esm/chart/area/DottedArea.js

@@ -0,0 +1,128 @@
+const _excluded = ["d", "fill", "fillOpacity", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "clipRect"];
+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, useId } from 'react';
+import { Circle, Defs, G, LinearGradient, Mask, Pattern, Stop } from 'react-native-svg';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Path } from '../Path';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DottedArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill,
+      fillOpacity = 1,
+      patternSize = 4,
+      dotSize = 1,
+      peakOpacity = 1,
+      baselineOpacity = 0,
+      baseline,
+      yAxisId,
+      clipRect
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const context = useCartesianChartContext();
+  const patternId = useId();
+  const gradientId = useId();
+  const maskId = useId();
+  const dotCenterPosition = patternSize / 2;
+
+  // Get the y-scale for the specified axis (or default)
+  const yScale = context.getYScale(yAxisId);
+  const yRange = yScale == null ? void 0 : yScale.range();
+  const yDomain = yScale == null ? void 0 : yScale.domain();
+
+  // Use chart range if available, otherwise fall back to percentage
+  const useUserSpaceUnits = yRange !== undefined;
+
+  // Auto-calculate baseline position based on domain
+  let baselinePosition;
+  let baselinePercentage;
+  if (yScale && yDomain) {
+    const [minValue, maxValue] = yDomain;
+    let dataBaseline;
+    if (minValue >= 0) {
+      // All positive: baseline at min
+      dataBaseline = minValue;
+    } else if (maxValue <= 0) {
+      // All negative: baseline at max
+      dataBaseline = maxValue;
+    } else {
+      // Crosses zero: baseline at 0
+      dataBaseline = 0;
+    }
+    if (useUserSpaceUnits && yRange) {
+      // Get the actual y coordinate for the baseline
+      const scaledValue = yScale(baseline != null ? baseline : dataBaseline);
+      if (typeof scaledValue === 'number') {
+        baselinePosition = scaledValue;
+      }
+    } else {
+      // Calculate percentage position
+      baselinePercentage = (maxValue - (baseline != null ? baseline : dataBaseline)) / (maxValue - minValue) * 100 + "%";
+    }
+  }
+  const gradientY1 = useUserSpaceUnits && yRange ? String(yRange[1]) : '0%';
+  const gradientY2 = useUserSpaceUnits && yRange ? String(yRange[0]) : '100%';
+  const effectiveFill = fill != null ? fill : theme.color.fgPrimary;
+  return /*#__PURE__*/_jsxs(G, {
+    children: [/*#__PURE__*/_jsxs(Defs, {
+      children: [/*#__PURE__*/_jsx(Pattern, {
+        height: patternSize,
+        id: patternId,
+        patternUnits: "userSpaceOnUse",
+        width: patternSize,
+        x: "0",
+        y: "0",
+        children: /*#__PURE__*/_jsx(Circle, {
+          cx: dotCenterPosition,
+          cy: dotCenterPosition,
+          fill: effectiveFill,
+          r: dotSize
+        })
+      }), /*#__PURE__*/_jsx(LinearGradient, {
+        gradientUnits: useUserSpaceUnits ? 'userSpaceOnUse' : 'objectBoundingBox',
+        id: gradientId,
+        x1: useUserSpaceUnits ? '0' : '0%',
+        x2: useUserSpaceUnits ? '0' : '0%',
+        y1: gradientY1,
+        y2: gradientY2,
+        children: baselinePosition !== undefined || baselinePercentage !== undefined ? /* Diverging gradient: high opacity at extremes, low at baseline */
+        [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: "white",
+          stopOpacity: peakOpacity
+        }, "0"), /*#__PURE__*/_jsx(Stop, {
+          offset: baselinePercentage != null ? baselinePercentage : (baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100 + "%",
+          stopColor: "white",
+          stopOpacity: baselineOpacity
+        }, "1"), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: "white",
+          stopOpacity: peakOpacity
+        }, "2")] : /* Simple gradient from top to bottom */
+        [/*#__PURE__*/_jsx(Stop, {
+          offset: "0%",
+          stopColor: "white",
+          stopOpacity: peakOpacity
+        }, "0"), /*#__PURE__*/_jsx(Stop, {
+          offset: "100%",
+          stopColor: "white",
+          stopOpacity: baselineOpacity
+        }, "1")]
+      }), /*#__PURE__*/_jsx(Mask, {
+        id: maskId,
+        children: /*#__PURE__*/_jsx(Path, {
+          d: d,
+          fill: "url(#" + gradientId + ")"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Path, _extends({
+      clipRect: clipRect,
+      d: d,
+      fill: "url(#" + patternId + ")",
+      mask: "url(#" + maskId + ")"
+    }, pathProps))]
+  });
+});