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

package/esm/chart/Point.js

@@ -0,0 +1,171 @@
+const _excluded = ["dataX", "dataY", "yAxisId", "fill", "radius", "opacity", "onClick", "onScrubberEnter", "className", "style", "classNames", "styles", "stroke", "strokeWidth", "accessibilityLabel", "label", "labelProps", "testID", "pixelCoordinates", "animate"];
+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, useEffect, useMemo } from 'react';
+import { cx } from '@coinbase/cds-web';
+import { m as motion } from 'framer-motion';
+import { useCartesianChartContext } from './ChartProvider';
+import { ChartText } from './text';
+import { projectPoint, useScrubberContext } from './utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const containerCss = "cds-containerCss-c137x6qr";
+const innerPointCss = "cds-innerPointCss-i1qyub1f";
+
+/**
+ * Parameters passed to renderPoints callback function.
+ */
+
+/**
+ * Shared configuration for point appearance and behavior.
+ * Used by line-associated points rendered via Line/LineChart components.
+ */
+
+export const Point = /*#__PURE__*/memo(_ref => {
+  let {
+      dataX,
+      dataY,
+      yAxisId,
+      fill = 'var(--color-fgPrimary)',
+      radius = 4,
+      opacity,
+      onClick,
+      onScrubberEnter,
+      className,
+      style,
+      classNames,
+      styles,
+      stroke = 'var(--color-bg)',
+      strokeWidth = 2,
+      accessibilityLabel,
+      label,
+      labelProps,
+      testID,
+      pixelCoordinates,
+      animate
+    } = _ref,
+    svgProps = _objectWithoutProperties(_ref, _excluded);
+  const {
+    getXScale,
+    getYScale,
+    animate: animationEnabled
+  } = useCartesianChartContext();
+  const {
+    scrubberPosition
+  } = useScrubberContext();
+  const xScale = getXScale();
+  const yScale = getYScale(yAxisId);
+  const isScrubberHighlighted = scrubberPosition !== undefined && scrubberPosition === dataX;
+  const pixelCoordinate = useMemo(() => {
+    if (pixelCoordinates) {
+      return pixelCoordinates;
+    }
+    if (!xScale || !yScale) {
+      return {
+        x: 0,
+        y: 0
+      };
+    }
+    return projectPoint({
+      x: dataX,
+      y: dataY,
+      xScale,
+      yScale
+    });
+  }, [xScale, yScale, dataX, dataY, pixelCoordinates]);
+  useEffect(() => {
+    if (isScrubberHighlighted && onScrubberEnter) {
+      onScrubberEnter({
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      });
+    }
+  }, [isScrubberHighlighted, onScrubberEnter, pixelCoordinate.x, pixelCoordinate.y]);
+  const innerPoint = useMemo(() => {
+    const mergedStyles = _objectSpread(_objectSpread({
+      cursor: onClick !== undefined ? 'pointer' : undefined
+    }, style), styles === null || styles === void 0 ? void 0 : styles.point);
+
+    // interaction animations to scale radius of point
+    const variants = {
+      hovered: {
+        r: radius * 1.2
+      },
+      pressed: {
+        r: radius * 0.9
+      },
+      default: {
+        r: radius
+      }
+    };
+    const handleKeyDown = onClick ? event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        onClick(event, {
+          dataX,
+          dataY,
+          x: pixelCoordinate.x,
+          y: pixelCoordinate.y
+        });
+      }
+    } : undefined;
+
+    // Use the animate prop if provided, otherwise fall back to chart context
+    const shouldAnimateInteractions = animate !== null && animate !== void 0 ? animate : animationEnabled;
+    const shouldAnimatePosition = animate !== null && animate !== void 0 ? animate : animationEnabled;
+    return /*#__PURE__*/_jsx(motion.circle, _objectSpread({
+      animate: shouldAnimatePosition ? {
+        cx: pixelCoordinate.x,
+        cy: pixelCoordinate.y
+      } : undefined,
+      "aria-label": accessibilityLabel,
+      className: cx(innerPointCss, className, classNames === null || classNames === void 0 ? void 0 : classNames.point),
+      cx: pixelCoordinate.x,
+      cy: pixelCoordinate.y,
+      fill: fill,
+      initial: false,
+      onClick: onClick ? event => onClick(event, {
+        dataX,
+        dataY,
+        x: pixelCoordinate.x,
+        y: pixelCoordinate.y
+      }) : undefined,
+      onKeyDown: handleKeyDown,
+      r: radius,
+      role: onClick ? 'button' : undefined,
+      stroke: stroke,
+      strokeWidth: strokeWidth,
+      style: mergedStyles,
+      tabIndex: onClick ? 0 : -1,
+      transition: {
+        duration: 0.3,
+        ease: 'easeInOut'
+      },
+      variants: variants,
+      whileHover: shouldAnimateInteractions && onClick ? 'hovered' : 'default',
+      whileTap: shouldAnimateInteractions && onClick ? 'pressed' : 'default'
+    }, svgProps));
+  }, [style, styles === null || styles === void 0 ? void 0 : styles.point, classNames === null || classNames === void 0 ? void 0 : classNames.point, fill, animate, animationEnabled, radius, className, onClick, stroke, strokeWidth, svgProps, dataX, dataY, pixelCoordinate.x, pixelCoordinate.y, accessibilityLabel]);
+  if (!xScale || !yScale) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("g", {
+      className: cx(containerCss, classNames === null || classNames === void 0 ? void 0 : classNames.container),
+      "data-testid": testID,
+      opacity: opacity,
+      style: styles === null || styles === void 0 ? void 0 : styles.container,
+      children: innerPoint
+    }), label && /*#__PURE__*/_jsx(ChartText, _objectSpread(_objectSpread({
+      x: pixelCoordinate.x,
+      y: pixelCoordinate.y
+    }, labelProps), {}, {
+      children: label
+    }))]
+  });
+});
+import "./Point.css";

