Dynamic Metric Visualization Dropdowns & Health Score Display #174
Description
Description
Build the frontend UI components to display the global repository health score as a standalone element, and implement dynamic chart widgets with dropdown menus that allow users to select and view specific metrics from their active list.
User Story
As a dashboard user, I want to see the overall health score at a glance and use dropdown menus to easily swap between different visual graphs, so I can analyze my assigned and custom metrics without leaving the main dashboard.
Acceptance Criteria
- The overall repository health score is rendered as a distinct, persistent UI element on the dashboard.
- The dashboard includes chart widgets equipped with dropdown menus.
- The dropdown menus dynamically populate with the specific metrics available to the viewing user (both Tech Lead-assigned metrics and Developer-chosen metrics).
- Selecting a metric from the dropdown instantly updates the chart to display the correct data visual for that specific metric.
- The widget includes a dynamic text block that updates to explain what the currently selected metric means and how it is tracked.
Implementation Notes
- This is a great opportunity to utilize React state (useState) to manage the currently selected dropdown value and pass that state down to your charting component.
- Ensure the charting library (e.g., Recharts, Chart.js) is configured to smoothly re-render and animate when the data payload changes via the dropdown selection.
- Collaborate with another team member to map the GitHub API response to the dropdown UI.
- You need to meet via Zoom or in person at least once, or be able to provide substantive evidence of your collaboration within Slack. You will be asked to summarize how you worked together/what method you used during the PR
Testing Notes
- Verify that the dropdown list accurately reflects a combined list of the user's assigned and custom metrics.
- Click through multiple different metrics in the dropdown and verify the chart and the explanatory text update correctly each time without requiring a page refresh.
- Ensure the standalone health score does not re-render or disappear when interacting with the metric dropdowns.
Dependencies
- Relies on the frontend mock data/UI separation established in Issue Developer Custom Metric Tracking #165.
- Relies on the backend data payload from Issue Dynamic Health Score Calculation & Documentation #173
- use mock data in the meantime
Resources
- Velocity: Work completed per sprint
- WIP (Work in Progress): How much work is active at once
- Code Coverage: Percentage of code covered by tests
- Defect Rate: Bugs discovered per sprint or per feature
- Goal Achievement: Sprint goals met vs. planned
- Burndown: Progress toward sprint completion over time
- Team Satisfaction: How the team feels about their work and collaboration
- Blocked Work: Tasks waiting on dependencies or decisions
- Customer Satisfaction: Client feedback and sentiment
- Time to Market: How long features take from idea to deployment