@coinbase/cds-web-visualization 3.4.0-beta.1 → 3.4.0-beta.11

package/esm/chart/bar/Bar.js

@@ -30,7 +30,8 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     strokeWidth,
     borderRadius = 4,
     roundTop = true,
-    roundBottom = true
+    roundBottom = true,
+    transition
   } = _ref;
   const barPath = useMemo(() => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
@@ -52,6 +53,7 @@ export const Bar = /*#__PURE__*/memo(_ref => {
     roundTop: roundTop,
     stroke: stroke,
     strokeWidth: strokeWidth,
+    transition: transition,
     width: width,
     x: x,
     y: y

package/esm/chart/bar/BarChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize"],
+const _excluded = ["series", "stacked", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "children", "barPadding", "BarComponent", "fillOpacity", "stroke", "strokeWidth", "borderRadius", "roundBaseline", "BarStackComponent", "stackGap", "barMinSize", "stackMinSize", "transition"],
   _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range"],
   _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"];
 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; }
@@ -22,7 +22,7 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       showYAxis,
       xAxis,
       yAxis,
-      inset: userInset,
+      inset,
       children,
       barPadding,
       BarComponent,
@@ -34,44 +34,26 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       BarStackComponent,
       stackGap,
       barMinSize,
-      stackMinSize
+      stackMinSize,
+      transition
     } = _ref,
     chartProps = _objectWithoutProperties(_ref, _excluded);
-  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
-
-  // Convert BarSeries to Series for Chart context
-  const chartSeries = useMemo(() => {
-    return series === null || series === void 0 ? void 0 : series.map(s => ({
-      id: s.id,
-      data: s.data,
-      label: s.label,
-      color: s.color,
-      yAxisId: s.yAxisId,
-      stackId: s.stackId
-    }));
-  }, [series]);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
   const transformedSeries = useMemo(() => {
-    if (!stacked || !chartSeries) return chartSeries;
-    return chartSeries.map(s => {
-      var _s$stackId;
-      return _objectSpread(_objectSpread({}, s), {}, {
-        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
-      });
-    });
-  }, [chartSeries, stacked]);
-  const seriesToRender = transformedSeries !== null && transformedSeries !== void 0 ? transformedSeries : chartSeries;
-
-  // Keep the original series with bar-specific props for BarPlot
-  const barSeriesToRender = useMemo(() => {
     if (!stacked || !series) return series;
     return series.map(s => {
-      var _s$stackId2;
+      var _s$stackId;
       return _objectSpread(_objectSpread({}, s), {}, {
-        stackId: (_s$stackId2 = s.stackId) !== null && _s$stackId2 !== void 0 ? _s$stackId2 : defaultStackId
+        stackId: (_s$stackId = s.stackId) !== null && _s$stackId !== void 0 ? _s$stackId : defaultStackId
       });
     });
   }, [series, stacked]);
 
+  // Unlike other charts with custom props per series, we do not need to pick out
+  // the props from each series that shouldn't be passed to CartesianChart
+  const seriesToRender = transformedSeries !== null && transformedSeries !== void 0 ? transformedSeries : series;
+  const seriesIds = seriesToRender === null || seriesToRender === void 0 ? void 0 : seriesToRender.map(s => s.id);
+
   // Split axis props into config props for Chart and visual props for axis components
   const _ref2 = xAxis || {},
     {
@@ -137,11 +119,12 @@ export const BarChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =>
       borderRadius: borderRadius,
       fillOpacity: fillOpacity,
       roundBaseline: roundBaseline,
-      seriesIds: barSeriesToRender === null || barSeriesToRender === void 0 ? void 0 : barSeriesToRender.map(s => s.id),
+      seriesIds: seriesIds,
       stackGap: stackGap,
       stackMinSize: stackMinSize,
       stroke: stroke,
-      strokeWidth: strokeWidth
+      strokeWidth: strokeWidth,
+      transition: transition
     }), children]
   }));
 }));

package/esm/chart/bar/BarPlot.js

@@ -22,7 +22,8 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
     BarStackComponent,
     stackGap,
     barMinSize,
