httparchive.org/templates/report/report.html at 5d219ae4cc4f8012f7b862e13b54f0164d98e63c · HTTPArchive/httparchive.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
{% extends "main.html" %}


{% set wpt_id = request.args.get('wptid') %}
{% set enabled_lens_id = report.lens.id if report.lens else '' %}

{% block title %}HTTP Archive: {{ (report.lens and '%s: ' % report.lens.name or '') +report.name }}{% endblock %}
{% block description %}{{ report.summary | markdown | striptags }}{% endblock %}
{% block page_url %}https://httparchive.org{{ url_for(request.endpoint, **request.view_args) }}{% endblock %}

{% block image_url %}{% if report.image %}https://httparchive.org{{ report.image }}{% else %}{{ super() }}{% endif %}{% endblock %}
{% block image_width %}{% if report.image %}800{% else %}{{ super() }}{% endif %}{% endblock %}
{% block image_height %}{% if report.image %}460{% else %}{{ super() }}{% endif %}{% endblock %}

{% block head %}
  {{ super() }}
  <link rel="stylesheet" href="{{ get_versioned_filename('/static/css/report.css') }}" />
  <link rel="preconnect" href="https://cdn.httparchive.org" />
  <link rel="canonical" href="https://httparchive.org{{ request.path }}" />
{% endblock %}

{% block main %}
  <section id="report-header">
    <div class="container">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h1>
          <small>
            {{ report.lens and report.lens.name or 'Report' }}:
          </small>
          {% block reportName %}{{ report.name }}{% endblock %}
        </h1>

        {{ report.summary | markdown | safe }}

        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <ul id="toc">
            {% for metric in report.metrics %}
              {% if metric[viz]['enabled'] %}
                <li>
                  <a href="#{{ metric.id }}">{{ metric.name }}</a>
                </li>
              {% endif %}
            {% endfor %}
            </ul>
          </div>

          <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <form id="history" class="row">
              <div class="col-sm-8 col-sm-offset-2 col-xs-12">
                <label for="lens">
                  Lens
                    <a href="{{ url_for('faq', _anchor='what-is-a-lens') }}" aria-label="FAQ: What is a lens?">
                      <svg class="svg-inline--fa fa-info-circle fa-w-16 hidden-xs help-tooltip" title="A lens shows a report for a particular subset of websites." aria-hidden="true" aria-labelledby="svg-inline--fa-title-1" data-prefix="fa" data-icon="info-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><title id="svg-inline--fa-title-1">A lens shows a report for a particular subset of websites.</title><path fill="currentColor" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg>
                    </a>
                </label>

                <select id="lens">
                  <option></option>
                  {% for (lens_id, l) in report.lenses.items() %}
                    {% if lens_id == enabled_lens_id %}
                    <option value="{{ lens_id }}" selected>
                      {{ l.name }}
                    </option>
                    {% else %}
                    <option value="{{ lens_id }}">
                      {{ l.name }}
                    </option>
                    {% endif %}
                  {% endfor %}
                </select>
              </div>

              <div class="col-sm-4 col-sm-offset-2 col-xs-12">
                <label for="startDate">
                  Start Date
                </label>

                <select id="startDate">
                  {% for d in report.dates %}
                    {% if d == start %}
                    <option value="{{ d }}" selected class="yyyy_mm_dd">
                      {{ d }}
                    </option>
                    {% else %}
                    <option value="{{ d }}" class="yyyy_mm_dd">
                      {{ d }}
                    </option>
                    {% endif %}
                  {% endfor %}
                </select>
              </div>

              <div class="col-sm-4 col-xs-12">
                <label for="endDate">
                  End Date
                </label>

                <select id="endDate">
                  <option></option>
                  {% for d in report.dates %}
                  {% if d == end %}
                  <option value="{{ d }}" selected class="yyyy_mm_dd">
                    {{ d }}
                  </option>
                  {% else %}
                  <option value="{{ d }}" class="yyyy_mm_dd">
                    {{ d }}
                  </option>
                  {% endif %}
                  {% endfor %}
                </select>
              </div>

              <div class="col-sm-8 col-sm-offset-2 col-xs-12">
                <button id="update" class="btn alt" type="button">Update</button>
              </div>

              <div id="permalink-wrapper" class="col-lg-8 col-md-8 col-sm-8 col-sm-offset-2 col-xs-12">
                <i id="permalink-icon">
                  <svg  width="12" height="12" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"/>
                  </svg>
                </i>
                <input id="permalink" type="text" readonly="true" aria-label="Permalink">
              </div>
              <div class="col-lg-8 col-md-8 col-sm-8 col-sm-offset-2 col-xs-12">
                <div class="btn-group pull-right">
                  <button id="grid-view" class="btn {% if report.view == 'grid' %}alt{% endif %}" title="Grid view" type="button">
                    <svg class="svg-inline--fa fa-th fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="th" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"></path></svg>
                  </button>
                  <button id="list-view" class="btn {% if report.view == 'list' %}alt{% endif %}" title="List view" type="button">
                    <svg class="svg-inline--fa fa-list fa-w-16" aria-hidden="true" data-prefix="fa" data-icon="list" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M128 116V76c0-8.837 7.163-16 16-16h352c8.837 0 16 7.163 16 16v40c0 8.837-7.163 16-16 16H144c-8.837 0-16-7.163-16-16zm16 176h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h352c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H144c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zM16 144h64c8.837 0 16-7.163 16-16V64c0-8.837-7.163-16-16-16H16C7.163 48 0 55.163 0 64v64c0 8.837 7.163 16 16 16zm0 160h64c8.837 0 16-7.163 16-16v-64c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v64c0 8.837 7.163 16 16 16zm0 160h64c8.837 0 16-7.163 16-16v-64c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v64c0 8.837 7.163 16 16 16z"></path></svg>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="report-metrics" class="{% if report.view == 'grid' %}grid-view{% endif %}">
    <div class="container">
      <div class="report-metrics-inner-wrapper col-lg-12 col-md-12 col-sm-12 col-xs-12">
        {% block report %}{% endblock %}
      </div>
    </div>
  </section>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="{{ get_versioned_filename('/static/js/highstock.js') }}" nonce="{{ csp_nonce() }}"></script>
  <script src="{{ get_versioned_filename('/static/js/exporting.js') }}" nonce="{{ csp_nonce() }}"></script>
  <script src="{{ get_versioned_filename('/static/js/report.js') }}" nonce="{{ csp_nonce() }}"></script>
  <script nonce="{{ csp_nonce() }}">
    var report = {{ report|tojson }};
    report.url = {{ script_root|tojson|safe }};
    report.startDate = {{ start|tojson }};
    report.endDate = {{ end|tojson }};
    report = new Report(report, {{ viz|tojson }});
    {% if wpt_id %}
    var wptId = {{ wpt_id|tojson }};
    report.getWPT(wptId);
    {% endif %}
  </script>
{% endblock %}

