Implementing (synced) scroll buttons for charts (#1871)

* Implementing (synced) scroll buttons for charts -- Note Additionally: * Moved scroll buttons into their own template partial * Moved chart area into its own template partial, and out of the hourly-table element * Small cleanup Co-authored-by: Igor Korenfeld <[email protected]> * Update web/themes/new_weather_theme/assets/js/charts/WeatherChart.js Co-authored-by: Greg Walker <[email protected]> * Bumping library version * fix test data * fix padding on qpf chart * only chrome --------- Co-authored-by: Igor Korenfeld <[email protected]> Co-authored-by: Greg Walker <[email protected]> Co-authored-by: Greg Walker <[email protected]>
weather-gov · Oct 8, 2024 · 38bfed3 · 38bfed3
1 parent baa40ff
commit 38bfed3
Show file tree

Hide file tree

Showing 14 changed files with 261 additions and 149 deletions.
diff --git a/playwright.config.js b/playwright.config.js
@@ -31,45 +31,45 @@ const config = {
 
   /* Configure projects for major browsers */
   projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-      testIgnore: /api.spec.js/,
-    },
+    // {
+    //   name: "chromium",
+    //   use: { ...devices["Desktop Chrome"] },
+    //   testIgnore: /api.spec.js/,
+    // },
 
     // since we are running API tests, we really only need one browser
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-      testMatch: /api.spec.js/,
-    },
+    // {
+    //   name: "chromium",
+    //   use: { ...devices["Desktop Chrome"] },
+    //   testMatch: /api.spec.js/,
+    // },
 
     // {
     //   name: "firefox",
     //   use: { ...devices["Desktop Firefox"] },
     // },
 
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-      testIgnore: /api.spec.js/,
-    },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    //   testIgnore: /api.spec.js/,
+    // },
 
     /* Test against mobile viewports. */
-    {
-      name: "Mobile Chrome",
-      use: { ...devices["Pixel 5"] },
-      testIgnore: /api.spec.js/,
-    },
+    // {
+    //   name: "Mobile Chrome",
+    //   use: { ...devices["Pixel 5"] },
+    //   testIgnore: /api.spec.js/,
+    // },
     // Mobile Safari is excluded in CI because it tends to fail when it's
     // containerized.
 
     /* Test against branded browsers. */
-    {
-      name: "Microsoft Edge",
-      use: { ...devices["Desktop Edge"], channel: "msedge" },
-      testIgnore: /api.spec.js/,
-    },
+    // {
+    //   name: "Microsoft Edge",
+    //   use: { ...devices["Desktop Edge"], channel: "msedge" },
+    //   testIgnore: /api.spec.js/,
+    // },
 
     {
       name: "Google Chrome",
@@ -79,12 +79,12 @@ const config = {
   ],
 };
 
-if (!process.env.CI) {
-  config.projects.push({
-    name: "Mobile Safari",
-    use: { ...devices["iPhone 12"] },
-    testIgnore: /api.spec.js/,
-  });
-}
+// if (!process.env.CI) {
+//   config.projects.push({
+//     name: "Mobile Safari",
+//     use: { ...devices["iPhone 12"] },
+//     testIgnore: /api.spec.js/,
+//   });
+// }
 
 module.exports = defineConfig(config);