package/esm/chart/area/Area.js

@@ -0,0 +1,85 @@
+import React, { memo, useMemo } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { getAreaPath } from '../utils';
+import { DottedArea } from './DottedArea';
+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',
+    type = 'solid',
+    AreaComponent: SelectedAreaComponent,
+    fill: specifiedFill,
+    fillOpacity = 1,
+    stroke,
+    strokeWidth,
+    baseline
+  } = _ref;
+  const {
+    getSeries,
+    getSeriesData,
+    getXScale,
+    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 xAxis = getXAxis();
+  const xScale = getXScale();
+  const yScale = getYScale(matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId);
+  const area = useMemo(() => {
+    if (!sourceData || sourceData.length === 0 || !xScale || !yScale) return '';
+
+    // Get numeric x-axis data if available
+    const xData = xAxis !== null && xAxis !== void 0 && xAxis.data && Array.isArray(xAxis.data) && typeof xAxis.data[0] === 'number' ? xAxis.data : undefined;
+    return getAreaPath({
+      data: sourceData,
+      xScale,
+      yScale,
+      curve,
+      xData
+    });
+  }, [sourceData, xScale, yScale, curve, xAxis === null || xAxis === void 0 ? void 0 : xAxis.data]);
+  const AreaComponent = useMemo(() => {
+    if (SelectedAreaComponent) {
+      return SelectedAreaComponent;
+    }
+    switch (type) {
+      case 'solid':
+        return SolidArea;
+      case 'dotted':
+        return DottedArea;
+      case 'gradient':
+      default:
+        return GradientArea;
+    }
+  }, [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)';
+  return /*#__PURE__*/_jsx(AreaComponent, {
+    baseline: baseline,
+    d: area,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    stroke: stroke,
+    strokeWidth: strokeWidth,
+    yAxisId: matchedSeries === null || matchedSeries === void 0 ? void 0 : matchedSeries.yAxisId
+  });
+});

package/esm/chart/area/AreaChart.js

