@coinbase/cds-web-visualization 3.4.0-beta.4 → 3.4.0-beta.6

package/esm/chart/Path.js

@@ -1,4 +1,5 @@
-const _excluded = ["animate", "clipRect", "clipOffset", "d"];
+const _excluded = ["d", "transition"],
+  _excluded2 = ["animate", "clipRect", "clipOffset", "d", "transition"];
 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; }
@@ -6,52 +7,65 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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 'd3-transition';
-import { memo, useCallback, useEffect, useId, useRef } from 'react';
-import { useValueChanges } from '@coinbase/cds-common/hooks/useValueChanges';
-import { interpolatePath } from 'd3-interpolate-path';
-import { select } from 'd3-selection';
+import { memo, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
+import { usePathTransition } from './utils/transition';
 import { useCartesianChartContext } from './ChartProvider';
+
+/**
+ * Duration in seconds for path enter transition.
+ */
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const Path = /*#__PURE__*/memo(_ref => {
+export const pathEnterTransitionDuration = 0.5;
+const AnimatedPath = /*#__PURE__*/memo(_ref => {
+  let {
+      d = '',
+      transition
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const interpolatedPath = usePathTransition({
+    currentPath: d,
+    transition
+  });
+  return /*#__PURE__*/_jsx(motion.path, _objectSpread({
+    d: interpolatedPath
+  }, pathProps));
+});
+export const Path = /*#__PURE__*/memo(_ref2 => {
   let {
       animate: animateProp,
       clipRect,
       clipOffset = 0,
-      d = ''
-    } = _ref,
-    pathProps = _objectWithoutProperties(_ref, _excluded);
-  const pathRef = useRef(null);
+      d = '',
+      transition
+    } = _ref2,
+    pathProps = _objectWithoutProperties(_ref2, _excluded2);
   const clipPathId = useId();
   const context = useCartesianChartContext();
-  const rect = clipRect !== null && clipRect !== void 0 ? clipRect : context.drawingArea;
+  const rect = clipRect !== undefined ? clipRect : context.drawingArea;
   const animate = animateProp !== null && animateProp !== void 0 ? animateProp : context.animate;
-  const {
-    previousValue: previousPath,
-    newValue: newPath,
-    hasChanged,
-    addPreviousValue
-  } = useValueChanges(d);
-  const morphPath = useCallback(() => {
-    if (!pathRef.current || !newPath || !previousPath) return;
-    select(pathRef.current).transition().duration(300).attrTween('d', function tween() {
-      return interpolatePath(previousPath, newPath);
-    });
-  }, [previousPath, newPath]);
-  useEffect(() => {
-    addPreviousValue(newPath);
-    if (animate && hasChanged && previousPath) {
-      morphPath();
-    }
-  }, [addPreviousValue, newPath, animate, hasChanged, previousPath, morphPath]);
 
   // The clip offset provides extra padding to prevent path from being cut off
   // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
   const totalOffset = clipOffset * 2; // Applied on both sides
 
+  const clipPathAnimation = useMemo(() => {
+    if (rect === null) return;
+    return {
+      hidden: {
+        width: 0
+      },
+      visible: {
+        width: rect.width + totalOffset,
+        transition: {
+          type: 'timing',
+          duration: pathEnterTransitionDuration
+        }
+      }
+    };
+  }, [rect, totalOffset]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("defs", {
+    children: [rect !== null && /*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
         id: clipPathId,
         children: !animate ? /*#__PURE__*/_jsx("rect", {
@@ -63,27 +77,18 @@ export const Path = /*#__PURE__*/memo(_ref => {
           animate: "visible",
           height: rect.height + totalOffset,
           initial: "hidden",
-          variants: {
-            hidden: {
-              width: 0
-            },
-            visible: {
-              width: rect.width + totalOffset,
-              transition: {
-                type: 'spring',
-                duration: 1,
-                bounce: 0
-              }
-            }
-          },
+          variants: clipPathAnimation,
           x: rect.x - clipOffset,
           y: rect.y - clipOffset
         })
       })
-    }), /*#__PURE__*/_jsx("path", _objectSpread({
-      ref: pathRef,
+    }), !animate ? /*#__PURE__*/_jsx("path", _objectSpread({
       clipPath: "url(#".concat(clipPathId, ")"),
       d: d
+    }, pathProps)) : /*#__PURE__*/_jsx(AnimatedPath, _objectSpread({
+      clipPath: "url(#".concat(clipPathId, ")"),
+      d: d,
+      transition: transition
     }, pathProps))]
   });
 });

package/esm/chart/PeriodSelector.js

@@ -1,4 +1,4 @@
-const _excluded = ["as", "color", "label", "display", "alignItems", "font", "hideDot", "disablePulse"],
+const _excluded = ["as", "color", "label", "display", "alignItems", "font", "hideDot"],
   _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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; }
@@ -15,11 +15,6 @@ import { Text } from '@coinbase/cds-web/typography';
 import { m as motion } from 'framer-motion';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MotionBox = motion(Box);
-const pulseTransitionConfig = {
-  duration: 2,
-  repeat: Infinity,
-  ease: 'easeInOut'
-};
 
 // Animated active indicator to support smooth transition of background color
 export const PeriodSelectorActiveIndicator = /*#__PURE__*/memo(_ref => {
@@ -66,15 +61,10 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
       display = 'inline-flex',
       alignItems = 'center',
       font = 'label1',
-      hideDot,
-      disablePulse
+      hideDot
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded);
   const Component = as !== null && as !== void 0 ? as : liveTabLabelDefaultElement;
-  const pulseAnimation = !disablePulse ? {
-    opacity: [1, 0, 1],
-    transition: pulseTransitionConfig
-  } : undefined;
   return /*#__PURE__*/_jsxs(Text, _objectSpread(_objectSpread({
     ref: ref,
     alignItems: alignItems,
@@ -83,12 +73,8 @@ export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, re
     display: display,
     font: font
   }, props), {}, {
-    children: [!hideDot && /*#__PURE__*/_jsx(motion.span, {
-      animate: !disablePulse && pulseAnimation,
-      className: dotBaseCss,
-      initial: {
-        opacity: 1
-      }
+    children: [!hideDot && /*#__PURE__*/_jsx("span", {
+      className: dotBaseCss
     }), label]
   }));
 }));

package/esm/chart/area/Area.js

@@ -6,17 +6,18 @@ 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',
+    curve = 'bump',
     type = 'solid',
-    AreaComponent: SelectedAreaComponent,
-    fill: specifiedFill,
+    AreaComponent: AreaComponentProp,
+    fill: fillProp,
     fillOpacity = 1,
-    stroke,
-    strokeWidth,
-    baseline
+    baseline,
+    connectNulls,
+    gradient: gradientProp,
+    transition,
+    animate
   } = _ref;
   const {
     getSeries,
@@ -25,20 +26,10 @@ export const Area = /*#__PURE__*/memo(_ref => {
     getYScale,
     getXAxis
   } = 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(() => {
-    const stackedData = getSeriesData(seriesId);
-    if (stackedData) {
-      return stackedData;
-    }
-    return getSeriesData(seriesId) || null;
-  }, [seriesId, getSeriesData]);
-
-  // Get scales and axes for this series
+  const gradient = useMemo(() => gradientProp !== null && gradientProp !== void 0 ? gradientProp : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.gradient]);
+  const fill = useMemo(() => fillProp !== null && fillProp !== void 0 ? fillProp : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color, [fillProp, matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color]);
+  const sourceData = useMemo(() => getSeriesData(seriesId), [seriesId, getSeriesData]);
   const xAxis = getXAxis();
   const xScale = getXScale();
   const yScale = getYScale(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId);
@@ -52,34 +43,33 @@ export const Area = /*#__PURE__*/memo(_ref => {
       xScale,
       yScale,
       curve,
-      xData
+      xData,
+      connectNulls
     });
-  }, [sourceData, xScale, yScale, curve, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data]);
+  }, [sourceData, xScale, yScale, curve, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data, connectNulls]);
   const AreaComponent = useMemo(() => {
-    if (SelectedAreaComponent) {
-      return SelectedAreaComponent;
+    if (AreaComponentProp) {
+      return AreaComponentProp;
     }
     switch (type) {
-      case 'solid':
-        return SolidArea;
       case 'dotted':
         return DottedArea;
       case 'gradient':
-      default:
         return GradientArea;
+      case 'solid':
+      default:
+        return SolidArea;
     }
-  }, [SelectedAreaComponent, type]);
-  if (!xScale || !yScale || !sourceData || !area) {
-    return null;
-  }
-  const fill = (_ref2 = specifiedFill !== null && specifiedFill !== void 0 ? specifiedFill : matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.color) !== null && _ref2 !== void 0 ? _ref2 : 'var(--color-fgPrimary)';
+  }, [AreaComponentProp, type]);
+  if (!xScale || !yScale || !sourceData || !area) return;
   return /*#__PURE__*/_jsx(AreaComponent, {
+    animate: animate,
     baseline: baseline,
     d: area,
     fill: fill,
     fillOpacity: fillOpacity,
-    stroke: stroke,
-    strokeWidth: strokeWidth,
+    gradient: gradient,
+    transition: transition,
     yAxisId: matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId
   });
 });

