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

package/esm/chart/line/ReferenceLine.js

@@ -1,16 +1,12 @@
-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 { memo, useMemo } from 'react';
-import { G } from 'react-native-svg';
+import { memo } from 'react';
+import { useDerivedValue } from 'react-native-reanimated';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { useCartesianChartContext } from '../ChartProvider';
-import { ChartText } from '../text';
-import { getPointOnScale } from '../utils';
+import { unwrapAnimatedValue } from '../utils';
+import { getPointOnSerializableScale } from '../utils/point';
+import { DefaultReferenceLineLabel } from './DefaultReferenceLineLabel';
 import { DottedLine } from './DottedLine';
-
-/**
- * Configuration for ReferenceLine label rendering using ChartText.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const ReferenceLine = /*#__PURE__*/memo(_ref => {
   let {
     dataX,
@@ -18,44 +14,60 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
     yAxisId,
     label,
     labelPosition = dataY !== undefined ? 'right' : 'top',
-    testID,
     LineComponent = DottedLine,
+    LabelComponent = DefaultReferenceLineLabel,
+    labelElevated,
+    labelFont,
+    labelDx,
+    labelDy,
+    labelHorizontalAlignment,
+    labelVerticalAlignment,
+    labelBoundsInset,
     stroke,
-    labelProps
+    opacity = 1
   } = _ref;
   const theme = useTheme();
   const {
-    getXScale,
-    getYScale,
+    getXSerializableScale,
+    getYSerializableScale,
     drawingArea
   } = useCartesianChartContext();
+  const xScale = getXSerializableScale();
+  const yScale = getYSerializableScale(yAxisId);
   const effectiveLineStroke = stroke != null ? stroke : theme.color.bgLine;
 
-  // Merge default props with user provided props
-  const finalLabelProps = useMemo(() => _extends({
-    borderRadius: 8,
-    color: theme.color.fgMuted,
-    inset: {
-      top: 8,
-      bottom: 8,
-      left: 12,
-      right: 12
-    }
-  }, dataY !== undefined ? {
-    verticalAlignment: 'middle'
-  } : {
-    horizontalAlignment: 'center'
-  }, labelProps), [dataY, labelProps, theme.color.fgMuted]);
-  // Horizontal reference line logic
+  // For horizontal lines (dataY defined): default to verticalAlignment: 'middle'
+  // For vertical lines (dataX defined): default to horizontalAlignment: 'center'
+  const isHorizontal = dataY !== undefined;
+  const xPixel = useDerivedValue(() => {
+    const dataXValue = unwrapAnimatedValue(dataX);
+    return dataXValue !== undefined && xScale ? getPointOnSerializableScale(dataXValue, xScale) : undefined;
+  }, [dataX, xScale]);
+  const yPixel = useDerivedValue(() => {
+    const dataYValue = unwrapAnimatedValue(dataY);
+    return dataYValue !== undefined && yScale ? getPointOnSerializableScale(dataYValue, yScale) : undefined;
+  }, [dataY, yScale]);
+  const horizontalLine = useDerivedValue(() => {
+    if (yPixel.value === undefined) return;
+    return "M" + drawingArea.x + "," + yPixel.value + " L" + (drawingArea.x + drawingArea.width) + "," + yPixel.value;
+  }, [drawingArea, yPixel]);
+  const verticalLine = useDerivedValue(() => {
+    if (xPixel.value === undefined) return;
+    return "M" + xPixel.value + "," + drawingArea.y + " L" + xPixel.value + "," + (drawingArea.y + drawingArea.height);
+  }, [drawingArea, xPixel]);
+  const labelXPixel = useDerivedValue(() => {
+    var _xPixel$value;
+    return (_xPixel$value = xPixel.value) != null ? _xPixel$value : 0;
+  }, [xPixel]);
+  const labelYPixel = useDerivedValue(() => {
+    var _yPixel$value;
+    return (_yPixel$value = yPixel.value) != null ? _yPixel$value : 0;
+  }, [yPixel]);
+  const labelOpacity = useDerivedValue(() => {
+    const isVisible = dataY !== undefined && yPixel.value !== undefined || dataX !== undefined && xPixel.value !== undefined;
+    return isVisible ? unwrapAnimatedValue(opacity) : 0;
+  }, [yPixel, xPixel, opacity]);
   if (dataY !== undefined) {
-    const yScale = getYScale(yAxisId);
-
-    // Don't render if we don't have a scale
-    if (!yScale) {
-      return null;
-    }
-    const yPixel = yScale(dataY);
-    if (yPixel === undefined) return null;
     let labelX;
     if (labelPosition === 'left') {
       labelX = drawingArea.x;
@@ -64,30 +76,30 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
     } else {
       labelX = drawingArea.x + drawingArea.width;
     }
-    return /*#__PURE__*/_jsxs(G, {
-      "data-testid": testID,
+    return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(LineComponent, {
         animate: false,
-        d: "M" + drawingArea.x + "," + yPixel + " L" + (drawingArea.x + drawingArea.width) + "," + yPixel,
-        stroke: effectiveLineStroke
-      }), label && /*#__PURE__*/_jsx(ChartText, _extends({}, finalLabelProps, {
+        d: horizontalLine,
+        stroke: effectiveLineStroke,
+        strokeOpacity: opacity
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        boundsInset: labelBoundsInset,
+        dx: labelDx,
+        dy: labelDy,
+        elevated: labelElevated,
+        font: labelFont,
+        horizontalAlignment: labelHorizontalAlignment,
+        opacity: labelOpacity,
+        verticalAlignment: labelVerticalAlignment != null ? labelVerticalAlignment : isHorizontal ? 'middle' : undefined,
         x: labelX,
-        y: yPixel,
+        y: labelYPixel,
         children: label
-      }))]
+      })]
     });
   }
 
   // Vertical reference line logic
   if (dataX !== undefined) {
-    const xScale = getXScale();
-
-    // Don't render if we don't have scales
-    if (!xScale) {
-      return null;
-    }
-    const xPixel = getPointOnScale(dataX, xScale);
-    if (xPixel === undefined) return null;
     let labelY;
     if (labelPosition === 'top') {
       labelY = drawingArea.y;
@@ -96,20 +108,25 @@ export const ReferenceLine = /*#__PURE__*/memo(_ref => {
     } else {
       labelY = drawingArea.y + drawingArea.height;
     }
-    return /*#__PURE__*/_jsxs(G, {
-      "data-testid": testID,
+    return /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(LineComponent, {
         animate: false,
-        d: "M" + xPixel + "," + drawingArea.y + " L" + xPixel + "," + (drawingArea.y + drawingArea.height),
-        stroke: effectiveLineStroke
-      }), label && /*#__PURE__*/_jsx(ChartText, _extends({}, finalLabelProps, {
-        x: xPixel,
+        d: verticalLine,
+        stroke: effectiveLineStroke,
+        strokeOpacity: opacity
+      }), label && /*#__PURE__*/_jsx(LabelComponent, {
+        boundsInset: labelBoundsInset,
+        dx: labelDx,
+        dy: labelDy,
+        elevated: labelElevated,
+        font: labelFont,
+        horizontalAlignment: labelHorizontalAlignment != null ? labelHorizontalAlignment : !isHorizontal ? 'center' : undefined,
+        opacity: labelOpacity,
+        verticalAlignment: labelVerticalAlignment,
+        x: labelXPixel,
         y: labelY,
         children: label
-      }))]
+      })]
     });
   }
