Initial version of Gradient Flow #130
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
components/FlowChart.tsx
Outdated
| import { View } from "react-native"; | ||
| import { Dimensions } from "react-native"; | ||
| import Svg, { Circle, Text, TSpan, Path } from "react-native-svg"; | ||
| import Svg, { Circle, Text, TSpan, Path, Defs, LinearGradient, Stop } from "react-native-svg"; |
There was a problem hiding this comment.
formatting for linting
components/FlowChart.tsx
Outdated
|
|
||
| // ===== Gradient + Progress Logic ===== | ||
| const flowDays = flowDataForCurrentMonth.length || 0; | ||
| const maxFlowLength = 6; |
There was a problem hiding this comment.
Should be in a constants file for others to use - const maxFlowLength = 6;
components/FlowChart.tsx
Outdated
| const visible = C * progress; | ||
| const dashOffset = 0; // makes arc grow right -> left | ||
|
|
||
| const tailLen = Math.min(C * 0.08, visible); |
There was a problem hiding this comment.
Consider making the 0.8 a const value for gradient
components/FlowChart.tsx
Outdated
| const tailOffset = C - visible; | ||
|
|
||
| const animatedDashProps = useAnimatedProps(() => ({ | ||
| strokeDasharray: [visible, C] as unknown as string | number[], |
There was a problem hiding this comment.
"As known as" bypasses type safety.
components/FlowChart.tsx
Outdated
| <Stop offset="25%" stopColor={FlowColors[1] ?? "#FA8072"} /> | ||
| <Stop offset="50%" stopColor={FlowColors[2] ?? "#FF0000"} /> | ||
| <Stop offset="75%" stopColor={FlowColors[3] ?? "#800020"} /> | ||
| <Stop offset="95%" stopColor="#c6a4dbff" /> |
There was a problem hiding this comment.
Why does the gradient end at 95% instead of 100%?
components/FlowChart.tsx
Outdated
| <Defs> | ||
| {/* Main flow gradient */} | ||
| <LinearGradient id="flowGradient" x1="100%" y1="0%" x2="0%" y2="100%"> | ||
| <Stop offset="0%" stopColor={FlowColors[0] ?? "#FFC0CB"} /> |
There was a problem hiding this comment.
You should use colors defined in other files or add your own const colors rather then hard coding them.
| stroke="url(#flowGradient)" | ||
| strokeWidth="9" | ||
| strokeLinecap="round" | ||
| animatedProps={animatedDashProps} |
There was a problem hiding this comment.
We need info for screen readers to process the gradient. See - https://reactnative.dev/docs/accessibility
hauolinalani
left a comment
hauolinalani
left a comment
There was a problem hiding this comment.
Looks good to me but would have Jonah look at it for final ok. Just make sure linting is all good :)
Build Reminder (for reviewers)
This PR requires a mobile build for both platforms
app.jsonversion has been updated and matches versioning formatActions->Manual EAS Expo Build->Run workflowdropdown -> Choose appropriate platform(s) ->Run workflow