Recharts
Vibe charts for moments and journals were created using Recharts
In order to create the graphs, filters, and display the moments, we have a main component that sets the state using React Hooks. We fetch all journals and moments to use the vibe data to create the graph where the y axis is the vibe value and the x axis is time. When a user hovers over the various data points in the graph, the appropriate moment or journal entry appears as a result of setting state via the custom tooltip that appears in the graph
Once that state has been set, we populate the reusable single moment or journal entry component with the new content and display it to the user.
Filters work by adjusting the date in the query to Supabase when initially fetching moments or journal entries. Adjusting filters resets the selected moment or journal entry in case the user filters to a time period where that moment or journal entry would not be available (e.g., user selects a moment from 1 year ago, but sets the filter for 7 days ago, the moment will no longer appear at the bottom of the screen.
To construct the charts, we needed to pass in the data from moments or journals depending on the filter, use the appropriate key, and create a tooltip that would allow us to also use React Hooks from within it.
In order to use the tool tip to render the appropriate moment or journal, we use the custom tooltip function along with the datatype detector to determine if we are using moments or journals when rendering the associated moment
Within the code above, you'll notice a "setMoment" and a "setJournal" functionality - this is key to setting the specific moment or journal contents that will be passed through this component to the single moment or journal entry component and used to render the appropriate content.
One key caveat: the x axis displays the data type as whatever it is presented, as a workaround to cleaning up the data and potentially having issues within a responsive design, we decided to simply show the values over "time" as opposed to displaying specific times on the x axis.
In the code, as well, you'll notice there is no explicit y axis. This is because the dataKey is specified as "vibe" which is defaulted to the Y value. For UI purposes, we needed to use Chakra components to contain the graph and manually label the unmarked Y axis as "vibe" (see initial image)