Merge pull request #1698 from weather-gov/mgwalker/1633-hourly-precip…

…-chance

Hourly probability of precipitation chart

web/themes/new_weather_theme/assets/js/charts/hourly-pops.js

@@ -0,0 +1,98 @@
+/* global Chart ChartDataLabels */
+(() => {
+  const styles = getComputedStyle(document.body);
+
+  const fontMono = styles.getPropertyValue("--font-family-mono");
+  const colors = {
+    base: styles.getPropertyValue("--color-base"),
+    baseLighter: styles.getPropertyValue("--color-base-lighter"),
+    baseLightest: styles.getPropertyValue("--color-base-lightest"),
+    primary: styles.getPropertyValue("--color-primary"),
+    primaryDark: styles.getPropertyValue("--color-primary-dark"),
+    primaryLight: styles.getPropertyValue("--color-primary-light"),
+    cyan50: styles.getPropertyValue("--color-cyan-50"),
+  };
+
+  Chart.register(ChartDataLabels);
+
+  // These are applied globally to all charts. Unclear if that's okay, or if
+  // what we really want is to set them per-chart, but this is what I've got
+  // for now.
+  Chart.defaults.font.family = fontMono;
+  Chart.defaults.font.size = 12;
+
+  const chartContainers = Array.from(
+    document.querySelectorAll(".wx-hourly-pops-chart-container"),
+  );
+
+  for (const container of chartContainers) {
+    const times = JSON.parse(container.dataset.times);
+    const pops = JSON.parse(container.dataset.pops).map((v) =>
+      Number.parseInt(v, 10),
+    );
+
+    // We don't need to keep a reference to the chart object. We only need the
+    // side-effects of creating it. This is not ideal, but it's how Chart.js
+    // works, so it's what we've got.
+    // eslint-disable-next-line no-new
+    new Chart(container.querySelector("canvas"), {
+      type: "bar",
+      plugins: [ChartDataLabels],
+
+      options: {
+        animation: false,
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: {
+          intersect: false,
+          mode: "index",
+        },
+
+        plugins: {
+          legend: {
+            display: false,
+          },
+          tooltip: {
+            xAlign: "center",
+            yAlign: "bottom",
+          },
+        },
+        scales: {
+          x: {
+            ticks: {
+              maxRotation: 0,
+              color: colors.base,
+            },
+            grid: { display: false },
+          },
+          y: {
+            min: 0,
+            max: 100,
+            ticks: {
+              autoSkip: true,
+              color: colors.base,
+              maxTicksLimit: 6,
+              callback: (v) => `${v}%`,
+            },
+          },
+        },
+      },
+
+      data: {
+        labels: times.map((v) => (Number.parseInt(v, 10) % 2 === 0 ? v : "")),
+        datasets: [
+          {
+            label: "Chance of precipitation",
+            data: pops,
+            datalabels: {
+              align: "end",
+              anchor: "end",
+              color: colors.cyan50,
+            },
+            backgroundColor: colors.cyan50,
+          },
+        ],
+      },
+    });
+  }
+})();

web/themes/new_weather_theme/assets/sass/components/variables.scss

@@ -7,5 +7,6 @@ body {
   --color-primary: #{color("primary")};
   --color-primary-dark: #{color("primary-dark")};
   --color-primary-light: #{color("primary-light")};
+  --color-cyan-50: #{color("cyan-50")};
   --font-family-mono: #{font-family("mono")};
 }

web/themes/new_weather_theme/new_weather_theme.libraries.yml

@@ -135,3 +135,9 @@ chart-hourly-temperature:
     assets/js/charts/hourly-temperature.js:
       attributes:
         defer: true
+chart-hourly-pops:
+  version: 2024-08-27
+  js:
+    assets/js/charts/hourly-pops.js:
+      attributes:
+        defer: true

web/themes/new_weather_theme/templates/partials/hourly-table.html.twig

@@ -1,10 +1,12 @@
 {{ attach_library('new_weather_theme/hourly-table') }}
 {{ attach_library('new_weather_theme/chartjs') }}
 {{ attach_library('new_weather_theme/chart-hourly-temperature') }}
+{{ attach_library('new_weather_theme/chart-hourly-pops') }}
 
 {% set times = hours | map(h => h.time) | json_encode %}
 {% set temps = hours | map(h => h.temperature) | json_encode %}
 {% set feelsLike = hours | map(h => h.apparentTemperature) | json_encode %}
+{% set pops = hours | map(h => h.probabilityOfPrecipitation) | json_encode %}
 
 <wx-hourly-table class="display-block position-relative margin-top-2 bg-white">
   <h5 class="wx-visual-h3 font-heading-md text-normal text-primary-darker margin-top-0 margin-bottom-205">Hourly forecast</h5>
@@ -27,6 +29,14 @@
     </div>
   </div>
 
+  <div class="margin-bottom-205">
+    <span class="font-family-mono text-primary-dark">Chance of precipitation</span>
+    <div class="wx-hourly-pops-chart-container margin-y-205 position-relative grid-col-12" data-times="{{ times }}" data-pops="{{ pops }}">
+      <canvas>
+      </canvas>
+    </div>
+  </div>
+
 
   <div class="display-flex flex-justify">
     <div>