Stats Page Revamp Stage 1

[nikobooth]

Objective

We want to be able to display more robust data on our statistics page, the first step in doing that is to create some new modules from our current data and make some changes to our current charts.

The entire 3 Stage process is laid out in our Figma file here: https://www.figma.com/file/iUS5LdAnuTKVei88QwPPCH/Bay-Area-Pandemic-Dashboard-PanDa-by-Bay-Area-Brigades?node-id=1286%3A5911

This issue will cover the steps necessary to complete Stage 1 which will have a final result of our stats page looking like this:

I've broken down the steps necessary and will provide detailed instructions and documentation for each one. Because of the way the modules' functions are entwined, I think all changes will need to be pushed at once (hence the single issue, if it makes more sense to break this up into multiple, however, I'm open to the idea).

Steps

• Create Topline Summary module
• Create County Selector and Summary module
• Implement design and behavior changes to case & death histograms
• Create separate histograms for cases & deaths for Bay Area totals
• Create responsive histograms to populate county specific data based on county selector input

Topline Summary module

This module will sit at the top of the page and display three statistics: total confirmed cases (with % daily increase), cases per 1000 people, and total deaths. To calculate cases per 1000 people, use:
[total cases]/([population]/1000).
The CDS lists the cumulative Bay Area population as 7739378.

This module should take up 5/6 screen width with 1/12 sw padding on either side.
All font styles and sizes can be seen in the Figma document but I can also provide a summary if necessary. On smaller screens, the values can stack vertically:

County Selector & Summary module

This module allows the user to select a county from the dropdown list to display summary stats and histograms for that county. Default value can be San Francisco County. The dimensions and formatting are essentially the same as the Topline Summary.

For mobile, a similar stacked display should work:

Design & behavior changes for histograms

A few updates to our histogram template.

• implement a tooltip feature (the "i" icon) that pops up a modular text box with explanatory information about the chart.

• Return to showing only one value (cases or deaths) per histogram.

• Update labels on top right value as well as in the hover state.

• Update colors and font styles/sizes to match with style sheet.

Bay Area Histograms

Once the new template is set, create histograms for Bay Area cases and deaths.

County Histograms

Use the template to create county specific histograms that will display based on user input to the county selector module.

Done!

I know there's a lot here, so please reach out with questions on Slack or in the comments here. If there's anything I can do to make this easier to accomplish, I'm happy to give it a shot!

[kengoy]

@nikobooth Stage 1 has been developed now. Please let me know if you find any additional items which need to be developed.

[nikobooth]

@kengoy ! This looks amazing, I've checked it out on desktop and mobile and you've done a great job implementing! There are just two small details:

1. the daily total deaths chart for some reason starts at -5. Unless we have people coming back from the dead (at this point we shouldn't rule out anything for 2020), we should make that a 0.
   

2. On mobile I had a strange behavior. Swiping over the charts to see the tooltip popup, it took me to the FAQ or News pages. I'll upload a video that shows this happening. Any idea why this would be going on?

Again, the overall implementation is fantastic, I loved seeing it live. Great work!

[nikobooth]

I guess I can't upload an MP4 here but here is the link to the file in my drive. My phone recorder doesn't show exactly where my touches are but I'm just swiping across the bars when it changes pages.

https://drive.google.com/file/d/1iMYg-210TuOlwJdQeMrC8ZDLPmxMbHHz/view?usp=sharing

[kengoy]

Thanks @nbasu02

I have created a separate issue ticket #210 #275.

We can close this ticket.