Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Add smoothing values as props & Fix inaccurate linear value points #55

Merged
merged 2 commits into from
Jan 23, 2023
Merged

fix: Add smoothing values as props & Fix inaccurate linear value points #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a546d0
fix: Add smoothing values as props & Fix inaccurate linear value points
bored-yuns Dec 6, 2022
7414a37
fix: Enable android gesture handler and adjust hold duration for grap…
bored-yuns Dec 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 89 additions & 84 deletions src/AnimatedLineGraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import Reanimated, {
withDelay,
} from 'react-native-reanimated'
import { getSixDigitHex } from './utils/getSixDigitHex'
import { GestureDetector } from 'react-native-gesture-handler'
import { GestureHandlerRootView, GestureDetector } from 'react-native-gesture-handler'
import { usePanGesture } from './hooks/usePanGesture'
import { getYForX } from './GetYForX'
import { hexToRgba } from './utils/hexToRgba'
Expand All @@ -56,6 +56,8 @@ const ReanimatedView = Reanimated.View as any
export function AnimatedLineGraph({
points,
color,
smoothing = 0.2,
holdDuration = 300,
gradientFillColors,
lineThickness = 3,
range,
Expand All @@ -79,7 +81,7 @@ export function AnimatedLineGraph({
const [height, setHeight] = useState(0)
const interpolateProgress = useValue(0)

const { gesture, isActive, x } = usePanGesture({ holdDuration: 300 })
const { gesture, isActive, x } = usePanGesture({ holdDuration })
const circleX = useValue(0)
const circleY = useValue(0)
const pathEnd = useValue(0)
Expand Down Expand Up @@ -190,6 +192,7 @@ export function AnimatedLineGraph({
const createGraphPathProps = {
points: points,
range: pathRange,
smoothing: smoothing,
horizontalPadding: horizontalPadding,
verticalPadding: verticalPadding,
canvasHeight: height,
Expand Down Expand Up @@ -458,101 +461,103 @@ export function AnimatedLineGraph({
)

return (
<View {...props}>
<GestureDetector gesture={enablePanGesture ? gesture : undefined}>
<ReanimatedView style={[styles.container, styles.axisLabelContainer]}>
{/* Top Label (max price) */}
{TopAxisLabel != null && (
<View style={styles.axisRow}>
<TopAxisLabel />
</View>
)}

{/* Actual Skia Graph */}
<View style={styles.container} onLayout={onLayout}>
<Canvas style={styles.svg}>
<Group>
<Path
// @ts-ignore
path={path}
strokeWidth={lineThickness}
style="stroke"
strokeJoin="round"
strokeCap="round"
>
<LinearGradient
start={vec(0, 0)}
end={vec(width, 0)}
colors={gradientColors}
positions={positions}
/>
</Path>

{shouldFillGradient && (
<GestureHandlerRootView>
<View {...props}>
<GestureDetector gesture={enablePanGesture ? gesture : undefined}>
<ReanimatedView style={[styles.container, styles.axisLabelContainer]}>
{/* Top Label (max price) */}
{TopAxisLabel != null && (
<View style={styles.axisRow}>
<TopAxisLabel />
</View>
)}

{/* Actual Skia Graph */}
<View style={styles.container} onLayout={onLayout}>
<Canvas style={styles.svg}>
<Group>
<Path
// @ts-ignore
path={gradientPath}
path={path}
strokeWidth={lineThickness}
style="stroke"
strokeJoin="round"
strokeCap="round"
>
<LinearGradient
start={vec(0, 0)}
end={vec(0, height)}
colors={gradientFillColors}
end={vec(width, 0)}
colors={gradientColors}
positions={positions}
/>
</Path>

{shouldFillGradient && (
<Path
// @ts-ignore
path={gradientPath}
>
<LinearGradient
start={vec(0, 0)}
end={vec(0, height)}
colors={gradientFillColors}
/>
</Path>
)}
</Group>

{SelectionDot != null && (
<SelectionDot
isActive={isActive}
color={color}
lineThickness={lineThickness}
circleX={circleX}
circleY={circleY}
/>
)}
</Group>

{SelectionDot != null && (
<SelectionDot
isActive={isActive}
color={color}
lineThickness={lineThickness}
circleX={circleX}
circleY={circleY}
/>
)}

{enableIndicator && (
<Group>
{indicatorPulsating && (

{enableIndicator && (
<Group>
{indicatorPulsating && (
<Circle
cx={indicatorX}
cy={indicatorY}
r={indicatorPulseRadius}
opacity={indicatorPulseOpacity}
color={indicatorPulseColor}
style="fill"
/>
)}

<Circle
cx={indicatorX}
cy={indicatorY}
r={indicatorBorderRadius}
color={'#ffffff'}
>
<Shadow dx={2} dy={2} color="rgba(0,0,0,0.2)" blur={4} />
</Circle>
<Circle
cx={indicatorX}
cy={indicatorY}
r={indicatorPulseRadius}
opacity={indicatorPulseOpacity}
color={indicatorPulseColor}
style="fill"
r={indicatorRadius}
color={color}
/>
)}

<Circle
cx={indicatorX}
cy={indicatorY}
r={indicatorBorderRadius}
color={'#ffffff'}
>
<Shadow dx={2} dy={2} color="rgba(0,0,0,0.2)" blur={4} />
</Circle>
<Circle
cx={indicatorX}
cy={indicatorY}
r={indicatorRadius}
color={color}
/>
</Group>
)}
</Canvas>
</View>

{/* Bottom Label (min price) */}
{BottomAxisLabel != null && (
<View style={styles.axisRow}>
<BottomAxisLabel />
</Group>
)}
</Canvas>
</View>
)}
</ReanimatedView>
</GestureDetector>
</View>

{/* Bottom Label (min price) */}
{BottomAxisLabel != null && (
<View style={styles.axisRow}>
<BottomAxisLabel />
</View>
)}
</ReanimatedView>
</GestureDetector>
</View>
</GestureHandlerRootView>
)
}

Expand Down
4 changes: 3 additions & 1 deletion src/CreateGraphPath.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,11 +161,13 @@ function createGraphPathBase({
const actualWidth = width - 2 * horizontalPadding
const actualHeight = height - 2 * verticalPadding

const areSameValues = range.y.min === range.y.max;

const getGraphPoint = (point: GraphPoint): Vector => {
const x =
actualWidth * pixelFactorX(point.date, range.x.min, range.x.max) +
horizontalPadding
const y =
const y = areSameValues ? actualHeight / 2 + verticalPadding :
actualHeight -
actualHeight * pixelFactorY(point.value, range.y.min, range.y.max) +
verticalPadding
Expand Down
8 changes: 8 additions & 0 deletions src/LineGraphProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ interface BaseLineGraphProps extends ViewProps {
* Color of the graph line (path)
*/
color: string
/**
* Smoothing value of the graph (Radius of the edge points)
*/
smoothing: number
/**
* Hold duration in "ms" for gesture activation
*/
holdDuration: number
/**
* (Optional) Colors for the fill gradient below the graph line
*/
Expand Down