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

package/esm/chart/CartesianChart.js

@@ -1,4 +1,4 @@
-const _excluded = ["series", "children", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "width", "height", "className", "style"];
+const _excluded = ["series", "children", "animate", "xAxis", "yAxis", "inset", "enableScrubbing", "onScrubberPositionChange", "width", "height", "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; }
@@ -20,15 +20,17 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       series,
       children,
       animate = true,
-      xAxis: xAxisConfigInput,
-      yAxis: yAxisConfigInput,
-      inset: insetInput,
+      xAxis: xAxisConfigProp,
+      yAxis: yAxisConfigProp,
+      inset,
       enableScrubbing,
       onScrubberPositionChange,
       width = '100%',
       height = '100%',
       className,
-      style
+      classNames,
+      style,
+      styles
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -36,15 +38,13 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     width: chartWidth,
     height: chartHeight
   } = useDimensions();
-  const internalSvgRef = useRef(null);
-  const userInset = useMemo(() => {
-    return getChartInset(insetInput, defaultChartInset);
-  }, [insetInput]);
+  const svgRef = useRef(null);
+  const calculatedInset = useMemo(() => getChartInset(inset, defaultChartInset), [inset]);
 
   // Axis configs store the properties of each axis, such as id, scale type, domain limit, etc.
   // We only support 1 x axis but allow for multiple y axes.
-  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigInput)[0], [xAxisConfigInput]);
-  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigInput), [yAxisConfigInput]);
+  const xAxisConfig = useMemo(() => getAxisConfig('x', xAxisConfigProp)[0], [xAxisConfigProp]);
+  const yAxisConfig = useMemo(() => getAxisConfig('y', yAxisConfigProp), [yAxisConfigProp]);
   const {
     renderedAxes,
     registerAxis,
@@ -59,10 +59,10 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       height: 0
     };
     const totalInset = {
-      top: userInset.top + axisPadding.top,
-      right: userInset.right + axisPadding.right,
-      bottom: userInset.bottom + axisPadding.bottom,
-      left: userInset.left + axisPadding.left
+      top: calculatedInset.top + axisPadding.top,
+      right: calculatedInset.right + axisPadding.right,
+      bottom: calculatedInset.bottom + axisPadding.bottom,
+      left: calculatedInset.left + axisPadding.left
     };
     const availableWidth = chartWidth - totalInset.left - totalInset.right;
     const availableHeight = chartHeight - totalInset.top - totalInset.bottom;
@@ -72,11 +72,15 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       width: availableWidth > 0 ? availableWidth : 0,
       height: availableHeight > 0 ? availableHeight : 0
     };
-  }, [chartHeight, chartWidth, userInset, axisPadding]);
-
-  // Axes contain the config along with domain and range, which get calculated here.
-  const xAxis = useMemo(() => {
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return undefined;
+  }, [chartHeight, chartWidth, calculatedInset, axisPadding]);
+  const {
+    xAxis,
+    xScale
+  } = useMemo(() => {
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      xAxis: undefined,
+      xScale: undefined
+    };
     const domain = getAxisDomain(xAxisConfig, series !== null && series !== void 0 ? series : [], 'x');
     const range = getAxisRange(xAxisConfig, chartRect, 'x');
     const axisConfig = {
@@ -87,11 +91,43 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       categoryPadding: xAxisConfig.categoryPadding,
       domainLimit: xAxisConfig.domainLimit
     };
-    return axisConfig;
+
+    // Create the scale
+    const scale = getAxisScale({
+      config: axisConfig,
+      type: 'x',
+      range: axisConfig.range,
+      dataDomain: axisConfig.domain
+    });
+    if (!scale) return {
+      xAxis: undefined,
+      xScale: undefined
+    };
+
+    // Update axis config with actual scale domain (after .nice() or other adjustments)
+    const scaleDomain = scale.domain();
+    const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+      min: scaleDomain[0],
+      max: scaleDomain[1]
+    } : axisConfig.domain;
+    const finalAxisConfig = _objectSpread(_objectSpread({}, axisConfig), {}, {
+      domain: actualDomain
+    });
+    return {
+      xAxis: finalAxisConfig,
+      xScale: scale
+    };
   }, [xAxisConfig, series, chartRect]);
