feat: Added ability to custom stroke and selection width

README.md

@@ -109,13 +109,20 @@ export default YourComponent;
  `yAxisLegendQuantity`   | number                                       | 4                       | The quantity of y-axis legend values to display.
  `showExtremeValues`     | boolean                                      | true                    | Whether to show extreme values (min and max) on the graph.
  `showBlinkingDot`       | boolean                                      | false                   | Whether to show a blinking dot on the graph. (Will be placed at the last point of the graph)
+ `blinkingDotRadius`     | number                                       | 5                       | The radius of the blinking dot.
+ `blinkingDotExpansion`  | number                                       | 10                      | The expansion of the blinking dot.
  `showSelectionDot`      | boolean                                      | true                    | Whether to show the selection dot on the graph while hovering.
+ `selectionDotRadius`    | number                                       | 5                       | The radius of the selection dot.
+ `selectionDotExpansion` | number                                       | 10                      | The expansion of the selection dot.
  `selectionLines`        |'horizontal'\|'vertical'\|'both'\|'none'      | 'both'                  | The type of selection lines to display.
  `selectionLineColor`    | string                                       | '#D4D4D4'               | The color of the selection lines.
  `gestureEnabled`        | boolean                                      | true                    | Whether to enable gestures on the graph.
  `containerStyle`        | ViewProps['style']                           |                         | The style object to customize the container of the graph.
  `graphStyle`            | ViewProps['style']                           |                         | The style object to customize the graph.
  `textStyle`             | TextProps['style']                           |                         | The style object to customize the text elements in the graph.
+ `strokeWidth`           | number                                       | 2                       | The width of the graph line stroke.
+ `strokeLinecap`         | 'round'\|'butt'\|'square'                    | 'round'                 | The shape to be used at the end of the graph line.
+ `strokeDasharray`       | number[]                                     | []                      | An array of numbers defining the pattern of dashes and gaps used to stroke the graph line.
  `renderXAxisLegend`     | (value: number, index: number) => void       |                         | A function to render custom x-axis legend values. It takes two arguments, `value` - the x-axis value for which the legend is being rendered & `index` - the index of the x-axis value on legend.
  `renderYAxisLegend`     | (value: number, index: number) => void       |                         | A function to render custom y-axis legend values. It takes two arguments, `value` - the y-axis value for which the legend is being rendered & `index` - the index of the y-axis value on legend.
  `renderExtremeValue`    | (value: number, type: 'min'\|'max') => void  |                         | A function to render custom extreme values. It takes two arguments, `value` - the extreme value to be rendered, `type` - the type of extreme value, either minimum or maximum.

src/components/BlinkingDot/index.tsx

@@ -7,7 +7,7 @@ import { BlinkingDotProps } from '../../core/dto/blinkingDotDTO';
 import { ANIMATION_DURATION } from '../../core/constants/data';
 import { AnimatedCircle } from '../Animated';
 
