diff --git a/src/AnimatedLineGraph.tsx b/src/AnimatedLineGraph.tsx index bee225a..6f32cbd 100644 --- a/src/AnimatedLineGraph.tsx +++ b/src/AnimatedLineGraph.tsx @@ -71,6 +71,7 @@ export function AnimatedLineGraph({ verticalPadding = lineThickness, TopAxisLabel, BottomAxisLabel, + checkExactPoints = true, ...props }: AnimatedLineGraphProps): React.ReactElement { const [width, setWidth] = useState(0) @@ -196,6 +197,7 @@ export function AnimatedLineGraph({ verticalPadding, canvasHeight: height, canvasWidth: width, + checkExactPoints, } if (shouldFillGradient) { diff --git a/src/CreateGraphPath.ts b/src/CreateGraphPath.ts index 67e9a2e..fdc75f6 100644 --- a/src/CreateGraphPath.ts +++ b/src/CreateGraphPath.ts @@ -43,6 +43,12 @@ type GraphPathConfig = { * Range of the graph's x and y-axis */ range: GraphPathRange + /** + * Boolean flag to check if the point is exact. + * If true, only exact points will be drawn. If false, all points will be drawn. + * Default is true. + */ + checkExactPoints: boolean } type GraphPathConfigWithGradient = GraphPathConfig & { @@ -140,6 +146,7 @@ function createGraphPathBase({ canvasHeight: height, canvasWidth: width, shouldFillGradient, + checkExactPoints, }: GraphPathConfigWithGradient | GraphPathConfigWithoutGradient): | SkPath | GraphPathWithGradient { @@ -181,7 +188,7 @@ function createGraphPathBase({ if (index === graphData.length - 1 && pixel !== endX) continue - if (index !== 0 && index !== graphData.length - 1) { + if (checkExactPoints && index !== 0 && index !== graphData.length - 1) { // Only draw point, when the point is exact const exactPointX = getXInRange(drawingWidth, graphData[index]!.date, range.x) + diff --git a/src/LineGraphProps.ts b/src/LineGraphProps.ts index 21e147f..a469c59 100644 --- a/src/LineGraphProps.ts +++ b/src/LineGraphProps.ts @@ -47,6 +47,12 @@ interface BaseLineGraphProps extends ViewProps { * Enable the Fade-In Gradient Effect at the beginning of the Graph */ enableFadeInMask?: boolean + /** + * Boolean flag to check if the point is exact. + * If true, only exact points will be drawn. If false, all points will be drawn. + * Default is true. + */ + checkExactPoints?: boolean } export type StaticLineGraphProps = BaseLineGraphProps & { diff --git a/src/StaticLineGraph.tsx b/src/StaticLineGraph.tsx index 5790400..97b8b5a 100644 --- a/src/StaticLineGraph.tsx +++ b/src/StaticLineGraph.tsx @@ -17,6 +17,7 @@ export function StaticLineGraph({ lineThickness = 3, enableFadeInMask, style, + checkExactPoints = true, ...props }: StaticLineGraphProps): React.ReactElement { const [width, setWidth] = useState(0) @@ -49,8 +50,9 @@ export function StaticLineGraph({ canvasWidth: width, horizontalPadding: lineThickness, verticalPadding: lineThickness, + checkExactPoints, }), - [height, lineThickness, pathRange, pointsInRange, width] + [checkExactPoints, height, lineThickness, pathRange, pointsInRange, width] ) const gradientColors = useMemo(