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

package/esm/chart/bar/BarStack.js

@@ -5,9 +5,16 @@ 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); }
 import React, { memo, useMemo } from 'react';
 import { useCartesianChartContext } from '../ChartProvider';
+import { evaluateGradientAtValue, getGradientConfig } from '../utils/gradient';
 import { Bar } from './Bar';
 import { DefaultBarStack } from './DefaultBarStack';
 import { jsx as _jsx } from "react/jsx-runtime";
+const EPSILON = 1e-4;
+
+/**
+ * Extended series type that includes bar-specific properties.
+ */
+
 /**
  * BarStack component that renders a single stack of bars at a specific category index.
  * Handles the stacking logic for bars within a single category.
@@ -29,13 +36,17 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     stackGap,
     barMinSize,
     stackMinSize,
-    roundBaseline
+    roundBaseline,
+    transitions,
+    transition
   } = _ref;
   const {
     getSeriesData,
-    getXAxis
+    getXAxis,
+    getXScale,
+    getSeries
   } = useCartesianChartContext();
-  const stackGapPx = stackGap;
+  const xScale = getXScale();
   const barMinSizePx = barMinSize;
   const stackMinSizePx = stackMinSize;
   const xAxis = getXAxis();
@@ -47,6 +58,20 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     const baseline = (_yScale = yScale(baselineValue)) !== null && _yScale !== void 0 ? _yScale : rect.y + rect.height;
     return Math.max(rect.y, Math.min(baseline, rect.y + rect.height));
   }, [rect.height, rect.y, yScale]);
+  const seriesGradients = useMemo(() => {
+    return series.map(s => {
+      if (!s.gradient || !xScale || !yScale) return null;
+      const gradientScale = s.gradient.axis === 'x' ? xScale : yScale;
+      const stops = getGradientConfig(s.gradient, xScale, yScale);
+      if (!stops) return null;
+      return {
+        seriesId: s.id,
+        gradient: s.gradient,
+        scale: gradientScale,
+        stops
+      };
+    });
+  }, [series, xScale, yScale]);
 
   // Calculate bars for this specific category
   const {
@@ -65,7 +90,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
 
     // Process each series in the stack
     series.forEach(s => {
-      var _yScale2, _yScale3;
+      var _yScale2, _yScale3, _s$color;
       const data = getSeriesData(s.id);
       if (!data) return;
       const value = data[categoryIndex];
@@ -103,6 +128,30 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       // Update stack bounds
       minY = Math.min(minY, y);
       maxY = Math.max(maxY, y + height);
+      let barFill = (_s$color = s.color) !== null && _s$color !== void 0 ? _s$color : 'var(--color-fgPrimary)';
+
+      // Evaluate gradient if provided (using precomputed stops)
+      const seriesGradientConfig = seriesGradients.find(g => (g === null || g === void 0 ? void 0 : g.seriesId) === s.id);
+      if (seriesGradientConfig && originalValue !== null && originalValue !== undefined) {
+        var _seriesGradientConfig;
+        const axis = (_seriesGradientConfig = seriesGradientConfig.gradient.axis) !== null && _seriesGradientConfig !== void 0 ? _seriesGradientConfig : 'y';
+        // For x-axis gradient, use the categoryIndex
+        // For y-axis gradient, use the ORIGINAL data value (not the processed top value)
+        // This is important for bar charts where originalValue might be a single number (e.g., -40, 15)
+        // or a tuple (e.g., [0, 10] for range bars)
+        let evalValue;
+        if (axis === 'x') {
+          evalValue = categoryIndex;
+        } else {
+          // Use original value for evaluation - handles both single numbers and tuples
+          evalValue = Array.isArray(originalValue) ? originalValue[1] : originalValue;
+        }
+        const evaluatedColor = evaluateGradientAtValue(seriesGradientConfig.stops, evalValue, seriesGradientConfig.scale);
+        if (evaluatedColor) {
+          // Only apply gradient color if fill is not explicitly set
+          barFill = evaluatedColor;
+        }
+      }
       allBars.push({
         seriesId: s.id,
         x,
@@ -111,21 +160,17 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         height,
         dataY: value,
         // Store the actual data value
-        // Use series-specific properties, falling back to defaults
+        fill: barFill,
+        // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+        roundTop: roundBaseline || Math.abs(barTop - baseline) >= EPSILON,
+        roundBottom: roundBaseline || Math.abs(barBottom - baseline) >= EPSILON,
         BarComponent: s.BarComponent,
-        fill: s.fill || s.color || 'var(--color-fgPrimary)',
-        fillOpacity: s.fillOpacity,
-        stroke: s.stroke,
-        strokeWidth: s.strokeWidth,
-        // Pass context data for custom components
-        roundTop: roundBaseline || barTop !== baseline,
-        roundBottom: roundBaseline || barBottom !== baseline,
         shouldApplyGap
       });
     });
 
     // Apply proportional gap distribution to maintain total stack height
-    if (stackGapPx && allBars.length > 1) {
+    if (stackGap && allBars.length > 1) {
       // Separate bars by baseline side
       const barsAboveBaseline = allBars.filter(bar => {
         const [bottom, top] = bar.dataY.sort((a, b) => a - b);
@@ -138,7 +183,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
 
       // Apply proportional gaps to bars above baseline
       if (barsAboveBaseline.length > 1) {
-        const totalGapSpace = stackGapPx * (barsAboveBaseline.length - 1);
+        const totalGapSpace = stackGap * (barsAboveBaseline.length - 1);
         const totalDataHeight = barsAboveBaseline.reduce((sum, bar) => sum + bar.height, 0);
         const heightReduction = totalGapSpace / totalDataHeight;
 
@@ -160,13 +205,13 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
           }
 
           // Move to next position (include gap for next bar)
-          currentY = newY - (index < sortedBars.length - 1 ? stackGapPx : 0);
+          currentY = newY - (index < sortedBars.length - 1 ? stackGap : 0);
         });
       }
 
       // Apply proportional gaps to bars below baseline
       if (barsBelowBaseline.length > 1) {
-        const totalGapSpace = stackGapPx * (barsBelowBaseline.length - 1);
+        const totalGapSpace = stackGap * (barsBelowBaseline.length - 1);
         const totalDataHeight = barsBelowBaseline.reduce((sum, bar) => sum + bar.height, 0);
         const heightReduction = totalGapSpace / totalDataHeight;
 
@@ -187,7 +232,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
           }
 
           // Move to next position (include gap for next bar)
-          currentY = currentY + newHeight + (index < sortedBars.length - 1 ? stackGapPx : 0);
+          currentY = currentY + newHeight + (index < sortedBars.length - 1 ? stackGap : 0);
         });
       }
 
@@ -323,8 +368,8 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       return bars.sort((a, b) => b.y - a.y).map((a, index) => {
         const barBefore = index > 0 ? bars[index - 1] : null;
         const barAfter = index < bars.length - 1 ? bars[index + 1] : null;
-        const shouldRoundTop = index === bars.length - 1 || a.shouldApplyGap && stackGapPx || !a.shouldApplyGap && barAfter && barAfter.y + barAfter.height !== a.y;
-        const shouldRoundBottom = index === 0 || a.shouldApplyGap && stackGapPx || !a.shouldApplyGap && barBefore && barBefore.y !== a.y + a.height;
+        const shouldRoundTop = index === bars.length - 1 || a.shouldApplyGap && stackGap || !a.shouldApplyGap && barAfter && barAfter.y + barAfter.height !== a.y;
+        const shouldRoundBottom = index === 0 || a.shouldApplyGap && stackGap || !a.shouldApplyGap && barBefore && barBefore.y !== a.y + a.height;
         return _objectSpread(_objectSpread({}, a), {}, {
           roundTop: Boolean(a.roundTop && shouldRoundTop),
           roundBottom: Boolean(a.roundBottom && shouldRoundBottom)
@@ -479,7 +524,7 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       bars: allBars,
       stackRect: stackBounds
     };
-  }, [series, x, width, getSeriesData, categoryIndex, roundBaseline, baseline, stackGapPx, barMinSizePx, stackMinSizePx, yScale]);
+  }, [series, stackGap, barMinSizePx, x, baseline, width, stackMinSizePx, getSeriesData, categoryIndex, yScale, seriesGradients, roundBaseline]);
   const xData = xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
   const dataX = xData ? xData[categoryIndex] : categoryIndex;
   const barElements = bars.map((bar, index) => {
@@ -495,21 +540,28 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       originY: baseline,
       roundBottom: bar.roundBottom,
       roundTop: bar.roundTop,
+      seriesId: bar.seriesId,
       stroke: (_bar$stroke = bar.stroke) !== null && _bar$stroke !== void 0 ? _bar$stroke : defaultStroke,
       strokeWidth: (_bar$strokeWidth = bar.strokeWidth) !== null && _bar$strokeWidth !== void 0 ? _bar$strokeWidth : defaultStrokeWidth,
+      transition: transition,
+      transitions: transitions,
       width: bar.width,
       x: bar.x,
       y: bar.y
     }, "".concat(bar.seriesId, "-").concat(categoryIndex, "-").concat(index));
   });
-  const stackRoundBottom = roundBaseline || stackRect.y + stackRect.height !== baseline;
-  const stackRoundTop = roundBaseline || stackRect.y !== baseline;
+
+  // Check if the bar should be rounded based on the baseline, with an epsilon to handle floating-point rounding
+  const stackRoundBottom = roundBaseline || Math.abs(stackRect.y + stackRect.height - baseline) >= EPSILON;
+  const stackRoundTop = roundBaseline || Math.abs(stackRect.y - baseline) >= EPSILON;
   return /*#__PURE__*/_jsx(BarStackComponent, {
     borderRadius: borderRadius,
     categoryIndex: categoryIndex,
     height: stackRect.height,
     roundBottom: stackRoundBottom,
     roundTop: stackRoundTop,
+    transition: transition,
+    transitions: transitions,
     width: stackRect.width,
     x: stackRect.x,
     y: stackRect.y,

package/esm/chart/bar/BarStackGroup.js

@@ -25,26 +25,15 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
-    getSeriesData,
     getXScale,
     getYScale,
-    drawingArea
+    drawingArea,
+    dataLength
   } = useCartesianChartContext();
   const xScale = getXScale();
   const yScale = getYScale(yAxisId);
-  const maxDataLength = useMemo(() => {
-    if (!series || series.length === 0) return 0;
-    let maxLength = 0;
-    series.forEach(s => {
-      const data = getSeriesData(s.id);
-      if (data && data.length > maxLength) {
-        maxLength = data.length;
-      }
-    });
-    return maxLength;
-  }, [series, getSeriesData]);
   const stackConfigs = useMemo(() => {
-    if (!xScale || !yScale || !drawingArea || maxDataLength === 0) return [];
+    if (!xScale || !yScale || !drawingArea || dataLength === 0) return [];
     if (!isCategoricalScale(xScale)) {
       return [];
     }
@@ -57,7 +46,8 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
     const configs = [];
 
     // Calculate position for each category
-    for (let categoryIndex = 0; categoryIndex < maxDataLength; categoryIndex++) {
+    // todo: look at using xDomain for this instead of dataLength
+    for (let categoryIndex = 0; categoryIndex < dataLength; categoryIndex++) {
       // Get x position for this category
       const categoryX = xScale(categoryIndex);
       if (categoryX !== undefined) {
@@ -71,11 +61,11 @@ export const BarStackGroup = /*#__PURE__*/memo(_ref => {
       }
     }
     return configs;
-  }, [xScale, yScale, drawingArea, maxDataLength, stackIndex, totalStacks, barPadding]);
+  }, [xScale, yScale, drawingArea, dataLength, stackIndex, totalStacks, barPadding]);
   if (xScale && !isCategoricalScale(xScale)) {
-    throw new Error('BarStackGroup requires a band scale for x-axis. See https://cds.coinbase.com/components/graphs/XAxis/#scale-type');
+    throw new Error('BarStackGroup requires a band scale for x-axis. See https://cds.coinbase.com/components/charts/XAxis/#scale-type');
   }
-  if (!yScale || !drawingArea || stackConfigs.length === 0) return;
+  if (!yScale || !drawingArea || stackConfigs.length === 0) return null;
   return stackConfigs.map(_ref2 => {
     let {
       categoryIndex,

package/esm/chart/bar/DefaultBar.js

@@ -1,4 +1,4 @@
-const _excluded = ["x", "width", "borderRadius", "roundTop", "roundBottom", "originY", "d", "fill", "fillOpacity", "dataX", "dataY"];
+const _excluded = ["x", "width", "borderRadius", "roundTop", "roundBottom", "originY", "d", "fill", "fillOpacity", "dataX", "dataY", "seriesId", "transitions", "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; }
@@ -7,9 +7,9 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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 React, { memo, useMemo } from 'react';
-import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getBarPath } from '../utils';
+import { Path } from '../Path';
+import { defaultBarEnterTransition, defaultTransition, getBarPath, getTransition, withStaggerDelayTransition } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Default bar component that renders a solid bar with animation.
@@ -26,39 +26,34 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
       fill = 'var(--color-fgPrimary)',
       fillOpacity = 1,
       dataX,
-      dataY
+      dataY,
+      seriesId,
+      transitions,
+      transition
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
-    animate
+    animate,
+    drawingArea
   } = useCartesianChartContext();
+  const normalizedX = useMemo(() => drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0, [x, drawingArea.x, drawingArea.width]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedX), [transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, normalizedX]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedX), [transitions === null || transitions === void 0 ? void 0 : transitions.update, transition, animate, normalizedX]);
   const initialPath = useMemo(() => {
-    if (!animate) return undefined;
-    // Need a minimum height to allow for animation
     const minHeight = 1;
     const initialY = (originY !== null && originY !== void 0 ? originY : 0) - minHeight;
-    return getBarPath(x, initialY, width, minHeight, borderRadius, !!roundTop, !!roundBottom);
-  }, [animate, x, originY, width, borderRadius, roundTop, roundBottom]);
-  if (animate && initialPath) {
-    return /*#__PURE__*/_jsx(motion.path, _objectSpread(_objectSpread({}, props), {}, {
-      animate: {
-        d
-      },
-      fill: fill,
-      fillOpacity: fillOpacity,
-      initial: {
-        d: initialPath
-      },
-      transition: {
-        type: 'spring',
-        duration: 1,
-        bounce: 0
-      }
-    }));
-  }
-  return /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread({}, props), {}, {
+    return getBarPath(x, initialY, width, minHeight, borderRadius !== null && borderRadius !== void 0 ? borderRadius : 0, !!roundTop, !!roundBottom);
+  }, [x, originY, width, borderRadius, roundTop, roundBottom]);
+  return /*#__PURE__*/_jsx(Path, _objectSpread(_objectSpread({}, props), {}, {
+    animate: animate,
+    clipRect: null,
     d: d,
     fill: fill,
-    fillOpacity: fillOpacity
+    fillOpacity: fillOpacity,
+    initialPath: initialPath,
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    }
   }));
 });