-  const yAxes = useMemo(() => {
+  const {
+    yAxes,
+    yScales
+  } = useMemo(() => {
     const axes = new Map();
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return axes;
+    const scales = new Map();
+    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return {
+      yAxes: axes,
+      yScales: scales
+    };
     yAxisConfig.forEach(axisParam => {
       var _axisParam$id, _series$filter, _axisParam$domainLimi;
       const axisId = (_axisParam$id = axisParam.id) !== null && _axisParam$id !== void 0 ? _axisParam$id : defaultAxisId;
@@ -102,36 +138,19 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
         return ((_s$yAxisId = s.yAxisId) !== null && _s$yAxisId !== void 0 ? _s$yAxisId : defaultAxisId) === axisId;
       })) !== null && _series$filter !== void 0 ? _series$filter : [];
 
-      // Calculate domain and range in one pass
-      const domain = getAxisDomain(axisParam, relevantSeries, 'y');
+      // Calculate domain and range
+      const dataDomain = getAxisDomain(axisParam, relevantSeries, 'y');
       const range = getAxisRange(axisParam, chartRect, 'y');
-      axes.set(axisId, {
+      const axisConfig = {
         scaleType: axisParam.scaleType,
-        domain,
+        domain: dataDomain,
         range,
         data: axisParam.data,
         categoryPadding: axisParam.categoryPadding,
         domainLimit: (_axisParam$domainLimi = axisParam.domainLimit) !== null && _axisParam$domainLimi !== void 0 ? _axisParam$domainLimi : 'nice'
-      });
-    });
-    return axes;
-  }, [yAxisConfig, series, chartRect]);
+      };
 
-  // Scales are the functions that convert data values to visual positions.
-  // They are calculated here based on the above axes.
-  const xScale = useMemo(() => {
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0 || xAxis === undefined) return undefined;
-    return getAxisScale({
-      config: xAxis,
-      type: 'x',
-      range: xAxis.range,
-      dataDomain: xAxis.domain
-    });
-  }, [chartRect, xAxis]);
-  const yScales = useMemo(() => {
-    const scales = new Map();
-    if (!chartRect || chartRect.width <= 0 || chartRect.height <= 0) return scales;
-    yAxes.forEach((axisConfig, axisId) => {
+      // Create the scale
       const scale = getAxisScale({
         config: axisConfig,
         type: 'y',
@@ -140,10 +159,23 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       });
       if (scale) {
         scales.set(axisId, scale);
+
+        // Update axis config with actual scale domain (after .nice() or other adjustments)
+        const scaleDomain = scale.domain();
+        const actualDomain = Array.isArray(scaleDomain) && scaleDomain.length === 2 ? {
+          min: scaleDomain[0],
+          max: scaleDomain[1]
+        } : axisConfig.domain;
+        axes.set(axisId, _objectSpread(_objectSpread({}, axisConfig), {}, {
+          domain: actualDomain
+        }));
       }
     });
-    return scales;
-  }, [chartRect, yAxes]);
+    return {
+      yAxes: axes,
+      yScales: scales
+    };
+  }, [yAxisConfig, series, chartRect]);
   const getXAxis = useCallback(() => xAxis, [xAxis]);
   const getYAxis = useCallback(id => yAxes.get(id !== null && id !== void 0 ? id : defaultAxisId), [yAxes]);
   const getXScale = useCallback(() => xScale, [xScale]);
@@ -157,6 +189,20 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     if (!seriesId) return undefined;
     return stackedDataMap.get(seriesId);
   }, [stackedDataMap]);