-    stackMinSize
+    stackMinSize,
+    transition
   } = _ref;
   const {
     series: allSeries,
@@ -73,7 +74,6 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
       })
     }), /*#__PURE__*/_jsx("g", {
       clipPath: "url(#".concat(clipPathId, ")"),
-      "data-testid": "whoa",
       children: stackGroups.map((group, stackIndex) => /*#__PURE__*/_jsx(BarStackGroup, {
         BarComponent: defaultBarComponent,
         BarStackComponent: BarStackComponent,
@@ -89,6 +89,7 @@ export const BarPlot = /*#__PURE__*/memo(_ref => {
         stroke: defaultStroke,
         strokeWidth: defaultStrokeWidth,
         totalStacks: stackGroups.length,
+        transition: transition,
         yAxisId: group.yAxisId
       }, group.stackId))
     })]

package/esm/chart/bar/BarStack.js

@@ -5,9 +5,11 @@ 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;
 /**
  * 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 +31,16 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
     stackGap,
     barMinSize,
     stackMinSize,
-    roundBaseline
+    roundBaseline,
+    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 +52,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 +84,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 +122,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 +154,16 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
         height,
         dataY: value,
         // Store the actual data value
-        // Use series-specific properties, falling back to defaults
-        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,
+        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,
         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 +176,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 +198,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 +225,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 +361,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 +517,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) => {
@@ -497,19 +535,23 @@ export const BarStack = /*#__PURE__*/memo(_ref => {
       roundTop: bar.roundTop,
       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,
       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,
     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');
   }
-  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", "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; }
@@ -26,7 +26,8 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
       fill = 'var(--color-fgPrimary)',
       fillOpacity = 1,
       dataX,
-      dataY
+      dataY,
+      transition
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -49,11 +50,7 @@ export const DefaultBar = /*#__PURE__*/memo(_ref => {
       initial: {
         d: initialPath
       },
-      transition: {
-        type: 'spring',
-        duration: 1,
-        bounce: 0
-      }
+      transition: transition
     }));
   }
   return /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread({}, props), {}, {

package/esm/chart/bar/DefaultBarStack.js

@@ -18,7 +18,8 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     borderRadius = 4,
     roundTop = true,
     roundBottom = true,
-    yOrigin
+    yOrigin,
+    transition
   } = _ref;
   const {
     animate
@@ -28,8 +29,9 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
     return getBarPath(x, y, width, height, borderRadius, roundTop, roundBottom);
   }, [x, y, width, height, borderRadius, roundTop, roundBottom]);
   const initialClipPathData = useMemo(() => {
+    if (!animate) return undefined;
     return getBarPath(x, yOrigin !== null && yOrigin !== void 0 ? yOrigin : y + height, width, 1, borderRadius, roundTop, roundBottom);
-  }, [x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
+  }, [animate, x, yOrigin, y, height, width, borderRadius, roundTop, roundBottom]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("defs", {
       children: /*#__PURE__*/_jsx("clipPath", {
@@ -41,11 +43,7 @@ export const DefaultBarStack = /*#__PURE__*/memo(_ref => {
           initial: {
             d: initialClipPathData
           },
-          transition: {
-            type: 'spring',
-            duration: 1,
-            bounce: 0
-          }
+          transition: transition
         }) : /*#__PURE__*/_jsx("path", {
           d: clipPathData
         })

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,11 @@ export * from './axis/index';
 export * from './bar/index';
 export * from './CartesianChart';
 export * from './ChartProvider';
+export * from './gradient/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/line/DefaultReferenceLineLabel.js

@@ -0,0 +1,81 @@
+const _excluded = ["color", "elevated", "borderRadius", "inset", "boundsInset", "className", "classNames", "style", "styles"];
+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, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { ChartText } from '../text';
+import { getChartInset } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const elevatedInset = {
+  top: 8,
+  bottom: 8,
+  left: 12,
+  right: 12
+};
+const elevatedBorderRadius = 4;
+// Default bounds inset when elevated to prevent shadow clipping
+const elevatedBoundsInset = {
+  top: 4,
+  bottom: 20,
+  left: 12,
+  right: 12
+};
+const nonElevatedBoundsInset = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};
+
+/**
+ * DefaultReferenceLineLabel is the default label component for ReferenceLine.
+ * Provides standard styling with elevation, inset, and color defaults.
+ * When elevated, automatically adds bounds to prevent shadow cutoff at chart edges.
+ */
+export const DefaultReferenceLineLabel = /*#__PURE__*/memo(_ref => {
+  let {
+      color = 'var(--color-fgMuted)',
+      elevated,
+      borderRadius = elevated ? elevatedBorderRadius : undefined,
+      inset = elevated ? elevatedInset : undefined,
+      boundsInset: boundsInsetProp,
+      className,
+      classNames,
+      style,
+      styles
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const {
+    width: chartWidth,
+    height: chartHeight
+  } = useCartesianChartContext();
+  const bounds = useMemo(() => {
+    const boundsInset = getChartInset(boundsInsetProp, elevated ? elevatedBoundsInset : nonElevatedBoundsInset);
+    return {
+      x: boundsInset.left,
+      y: boundsInset.top,
+      width: chartWidth - boundsInset.left - boundsInset.right,
+      height: chartHeight - boundsInset.top - boundsInset.bottom
+    };
+  }, [elevated, boundsInsetProp, chartWidth, chartHeight]);
+  const mergedClassNames = useMemo(() => _objectSpread(_objectSpread({}, className && {
+    text: className
+  }), classNames), [className, classNames]);
+  const mergedStyles = useMemo(() => _objectSpread(_objectSpread({}, style && {
+    text: style
+  }), styles), [style, styles]);
+  return /*#__PURE__*/_jsx(ChartText, _objectSpread({
+    borderRadius: borderRadius,
+    bounds: bounds,
+    classNames: mergedClassNames,
+    color: color,
+    elevated: elevated,
+    inset: inset,
+    styles: mergedStyles
+  }, props));
+});