package/esm/chart/bar/DefaultBarStack.js

@@ -1,7 +1,8 @@
 import { memo, useId, useMemo } from 'react';
 import { m as motion } from 'framer-motion';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getBarPath } from '../utils';
+import { defaultBarEnterTransition, defaultTransition, getBarPath, getTransition, withStaggerDelayTransition } from '../utils';
+import { usePathTransition } from '../utils/transition';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Default stack component that renders children in a group with animated clip path.
@@ -18,36 +19,39 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
-    yOrigin
+    yOrigin,
+    transitions,
+    transition
   } = _ref;
   const {
-    animate
+    animate,
+    drawingArea
   } = useCartesianChartContext();
   const clipPathId = useId();
-  const clipPathData = useMemo(() => {
+  const normalizedX = useMemo(() => drawingArea.width > 0 ? (x - drawingArea.x) / drawingArea.width : 0, [x, drawingArea.x, drawingArea.width]);
+  const enterTransition = useMemo(() => withStaggerDelayTransition(getTransition(transitions === null || transitions === void 0 ? void 0 : transitions.enter, animate, defaultBarEnterTransition), normalizedX), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.enter, normalizedX]);
+  const updateTransition = useMemo(() => withStaggerDelayTransition(getTransition((transitions === null || transitions === void 0 ? void 0 : transitions.update) !== undefined ? transitions.update : transition, animate, defaultTransition), normalizedX), [animate, transitions === null || transitions === void 0 ? void 0 : transitions.update, transition, normalizedX]);
+  const targetPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
   }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