-
-  // Should not reach here if types are correct
-  return null;
 });

package/esm/chart/line/SolidLine.js

@@ -1,31 +1,46 @@
-const _excluded = ["fill", "stroke", "strokeLinecap", "strokeLinejoin", "strokeOpacity", "strokeWidth"];
+const _excluded = ["fill", "stroke", "strokeCap", "strokeJoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "d", "animate", "transition"];
 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 { memo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { Gradient } from '../gradient';
 import { Path } from '../Path';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * A customizable solid line component which uses path element.
+ * A customizable solid line component.
+ * Supports gradient for gradient effects and smooth data transitions via AnimatedPath.
  */
 export const SolidLine = /*#__PURE__*/memo(_ref => {
   let {
       fill = 'none',
       stroke,
-      strokeLinecap = 'round',
-      strokeLinejoin = 'round',
+      strokeCap = 'round',
+      strokeJoin = 'round',
       strokeOpacity = 1,
-      strokeWidth = 2
+      strokeWidth = 2,
+      gradient,
+      yAxisId,
+      d,
+      animate,
+      transition
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   return /*#__PURE__*/_jsx(Path, _extends({
+    animate: animate,
     clipOffset: strokeWidth,
+    d: d,
     fill: fill,
-    stroke: stroke != null ? stroke : theme.color.bgLine,
-    strokeLinecap: strokeLinecap,
-    strokeLinejoin: strokeLinejoin,
+    stroke: stroke != null ? stroke : theme.color.fgPrimary,
+    strokeCap: strokeCap,
+    strokeJoin: strokeJoin,
     strokeOpacity: strokeOpacity,
-    strokeWidth: strokeWidth
-  }, props));
+    strokeWidth: strokeWidth,
+    transition: transition
+  }, props, {
+    children: gradient && /*#__PURE__*/_jsx(Gradient, {
+      gradient: gradient,
+      yAxisId: yAxisId
+    })
+  }));
 });