[Sprint 6d]: Sprucing Up App w/ Graphs & Tables 📉 - Steven & Will

[danglorioso]

💻 Summary

In this sprint, you will add graph components to the dashboard and school profile pages to show meaningful data about the overall competition or a specific school at a quick glance. The graphs that you’ll add to these pages will use fixed parameters, as opposed to the charts page that allows users to customize their view.

Goals of this sprint:

• Reuse existing components in new locations and dynamically apply filters to charts to make school-specific figures.
• Interact with parameterized URLs to link users to pre-customized configurations of charts.
• Round out the user experience by adding charts to high-traffic pages, helping users see high-level data at a glance.

⚙️ Setup

Before starting:

1. PLEASE: **Pull the latest changes from main: git pull
2. Create a new branch for this sprint.
3. Install dependencies.
4. Run the dev server and verify the site builds.
5. Confirm everything runs.
   If you experience problems, check your .env is up to date!

🧭 Implementation

Step 1: Add charts to dashboard

• Right now, the dashboard is looking a little sad and could use a bit of love.
• Add overview line and bar graphs below the high-level statistics as shown on the Figma.
• Charts should include: total number of projects over the past 5 years, total number of schools over the past 5 years – both shown as line charts.

Step 2: Add year selector to all school profile pages

• Since many of the states on the school profile pages are year related, add a year selector from the top with a dropdown of all of the years that a given school participated. Then, populate the statistics on the page with the appropriate figures for that school’s participation for that year.

Step 3: Add charts to school profile

• Each school has their own school profile page (e.g. `/schools/concord-academy). Currently, these pages only show high-level statistics for each of these schools. We would like to add graphs and tables to each of the pages to display more useful data about a specific school.
• Using the existing bar and line charts, reuse the chart components within this page. You can fix the graph to display data about a given school by applying filters on that specific school just like you would on the charts page.
• See the Figma for the exact figures to add to this page.
• Finally, add a “View more →” text link to each chart so when a user clicks on a chart on the school profile page, they are redirected to the charts page with the appropriate filters applied (see the parameterized URL). The user should see the same view as before on the charts page. This allows them to modify the filters and view more dynamically.

Step 4: Add data table to school profile

• As shown on the Figma, add a data table at the bottom of the school profile page with the raw data for that school’s projects in the selected year.
• Reuse the table component used from the schools page for consistency.

Step 5: Add growth/decline arrows to schools table

• An important metric when analyzing a school’s participation is whether their participation rates have increased or decreased over the previous year. We want to add green/red up/down arrows to each of the count columns (# students, # teachers, # projects) to give a quick view of how these categories have changed over the previous year.
• Check out the schools table on the Figma. You’ll see these red and green arrows, along with a percentage. Add this to the existing schools table for those three columns.
• To calculate this percentage, use a simple year-over-year percentage change formula comparing the currently displayed year to its previous year. If a previous year does not exist for a school (this is the school’s first year), then display the change as a single horizontal dash in gray.
• For schools with exactly no change over the previous year, display a gray line horizontal dash with a 0% change.
• Add these percentages and arrows to both the existing schools table, as well as new tables you added to the bottom of the school profile page.

🙌 Acceptance Criteria

• Dashboard displays meaningful charts that are fixed (non-editable) and link to a chart with the same configuration in Charts
• Year selected added to school profile page, populate profile with relevant data for a specific school for the selected year
• Dropdown options for year selector only show the years that a specific school participated
• Charts for a specific school added to school profile pages and display data relevant to that specific school over time.
• Charts on school profile page link to charts with the same configuration in Charts.
• Table added to the bottom of school profile page displays raw data for a given school in that year
• School profile table shows up/down and percentage change over previous year for counts columns
• Schools table shows up/down and percentage change over previous year for counts columns
• Tested exceptions such as schools with no participation change between years or schools with only one year of participation
• UI matches Figma exactly
• Code runs locally without errors and builds successfully
• Merge via PR

⁉️ Questions

If you get stuck or have questions:

• DM Dan or Shayne on Slack
• Come to office hours or ask during a hack night
• Ask questions during team meetings – we’re here to help!

📝 Resources

• Figma
• Tailwind CSS
• shadcn/ui
• npm package manager