@@ -0,0 +1,164 @@
+const _excluded = ["series", "stacked", "AreaComponent", "curve", "fillOpacity", "type", "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"];
+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 { forwardRef, memo, useMemo } from 'react';
+import { XAxis, YAxis } from '../axis';
+import { CartesianChart } from '../CartesianChart';
+import { Line } from '../line/Line';
+import { defaultChartInset, defaultStackId, getChartInset } from '../utils';
+import { Area } from './Area';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const AreaChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+      series,
+      stacked,
+      AreaComponent,
+      curve,
+      fillOpacity,
+      type,
+      LineComponent,
+      strokeWidth,
+      showXAxis,
+      showYAxis,
+      showLines,
+      lineType = 'solid',
+      xAxis,
+      yAxis,
+      inset: userInset,
+      children
+    } = _ref,
+    chartProps = _objectWithoutProperties(_ref, _excluded);
+  const calculatedInset = useMemo(() => getChartInset(userInset, defaultChartInset), [userInset]);
+
+  // Convert AreaSeries 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 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;
+
+  // Split axis props into config props for Chart and visual props for axis components
+  const _ref2 = xAxis || {},
+    {
+      scaleType: xScaleType,
+      data: xData,
+      categoryPadding: xCategoryPadding,
+      domain: xDomain,
+      domainLimit: xDomainLimit,
+      range: xRange
+    } = _ref2,
+    xAxisVisualProps = _objectWithoutProperties(_ref2, _excluded2);
+  const _ref3 = yAxis || {},
+    {
+      scaleType: yScaleType,
+      data: yData,
+      categoryPadding: yCategoryPadding,
+      domain: yDomain,
+      domainLimit: yDomainLimit,
+      range: yRange,
+      id: yAxisId
+    } = _ref3,
+    yAxisVisualProps = _objectWithoutProperties(_ref3, _excluded3);
+  const xAxisConfig = {
+    scaleType: xScaleType,
+    data: xData,
+    categoryPadding: xCategoryPadding,
+    domain: xDomain,
+    domainLimit: xDomainLimit,
+    range: xRange
+  };
+  const hasNegativeValues = useMemo(() => {
+    if (!series) return false;
+    return series.some(s => {
+      var _s$data;
+      return (_s$data = s.data) === null || _s$data === void 0 ? void 0 : _s$data.some(value => typeof value === 'number' && value < 0 || Array.isArray(value) && value.some(v => typeof v === 'number' && v < 0));
+    });
+  }, [series]);
+
+  // Set default min domain to 0 for area chart, but only if there are no negative values
+  const yAxisConfig = {
+    scaleType: yScaleType,
+    data: yData,
+    categoryPadding: yCategoryPadding,
+    domain: hasNegativeValues ? yDomain : _objectSpread({
+      min: 0
+    }, yDomain),
+    domainLimit: yDomainLimit,
+    range: yRange
+  };
+  return /*#__PURE__*/_jsxs(CartesianChart, _objectSpread(_objectSpread({}, chartProps), {}, {
+    ref: ref,
+    inset: calculatedInset,
+    series: seriesToRender,
+    xAxis: xAxisConfig,
+    yAxis: yAxisConfig,
+    children: [showXAxis && /*#__PURE__*/_jsx(XAxis, _objectSpread({}, xAxisVisualProps)), showYAxis && /*#__PURE__*/_jsx(YAxis, _objectSpread({
+      axisId: yAxisId
+    }, yAxisVisualProps)), series === null || series === void 0 ? void 0 : series.map(_ref4 => {
+      let {
+          id,
+          data,
+          label,
+          color,
+          yAxisId,
+          opacity,
+          LineComponent,
+          stackId
+        } = _ref4,
+        areaPropsFromSeries = _objectWithoutProperties(_ref4, _excluded4);
+      return /*#__PURE__*/_jsx(Area, _objectSpread({
+        AreaComponent: AreaComponent,
+        curve: curve,
+        fillOpacity: fillOpacity,
+        seriesId: id,
+        type: type
+      }, areaPropsFromSeries), id);
+    }), showLines && (series === null || series === void 0 ? void 0 : series.map(_ref5 => {
+      let {
+          id,
+          data,
+          label,
+          color,
+          yAxisId,
+          fill,
+          fillOpacity,
+          stackId
+        } = _ref5,
+        linePropsFromSeries = _objectWithoutProperties(_ref5, _excluded5);
+      return /*#__PURE__*/_jsx(Line, _objectSpread({
+        LineComponent: LineComponent,
+        curve: curve,
+        seriesId: id // Line component now handles stacked data automatically
+        ,
+        stroke: color // Default to series color
+        ,
+        strokeWidth: strokeWidth,
+        type: lineType
+      }, linePropsFromSeries), "".concat(id, "-line"));
+    })), children]
+  }));
+}));

