feat: add pathfill prop and clean up api

Author: e-younan

example/app/index.tsx

@@ -4,6 +4,7 @@ import {
   type PanGestureHandlerOnChangeEventPayload,
   HoverGestureHandlerOnChangeEventPayload,
 } from "@codeherence/react-native-graph";
+import { LinearGradient, vec } from "@shopify/react-native-skia";
 import { useCallback, useEffect, useState } from "react";
 import { Button, StyleSheet, Text, View } from "react-native";
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
@@ -80,6 +81,10 @@ export default () => {
         onPanGestureEnd={onEndWorklet}
         onHoverGestureEnd={onEndWorklet}
         onHoverGestureChange={onHoverChangeWorklet}
+        strokeWidth={2}
+        PathFill={({ width }) => (
+          <LinearGradient start={vec(0, 0)} end={vec(width, 0)} colors={["blue", "yellow"]} />
+        )}
       />
     </View>
   );

src/components/LineChart/Cursor.tsx

@@ -18,20 +18,6 @@ export const Cursor: React.FC<CursorProps> = ({ x, y, height, cursorRadius }) =>
     return [{ translateX: x.value }, { translateY: y.value }];
   }, []);
 
-  // const animatedText: AnimatedProp<string> = useDerivedValue(() => {
-  //   // Must interpolate the y value to the proper value
-  //   const interpolatedY = interpolate(
-  //     y.value,
-  //     [cursorRadius, height + cursorRadius],
-  //     [maxValue, minValue]
-  //   );
-  //   return formatter(interpolatedY);
-  // }, [maxValue, minValue, height, formatter]);
-
-  // const bannerTransform = useDerivedValue(() => {
-  //   return [{ translateX: cursorRadius }, { translateY: -cursorRadius - BASE_LABEL_MARGIN }];
-  // });
-
   return (
     <>
       <Line
@@ -42,11 +28,6 @@ export const Cursor: React.FC<CursorProps> = ({ x, y, height, cursorRadius }) =>
         strokeWidth={2}
       />
       <Group transform={transform}>
-        {/* {BannerComponent && (
-          <Group transform={bannerTransform} style="fill" color="red">
-            {BannerComponent({ text: animatedText })}
-          </Group>
-        )} */}
         <Circle cx={0} cy={0} r={cursorRadius} color="black" />
       </Group>
     </>

src/components/LineChart/constants.ts

@@ -5,7 +5,3 @@ export const DEFAULT_STROKE_WIDTH = 2;
 export const DEFAULT_CURSOR_RADIUS = 8;
 export const DEFAULT_CURVE_TYPE: ComputePathProps["curveType"] = "linear";
 export const DEFAULT_BANNER_COMPONENT = null;
-export const DEFAULT_FORMATTER = (price: number) => {
-  "worklet";
-  return price.toString();
-};

src/components/LineChart/index.tsx

@@ -7,12 +7,7 @@ import { useSharedValue } from "react-native-reanimated";
 import { AxisLabelComponentProps, AxisLabelContainer } from "./AxisLabel";
 import { Cursor } from "./Cursor";
 import { computePath, type ComputePathProps, computeGraphData } from "./computations";
-import {
-  DEFAULT_CURSOR_RADIUS,
-  DEFAULT_CURVE_TYPE,
-  DEFAULT_FORMATTER,
-  DEFAULT_STROKE_WIDTH,
-} from "./constants";
+import { DEFAULT_CURSOR_RADIUS, DEFAULT_CURVE_TYPE, DEFAULT_STROKE_WIDTH } from "./constants";
 import {
   HoverGestureHandlerOnBeginEventPayload,
   HoverGestureHandlerOnChangeEventPayload,
@@ -23,16 +18,22 @@ import {
   useGestures,
 } from "./useGestures";
 
+export interface PathFillProps {
+  strokeWidth: number;
+  height: number;
+  width: number;
+}
+
 export type LineChartProps = ViewProps & {
   /** Array of [x, y] points for the chart */
   points: [number, number][];
   strokeWidth?: number;
   cursorRadius?: number;
   curveType?: ComputePathProps["curveType"];
   /** A worklet function to format a given price. */
-  formatter?: (price: number) => string;
   TopAxisLabel?: React.FC<AxisLabelComponentProps>;
   BottomAxisLabel?: React.FC<AxisLabelComponentProps>;
+  PathFill?: React.FC<PathFillProps>;
   /** Callback when the pan gesture begins. This function must be a worklet function. */
   onPanGestureBegin?: ((payload: PanGestureHandlerOnBeginEventPayload) => void) | null;
   onPanGestureChange?: ((payload: PanGestureHandlerOnChangeEventPayload) => void) | null;
@@ -47,9 +48,9 @@ export const LineChart: React.FC<LineChartProps> = ({
   strokeWidth = DEFAULT_STROKE_WIDTH,
   cursorRadius = DEFAULT_CURSOR_RADIUS,
   curveType = DEFAULT_CURVE_TYPE,
-  formatter = DEFAULT_FORMATTER,
   TopAxisLabel = null,
   BottomAxisLabel = null,
+  PathFill = null,
   onPanGestureBegin = null,
   onPanGestureChange = null,
   onPanGestureEnd = null,
@@ -104,7 +105,9 @@ export const LineChart: React.FC<LineChartProps> = ({
       <GestureDetector gesture={gestures}>
         <View style={styles.container} onLayout={onLayout}>
           <Canvas style={{ height, width }}>
-            <Path style="stroke" path={path} strokeWidth={strokeWidth} color="black" />
+            <Path style="stroke" path={path} strokeWidth={strokeWidth} color="white">
+              {PathFill && PathFill({ width, height, strokeWidth })}
+            </Path>
             <Cursor x={x} y={y} height={height} cursorRadius={cursorRadius} />
           </Canvas>
         </View>