Implement Dashboard Home Page

[ggondela1419]

Description

This PR implements the Dashboard Home Page by utilizing the current chart and contributor components. The Home page now displays organizational-level metrics (like issues, PRs, and commits) along with time-based metrics (such as average time to close issues and merge PRs) using aggregated data in test_data.json. I also added the Top Contributors/Top Repositories component to the layout for a quick overview of activity. The goal was to maintain a clean and organized page without getting into the specifics of individual repos or users, so that additional metrics can be added later on if necessary. This update relies on: TransformVolumeData, TransformTimeData, TimeBased chart component, and TopContributorsRepos component.

Fixes #103

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

I tested the Home page locally by starting up the development server and verifying that:

• The page loads smoothly without any errors.
• The Volume chart shows the averages at the organizational level.
• Both TimeBased charts display correctly.
• The Top Contributors/Top Repositories component works fine (even if the event data is empty in test_data.json).
• There are no errors in the console of the browser.

Steps to Reproduce:

1. Check out the branch feature/issue-103-Dashboard-Home-Page
2. Go to the Frontend directory
3. Run npm install
4. Execute npm run dev
5. Open the local development URL and go to the Home page

• Test A: Confirmed that the charts render with organizational-level data
• Test B: Confirmed there are no console errors and the layout looks good

Test Configuration:

• Language Version: Node (local environment), React + Vite frontend
• Webpage (if applicable): Local development server (npm run dev)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Screenshot of Output

[hcaballero2]

Hi @ggondela1419 great job! I really appreciate the fact that you made the home page as modular as possible that is exactly what we are wanting to continue with. Before being able to merge your PR I had a question and an edit if possible: is there a reason there are two Org Level Time Based charts? And if you could create a stylings document so it matches closer to the mockup we created you will be all set to be merged! Thank you for your work on this issue!

[hcaballero2]

@dhyana6466 great job reviewing this issue! I thought all your comments were really insightful :)

[ggondela1419]

Hi @hcaballero2 thanks for looking at this PR! The two time-based charts were already there when I updated my branch from the main branch. In the code, it says that one of them shows the average time to close issues and the other shows the average time to merge PRs. I decided to keep both of them since they show separate time measurements, but I can change the layout or remove one if you would prefer that. I will start working on a styling document to align better with the mockup.

[hcaballero2]

Hi @hcaballero2 thanks for looking at this PR! The two time-based charts were already there when I updated my branch from the main branch. In the code, it says that one of them shows the average time to close issues and the other shows the average time to merge PRs. I decided to keep both of them since they show separate time measurements, but I can change the layout or remove one if you would prefer that. I will start working on a styling document to align better with the mockup.

Preferably the Timebased chart has only one chart and the volume based on is also displayed. So the average time to merge PRs and average time to close issues should be on the same chart and a volume based chart should also be displayed. This may have been due to an issue when merging the time based chart, so if you run into any issues please let me know!

[ggondela1419]

I combined the average time it takes to merge PRs and the average time to close issues into one time-based chart, while keeping the volume chart visible. I also cleaned up the styling to ensure both charts look consistent. I also included a picture of what the Dashboard Home Page looks like now after making these changes.

[hcaballero2]

Great work!