http archive charts on metrics pages (GoogleChrome#584)

* Integrated httparchive data on metrics pages * Update note * Add Bigquery cmd * dont show empty pre * Increase iframe height to account for urls * update bq query * Update callout * space for http archive * space
mustafacco7 · Jan 16, 2019 · 3e85c33 · 3e85c33
1 parent 4d4bed0
commit 3e85c33
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 29 deletions.
diff --git a/static/elements/chromedash-timeline.html b/static/elements/chromedash-timeline.html
@@ -11,7 +11,25 @@
     </template>
   </select>
   <label>Show all historical data: <input type="checkbox" checked="{{showAllHistoricalData::change}}"></label>
+  <h3 id="usage" class="header_title">Percentage of page loads that use this feature</h3>
+  <p class="description">The chart below shows the percentage of page loads (in Chrome) that use
+    this feature at least once. Data is across all channels and platforms.
+  </p>
   <div id="chart"></div>
+  <p class="callout">
+    <b>Note</b>: on 2017-10-26 the underlying metrics were switched over to a newer collection system
+    which is <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-api-owners-discuss/IpIkbz0qtrM/HUCfSMv2AQAJ" target="_blank">more accurate</a>.
+    This is also the reason for the abrupt spike around 2017-10-26.
+  </p>
+  <h3 id="httparchive" class="header_title">Adoption of the feature on top sites</h3>
+  <p class="description">The chart below shows the adoption of the feature by the top URLs on the internet. Data from <a href="https://httparchive.org/" target="blank">HTTP Archive</a>.</p>
+  <iframe id="httparchivedata"></iframe>
+  <p class="callout">
+    <b>Note</b>: The jump around July and December 2018 are because the corpus of URLs crawled by HTTP Archive increased. These jumps have no correlation with the jump in the top graph.
+    See the <a href="https://discuss.httparchive.org/t/changes-to-the-http-archive-corpus/1539" target="_blank">announcement</a> for more details.
+  </p>
+  <p class="description">Copy and run this command in <a href="https://bigquery.cloud.google.com" target="_blank">BigQuery</a> to produce similar results:</p>
+  <pre id="bigquery"></pre>
 </template>
 <script>
   Polymer({
@@ -98,17 +116,17 @@
 
       table.addRows(rowArray);
 
-      // function aggregateByMonth(date) {
-      //   var month = date.getMonth();
-      //   var year = date.getFullYear();
-      //   return new Date(year, month);
-      // }
+      function aggregateByMonth(date) {
+        var month = date.getMonth();
+        var year = date.getFullYear();
+        return new Date(year, month);
+      }
 
-      // table = google.visualization.data.group(table,
-      //   [{column: 0, modifier: aggregateByMonth, type: 'date'}],
-      //   [{column: 1, aggregation: google.visualization.data.max, type: 'number'}],
-      //   [{column: 2, type: 'string'}]
-      // );
+      table = google.visualization.data.group(table,
+        [{column: 0, modifier: aggregateByMonth, type: 'date'}],
+        [{column: 1, aggregation: google.visualization.data.avg, type: 'number', label: 'Monthly Average'}],
+        [{column: 2, type: 'string'}]
+      );
 
       var formatter = new google.visualization.NumberFormat({fractionDigits: 6});
       formatter.format(table, 1); // Apply formatter to percentage column.
@@ -123,8 +141,8 @@
 
       var chart = new google.visualization.LineChart(this.$.chart);
       chart.draw(view, {
-        title: this.title,
-        subtitle: 'all channels and platforms',
+        // title: this.title,
+        // subtitle: 'all channels and platforms',
         backgroundColor: 'white',
         legend: { position: 'none' },
         curveType: 'function',
@@ -135,7 +153,7 @@
         },
         hAxis: {
           title: 'Date',
-          format: 'MM/yy'
+          format: 'M/yy'
         },
         width: '100%',
         height: '100%',
@@ -162,6 +180,8 @@
       var url = prefix + '/data/timeline/' + this.type + this.view +
                 '?bucket_id=' + this.selectedBucketId;
 
+      this._renderHTTPArchiveData();
+
       var xhr = new XMLHttpRequest();
       xhr.responseType = 'json';
       xhr.open('GET', url);
@@ -175,6 +195,26 @@
                   this.selectedBucketId;
         history.pushState({id: this.selectedBucketId}, '', url);
       }
+    },
+
+    _renderHTTPArchiveData() {
+      if (!this.props.length) {
+        return;
+      }
+
+      const feature = this.props.find((el) => el[0] === parseInt(this.selectedBucketId));
+      if (feature) {
+        const featureName = feature[1];
+        const REPORT_ID = '1M8kXOqPkwYNKjJhtag_nvDNJCpvmw_ri';
+        const dsEmbedUrl = `https://datastudio.google.com/embed/reporting/${REPORT_ID}/page/tc5b?config=%7B"df3":"include%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580${featureName}"%7D`;
+        this.$.httparchivedata.src = dsEmbedUrl;
+
+        this.$.bigquery.textContent = `#standardSQL
+SELECT yyyymmdd, client, pct_urls, sample_urls
+FROM \`httparchive.blink_features.usage\`
+WHERE feature = '${featureName}'
+ORDER BY yyyymmdd DESC, client`;
+      }
     }
   });
 </script>

