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

package/esm/sparkline/Sparkline.js

@@ -3,16 +3,21 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { memo, useRef } from 'react';
+import React, { forwardRef, memo, useId, useMemo, useRef } from 'react';
+import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
 import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
+import { getSparklineRange } from '@coinbase/cds-common/visualizations/getSparklineRange';
 import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
 import { generateRandomId } from '@coinbase/cds-utils';
 import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
 import { generateSparklineAreaWithId } from './generateSparklineWithId';
 import { SparklineAreaPattern } from './SparklineAreaPattern';
 import { SparklinePath } from './SparklinePath';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Sparkline = /*#__PURE__*/memo(_ref => {
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @deprecated Use LineChart instead.
+ */
+export const Sparkline = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     background,
     color,
@@ -20,31 +25,140 @@ export const Sparkline = /*#__PURE__*/memo(_ref => {
     path,
     width,
     yAxisScalingFactor,
-    children
+    children,
+    strokeType = 'solid',
+    fillType = 'dotted'
   } = _ref;
   const theme = useTheme();
   const patternId = useRef(generateRandomId());
-  const stroke = color !== 'auto' ? color : getAccessibleColor({
+  const strokeColor = color !== 'auto' ? color : getAccessibleColor({
     background: background !== null && background !== void 0 ? background : theme.color.bg,
     foreground: 'auto',
     usage: 'graphic'
   });
   const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
-  const defs = children ? /*#__PURE__*/_jsx("defs", {
-    children: /*#__PURE__*/_jsx(SparklineAreaPattern, {
-      color: stroke,
-      id: patternId.current
-    })
-  }) : null;
+  const hasChildren = !!children;
+  const useModernFill = fillType === 'gradient' || fillType === 'gradientDotted';
+
+  // Stroke gradient (for strokeType='gradient')
+  const strokeGradient = useMemo(() => {
+    if (strokeType !== 'gradient') return null;
+    return getAccessibleForegroundGradient({
+      background: background !== null && background !== void 0 ? background : theme.color.bg,
+      color,
+      colorScheme: theme.activeColorScheme,
+      usage: 'graphic'
+    });
+  }, [strokeType, background, color, theme]);
+
+  // Calculate gradient coordinates for modern fills
+  const {
+    gradientY1,
+    gradientY2
+  } = useMemo(() => {
+    if (!useModernFill) return {
+      gradientY1: 0,
+      gradientY2: 0
+    };
+    if (!Number.isFinite(yAxisScalingFactor)) {
+      return {
+        gradientY1: 2,
+        gradientY2: height - 2
+      };
+    }
+    const {
+      yRange
+    } = getSparklineRange({
+      height,
+      width,
+      yAxisScalingFactor
+    });
+    const pathHeight = Math.abs(yRange[0] - yRange[1]);
+    const yTranslate = height / 2 - pathHeight / 2;
+    return {
+      gradientY1: yRange[1],
+      gradientY2: height - yTranslate
+    };
+  }, [useModernFill, height, width, yAxisScalingFactor]);
+  const strokeGradientId = useId();
+  const maskGradientId = "".concat(patternId.current, "-mask-gradient");
+  const maskId = "".concat(patternId.current, "-mask");
+  const defs = useMemo(() => {
+    if (!strokeGradient && !hasChildren) return null;
+    return /*#__PURE__*/_jsxs("defs", {
+      children: [strokeGradient && /*#__PURE__*/_jsx("linearGradient", {
+        id: strokeGradientId,
+        x1: "0%",
+        x2: "100%",
+        y1: "0%",
+        y2: "0%",
+        children: strokeGradient.map((item, i) => /*#__PURE__*/_jsx("stop", {
+          offset: item.offset,
+          stopColor: item.color
+        }, "".concat(i, "_").concat(item)))
+      }), hasChildren && fillType === 'dotted' && /*#__PURE__*/_jsx(SparklineAreaPattern, {
+        color: strokeColor,
+        id: patternId.current
+      }), hasChildren && fillType === 'gradient' && /*#__PURE__*/_jsxs("linearGradient", {
+        gradientUnits: "userSpaceOnUse",
+        id: patternId.current,
+        x1: "0",
+        x2: "0",
+        y1: gradientY1,
+        y2: gradientY2,
+        children: [/*#__PURE__*/_jsx("stop", {
+          offset: "0%",
+          stopColor: strokeColor,
+          stopOpacity: 0.3
+        }), /*#__PURE__*/_jsx("stop", {
+          offset: "100%",
+          stopColor: strokeColor,
+          stopOpacity: 0
+        })]
+      }), hasChildren && fillType === 'gradientDotted' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(SparklineAreaPattern, {
+          color: strokeColor,
+          id: patternId.current,
+          opacity: 1
+        }), /*#__PURE__*/_jsxs("linearGradient", {
+          gradientUnits: "userSpaceOnUse",
+          id: maskGradientId,
+          x1: "0",
+          x2: "0",
+          y1: gradientY1,
+          y2: gradientY2,
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: "white",
+            stopOpacity: 1
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: "white",
+            stopOpacity: 0
+          })]
+        }), /*#__PURE__*/_jsx("mask", {
+          id: maskId,
+          children: /*#__PURE__*/_jsx("rect", {
+            fill: "url(#".concat(maskGradientId, ")"),
+            height: height,
+            width: width
+          })
+        })]
+      })]
+    });
+  }, [strokeGradient, strokeGradientId, hasChildren, fillType, strokeColor, gradientY1, gradientY2, height, width, maskGradientId, maskId]);
+  const stroke = strokeType === 'gradient' ? "url(#".concat(strokeGradientId, ")") : strokeColor;
+  const shouldPlaceDefsInside = useModernFill;
   return /*#__PURE__*/_jsxs("svg", {
     height: height,
     width: width,
-    children: [defs, /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({}, translateProps), {}, {
-      children: [/*#__PURE__*/_jsx(SparklinePath, {
+    children: [!shouldPlaceDefsInside && defs, /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({}, translateProps), {}, {
+      children: [shouldPlaceDefsInside && defs, /*#__PURE__*/_jsx(SparklinePath, {
+        ref: ref,
         path: path,
         stroke: stroke
-      }), generateSparklineAreaWithId(patternId.current, children)]
+      }), generateSparklineAreaWithId(patternId.current, children, fillType === 'gradientDotted' ? maskId : undefined)]
     }))]
   });