package/esm/chart/area/AreaChart.js

@@ -1,8 +1,8 @@
-const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "LineComponent", "strokeWidth", "showXAxis", "showYAxis", "showLines", "lineType", "xAxis", "yAxis", "inset", "children"],
+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"];
+  _excluded4 = ["id", "data", "label", "color", "yAxisId", "opacity", "LineComponent", "stackId", "transition"],
+  _excluded5 = ["id", "data", "label", "color", "yAxisId", "fill", "fillOpacity", "stackId", "type", "lineType", "transition"];
 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; }
@@ -25,6 +25,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       curve,
       fillOpacity,
       type,
+      connectNulls,
+      transition,
       LineComponent,
       strokeWidth,
       showXAxis,
@@ -33,11 +35,11 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       lineType = 'solid',
       xAxis,
       yAxis,
-      inset: userInset,
+      inset,
       children
     } = _ref,
     chartProps = _objectWithoutProperties(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
 
   // Convert AreaSeries to Series for Chart context
   const chartSeries = useMemo(() => {
@@ -47,7 +49,8 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       label: s.label,
       color: s.color,
       yAxisId: s.yAxisId,
-      stackId: s.stackId
+      stackId: s.stackId,
+      gradient: s.gradient
     }));
   }, [series]);
   const transformedSeries = useMemo(() => {
@@ -127,14 +130,17 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
           yAxisId,
           opacity,
           LineComponent,
-          stackId
+          stackId,
+          transition: seriesTransition
         } = _ref4,
         areaPropsFromSeries = _objectWithoutProperties(_ref4, _excluded4);
       return /*#__PURE__*/_jsx(Area, _objectSpread({
         AreaComponent: AreaComponent,
+        connectNulls: connectNulls,
         curve: curve,
         fillOpacity: fillOpacity,
         seriesId: id,
+        transition: seriesTransition !== null && seriesTransition !== void 0 ? seriesTransition : transition,
         type: type
       }, areaPropsFromSeries), id);
     }), showLines && (series === null || series === void 0 ? void 0 : series.map(_ref5 => {
@@ -146,19 +152,22 @@ export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
           yAxisId,
           fill,
           fillOpacity,
-          stackId
+          stackId,
+          type,
+          // Area type (don't pass to Line)
+          lineType: seriesLineType,
+          transition: seriesTransition
         } = _ref5,
-        linePropsFromSeries = _objectWithoutProperties(_ref5, _excluded5);
+        otherPropsFromSeries = _objectWithoutProperties(_ref5, _excluded5);
       return /*#__PURE__*/_jsx(Line, _objectSpread({
         LineComponent: LineComponent,
+        connectNulls: connectNulls,
         curve: curve,
-        seriesId: id // Line component now handles stacked data automatically
-        ,
-        stroke: color // Default to series color
-        ,
+        seriesId: id,
         strokeWidth: strokeWidth,
-        type: lineType
-      }, linePropsFromSeries), "".concat(id, "-line"));
+        transition: seriesTransition !== null && seriesTransition !== void 0 ? seriesTransition : transition,
+        type: seriesLineType !== null && seriesLineType !== void 0 ? seriesLineType : lineType
+      }, otherPropsFromSeries), id);
     })), children]
   }));
 }));

