Define new dashboard data charts

[rachelwhaley]

Overview

As an admin user, I want the dashboard to show key metrics in a chart visualization, so that I can easily see volunteer hours (or avg. volunteer hours) across brigades, per brigade, and per volunteer.

Dependency:

• Wireframes (Complete): #15 Link to Wireframes: https://www.figma.com/file/9c6pxjImN8MjHAZLH7zxYm/VRMS-Mocks?node-id=22881%3A2738

Action Items

• [x] Decide which metrics from below list should be shown in the chart. (See "Approved Metrics" section below)

• [x] Make ticket for donut chart # 1 to the dashboard: Chart Title: Total Volunteers ** Total Volunteers: [n=count of total volunteer]

• [x] Make ticket for donut chart # 2 to the dashboard: Chart Title: Total Volunteer Hours ** Total Volunteer Hours: [n=sum of total volunteer hours]

• [x] Make ticket for bar chart # 3 to the dashboard: Chart Title: Avg. Hours per Volunteer ** Avg. Hours per Volunteer [n=sum total hours/count total volunteers]

• All charts should display color split across the 3 Hack for LA brigades. Either existing blue monochrome is fine (from wireframe), or we can experiment with the Code for America tri-color theme: --- DTLA: F9F9F9 --- Westside: 005A87 --- South LA: CD1F42

• Ensure that all 3 charts react to global data filters (Location & Date Range picker)

Approved Metrics

• Total count of volunteer by location (for date range selected)
• Total sum of volunteer hours by location (for date range selected)
• Average volunteer hours per volunteer by location & across all locations (for date range selected)
• Most hours volunteered Leaderboard (Top 5 default, "View All" will expand to full list) **Maybe we should consider a "View More" instead, that shows 10-20 more at a time, to prevent a massive list with poor performance)
• Individual Event Details - Past Events & Upcoming Events.

See list here of APPROVED vs CUT metrics for updated dashboard: https://github.com/hackforla/VRMS/issues/15

[TanyaWlod]

I have 2 possible versions of the Dashboard, an Event (for v2) and Event Detail page (for v2). I have light comments that should explain what you're looking at. Everyone with the link should be able to edit/view. If you have any edits/questions please comment them onto the Figma board. https://www.figma.com/file/9c6pxjImN8MjHAZLH7zxYm/VRMS-Mocks?node-id=22881%3A2738

[kelseylc]

@sarL3y FYI this ticket has been updated with specifications to build the 3 charts on the dashboard. Once those are done, we can check this off. I'll be creating separate tickets for these 2 items:

• Most hours volunteered Leaderboard #79
• Event Details - Past Events & Upcoming Events. #80 #81

[kelseylc]

Updated this ticket to be more informational and to track the Product tasks of creating necessary smaller tickets. Tickets were created and added to Backlog. #76 #77 #78 #80 #81 #82

This ticket can be closed out.