Merge pull request #1531 from 18F/staging

Lots of stuff around visualization page and filters -- Production
18F · Feb 26, 2025 · 0f2a1f8 · 0f2a1f8
2 parents 6898d94 + 18d3275
commit 0f2a1f8
Show file tree

Hide file tree

Showing 27 changed files with 223 additions and 196 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -39,23 +39,49 @@ <h1 class="margin-top-0 margin-x-0 margin-bottom-1">
     </form>
   </div>
 
-  <nav class="links margin-top-1 margin-bottom-0 padding-bottom-1">
-    <ul>
-      <li>
-        <a href="/about">About</a>
-        <span class="link-bullet link-bullet--hide">&#8226;</span>
-      </li>
-      <li>
-        <a href="/definitions">Definitions</a>
-        <span class="link-bullet link-bullet--hide">&#8226;</span>
-      </li>
-      <li>
-        <a href="{{ site.baseurl }}/data">Data</a>
-        <span class="link-bullet">&#8226;</span>
-        <a href="https://open.gsa.gov/api/dap/" target="_blank" rel="noopener"
-          >API</a
-        >
-      </li>
-    </ul>
+  <nav
+    class="links margin-top-1 desktop:padding-left-3 margin-bottom-0 padding-bottom-1"
+  >
+    <div class="grid-row">
+      <div class="grid-offset-2 grid-col-8">
+        <div class="grid-row">
+          <div class="grid-col-3 text-center">
+            <a href="/about">About</a>
+          </div>
+          <div class="grid-col-1 text-right">
+            <span class="link-bullet link-bullet--hide">&#8226;</span>
+          </div>
+          <div class="grid-col-5 text-center">
+            <a href="/definitions">Definitions</a>
+          </div>
+          <div class="grid-col-1 text-left">
+            <span class="link-bullet link-bullet--hide">&#8226;</span>
+          </div>
+          <div class="grid-col-2 text-center">
+            <a
+              href="https://open.gsa.gov/api/dap/"
+              target="_blank"
+              rel="noopener"
+              >API</a
+            >
+          </div>
+        </div>
+      </div>
+      <div
+        class="desktop:grid-offset-1 card:grid-col-12 desktop-lg:grid-col-11 widescreen:grid-col-10"
+      >
+        <div class="grid-row">
+          <div class="grid-col-5 text-right">
+            <a href="{{ site.baseurl }}/visualizations">Visualize Data</a>
+          </div>
+          <div class="grid-col-2 text-center">
+            <span class="link-bullet link-bullet--hide">&#8226;</span>
+          </div>
+          <div class="card:grid-col-5 text-left">
+            <a href="{{ site.baseurl }}/data">Download Data</a>
+          </div>
+        </div>
+      </div>
+    </div>
   </nav>
 </header>
diff --git a/_includes/visualizations.html b/_includes/visualizations.html
@@ -3,6 +3,7 @@
   ./js/components/visualizations for the rendering logic.
 -->
 <main>
+  <!-- prettier-ignore -->
   <div
     id="visualizations-root"
     dataURL="{{ site.data_url }}"