{% macro metric_info(metric, viz) %}
  <h2 class="metric-header">
    <a href="#{{ metric.id }}" data-metric="{{ metric.id }}">{{ metric.name }}</a>
    <button class="grid-expansion" data-metric="{{ metric.id }}" type="button">
      <i class="fas fa-expand" title="Expand metric"></i>
      <i class="fas fa-compress" title="Collapse metric"></i>
    </button>
  </h2>
  {% if metric.description %}
    {{ metric.description | markdown | safe }}
  {% endif %}
  {% for report_id, report_name in metric.similar_reports.items() %}
    <p>
      <em>
        See also:
        <a href="{{ url_for('report', report_id=report_id) }}">
          {{ report_name }}
        </a>
      </em>
    </p>
  {% endfor %}
  <div class="metric-summaries">
    <div class="metric-summary desktop hidden">
      <span class="client">
        <span class="metric">Median</span>
        Desktop
      </span>
      <span class="primary"></span>
      {% if viz == 'timeseries' %}
      <span class="change"></span>
      {% endif %}
    </div>
    {% if wpt_id %}
    <div class="metric-summary webpagetest hidden">
      <span class="client">
        WebPageTest
      </span>
      <span class="primary"></span>
    </div>
    {% endif %}
    <div class="metric-summary mobile hidden">
      <span class="client">
        <span class="metric">Median</span>
        Mobile
      </span>
      <span class="primary"></span>
      {% if viz == 'timeseries' %}
      <span class="change"></span>
      {% endif %}
    </div>
  </div>
{% endmacro %}