-});
+}));
 Sparkline.displayName = 'Sparkline';

package/esm/sparkline/SparklineArea.js

@@ -1,13 +1,18 @@
 import React, { forwardRef, memo } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use AreaChart instead.
+ */
 export const SparklineArea = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     area,
-    patternId
+    patternId,
+    maskId
   } = _ref;
   return /*#__PURE__*/_jsx("path", {
     ref: ref,
     d: area,
-    fill: "url(#".concat(patternId, ")")
+    fill: "url(#".concat(patternId, ")"),
+    mask: maskId ? "url(#".concat(maskId, ")") : undefined
   });
 }));

package/esm/sparkline/SparklineAreaPattern.js

@@ -5,12 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const SparklineAreaPattern = _ref => {
   let {
     color,
-    id
+    id,
+    opacity
   } = _ref;
   const {
     activeColorScheme
   } = useTheme();
-  const fillOpacity = useSparklineAreaOpacity(activeColorScheme);
+  const themeOpacity = useSparklineAreaOpacity(activeColorScheme);
+  const fillOpacity = opacity !== null && opacity !== void 0 ? opacity : themeOpacity;
   return /*#__PURE__*/_jsx("pattern", {
     height: "4",
     id: id,

package/esm/sparkline/SparklineGradient.js

@@ -1,19 +1,10 @@
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { forwardRef, memo, useId, useMemo, useRef } from 'react';
-import { getAccessibleForegroundGradient } from '@coinbase/cds-common/color/getAccessibleForegroundGradient';
-import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
-import { getSparklineTransform } from '@coinbase/cds-common/visualizations/getSparklineTransform';
-import { generateRandomId } from '@coinbase/cds-utils';
-import { useTheme } from '@coinbase/cds-web/hooks/useTheme';
-import { generateSparklineAreaWithId } from './generateSparklineWithId';
-import { SparklineAreaPattern } from './SparklineAreaPattern';
-import { SparklinePath } from './SparklinePath';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, forwardedRef) => {
+import React, { forwardRef, memo } from 'react';
+import { Sparkline } from './Sparkline';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated Use LineChart instead.
+ */
+export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     background,
     color,
@@ -23,50 +14,17 @@ export const SparklineGradient = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref
     yAxisScalingFactor,
     children
   } = _ref;
-  const theme = useTheme();
-  const patternId = useRef(generateRandomId());
-  const gradient = getAccessibleForegroundGradient({
-    background: background !== null && background !== void 0 ? background : theme.color.bg,
-    color,
-    colorScheme: theme.activeColorScheme,
-    usage: 'graphic'
-  });
-  const areaColor = color !== 'auto' ? color : getAccessibleColor({
-    background: background !== null && background !== void 0 ? background : theme.color.bg,
-    foreground: 'auto',
-    usage: 'graphic'
-  });
-  const gradientId = useId();
-  const translateProps = getSparklineTransform(width, height, yAxisScalingFactor);
-  const hasChildren = !!children;
-  const linearGradient = useMemo(() => {
-    return /*#__PURE__*/_jsxs("defs", {
-      children: [/*#__PURE__*/_jsx("linearGradient", {
-        id: gradientId,
-        x1: "0%",
-        x2: "100%",
-        y1: "0%",
-        y2: "0%",
-        children: gradient.map((item, i) => /*#__PURE__*/_jsx("stop", {
-          offset: item.offset,
-          stopColor: item.color
-        }, "".concat(i, "_").concat(item)))
-      }), hasChildren && /*#__PURE__*/_jsx(SparklineAreaPattern, {
-        color: areaColor,
-        id: patternId.current
-      })]
-    });
-  }, [gradientId, gradient, hasChildren, areaColor]);
-  return /*#__PURE__*/_jsxs("svg", {
+  return /*#__PURE__*/_jsx(Sparkline, {
+    ref: ref,
+    background: background,
+    color: color,
+    fillType: "dotted",
     height: height,
+    path: path,
+    strokeType: "gradient",
     width: width,
-    children: [linearGradient, /*#__PURE__*/_jsxs("g", _objectSpread(_objectSpread({}, translateProps), {}, {
-      children: [/*#__PURE__*/_jsx(SparklinePath, {
-        ref: forwardedRef,
-        path: path,
-        stroke: "url(#".concat(gradientId, ")")
-      }), generateSparklineAreaWithId(patternId.current, children)]
-    }))]
+    yAxisScalingFactor: yAxisScalingFactor,
+    children: children
   });
 }));
 SparklineGradient.displayName = 'SparklineGradient';

package/esm/sparkline/generateSparklineWithId.js

@@ -1,6 +1,7 @@
 import { cloneElement } from 'react';
-export function generateSparklineAreaWithId(id, children) {
+export function generateSparklineAreaWithId(id, children, maskId) {
   return children ? /*#__PURE__*/cloneElement(children, {
-    patternId: id
+    patternId: id,
+    maskId
   }) : undefined;
 }

package/esm/sparkline/sparkline-interactive/SparklineInteractive.js

@@ -67,6 +67,7 @@ function SparklineInteractiveContentWithGeneric(_ref2) {
     hidePeriodSelector = false,
     disableScrubbing = false,
     fill = true,
+    fillType = 'gradient',
     yAxisScalingFactor = 1.0,
     compact,
     formatHoverDate,
@@ -248,6 +249,7 @@ function SparklineInteractiveContentWithGeneric(_ref2) {
                       area: area,
                       compact: compact,
                       fill: fill,
+                      fillType: fillType,
                       hoverData: hoverData,
                       path: path,
                       selectedPeriod: selectedPeriod,
@@ -309,5 +311,7 @@ function SparklineInteractiveWithGeneric(_ref4) {
   }, resizeKey);
 }
 
-// typescript doesn't understand the memo with the generic so it gets casted to a base react component
+/**
+ * @deprecated Use LineChart instead.
+ */
 export const SparklineInteractive = /*#__PURE__*/memo(SparklineInteractiveWithGeneric);

package/esm/sparkline/sparkline-interactive/SparklineInteractiveAnimatedPath.js

@@ -5,8 +5,8 @@ import { animatedPathConfig } from '@coinbase/cds-common/animation/sparkline';
 import { useValueChanges } from '@coinbase/cds-common/hooks/useValueChanges';
 import { interpolatePath } from 'd3-interpolate-path';
 import { select } from 'd3-selection';
+import { Sparkline } from '../Sparkline';
 import { SparklineArea } from '../SparklineArea';
-import { SparklineGradient } from '../SparklineGradient';
 import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
 import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,6 +20,7 @@ export const SparklineInteractiveAnimatedPath = /*#__PURE__*/memo(_ref => {
     color,
     selectedPeriod,
     area,
+    fillType = 'gradient',
     yAxisScalingFactor,
     initialPath,
     initialArea
@@ -92,10 +93,12 @@ export const SparklineInteractiveAnimatedPath = /*#__PURE__*/memo(_ref => {
       updatePathWithoutAnimation();
     }
   }, [addPreviousArea, addPreviousPath, hideFallback, isFallbackVisible, newArea, newPath, playAnimation, shouldUpdateArea, shouldUpdatePath, skipAnimation, updatePathWithoutAnimation]);
-  return /*#__PURE__*/_jsx(SparklineGradient, {
+  return /*#__PURE__*/_jsx(Sparkline, {
     ref: pathRef,
     color: color,
+    fillType: fillType,
     height: chartHeight,
+    strokeType: "solid",
     width: chartWidth,
     yAxisScalingFactor: yAxisScalingFactor,
     children: !!area && /*#__PURE__*/_jsx(SparklineArea, {

package/esm/sparkline/sparkline-interactive/SparklineInteractivePaths.js

@@ -8,6 +8,7 @@ function SparklineInteractivePathsWithGeneric(_ref) {
   let {
     showHoverData,
     fill,
+    fillType = 'gradient',
     path,
     area,
     selectedPeriod,
@@ -16,6 +17,8 @@ function SparklineInteractivePathsWithGeneric(_ref) {
     hoverData,
     compact
   } = _ref;
+  // Map 'dotted' to 'gradientDotted' for Sparkline
+  const sparklineFillType = fillType === 'dotted' ? 'gradientDotted' : 'gradient';
   const hoverPathRef = useRef(undefined);
   const hoverAreaRef = useRef(undefined);
   const shouldShowFill = !!fill;
@@ -36,6 +39,7 @@ function SparklineInteractivePathsWithGeneric(_ref) {
       area: shouldShowFill ? area : undefined,
       color: strokeColor,
       d: path,
+      fillType: sparklineFillType,
       initialArea: hoverAreaRef.current,
       initialPath: hoverPathRef.current,
       selectedPeriod: selectedPeriod,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@coinbase/cds-web-visualization",
-  "version": "3.3.0",
+  "version": "3.4.0-beta.2",
   "description": "Coinbase Design System - Web Sparkline",
   "repository": {
     "type": "git",
-    "url": "git@github.com:coinbase/cds-staging.git",
+    "url": "git@github.com:coinbase/cds.git",
     "directory": "packages/web-visualization"
   },
   "type": "module",
@@ -16,6 +16,10 @@
       "types": "./dts/index.d.ts",
       "default": "./esm/index.js"
     },
+    "./chart": {
+      "types": "./dts/chart/index.d.ts",
+      "default": "./esm/chart/index.js"
+    },
     "./sparkline": {
       "types": "./dts/sparkline/index.d.ts",
       "default": "./esm/sparkline/index.js"
@@ -34,10 +38,10 @@
     "CHANGELOG"
   ],
   "peerDependencies": {
-    "@coinbase/cds-common": "workspace:^",
-    "@coinbase/cds-lottie-files": "workspace:^",
-    "@coinbase/cds-utils": "workspace:^",
-    "@coinbase/cds-web": "workspace:^",
+    "@coinbase/cds-common": "^8.14.0",
+    "@coinbase/cds-lottie-files": "^3.3.2",
+    "@coinbase/cds-utils": "^2.3.3",
+    "@coinbase/cds-web": "^8.14.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -54,13 +58,13 @@
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@coinbase/cds-common": "workspace:^",
-    "@coinbase/cds-lottie-files": "workspace:^",
-    "@coinbase/cds-utils": "workspace:^",
-    "@coinbase/cds-web": "workspace:^",
+    "@coinbase/cds-common": "^8.14.0",
+    "@coinbase/cds-lottie-files": "^3.3.2",
+    "@coinbase/cds-utils": "^2.3.3",
+    "@coinbase/cds-web": "^8.14.0",
     "@figma/code-connect": "^1.3.4",
     "@linaria/core": "^3.0.0-beta.22",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1"
   }
-}
+}