feat: graph events #84
Conversation
Support for graph events added.
| ### `EventTooltipComponent` | ||
| An additional event component that is rendered if the `SelectionDot` overlaps an `Event`. | ||
|
|
||
| ### `onEventHover` |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
The library does not work with any tap gestures so far. The only user interaction so far is created by the pan gesture which is also the gesture that enables the new event functionality of this PR. I would prefer to not add this functionality to not make the PR too big. The onPressEvent could be added to the follow-up PR if needed.
| ### `EventComponent` | ||
| A component that is used to render an event. | ||
|
|
||
| ### `EventTooltipComponent` |
There was a problem hiding this comment.
Please create some default component EventTooltip and link it here as example (same asi SelectionDot)
| An array of events to be marked in the graph. The position is calculated based on the `date` property of each event relatively to `points` of the graph. | ||
|
|
||
| ### `EventComponent` | ||
| A component that is used to render an event. |
There was a problem hiding this comment.
Link EventComponent file here as example (same as SelectionDot)
README.md
Outdated
| Example: | ||
|
|
||
| <img src="./img/events.png" align="right" height="200" /> |
There was a problem hiding this comment.
nit: Can you make default color of event different that line? Maybe some kind of simple fade out gradient of dot or something like that will make it really nice.
There was a problem hiding this comment.
The style of the default event component was adjusted to appear more contrasting. 5ff9fd7
src/hooks/useEventTooltipProps.ts
Outdated
| onEventHover?: () => void | ||
| ) => { | ||
| const [activeEventIndex, setActiveEventIndex] = useState<number | null>(null) | ||
| const handleDisplayEventTooltip = ( |
|
Oh wow, this is pretty cool. CC @chrispader |
| } | ||
|
|
||
| export const LineGraph = React.memo(LineGraphImpl) | ||
| export const LineGraph = React.memo(LineGraphImpl) as typeof LineGraphImpl |
|
I'll try to review this during this week! 👍 |
|
@chrispader Any progress with the review? 🙏🙂 |
|
hey guys, any updates on this? |
|
Will look into this tmrw! |
5 participants
Description
This pull request introduces support for graph events in the application. The main goal is to enhance the user experience by providing the ability to render events in the line graph and highlight important interactions.
To achieve this, the AnimatedLineGraph component accepts four new props
events,EventComponent,EventTooltipComponentandonEventHover.eventsis an array of objects that represents each individual interaction and its associated metadata. Each object in this array includes a dateproperty, which is used to calculate the coordinates of the event on the graph.EventComponentis a component that receives the coordinates and metadata of each event and renders it within the graph.EventTooltipComponentoptional element that is rendered when hovering over an EventComponent element.onEventHoveris a callback that triggers hovering over anEventComponentallowing for additional actions.Demo
Screen.Recording.2023-07-17.at.7.46.52.mov