package/esm/chart/area/DottedArea.js

@@ -1,4 +1,4 @@
-const _excluded = ["d", "fill", "className", "style", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "classNames", "styles", "animate"];
+const _excluded = ["d", "fill", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "gradient", "animate", "transition"];
 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; }
@@ -6,136 +6,82 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 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 { memo, useId, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createGradient, getBaseline } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A customizable dotted area gradient component.
+ * When no gradient is provided, renders a default gradient based
+ * on the fill color and peak/baseline opacities.
+ */
 export const DottedArea = /*#__PURE__*/memo(_ref => {
   let {
       d,
-      fill,
-      className,
-      style,
+      fill = 'var(--color-fgPrimary)',
       patternSize = 4,
       dotSize = 1,
       peakOpacity = 1,
       baselineOpacity = 0,
       baseline,
       yAxisId,
-      classNames,
-      styles,
-      animate
+      gradient: gradientProp,
+      animate,
+      transition
     } = _ref,
     pathProps = _objectWithoutProperties(_ref, _excluded);
-  const context = useCartesianChartContext();
+  const {
+    getYAxis
+  } = 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 || yScale === void 0 ? void 0 : yScale.range();
-  const yDomain = yScale === null || yScale === void 0 ? 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) {
-      // Get the actual y coordinate for the baseline
-      const scaledValue = yScale(baseline !== null && baseline !== void 0 ? baseline : dataBaseline);
-      if (typeof scaledValue === 'number') {
-        baselinePosition = scaledValue;
-      }
-    } else {
-      // Calculate percentage position
-      baselinePercentage = "".concat((maxValue - (baseline !== null && baseline !== void 0 ? baseline : dataBaseline)) / (maxValue - minValue) * 100, "%");
-    }
-  }
-  const gradientY1 = useUserSpaceUnits ? yRange[1] : '0%';
-  const gradientY2 = useUserSpaceUnits ? yRange[0] : '100%';
+  const yAxisConfig = getYAxis(yAxisId);
+  const gradient = useMemo(() => {
+    if (gradientProp) return gradientProp;
+    if (!yAxisConfig) return;
+    const baselineValue = getBaseline(yAxisConfig.domain, baseline);
+    return createGradient(yAxisConfig.domain, baselineValue, fill, peakOpacity, baselineOpacity);
+  }, [gradientProp, yAxisConfig, fill, baseline, peakOpacity, baselineOpacity]);
   return /*#__PURE__*/_jsxs("g", {
-    className: className !== null && className !== void 0 ? className : classNames === null || classNames === void 0 ? void 0 : classNames.root,
-    style: style !== null && style !== void 0 ? style : styles === null || styles === void 0 ? void 0 : styles.root,
     children: [/*#__PURE__*/_jsxs("defs", {
       children: [/*#__PURE__*/_jsx("pattern", {
-        className: classNames === null || classNames === void 0 ? void 0 : classNames.pattern,
         height: patternSize,
         id: patternId,
         patternUnits: "userSpaceOnUse",
-        style: styles === null || styles === void 0 ? void 0 : styles.pattern,
         width: patternSize,
         x: "0",
         y: "0",
         children: /*#__PURE__*/_jsx("circle", {
           cx: dotCenterPosition,
           cy: dotCenterPosition,
-          fill: fill,
+          fill: "white",
           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 ? /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("stop", {
-            offset: "0%",
-            stopColor: "white",
-            stopOpacity: peakOpacity
-          }), /*#__PURE__*/_jsx("stop", {
-            offset: baselinePercentage !== null && baselinePercentage !== void 0 ? baselinePercentage : "".concat((baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100, "%"),
-            stopColor: "white",
-            stopOpacity: baselineOpacity
-          }), /*#__PURE__*/_jsx("stop", {
-            offset: "100%",
-            stopColor: "white",
-            stopOpacity: peakOpacity
-          })]
-        }) : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("stop", {
-            offset: "0%",
-            stopColor: "white",
-            stopOpacity: peakOpacity
-          }), /*#__PURE__*/_jsx("stop", {
-            offset: "100%",
-            stopColor: "white",
-            stopOpacity: baselineOpacity
-          })]
-        })
       }), /*#__PURE__*/_jsx("mask", {
         id: maskId,
         children: /*#__PURE__*/_jsx(Path, {
           animate: animate,
           d: d,
-          fill: "url(#".concat(gradientId, ")")
+          fill: "url(#".concat(patternId, ")"),
+          transition: transition
         })
+      }), gradient && /*#__PURE__*/_jsx(Gradient, {
+        animate: animate,
+        gradient: gradient,
+        id: gradientId,
+        transition: transition,
+        yAxisId: yAxisId
       })]
     }), /*#__PURE__*/_jsx(Path, _objectSpread({
       animate: animate,
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.path,
       d: d,
-      fill: "url(#".concat(patternId, ")"),
+      fill: gradient ? "url(#".concat(gradientId, ")") : fill,
       mask: "url(#".concat(maskId, ")"),
-      style: styles === null || styles === void 0 ? void 0 : styles.path
+      transition: transition
     }, pathProps))]
   });
 });