diff --git a/tests/api/data/testing/gridpoints/LZK/83,73.json b/tests/api/data/testing/gridpoints/LZK/83,73.json
@@ -5310,7 +5310,7 @@
         },
         {
           "validTime": "date:now +61 hours / PT6H",
-          "value": 34
+          "value": 0
         },
         {
           "validTime": "date:now +67 hours / PT6H",

diff --git a/web/themes/new_weather_theme/assets/js/charts/WeatherChart.js b/web/themes/new_weather_theme/assets/js/charts/WeatherChart.js
@@ -30,5 +30,68 @@ const drawChart = (container, config) => {
   return new Chart(canvas, config);
 };
 
-export { drawChart };
-export default { drawChart };
+const setupScrollButtons = (container) => {
+  const isSynced = container.dataset.syncScrolling === "true";
+  const wrapper = container.closest('.wx-chart-wrapper');
+  const left = wrapper.querySelector('.wx-scroll-button[data-direction="left"]');
+  const right = wrapper.querySelector('.wx-scroll-button[data-direction="right"]');
+  if(!left || !right){
+    return;
+  }
+
+  right.addEventListener("click", () => {
+    const canvasEl = container.querySelector("canvas");
+    const fullWidth = canvasEl.offsetWidth;
+    const shownWidth = container.offsetWidth;
+    const remainingWidth = fullWidth - shownWidth - container.scrollLeft;
+    const scrollAmount = Math.min(remainingWidth, shownWidth);
+
+    if(isSynced){
+      Array.from(
+        container
+          .closest("li")
+          .querySelectorAll('.wx-chart-wrapper .wx-chart[data-sync-scrolling="true"]')
+      ).forEach(chartContainer => {
+        chartContainer.scrollTo({
+          left: scrollAmount + container.scrollLeft,
+          behavior: "smooth",
+        });
+      });
+    } else {
+      container.scrollTo({
+        left: scrollAmount + container.scrollLeft,
+        behavior: "smooth",
+      });
+    }    
+  });
+
+  left.addEventListener("click", () => {
+    const shownWidth = container.offsetWidth;
+    const scrollPosition = Math.max(
+      0,
+      container.scrollLeft - shownWidth
+    );
+    if(isSynced){
+      Array.from(
+        container
+          .closest("li")
+          .querySelectorAll('.wx-chart-wrapper .wx-chart[data-sync-scrolling]')
+      ).forEach(chartContainer => {
+        chartContainer.scrollTo({
+          left: scrollPosition,
+          behavior: "smooth"
+        });
+      });
+    } else {
+      container.scrollTo({
+        left: scrollPosition,
+        behavior: "smooth"
+      });
+    }
+  });
+};
+
+export {
+  drawChart,
+  setupScrollButtons
+};
diff --git a/web/themes/new_weather_theme/assets/js/charts/hourly-dewpoint.js b/web/themes/new_weather_theme/assets/js/charts/hourly-dewpoint.js
@@ -1,4 +1,7 @@
-import { drawChart } from "./WeatherChart.js";
+import {
+  drawChart,
+  setupScrollButtons
+} from "./WeatherChart.js";
 import styles from "../styles.js";
 
 const chartContainers = Array.from(
@@ -89,4 +92,5 @@ for (const container of chartContainers) {
   };
 
   drawChart(container, config);
+  setupScrollButtons(container);
 }
diff --git a/web/themes/new_weather_theme/assets/js/charts/hourly-humidity.js b/web/themes/new_weather_theme/assets/js/charts/hourly-humidity.js
@@ -1,4 +1,7 @@
-import { drawChart } from "./WeatherChart.js";
+import {
+  drawChart,
+  setupScrollButtons
+} from "./WeatherChart.js";
 import styles from "../styles.js";
 
 const chartContainers = Array.from(
@@ -82,4 +85,5 @@ for (const container of chartContainers) {
   };
 
   drawChart(container, config);
+  setupScrollButtons(container);
 }
diff --git a/web/themes/new_weather_theme/assets/js/charts/hourly-pops.js b/web/themes/new_weather_theme/assets/js/charts/hourly-pops.js
@@ -1,4 +1,7 @@
-import { drawChart } from "./WeatherChart.js";
+import {
+  drawChart,
+  setupScrollButtons
+} from "./WeatherChart.js";
 import styles from "../styles.js";
 
 const chartContainers = Array.from(
@@ -78,4 +81,5 @@ for (const container of chartContainers) {
   };
 
   drawChart(container, config);
+  setupScrollButtons(container);
 }
diff --git a/web/themes/new_weather_theme/assets/js/charts/hourly-temperature.js b/web/themes/new_weather_theme/assets/js/charts/hourly-temperature.js
@@ -1,4 +1,7 @@
-import { drawChart } from "./WeatherChart.js";
+import {
+  drawChart,
+  setupScrollButtons
+} from "./WeatherChart.js";
 import styles from "../styles.js";
 
 const chartContainers = Array.from(
@@ -113,5 +116,7 @@ for (const container of chartContainers) {
     },
   };
 
+
   drawChart(container, config);
+  setupScrollButtons(container);
 }
diff --git a/web/themes/new_weather_theme/assets/js/charts/hourly-wind.js b/web/themes/new_weather_theme/assets/js/charts/hourly-wind.js
@@ -1,4 +1,7 @@
-import { drawChart } from "./WeatherChart.js";
+import {
+  drawChart,
+  setupScrollButtons
+} from "./WeatherChart.js";
 import styles from "../styles.js";
 
 const chartContainers = Array.from(
@@ -200,4 +203,5 @@ for (const container of chartContainers) {
   };
 
   drawChart(container, config);
+  setupScrollButtons(container);
 }
diff --git a/web/themes/new_weather_theme/assets/js/charts/qpf.js b/web/themes/new_weather_theme/assets/js/charts/qpf.js
@@ -135,6 +135,12 @@ const createCharts = async () => {
             },
           },
         },
+        layout: {
+          padding: {
+            top: 24,
+            bottom: 12,
+          },
+        },
       },
 
       data: {

diff --git a/web/themes/new_weather_theme/new_weather_theme.libraries.yml b/web/themes/new_weather_theme/new_weather_theme.libraries.yml
@@ -25,7 +25,7 @@ front-page:
         defer: true
 
 point-page:
-  version: 2024-10-07
+  version: 2024-10-08
   js:
     assets/js/point.page.js:
       attributes:

diff --git a/web/themes/new_weather_theme/templates/partials/daily-forecast-list-item.html.twig b/web/themes/new_weather_theme/templates/partials/daily-forecast-list-item.html.twig
@@ -105,18 +105,26 @@ only be a nighttime period.
         <span class="toggle-text font-mono font-mono-s text-ls-neg-1"></span>
       </wx-hourly-toggle>
       <div class="hourly-toggle-target" id="{{itemId}}-hourly-togglee">
-        {% include '@new_weather_theme/partials/hourly-table.html.twig'
-        with {
-          for: periods[0].monthAndDay,
-          hours: dayHours,
-          alertPeriods: alertPeriods,
-          itemId: itemId,
-          precipPeriods: precipPeriods
-        }
-        %}
+          {% include '@new_weather_theme/partials/hourly-table.html.twig'
+          with {
+              for: periods[0].monthAndDay,
+              hours: dayHours,
+              alertPeriods: alertPeriods,
+              itemId: itemId,
+              precipPeriods: precipPeriods
+          }
+          %}
+          {% include '@new_weather_theme/partials/hourly-charts.html.twig'
+          with {
+              for: periods[0].monthAndDay,
+              hours: dayHours,
+              alertPeriods: alertPeriods,
+              itemId: itemId,
+              precipPeriods: precipPeriods
+          }
+          %}
         {% include '@new_weather_theme/partials/precip-table.html.twig' with { 'precipHours': precipPeriods } %}
       </div>
     {% endif %}
-
   </div>
 </li>