diff --git a/README.md b/README.md index a2685fc..3910b75 100644 --- a/README.md +++ b/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. diff --git a/src/components/BlinkingDot/index.tsx b/src/components/BlinkingDot/index.tsx index 66163b1..fd8c744 100644 --- a/src/components/BlinkingDot/index.tsx +++ b/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 = ( { show, color, points } ) => { +const BlinkingDot: FC = ( { show, color, points, radius, expansion } ) => { const animation = useSharedValue( 0 ); @@ -26,7 +26,7 @@ const BlinkingDot: FC = ( { 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 = ( { show, color, points } ) => { return ( <> - + ); diff --git a/src/components/Graph/index.tsx b/src/components/Graph/index.tsx index a787de8..d9fcefc 100644 --- a/src/components/Graph/index.tsx +++ b/src/components/Graph/index.tsx @@ -48,13 +48,20 @@ const ReanimatedGraph = forwardRef ( - + - + {showExtremeValues && ( = ( { pathRef, points, type } ) => { +const GraphPath: FC = ( { pathRef, points, type, strokeWidth, strokeLinecap, strokeDasharray } ) => { const animatedProps = useAnimatedProps( () => ( { d: createPath( points.value, type ) } ) ); @@ -17,8 +17,9 @@ const GraphPath: FC = ( { pathRef, points, type } ) => { animatedProps={animatedProps} stroke="white" fill="transparent" - strokeWidth="2" - strokeLinecap="round" + strokeWidth={strokeWidth} + strokeLinecap={strokeLinecap} + strokeDasharray={strokeDasharray} /> ); diff --git a/src/components/SelectionArea/index.tsx b/src/components/SelectionArea/index.tsx index 9af18bf..b1328d1 100644 --- a/src/components/SelectionArea/index.tsx +++ b/src/components/SelectionArea/index.tsx @@ -16,6 +16,8 @@ const SelectionArea: FC = ( { selectionArea, selectionAreaData, showSelectionDot, + selectionDotRadius, + selectionDotExpansion, selectionLines, selectionLineColor, color, @@ -122,8 +124,8 @@ const SelectionArea: FC = ( { {showVertical && } {showSelectionDot && ( <> - - + + )} diff --git a/src/core/dto/blinkingDotDTO.ts b/src/core/dto/blinkingDotDTO.ts index ac470ab..704c816 100644 --- a/src/core/dto/blinkingDotDTO.ts +++ b/src/core/dto/blinkingDotDTO.ts @@ -5,4 +5,6 @@ export interface BlinkingDotProps { show: SharedValue, color: ReanimatedGraphProps['color'], points: SharedValue, + radius: ReanimatedGraphProps['blinkingDotRadius'], + expansion: ReanimatedGraphProps['blinkingDotExpansion'], } diff --git a/src/core/dto/graphDTO.ts b/src/core/dto/graphDTO.ts index 2b6b2be..2a7b99c 100644 --- a/src/core/dto/graphDTO.ts +++ b/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, diff --git a/src/core/dto/graphPathDTO.ts b/src/core/dto/graphPathDTO.ts index 8bbe77c..27d7c3e 100644 --- a/src/core/dto/graphPathDTO.ts +++ b/src/core/dto/graphPathDTO.ts @@ -5,5 +5,7 @@ import { PointData } from './graphDTO'; export interface GraphPathProps { pathRef: React.RefObject, points: SharedValue, - type: 'line' | 'curve', + strokeWidth?: number, + strokeLinecap?: 'butt' | 'round' | 'square', + strokeDasharray?: number[], } diff --git a/src/core/dto/selectionAreaDTO.ts b/src/core/dto/selectionAreaDTO.ts index 2b13de9..600b94d 100644 --- a/src/core/dto/selectionAreaDTO.ts +++ b/src/core/dto/selectionAreaDTO.ts @@ -10,6 +10,8 @@ export interface SelectionAreaProps { selectionArea: SharedValue, selectionAreaData: SharedValue, showSelectionDot: ReanimatedGraphProps['showSelectionDot'], + selectionDotRadius: ReanimatedGraphProps['selectionDotRadius'], + selectionDotExpansion: ReanimatedGraphProps['selectionDotExpansion'], selectionLines: ReanimatedGraphProps['selectionLines'], selectionLineColor: ReanimatedGraphProps['selectionLineColor'], color: ReanimatedGraphProps['color'],