Hourly temperature visualization

[greg-does-weather]

What does this PR do? 🛠️

Adds a line chart for hourly temperature to each day. This should be enough for us to start iterating on, including right here in this PR to make it good enough to show. 😂

The graph currently shows the entire day, starting either at the next full hour or 6am, for today and future days, respectively.

One thing I struggled with was which hours to label on the X axis. Currently it's configured to only show the even-numbered hours. However, the chart automatically removes "ticks" (the vertical grid lines and associated X-axis label) when the chart gets too narrow to display them all. Depending on which hour is first, at narrower viewports, you can end up with only odd-numbered hours as ticks, in which case there are no labels. So obviously "only even-numbered hours" is not the right algorithm.

• closes Visualization: Temp and Feels like, hourly, line #1632

What does the reviewer need to know? 🤔

Screenshots (if appropriate): 📸

[greg-does-weather]

@eric-gade Is this where we could import CSS vars? I'd love to not redefine things!

[eric-gade]

Ok, so here is what we would need to do (according to my slapdash thinking):

1. Update our scss file so we map the SASS variables we care about to CSS custom properties (aka CSS variables). It would look something like:

canvas.whatever-class-for-visual-charts {
  --base-color: #{$base}; // or whatever the color variable is called
  --base-lighter-color: #{$baseLighter};
  // etc etc
}

2. Then in the code where we load the canvas, we do something like:

const getColors = () => {
  const canvasEl = getCanvasElement(); // fake thing, get the element
  const computed = getComputedStyle(canvasEl);
  return {
    base: computed.getPropertyValue("--base-color"),
    baseLighter: computed.getPropertyValue("--base-lighter-color"),
    // etc etc
  }
}

[eric-gade]

Oops didn't read the full file in the code you linked to. None of this has to be on the canvas element, it can be on any element we control, including whatever containers we create for the charts

[greg-does-weather]

Ooh, that's cool. I'm gonna go back in and fiddle with that right now. Thanks!

[eric-gade]

LGTM 👍

Code Review Checklist

This is an automated comment on every pull request requiring a review. A checked item is either an assertion that I have tested this item or an indication that I have verified it does not apply to this pull request.

The Basics

• Checks are passing
• I read the code
• I ran the code
• (if applicable) Post deploy steps are run
• (if applicable) I validated the change on the deployed version in

Documentation

• changes to “how we do things” are documented in READMEs
• all new functions and methods are commented using plain language
• any new modules added documented in modules.md

Security

• security false positives are documented
• data from external sources is cleaned and clearly marked

Reliability

• error handling exists for unusual or missing values
• interactions with external systems are wrapped in try/except
• functionality is tested with unit or integration tests
• dependency updates in composer.json also got changed in composer-lock.json

Infrastructure

• all changes are auditable and documented via a script
• it is clear who can and should run the script
• (if applicable) diagrams have been updated or added in PlantUML

Accessibility

• New pages have been added to cypress-axe file so that they will be tested with our automated accessibility testing
• Meets WCAG 2.0 AA or 2.1 AA for Section 508 compliance
  • Site is keyboard accessible. All interactions can be accessed with a keyboard
  • Site is free of keyboard traps. The keyboard focus is never trapped in a loop
  • All form inputs have explicit labels
  • Form instructions are associated with inputs
  • All relevant images use an img tag
  • All images have appropriate alt attributes
  • Multimedia is tagged. All multimedia has appropriate captioning and audio description
  • Text has sufficient color contrast. All text has a contrast ratio of 4.5:1 with the background
  • Site never loses focus. Focus is always visible when moving through the page with the keyboard
  • Tab order is logical
  • Tables are coded properly. Tables have proper headers and column attributes
  • Headings are nested properly. Heading elements are nested in a logical way
  • Language is set. The language for the page is set
  • CSS is not required to use the page. The page makes sense with or without CSS
  • Links are unique and contextual. All links can be understood taken alone, e.g., ‘Read more - about 508’
  • Page titles are descriptive

Device Matrix

• firefox/gecko (renders correctly and user interactions work)
• chrome/chromium/edge (renders correctly and user interactions work)
• safari/webkit (renders correctly and user interactions work)
• web page is readable and usable
  • at 480px (mobile)
  • at 640px (tablet)
  • at 1024px (desktop)

[colinmurphy01]

Hizzah!