vkoves / electrify-chicago

Learn about Chicago's most polluting buildings, and what they can do to clean up their act!
http://electrifychicago.net
16 stars 10 forks source link

117 add data visualization for reporting history #128

Closed noceo closed 2 months ago

noceo commented 2 months ago

Description

I introduced a reporting history component that shows the reporting status for every year. It starts at the year that the owners of the property reported their data for the first time and it goes until the last year of data that the website shows. I used a list with list items that have an image indicating the status for the specific year. The images have dynamic alt texts for accessibility. I also introduced a rating based on the number of years that were reported. At the moment it just displays the letter grade on the screen in the standard font. The layout however suggests an image/icon but I do not have an icon for every letter grade.

Please let me know whether the letter grade should stay for now or should be removed and added back in at a later time. Also, I was not quite sure about the exact spacing between the new component and other components like the StatsTiles.

Fixes #117

Testing Instructions

I mainly did manual testing and compared the historicData property with the visual result using console logs. Some edge cases were buildings like:

1. United Center (reporting stops before the latest year of data -> therefore, adding the missing years)

Screenshot 2024-09-08 at 8 40 03 PM

2. Digital Printer's Row (missing reports in between years that are reported)

Screenshot 2024-09-08 at 10 07 23 PM

3. Searle Chemistry Laboratory (all years reported)

Screenshot 2024-09-08 at 10 07 59 PM

4. Crown Hall (only 3 years reported with the latest one missing)

Screenshot 2024-09-08 at 10 07 04 PM
netlify[bot] commented 2 months ago

Deploy Preview for radiant-cucurucho-d09bae ready!

Name Link
Latest commit ff3baf241f336998fd97b5a418b79caae8900415
Latest deploy log https://app.netlify.com/sites/radiant-cucurucho-d09bae/deploys/66e5a0591a66790008f8a4f6
Deploy Preview https://deploy-preview-128--radiant-cucurucho-d09bae.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.