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

package/esm/chart/line/SolidLine.js

@@ -1,31 +1,46 @@
-const _excluded = ["fill", "stroke", "strokeLinecap", "strokeLinejoin", "strokeOpacity", "strokeWidth"];
+const _excluded = ["fill", "stroke", "strokeCap", "strokeJoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "d", "animate", "transition"];
 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 } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A customizable solid line component which uses path element.
+ * A customizable solid line component.
+ * Supports gradient for gradient effects and smooth data transitions via AnimatedPath.
  */
 export const SolidLine = /*#__PURE__*/memo(_ref => {
   let {
       fill = 'none',
       stroke,
-      strokeLinecap = 'round',
-      strokeLinejoin = 'round',
+      strokeCap = 'round',
+      strokeJoin = 'round',
       strokeOpacity = 1,
-      strokeWidth = 2
+      strokeWidth = 2,
+      gradient,
+      yAxisId,
+      d,
+      animate,
+      transition
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   return /*#__PURE__*/_jsx(Path, _extends({
+    animate: animate,
     clipOffset: strokeWidth,
+    d: d,
     fill: fill,
-    stroke: stroke != null ? stroke : theme.color.bgLine,
-    strokeLinecap: strokeLinecap,
-    strokeLinejoin: strokeLinejoin,
+    stroke: stroke != null ? stroke : theme.color.fgPrimary,
+    strokeCap: strokeCap,
+    strokeJoin: strokeJoin,
     strokeOpacity: strokeOpacity,
-    strokeWidth: strokeWidth
-  }, props));
+    strokeWidth: strokeWidth,
+    transition: transition
+  }, props, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      gradient: gradient,
+      yAxisId: yAxisId
+    })
+  }));
 });