diff --git a/static/js/shared.min.js b/static/js/shared.min.js
diff --git a/static/sass/elements/chromedash-timeline.scss b/static/sass/elements/chromedash-timeline.scss
@@ -18,3 +18,39 @@
   background: $gray-1;
   border-radius: $default-border-radius;
 }
+
+#httparchivedata {
+  border: 0;
+  width: 100%;
+  height: 775px;
+}
+
+.header_title {
+  margin: 32px 0 15px 0;
+}
+
+.description {
+  margin: 15px 0;
+}
+
+.callout {
+  padding: $content-padding;
+  margin-top: $content-padding;
+  background-color: $md-yellow-100;
+  border-color: rgba(27,31,35,0.15);
+  line-height: 1.4;
+}
+
+#bigquery:empty {
+  display: none;
+}
+
+#bigquery {
+  font-family: 'Courier New', Courier, monospace;
+  font-weight: 600;
+  padding: 15px;
+  margin-bottom: 100px;
+  background: $gray-4;
+  color: #fff;
+  display: inline-block;
+}
diff --git a/static/sass/metrics/metrics.scss b/static/sass/metrics/metrics.scss
@@ -32,14 +32,6 @@
   }
 }
 
-.callout {
-  padding: $content-padding;
-  margin-top: $content-padding;
-  background-color: $md-yellow-100;
-  border-color: rgba(27,31,35,0.15);
-  line-height: 1.4;
-}
-
 @media only screen and (max-width: 700px) {
   #subheader {
     margin: $content-padding 0;

diff --git a/templates/metrics/feature/timeline/popularity.html b/templates/metrics/feature/timeline/popularity.html
@@ -28,16 +28,11 @@ <h2>HTML &amp; JavaScript usage &gt; all features > timeline</h2>
 
 {% block content %}
 <div class="data-panel">
-  <p class="description">Usage of HTML/JS features over time.</p>
+  <p class="description">To begin, select a feature in the dropdown below.</p>
   <chromedash-feature-timeline
       type="feature" view="popularity"
       title="Percentage of page views that use this feature"
       {% if not prod %}use-remote-data{% endif %}></chromedash-feature-timeline>
-  <p class="callout">
-    <b>Note</b>: on 2017-10-26 the underlying metrics were switched over to a newer collection system
-    which is <a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-api-owners-discuss/IpIkbz0qtrM/HUCfSMv2AQAJ" target="_blank">more accurate</a>.
-    This is also the reason for the abrupt spike around 2017-10-26.
-  </p>
 </div>
 {% endblock %}
 
@@ -46,7 +41,6 @@ <h2>HTML &amp; JavaScript usage &gt; all features > timeline</h2>
 document.addEventListener('WebComponentsReady', function(e) {
   var timeline = $('chromedash-feature-timeline');
   timeline.props = {{FEATUREOBSERVER_BUCKETS|safe}};
-
   document.body.classList.remove('loading');
 
   window.addEventListener('popstate', function(e) {