diff --git a/images/dap-watermark.svg b/images/dap-watermark.svg
diff --git a/js/components/dashboard_content/BrowsersChart.js b/js/components/dashboard_content/BrowsersChart.js
@@ -20,9 +20,9 @@ import ConsolidatedBarChart from "../chart/ConsolidatedBarChart";
 function BrowsersChart({ dataHrefBase }) {
   const reportFilters = [
     ["Yesterday", "browsers-yesterday"],
-    ["7 Days", "browsers-7-days"],
-    ["30 Days", "browsers-30-days"],
-    ["90 Days", "browsers-90-days"],
+    ["Last 7 Days", "browsers-7-days"],
+    ["Last 30 Days", "browsers-30-days"],
+    ["Last 90 Days", "browsers-90-days"],
     ["Current Calendar Year", "browsers-current-year"],
     ["Current Fiscal Year", "browsers-current-fiscal-year"],
     ["Previous Calendar Year", "browsers-previous-year"],

diff --git a/js/components/dashboard_content/DevicesChart.js b/js/components/dashboard_content/DevicesChart.js
@@ -21,12 +21,12 @@ function DevicesChart({ dataHrefBase }) {
   const reportFilters = [
     ["30 Minutes", "devices-realtime"],
     ["Yesterday", "devices-yesterday"],
-    ["7 Days", "devices-7-days"],
-    ["30 Days", "devices-30-days"],
-    ["90 Days", "devices-90-days"],
-    ["Current Year", "devices-current-year"],
+    ["Last 7 Days", "devices-7-days"],
+    ["Last 30 Days", "devices-30-days"],
+    ["Last 90 Days", "devices-90-days"],
+    ["Current Calendar Year", "devices-current-year"],
     ["Current Fiscal Year", "devices-current-fiscal-year"],
-    ["Previous Year", "devices-previous-year"],
+    ["Previous Calendar Year", "devices-previous-year"],
     ["Previous Fiscal Year", "devices-previous-fiscal-year"],
   ];
   const [currentFilter, setCurrentFilter] = useState(reportFilters[0]);

diff --git a/js/components/dashboard_content/OperatingSystemsChart.js b/js/components/dashboard_content/OperatingSystemsChart.js
@@ -22,9 +22,9 @@ import FilterSelect from "../select/FilterSelect";
 function OperatingSystemsChart({ dataHrefBase }) {
   const reportFilters = [
     ["Yesterday", "yesterday"],
-    ["7 Days", "7-days"],
-    ["30 Days", "30-days"],
-    ["90 Days", "90-days"],
+    ["Last 7 Days", "7-days"],
+    ["Last 30 Days", "30-days"],
+    ["Last 90 Days", "90-days"],
     ["Current Calendar Year", "current-year"],
     ["Current Fiscal Year", "current-fiscal-year"],
     ["Previous Calendar Year", "previous-year"],

diff --git a/js/components/dashboard_content/ScreenResolutionsChart.js b/js/components/dashboard_content/ScreenResolutionsChart.js
@@ -20,9 +20,9 @@ import ConsolidatedBarChart from "../chart/ConsolidatedBarChart";
 function ScreenResolutionsChart({ dataHrefBase }) {
   const reportFilters = [
     ["Yesterday", "screen-resolution-yesterday"],
-    ["7 Days", "screen-resolution-7-days"],
-    ["30 Days", "screen-resolution-30-days"],
-    ["90 Days", "screen-resolution-90-days"],
+    ["Last 7 Days", "screen-resolution-7-days"],
+    ["Last 30 Days", "screen-resolution-30-days"],
+    ["Last 90 Days", "screen-resolution-90-days"],
     ["Current Calendar Year", "screen-resolution-current-year"],
     ["Current Fiscal Year", "screen-resolution-current-fiscal-year"],
     ["Previous Calendar Year", "screen-resolution-previous-year"],

diff --git a/js/components/dashboard_content/TopCities.js b/js/components/dashboard_content/TopCities.js
@@ -23,9 +23,9 @@ function TopCities({ dataHrefBase, refreshSeconds }) {
   const reportFilters = [
     ["30 Minutes", "top-cities-realtime"],
     ["Yesterday", "top-cities-yesterday"],
-    ["7 Days", "top-cities-7-days"],
-    ["30 Days", "top-cities-30-days"],
-    ["90 Days", "top-cities-90-days"],
+    ["Last 7 Days", "top-cities-7-days"],
+    ["Last 30 Days", "top-cities-30-days"],
+    ["Last 90 Days", "top-cities-90-days"],
     ["Current Calendar Year", "top-cities-current-year"],
     ["Current Fiscal Year", "top-cities-current-fiscal-year"],
     ["Previous Calendar Year", "top-cities-previous-year"],

diff --git a/js/components/dashboard_content/TopCountries.js b/js/components/dashboard_content/TopCountries.js
@@ -27,9 +27,9 @@ function TopCountries({ dataHrefBase, refreshSeconds }) {
   const reportFilters = [
     ["30 Minutes", "top-countries-realtime"],
     ["Yesterday", "top-countries-yesterday"],
-    ["7 Days", "top-countries-7-days"],
-    ["30 Days", "top-countries-30-days"],
-    ["90 Days", "top-countries-90-days"],
+    ["Last 7 Days", "top-countries-7-days"],
+    ["Last 30 Days", "top-countries-30-days"],
+    ["Last 90 Days", "top-countries-90-days"],
     ["Current Calendar Year", "top-countries-current-year"],
     ["Current Fiscal Year", "top-countries-current-fiscal-year"],
     ["Previous Calendar Year", "top-countries-previous-year"],

diff --git a/js/components/dashboard_content/TopDownloads.js b/js/components/dashboard_content/TopDownloads.js
@@ -26,9 +26,9 @@ import FilterSelect from "../select/FilterSelect";
 function TopDownloads({ agency, dataHrefBase, numberOfListingsToDisplay }) {
   const reportFilters = [
     ["Yesterday", "top-downloads-yesterday"],
-    ["7 Days", "top-downloads-7-days"],
-    ["30 Days", "top-downloads-30-days"],
-    ["90 Days", "top-downloads-90-days"],
+    ["Last 7 Days", "top-downloads-7-days"],
+    ["Last 30 Days", "top-downloads-30-days"],
+    ["Last 90 Days", "top-downloads-90-days"],
     ["Current Calendar Year", "top-downloads-current-year"],
     ["Current Fiscal Year", "top-downloads-current-fiscal-year"],
     ["Previous Calendar Year", "top-downloads-previous-year"],

diff --git a/js/components/dashboard_content/TopLanguages.js b/js/components/dashboard_content/TopLanguages.js
@@ -20,9 +20,9 @@ import ConsolidatedBarChart from "../chart/ConsolidatedBarChart";
 function TopLanguages({ dataHrefBase }) {
   const reportFilters = [
     ["Yesterday", "languages-yesterday"],
-    ["7 Days", "languages-7-days"],
-    ["30 Days", "languages-30-days"],
-    ["90 Days", "languages-90-days"],
+    ["Last 7 Days", "languages-7-days"],
+    ["Last 30 Days", "languages-30-days"],
+    ["Last 90 Days", "languages-90-days"],
     ["Current Calendar Year", "languages-current-year"],
     ["Current Fiscal Year", "languages-current-fiscal-year"],
     ["Previous Calendar Year", "languages-previous-year"],

diff --git a/js/components/dashboard_content/TopPages.js b/js/components/dashboard_content/TopPages.js
@@ -27,9 +27,9 @@ function TopPages({ dataHrefBase, numberOfListingsToDisplay, refreshSeconds }) {
   const reportFilters = [
     ["30 Minutes", "top-pages-realtime"],
     ["Yesterday", "top-domains-yesterday"],
-    ["7 Days", "top-domains-7-days"],
-    ["30 Days", "top-domains-30-days"],
-    ["90 Days", "top-domains-90-days"],
+    ["Last 7 Days", "top-domains-7-days"],
+    ["Last 30 Days", "top-domains-30-days"],
+    ["Last 90 Days", "top-domains-90-days"],
     ["Current Calendar Year", "top-domains-current-year"],
     ["Current Fiscal Year", "top-domains-current-fiscal-year"],
     ["Previous Calendar Year", "top-domains-previous-year"],

diff --git a/js/components/dashboard_content/TopSessionChannelGroupChart.js b/js/components/dashboard_content/TopSessionChannelGroupChart.js
@@ -20,9 +20,9 @@ import ConsolidatedBarChart from "../chart/ConsolidatedBarChart";
 function TopSessionChannelGroupChart({ dataHrefBase }) {
   const reportFilters = [
     ["Yesterday", "top-session-channel-group-yesterday"],
-    ["7 Days", "top-session-channel-group-7-days"],
-    ["30 Days", "top-session-channel-group-30-days"],
-    ["90 Days", "top-session-channel-group-90-days"],
+    ["Last 7 Days", "top-session-channel-group-7-days"],
+    ["Last 30 Days", "top-session-channel-group-30-days"],
+    ["Last 90 Days", "top-session-channel-group-90-days"],
     ["Current Calendar Year", "top-session-channel-group-current-year"],
     ["Current Fiscal Year", "top-session-channel-group-current-fiscal-year"],
     ["Previous Calendar Year", "top-session-channel-group-previous-year"],

diff --git a/js/components/dashboard_content/TopSessionSourceMediumChart.js b/js/components/dashboard_content/TopSessionSourceMediumChart.js
@@ -20,9 +20,9 @@ import ConsolidatedBarChart from "../chart/ConsolidatedBarChart";
 function TopSessionSourceMediumChart({ dataHrefBase }) {
   const reportFilters = [
     ["Yesterday", "top-session-source-medium-yesterday"],
-    ["7 Days", "top-session-source-medium-7-days"],
-    ["30 Days", "top-session-source-medium-30-days"],
-    ["90 Days", "top-session-source-medium-90-days"],
+    ["Last 7 Days", "top-session-source-medium-7-days"],
+    ["Last 30 Days", "top-session-source-medium-30-days"],
+    ["Last 90 Days", "top-session-source-medium-90-days"],
     ["Current Calendar Year", "top-session-source-medium-current-year"],
     ["Current Fiscal Year", "top-session-source-medium-current-fiscal-year"],
     ["Previous Calendar Year", "top-session-source-medium-previous-year"],

diff --git a/js/components/dashboard_content/TopVideoPlays.js b/js/components/dashboard_content/TopVideoPlays.js
@@ -27,9 +27,9 @@ import FilterSelect from "../select/FilterSelect";
 function TopVideoPlays({ agency, dataHrefBase, numberOfListingsToDisplay }) {
   const reportFilters = [
     ["Yesterday", "top-video-plays-yesterday"],
-    ["7 Days", "top-video-plays-7-days"],
-    ["30 Days", "top-video-plays-30-days"],
-    ["90 Days", "top-video-plays-90-days"],
+    ["Last 7 Days", "top-video-plays-7-days"],
+    ["Last 30 Days", "top-video-plays-30-days"],
+    ["Last 90 Days", "top-video-plays-90-days"],
     ["Current Calendar Year", "top-video-plays-current-year"],
     ["Current Fiscal Year", "top-video-plays-current-fiscal-year"],
     ["Previous Calendar Year", "top-video-plays-previous-year"],

diff --git a/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap b/js/components/dashboard_content/__tests__/__snapshots__/BrowsersChart.spec.js.snap
@@ -66,17 +66,17 @@ exports[`BrowsersChart when data is loaded renders a component with data loaded
           <option
             value="browsers-7-days"
           >
-            7 Days
+            Last 7 Days
           </option>
           <option
             value="browsers-30-days"
           >
-            30 Days
+            Last 30 Days
           </option>
           <option
             value="browsers-90-days"
           >
-            90 Days
+            Last 90 Days
           </option>
           <option
             value="browsers-current-year"
@@ -469,17 +469,17 @@ exports[`BrowsersChart when data is not loaded renders a component in loading st
           <option
             value="browsers-7-days"
           >
-            7 Days
+            Last 7 Days
           </option>
           <option
             value="browsers-30-days"
           >
-            30 Days
+            Last 30 Days
           </option>
           <option
             value="browsers-90-days"
           >
-            90 Days
+            Last 90 Days
           </option>
           <option
             value="browsers-current-year"
@@ -574,17 +574,17 @@ exports[`BrowsersChart when data loading has an error renders a component in err
           <option
             value="browsers-7-days"
           >
-            7 Days
+            Last 7 Days
           </option>
           <option
             value="browsers-30-days"
           >
-            30 Days
+            Last 30 Days
           </option>
           <option
             value="browsers-90-days"
           >
-            90 Days
+            Last 90 Days
           </option>
           <option
             value="browsers-current-year"