@coinbase/cds-mobile-visualization 3.6.2 → 3.8.0

package/esm/chart/bar/__stories__/BarChart.stories.js

@@ -31,6 +31,7 @@ const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _e
   strokeWidth: 1
 })));
 const defaultChartHeight = 250;
+const baselineThresholdData = [40, 28, 21, 5, 48, 5, 28, 2, 29, 48, 18, 30, 29, 8].map(value => value + 50);
 const PositiveAndNegativeCashFlow = () => {
   const theme = useTheme();
   const categories = Array.from({
@@ -665,7 +666,7 @@ const BandGridPositionExample = _ref6 => {
 
 // --- Composed Examples ---
 
-const candlestickStockData = btcCandles.slice(0, 90).reverse();
+const candlestickStockData = [...btcCandles].reverse().slice(0, 90);
 const CandlesticksHeader = /*#__PURE__*/memo(_ref7 => {
   let {
     currentIndex
@@ -1004,7 +1005,7 @@ const SunlightChart = () => {
   });
 };
 const PriceRange = () => {
-  const candles = btcCandles.slice(0, 180).reverse();
+  const candles = [...btcCandles].reverse().slice(0, 180);
   const data = useMemo(() => candles.map(candle => [parseFloat(candle.low), parseFloat(candle.high)]), [candles]);
   const min = useMemo(() => Math.min(...data.map(_ref13 => {
     let [low] = _ref13;
@@ -1064,6 +1065,81 @@ const HorizontalBarChart = () => {
     }
   });
 };
+const AxisBaselineExample = () => {
+  return /*#__PURE__*/_jsx(BarChart, {
+    showXAxis: true,
+    showYAxis: true,
+    accessibilityLabel: "Bar chart with custom axis baseline at 100.",
+    height: defaultChartHeight,
+    series: [{
+      id: 'net-flow',
+      data: [112, 97, 121, 103, 129, 118, 94]
+    }],
+    xAxis: {
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+      baseline: 100,
+      domain: {
+        min: 80,
+        max: 140
+      },
+      showGrid: true
+    }
+  });
+};
+const AxisBaselineThresholdExample = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(BarChart, {
+      showYAxis: true,
+      accessibilityLabel: "Bar chart with threshold baseline at 30.",
+      height: 220,
+      inset: 0,
+      series: [{
+        id: 'axis-baseline-threshold-vertical',
+        data: baselineThresholdData,
+        gradient: {
+          stops: [{
+            offset: 30,
+            color: theme.color.fgNegative
+          }, {
+            offset: 30,
+            color: theme.color.fgPositive
+          }]
+        }
+      }],
+      yAxis: {
+        showGrid: true,
+        baseline: 30
+      }
+    }), /*#__PURE__*/_jsx(BarChart, {
+      showXAxis: true,
+      accessibilityLabel: "Horizontal bar chart with threshold baseline at 30.",
+      height: 220,
+      inset: 0,
+      layout: "horizontal",
+      series: [{
+        id: 'axis-baseline-threshold-horizontal',
+        data: baselineThresholdData,
+        gradient: {
+          stops: [{
+            offset: 30,
+            color: theme.color.fgNegative
+          }, {
+            offset: 30,
+            color: theme.color.fgPositive
+          }]
+        }
+      }],
+      xAxis: {
+        showGrid: true,
+        baseline: 30
+      }
+    })]
+  });
+};
 function BuyVsSellExample() {
   function BuyVsSellLegend(_ref15) {
     let {
@@ -1224,6 +1300,12 @@ function ExampleNavigator() {
   }, {
     title: 'Negative Values with Top Axis',
     component: /*#__PURE__*/_jsx(NegativeValuesWithTopAxis, {})
+  }, {
+    title: 'Axis Baseline',
+    component: /*#__PURE__*/_jsx(AxisBaselineExample, {})
+  }, {
+    title: 'Axis Baseline Threshold',
+    component: /*#__PURE__*/_jsx(AxisBaselineThresholdExample, {})
   }, {
     title: 'Positive and Negative Cash Flow',
     component: /*#__PURE__*/_jsx(PositiveAndNegativeCashFlow, {})

package/esm/chart/gradient/Gradient.js

@@ -1,7 +1,9 @@
-import { memo, useMemo } from 'react';
-import { LinearGradient, vec } from '@shopify/react-native-skia';
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { LinearGradient } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
-import { getColorWithOpacity, getGradientConfig } from '../utils/gradient';
+import { buildTransition, defaultTransition, instantTransition } from '../utils';
+import { getColorWithOpacity, getGradientAxis, getGradientConfig } from '../utils/gradient';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Renders a Skia LinearGradient element based on a GradientDefinition.
@@ -13,38 +15,129 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * </Path>
  */
 export const Gradient = /*#__PURE__*/memo(_ref => {
-  var _gradient$axis;
+  var _scale$range;
   let {
     gradient,
     xAxisId,
-    yAxisId
+    yAxisId,
+    animate: animateProp,
+    transition: transitionProp
   } = _ref;
-  const context = useCartesianChartContext();
-  const xScale = context.getXScale(xAxisId);
-  const yScale = context.getYScale(yAxisId);
-  const axis = (_gradient$axis = gradient.axis) != null ? _gradient$axis : 'y';
-  const scale = axis === 'x' ? xScale : yScale;
+  const {
+    animate: animateContext,
+    getXScale,
+    getYScale,
+    drawingArea,
+    layout
+  } = useCartesianChartContext();
+  const animate = animateProp != null ? animateProp : animateContext;
+  const transition = useMemo(() => {
+    if (!animate) return instantTransition;
+    return transitionProp != null ? transitionProp : defaultTransition;
+  }, [transitionProp, animate]);
+  const xScale = getXScale(xAxisId);
+  const yScale = getYScale(yAxisId);
 
   // Process gradient definition into stops
   const stops = useMemo(() => {
     if (!xScale || !yScale) return;
-    return getGradientConfig(gradient, xScale, yScale);
-  }, [gradient, xScale, yScale]);
-  if (!stops || !scale) return;
-  const range = scale.range();
-
-  // Determine gradient direction based on axis
-  // For y-axis, we need to flip the gradient direction because y-scales are inverted
-  // (higher data values have smaller pixel values, appearing at the top)
-  const start = axis === 'x' ? vec(range[0], 0) : vec(0, range[0]);
-  const end = axis === 'x' ? vec(range[1], 0) : vec(0, range[1]);
+    return getGradientConfig(gradient, xScale, yScale, layout);
+  }, [gradient, xScale, yScale, layout]);
+  const axis = getGradientAxis(gradient, layout);
+  const scale = axis === 'x' ? xScale : yScale;
+  const shouldRender = !!stops && !!scale;
+  const range = (_scale$range = scale == null ? void 0 : scale.range()) != null ? _scale$range : [0, 0];
+  const [rangeStart = 0, rangeEnd = 0] = range;
+  const targetStart = axis === 'x' ? {
+    x: rangeStart,
+    y: drawingArea.y
+  } : {
+    x: drawingArea.x,
+    y: rangeStart
+  };
+  const targetEnd = axis === 'x' ? {
+    x: rangeEnd,
+    y: drawingArea.y
+  } : {
+    x: drawingArea.x,
+    y: rangeEnd
+  };
 
-  // Extract colors and positions for LinearGradient
-  const colors = stops.map(s => {
-    var _s$opacity;
-    return getColorWithOpacity(s.color, (_s$opacity = s.opacity) != null ? _s$opacity : 1);
-  });
-  const positions = stops.map(s => s.offset);
+  // Extract colors and positions for LinearGradient.
+  const colors = useMemo(() => (stops != null ? stops : []).map(stop => {
+    var _stop$opacity;
+    return getColorWithOpacity(stop.color, (_stop$opacity = stop.opacity) != null ? _stop$opacity : 1);
+  }), [stops]);
+  const targetPositions = useMemo(() => (stops != null ? stops : []).map(stop => stop.offset), [stops]);
+  const startX = useSharedValue(targetStart.x);
+  const startY = useSharedValue(targetStart.y);
+  const endX = useSharedValue(targetEnd.x);
+  const endY = useSharedValue(targetEnd.y);
+  const fromPositions = useSharedValue(targetPositions);
+  const toPositions = useSharedValue(targetPositions);
+  const positionsProgress = useSharedValue(1);
+  const hasRendered = useRef(false);
+  useEffect(() => {
+    if (!shouldRender) {
+      hasRendered.current = false;
+      return;
+    }
+    if (!hasRendered.current) {
+      hasRendered.current = true;
+      startX.value = targetStart.x;
+      startY.value = targetStart.y;
+      endX.value = targetEnd.x;
+      endY.value = targetEnd.y;
+      fromPositions.value = [...targetPositions];
+      toPositions.value = [...targetPositions];
+      positionsProgress.value = 1;
+      return;
+    }
+    startX.value = buildTransition(targetStart.x, transition);
+    startY.value = buildTransition(targetStart.y, transition);
+    endX.value = buildTransition(targetEnd.x, transition);
+    endY.value = buildTransition(targetEnd.y, transition);
+    const canAnimatePositions = toPositions.value.length === targetPositions.length;
+    if (canAnimatePositions) {
+      fromPositions.value = [...toPositions.value];
+      toPositions.value = [...targetPositions];
+      positionsProgress.value = 0;
+      positionsProgress.value = buildTransition(1, transition);
+    } else {
+      fromPositions.value = [...targetPositions];
+      toPositions.value = [...targetPositions];
+      positionsProgress.value = 1;
+    }
+  }, [transition, targetStart.x, targetStart.y, targetEnd.x, targetEnd.y, targetPositions, startX, startY, endX, endY, fromPositions, toPositions, positionsProgress, shouldRender]);
+  const start = useDerivedValue(() => {
+    return {
+      x: startX.value,
+      y: startY.value
+    };
+  }, [startX, startY]);
+  const end = useDerivedValue(() => {
+    return {
+      x: endX.value,
+      y: endY.value
+    };
+  }, [endX, endY]);
+  const positions = useDerivedValue(() => {
+    const from = fromPositions.value;
+    const to = toPositions.value;
+    const progress = positionsProgress.value;
+    if (to.length === 0) return [];
+    const count = Math.max(from.length, to.length);
+    const interpolated = Array.from({
+      length: count
+    }, (_, index) => {
+      var _from$Math$min, _to$Math$min;
+      const fromValue = (_from$Math$min = from[Math.min(index, from.length - 1)]) != null ? _from$Math$min : 0;
+      const toValue = (_to$Math$min = to[Math.min(index, to.length - 1)]) != null ? _to$Math$min : fromValue;
+      return fromValue + (toValue - fromValue) * progress;
+    });
+    return interpolated;
+  }, [fromPositions, toPositions, positionsProgress]);
+  if (!shouldRender) return null;
   return /*#__PURE__*/_jsx(LinearGradient, {
     colors: colors,
     end: end,

package/esm/chart/line/DottedLine.js

@@ -12,6 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Supports gradient for gradient effects on the dots and smooth data transitions via AnimatedPath.
  */
 export const DottedLine = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       fill = 'none',
       stroke,
@@ -46,7 +47,9 @@ export const DottedLine = /*#__PURE__*/memo(_ref => {
     children: [/*#__PURE__*/_jsx(DashPathEffect, {
       intervals: dashIntervals
     }), gradient && /*#__PURE__*/_jsx(Gradient, {
+      animate: animate,
       gradient: gradient,
+      transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
       xAxisId: xAxisId,
       yAxisId: yAxisId
     })]

package/esm/chart/line/Line.js

@@ -1,4 +1,4 @@
-const _excluded = ["seriesId", "curve", "type", "areaType", "areaBaseline", "stroke", "strokeOpacity", "showArea", "LineComponent", "AreaComponent", "opacity", "points", "connectNulls", "transitions", "transition", "gradient"];
+const _excluded = ["seriesId", "curve", "type", "areaType", "stroke", "strokeOpacity", "showArea", "LineComponent", "AreaComponent", "opacity", "points", "connectNulls", "transitions", "transition", "gradient"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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';
@@ -20,7 +20,6 @@ export const Line = /*#__PURE__*/memo(_ref => {
       curve = 'bump',
       type = 'solid',
       areaType = 'gradient',
-      areaBaseline,
       stroke: strokeProp,
       strokeOpacity,
       showArea,
@@ -114,7 +113,6 @@ export const Line = /*#__PURE__*/memo(_ref => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [showArea && /*#__PURE__*/_jsx(Area, {
       AreaComponent: AreaComponent,
-      baseline: areaBaseline,
       connectNulls: connectNulls,
       curve: curve,
       fill: stroke,

package/esm/chart/line/LineChart.js

@@ -1,6 +1,6 @@
 const _excluded = ["series", "showArea", "areaType", "type", "LineComponent", "AreaComponent", "curve", "points", "strokeWidth", "strokeOpacity", "connectNulls", "transition", "transitions", "opacity", "showXAxis", "showYAxis", "xAxis", "yAxis", "inset", "scrubberAccessibilityLabelStep", "layout", "children"],
-  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
-  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "id"],
+  _excluded2 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
+  _excluded3 = ["scaleType", "data", "categoryPadding", "domain", "domainLimit", "range", "baseline", "id"],
   _excluded4 = ["id", "data", "label", "color", "xAxisId", "yAxisId"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -67,6 +67,7 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       domain: xDomain,
       domainLimit: xDomainLimit,
       range: xRange,
+      baseline: xBaseline,
       id: xAxisId
     } = _ref2,
     xAxisVisualProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
@@ -78,6 +79,7 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
       domain: yDomain,
       domainLimit: yDomainLimit,
       range: yRange,
+      baseline: yBaseline,
       id: yAxisId
     } = _ref3,
     yAxisVisualProps = _objectWithoutPropertiesLoose(_ref3, _excluded3);
@@ -87,7 +89,8 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     categoryPadding: xCategoryPadding,
     domain: xDomain,
     domainLimit: xDomainLimit,
-    range: xRange
+    range: xRange,
+    baseline: xBaseline
   };
   const yAxisConfig = {
     scaleType: yScaleType,
@@ -95,7 +98,8 @@ export const LineChart = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) =
     categoryPadding: yCategoryPadding,
     domain: yDomain,
     domainLimit: yDomainLimit,
-    range: yRange
+    range: yRange,
+    baseline: yBaseline
   };
   const categoryAxisData = layout === 'horizontal' ? yData : xData;
   const lineChartDataLength = useMemo(() => {

package/esm/chart/line/SolidLine.js

@@ -11,6 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Supports gradient for gradient effects and smooth data transitions via AnimatedPath.
  */
 export const SolidLine = /*#__PURE__*/memo(_ref => {
+  var _transitions$update;
   let {
       fill = 'none',
       stroke,
@@ -42,7 +43,9 @@ export const SolidLine = /*#__PURE__*/memo(_ref => {
     transitions: transitions
   }, props, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      animate: animate,
       gradient: gradient,
+      transition: (_transitions$update = transitions == null ? void 0 : transitions.update) != null ? _transitions$update : transition,
       xAxisId: xAxisId,
       yAxisId: yAxisId
     })

package/esm/chart/utils/axis.js

@@ -1,6 +1,6 @@
 const _excluded = ["id"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { useCallback, useMemo, useState } from 'react';
 import { getChartDomain, getChartRange, isValidBounds } from './chart';
 import { getPointOnScale } from './point';
@@ -46,6 +46,36 @@ export const toPointAnchor = placement => {
  * Axis configuration without computed bounds (used for input)
  */
 
+const includeBaselineInBounds = (bounds, baseline) => {
+  if (baseline < bounds.min) return _extends({}, bounds, {
+    min: baseline
+  });
+  if (baseline > bounds.max) return _extends({}, bounds, {
+    max: baseline
+  });
+  return bounds;
+};
+export const withBaselineDomain = function (domain, baseline) {
+  if (baseline === void 0) {
+    baseline = 0;
+  }
+  if (typeof domain === 'function') return domain;
+  if ((domain == null ? void 0 : domain.min) !== undefined && (domain == null ? void 0 : domain.max) !== undefined) return domain;
+  const hasExplicitMin = (domain == null ? void 0 : domain.min) !== undefined;
+  const hasExplicitMax = (domain == null ? void 0 : domain.max) !== undefined;
+  return bounds => {
+    const resolvedBounds = {
+      min: hasExplicitMin ? domain == null ? void 0 : domain.min : bounds.min,
+      max: hasExplicitMax ? domain == null ? void 0 : domain.max : bounds.max
+    };
+    const baselineAdjustedBounds = includeBaselineInBounds(resolvedBounds, baseline);
+    return {
+      min: hasExplicitMin ? resolvedBounds.min : baselineAdjustedBounds.min,
+      max: hasExplicitMax ? resolvedBounds.max : baselineAdjustedBounds.max
+    };
+  };
+};
+
 /**
  * Gets a D3 scale based on the cartesian axis configuration.
  * Handles both numeric (linear/log) and categorical (band) scales.
@@ -221,7 +251,7 @@ export const getCartesianAxisDomain = function (axisParam, series, axisType, lay
   // In vertical layout: X is category (index), Y is value (value)
   // In horizontal layout: Y is category (index), X is value (value)
   const isCategoryAxis = layout !== 'horizontal' && axisType === 'x' || layout === 'horizontal' && axisType === 'y';
-  const seriesDomain = isCategoryAxis ? getChartDomain(series) : getChartRange(series);
+  const seriesDomain = isCategoryAxis ? getChartDomain(series) : getChartRange(series, layout, axisType === 'x' ? [axisParam] : [], axisType === 'y' ? [axisParam] : []);
 
   // If data sets the domain, use that instead of the series domain
   const preferredDataDomain = dataDomain != null ? dataDomain : seriesDomain;
@@ -246,8 +276,6 @@ export const getCartesianAxisDomain = function (axisParam, series, axisType, lay
     // Use the base domain as-is
     finalDomain = preferredDataDomain;
   }
-
-  // Ensure we always return valid bounds with no undefined values
   return {
     min: (_finalDomain$min = finalDomain.min) != null ? _finalDomain$min : 0,
     max: (_finalDomain$max = finalDomain.max) != null ? _finalDomain$max : 0