117 add data visualization for reporting history #128
Conversation
…he latest year of data + styling
✅ Deploy Preview for radiant-cucurucho-d09bae ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| ]; | ||
|
|
||
| const score = this.reportedYearsCount / this.reportingHistory.length; | ||
| return gradeRanges.find((range) => score >= range.min)!.grade; |
Check warning
Code scanning / ESLint
Disallow non-null assertions using the `!` postfix operator Warning
There was a problem hiding this comment.
@noceo - this looks great! The letters are actually a font, and not an image, so let's use this Caveat Font from Google Fonts for that. We can then use the color #009F49 for A, #7FA52E for B buildings, #B36A15 C buildings, #972222 for D, and #FF0404 for F. I'd make sure to make that a global style (e.g. .grade-letter.-a) since it'll be used elsewhere.
Lastly I'd suggest making the icons smaller on mobile (maybe half this size?) because it's a bit large on mobile.
src/components/ReportingTile.vue
Outdated
|
|
||
| .marker { | ||
| position: relative; | ||
| width: 40px; |
There was a problem hiding this comment.
Let's convert this to rem, should be 2.5rem since we're using the default 16px font size
src/components/ReportingTile.vue
Outdated
|
|
||
| import { LatestDataYear } from "../constants/globals.vue"; | ||
|
|
||
| @Component |
There was a problem hiding this comment.
Can you add a quick doc block, and note some good examples to test this with? We'll be writing some unit and E2E tests later, and that'll be helpful.
| * 3. Searle Chemistry Laboratory (all years reported) | ||
| * 4. Crown Hall (only 3 years reported with the latest one missing) | ||
| */ | ||
| @Component<any>({ |
Check warning
Code scanning / ESLint
Disallow the `any` type Warning
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)
2. Digital Printer's Row (missing reports in between years that are reported)
3. Searle Chemistry Laboratory (all years reported)
4. Crown Hall (only 3 years reported with the latest one missing)