From ef85cf40b489cbd4d524cf3e7730af38a79b1a64 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Wed, 3 May 2023 13:12:29 +0200 Subject: [PATCH 001/155] add dashboard templates example --- config/reports.json | 20 +++++++++++++++++++- server/routes.py | 15 +++++++++++++++ static/css/dashboard.css | 4 ++++ templates/dashboard/comparison.html | 5 +++++ templates/dashboard/dashboard.html | 29 +++++++++++++++++++++++++++++ templates/dashboard/drilldown.html | 5 +++++ templates/dashboard/landing.html | 5 +++++ 7 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 static/css/dashboard.css create mode 100644 templates/dashboard/comparison.html create mode 100644 templates/dashboard/dashboard.html create mode 100644 templates/dashboard/drilldown.html create mode 100644 templates/dashboard/landing.html diff --git a/config/reports.json b/config/reports.json index 7d7fd4b1..5abc33ea 100644 --- a/config/reports.json +++ b/config/reports.json @@ -10,7 +10,8 @@ "page-weight", "chrome-ux-report", "project-fugu", - "cwv-tech" + "cwv-tech", + "cwv-tech-new" ], "_featured": [ "state-of-the-web" @@ -1367,5 +1368,22 @@ "icon": "fas fa-tachometer-alt" } } + }, + "cwv-tech-new": { + "name": "New Core Web Vitals Technology Report", + "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.", + "type": "dashboard", + "metrics": [], + "graphic": { + "bgcolor": "#fff", + "primary": { + "color": "#444", + "icon": "fas fa-wrench" + }, + "secondary": { + "color": "rgba(0, 0, 0, 0.3)", + "icon": "fas fa-tachometer-alt" + } + } } } diff --git a/server/routes.py b/server/routes.py index 5246cb56..d6edecf2 100644 --- a/server/routes.py +++ b/server/routes.py @@ -66,6 +66,17 @@ def reports(): return render_template("reports.html", reports=all_reports) +@app.route("/reports//", strict_slashes=False) +def dashboard(report_id, section_id): + report = report_util.get_report(report_id) + + if report.get("type"): + if report.get("type") == "dashboard": + return render_template( + "dashboard/%s.html" % section_id, + report=report, + ) + @app.route("/reports/", strict_slashes=False) def report(report_id): @@ -76,6 +87,10 @@ def report(report_id): if not report: abort(404) + if report.get("type"): + if report.get("type") == "dashboard": + return redirect('/reports/%s/%s' % (report_id, 'landing')) + report_url = report_util.get_report(report_id).get("url") if report_url: return redirect(report_url), 302 diff --git a/static/css/dashboard.css b/static/css/dashboard.css new file mode 100644 index 00000000..f4966b2d --- /dev/null +++ b/static/css/dashboard.css @@ -0,0 +1,4 @@ +main nav { + padding: 1rem; + background-color: #fff; +} \ No newline at end of file diff --git a/templates/dashboard/comparison.html b/templates/dashboard/comparison.html new file mode 100644 index 00000000..d5ed8dd9 --- /dev/null +++ b/templates/dashboard/comparison.html @@ -0,0 +1,5 @@ +{% extends "dashboard/dashboard.html" %} + +{% block section %} +

Tech comparison

+{% endblock %} \ No newline at end of file diff --git a/templates/dashboard/dashboard.html b/templates/dashboard/dashboard.html new file mode 100644 index 00000000..c84f4eed --- /dev/null +++ b/templates/dashboard/dashboard.html @@ -0,0 +1,29 @@ +{% extends "main.html" %} + +{% block title %}HTTP Archive: {{ (report.lens and '%s: ' % report.lens.name or '') +report.name }}{% endblock %} +{% block description %}{{ report.summary | markdown | striptags }}{% endblock %} + +{% block head %} + {{ super() }} + +{% endblock %} + +{% block main %} + +

Prototype dashboard for {{ report.name }}

+ +

Page content:

+ {% block section %}{% endblock %} +{% endblock %} \ No newline at end of file diff --git a/templates/dashboard/drilldown.html b/templates/dashboard/drilldown.html new file mode 100644 index 00000000..5b062c86 --- /dev/null +++ b/templates/dashboard/drilldown.html @@ -0,0 +1,5 @@ +{% extends "dashboard/dashboard.html" %} + +{% block section %} +

Tech drilldown

+{% endblock %} \ No newline at end of file diff --git a/templates/dashboard/landing.html b/templates/dashboard/landing.html new file mode 100644 index 00000000..b0767739 --- /dev/null +++ b/templates/dashboard/landing.html @@ -0,0 +1,5 @@ +{% extends "dashboard/dashboard.html" %} + +{% block section %} +

Landing page, search for things here

+{% endblock %} \ No newline at end of file From 9e7aaa47935d6c63eb1e606bc8eab4285de15021 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sat, 6 May 2023 17:21:27 +0200 Subject: [PATCH 002/155] move to techreport.json/.py, out of reports --- config/mock_cwv_response.json | 0 config/techreport.json | 17 ++++++++++ server/routes.py | 31 ++++++++++-------- server/techreport.py | 15 +++++++++ static/css/dashboard.css | 50 ++++++++++++++++++++++++++++-- templates/dashboard/dashboard.html | 31 +++++++++--------- templates/dashboard/landing.html | 35 ++++++++++++++++++++- 7 files changed, 147 insertions(+), 32 deletions(-) create mode 100644 config/mock_cwv_response.json create mode 100644 config/techreport.json create mode 100644 server/techreport.py diff --git a/config/mock_cwv_response.json b/config/mock_cwv_response.json new file mode 100644 index 00000000..e69de29b diff --git a/config/techreport.json b/config/techreport.json new file mode 100644 index 00000000..3c8fcf1f --- /dev/null +++ b/config/techreport.json @@ -0,0 +1,17 @@ +{ + "name": "New Core Web Vitals Technology Report", + "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.", + "type": "dashboard", + "metrics": [], + "graphic": { + "bgcolor": "#fff", + "primary": { + "color": "#444", + "icon": "fas fa-wrench" + }, + "secondary": { + "color": "rgba(0, 0, 0, 0.3)", + "icon": "fas fa-tachometer-alt" + } + } +} \ No newline at end of file diff --git a/server/routes.py b/server/routes.py index d6edecf2..fb7ac767 100644 --- a/server/routes.py +++ b/server/routes.py @@ -4,6 +4,7 @@ from . import app, talisman, render_template, url_for from . import reports as report_util +from . import techreport as tech_report_util from . import faq as faq_util @@ -66,16 +67,24 @@ def reports(): return render_template("reports.html", reports=all_reports) -@app.route("/reports//", strict_slashes=False) -def dashboard(report_id, section_id): - report = report_util.get_report(report_id) +@app.route("/reports/techreport/", strict_slashes=False) +def dashboard(section_id): + report = tech_report_util.get_report() + + print('report') + print(report) + + return render_template( + "dashboard/%s.html" % section_id, + report=report, + ) - if report.get("type"): - if report.get("type") == "dashboard": - return render_template( - "dashboard/%s.html" % section_id, - report=report, - ) + # if report.get("type"): + # if report.get("type") == "dashboard": + # return render_template( + # "dashboard/%s.html" % section_id, + # report=report, + # ) @app.route("/reports/", strict_slashes=False) def report(report_id): @@ -87,10 +96,6 @@ def report(report_id): if not report: abort(404) - if report.get("type"): - if report.get("type") == "dashboard": - return redirect('/reports/%s/%s' % (report_id, 'landing')) - report_url = report_util.get_report(report_id).get("url") if report_url: return redirect(report_url), 302 diff --git a/server/techreport.py b/server/techreport.py new file mode 100644 index 00000000..d3349f1a --- /dev/null +++ b/server/techreport.py @@ -0,0 +1,15 @@ +import json + +def update_report(): + global tech_report_json + with open("config/techreport.json") as tech_report_file: + tech_report_json = json.load(tech_report_file) + + +def get_report(): + global tech_report_json + update_report() + + return tech_report_json + +update_report() \ No newline at end of file diff --git a/static/css/dashboard.css b/static/css/dashboard.css index f4966b2d..50efec82 100644 --- a/static/css/dashboard.css +++ b/static/css/dashboard.css @@ -1,4 +1,50 @@ -main nav { +:root { + --color-brand-faded: #A6BBBE; + --color-text: #444444; + + --color-card-background: #fff; + --color-card-border: var(--color-brand-faded); + --shadow-card: 0 3px 12px -2px rgba(106, 121, 124, 0.2); +} + +main { + color: var(--color-text); +} + +.card { padding: 1rem; - background-color: #fff; + background: var(--color-card-background); + border-radius: 0.625rem; + border: 1px solid var(--color-card-border); + box-shadow: var(--shadow-card); +} + +.block { + max-width: 70rem; + margin-left: auto; + margin-right: auto; +} + +#landing-pages { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + column-gap: 2rem; + row-gap: 2rem; + +} + +#landing-pages .card { + padding: 1.5rem 1.75rem; + flex: 1; +} + +#landing-pages .card h2 { + font-size: 1.5rem; + margin-top: 0; + margin-bottom: 1rem; +} + +#landing-pages .card h2 + p { + margin: 0; + padding: 0; } \ No newline at end of file diff --git a/templates/dashboard/dashboard.html b/templates/dashboard/dashboard.html index c84f4eed..be6f6a33 100644 --- a/templates/dashboard/dashboard.html +++ b/templates/dashboard/dashboard.html @@ -1,6 +1,6 @@ {% extends "main.html" %} -{% block title %}HTTP Archive: {{ (report.lens and '%s: ' % report.lens.name or '') +report.name }}{% endblock %} +{% block title %}HTTP Archive: {{ report.name }}{% endblock %} {% block description %}{{ report.summary | markdown | striptags }}{% endblock %} {% block head %} @@ -9,21 +9,20 @@ {% endblock %} {% block main %} - -

Prototype dashboard for {{ report.name }}

-

Page content:

{% block section %}{% endblock %} + +

Debug:

+ + {% endblock %} \ No newline at end of file diff --git a/templates/dashboard/landing.html b/templates/dashboard/landing.html index b0767739..ee9bb06c 100644 --- a/templates/dashboard/landing.html +++ b/templates/dashboard/landing.html @@ -1,5 +1,38 @@ {% extends "dashboard/dashboard.html" %} {% block section %} -

Landing page, search for things here

+
+

+ + Report: + + {% block reportName %}{{ report.name }}{% endblock %} +

+ + {{ report.summary | markdown }} +
+ +
+
+

Technology Drilldown

+

Get detailed information about one technology.

+
+
+

Technology Comparison

+

Get detailed information about two to ten technologies.

+
+
+ +
+

Interesting to explore

+
+

Popular technologies

+

+ We have data on XXX technologies, across XXX categories. In total XXX origins were assessed. + This is a selection of some the technologies used on the most websites. +

+

Table comes here

+ Compare technologies +
+
{% endblock %} \ No newline at end of file From 836744216dcf9e04d5112818d6cded6f2391ec6c Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sat, 6 May 2023 17:41:59 +0200 Subject: [PATCH 003/155] rename dashboard to tech_report --- config/reports.json | 20 +------------ config/techreport.json | 2 +- server/routes.py | 17 ++++------- static/css/{dashboard.css => techreport.css} | 0 templates/dashboard/dashboard.html | 28 ------------------ templates/main.html | 8 +++++ .../{dashboard => techreport}/comparison.html | 2 +- .../{dashboard => techreport}/drilldown.html | 2 +- .../{dashboard => techreport}/landing.html | 10 +++---- templates/techreport/techreport.html | 29 +++++++++++++++++++ 10 files changed, 51 insertions(+), 67 deletions(-) rename static/css/{dashboard.css => techreport.css} (100%) delete mode 100644 templates/dashboard/dashboard.html rename templates/{dashboard => techreport}/comparison.html (58%) rename templates/{dashboard => techreport}/drilldown.html (57%) rename templates/{dashboard => techreport}/landing.html (69%) create mode 100644 templates/techreport/techreport.html diff --git a/config/reports.json b/config/reports.json index 5abc33ea..7d7fd4b1 100644 --- a/config/reports.json +++ b/config/reports.json @@ -10,8 +10,7 @@ "page-weight", "chrome-ux-report", "project-fugu", - "cwv-tech", - "cwv-tech-new" + "cwv-tech" ], "_featured": [ "state-of-the-web" @@ -1368,22 +1367,5 @@ "icon": "fas fa-tachometer-alt" } } - }, - "cwv-tech-new": { - "name": "New Core Web Vitals Technology Report", - "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.", - "type": "dashboard", - "metrics": [], - "graphic": { - "bgcolor": "#fff", - "primary": { - "color": "#444", - "icon": "fas fa-wrench" - }, - "secondary": { - "color": "rgba(0, 0, 0, 0.3)", - "icon": "fas fa-tachometer-alt" - } - } } } diff --git a/config/techreport.json b/config/techreport.json index 3c8fcf1f..c90f2f8f 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -1,7 +1,7 @@ { + "id": "techreport", "name": "New Core Web Vitals Technology Report", "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.", - "type": "dashboard", "metrics": [], "graphic": { "bgcolor": "#fff", diff --git a/server/routes.py b/server/routes.py index fb7ac767..f51961cb 100644 --- a/server/routes.py +++ b/server/routes.py @@ -68,23 +68,16 @@ def reports(): @app.route("/reports/techreport/", strict_slashes=False) -def dashboard(section_id): +def techreport(section_id): report = tech_report_util.get_report() - print('report') - print(report) + all_reports = report_util.get_reports() return render_template( - "dashboard/%s.html" % section_id, - report=report, + "techreport/%s.html" % section_id, + tech_report=report, + reports=all_reports, ) - - # if report.get("type"): - # if report.get("type") == "dashboard": - # return render_template( - # "dashboard/%s.html" % section_id, - # report=report, - # ) @app.route("/reports/", strict_slashes=False) def report(report_id): diff --git a/static/css/dashboard.css b/static/css/techreport.css similarity index 100% rename from static/css/dashboard.css rename to static/css/techreport.css diff --git a/templates/dashboard/dashboard.html b/templates/dashboard/dashboard.html deleted file mode 100644 index be6f6a33..00000000 --- a/templates/dashboard/dashboard.html +++ /dev/null @@ -1,28 +0,0 @@ -{% extends "main.html" %} - -{% block title %}HTTP Archive: {{ report.name }}{% endblock %} -{% block description %}{{ report.summary | markdown | striptags }}{% endblock %} - -{% block head %} - {{ super() }} - -{% endblock %} - -{% block main %} - - {% block section %}{% endblock %} - -

Debug:

- - -{% endblock %} \ No newline at end of file diff --git a/templates/main.html b/templates/main.html index 43a2c070..173f9abb 100644 --- a/templates/main.html +++ b/templates/main.html @@ -117,6 +117,14 @@ {% endfor %} + {% if tech_report %} + {% set url = tech_report.url or url_for('report', report_id=tech_report.id) %} +
  • + + {{ tech_report.name }} + +
    • + {% endif %}
  • diff --git a/templates/dashboard/comparison.html b/templates/techreport/comparison.html similarity index 58% rename from templates/dashboard/comparison.html rename to templates/techreport/comparison.html index d5ed8dd9..5733ea69 100644 --- a/templates/dashboard/comparison.html +++ b/templates/techreport/comparison.html @@ -1,4 +1,4 @@ -{% extends "dashboard/dashboard.html" %} +{% extends "techreport/techreport.html" %} {% block section %}

    Tech comparison

    diff --git a/templates/dashboard/drilldown.html b/templates/techreport/drilldown.html similarity index 57% rename from templates/dashboard/drilldown.html rename to templates/techreport/drilldown.html index 5b062c86..1a474c34 100644 --- a/templates/dashboard/drilldown.html +++ b/templates/techreport/drilldown.html @@ -1,4 +1,4 @@ -{% extends "dashboard/dashboard.html" %} +{% extends "techreport/techreport.html" %} {% block section %}

    Tech drilldown

    diff --git a/templates/dashboard/landing.html b/templates/techreport/landing.html similarity index 69% rename from templates/dashboard/landing.html rename to templates/techreport/landing.html index ee9bb06c..14bf0063 100644 --- a/templates/dashboard/landing.html +++ b/templates/techreport/landing.html @@ -1,4 +1,4 @@ -{% extends "dashboard/dashboard.html" %} +{% extends "techreport/techreport.html" %} {% block section %}
    @@ -6,7 +6,7 @@

    Report: - {% block reportName %}{{ report.name }}{% endblock %} + {% block reportName %}{{ tech_report.name }}{% endblock %}

    {{ report.summary | markdown }} @@ -14,11 +14,11 @@

    -

    Technology Drilldown

    +

    Technology Drilldown

    Get detailed information about one technology.

    -

    Technology Comparison

    +

    Technology Comparison

    Get detailed information about two to ten technologies.

    @@ -32,7 +32,7 @@

    Popular technologies

    This is a selection of some the technologies used on the most websites.

    Table comes here

    - Compare technologies + Compare technologies
    {% endblock %} \ No newline at end of file diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html new file mode 100644 index 00000000..f70dca0c --- /dev/null +++ b/templates/techreport/techreport.html @@ -0,0 +1,29 @@ +{% set report = tech_report %} +{% extends "main.html" %} + +{% block title %}HTTP Archive: {{ tech_report.name }}{% endblock %} +{% block description %}{{ tech_report.summary | markdown | striptags }}{% endblock %} + +{% block head %} + {{ super() }} + +{% endblock %} + +{% block main %} + + {% block section %}{% endblock %} + +

    Debug:

    + + +{% endblock %} \ No newline at end of file From b02b3492780c3baf5f2f32b31d60b3c17656f4c1 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 8 May 2023 21:04:54 +0200 Subject: [PATCH 004/155] add techreport as a link in the reports.json instead of almost hardcoding it into the main.html --- config/reports.json | 20 +++++++++++++++++++- templates/main.html | 8 -------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/config/reports.json b/config/reports.json index 7d7fd4b1..7b4ee649 100644 --- a/config/reports.json +++ b/config/reports.json @@ -10,7 +10,8 @@ "page-weight", "chrome-ux-report", "project-fugu", - "cwv-tech" + "cwv-tech", + "cwv-tech-new" ], "_featured": [ "state-of-the-web" @@ -1367,5 +1368,22 @@ "icon": "fas fa-tachometer-alt" } } + }, + "cwv-tech-new": { + "name": "New Core Web Vitals Technology Report", + "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.", + "url": "/reports/techreport/landing", + "metrics": [], + "graphic": { + "bgcolor": "#fff", + "primary": { + "color": "#444", + "icon": "fas fa-wrench" + }, + "secondary": { + "color": "rgba(0, 0, 0, 0.3)", + "icon": "fas fa-tachometer-alt" + } + } } } diff --git a/templates/main.html b/templates/main.html index 173f9abb..43a2c070 100644 --- a/templates/main.html +++ b/templates/main.html @@ -117,14 +117,6 @@
    • {% endfor %} - {% if tech_report %} - {% set url = tech_report.url or url_for('report', report_id=tech_report.id) %} -
  • - - {{ tech_report.name }} - -
    • - {% endif %}
  • From 6c31546a066e2ccc9d96b7c242d607d50ecaa01c Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Fri, 12 May 2023 01:41:14 +0200 Subject: [PATCH 005/155] start adding components and cleaning up structure --- .../mock_responses/popular/good_vitals.json | 78 ++++++++++++++++++ .../popular/metadata.json} | 0 config/mock_responses/popular/origins.json | 54 +++++++++++++ config/techreport.json | 18 ++++- server/routes.py | 5 +- static/css/techreport.css | 50 ------------ static/css/techreport/landing.css | 81 +++++++++++++++++++ static/css/techreport/techreport.css | 27 +++++++ static/css/techreport/variables.css | 14 ++++ templates/techreport/comparison.html | 3 +- templates/techreport/components/table.html | 33 ++++++++ templates/techreport/drilldown.html | 3 +- templates/techreport/landing.html | 80 +++++++++++------- templates/techreport/report.html | 17 ++++ templates/techreport/techreport.html | 16 +--- 15 files changed, 383 insertions(+), 96 deletions(-) create mode 100644 config/mock_responses/popular/good_vitals.json rename config/{mock_cwv_response.json => mock_responses/popular/metadata.json} (100%) create mode 100644 config/mock_responses/popular/origins.json delete mode 100644 static/css/techreport.css create mode 100644 static/css/techreport/landing.css create mode 100644 static/css/techreport/techreport.css create mode 100644 static/css/techreport/variables.css create mode 100644 templates/techreport/components/table.html create mode 100644 templates/techreport/report.html diff --git a/config/mock_responses/popular/good_vitals.json b/config/mock_responses/popular/good_vitals.json new file mode 100644 index 00000000..b4e27d1f --- /dev/null +++ b/config/mock_responses/popular/good_vitals.json @@ -0,0 +1,78 @@ +{ + "results": [ + { + "technology_name": "Wordpress", + "origins": [ + { + "date": "2022-04-22T00:00:00.000Z", + "origins": "16173173", + "origins_dataset": "72438921" + }, + { + "date": "2022-03-22T00:00:00.000Z", + "origins": "15173173", + "origins_dataset": "70337805" + }, + { + "date": "2022-02-22T00:00:00.000Z", + "origins": "15173275", + "origins_dataset": "70337805" + }, + { + "date": "2022-01-22T00:00:00.000Z", + "origins": "13236250", + "origins_dataset": "70125002" + } + ], + "vitals": [ + { + "date": "2022-04-22T00:00:00.000Z", + "name": "overall", + "tested": 10, + "good_number": { + "desktop": 4, + "mobile": 7, + "dataset": 6 + } + } + ] + }, + { + "technology_name": "Squarespace", + "origins": [ + { + "date": "2022-04-22T00:00:00.000Z", + "origins": "16173173", + "origins_dataset": "72438921" + }, + { + "date": "2022-03-22T00:00:00.000Z", + "origins": "15173173", + "origins_dataset": "70337805" + }, + { + "date": "2022-02-22T00:00:00.000Z", + "origins": "15173275", + "origins_dataset": "70337805" + }, + { + "date": "2022-01-22T00:00:00.000Z", + "origins": "13236250", + "origins_dataset": "70125002" + } + ], + "vitals": [ + { + "date": "2022-04-22T00:00:00.000Z", + "name": "overall", + "tested": 10, + "good_number": { + "desktop": 4, + "mobile": 7, + "dataset": 6 + } + } + ] + } + ] +} \ No newline at end of file diff --git a/config/mock_cwv_response.json b/config/mock_responses/popular/metadata.json similarity index 100% rename from config/mock_cwv_response.json rename to config/mock_responses/popular/metadata.json diff --git a/config/mock_responses/popular/origins.json b/config/mock_responses/popular/origins.json new file mode 100644 index 00000000..352c4524 --- /dev/null +++ b/config/mock_responses/popular/origins.json @@ -0,0 +1,54 @@ +{ + "results": [ + { + "technology_name": "Wordpress", + "origins": [ + { + "date": "2022-04-22T00:00:00.000Z", + "origins": "16173173", + "origins_dataset": "72438921" + }, + { + "date": "2022-03-22T00:00:00.000Z", + "origins": "15173173", + "origins_dataset": "70337805" + }, + { + "date": "2022-02-22T00:00:00.000Z", + "origins": "15173275", + "origins_dataset": "70337805" + }, + { + "date": "2022-01-22T00:00:00.000Z", + "origins": "13236250", + "origins_dataset": "70125002" + } + ] + }, + { + "technology_name": "Squarespace", + "origins": [ + { + "date": "2022-04-22T00:00:00.000Z", + "origins": "16173173", + "origins_dataset": "72438921" + }, + { + "date": "2022-03-22T00:00:00.000Z", + "origins": "15173173", + "origins_dataset": "70337805" + }, + { + "date": "2022-02-22T00:00:00.000Z", + "origins": "15173275", + "origins_dataset": "70337805" + }, + { + "date": "2022-01-22T00:00:00.000Z", + "origins": "13236250", + "origins_dataset": "70125002" + } + ] + } + ] +} \ No newline at end of file diff --git a/config/techreport.json b/config/techreport.json index c90f2f8f..c0c4bc52 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -1,8 +1,24 @@ { "id": "techreport", - "name": "New Core Web Vitals Technology Report", + "name": "Technology Report", "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.", "metrics": [], + "pages": [ + { + "id": "landing", + "name": "Technology Report", + "blocks": [ + { + "name": "Popular Technologies", + "description": "Placeholder description", + "type": "table", + "filter": { + "technologies": ["Wordpress", "Squarespace"] + } + } + ] + } + ], "graphic": { "bgcolor": "#fff", "primary": { diff --git a/server/routes.py b/server/routes.py index f51961cb..a6669e53 100644 --- a/server/routes.py +++ b/server/routes.py @@ -69,13 +69,14 @@ def reports(): @app.route("/reports/techreport/", strict_slashes=False) def techreport(section_id): - report = tech_report_util.get_report() + tech_report = tech_report_util.get_report() all_reports = report_util.get_reports() return render_template( "techreport/%s.html" % section_id, - tech_report=report, + tech_report=tech_report, + tech_report_page=tech_report.get('pages')[0], reports=all_reports, ) diff --git a/static/css/techreport.css b/static/css/techreport.css deleted file mode 100644 index 50efec82..00000000 --- a/static/css/techreport.css +++ /dev/null @@ -1,50 +0,0 @@ -:root { - --color-brand-faded: #A6BBBE; - --color-text: #444444; - - --color-card-background: #fff; - --color-card-border: var(--color-brand-faded); - --shadow-card: 0 3px 12px -2px rgba(106, 121, 124, 0.2); -} - -main { - color: var(--color-text); -} - -.card { - padding: 1rem; - background: var(--color-card-background); - border-radius: 0.625rem; - border: 1px solid var(--color-card-border); - box-shadow: var(--shadow-card); -} - -.block { - max-width: 70rem; - margin-left: auto; - margin-right: auto; -} - -#landing-pages { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); - column-gap: 2rem; - row-gap: 2rem; - -} - -#landing-pages .card { - padding: 1.5rem 1.75rem; - flex: 1; -} - -#landing-pages .card h2 { - font-size: 1.5rem; - margin-top: 0; - margin-bottom: 1rem; -} - -#landing-pages .card h2 + p { - margin: 0; - padding: 0; -} \ No newline at end of file diff --git a/static/css/techreport/landing.css b/static/css/techreport/landing.css new file mode 100644 index 00000000..58e351e1 --- /dev/null +++ b/static/css/techreport/landing.css @@ -0,0 +1,81 @@ +header { + margin: 0; +} + +.intro { + border: none; + margin-top: 0; + background-color: transparent; + padding: 4rem 0; +} + +h1 { + font-size: var(--font-size-large); + margin-bottom: 2.5rem; + margin-top: 0; +} + +h1 span { + font-size: var(--font-size-regular); + display: block; + margin-bottom: 0.5rem; +} + +p { + font-size: var(--font-size-regular); +} + +h1 + p { + padding: 0; +} + +.choices-wrapper { + background-image: linear-gradient(to bottom, #9bb8bb 0%, #d7e0e1 100%); + padding: 4rem 0; + margin-top: 4rem; +} + +.choices { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + column-gap: 2rem; + row-gap: 1rem; + margin-top: -8rem; + margin-bottom: 4rem; +} + +.choices .card { + padding: 1.5rem 1.75rem; +} + +.choices .card h2 { + font-size: 1.5rem; + margin-top: 0; + margin-bottom: 1rem; +} + +.choices .card h2 + p { + margin: 0; + padding: 0; +} + +.latest-info h2 { + font-size: 1rem; + font-weight: 600; +} + +.latest-info .stats { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; +} + +.latest-info h3 { + font-size: var(--font-size-regular); +} + +.latest-info p.value { + font-size: var(--font-size-medium); + font-weight: 600; +} \ No newline at end of file diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css new file mode 100644 index 00000000..7e7868f5 --- /dev/null +++ b/static/css/techreport/techreport.css @@ -0,0 +1,27 @@ + + +main { + color: var(--color-text); +} + +.card { + padding: 1rem; + background: var(--color-card-background); + border-radius: 0.625rem; + border: 1px solid var(--color-card-border); + box-shadow: var(--shadow-card); +} + +.block-s { + width: 50rem; + max-width: 90%; + margin-left: auto; + margin-right: auto; +} + +.block-m { + width: 70rem; + max-width: 95%; + margin-left: auto; + margin-right: auto; +} diff --git a/static/css/techreport/variables.css b/static/css/techreport/variables.css new file mode 100644 index 00000000..099c5ea9 --- /dev/null +++ b/static/css/techreport/variables.css @@ -0,0 +1,14 @@ +:root { + --color-brand-faded: #A6BBBE; + + --color-text: #444444; + + --color-card-background: #fff; + --color-card-border: var(--color-brand-faded); + + --shadow-card: 0 3px 12px -2px rgba(106, 121, 124, 0.2); + + --font-size-regular: 1.15rem; + --font-size-medium: 1.75rem; + --font-size-large: 2.25rem; +} \ No newline at end of file diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html index 5733ea69..567058d7 100644 --- a/templates/techreport/comparison.html +++ b/templates/techreport/comparison.html @@ -1,5 +1,6 @@ -{% extends "techreport/techreport.html" %} +{% extends "techreport/report.html" %} {% block section %} + {{ super() }}

    Tech comparison

    {% endblock %} \ No newline at end of file diff --git a/templates/techreport/components/table.html b/templates/techreport/components/table.html new file mode 100644 index 00000000..ab363ed5 --- /dev/null +++ b/templates/techreport/components/table.html @@ -0,0 +1,33 @@ +
    +

    {{ block.name }}

    + +

    + {{ block.description }} +

    + + + + + + + + + + + + + + + + + + + + + + + +
    {{ block.name }}
    TechnologyOriginsGood CWVs
    Wordpress16,263,16378%
    Squarespace5,479,00653%
    + + {{ ctaLabel }} +
    \ No newline at end of file diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index 1a474c34..d1aac740 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -1,5 +1,6 @@ -{% extends "techreport/techreport.html" %} +{% extends "techreport/report.html" %} {% block section %} + {{ super() }}

    Tech drilldown

    {% endblock %} \ No newline at end of file diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index 14bf0063..c1289cc5 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -1,38 +1,64 @@ {% extends "techreport/techreport.html" %} +{% block head %} + {{ super() }} + +{% endblock %} + {% block section %} -
    +

    - - Report: - + Report {% block reportName %}{{ tech_report.name }}{% endblock %}

    {{ report.summary | markdown }} -
    -
    -
    -

    Technology Drilldown

    -

    Get detailed information about one technology.

    -
    -
    -

    Technology Comparison

    -

    Get detailed information about two to ten technologies.

    -
    -
    - -
    -

    Interesting to explore

    -
    -

    Popular technologies

    -

    - We have data on XXX technologies, across XXX categories. In total XXX origins were assessed. - This is a selection of some the technologies used on the most websites. -

    -

    Table comes here

    - Compare technologies +
    + +
    +
    +
    +

    Technology Drilldown

    +

    Get detailed information about one technology.

    +
    +
    +

    Technology Comparison

    +

    Get detailed information about two to ten technologies.

    +
    -
    + +
    +

    About our dataset

    +
    +
    +

    Last updated

    +

    Timestamp

    +
    + +
    +

    Websites tested

    +

    123456

    +
    + +
    +

    Good CWVs amongst top websites

    +

    70%

    +
    +
    +
    + + +
    +

    Dive into our data

    + + {% for block in tech_report_page.get("blocks") %} + {% if block.type == "table" %} + {% set ctaUrl = "/reports/{{ tech_report.id }}/comparison?tech=wordpress" %} + {% set ctaLabel = "Compare technologies" %} + {% include "techreport/components/table.html" %} + {% endif %} + {% endfor %} + +
    {% endblock %} \ No newline at end of file diff --git a/templates/techreport/report.html b/templates/techreport/report.html new file mode 100644 index 00000000..10fd1ce7 --- /dev/null +++ b/templates/techreport/report.html @@ -0,0 +1,17 @@ +{% extends "techreport/techreport.html" %} + +{% block section %} + +{% endblock %} \ No newline at end of file diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html index f70dca0c..20a6ed2d 100644 --- a/templates/techreport/techreport.html +++ b/templates/techreport/techreport.html @@ -6,24 +6,12 @@ {% block head %} {{ super() }} - + + {% endblock %} {% block main %} {% block section %}{% endblock %} - -

    Debug:

    - {% endblock %} \ No newline at end of file From 850f47b4776958b0d35999fbf561844232f2e90a Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Fri, 12 May 2023 15:04:14 +0200 Subject: [PATCH 006/155] add drilldown/comparison toggle header --- config/techreport.json | 41 ++++++++++++++++---- server/routes.py | 11 +++--- static/css/techreport/landing.css | 30 -------------- static/css/techreport/report.css | 33 ++++++++++++++++ static/css/techreport/techreport.css | 35 +++++++++++++++++ static/css/techreport/variables.css | 2 + templates/techreport/comparison.html | 1 - templates/techreport/components/heading.html | 8 ++++ templates/techreport/drilldown.html | 1 - templates/techreport/landing.html | 8 +--- templates/techreport/report.html | 17 +++++--- templates/techreport/techreport.html | 2 +- 12 files changed, 131 insertions(+), 58 deletions(-) create mode 100644 static/css/techreport/report.css create mode 100644 templates/techreport/components/heading.html diff --git a/config/techreport.json b/config/techreport.json index c0c4bc52..d6b1925d 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -3,22 +3,47 @@ "name": "Technology Report", "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.", "metrics": [], - "pages": [ - { + "pages": { + "landing": { "id": "landing", - "name": "Technology Report", + "title": "Technology Report", + "subtitle": "Report", + "description": "This is placeholder text about how the report works", "blocks": [ { "name": "Popular Technologies", "description": "Placeholder description", - "type": "table", - "filter": { - "technologies": ["Wordpress", "Squarespace"] - } + "type": "table" + } + ] + }, + "drilldown": { + "id": "drilldown", + "title": "Drilldown", + "subtitle": "Technology Report", + "description": "Drilldown placeholder", + "blocks": [ + { + "name": "Summary", + "description": "Summary table", + "type": "table" + } + ] + }, + "comparison": { + "id": "comparison", + "title": "Comparison", + "subtitle": "Technology Report", + "description": "Comparison placeholder", + "blocks": [ + { + "name": "Summary", + "description": "Summary table", + "type": "table" } ] } - ], + }, "graphic": { "bgcolor": "#fff", "primary": { diff --git a/server/routes.py b/server/routes.py index a6669e53..703c5f22 100644 --- a/server/routes.py +++ b/server/routes.py @@ -67,16 +67,17 @@ def reports(): return render_template("reports.html", reports=all_reports) -@app.route("/reports/techreport/", strict_slashes=False) -def techreport(section_id): +@app.route("/reports/techreport/", strict_slashes=False) +def techreport(page_id): tech_report = tech_report_util.get_report() - all_reports = report_util.get_reports() + active_tech_report=tech_report.get('pages').get(page_id) return render_template( - "techreport/%s.html" % section_id, + "techreport/%s.html" % page_id, + active_page=page_id, tech_report=tech_report, - tech_report_page=tech_report.get('pages')[0], + tech_report_page=active_tech_report, reports=all_reports, ) diff --git a/static/css/techreport/landing.css b/static/css/techreport/landing.css index 58e351e1..234d4399 100644 --- a/static/css/techreport/landing.css +++ b/static/css/techreport/landing.css @@ -1,33 +1,3 @@ -header { - margin: 0; -} - -.intro { - border: none; - margin-top: 0; - background-color: transparent; - padding: 4rem 0; -} - -h1 { - font-size: var(--font-size-large); - margin-bottom: 2.5rem; - margin-top: 0; -} - -h1 span { - font-size: var(--font-size-regular); - display: block; - margin-bottom: 0.5rem; -} - -p { - font-size: var(--font-size-regular); -} - -h1 + p { - padding: 0; -} .choices-wrapper { background-image: linear-gradient(to bottom, #9bb8bb 0%, #d7e0e1 100%); diff --git a/static/css/techreport/report.css b/static/css/techreport/report.css new file mode 100644 index 00000000..46b19874 --- /dev/null +++ b/static/css/techreport/report.css @@ -0,0 +1,33 @@ +.report-navigation { + color: var(--color-text); + background-color: var(--color-card-background); + border-top: 1px solid var(--color-page-background); + border-bottom: 1px solid var(--color-page-background); +} + +.report-navigation ul li { + text-transform: none; +} + +.report-navigation ul li a { + padding: 0.75rem 0.25rem; +} + +.report-navigation ul li a[aria-current="page"] { + border-bottom: 3px solid var(--color-text); +} + +.report-navigation ul li:hover { + background-color: transparent; +} + +.report-navigation ul li a:hover { + color: var(--color-text); + background-color: transparent; + text-decoration: none; +} + +.report-navigation ul li a:not([aria-current="page"]):hover { + border-bottom: 3px solid var(--color-brand-faded); +} + diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 7e7868f5..dbf0f57f 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -25,3 +25,38 @@ main { margin-left: auto; margin-right: auto; } + + +.block-l { + width: 85rem; + max-width: 98%; + margin-left: auto; + margin-right: auto; +} + +.intro { + border: none; + margin-top: 0; + background-color: transparent; + padding: 4rem 0; +} + +.intro h1 { + font-size: var(--font-size-large); + margin-bottom: 2.5rem; + margin-top: 0; +} + +.intro h1 span { + font-size: var(--font-size-regular); + display: block; + margin-bottom: 0.5rem; +} + +.intro p { + font-size: var(--font-size-regular); +} + +.intro h1 + p { + padding: 0; +} diff --git a/static/css/techreport/variables.css b/static/css/techreport/variables.css index 099c5ea9..29b783c0 100644 --- a/static/css/techreport/variables.css +++ b/static/css/techreport/variables.css @@ -6,6 +6,8 @@ --color-card-background: #fff; --color-card-border: var(--color-brand-faded); + --color-page-background: #f4f4f4; + --shadow-card: 0 3px 12px -2px rgba(106, 121, 124, 0.2); --font-size-regular: 1.15rem; diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html index 567058d7..b0d0c0bb 100644 --- a/templates/techreport/comparison.html +++ b/templates/techreport/comparison.html @@ -2,5 +2,4 @@ {% block section %} {{ super() }} -

    Tech comparison

    {% endblock %} \ No newline at end of file diff --git a/templates/techreport/components/heading.html b/templates/techreport/components/heading.html new file mode 100644 index 00000000..1916f578 --- /dev/null +++ b/templates/techreport/components/heading.html @@ -0,0 +1,8 @@ +
    +

    + {{ tech_report_page.subtitle }} + {{ tech_report_page.title }} +

    + + {{ tech_report_page.description | markdown }} +
    \ No newline at end of file diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index d1aac740..b0d0c0bb 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -2,5 +2,4 @@ {% block section %} {{ super() }} -

    Tech drilldown

    {% endblock %} \ No newline at end of file diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index c1289cc5..ce7a3d86 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -6,15 +6,9 @@ {% endblock %} {% block section %} -
    -

    - Report - {% block reportName %}{{ tech_report.name }}{% endblock %} -

    - {{ report.summary | markdown }} + {% include "techreport/components/heading.html" %} -
    diff --git a/templates/techreport/report.html b/templates/techreport/report.html index 10fd1ce7..3360950a 100644 --- a/templates/techreport/report.html +++ b/templates/techreport/report.html @@ -1,17 +1,24 @@ {% extends "techreport/techreport.html" %} +{% block head %} + {{ super() }} + +{% endblock %} + {% block section %} -
    \ No newline at end of file diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index ce7a3d86..783448ee 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -43,7 +43,7 @@

    Good CWVs amongst top websites

    -
    +

    Dive into our data

    {% for block in tech_report_page.get("blocks") %} From 10622e04265c11aab54b4964d87fd8a2075e3347 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Fri, 12 May 2023 18:39:57 +0200 Subject: [PATCH 008/155] fetch mock responses (needs code cleanup) --- .../popular/{origins.json => adoption.json} | 19 +------ .../mock_responses/popular/good_vitals.json | 56 ++----------------- config/techreport.json | 9 ++- server/routes.py | 10 ++++ server/techreport.py | 16 ++++++ templates/techreport/components/table.html | 17 +++--- templates/techreport/landing.html | 5 +- 7 files changed, 53 insertions(+), 79 deletions(-) rename config/mock_responses/popular/{origins.json => adoption.json} (61%) diff --git a/config/mock_responses/popular/origins.json b/config/mock_responses/popular/adoption.json similarity index 61% rename from config/mock_responses/popular/origins.json rename to config/mock_responses/popular/adoption.json index 352c4524..359e588b 100644 --- a/config/mock_responses/popular/origins.json +++ b/config/mock_responses/popular/adoption.json @@ -30,23 +30,8 @@ "origins": [ { "date": "2022-04-22T00:00:00.000Z", - "origins": "16173173", - "origins_dataset": "72438921" - }, - { - "date": "2022-03-22T00:00:00.000Z", - "origins": "15173173", - "origins_dataset": "70337805" - }, - { - "date": "2022-02-22T00:00:00.000Z", - "origins": "15173275", - "origins_dataset": "70337805" - }, - { - "date": "2022-01-22T00:00:00.000Z", - "origins": "13236250", - "origins_dataset": "70125002" + "origins": "524362", + "origins_dataset": "761353" } ] } diff --git a/config/mock_responses/popular/good_vitals.json b/config/mock_responses/popular/good_vitals.json index b4e27d1f..fcac2679 100644 --- a/config/mock_responses/popular/good_vitals.json +++ b/config/mock_responses/popular/good_vitals.json @@ -1,29 +1,7 @@ { "results": [ { - "technology_name": "Wordpress", - "origins": [ - { - "date": "2022-04-22T00:00:00.000Z", - "origins": "16173173", - "origins_dataset": "72438921" - }, - { - "date": "2022-03-22T00:00:00.000Z", - "origins": "15173173", - "origins_dataset": "70337805" - }, - { - "date": "2022-02-22T00:00:00.000Z", - "origins": "15173275", - "origins_dataset": "70337805" - }, - { - "date": "2022-01-22T00:00:00.000Z", - "origins": "13236250", - "origins_dataset": "70125002" - } - ], + "technology": "wordpress", "vitals": [ { "date": "2022-04-22T00:00:00.000Z", @@ -38,38 +16,16 @@ ] }, { - "technology_name": "Squarespace", - "origins": [ - { - "date": "2022-04-22T00:00:00.000Z", - "origins": "16173173", - "origins_dataset": "72438921" - }, - { - "date": "2022-03-22T00:00:00.000Z", - "origins": "15173173", - "origins_dataset": "70337805" - }, - { - "date": "2022-02-22T00:00:00.000Z", - "origins": "15173275", - "origins_dataset": "70337805" - }, - { - "date": "2022-01-22T00:00:00.000Z", - "origins": "13236250", - "origins_dataset": "70125002" - } - ], + "technology": "squarespace", "vitals": [ { "date": "2022-04-22T00:00:00.000Z", "name": "overall", - "tested": 10, + "tested": 264, "good_number": { - "desktop": 4, - "mobile": 7, - "dataset": 6 + "desktop": 163, + "mobile": 13, + "dataset": 54 } } ] diff --git a/config/techreport.json b/config/techreport.json index d6b1925d..49216637 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -13,7 +13,14 @@ { "name": "Popular Technologies", "description": "Placeholder description", - "type": "table" + "type": "table", + "data": { + "metrics": ["adoption", "good_vitals"], + "filters": { + "technologies": ["wordpress", "squarespace"], + "geo": "all" + } + } } ] }, diff --git a/server/routes.py b/server/routes.py index 703c5f22..0719e7a2 100644 --- a/server/routes.py +++ b/server/routes.py @@ -73,6 +73,16 @@ def techreport(page_id): all_reports = report_util.get_reports() active_tech_report=tech_report.get('pages').get(page_id) + for block in active_tech_report.get("blocks"): + data_options = block.get("data") + if data_options: + metrics = data_options.get("metrics") + filters = data_options.get("filters") + + for metric in metrics: + results = tech_report_util.get_metrics(metric, filters) + block["data"][metric] = results + return render_template( "techreport/%s.html" % page_id, active_page=page_id, diff --git a/server/techreport.py b/server/techreport.py index d3349f1a..f871222b 100644 --- a/server/techreport.py +++ b/server/techreport.py @@ -12,4 +12,20 @@ def get_report(): return tech_report_json + +def get_metrics(metric, filters): + global report_metrics + + # Mock functionality + # TODO: Replace with API call + print("fetch results for metric with filters") + print(metric) + print(filters) + + with open("config/mock_responses/popular/%s.json" % metric) as report_metrics_file: + report_metrics = json.load(report_metrics_file) + + return report_metrics + + update_report() \ No newline at end of file diff --git a/templates/techreport/components/table.html b/templates/techreport/components/table.html index 24a9b316..3ce7daa1 100644 --- a/templates/techreport/components/table.html +++ b/templates/techreport/components/table.html @@ -16,16 +16,13 @@

    {{ block.name }}

    - - Wordpress - 16,263,163 - 78% - - - - 5,479,006 - 53% - + {% for technology in block.data.filters.technologies %} + + {{ technology }} + {{ block.data.adoption.results[0].origins[0].origins }} + {{ block.data.good_vitals.results[0].vitals[0].good_number.mobile / block.data.good_vitals.results[0].vitals[0].tested * 100 }}% + + {% endfor %} diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index 783448ee..0919f33a 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -48,7 +48,10 @@

    Dive into our data

    {% for block in tech_report_page.get("blocks") %} {% if block.type == "table" %} - {% set ctaUrl = "/reports/{{ tech_report.id }}/comparison?tech=wordpress" %} + {% set ctaUrl = "/reports/" + tech_report.id + "/comparison?tech=" %} + {% for tech in block.data.filters.technologies %} + {% set ctaUrl = ctaUrl + tech + "," %} + {% endfor %} {% set ctaLabel = "Compare technologies" %} {% include "techreport/components/table.html" %} {% endif %} From 2b523e8c0847e03cfd13bfe7a3b38a76d278bb54 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Sat, 13 May 2023 01:17:02 +0200 Subject: [PATCH 009/155] fetch metrics for sections on drilldown --- .../{popular => }/adoption.json | 0 .../{popular => }/good_vitals.json | 9 ++-- .../{popular => }/metadata.json | 0 config/techreport.json | 41 ++++++++++++------- server/routes.py | 17 ++++---- server/techreport.py | 4 +- templates/techreport/components/table.html | 11 ++--- templates/techreport/drilldown.html | 23 +++++++++++ templates/techreport/landing.html | 18 ++++---- 9 files changed, 78 insertions(+), 45 deletions(-) rename config/mock_responses/{popular => }/adoption.json (100%) rename config/mock_responses/{popular => }/good_vitals.json (81%) rename config/mock_responses/{popular => }/metadata.json (100%) diff --git a/config/mock_responses/popular/adoption.json b/config/mock_responses/adoption.json similarity index 100% rename from config/mock_responses/popular/adoption.json rename to config/mock_responses/adoption.json diff --git a/config/mock_responses/popular/good_vitals.json b/config/mock_responses/good_vitals.json similarity index 81% rename from config/mock_responses/popular/good_vitals.json rename to config/mock_responses/good_vitals.json index fcac2679..05ea1e00 100644 --- a/config/mock_responses/popular/good_vitals.json +++ b/config/mock_responses/good_vitals.json @@ -2,12 +2,11 @@ "results": [ { "technology": "wordpress", - "vitals": [ + "dates": [ { "date": "2022-04-22T00:00:00.000Z", - "name": "overall", "tested": 10, - "good_number": { + "good_overall": { "desktop": 4, "mobile": 7, "dataset": 6 @@ -17,12 +16,12 @@ }, { "technology": "squarespace", - "vitals": [ + "dates": [ { "date": "2022-04-22T00:00:00.000Z", "name": "overall", "tested": 264, - "good_number": { + "good_overall": { "desktop": 163, "mobile": 13, "dataset": 54 diff --git a/config/mock_responses/popular/metadata.json b/config/mock_responses/metadata.json similarity index 100% rename from config/mock_responses/popular/metadata.json rename to config/mock_responses/metadata.json diff --git a/config/techreport.json b/config/techreport.json index 49216637..7f2bad13 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -9,18 +9,23 @@ "title": "Technology Report", "subtitle": "Report", "description": "This is placeholder text about how the report works", - "blocks": [ + "sections": [ { - "name": "Popular Technologies", - "description": "Placeholder description", - "type": "table", - "data": { - "metrics": ["adoption", "good_vitals"], - "filters": { - "technologies": ["wordpress", "squarespace"], - "geo": "all" + "id": "explore", + "title": "Explore our data", + "metrics": ["adoption", "good_vitals"], + "filters": { + "technologies": ["wordpress", "squarespace"], + "geo": "all" + }, + "data": {}, + "blocks": [ + { + "name": "Popular Technologies", + "description": "Placeholder description", + "type": "table" } - } + ] } ] }, @@ -29,11 +34,19 @@ "title": "Drilldown", "subtitle": "Technology Report", "description": "Drilldown placeholder", - "blocks": [ + "sections": [ { - "name": "Summary", - "description": "Summary table", - "type": "table" + "id": "cwv", + "title": "Core Web Vitals", + "metrics": ["good_vitals"], + "data": {}, + "blocks": [ + { + "id": "summary", + "name": "Summary", + "type": "cards" + } + ] } ] }, diff --git a/server/routes.py b/server/routes.py index 0719e7a2..ad79c4b9 100644 --- a/server/routes.py +++ b/server/routes.py @@ -69,20 +69,17 @@ def reports(): @app.route("/reports/techreport/", strict_slashes=False) def techreport(page_id): - tech_report = tech_report_util.get_report() all_reports = report_util.get_reports() + tech_report = tech_report_util.get_report() active_tech_report=tech_report.get('pages').get(page_id) - for block in active_tech_report.get("blocks"): - data_options = block.get("data") - if data_options: - metrics = data_options.get("metrics") - filters = data_options.get("filters") - + if active_tech_report.get("sections"): + for section in active_tech_report.get("sections"): + metrics = section.get("metrics") for metric in metrics: - results = tech_report_util.get_metrics(metric, filters) - block["data"][metric] = results - + results = tech_report_util.get_metrics(metric) + section["data"][metric] = results + return render_template( "techreport/%s.html" % page_id, active_page=page_id, diff --git a/server/techreport.py b/server/techreport.py index f871222b..5b353f10 100644 --- a/server/techreport.py +++ b/server/techreport.py @@ -13,7 +13,7 @@ def get_report(): return tech_report_json -def get_metrics(metric, filters): +def get_metrics(metric, filters={}): global report_metrics # Mock functionality @@ -22,7 +22,7 @@ def get_metrics(metric, filters): print(metric) print(filters) - with open("config/mock_responses/popular/%s.json" % metric) as report_metrics_file: + with open("config/mock_responses/%s.json" % metric) as report_metrics_file: report_metrics = json.load(report_metrics_file) return report_metrics diff --git a/templates/techreport/components/table.html b/templates/techreport/components/table.html index 3ce7daa1..f9014c08 100644 --- a/templates/techreport/components/table.html +++ b/templates/techreport/components/table.html @@ -5,9 +5,10 @@

    {{ block.name }}

    {{ block.description }}

    - + + - + @@ -16,11 +17,11 @@

    {{ block.name }}

    - {% for technology in block.data.filters.technologies %} + {% for technology in section.filters.technologies %} - - + + {% endfor %} diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index b0d0c0bb..a702e1fd 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -2,4 +2,27 @@ {% block section %} {{ super() }} + +
    +

    Placehodler content

    + +

    Core Web Vitals

    + + {{ tech_report_page.title }} + + {% for section in tech_report_page.sections %} + {% set section_data = section.data.good_vitals.results %} + {% for entry in section_data %} + {% set latest = entry.dates[0] %} +

    {{ entry.technology }}

    +
      +
    • Latest mobile: {{ latest.good_overall.mobile }}
      • +
    • Latest desktop: {{ latest.good_overall.desktop }}
      • +
    • Latest tested: {{ latest.tested }}
      • +
    + {% endfor %} + {% endfor %} +
    + + {% endblock %} \ No newline at end of file diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index 0919f33a..938ae31e 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -46,15 +46,15 @@

    Good CWVs amongst top websites

    Dive into our data

    - {% for block in tech_report_page.get("blocks") %} - {% if block.type == "table" %} - {% set ctaUrl = "/reports/" + tech_report.id + "/comparison?tech=" %} - {% for tech in block.data.filters.technologies %} - {% set ctaUrl = ctaUrl + tech + "," %} - {% endfor %} - {% set ctaLabel = "Compare technologies" %} - {% include "techreport/components/table.html" %} - {% endif %} + {% set sections = tech_report_page.get("sections") %} + {% for section in sections %} + {% for block in section.get("blocks") %} + {% if block.type == "table" %} + {% set ctaUrl = "/reports/" + tech_report.id + "/comparison?tech=" %} + {% set ctaLabel = "Compare technologies" %} + {% include "techreport/components/table.html" %} + {% endif %} + {% endfor %} {% endfor %}
    From 05274c6aa746d36d9c24f1d0a9c822f82aa4bb43 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 16 May 2023 11:53:44 +0200 Subject: [PATCH 010/155] style drilldown page --- config/mock_responses/adoption.json | 4 +- config/mock_responses/good_vitals.json | 17 ++++-- config/techreport.json | 33 +++++++++- server/routes.py | 3 + server/techreport.py | 1 - static/css/techreport/landing.css | 7 --- static/css/techreport/report.css | 25 +++++++- static/css/techreport/techreport.css | 63 ++++++++++++++++++-- static/css/techreport/variables.css | 16 +++-- templates/techreport/components/heading.html | 2 +- templates/techreport/components/table.html | 20 ++++++- templates/techreport/drilldown.html | 55 +++++++++++------ templates/techreport/landing.html | 38 +++--------- 13 files changed, 205 insertions(+), 79 deletions(-) diff --git a/config/mock_responses/adoption.json b/config/mock_responses/adoption.json index 359e588b..cc4d02ea 100644 --- a/config/mock_responses/adoption.json +++ b/config/mock_responses/adoption.json @@ -2,7 +2,7 @@ "results": [ { "technology_name": "Wordpress", - "origins": [ + "dates": [ { "date": "2022-04-22T00:00:00.000Z", "origins": "16173173", @@ -27,7 +27,7 @@ }, { "technology_name": "Squarespace", - "origins": [ + "dates": [ { "date": "2022-04-22T00:00:00.000Z", "origins": "524362", diff --git a/config/mock_responses/good_vitals.json b/config/mock_responses/good_vitals.json index 05ea1e00..4d9cf3e1 100644 --- a/config/mock_responses/good_vitals.json +++ b/config/mock_responses/good_vitals.json @@ -5,11 +5,20 @@ "dates": [ { "date": "2022-04-22T00:00:00.000Z", - "tested": 10, + "tested": 204743, "good_overall": { - "desktop": 4, - "mobile": 7, - "dataset": 6 + "desktop": 73624, + "mobile": 13947, + "dataset": 937263 + } + }, + { + "date": "2022-03-22T00:00:00.000Z", + "tested": 104312, + "good_overall": { + "desktop": 14, + "mobile": 263, + "dataset": 424 } } ] diff --git a/config/techreport.json b/config/techreport.json index 7f2bad13..fa48035f 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -6,7 +6,7 @@ "pages": { "landing": { "id": "landing", - "title": "Technology Report", + "title": "Technology Report Landing", "subtitle": "Report", "description": "This is placeholder text about how the report works", "sections": [ @@ -23,7 +23,23 @@ { "name": "Popular Technologies", "description": "Placeholder description", - "type": "table" + "type": "table", + "config": { + "columns": [ + { + "metric": "technology", + "name": "Technology" + }, + { + "metric": "adoption d", + "name": "Origins" + }, + { + "metric": "good_vitals", + "name": "Good CWVs" + } + ] + } } ] } @@ -35,6 +51,19 @@ "subtitle": "Technology Report", "description": "Drilldown placeholder", "sections": [ + { + "id": "summary", + "title": "Summary", + "metrics": ["good_vitals", "adoption"], + "data": {}, + "blocks": [ + { + "id": "summary", + "name": "Summary", + "type": "cards" + } + ] + }, { "id": "cwv", "title": "Core Web Vitals", diff --git a/server/routes.py b/server/routes.py index ad79c4b9..d0433792 100644 --- a/server/routes.py +++ b/server/routes.py @@ -80,6 +80,9 @@ def techreport(page_id): results = tech_report_util.get_metrics(metric) section["data"][metric] = results + print('active_tech_report') + print(active_tech_report) + return render_template( "techreport/%s.html" % page_id, active_page=page_id, diff --git a/server/techreport.py b/server/techreport.py index 5b353f10..9150b7ec 100644 --- a/server/techreport.py +++ b/server/techreport.py @@ -27,5 +27,4 @@ def get_metrics(metric, filters={}): return report_metrics - update_report() \ No newline at end of file diff --git a/static/css/techreport/landing.css b/static/css/techreport/landing.css index 34c4e9c2..199a8825 100644 --- a/static/css/techreport/landing.css +++ b/static/css/techreport/landing.css @@ -1,16 +1,9 @@ -.choices-wrapper { - background-image: linear-gradient(to bottom, #9bb8bb 0%, #d7e0e1 100%); - padding: 4rem 0; - margin-top: 4rem; -} - .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); column-gap: 2rem; row-gap: 1rem; - margin-top: -8rem; margin-bottom: 4rem; } diff --git a/static/css/techreport/report.css b/static/css/techreport/report.css index 46b19874..8494cdb5 100644 --- a/static/css/techreport/report.css +++ b/static/css/techreport/report.css @@ -28,6 +28,29 @@ } .report-navigation ul li a:not([aria-current="page"]):hover { - border-bottom: 3px solid var(--color-brand-faded); + border-bottom: 3px solid var(--color-teal-faded); } +/* -------------------- */ +/* ----- Sections ----- */ +/* -------------------- */ + +/* Summary */ +.summary h2 { + font-size: 1rem; + font-weight: 600; + margin-bottom: 1rem; +} + +/* Main data */ +.page-data { + margin-top: -4rem; + padding: 8rem 0; + border-top: 1px solid var(--color-teal-medium); + background-image: linear-gradient( + var(--color-teal-faded) 60%, + var(--color-page-background) + ); + background-size: 100% 25rem; + background-repeat: no-repeat; +} \ No newline at end of file diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index f3bcd8f9..b05e59c9 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -2,6 +2,24 @@ main { color: var(--color-text); } +h1 { + font-size: var(--font-size-xlarge); +} + +h2 { + font-size: var(--font-size-large); +} + +.sr-only { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} + .card { padding: 1rem; background: var(--color-card-background); @@ -34,7 +52,7 @@ main { /* Building blocks */ .cta-link { - background-color: var(--color-brand-dark); + background-color: var(--color-teal-dark); color: var(--color-text-inverted); text-decoration: none; border-radius: 0.25rem; @@ -47,11 +65,11 @@ main { .cta-link:is(:hover, :focus) { color: var(--color-text-inverted); text-decoration: none; - background-color: var(--color-brand-darker); + background-color: var(--color-teal-darker); } .cta-link:focus { - outline: 1.5px solid var(--color-brand-dark); + outline: 1.5px solid var(--color-teal-dark); outline-offset: 1.5px; } @@ -60,8 +78,11 @@ main { margin-top: 1rem; } -/* Components */ +/* -------------------- */ +/* ---- Components ---- */ +/* -------------------- */ +/* Page heading */ .intro { border: none; margin-top: 0; @@ -70,7 +91,7 @@ main { } .intro h1 { - font-size: var(--font-size-large); + font-size: var(--font-size-xlarge); margin-bottom: 2.5rem; margin-top: 0; } @@ -89,6 +110,7 @@ main { padding: 0; } +/* Table */ .table-ui { width: 100%; margin: 1rem 0 2rem 0; @@ -118,4 +140,35 @@ main { .table-ui tr a { color: var(--color-link); text-decoration: underline; +} + +/* Summary grid */ +.summary-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + column-gap: 1rem; + row-gap: 1rem; +} + +.linked-summary-label { + font-weight: 600; +} + +.linked-summary-label a { + color: var(--color-link); +} + +.linked-summary-label a:is(:hover, :focus) { + color: var(--color-link); + text-decoration: none; +} + +.linked-summary-value { + font-size: var(--font-size-medium); + margin-top: -0.25rem; +} + +.linked-summary-description { + margin-top: -0.5rem; + margin-bottom: 0; } \ No newline at end of file diff --git a/static/css/techreport/variables.css b/static/css/techreport/variables.css index fd0cf901..eaf8b9a9 100644 --- a/static/css/techreport/variables.css +++ b/static/css/techreport/variables.css @@ -1,15 +1,18 @@ :root { - --color-brand-faded: #A6BBBE; - --color-brand-dark: #3A5C63; - --color-brand-darker: #1C4750; + --color-teal-faded: #C0CED0; + --color-teal-medium: #6A797C; + --color-teal-dark: #3A5C63; + --color-teal-darker: #1C4750; - --color-link: #24618E; + --color-blue-dark: #3A7098; + + --color-link: var(--color-blue-dark); --color-text: #444444; --color-text-inverted: #FFF; --color-card-background: #fff; - --color-card-border: var(--color-brand-faded); + --color-card-border: #A6BBBE; --color-page-background: #f4f4f4; @@ -17,5 +20,6 @@ --font-size-regular: 1.15rem; --font-size-medium: 1.75rem; - --font-size-large: 2.25rem; + --font-size-large: 2.15rem; + --font-size-xlarge: 2.35rem; } \ No newline at end of file diff --git a/templates/techreport/components/heading.html b/templates/techreport/components/heading.html index 1916f578..18f5a616 100644 --- a/templates/techreport/components/heading.html +++ b/templates/techreport/components/heading.html @@ -4,5 +4,5 @@

    {{ tech_report_page.title }}

    - {{ tech_report_page.description | markdown }} + {{ tech_report_page.description }} \ No newline at end of file diff --git a/templates/techreport/components/table.html b/templates/techreport/components/table.html index f9014c08..e2061adb 100644 --- a/templates/techreport/components/table.html +++ b/templates/techreport/components/table.html @@ -8,8 +8,8 @@

    {{ block.name }}

    {{ block.name }}Sample table: {{ block.name }} (in progress)
    Technology
    {{ technology }}{{ block.data.adoption.results[0].origins[0].origins }}{{ block.data.good_vitals.results[0].vitals[0].good_number.mobile / block.data.good_vitals.results[0].vitals[0].tested * 100 }}%PlaceholderPlaceholder%
    - - + + + + + {% for column in block.config.columns %} + + {% endfor %} + + + + {% for row in table_data %} + + {% for column in block.columns %} + + {% endfor %} + + {% endfor %}
    Sample table: {{ block.name }} (in progress)Sample table: {{ block.name }} (in progress)
    {{ column.name }}
    {{ row.results[column.metric] }}
    diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index a702e1fd..38a9b74d 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -3,26 +3,45 @@ {% block section %} {{ super() }} -
    -

    Placehodler content

    +
    +

    Summary

    -

    Core Web Vitals

    - - {{ tech_report_page.title }} +
    +
    +

    + Adoption +

    +

    + {{ tech_report_page.sections[0].data.adoption.results[0].dates[0].origins }} +

    +

    + websites tested using this technology. +

    +
    - {% for section in tech_report_page.sections %} - {% set section_data = section.data.good_vitals.results %} - {% for entry in section_data %} - {% set latest = entry.dates[0] %} -

    {{ entry.technology }}

    -
      -
    • Latest mobile: {{ latest.good_overall.mobile }}
      • -
    • Latest desktop: {{ latest.good_overall.desktop }}
      • -
    • Latest tested: {{ latest.tested }}
      • -
    - {% endfor %} - {% endfor %} +
    +

    + Good CWVs +

    +

    + {{ tech_report_page.sections[0].data.good_vitals.results[0].dates[0].good_overall.mobile }} +

    +

    + of tested origins had overall good Core Web Vitals. +

    +
    +
    +
    + +
    +
    +

    Core Web Vitals

    +
      + {% for date in tech_report_page.sections[0].data.good_vitals.results[0].dates %} +
    • {{date.good_overall.mobile}}
      • + {% endfor %} +
    +
    - {% endblock %} \ No newline at end of file diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index 938ae31e..91fa4605 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -10,37 +10,15 @@ {% include "techreport/components/heading.html" %} -
    -
    -
    -

    Technology Drilldown

    -

    Get detailed information about one technology.

    -
    -
    -

    Technology Comparison

    -

    Get detailed information about two to ten technologies.

    -
    +
    +
    +

    Technology Drilldown

    +

    Get detailed information about one technology.

    +
    +
    +

    Technology Comparison

    +

    Get detailed information about two to ten technologies.

    - -
    -

    About our dataset

    -
    -
    -

    Last updated

    -

    Timestamp

    -
    - -
    -

    Websites tested

    -

    123456

    -
    - -
    -

    Good CWVs amongst top websites

    -

    70%

    -
    -
    -
    From 9fb8b29195cf40cb2607dc78b483ef8a35eb8f5e Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 16 May 2023 12:15:39 +0200 Subject: [PATCH 011/155] style drilldown page --- config/techreport.json | 19 +++---------------- static/css/techreport/report.css | 8 ++++++++ static/css/techreport/techreport.css | 20 ++++++++++++++++++++ templates/techreport/drilldown.html | 24 ++++++++++++++++++------ 4 files changed, 49 insertions(+), 22 deletions(-) diff --git a/config/techreport.json b/config/techreport.json index fa48035f..79a70cfe 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -55,27 +55,14 @@ "id": "summary", "title": "Summary", "metrics": ["good_vitals", "adoption"], - "data": {}, - "blocks": [ - { - "id": "summary", - "name": "Summary", - "type": "cards" - } - ] + "data": {} }, { "id": "cwv", "title": "Core Web Vitals", + "description": "Placeholder text, A couple of words about what will be visualized in this section. Which values are there, what do they mean, etc. And we can also link to a relevant help page if needed. Probably doesn’t need much text here, unless if we want to summarise the data. Learn more", "metrics": ["good_vitals"], - "data": {}, - "blocks": [ - { - "id": "summary", - "name": "Summary", - "type": "cards" - } - ] + "data": {} } ] }, diff --git a/static/css/techreport/report.css b/static/css/techreport/report.css index 8494cdb5..290a1e74 100644 --- a/static/css/techreport/report.css +++ b/static/css/techreport/report.css @@ -53,4 +53,12 @@ ); background-size: 100% 25rem; background-repeat: no-repeat; +} + +.page-data h2 { + margin-bottom: 1rem; +} + +.block-description { + max-width: 50rem; } \ No newline at end of file diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index b05e59c9..6e9c4655 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -171,4 +171,24 @@ h2 { .linked-summary-description { margin-top: -0.5rem; margin-bottom: 0; +} + +/* Timeseries cards */ +.timeseries-container { + margin-top: 2rem; +} + +.timeseries-title { + font-size: var(--font-size-regular); + margin-bottom: 0.75rem; +} + +.timeseries-description { + max-width: 50rem; +} + +.timeseries-time { + font-weight: 600; + font-size: 1rem; + margin: 0.75rem 0; } \ No newline at end of file diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index 38a9b74d..9bbc952b 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -35,12 +35,24 @@

    Summary

    -

    Core Web Vitals

    -
      - {% for date in tech_report_page.sections[0].data.good_vitals.results[0].dates %} -
    • {{date.good_overall.mobile}}
      • - {% endfor %} -
    +

    {{ tech_report_page.sections[1].title }}

    +
    + {{ tech_report_page.sections[1].description }} +
    + +
    +

    Good Core Web Vitals over time

    +

    The percentage of origins passing all three Core Web Vitals (LCP, FID, CLS) with a "good" experience. Note that if an origin is missing FID data, it's assessed based on the performance of the remaining metrics.

    +

    Latest: {{ tech_report_page.sections[1].data.good_vitals.results[0].dates[0].date }}

    +

    + Chart comes here: +

    +
      + {% for date in tech_report_page.sections[1].data.good_vitals.results[0].dates %} +
    • {{date.good_overall.mobile}}
      • + {% endfor %} +
    +
    From fa837aafeb004af37b7d7a96e5d6bb2e1df8e3f2 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 16 May 2023 12:30:19 +0200 Subject: [PATCH 012/155] move summary cards to their own component --- static/css/techreport/techreport.css | 10 +++--- static/css/techreport/variables.css | 4 +-- .../techreport/components/summary_linked.html | 11 ++++++ .../techreport/components/table_overview.html | 0 .../components/timeseries_container.html | 0 templates/techreport/drilldown.html | 36 ++++++++----------- 6 files changed, 32 insertions(+), 29 deletions(-) create mode 100644 templates/techreport/components/summary_linked.html create mode 100644 templates/techreport/components/table_overview.html create mode 100644 templates/techreport/components/timeseries_container.html diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 6e9c4655..6a89c568 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -150,25 +150,25 @@ h2 { row-gap: 1rem; } -.linked-summary-label { +.summary-linked-label { font-weight: 600; } -.linked-summary-label a { +.summary-linked-label a { color: var(--color-link); } -.linked-summary-label a:is(:hover, :focus) { +.summary-linked-label a:is(:hover, :focus) { color: var(--color-link); text-decoration: none; } -.linked-summary-value { +.summary-linked-value { font-size: var(--font-size-medium); margin-top: -0.25rem; } -.linked-summary-description { +.summary-linked-description { margin-top: -0.5rem; margin-bottom: 0; } diff --git a/static/css/techreport/variables.css b/static/css/techreport/variables.css index eaf8b9a9..5a3f5f7a 100644 --- a/static/css/techreport/variables.css +++ b/static/css/techreport/variables.css @@ -12,11 +12,11 @@ --color-text-inverted: #FFF; --color-card-background: #fff; - --color-card-border: #A6BBBE; + --color-card-border: #CDD4D6; --color-page-background: #f4f4f4; - --shadow-card: 0 3px 12px -2px rgba(106, 121, 124, 0.2); + --shadow-card: 0 3px 12px -2px rgba(106, 121, 124, 0.05); --font-size-regular: 1.15rem; --font-size-medium: 1.75rem; diff --git a/templates/techreport/components/summary_linked.html b/templates/techreport/components/summary_linked.html new file mode 100644 index 00000000..bde0b186 --- /dev/null +++ b/templates/techreport/components/summary_linked.html @@ -0,0 +1,11 @@ +
    +

    + {{ summary.label }} +

    +

    + {{ summary.value }} +

    +

    + {{ summary.description }} +

    +
    \ No newline at end of file diff --git a/templates/techreport/components/table_overview.html b/templates/techreport/components/table_overview.html new file mode 100644 index 00000000..e69de29b diff --git a/templates/techreport/components/timeseries_container.html b/templates/techreport/components/timeseries_container.html new file mode 100644 index 00000000..e69de29b diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index 9bbc952b..ca93a116 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -7,29 +7,21 @@

    Summary

    -
    -

    - Adoption -

    -

    - {{ tech_report_page.sections[0].data.adoption.results[0].dates[0].origins }} -

    -

    - websites tested using this technology. -

    -
    + {% set summary = { + "url": "#adoption", + "label": "Adoption", + "value": tech_report_page.sections[0].data.adoption.results[0].dates[0].origins, + "description": "websites tested using this technology." + } %} + {% include "techreport/components/summary_linked.html" %} -
    -

    - Good CWVs -

    -

    - {{ tech_report_page.sections[0].data.good_vitals.results[0].dates[0].good_overall.mobile }} -

    -

    - of tested origins had overall good Core Web Vitals. -

    -
    + {% set summary = { + "url": "#cwv", + "label": "Good CWVs", + "value": tech_report_page.sections[0].data.good_vitals.results[0].dates[0].good_overall.mobile, + "description": "of tested origins had overall good Core Web Vitals." + } %} + {% include "techreport/components/summary_linked.html" %}
    From 2e20af07a63a5ebe60a1e20c0c6d7616459d1bce Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 16 May 2023 13:40:24 +0200 Subject: [PATCH 013/155] turn placeholder timeseries in its own component --- config/mock_responses/adoption.json | 28 ++++------ config/techreport.json | 32 +++++++---- server/routes.py | 2 +- static/css/techreport/report.css | 39 ++----------- static/css/techreport/techreport.css | 35 ++++++++++++ templates/main.html | 2 + .../components/timeseries_container.html | 14 +++++ templates/techreport/drilldown.html | 55 ++++++++++++------- templates/techreport/landing.html | 6 +- templates/techreport/report.html | 14 ----- templates/techreport/techreport.html | 22 ++++++-- 11 files changed, 147 insertions(+), 102 deletions(-) diff --git a/config/mock_responses/adoption.json b/config/mock_responses/adoption.json index cc4d02ea..7a92d624 100644 --- a/config/mock_responses/adoption.json +++ b/config/mock_responses/adoption.json @@ -5,23 +5,17 @@ "dates": [ { "date": "2022-04-22T00:00:00.000Z", - "origins": "16173173", - "origins_dataset": "72438921" + "origins": { + "mobile": 524362, + "desktop": 73542 + } }, { "date": "2022-03-22T00:00:00.000Z", - "origins": "15173173", - "origins_dataset": "70337805" - }, - { - "date": "2022-02-22T00:00:00.000Z", - "origins": "15173275", - "origins_dataset": "70337805" - }, - { - "date": "2022-01-22T00:00:00.000Z", - "origins": "13236250", - "origins_dataset": "70125002" + "origins": { + "mobile": 471531, + "desktop": 68634 + } } ] }, @@ -30,8 +24,10 @@ "dates": [ { "date": "2022-04-22T00:00:00.000Z", - "origins": "524362", - "origins_dataset": "761353" + "origins": { + "mobile": 16345, + "desktop": 735 + } } ] } diff --git a/config/techreport.json b/config/techreport.json index 79a70cfe..141dcbb7 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -3,10 +3,29 @@ "name": "Technology Report", "summary": "The Core Web Vitals Technology Report is a dashboard combining the powers of real-user experiences in the [Chrome User Experience Report (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report/) dataset with web technology detections available in HTTP Archive, to allow analysis of the way websites are both built and experienced.", "metrics": [], + "labels": { + "adoption": { + "title": "Adoption", + "section_description": "Here is a description for the adoption section", + "summary_description": "websites tested using this technology", + "timeseries_title": "Adoption", + "timeseries_description": "Origin description" + }, + "cwv": { + "title": "Core Web Vitals", + "section_description": "Placeholder text, A couple of words about what will be visualized in this section. Which values are there, what do they mean, etc. And we can also link to a relevant help page if needed. Probably doesn’t need much text here, unless if we want to summarise the data. Learn more", + "good": { + "summary_title": "Good CWVs", + "summary_description": "of tested origins had overall good Core Web Vitals.", + "timeseries_title": "Good Core Web Vitals over time", + "section_description": "The percentage of origins passing all three Core Web Vitals (LCP, FID, CLS) with a 'good' experience. Note that if an origin is missing FID data, it's assessed based on the performance of the remaining metrics." + } + } + }, "pages": { "landing": { "id": "landing", - "title": "Technology Report Landing", + "title": "Technology Report", "subtitle": "Report", "description": "This is placeholder text about how the report works", "sections": [ @@ -52,17 +71,10 @@ "description": "Drilldown placeholder", "sections": [ { - "id": "summary", - "title": "Summary", + "id": "all", + "title": "All", "metrics": ["good_vitals", "adoption"], "data": {} - }, - { - "id": "cwv", - "title": "Core Web Vitals", - "description": "Placeholder text, A couple of words about what will be visualized in this section. Which values are there, what do they mean, etc. And we can also link to a relevant help page if needed. Probably doesn’t need much text here, unless if we want to summarise the data. Learn more", - "metrics": ["good_vitals"], - "data": {} } ] }, diff --git a/server/routes.py b/server/routes.py index d0433792..557553d1 100644 --- a/server/routes.py +++ b/server/routes.py @@ -86,7 +86,7 @@ def techreport(page_id): return render_template( "techreport/%s.html" % page_id, active_page=page_id, - tech_report=tech_report, + tech_report_labels=tech_report.get("labels"), tech_report_page=active_tech_report, reports=all_reports, ) diff --git a/static/css/techreport/report.css b/static/css/techreport/report.css index 290a1e74..e6449331 100644 --- a/static/css/techreport/report.css +++ b/static/css/techreport/report.css @@ -1,35 +1,3 @@ -.report-navigation { - color: var(--color-text); - background-color: var(--color-card-background); - border-top: 1px solid var(--color-page-background); - border-bottom: 1px solid var(--color-page-background); -} - -.report-navigation ul li { - text-transform: none; -} - -.report-navigation ul li a { - padding: 0.75rem 0.25rem; -} - -.report-navigation ul li a[aria-current="page"] { - border-bottom: 3px solid var(--color-text); -} - -.report-navigation ul li:hover { - background-color: transparent; -} - -.report-navigation ul li a:hover { - color: var(--color-text); - background-color: transparent; - text-decoration: none; -} - -.report-navigation ul li a:not([aria-current="page"]):hover { - border-bottom: 3px solid var(--color-teal-faded); -} /* -------------------- */ /* ----- Sections ----- */ @@ -59,6 +27,11 @@ margin-bottom: 1rem; } +.metric-block + .metric-block { + margin-top: 6rem; +} + .block-description { max-width: 50rem; -} \ No newline at end of file +} + diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 6a89c568..a8ed86a2 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -82,6 +82,41 @@ h2 { /* ---- Components ---- */ /* -------------------- */ +/* Report navigation */ +.report-navigation { + color: var(--color-text); + background-color: var(--color-card-background); + border-top: 1px solid var(--color-page-background); + border-bottom: 1px solid var(--color-page-background); +} + +.report-navigation ul li { + text-transform: none; +} + +.report-navigation ul li a { + padding: 0.75rem 0.25rem; +} + +.report-navigation ul li a[aria-current="page"] { + border-bottom: 3px solid var(--color-text); +} + +.report-navigation ul li:hover { + background-color: transparent; +} + +.report-navigation ul li a:hover { + color: var(--color-text); + background-color: transparent; + text-decoration: none; +} + +.report-navigation ul li a:not([aria-current="page"]):hover { + border-bottom: 3px solid var(--color-teal-faded); +} + + /* Page heading */ .intro { border: none; diff --git a/templates/main.html b/templates/main.html index 43a2c070..92292cf4 100644 --- a/templates/main.html +++ b/templates/main.html @@ -177,6 +177,8 @@ + {% block report_navigation %}{% endblock %} +
    {% block main %}{% endblock %}
    diff --git a/templates/techreport/components/timeseries_container.html b/templates/techreport/components/timeseries_container.html index e69de29b..295cf39c 100644 --- a/templates/techreport/components/timeseries_container.html +++ b/templates/techreport/components/timeseries_container.html @@ -0,0 +1,14 @@ +{% set timeseries_dates = tech_report_section.data[timeseries_metric].results[0].dates %} +
    +

    {{ timeseries_title }}

    +

    {{ timeseries_description }}

    +

    Latest: {{ timeseries_dates[0].date }}

    +

    + Chart comes here: +

    +
      + {% for date in timeseries_dates %} +
    • {{ date.date }}: {{date[timeseries_sub_metric][client]}}
      • + {% endfor %} +
    +
    diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index ca93a116..70d65f35 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -3,48 +3,61 @@ {% block section %} {{ super() }} + {% set tech_report_section = tech_report_page.sections[0] %} +

    Summary

    {% set summary = { "url": "#adoption", - "label": "Adoption", - "value": tech_report_page.sections[0].data.adoption.results[0].dates[0].origins, - "description": "websites tested using this technology." + "label": tech_report_labels.adoption.title, + "value": tech_report_section.data.adoption.results[0].dates[0].origins.mobile, + "description": tech_report_labels.adoption.summary_description } %} {% include "techreport/components/summary_linked.html" %} {% set summary = { "url": "#cwv", - "label": "Good CWVs", - "value": tech_report_page.sections[0].data.good_vitals.results[0].dates[0].good_overall.mobile, - "description": "of tested origins had overall good Core Web Vitals." + "label": tech_report_labels.cwv.good.title, + "value": tech_report_section.data.good_vitals.results[0].dates[0].good_overall.mobile, + "description": tech_report_labels.cwv.good.summary_description } %} {% include "techreport/components/summary_linked.html" %}
    -
    -

    {{ tech_report_page.sections[1].title }}

    +
    +

    {{ tech_report_labels.cwv.title }}

    - {{ tech_report_page.sections[1].description }} + {{ tech_report_labels.cwv.section_description }}
    + + {% set timeseries_title = tech_report_labels.cwv.good.timeseries_title %} + {% set timeseries_description = tech_report_labels.cwv.good.section_description %} + {% set timeseries_metric = "good_vitals" %} + {% set timeseries_sub_metric = "good_overall" %} + {% set client = "mobile" %} + + {% include "techreport/components/timeseries_container.html" %} + +
    -
    -

    Good Core Web Vitals over time

    -

    The percentage of origins passing all three Core Web Vitals (LCP, FID, CLS) with a "good" experience. Note that if an origin is missing FID data, it's assessed based on the performance of the remaining metrics.

    -

    Latest: {{ tech_report_page.sections[1].data.good_vitals.results[0].dates[0].date }}

    -

    - Chart comes here: -

    -
      - {% for date in tech_report_page.sections[1].data.good_vitals.results[0].dates %} -
    • {{date.good_overall.mobile}}
      • - {% endfor %} -
    +
    +

    {{ tech_report_labels.adoption.title }}

    +
    + {{ tech_report_labels.adoption.section_description }}
    + + {% set timeseries_title = tech_report_labels.adoption.timeseries_title %} + {% set timeseries_description = tech_report_labels.adoption.timeseries_description %} + {% set timeseries_metric = "adoption" %} + {% set timeseries_sub_metric = "origins" %} + {% set client = "mobile" %} + + {% include "techreport/components/timeseries_container.html" %} +
    diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index 91fa4605..e8a057de 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -12,11 +12,11 @@
    -

    Technology Drilldown

    +

    Technology Drilldown

    Get detailed information about one technology.

    -

    Technology Comparison

    +

    Technology Comparison

    Get detailed information about two to ten technologies.

    @@ -28,7 +28,7 @@

    Dive into our data

    {% for section in sections %} {% for block in section.get("blocks") %} {% if block.type == "table" %} - {% set ctaUrl = "/reports/" + tech_report.id + "/comparison?tech=" %} + {% set ctaUrl = "/reports/techreport/comparison?tech=" %} {% set ctaLabel = "Compare technologies" %} {% include "techreport/components/table.html" %} {% endif %} diff --git a/templates/techreport/report.html b/templates/techreport/report.html index 3360950a..88fc497a 100644 --- a/templates/techreport/report.html +++ b/templates/techreport/report.html @@ -6,19 +6,5 @@ {% endblock %} {% block section %} - - {% include "techreport/components/heading.html" %} {% endblock %} \ No newline at end of file diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html index efdfcea6..76b8b4c2 100644 --- a/templates/techreport/techreport.html +++ b/templates/techreport/techreport.html @@ -1,8 +1,6 @@ -{% set report = tech_report %} {% extends "main.html" %} -{% block title %}HTTP Archive: {{ tech_report.name }}{% endblock %} -{% block description %}{{ tech_report.summary | markdown | striptags }}{% endblock %} +{% block title %}HTTP Archive: Tech Report{% endblock %} {% block head %} {{ super() }} @@ -10,8 +8,24 @@ {% endblock %} +{% block report_navigation %} + +{% endblock %} + {% block main %} -{% block section %}{% endblock %} + {% block section %}{% endblock %} {% endblock %} \ No newline at end of file From 88315c02275326c6bed159387a02aa2af57c057d Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 16 May 2023 14:08:06 +0200 Subject: [PATCH 014/155] conditionally render the data in the drilldown based on selected tech --- config/mock_responses/metadata.json | 14 +++ config/techreport.json | 4 +- server/routes.py | 2 + server/techreport.py | 9 ++ templates/techreport/comparison.html | 5 + templates/techreport/components/heading.html | 2 +- templates/techreport/drilldown.html | 97 +++++++++++--------- templates/techreport/report.html | 4 +- 8 files changed, 86 insertions(+), 51 deletions(-) diff --git a/config/mock_responses/metadata.json b/config/mock_responses/metadata.json index e69de29b..27d9607d 100644 --- a/config/mock_responses/metadata.json +++ b/config/mock_responses/metadata.json @@ -0,0 +1,14 @@ +{ + "results": [ + { + "technology": "wordpress", + "title": "Wordpress", + "description": "Wordpress description" + }, + { + "technology": "squarespace", + "title": "Squarespace", + "description": "Squarespace description" + } + ] +} \ No newline at end of file diff --git a/config/techreport.json b/config/techreport.json index 141dcbb7..3d99477f 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -8,7 +8,7 @@ "title": "Adoption", "section_description": "Here is a description for the adoption section", "summary_description": "websites tested using this technology", - "timeseries_title": "Adoption", + "timeseries_title": "Origins in our dataset over time", "timeseries_description": "Origin description" }, "cwv": { @@ -73,7 +73,7 @@ { "id": "all", "title": "All", - "metrics": ["good_vitals", "adoption"], + "metrics": ["good_vitals", "adoption", "metadata"], "data": {} } ] diff --git a/server/routes.py b/server/routes.py index 557553d1..6ba844a0 100644 --- a/server/routes.py +++ b/server/routes.py @@ -80,6 +80,8 @@ def techreport(page_id): results = tech_report_util.get_metrics(metric) section["data"][metric] = results + active_tech_report["tech"] = tech_report_util.get_tech_id(request) + print('active_tech_report') print(active_tech_report) diff --git a/server/techreport.py b/server/techreport.py index 9150b7ec..0f4db8ec 100644 --- a/server/techreport.py +++ b/server/techreport.py @@ -27,4 +27,13 @@ def get_metrics(metric, filters={}): return report_metrics +def get_tech_id(request): + host = request.host.split(".") + subdomain = len(host) > 2 and host[0] or "" + tech = request.args.get("tech") + tech_arr = [] + if tech: + tech_arr = tech.split(",") + return tech_arr or subdomain + update_report() \ No newline at end of file diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html index b0d0c0bb..ec492fcc 100644 --- a/templates/techreport/comparison.html +++ b/templates/techreport/comparison.html @@ -2,4 +2,9 @@ {% block section %} {{ super() }} + + {% include "techreport/components/heading.html" %} + +

    Content coming soon

    + {% endblock %} \ No newline at end of file diff --git a/templates/techreport/components/heading.html b/templates/techreport/components/heading.html index 18f5a616..c6f7847a 100644 --- a/templates/techreport/components/heading.html +++ b/templates/techreport/components/heading.html @@ -1,7 +1,7 @@

    {{ tech_report_page.subtitle }} - {{ tech_report_page.title }} + {{ filtered_technology or tech_report_page.title }}

    {{ tech_report_page.description }} diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index 70d65f35..4926fb3d 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -3,62 +3,69 @@ {% block section %} {{ super() }} + {% set filtered_technology = tech_report_page.tech[0] %} + + {% include "techreport/components/heading.html" %} + {% set tech_report_section = tech_report_page.sections[0] %} -
    -

    Summary

    + {% if filtered_technology %} +
    +

    Summary

    -
    - {% set summary = { - "url": "#adoption", - "label": tech_report_labels.adoption.title, - "value": tech_report_section.data.adoption.results[0].dates[0].origins.mobile, - "description": tech_report_labels.adoption.summary_description - } %} - {% include "techreport/components/summary_linked.html" %} +
    + {% set summary = { + "url": "#adoption", + "label": tech_report_labels.adoption.title, + "value": tech_report_section.data.adoption.results[0].dates[0].origins.mobile, + "description": tech_report_labels.adoption.summary_description + } %} + {% include "techreport/components/summary_linked.html" %} - {% set summary = { - "url": "#cwv", - "label": tech_report_labels.cwv.good.title, - "value": tech_report_section.data.good_vitals.results[0].dates[0].good_overall.mobile, - "description": tech_report_labels.cwv.good.summary_description - } %} - {% include "techreport/components/summary_linked.html" %} + {% set summary = { + "url": "#cwv", + "label": tech_report_labels.cwv.good.summary_title, + "value": tech_report_section.data.good_vitals.results[0].dates[0].good_overall.mobile, + "description": tech_report_labels.cwv.good.summary_description + } %} + {% include "techreport/components/summary_linked.html" %} +
    -
    -
    -
    -

    {{ tech_report_labels.cwv.title }}

    -
    - {{ tech_report_labels.cwv.section_description }} -
    - - {% set timeseries_title = tech_report_labels.cwv.good.timeseries_title %} - {% set timeseries_description = tech_report_labels.cwv.good.section_description %} - {% set timeseries_metric = "good_vitals" %} - {% set timeseries_sub_metric = "good_overall" %} - {% set client = "mobile" %} +
    +
    +

    {{ tech_report_labels.cwv.title }}

    +
    + {{ tech_report_labels.cwv.section_description }} +
    + + {% set timeseries_title = tech_report_labels.cwv.good.timeseries_title %} + {% set timeseries_description = tech_report_labels.cwv.good.section_description %} + {% set timeseries_metric = "good_vitals" %} + {% set timeseries_sub_metric = "good_overall" %} + {% set client = "mobile" %} - {% include "techreport/components/timeseries_container.html" %} + {% include "techreport/components/timeseries_container.html" %} -
    - -
    -

    {{ tech_report_labels.adoption.title }}

    -
    - {{ tech_report_labels.adoption.section_description }}
    - - {% set timeseries_title = tech_report_labels.adoption.timeseries_title %} - {% set timeseries_description = tech_report_labels.adoption.timeseries_description %} - {% set timeseries_metric = "adoption" %} - {% set timeseries_sub_metric = "origins" %} - {% set client = "mobile" %} - {% include "techreport/components/timeseries_container.html" %} +
    +

    {{ tech_report_labels.adoption.title }}

    +
    + {{ tech_report_labels.adoption.section_description }} +
    + + {% set timeseries_title = tech_report_labels.adoption.timeseries_title %} + {% set timeseries_description = tech_report_labels.adoption.timeseries_description %} + {% set timeseries_metric = "adoption" %} + {% set timeseries_sub_metric = "origins" %} + {% set client = "mobile" %} + + {% include "techreport/components/timeseries_container.html" %} +
    -
    + {% endif %} + {% endblock %} \ No newline at end of file diff --git a/templates/techreport/report.html b/templates/techreport/report.html index 88fc497a..13dba671 100644 --- a/templates/techreport/report.html +++ b/templates/techreport/report.html @@ -5,6 +5,4 @@ {% endblock %} -{% block section %} - {% include "techreport/components/heading.html" %} -{% endblock %} \ No newline at end of file +{% block section %}{% endblock %} \ No newline at end of file From 00aee29c751e964e41e715630569157c6be49984 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 22 May 2023 12:55:04 +0200 Subject: [PATCH 015/155] compress global header in techreport --- static/css/techreport/techreport.css | 17 +++++++++++++++++ templates/techreport/components/table.html | 16 ---------------- 2 files changed, 17 insertions(+), 16 deletions(-) diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index a8ed86a2..29bae0b4 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -1,3 +1,4 @@ +/* General */ main { color: var(--color-text); } @@ -82,6 +83,22 @@ h2 { /* ---- Components ---- */ /* -------------------- */ +/* Overwriting the current HA header */ +header { + padding: 1rem 0; + border-top: 0; +} + +header .container { + width: 85rem; + max-width: 98%; + padding: 0; +} + +header .container > div { + padding: 0; +} + /* Report navigation */ .report-navigation { color: var(--color-text); diff --git a/templates/techreport/components/table.html b/templates/techreport/components/table.html index e2061adb..2c835edc 100644 --- a/templates/techreport/components/table.html +++ b/templates/techreport/components/table.html @@ -9,22 +9,6 @@

    {{ block.name }}

    - {% for column in block.config.columns %} From 0e0788820ef1c4372b1e7ce6531e25cc6f19bd21 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Mon, 22 May 2023 12:56:23 +0200 Subject: [PATCH 016/155] compress global footer in techreport --- static/css/techreport/techreport.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 29bae0b4..18a9217c 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -84,18 +84,18 @@ h2 { /* -------------------- */ /* Overwriting the current HA header */ -header { +:is(header, footer) { padding: 1rem 0; border-top: 0; } -header .container { +:is(header, footer) .container { width: 85rem; max-width: 98%; padding: 0; } -header .container > div { +:is(header, footer) .container > div { padding: 0; } From b347ebc12c6e9cba77f311cf9e507884f1ac8744 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 23 May 2023 00:23:57 +0200 Subject: [PATCH 017/155] use data from sample jsons in tables --- config/mock_responses/drupal.json | 34 +++++++++++ config/mock_responses/squarespace.json | 34 +++++++++++ config/mock_responses/wordpress.json | 34 +++++++++++ config/techreport.json | 37 ++++-------- server/routes.py | 4 ++ static/css/techreport/landing.css | 6 +- static/css/techreport/techreport.css | 49 ++++++++++++--- static/css/techreport/variables.css | 4 +- .../techreport/components/table_overview.html | 59 +++++++++++++++++++ templates/techreport/landing.html | 39 ++++++++---- 10 files changed, 250 insertions(+), 50 deletions(-) create mode 100644 config/mock_responses/drupal.json create mode 100644 config/mock_responses/squarespace.json create mode 100644 config/mock_responses/wordpress.json diff --git a/config/mock_responses/drupal.json b/config/mock_responses/drupal.json new file mode 100644 index 00000000..ce95515a --- /dev/null +++ b/config/mock_responses/drupal.json @@ -0,0 +1,34 @@ +{ + "technology": "drupal", + "name": "Drupal", + "metadata": { + "categories": ["CMS", "Blog"], + "description": "Description on wordpress" + }, + "dates": [ + { + "date": "2022-04-22T00:00:00.000Z", + "tested": 204743, + "good_overall": { + "desktop": 73624, + "mobile": 13947 + }, + "origins": { + "mobile": 524362, + "desktop": 73542 + } + }, + { + "date": "2022-03-22T00:00:00.000Z", + "tested": 104312, + "good_overall": { + "desktop": 14, + "mobile": 263 + }, + "origins": { + "mobile": 524362, + "desktop": 73542 + } + } + ] +} \ No newline at end of file diff --git a/config/mock_responses/squarespace.json b/config/mock_responses/squarespace.json new file mode 100644 index 00000000..b5c5a99e --- /dev/null +++ b/config/mock_responses/squarespace.json @@ -0,0 +1,34 @@ +{ + "technology": "squarespace", + "name": "Squarespace", + "metadata": { + "categories": ["CMS", "Blog"], + "description": "Description on wordpress" + }, + "dates": [ + { + "date": "2022-04-22T00:00:00.000Z", + "tested": 204743, + "good_overall": { + "desktop": 73624, + "mobile": 13947 + }, + "origins": { + "mobile": 524362, + "desktop": 73542 + } + }, + { + "date": "2022-03-22T00:00:00.000Z", + "tested": 104312, + "good_overall": { + "desktop": 14, + "mobile": 263 + }, + "origins": { + "mobile": 524362, + "desktop": 73542 + } + } + ] +} \ No newline at end of file diff --git a/config/mock_responses/wordpress.json b/config/mock_responses/wordpress.json new file mode 100644 index 00000000..f30024a3 --- /dev/null +++ b/config/mock_responses/wordpress.json @@ -0,0 +1,34 @@ +{ + "technology": "wordpress", + "name": "Wordpress", + "metadata": { + "categories": ["CMS", "Blog"], + "description": "Description on wordpress" + }, + "dates": [ + { + "date": "2022-04-22T00:00:00.000Z", + "tested": 204743, + "good_overall": { + "desktop": 73624, + "mobile": 13947 + }, + "origins": { + "mobile": 524362, + "desktop": 73542 + } + }, + { + "date": "2022-03-22T00:00:00.000Z", + "tested": 104312, + "good_overall": { + "desktop": 14, + "mobile": 263 + }, + "origins": { + "mobile": 524362, + "desktop": 73542 + } + } + ] +} \ No newline at end of file diff --git a/config/techreport.json b/config/techreport.json index 3d99477f..3ccb5854 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -32,35 +32,18 @@ { "id": "explore", "title": "Explore our data", - "metrics": ["adoption", "good_vitals"], - "filters": { - "technologies": ["wordpress", "squarespace"], - "geo": "all" - }, + "metrics": ["wordpress", "squarespace", "drupal"], "data": {}, - "blocks": [ - { - "name": "Popular Technologies", - "description": "Placeholder description", - "type": "table", - "config": { - "columns": [ - { - "metric": "technology", - "name": "Technology" - }, - { - "metric": "adoption d", - "name": "Origins" - }, - { - "metric": "good_vitals", - "name": "Good CWVs" - } - ] - } + "blocks": { + "popular_tech": { + "title": "Popular technologies", + "description": "To write", + "caption": "popular technologies table caption todo", + "technologies": ["wordpress", "squarespace", "drupal"], + "ctaLabel": "Compare technologies", + "ctaUrl": "/reports/techreport/comparison?tech=wordpress,squarespace,drupal" } - ] + } } ] }, diff --git a/server/routes.py b/server/routes.py index 6ba844a0..bd6bc82e 100644 --- a/server/routes.py +++ b/server/routes.py @@ -71,8 +71,12 @@ def reports(): def techreport(page_id): all_reports = report_util.get_reports() tech_report = tech_report_util.get_report() + + # Get the settings for the current page active_tech_report=tech_report.get('pages').get(page_id) + # For all the sections, fetch their defined metrics + # Later: only for the active section (when each section is its own view) if active_tech_report.get("sections"): for section in active_tech_report.get("sections"): metrics = section.get("metrics") diff --git a/static/css/techreport/landing.css b/static/css/techreport/landing.css index 199a8825..bba3eebe 100644 --- a/static/css/techreport/landing.css +++ b/static/css/techreport/landing.css @@ -35,7 +35,7 @@ } .latest-info h3 { - font-size: var(--font-size-regular); + font-size: 1.15rem; } .latest-info p.value { @@ -45,4 +45,8 @@ .report-summary-tables { padding: 4rem 0; +} + +.report-summary-tables .section { + margin-bottom: 1rem; } \ No newline at end of file diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 18a9217c..8995bc74 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -11,6 +11,11 @@ h2 { font-size: var(--font-size-large); } +:is(a, button, select):focus { + outline: 1.5px solid var(--color-teal-dark); + outline-offset: 1.5px; +} + .sr-only { clip: rect(0 0 0 0); clip-path: inset(50%); @@ -22,11 +27,15 @@ h2 { } .card { - padding: 1rem; + padding: 1.5rem; background: var(--color-card-background); - border-radius: 0.625rem; + border-radius: var(--card-radius); border: 1px solid var(--color-card-border); - box-shadow: var(--shadow-card); + box-shadow: var(--card-shadow); +} + +.card > :is(h2, h3, h4) { + margin-top: 0; } .block-s { @@ -105,6 +114,8 @@ h2 { background-color: var(--color-card-background); border-top: 1px solid var(--color-page-background); border-bottom: 1px solid var(--color-page-background); + position: sticky; + top: 0; } .report-navigation ul li { @@ -149,13 +160,13 @@ h2 { } .intro h1 span { - font-size: var(--font-size-regular); + font-size: 1.15rem; display: block; margin-bottom: 0.5rem; } .intro p { - font-size: var(--font-size-regular); + font-size: 1.15rem; } .intro h1 + p { @@ -178,10 +189,15 @@ h2 { } .table-ui thead { - font-size: 14px; + font-size: 0.875rem; + border-bottom: 1px solid var(--color-text); +} + +.table-ui thead th { + padding: 1rem 0; } -.table-ui tbody tr :is(td, th) { +.table-ui tbody :is(td, th) { padding: 1rem 0; } @@ -189,11 +205,20 @@ h2 { font-weight: normal; } +.table-ui :is(td, th) strong { + margin-right: 0.1rem; + font-weight: 600; +} + .table-ui tr a { color: var(--color-link); text-decoration: underline; } +.table-ui tbody :is(td, th) { + border-bottom: 1px solid var(--color-card-border); +} + /* Summary grid */ .summary-grid { display: grid; @@ -231,7 +256,7 @@ h2 { } .timeseries-title { - font-size: var(--font-size-regular); + font-size: 1.15rem; margin-bottom: 0.75rem; } @@ -243,4 +268,12 @@ h2 { font-weight: 600; font-size: 1rem; margin: 0.75rem 0; +} + +/* Re-arrange when viewport becomes too narrow in height */ +/* ± 200% zoom on a 13" screen */ +@media screen and (max-height: 25rem) { + .report-navigation { + position: static; + } } \ No newline at end of file diff --git a/static/css/techreport/variables.css b/static/css/techreport/variables.css index 5a3f5f7a..fafd8f5d 100644 --- a/static/css/techreport/variables.css +++ b/static/css/techreport/variables.css @@ -16,9 +16,9 @@ --color-page-background: #f4f4f4; - --shadow-card: 0 3px 12px -2px rgba(106, 121, 124, 0.05); + --card-shadow: 0 2px 7px 0px rgba(143, 149, 150, 0.05); + --card-radius: 0.25rem; - --font-size-regular: 1.15rem; --font-size-medium: 1.75rem; --font-size-large: 2.15rem; --font-size-xlarge: 2.35rem; diff --git a/templates/techreport/components/table_overview.html b/templates/techreport/components/table_overview.html index e69de29b..e209ccc8 100644 --- a/templates/techreport/components/table_overview.html +++ b/templates/techreport/components/table_overview.html @@ -0,0 +1,59 @@ +
    +

    {{ table.title }}

    + +

    + {{ table.description }} +

    + +
    Sample table: {{ block.name }} (in progress)
    + + + + + + + + + + + + + {% for technology in table["technologies"] %} + + + + + + {% endfor %} + + +
    {{ table.caption or table.title }}
    TechnologyOriginsGood CWVsLCPCLSFID
    {{ explore.data[technology].name }}{{ explore.data[technology].dates[0].origins.mobile }}{{ explore.data[technology].dates[0].good_overall.mobile }}
    + +

    + {{ table.ctaLabel }} +

    + +
    \ No newline at end of file diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index e8a057de..ee2307bb 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -22,18 +22,33 @@

    Technology Comparison

    -

    Dive into our data

    - - {% set sections = tech_report_page.get("sections") %} - {% for section in sections %} - {% for block in section.get("blocks") %} - {% if block.type == "table" %} - {% set ctaUrl = "/reports/techreport/comparison?tech=" %} - {% set ctaLabel = "Compare technologies" %} - {% include "techreport/components/table.html" %} - {% endif %} - {% endfor %} - {% endfor %} + {% set explore = tech_report_page.sections[0] %} +

    {{ explore.title }}

    + + {% set table = explore.blocks.popular_tech %} + {% set ctaLabel = "Compare technologies" %} + {% set ctaUrl = "/reports/techreport/comparison?tech=wordpress,squarespace,drupal" %} + + {% include "techreport/components/table_overview.html" %} + + {% set table = { + "title": "Most used CMS'es", + "description": "Most popular CMSes, data only for the top 1k rank", + "caption": "Popular technologies caption todo", + "ctaLabel": "Compare technologies", + "ctaUrl": "/reports/techreport/comparison?tech=wordpress,squarespace,drupal" + } %} + {% include "techreport/components/table_overview.html" %} + + {% set table = { + "title": "JavaScript frameworks", + "description": "Table with some other data", + "caption": "Popular technologies caption todo", + "ctaLabel": "Compare technologies", + "ctaUrl": "/reports/techreport/comparison?tech=wordpress,squarespace,drupal" + } %} + {% include "techreport/components/table_overview.html" %} +
    {% endblock %} \ No newline at end of file From f0c60ba06a99b5c1b3aa842264308f4a85398ee6 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 23 May 2023 00:31:52 +0200 Subject: [PATCH 018/155] make table responsive --- config/techreport.json | 1 + static/css/techreport/techreport.css | 3 + .../techreport/components/table_overview.html | 69 +++++++------------ templates/techreport/landing.html | 24 +------ 4 files changed, 30 insertions(+), 67 deletions(-) diff --git a/config/techreport.json b/config/techreport.json index 3ccb5854..21468b5a 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -36,6 +36,7 @@ "data": {}, "blocks": { "popular_tech": { + "id": "popular_tech", "title": "Popular technologies", "description": "To write", "caption": "popular technologies table caption todo", diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 8995bc74..47f08807 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -174,6 +174,9 @@ h2 { } /* Table */ +.table-ui-wrapper { + overflow-x: scroll; +} .table-ui { width: 100%; margin: 1rem 0 2rem 0; diff --git a/templates/techreport/components/table_overview.html b/templates/techreport/components/table_overview.html index e209ccc8..1f7688c9 100644 --- a/templates/techreport/components/table_overview.html +++ b/templates/techreport/components/table_overview.html @@ -5,52 +5,33 @@

    {{ table.title }}

    {{ table.description }}

    - - - - - - - - - - - - - - {% for technology in table["technologies"] %} +
    +
    {{ table.caption or table.title }}
    TechnologyOriginsGood CWVsLCPCLSFID
    + + - - - + + + + + + - {% endfor %} - - -
    {{ table.caption or table.title }}
    {{ explore.data[technology].name }}{{ explore.data[technology].dates[0].origins.mobile }}{{ explore.data[technology].dates[0].good_overall.mobile }}TechnologyOriginsGood CWVsLCPCLSFID
    + + + {% for technology in table["technologies"] %} + + {{ explore.data[technology].name }} + {{ explore.data[technology].dates[0].origins.mobile }} + {{ explore.data[technology].dates[0].good_overall.mobile }} + 2s + 0 + 24ms + + {% endfor %} + + +

    {{ table.ctaLabel }} diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index ee2307bb..ed462370 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -26,29 +26,7 @@

    Technology Comparison

    {{ explore.title }}

    {% set table = explore.blocks.popular_tech %} - {% set ctaLabel = "Compare technologies" %} - {% set ctaUrl = "/reports/techreport/comparison?tech=wordpress,squarespace,drupal" %} - - {% include "techreport/components/table_overview.html" %} - - {% set table = { - "title": "Most used CMS'es", - "description": "Most popular CMSes, data only for the top 1k rank", - "caption": "Popular technologies caption todo", - "ctaLabel": "Compare technologies", - "ctaUrl": "/reports/techreport/comparison?tech=wordpress,squarespace,drupal" - } %} {% include "techreport/components/table_overview.html" %} - - {% set table = { - "title": "JavaScript frameworks", - "description": "Table with some other data", - "caption": "Popular technologies caption todo", - "ctaLabel": "Compare technologies", - "ctaUrl": "/reports/techreport/comparison?tech=wordpress,squarespace,drupal" - } %} - {% include "techreport/components/table_overview.html" %} - - +
    {% endblock %} \ No newline at end of file From 4271bf73c1a647f8178b0a304683fdb2f62b73a7 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 23 May 2023 12:18:42 +0200 Subject: [PATCH 019/155] fix indentations --- server/routes.py | 14 +++++++------- server/techreport.py | 24 ++++++++++++------------ 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/server/routes.py b/server/routes.py index bd6bc82e..f6fac250 100644 --- a/server/routes.py +++ b/server/routes.py @@ -78,14 +78,14 @@ def techreport(page_id): # For all the sections, fetch their defined metrics # Later: only for the active section (when each section is its own view) if active_tech_report.get("sections"): - for section in active_tech_report.get("sections"): - metrics = section.get("metrics") - for metric in metrics: - results = tech_report_util.get_metrics(metric) - section["data"][metric] = results - + for section in active_tech_report.get("sections"): + metrics = section.get("metrics") + for metric in metrics: + results = tech_report_util.get_metrics(metric) + section["data"][metric] = results + active_tech_report["tech"] = tech_report_util.get_tech_id(request) - + print('active_tech_report') print(active_tech_report) diff --git a/server/techreport.py b/server/techreport.py index 0f4db8ec..912c8a56 100644 --- a/server/techreport.py +++ b/server/techreport.py @@ -14,18 +14,18 @@ def get_report(): def get_metrics(metric, filters={}): - global report_metrics + global report_metrics - # Mock functionality - # TODO: Replace with API call - print("fetch results for metric with filters") - print(metric) - print(filters) + # Mock functionality + # TODO: Replace with API call + print("fetch results for metric with filters") + print(metric) + print(filters) - with open("config/mock_responses/%s.json" % metric) as report_metrics_file: - report_metrics = json.load(report_metrics_file) - - return report_metrics + with open("config/mock_responses/%s.json" % metric) as report_metrics_file: + report_metrics = json.load(report_metrics_file) + + return report_metrics def get_tech_id(request): host = request.host.split(".") @@ -33,7 +33,7 @@ def get_tech_id(request): tech = request.args.get("tech") tech_arr = [] if tech: - tech_arr = tech.split(",") + tech_arr = tech.split(",") return tech_arr or subdomain -update_report() \ No newline at end of file +update_report() From 8aa5ff861af1069a4c040e455fe348a7fae3c811 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 23 May 2023 14:45:13 +0200 Subject: [PATCH 020/155] linting --- config/mock_responses/adoption.json | 2 +- config/mock_responses/drupal.json | 4 +-- config/mock_responses/good_vitals.json | 2 +- config/mock_responses/metadata.json | 2 +- config/mock_responses/squarespace.json | 4 +-- config/mock_responses/wordpress.json | 4 +-- server/routes.py | 5 +-- server/techreport.py | 3 ++ static/css/techreport/landing.css | 3 +- static/css/techreport/report.css | 11 +++---- static/css/techreport/techreport.css | 16 ++++------ static/css/techreport/variables.css | 25 ++++++--------- templates/techreport/comparison.html | 2 +- templates/techreport/components/heading.html | 2 +- .../techreport/components/summary_linked.html | 2 +- templates/techreport/components/table.html | 4 +-- .../techreport/components/table_overview.html | 4 +-- templates/techreport/drilldown.html | 6 ++-- templates/techreport/landing.html | 4 +-- templates/techreport/report.html | 2 +- templates/techreport/techreport.html | 31 ++++++++++++++++--- 21 files changed, 75 insertions(+), 63 deletions(-) diff --git a/config/mock_responses/adoption.json b/config/mock_responses/adoption.json index 7a92d624..fa589782 100644 --- a/config/mock_responses/adoption.json +++ b/config/mock_responses/adoption.json @@ -32,4 +32,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/config/mock_responses/drupal.json b/config/mock_responses/drupal.json index ce95515a..8cc0e5a7 100644 --- a/config/mock_responses/drupal.json +++ b/config/mock_responses/drupal.json @@ -3,7 +3,7 @@ "name": "Drupal", "metadata": { "categories": ["CMS", "Blog"], - "description": "Description on wordpress" + "description": "Description on wordpress" }, "dates": [ { @@ -31,4 +31,4 @@ } } ] -} \ No newline at end of file +} diff --git a/config/mock_responses/good_vitals.json b/config/mock_responses/good_vitals.json index 4d9cf3e1..8888daf8 100644 --- a/config/mock_responses/good_vitals.json +++ b/config/mock_responses/good_vitals.json @@ -39,4 +39,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/config/mock_responses/metadata.json b/config/mock_responses/metadata.json index 27d9607d..1894dbad 100644 --- a/config/mock_responses/metadata.json +++ b/config/mock_responses/metadata.json @@ -11,4 +11,4 @@ "description": "Squarespace description" } ] -} \ No newline at end of file +} diff --git a/config/mock_responses/squarespace.json b/config/mock_responses/squarespace.json index b5c5a99e..d1e22356 100644 --- a/config/mock_responses/squarespace.json +++ b/config/mock_responses/squarespace.json @@ -3,7 +3,7 @@ "name": "Squarespace", "metadata": { "categories": ["CMS", "Blog"], - "description": "Description on wordpress" + "description": "Description on wordpress" }, "dates": [ { @@ -31,4 +31,4 @@ } } ] -} \ No newline at end of file +} diff --git a/config/mock_responses/wordpress.json b/config/mock_responses/wordpress.json index f30024a3..eac54ac5 100644 --- a/config/mock_responses/wordpress.json +++ b/config/mock_responses/wordpress.json @@ -3,7 +3,7 @@ "name": "Wordpress", "metadata": { "categories": ["CMS", "Blog"], - "description": "Description on wordpress" + "description": "Description on wordpress" }, "dates": [ { @@ -31,4 +31,4 @@ } } ] -} \ No newline at end of file +} diff --git a/server/routes.py b/server/routes.py index f6fac250..66c4d940 100644 --- a/server/routes.py +++ b/server/routes.py @@ -73,7 +73,7 @@ def techreport(page_id): tech_report = tech_report_util.get_report() # Get the settings for the current page - active_tech_report=tech_report.get('pages').get(page_id) + active_tech_report = tech_report.get("pages").get(page_id) # For all the sections, fetch their defined metrics # Later: only for the active section (when each section is its own view) @@ -86,7 +86,7 @@ def techreport(page_id): active_tech_report["tech"] = tech_report_util.get_tech_id(request) - print('active_tech_report') + print("active_tech_report") print(active_tech_report) return render_template( @@ -97,6 +97,7 @@ def techreport(page_id): reports=all_reports, ) + @app.route("/reports/", strict_slashes=False) def report(report_id): diff --git a/server/techreport.py b/server/techreport.py index 912c8a56..a793e870 100644 --- a/server/techreport.py +++ b/server/techreport.py @@ -1,5 +1,6 @@ import json + def update_report(): global tech_report_json with open("config/techreport.json") as tech_report_file: @@ -27,6 +28,7 @@ def get_metrics(metric, filters={}): return report_metrics + def get_tech_id(request): host = request.host.split(".") subdomain = len(host) > 2 and host[0] or "" @@ -36,4 +38,5 @@ def get_tech_id(request): tech_arr = tech.split(",") return tech_arr or subdomain + update_report() diff --git a/static/css/techreport/landing.css b/static/css/techreport/landing.css index bba3eebe..a249f0e8 100644 --- a/static/css/techreport/landing.css +++ b/static/css/techreport/landing.css @@ -1,4 +1,3 @@ - .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); @@ -49,4 +48,4 @@ .report-summary-tables .section { margin-bottom: 1rem; -} \ No newline at end of file +} diff --git a/static/css/techreport/report.css b/static/css/techreport/report.css index e6449331..86903f0c 100644 --- a/static/css/techreport/report.css +++ b/static/css/techreport/report.css @@ -1,4 +1,3 @@ - /* -------------------- */ /* ----- Sections ----- */ /* -------------------- */ @@ -15,10 +14,11 @@ margin-top: -4rem; padding: 8rem 0; border-top: 1px solid var(--color-teal-medium); - background-image: linear-gradient( - var(--color-teal-faded) 60%, - var(--color-page-background) - ); + background-image: + linear-gradient( + var(--color-teal-faded) 60%, + var(--color-page-background) + ); background-size: 100% 25rem; background-repeat: no-repeat; } @@ -34,4 +34,3 @@ .block-description { max-width: 50rem; } - diff --git a/static/css/techreport/techreport.css b/static/css/techreport/techreport.css index 47f08807..fbeb6f92 100644 --- a/static/css/techreport/techreport.css +++ b/static/css/techreport/techreport.css @@ -17,12 +17,12 @@ h2 { } .sr-only { - clip: rect(0 0 0 0); + clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; - white-space: nowrap; + white-space: nowrap; width: 1px; } @@ -52,7 +52,6 @@ h2 { margin-right: auto; } - .block-l { width: 85rem; max-width: 98%; @@ -144,7 +143,6 @@ h2 { border-bottom: 3px solid var(--color-teal-faded); } - /* Page heading */ .intro { border: none; @@ -177,9 +175,10 @@ h2 { .table-ui-wrapper { overflow-x: scroll; } + .table-ui { width: 100%; - margin: 1rem 0 2rem 0; + margin: 1rem 0 2rem; } .table-ui tr { @@ -202,6 +201,7 @@ h2 { .table-ui tbody :is(td, th) { padding: 1rem 0; + border-bottom: 1px solid var(--color-card-border); } .table-ui tbody th { @@ -218,10 +218,6 @@ h2 { text-decoration: underline; } -.table-ui tbody :is(td, th) { - border-bottom: 1px solid var(--color-card-border); -} - /* Summary grid */ .summary-grid { display: grid; @@ -279,4 +275,4 @@ h2 { .report-navigation { position: static; } -} \ No newline at end of file +} diff --git a/static/css/techreport/variables.css b/static/css/techreport/variables.css index fafd8f5d..eb8cbffb 100644 --- a/static/css/techreport/variables.css +++ b/static/css/techreport/variables.css @@ -1,25 +1,18 @@ :root { - --color-teal-faded: #C0CED0; - --color-teal-medium: #6A797C; - --color-teal-dark: #3A5C63; - --color-teal-darker: #1C4750; - - --color-blue-dark: #3A7098; - + --color-teal-faded: #c0ced0; + --color-teal-medium: #6a797c; + --color-teal-dark: #3a5c63; + --color-teal-darker: #1c4750; + --color-blue-dark: #3a7098; --color-link: var(--color-blue-dark); - - --color-text: #444444; - --color-text-inverted: #FFF; - + --color-text: #444; + --color-text-inverted: #fff; --color-card-background: #fff; - --color-card-border: #CDD4D6; - + --color-card-border: #cdd4d6; --color-page-background: #f4f4f4; - --card-shadow: 0 2px 7px 0px rgba(143, 149, 150, 0.05); --card-radius: 0.25rem; - --font-size-medium: 1.75rem; --font-size-large: 2.15rem; --font-size-xlarge: 2.35rem; -} \ No newline at end of file +} diff --git a/templates/techreport/comparison.html b/templates/techreport/comparison.html index ec492fcc..35e80db2 100644 --- a/templates/techreport/comparison.html +++ b/templates/techreport/comparison.html @@ -7,4 +7,4 @@

    Content coming soon

    -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/templates/techreport/components/heading.html b/templates/techreport/components/heading.html index c6f7847a..9dc445a6 100644 --- a/templates/techreport/components/heading.html +++ b/templates/techreport/components/heading.html @@ -5,4 +5,4 @@

    {{ tech_report_page.description }} -
    \ No newline at end of file +
    diff --git a/templates/techreport/components/summary_linked.html b/templates/techreport/components/summary_linked.html index bde0b186..7b5de761 100644 --- a/templates/techreport/components/summary_linked.html +++ b/templates/techreport/components/summary_linked.html @@ -8,4 +8,4 @@

    {{ summary.description }}

    -
    \ No newline at end of file +
    diff --git a/templates/techreport/components/table.html b/templates/techreport/components/table.html index 2c835edc..3d3898e0 100644 --- a/templates/techreport/components/table.html +++ b/templates/techreport/components/table.html @@ -4,7 +4,7 @@

    {{ block.name }}

    {{ block.description }}

    - + @@ -31,4 +31,4 @@

    {{ block.name }}

    {{ ctaLabel }}

    - \ No newline at end of file + diff --git a/templates/techreport/components/table_overview.html b/templates/techreport/components/table_overview.html index 1f7688c9..b56aeafb 100644 --- a/templates/techreport/components/table_overview.html +++ b/templates/techreport/components/table_overview.html @@ -28,7 +28,7 @@

    {{ table.title }}

    - {% endfor %} + {% endfor %}
    0 24ms
    @@ -37,4 +37,4 @@

    {{ table.title }}

    {{ table.ctaLabel }}

    -
    \ No newline at end of file +
    diff --git a/templates/techreport/drilldown.html b/templates/techreport/drilldown.html index 4926fb3d..9bace175 100644 --- a/templates/techreport/drilldown.html +++ b/templates/techreport/drilldown.html @@ -38,7 +38,7 @@

    {{ tech_report_labels.cwv.title }}

    {{ tech_report_labels.cwv.section_description }}
    - + {% set timeseries_title = tech_report_labels.cwv.good.timeseries_title %} {% set timeseries_description = tech_report_labels.cwv.good.section_description %} {% set timeseries_metric = "good_vitals" %} @@ -54,7 +54,7 @@

    {{ tech_report_labels.adoption.title }}

    {{ tech_report_labels.adoption.section_description }}
    - + {% set timeseries_title = tech_report_labels.adoption.timeseries_title %} {% set timeseries_description = tech_report_labels.adoption.timeseries_description %} {% set timeseries_metric = "adoption" %} @@ -68,4 +68,4 @@

    {{ tech_report_labels.adoption.title }}

    {% endif %} -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/templates/techreport/landing.html b/templates/techreport/landing.html index ed462370..35c90428 100644 --- a/templates/techreport/landing.html +++ b/templates/techreport/landing.html @@ -27,6 +27,6 @@

    {{ explore.title }}

    {% set table = explore.blocks.popular_tech %} {% include "techreport/components/table_overview.html" %} - + -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/templates/techreport/report.html b/templates/techreport/report.html index 13dba671..b1a838fe 100644 --- a/templates/techreport/report.html +++ b/templates/techreport/report.html @@ -5,4 +5,4 @@ {% endblock %} -{% block section %}{% endblock %} \ No newline at end of file +{% block section %}{% endblock %} diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html index 76b8b4c2..c77a8a8b 100644 --- a/templates/techreport/techreport.html +++ b/templates/techreport/techreport.html @@ -12,13 +12,34 @@ @@ -27,5 +48,5 @@ {% block main %} {% block section %}{% endblock %} - -{% endblock %} \ No newline at end of file + +{% endblock %} From 4f943e9b78ced8e33ff5798dd0b8bf84d0770c07 Mon Sep 17 00:00:00 2001 From: Sarah Fossheim Date: Tue, 23 May 2023 15:23:13 +0200 Subject: [PATCH 021/155] remove if statement from (linting) --- config/techreport.json | 2 +- templates/techreport/techreport.html | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/config/techreport.json b/config/techreport.json index 21468b5a..a5fdd86e 100644 --- a/config/techreport.json +++ b/config/techreport.json @@ -87,4 +87,4 @@ "icon": "fas fa-tachometer-alt" } } -} \ No newline at end of file +} diff --git a/templates/techreport/techreport.html b/templates/techreport/techreport.html index c77a8a8b..8b98ccc3 100644 --- a/templates/techreport/techreport.html +++ b/templates/techreport/techreport.html @@ -12,31 +12,31 @@