-  const initialClipPathData = useMemo(() => {
-    return getBarPath(x, yOrigin !== null && yOrigin !== void 0 ? yOrigin : y + height, width, 1, borderRadius, roundTop, roundBottom);
+  const initialPath = useMemo(() => {
+    const baselineY = yOrigin !== null && yOrigin !== void 0 ? yOrigin : y + height;
+    return getBarPath(x, baselineY, width, 1, borderRadius, roundTop, roundBottom);
   }, [x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
+  const animatedClipPath = usePathTransition({
+    currentPath: targetPath,
+    initialPath,
+    transitions: {
+      enter: enterTransition,
+      update: updateTransition
+    }
+  });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
         id: clipPathId,
-        children: animate ? /*#__PURE__*/_jsx(motion.path, {
-          animate: {
-            d: clipPathData
-          },
-          initial: {
-            d: initialClipPathData
-          },
-          transition: {
-            type: 'spring',
-            duration: 1,
-            bounce: 0
-          }
-        }) : /*#__PURE__*/_jsx("path", {
-          d: clipPathData
+        children: /*#__PURE__*/_jsx(motion.path, {
+          d: animatedClipPath
         })
       })
     }), /*#__PURE__*/_jsx("g", {

package/esm/chart/gradient/Gradient.js

@@ -0,0 +1,104 @@
+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 { memo, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getGradientConfig } from '../utils/gradient';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Renders an SVG linearGradient element based on a GradientDefinition.
+ * The gradient can be referenced via `fill="url(#${id})"` or `stroke="url(#${id})"`.
+ */
+export const Gradient = /*#__PURE__*/memo(_ref => {
+  var _gradient$axis;
+  let {
+    id,
+    gradient,
+    yAxisId,
+    animate: animateProp,
+    transition
+  } = _ref;
+  const context = useCartesianChartContext();
+  const animate = animateProp !== null && animateProp !== void 0 ? animateProp : context.animate;
+  const xScale = context.getXScale();
+  const yScale = context.getYScale(yAxisId);
+
+  // Process gradient definition into stops
+  const stops = useMemo(() => {
+    if (!xScale || !yScale) return;
+    return getGradientConfig(gradient, xScale, yScale);
+  }, [gradient, xScale, yScale]);
+  const drawingArea = context.drawingArea;
+  const yAxis = context.getYAxis(yAxisId);
+  const xAxis = context.getXAxis();
+
+  // If gradient processing failed, don't render
+  if (!stops) return null;
+  const axis = (_gradient$axis = gradient.axis) !== null && _gradient$axis !== void 0 ? _gradient$axis : 'y';
+  let coordinates;
+  if (axis === 'y') {
+    const yRange = yAxis === null || yAxis === void 0 ? void 0 : yAxis.range;
+    if (yRange) {
+      coordinates = {
+        x1: drawingArea.x,
+        y1: yRange.max,
+        x2: drawingArea.x,
+        y2: yRange.min
+      };
+    } else {
+      coordinates = {
+        x1: drawingArea.x,
+        y1: drawingArea.y + drawingArea.height,
+        x2: drawingArea.x,
+        y2: drawingArea.y
+      };
+    }
+  } else {
+    const xRange = xAxis === null || xAxis === void 0 ? void 0 : xAxis.range;
+    if (xRange) {
+      coordinates = {
+        x1: xRange.min,
+        y1: drawingArea.y,
+        x2: xRange.max,
+        y2: drawingArea.y
+      };
+    } else {
+      coordinates = {
+        x1: drawingArea.x,
+        y1: drawingArea.y,
+        x2: drawingArea.x + drawingArea.width,
+        y2: drawingArea.y
+      };
+    }
+  }
+  return /*#__PURE__*/_jsx("linearGradient", _objectSpread(_objectSpread({
+    gradientUnits: "userSpaceOnUse",
+    id: id
+  }, coordinates), {}, {
+    children: stops.map((stop, index) => {
+      const offset = "".concat(stop.offset * 100, "%");
+      const opacity = stop.opacity;
+      if (!animate) {
+        return /*#__PURE__*/_jsx("stop", {
+          offset: offset,
+          stopColor: stop.color,
+          stopOpacity: opacity !== null && opacity !== void 0 ? opacity : 1
+        }, "".concat(id, "-stop-").concat(index));
+      }
+      return /*#__PURE__*/_jsx(motion.stop, {
+        animate: {
+          offset
+        },
+        initial: {
+          offset
+        },
+        stopColor: stop.color,
+        stopOpacity: opacity !== null && opacity !== void 0 ? opacity : 1,
+        transition: transition
+      }, "".concat(id, "-stop-").concat(index));
+    })
+  }));
+});

package/esm/chart/gradient/index.js

@@ -0,0 +1 @@
+export { Gradient } from './Gradient';

package/esm/chart/index.js

@@ -4,10 +4,12 @@ export * from './axis/index';
 export * from './bar/index';
 export * from './CartesianChart';
 export * from './ChartProvider';
+export * from './gradient/index';
+export * from './legend/index';
 export * from './line/index';
 export * from './Path';
 export * from './PeriodSelector';
-export * from './Point';
+export * from './point/index';
 export * from './scrubber/index';
 export * from './text/index';
 export * from './utils/index';

package/esm/chart/legend/DefaultLegendEntry.css

@@ -0,0 +1 @@
+.cds-legendEntryCss-l16mq69f{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}

package/esm/chart/legend/DefaultLegendEntry.js

@@ -0,0 +1,50 @@
+const _excluded = ["seriesId", "label", "color", "shape", "ShapeComponent", "gap", "className", "classNames", "style", "styles", "testID"];
+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); }
+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 } from 'react';
+import { cx } from '@coinbase/cds-web';
+import { HStack } from '@coinbase/cds-web/layout';
+import { Text } from '@coinbase/cds-web/typography';
+import { DefaultLegendShape } from './DefaultLegendShape';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const legendEntryCss = "cds-legendEntryCss-l16mq69f";
+export const DefaultLegendEntry = /*#__PURE__*/memo(_ref => {
+  let {
+      seriesId,
+      label,
+      color,
+      shape,
+      ShapeComponent = DefaultLegendShape,
+      gap = 1,
+      className,
+      classNames,
+      style,
+      styles,
+      testID
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    className: cx(legendEntryCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    "data-testid": testID,
+    gap: gap,
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(ShapeComponent, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.shape,
+      color: color,
+      shape: shape,
+      style: styles === null || styles === void 0 ? void 0 : styles.shape
+    }), typeof label === 'string' ? /*#__PURE__*/_jsx(Text, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
+      font: "label1",
+      style: styles === null || styles === void 0 ? void 0 : styles.label,
+      children: label
+    }) : label]
+  }));
+});
+import "./DefaultLegendEntry.css";

