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

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

@@ -0,0 +1,77 @@
+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, Line, LineChart, SolidLine } from '../';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const defaultChartHeight = 250;
+const BasicLineChart = () => {
+  const chartData = [65, 78, 45, 88, 92, 73, 69];
+  return /*#__PURE__*/_jsx(LineChart, {
+    showYAxis: true,
+    height: defaultChartHeight,
+    series: [{
+      id: 'monthly-growth',
+      data: chartData,
+      label: 'Monthly Growth',
+      color: '#2ca02c'
+    }],
+    yAxis: {
+      requestedTickCount: 2,
+      tickLabelFormatter: value => "$" + value,
+      showGrid: true
+    }
+  });
+};
+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: props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+        strokeWidth: 4
+      })),
+      curve: "natural",
+      seriesId: "lowerMiddle"
+    }), /*#__PURE__*/_jsx(Line, {
+      showArea: true,
+      AreaComponent: DottedArea,
+      curve: "step",
+      seriesId: "bottom"
+    })]
+  });
+};
+const ChartStories = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic Line Chart",
+      children: /*#__PURE__*/_jsx(BasicLineChart, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Line Styles",
+      children: /*#__PURE__*/_jsx(LineStyles, {})
+    })]
+  });
+};
+export default ChartStories;

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

@@ -0,0 +1,322 @@
+const _excluded = ["label"],
+  _excluded2 = ["label", "font", "hideDot", "style"];
+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 { ScrollView, 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 { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { HStack } from '@coinbase/cds-mobile/layout';
+import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { LiveTabLabel, PeriodSelector, PeriodSelectorActiveIndicator } from '../PeriodSelector';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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: 0.5,
+    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 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]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    maxWidth: "100%",
+    width: "100%",
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      contentContainerStyle: {
+        paddingEnd: 8,
+        flexGrow: 1
+      },
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/_jsx(PeriodSelector, {
+        activeBackground: activeBackground,
+        activeTab: activeTab,
+        gap: 1,
+        justifyContent: "flex-start",
+        onChange: setActiveTab,
+        tabs: tabs,
+        width: "fit-content"
+      })
+    }), /*#__PURE__*/_jsx(IconButton, {
+      compact: true,
+      accessibilityLabel: "Configure chart",
+      flexShrink: 0,
+      name: "filter",
+      variant: "secondary"
+    })]
+  });
+};
+const btcColor = assets.btc.color;
+const BTCActiveIndicator = /*#__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 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((_ref, ref) => {
+  let {
+      label
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const {
+    activeTab
+  } = useTabsContext();
+  const isActive = (activeTab == null ? void 0 : activeTab.id) === props.id;
+  const theme = useTheme();
+
+  // If label is already a React element (like LiveTabLabel), pass it through directly
+  // For string labels, wrap with custom BTC color when active
+  const wrappedLabel = typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+    dangerouslySetColor: isActive ? btcColor : theme.color.fg,
+    font: "label1",
+    children: label
+  }) : label;
+  return /*#__PURE__*/_jsx(SegmentedTab, _extends({
+    ref: ref,
+    label: wrappedLabel
+  }, props));
+}));
+const BTCLiveLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      label = 'LIVE',
+      font = 'label1',
+      hideDot,
+      style
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  const theme = useTheme();
+  const dotStyle = useMemo(() => ({
+    width: theme.space[1],
+    height: theme.space[1],
+    borderRadius: 1000,
+    marginRight: theme.space[0.75],
+    backgroundColor: btcColor
+  }), [theme.space]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center'
+    }, style],
+    children: [!hideDot && /*#__PURE__*/_jsx(View, {
+      style: dotStyle
+    }), /*#__PURE__*/_jsx(Text, _extends({
+      font: font,
+      style: {
+        color: btcColor
+      }
+    }, props, {
+      children: label
+    }))]
+  });
+}));
+const ColoredPeriodSelectorExample = () => {
+  const tabs = [{
+    id: '1H',
+    label: /*#__PURE__*/_jsx(BTCLiveLabel, {})
+  }, {
+    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 default function All() {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Basic",
+      children: /*#__PURE__*/_jsx(PeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Min Width",
+      children: /*#__PURE__*/_jsx(MinWidthPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Live Period",
+      children: /*#__PURE__*/_jsx(LivePeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Too Many Periods",
+      children: /*#__PURE__*/_jsx(TooManyPeriodsSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Colored (BTC)",
+      children: /*#__PURE__*/_jsx(ColoredPeriodSelectorExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Colored Excluding Live",
+      children: /*#__PURE__*/_jsx(ColoredExcludingLivePeriodSelectorExample, {})
+    })]
+  });
+}

package/esm/chart/area/Area.js

@@ -0,0 +1,75 @@
+import React, { memo, useMemo } from 'react';
+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 => {
+  let {
+    seriesId,
+    curve = 'bump',
+    type = 'solid',
+    AreaComponent: AreaComponentProp,
+    fill: fillProp,
+    fillOpacity = 1,
+    baseline,
+    connectNulls,
+    gradient: gradientProp,
+    transition,
+    animate
+  } = _ref;
+  const {
+    getSeries,
+    getSeriesData,
+    getXScale,
+    getYScale,
+    getXAxis
+  } = useCartesianChartContext();
+  const matchedSeries = useMemo(() => getSeries(seriesId), [seriesId, getSeries]);
+  const gradient = useMemo(() => gradientProp != null ? gradientProp : matchedSeries == null ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries == null ? void 0 : matchedSeries.gradient]);
+  const fill = useMemo(() => fillProp != null ? fillProp : matchedSeries == null ? void 0 : matchedSeries.color, [fillProp, matchedSeries == null ? void 0 : matchedSeries.color]);
+  const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
+  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,
+      connectNulls
+    });
+  }, [sourceData, xScale, yScale, curve, xAxis == null ? void 0 : xAxis.data, connectNulls]);
+  const AreaComponent = useMemo(() => {
+    if (AreaComponentProp) {
+      return AreaComponentProp;
+    }
+    switch (type) {
+      case 'dotted':
+        return DottedArea;
+      case 'gradient':
+        return GradientArea;
+      case 'solid':
+      default:
+        return SolidArea;
+    }
+  }, [AreaComponentProp, type]);
+  if (!xScale || !yScale || !sourceData || !area) return;
+  return /*#__PURE__*/_jsx(AreaComponent, {
+    animate: animate,
+    baseline: baseline,
+    d: area,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    gradient: gradient,
+    transition: transition,
+    yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
+  });
+});

