Add reusable TimeBased chart with transformer and tests

[dhyana6466]

Description

This PR adds a reusable TimeBased chart component to visualize time-based metrics collected from the Python data collection script. The chart is designed to be configurable through props so it can be reused across different pages, including the Home page (organization-wide averages) and the Team Stats page (filtered by repository or user).
A utility function was added to transform the raw test_data.json into a chart-friendly format, keeping data logic separate from rendering. Unit tests were also added to verify that the chart renders correctly for the required use cases.

Fixes #86

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?

• This change was tested using unit tests and manual verification in the browser.
• The TimeBased chart was rendered using test_data.json and verified for correct display on the Home page.

Test Configuration:

• Language Version: JavaScript
• Webpage (if applicable): Home page

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]

Would you be able to use the PR template found in the .github folder? You can just edit your response so you dont need to completely resubmit your PR

[hcaballero2]

hi @dhyana6466 would you be able to use the PR template? it is located in the .github folder

[hcaballero2]

Hi @dhyana6466 , would you be able to test/show the output when both Time To Merge and Time To Close are displayed?

[dhyana6466]

Hi @dhyana6466 , would you be able to test/show the output when both Time To Merge and Time To Close are displayed?

DONE!!!

[hcaballero2]

hi @dhyana6466 i added some further comments to the code of changes that needed to be made and pushed my changes. we will also work on this together in class on monday :)

[dhyana6466]

hi @dhyana6466 i added some further comments to the code of changes that needed to be made and pushed my changes. we will also work on this together in class on monday :)

Hi! I’ve already worked through the comments you added and pushed the updates. Happy to review everything together in class on Monday

[hcaballero2]

Thank you @dhyana6466 , I really appreciate your responsiveness and hard work on this issue :)

[hcaballero2]

Hi @dhyana6466 thank you for your edits so far! I really appreciate how modular you have made the code that is exactly what I was looking for! One last thing (I SWEAR!!!!) before merging, would you be able to edit the TimeBased.jsx so it follows a similar logic style to VolumeBased.jsx? If there is an alternative way you would like to approach TimeBased.jsx please provide some reasoning/resources and we can discuss!

[dhyana6466]

Hi @dhyana6466 thank you for your edits so far! I really appreciate how modular you have made the code that is exactly what I was looking for! One last thing (I SWEAR!!!!) before merging, would you be able to edit the TimeBased.jsx so it follows a similar logic style to VolumeBased.jsx? If there is an alternative way you would like to approach TimeBased.jsx please provide some reasoning/resources and we can discuss!

Hi @hcaballero2 — I’ve updated TimeBased.jsx so it now follows the same structural logic as VolumeCharts (internal title handling, loading state, consistent prop pattern, and matching container styling). Since TimeBased uses Recharts and VolumeCharts uses Chart.js, I aligned the architectural flow and organization rather than the library-specific configuration. Let me know if you’d like any further adjustments!

[hcaballero2]

Great work! Thank you for your edits :)