-const BlinkingDot: FC<BlinkingDotProps> = ( { show, color, points } ) => {
+const BlinkingDot: FC<BlinkingDotProps> = ( { show, color, points, radius, expansion } ) => {
 
   const animation = useSharedValue( 0 );
 
@@ -26,7 +26,7 @@ const BlinkingDot: FC<BlinkingDotProps> = ( { show, color, points } ) => {
   const animatedProps = useAnimatedProps( () => ( blinkingDot.value ) );
   const animationProps = useAnimatedProps( () => ( show.value ? {
     ...blinkingDot.value,
-    r: String( interpolate( animation.value, [ 0, 1 ], [ 3, 13 ] ) ),
+    r: String( interpolate( animation.value, [ 0, 1 ], [ radius, radius + expansion ] ) ),
     opacity: interpolate( animation.value, [ 0, 1 ], [ 1, 0.1 ] ),
   } : blinkingDot.value ) );
 
@@ -61,7 +61,7 @@ const BlinkingDot: FC<BlinkingDotProps> = ( { show, color, points } ) => {
 
   return (
     <>
-      <AnimatedCircle animatedProps={animatedProps} fill={color} r="3" testID="blinkingDot" />
+      <AnimatedCircle animatedProps={animatedProps} fill={color} r={radius} testID="blinkingDot" />
       <AnimatedCircle animatedProps={animationProps} fill={color} />
     </>
   );

src/components/Graph/index.tsx

@@ -48,13 +48,20 @@ const ReanimatedGraph = forwardRef<ReanimatedGraphPublicMethods, ReanimatedGraph
   yAxisLegendQuantity = AXIS_LEGEND_QUANTITY,
   showExtremeValues = true,
   showBlinkingDot = false,
+  blinkingDotRadius = 3,
+  blinkingDotExpansion = 10,
   showSelectionDot = true,
+  selectionDotRadius = 4,
+  selectionDotExpansion = 10,
   selectionLines = 'both',
   selectionLineColor = '#D4D4D4',
   gestureEnabled = true,
   containerStyle = {},
   graphStyle = {},
   textStyle = {},
+  strokeWidth = 2,
+  strokeLinecap = 'round',
+  strokeDasharray = [],
   renderYAxisLegend,
   renderXAxisLegend,
   renderExtremeValue,
@@ -221,7 +228,14 @@ const ReanimatedGraph = forwardRef<ReanimatedGraphPublicMethods, ReanimatedGraph
 
   const Graph = useMemo( () => (
     <GraphWrapper width={width} height={height} onLayout={onLayout} style={graphStyle}>
-      <GraphPath pathRef={pathRef} points={points} type={type} />
+      <GraphPath
+        pathRef={pathRef}
+        points={points}
+        type={type}
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeDasharray={strokeDasharray}
+      />
       <SelectionArea
         width={graphWidth}
         height={height}
@@ -230,6 +244,8 @@ const ReanimatedGraph = forwardRef<ReanimatedGraphPublicMethods, ReanimatedGraph
         selectionArea={selectionAreaValue}
         selectionAreaData={selectionAreaDataValue}
         showSelectionDot={showSelectionDot}
+        selectionDotRadius={selectionDotRadius}
+        selectionDotExpansion={selectionDotExpansion}
         selectionLines={selectionLines}
         selectionLineColor={selectionLineColor}
         color={colorValue}
@@ -238,7 +254,7 @@ const ReanimatedGraph = forwardRef<ReanimatedGraphPublicMethods, ReanimatedGraph
         data={data}
         gestureEnabled={gestureEnabled}
       />
-      <BlinkingDot show={showBlinkingDotValue} color={colorValue} points={points} />
+      <BlinkingDot show={showBlinkingDotValue} color={colorValue} points={points} radius={blinkingDotRadius} expansion={blinkingDotExpansion} />
       {showExtremeValues && (
       <Extremes
         width={graphWidth}

src/components/GraphPath/index.tsx

@@ -6,7 +6,7 @@ import { createPath } from '../../core/helpers/worklets';
 import { GraphPathProps } from '../../core/dto/graphPathDTO';
 import { MASK_ID } from '../../core/constants/data';
 
-const GraphPath: FC<GraphPathProps> = ( { pathRef, points, type } ) => {
+const GraphPath: FC<GraphPathProps> = ( { pathRef, points, type, strokeWidth, strokeLinecap, strokeDasharray } ) => {
 
   const animatedProps = useAnimatedProps( () => ( { d: createPath( points.value, type ) } ) );
 
@@ -17,8 +17,9 @@ const GraphPath: FC<GraphPathProps> = ( { pathRef, points, type } ) => {
         animatedProps={animatedProps}
         stroke="white"
         fill="transparent"
-        strokeWidth="2"
-        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        strokeLinecap={strokeLinecap}
+        strokeDasharray={strokeDasharray}
       />
     </Mask>
   );

src/components/SelectionArea/index.tsx

@@ -16,6 +16,8 @@ const SelectionArea: FC<SelectionAreaProps> = ( {
   selectionArea,
   selectionAreaData,
   showSelectionDot,
+  selectionDotRadius,
+  selectionDotExpansion,
   selectionLines,
   selectionLineColor,
   color,
@@ -122,8 +124,8 @@ const SelectionArea: FC<SelectionAreaProps> = ( {
       {showVertical && <AnimatedPath animatedProps={selectionVertical} stroke={selectionLineColor} strokeDasharray="4,4" />}
       {showSelectionDot && (
         <>
-          <AnimatedCircle animatedProps={animatedCircleProps} fill={color} r="3" />
-          <AnimatedCircle animatedProps={animatedCircleProps} fill={color} fillOpacity="0.1" r="12" />
+          <AnimatedCircle animatedProps={animatedCircleProps} fill={color} r={selectionDotRadius} />
+          <AnimatedCircle animatedProps={animatedCircleProps} fill={color} fillOpacity="0.1" r={selectionDotRadius + selectionDotExpansion} />
         </>
       )}
     </>

src/core/dto/blinkingDotDTO.ts

@@ -5,4 +5,6 @@ export interface BlinkingDotProps {
   show: SharedValue<ReanimatedGraphProps['showBlinkingDot']>,
   color: ReanimatedGraphProps['color'],
   points: SharedValue<PointData[]>,
+  radius: ReanimatedGraphProps['blinkingDotRadius'],
+  expansion: ReanimatedGraphProps['blinkingDotExpansion'],
 }

src/core/dto/graphDTO.ts

@@ -26,13 +26,21 @@ export interface ReanimatedGraphProps {
   yAxisLegendQuantity?: number,
   showExtremeValues?: boolean,
   showBlinkingDot?: boolean,
+  blinkingDotRadius?: number,
+  blinkingDotExpansion?: number,
   showSelectionDot?: boolean,
+  selectionDotRadius?: number,
+  selectionDotExpansion?: number,
   selectionLines?: 'horizontal' | 'vertical' | 'both' | 'none',
   selectionLineColor?: string,
   gestureEnabled?: boolean,
   containerStyle?: ViewProps['style'],
   graphStyle?: ViewProps['style'],
   textStyle?: TextProps['style'],
+  // stroke
+  strokeWidth?: number,
+  strokeLinecap?: 'butt' | 'round' | 'square',
+  strokeDasharray?: number[],
   // render functions
   renderXAxisLegend?: ( value: number, index: number ) => ReactNode | string | number,
   renderYAxisLegend?: ( value: number, index: number ) => ReactNode | string | number,

src/core/dto/graphPathDTO.ts

@@ -5,5 +5,7 @@ import { PointData } from './graphDTO';
 export interface GraphPathProps {
   pathRef: React.RefObject<Path>,
   points: SharedValue<PointData[]>,
-  type: 'line' | 'curve',
+  strokeWidth?: number,
+  strokeLinecap?: 'butt' | 'round' | 'square',
+  strokeDasharray?: number[],
 }

src/core/dto/selectionAreaDTO.ts

@@ -10,6 +10,8 @@ export interface SelectionAreaProps {
   selectionArea: SharedValue<ReanimatedGraphProps['selectionArea']>,
   selectionAreaData: SharedValue<ReanimatedGraphProps['selectionAreaData']>,
   showSelectionDot: ReanimatedGraphProps['showSelectionDot'],
+  selectionDotRadius: ReanimatedGraphProps['selectionDotRadius'],
+  selectionDotExpansion: ReanimatedGraphProps['selectionDotExpansion'],
   selectionLines: ReanimatedGraphProps['selectionLines'],
   selectionLineColor: ReanimatedGraphProps['selectionLineColor'],
   color: ReanimatedGraphProps['color'],