package/esm/chart/legend/DefaultLegendShape.css

@@ -0,0 +1,5 @@
+.cds-containerCss-c18taxk5{width:10px;height:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
+.cds-pillCss-p17vg36s{width:6px;height:24px;border-radius:3px;}
+.cds-circleCss-cge4n06{width:10px;height:10px;border-radius:5px;}
+.cds-squareCss-s4trv9b{width:10px;height:10px;}
+.cds-squircleCss-s1e4cx3y{width:10px;height:10px;border-radius:2px;}

package/esm/chart/legend/DefaultLegendShape.js

@@ -0,0 +1,47 @@
+const _excluded = ["color", "shape", "className", "style"];
+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); }
+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 React, { memo } from 'react';
+import { cx } from '@coinbase/cds-web';
+import { Box } from '@coinbase/cds-web/layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+const containerCss = "cds-containerCss-c18taxk5";
+const pillCss = "cds-pillCss-p17vg36s";
+const circleCss = "cds-circleCss-cge4n06";
+const squareCss = "cds-squareCss-s4trv9b";
+const squircleCss = "cds-squircleCss-s1e4cx3y";
+const stylesByVariant = {
+  pill: pillCss,
+  circle: circleCss,
+  square: squareCss,
+  squircle: squircleCss
+};
+const isVariantShape = shape => typeof shape === 'string' && shape in stylesByVariant;
+export const DefaultLegendShape = /*#__PURE__*/memo(_ref => {
+  let {
+      color = 'var(--color-fgPrimary)',
+      shape = 'circle',
+      className,
+      style
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (!isVariantShape(shape)) return shape;
+  const variantStyle = stylesByVariant[shape];
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    className: cx(containerCss, className),
+    style: style
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("span", {
+      className: variantStyle,
+      style: {
+        backgroundColor: color
+      }
+    })
+  }));
+});
+import "./DefaultLegendShape.css";