+  const dataLength = useMemo(() => {
+    // If xAxis has categorical data, use that length
+    if (xAxisConfig.data && xAxisConfig.data.length > 0) {
+      return xAxisConfig.data.length;
+    }
+
+    // Otherwise, find the longest series
+    if (!series || series.length === 0) return 0;
+    return series.reduce((max, s) => {
+      var _seriesData$length;
+      const seriesData = getStackedSeriesData(s.id);
+      return Math.max(max, (_seriesData$length = seriesData === null || seriesData === void 0 ? void 0 : seriesData.length) !== null && _seriesData$length !== void 0 ? _seriesData$length : 0);
+    }, 0);
+  }, [xAxisConfig.data, series, getStackedSeriesData]);
   const getAxisBounds = useCallback(axisId => {
     const axis = renderedAxes.get(axisId);
     if (!axis || !chartRect) return;
@@ -168,7 +214,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     const offsetFromPreviousAxes = axesAtPosition.slice(0, axisIndex).reduce((sum, a) => sum + a.size, 0);
     if (axis.position === 'top') {
       // Position above the chart rect, accounting for user inset
-      const startY = userInset.top + offsetFromPreviousAxes;
+      const startY = calculatedInset.top + offsetFromPreviousAxes;
       return {
         x: chartRect.x,
         y: startY,
@@ -186,7 +232,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
       };
     } else if (axis.position === 'left') {
       // Position to the left of the chart rect, accounting for user inset
-      const startX = userInset.left + offsetFromPreviousAxes;
+      const startX = calculatedInset.left + offsetFromPreviousAxes;
       return {
         x: startX,
         y: chartRect.y,
@@ -203,7 +249,7 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
         height: chartRect.height
       };
     }
-  }, [renderedAxes, chartRect, userInset]);
+  }, [renderedAxes, chartRect, calculatedInset]);
   const contextValue = useMemo(() => ({
     series: series !== null && series !== void 0 ? series : [],
     getSeries,
@@ -216,43 +262,52 @@ export const CartesianChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, r
     getXScale,
     getYScale,
     drawingArea: chartRect,
+    dataLength,
     registerAxis,
     unregisterAxis,
     getAxisBounds
-  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, registerAxis, unregisterAxis, getAxisBounds]);
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
-    ref: node => {
-      // Handle the observe ref, internal ref, and forwarded ref
-      observe(node);
-      if (internalSvgRef.current !== node) {
-        internalSvgRef.current = node;
-      }
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else {
-          ref.current = node;
-        }
-      }
-    },
-    "aria-live": "polite",
-    as: "svg",
-    className: cx(enableScrubbing && focusStylesCss, className),
-    height: height,
-    role: "figure",
-    style: style,
-    tabIndex: enableScrubbing ? 0 : undefined,
-    width: width
-  }, props), {}, {
-    children: /*#__PURE__*/_jsx(CartesianChartProvider, {
-      value: contextValue,
-      children: /*#__PURE__*/_jsx(ScrubberProvider, {
-        enableScrubbing: !!enableScrubbing,
-        onScrubberPositionChange: onScrubberPositionChange,
-        svgRef: internalSvgRef,
-        children: children
-      })
+  }), [series, getSeries, getStackedSeriesData, animate, chartWidth, chartHeight, getXAxis, getYAxis, getXScale, getYScale, chartRect, dataLength, registerAxis, unregisterAxis, getAxisBounds]);
+  const rootClassNames = useMemo(() => cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root), [className, classNames]);
+  const rootStyles = useMemo(() => _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.root), [style, styles === null || styles === void 0 ? void 0 : styles.root]);
+  return /*#__PURE__*/_jsx(CartesianChartProvider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(ScrubberProvider, {
+      enableScrubbing: !!enableScrubbing,
+      onScrubberPositionChange: onScrubberPositionChange,
+      svgRef: svgRef,
+      children: /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+        ref: node => {
+          observe(node);
+        },
+        className: rootClassNames,
+        height: height,
+        style: rootStyles,
+        width: width
+      }, props), {}, {
+        children: /*#__PURE__*/_jsx(Box, {
+          ref: node => {
+            const svgElement = node;
+            svgRef.current = svgElement;
+            // Forward the ref to the user
+            if (ref) {
+              if (typeof ref === 'function') {
+                ref(svgElement);
+              } else {
+                ref.current = svgElement;
+              }
+            }
+          },
+          "aria-live": "polite",
+          as: "svg",
+          className: cx(enableScrubbing && focusStylesCss, classNames === null || classNames === void 0 ? void 0 : classNames.chart),
+          height: "100%",
+          style: styles === null || styles === void 0 ? void 0 : styles.chart,
+          tabIndex: enableScrubbing ? 0 : undefined,
+          width: "100%",
+          children: children
+        })
+      }))
     })
-  }));
+  });
 }));
 import "./CartesianChart.css";

package/esm/chart/Path.js

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

package/esm/chart/PeriodSelector.js

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

package/esm/chart/area/Area.js

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