package/esm/chart/area/DottedArea.js

@@ -0,0 +1,141 @@
+const _excluded = ["d", "fill", "className", "style", "patternSize", "dotSize", "peakOpacity", "baselineOpacity", "baseline", "yAxisId", "classNames", "styles", "animate"];
+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, useId } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Path } from '../Path';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const DottedArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill,
+      className,
+      style,
+      patternSize = 4,
+      dotSize = 1,
+      peakOpacity = 1,
+      baselineOpacity = 0,
+      baseline,
+      yAxisId,
+      classNames,
+      styles,
+      animate
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const context = 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%';
+  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,
+          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, ")")
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      animate: animate,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.path,
+      d: d,
+      fill: "url(#".concat(patternId, ")"),
+      mask: "url(#".concat(maskId, ")"),
+      style: styles === null || styles === void 0 ? void 0 : styles.path
+    }, pathProps))]
+  });
+});

package/esm/chart/area/GradientArea.js

@@ -0,0 +1,111 @@
+const _excluded = ["d", "fill", "fillOpacity", "peakColor", "baselineColor", "peakOpacity", "baselineOpacity", "baseline", "yAxisId"];
+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, useId } from 'react';
+import { useCartesianChartContext } from '../ChartProvider';
+import { Path } from '../Path';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A customizable gradient area component which uses Path.
+ */
+export const GradientArea = /*#__PURE__*/memo(_ref => {
+  let {
+      d,
+      fill = 'var(--color-fgPrimary)',
+      fillOpacity = 1,
+      peakColor,
+      baselineColor,
+      peakOpacity = 0.3,
+      baselineOpacity = 0,
+      baseline,
+      yAxisId
+    } = _ref,
+    pathProps = _objectWithoutProperties(_ref, _excluded);
+  const context = useCartesianChartContext();
+  const patternId = useId();
+
+  // 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;
+  const gradientY1 = useUserSpaceUnits ? yRange[1] : '0%';
+  const gradientY2 = useUserSpaceUnits ? yRange[0] : '100%';
+
+  // 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 effectivePeakColor = peakColor !== null && peakColor !== void 0 ? peakColor : fill;
+  const effectiveBaselineColor = baselineColor !== null && baselineColor !== void 0 ? baselineColor : fill;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("linearGradient", {
+        gradientUnits: useUserSpaceUnits ? 'userSpaceOnUse' : 'objectBoundingBox',
+        id: patternId,
+        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: effectivePeakColor,
+            stopOpacity: peakOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: baselinePercentage !== null && baselinePercentage !== void 0 ? baselinePercentage : "".concat((baselinePosition - yRange[1]) / (yRange[0] - yRange[1]) * 100, "%"),
+            stopColor: effectiveBaselineColor,
+            stopOpacity: baselineOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: effectivePeakColor,
+            stopOpacity: peakOpacity
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: effectivePeakColor,
+            stopOpacity: peakOpacity
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: effectiveBaselineColor,
+            stopOpacity: baselineOpacity
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Path, _objectSpread({
+      d: d,
+      fill: "url(#".concat(patternId, ")")
+    }, pathProps))]
+  });
+});