package/esm/chart/area/AreaChart.js

@@ -0,0 +1,151 @@
+const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "connectNulls", "transition", "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", "type", "lineType"];
+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,
+      connectNulls,
+      transition,
+      LineComponent,
+      strokeWidth,
+      showXAxis,
+      showYAxis,
+      showLines,
+      lineType = 'solid',
+      xAxis,
+      yAxis,
+      inset,
+      children
+    } = _ref,
+    chartProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
+
+  // 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,
+      gradient: s.gradient,
+      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,
+        connectNulls: connectNulls,
+        curve: curve,
+        fillOpacity: fillOpacity,
+        seriesId: id,
+        transition: transition,
+        type: type
+      }, areaPropsFromSeries), id);
+    }), showLines && (series == null ? void 0 : series.map(_ref5 => {
+      let {
+          id,
+          // Area type (don't pass to Line)
+          lineType: seriesLineType
+        } = _ref5,
+        otherPropsFromSeries = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+      return /*#__PURE__*/_jsx(Line, _extends({
+        LineComponent: LineComponent,
+        connectNulls: connectNulls,
+        curve: curve,
+        seriesId: id,
+        strokeWidth: strokeWidth,
+        transition: transition,
+        type: seriesLineType != null ? seriesLineType : lineType
+      }, otherPropsFromSeries), id);
+    })), children]
+  }));
+}));