Add date filters to tech report (#1218)

* Add date filters to tech report

* Linting

Author: tunetheweb

package-lock.json

@@ -1,4 +1,6 @@
 import re
+from datetime import datetime
+
 
 from flask import abort, jsonify, redirect, request, send_from_directory
 from urllib.parse import urlsplit, urlunsplit, parse_qsl, urlencode
@@ -10,6 +12,7 @@
 from . import talisman
 from . import techreport as tech_report_util
 from . import url_for
+from .dates import get_dates
 
 
 def safe_int(value, default=1):
@@ -145,6 +148,17 @@ def techreportlanding(page_id):
 
     last_page = request.args.get("last_page") or False
 
+    all_dates = [
+        {
+            "value": d.replace("_", "-"),
+            "display": datetime.strptime(d, "%Y_%m_%d").strftime("%b %Y"),
+        }
+        for d in get_dates()
+    ]
+
+    requested_start = request.args.get("start") or ""
+    requested_end = request.args.get("end") or ""
+
     filters = {
         "geo": requested_geo,
         "rank": requested_rank,
@@ -154,6 +168,8 @@ def techreportlanding(page_id):
         "last_page": last_page,
         "selected": selected_techs,
         "rows": selected_rows,
+        "start": requested_start,
+        "end": requested_end,
     }
     params = {
         "geo": requested_geo.replace(" ", "+"),
@@ -171,6 +187,7 @@ def techreportlanding(page_id):
         tech_report_page=active_tech_report,
         custom_navigation=True,
         reports=all_reports,
+        all_dates=all_dates,
     )
 
 
@@ -209,11 +226,25 @@ def techreport():
     requested_geo = request.args.get("geo") or "ALL"
     requested_rank = request.args.get("rank") or "ALL"
     requested_category = request.args.get("category") or "ALL"
+
+    all_dates = [
+        {
+            "value": d.replace("_", "-"),
+            "display": datetime.strptime(d, "%Y_%m_%d").strftime("%b %Y"),
+        }
+        for d in get_dates()
+    ]
+
+    requested_start = request.args.get("start") or ""
+    requested_end = request.args.get("end") or ""
+
     filters = {
         "geo": requested_geo,
         "rank": requested_rank,
         "app": requested_technologies,
         "category": requested_category,
+        "start": requested_start,
+        "end": requested_end,
     }
     params = {
         "geo": requested_geo.replace(" ", "+"),
@@ -242,6 +273,7 @@ def techreport():
         tech_report_page=active_tech_report,
         custom_navigation=True,
         reports=all_reports,
+        all_dates=all_dates,
     )
 
 

server/routes.py

@@ -278,6 +278,29 @@ def test_tech_report_invalid_page(client):
     assert response.status_code == 404
 
 
+def test_tech_report_drilldown_with_dates(client):
+    response = client.get(
+        "/reports/techreport/tech?tech=WordPress&geo=ALL&rank=ALL&start=2024-01-01&end=2024-03-01"
+    )
+    data = response.get_data(as_text=True)
+    assert response.status_code == 200
+    assert 'value="2024-01-01" selected' in data
+    assert 'value="2024-03-01" selected' in data
+    assert 'value="2025-01-01" selected' not in data
+
+
+def test_tech_report_comparison_with_dates(client):
+    response = client.get(
+        "/reports/techreport/tech?tech=jQuery%2CWordPress&geo=ALL&rank=ALL&start=2024-01-01&end=2024-03-01"
+    )
+    assert response.status_code == 200
+    data = response.get_data(as_text=True)
+    assert response.status_code == 200
+    assert 'value="2024-01-01" selected' in data
+    assert 'value="2024-03-01" selected' in data
+    assert 'value="2025-01-01" selected' not in data
+
+
 def test_well_known_atproto_did(client):
     response = client.get("/.well-known/atproto-did")
     assert response.status_code == 200

server/tests/routes_test.py

@@ -48,6 +48,8 @@ class Filters {
     const geo = document.getElementsByName('geo')[0].value;
     const rank = document.getElementsByName('rank')[0].value;
     const categories = document.getElementsByName('categories')[0]?.value;
+    const startDate = document.getElementsByName('startDate')[0]?.value;
+    const endDate = document.getElementsByName('endDate')[0]?.value;
 
     /* Create a string of technologies */
     let technologies = [];
@@ -75,6 +77,16 @@ class Filters {
       url.searchParams.append('category', categories);
     }
 
+    url.searchParams.delete('start');
+    if (startDate) {
+      url.searchParams.append('start', startDate);
+    }
+
+    url.searchParams.delete('end');
+    if (endDate) {
+      url.searchParams.append('end', endDate);
+    }
+
     // Reset to page 1 when filters change
     url.searchParams.delete('page');
     url.searchParams.append('page', '1');

src/js/components/filters.js

@@ -241,13 +241,21 @@ class TechReport {
 
     const geo = this.filters.geo.replaceAll(" ", "%20");
     const rank = this.filters.rank.replaceAll(" ", "%20");
+    const start = this.filters.start;
+    const end = this.filters.end;
 
     let allResults = {};
     let techInfo = {};
     technologies.forEach(tech => allResults[tech] = []);
 
     Promise.all(apis.map(api => {
-      const url = `${Constants.apiBase}/${api.endpoint}?technology=${technology}&geo=${geo}&rank=${rank}`;
+      let url = `${Constants.apiBase}/${api.endpoint}?technology=${technology}&geo=${geo}&rank=${rank}`;
+      if (start) {
+        url += `&start=${start}`;
+      }
+      if (end) {
+        url += `&end=${end}`;
+      }
 
       return fetch(url)
         .then(result => result.json())

src/js/techreport/index.js

@@ -54,6 +54,8 @@ class TableLinked {
       const filters = new URLSearchParams(window.location.search);
       const geo = filters.get('geo') || 'ALL';
       const rank = filters.get('rank') || 'ALL';
+      const start = filters.get('start') || '';
+      const end = filters.get('end') || '';
 
       // sort data
       const sortEndpoint = component.dataset.sortEndpoint;
@@ -117,7 +119,7 @@ class TableLinked {
 
               const formattedApp = DataUtils.formatAppName(app);
               const link = document.createElement('a');
-              link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}`);
+              link.setAttribute('href', `/reports/techreport/tech?tech=${app}&geo=${geo}&rank=${rank}${start ? '&start=' + start : ''}${end ? '&end=' + end : ''}`);
               link.innerText = formattedApp;
               wrapper.append(link);
               cell.append(wrapper);

src/js/techreport/tableLinked.js

@@ -613,24 +613,23 @@ nav {
   color: var(--color-text-darker);
 }
 
-/* Page filters: Geo and rank */
-#page-filters .lens {
+#page-filters :is(.lens, .date-range) {
   margin-bottom: 1.5rem;
   margin-right: 0;
   margin-top: 1.5rem;
   border-bottom: 1px solid var(--color-separator);
   padding-bottom: 2rem;
 }
 
-#page-filters .lens label,
+#page-filters :is(.lens, .date-range) label,
 .breakdown label {
   color: var(--color-text);
   font-size: 0.875rem;
   font-weight: 600;
   width: 100%;
 }
 
-#page-filters .lens .select-label select {
+#page-filters :is(.lens, .date-range) .select-label select {
   color: var(--color-text-darker);
   font-size: 0.9rem;
   width: 100%;
@@ -645,7 +644,7 @@ nav {
   border: none;
 }
 
-#page-filters .lens .select-label:not(:last-of-type) {
+#page-filters :is(.lens, .date-range) .select-label:not(:last-of-type) {
   margin-bottom: 2rem;
 }
 

static/css/techreport/techreport.css

@@ -92,7 +92,7 @@ <h1>
               </div>
 
               <div class="col-sm-4 col-xs-12">
-                <label for="endDate" title="Optional">
+                <label for="endDate">
                   End Date
                 </label>
 

templates/report/report.html

@@ -50,6 +50,48 @@
         </div>
       </div>
     </fieldset>
+<fieldset class="date-range">
+  <legend class="sr-only">Date range</legend>
+  <div class="default-dropdown-group">
+    <label for="startDate">Start Date</label>
+    <div class="default-dropdown-wrapper">
+      <select name="startDate" id="startDate" class="default-dropdown" disabled>
+        <option value=""></option>
+        {% for d in all_dates %}
+        {% if d.value==tech_report_page.filters.start %}
+        <option value="{{ d.value }}" selected>
+          {{ d.display }}
+        </option>
+        {% else %}
+        <option value="{{ d.value }}">
+          {{ d.display }}
+        </option>
+        {% endif %}
+        {% endfor %}
+      </select>
+    </div>
+  </div>
+
+  <div class="default-dropdown-group">
+    <label for="endDate">End Date</label>
+    <div class="default-dropdown-wrapper">
+      <select name="endDate" id="endDate" class="default-dropdown" disabled>
+        <option value=""></option>
+        {% for d in all_dates %}
+        {% if d.value==tech_report_page.filters.end %}
+        <option value="{{ d.value }}" selected>
+          {{ d.display }}
+        </option>
+        {% else %}
+        <option value="{{ d.value }}">
+          {{ d.display }}
+        </option>
+        {% endif %}
+        {% endfor %}
+      </select>
+    </div>
+  </div>
+</fieldset>
   </div>
   <button type="submit" id="submit-form" class="main-btn">Update</button>
   {% include "techreport/components/filter_meta.html" %}

templates/techreport/templates/filters.html

@@ -67,6 +67,8 @@ const test_status_codes = async () => {
   await test_status_code('/reports/techreport/landing', 200);
   await test_status_code('/reports/techreport/drilldown', 200);
   await test_status_code('/reports/techreport/comparison', 200);
+  await test_status_code('/reports/techreport/tech?tech=WordPress&geo=ALL&rank=ALL&start=2024-01-01&end=2024-03-01', 200);
+  await test_status_code('/reports/techreport/tech?tech=jQuery%2CWordPress&geo=ALL&rank=ALL&start=2024-01-01&end=2024-03-01', 200);
 
   // Test non-sitemap pages
   await test_status_code('/sitemap.xml', 200);