react-native-wagmi-charts 2.8.3 → 2.9.0

package/README.md

@@ -871,6 +871,7 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 | `crosshairProps`        | `ViewProps`                    |           | Props of the crosshair dot                                            |
 | `crosshairOuterProps`   | `ViewProps`                    |           | Props of the crosshair outer dot                                      |
 | `snapToPoint`           | `boolean`                      | `false`   | **REACT NATIVE ONLY** Snap cursor to X position of nearest data point |
+| `persistOnEnd`             | `boolean`                      | `false`   | Keep the cursor pinned at its last position after the gesture ends    |
 | `at`                    | `number`                       |           | Index of followed `data` item.                                        |
 | `...props`              | `LongPressGestureHandlerProps` |           |                                                                       |
 
@@ -880,6 +881,7 @@ To customize the formatting of the date/time text, you can supply a `format` fun
 | ----------- | ----------- | -------- | ---------------------------------------------------------------- |
 | `color`     | `string`    | `"gray"` | Color of the cursor line                                         |
 | `lineProps` | `LineProps` |          | Props of the cursor line. Takes React Native SVG's `Line` props. |
+| `persistOnEnd` | `boolean`   | `false`  | Keep the cursor pinned at its last position after the gesture ends |
 | `at`        | `number`    |          | Index of followed `data` item.                                   |
 
 ### LineChart.Dot

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "2.8.3",
+  "version": "2.9.0",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/charts/candle/Crosshair.tsx

@@ -120,6 +120,12 @@ export function CandlestickChartCrosshair({
   return (
     <GestureDetector gesture={longPressGesture}>
       <Animated.View style={StyleSheet.absoluteFill}>
+        <Animated.View
+          style={[StyleSheet.absoluteFill, vertical]}
+          {...verticalCrosshairProps}
+        >
+          <CandlestickChartLine color={color} x={0} y={height} {...lineProps} />
+        </Animated.View>
         <Animated.View
           style={[StyleSheet.absoluteFill, horizontal]}
           {...horizontalCrosshairProps}
@@ -131,12 +137,6 @@ export function CandlestickChartCrosshair({
             {children}
           </CandlestickChartCrosshairTooltipContext.Provider>
         </Animated.View>
-        <Animated.View
-          style={[StyleSheet.absoluteFill, vertical]}
-          {...verticalCrosshairProps}
-        >
-          <CandlestickChartLine color={color} x={0} y={height} {...lineProps} />
-        </Animated.View>
       </Animated.View>
     </GestureDetector>
   );

package/src/charts/line/Cursor.tsx

@@ -26,6 +26,7 @@ export type LineChartCursorProps = {
   onActivated?: () => void;
   onEnded?: () => void;
   orientation?: 'horizontal' | 'vertical';
+  persistOnEnd?: boolean;
 };
 
 export const CursorContext = React.createContext({ type: '' });
@@ -38,6 +39,7 @@ export function LineChartCursor({
   type,
   at,
   shouldCancelWhenOutside = false,
+  persistOnEnd = false,
   minDurationMs = 0,
   onActivated,
   onEnded,
@@ -149,8 +151,11 @@ export function LineChartCursor({
     })
     .onEnd(() => {
       'worklet';
-      isActive.value = false;
-      currentIndex.value = -1;
+
+      if (!persistOnEnd) {
+        isActive.value = false;
+        currentIndex.value = -1;
+      }
 
       if (onEnded) {
         runOnJS(onEnded)();

package/src/charts/line/CursorLine.tsx

@@ -21,6 +21,7 @@ type LineChartCursorLineProps = {
   lineProps?: Partial<LineProps>;
   format?: TFormatterFn<string | number>;
   textStyle?: TextStyle;
+  persistOnEnd?: boolean;
 } & Omit<LineChartCursorProps, 'type' | 'children'>;
 
 LineChartCursorLine.displayName = 'LineChartCursorLine';