Create activity graph for homepage

[calisio]

Overview

In the dashboard, we need a graph that displays the student’s activity across the most recent week.

Relevant files

Dashboard.tsx is where this component should live, but feel free to make a new component to actually build the graph and store it within /Components.

Backend data

The data that is needed for this graph is returned in the call to /api/users/${user.id}/dashboard , already implemented in Dashboard.tsx. The array of activity can be accessed through data.week_activity, which returns an array of recent activity objects (containing a date and a delta). An example of the data returned is the following:

week_activity: [
    {date: '2024-06-13T00:00:00Z', delta: 52},
    {date: '2024-06-14T00:00:00Z', delta: 59}, 
    {date: '2024-06-15T00:00:00Z', delta: 44},
    {date: '2024-06-16T00:00:00Z', delta: 42}
]

delta is in seconds, so you will need to call the convertSeconds function.

Other information

Feel free to use a library for this ticket. We have someone on our team who has worked with Recharts which might be a good solution to this. We will need this library to use for future graphs also, so if the library also contained bar graphs and pie charts that can be customizable to our theme, that would be great.

We have all of our new frontend mocked up in Figma files. Here is a link to the dashboard for reference when building out this graph. Colors should be linked, but if you are confused on exactly what it should be please check the General Components file.

[c0deek]

Hi, I would like to contribute to develop this feature using Recharts.

I have the following doubts regarding the feature:

• should the graph only plot the current week or the previous 5 days (e.g. if today is Wednesday, should the graph be from (Monday to Sunday ) or (Prev Wed to today i.e. Wed)
• does the values on Y-Axis represent the hours?
• certain data points on the graph are somewhere between two days and not exactly corresponding to one of them. What does it represent? (in the above graph does the data point in red circle represent some specific time on wednesday? or should we plot it corresponding to wednesday itself)

[calisio]

Hi, thank you for taking on this feature!

1. It should be for the previous 7 days, so if today is Wednesday, it should be from today to last Wednesday.

2. For now, lets make the y axis scale to every 30 minutes (ie 1 tick is 30 minutes, so 2 ticks would be 1 hour). You only have to display every whole number as shown in the image below. I have altered the design a bit for simplicity sake.

   

3. The time delta returned is the total for the 24 hour day, so there will be no dots in between days. Sorry for the confusion in the original design!

Please let me know if you have any more questions!

[c0deek]

Thanks for clearing the points. I had one more doubt, does the data.week_activity from /api/users/${user.id}/dashboard return the data for only one week or do we have to filter it out. Also, is there any way to get some sample data after runnning ./build dev -f, the frontend doesn't seem to be populated with data at the moment.

[calisio]

It returns it only for one week (the past 7 days). It will return an array of the days that have activity, but if the day does not have activity then it will not be in the array. So, for example, for this past week it might only return an array something like this: week_activity: [ {date: '2024-06-19T00:00:00Z', delta: 520}, {date: '2024-06-22T00:00:00Z', delta: 590} ] so you would have to make a graph with data points at 0 for 6/17, 6/18, 6/20, 6/21, 6/23 and then the corresponding minutes for 6/19 and 6/22. Yes, there is a way to seed some data, you just need to run ./build dev -f and then open a new terminal and run ./build seed. If you need to clear the database, run ./build migrate-fresh and then populate it with ./build seed. Happy to help if anything else comes up!

[c0deek]

I'm unable to login in the dashboard. As soon as I enter the credentials (SuperAdmin:ChangeMe!). I am greeted with the following message:

Unexpected Application Error!
Objects are not valid as a React child (found: object with keys {id, organization_id, type, expires_at, issued_at, request_url, ui, created_at, updated_at, refresh, requested_aal, state}). If you meant to render a collection of children, use an array instead.
Error: Objects are not valid as a React child (found: object with keys {id, organization_id, type, expires_at, issued_at, request_url, ui, created_at, updated_at, refresh, requested_aal, state}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:9934:17)
    at reconcileChildFibers2 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:10564:15)
    at reconcileChildren (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:14290:37)
    at updateHostComponent (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:14807:11)
    at beginWork (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:15935:22)
    at beginWork$1 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:19753:22)
    at performUnitOfWork (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:19198:20)
    at workLoopSync (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:19137:13)
    at renderRootSync (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:19116:15)
    at recoverFromConcurrentError (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-6BKLQ22S.js?v=0941003d:18736:28)
💿 Hey developer 👋

You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.

[calisio]

Gotcha, ya this is an error that we have been getting recently which should be fixed in an upcoming PR. Are you using dev or prod? Either way, terminate the current process and try running docker compose -f docker-compose.yml -f config/docker-compose.fe-dev.yml down --volumes, then run docker compose -f docker-compose.yml -f config/docker-compose.fe-dev.yml up --build. If you are using prod, terminate that and then run ./build prod. Then, when you visit 127.0.0.1, clear your cookies for that page, and then try logging in again. This should fix the problem, but if it doesn't please do let me know!

[c0deek]

This works, thanks.

[calisio]

Hi @c0deek! I just wanted to check in on the status of this ticket. #293 should have integrated Recharts into the repo for the admin dashboard, and MonthActivityChart.tsx should give good insight on how to implement this. If you are no longer interested in this ticket, please let me know ASAP so I can implement it! Ideally we will have this done and merged by the end of the week.