Timeseries of JS Bytes from HTTP Archive

by jbristowe

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

const METRIC = 'JS Bytes';
const UNIT = 'KB';
const changelogUrl = 'https://raw.githubusercontent.com/HTTPArchive/httparchive/master/docs/changelog.json';
const dataUrl = 'https://storage.googleapis.com/http-archive-beta.appspot.com/bytesJsTimeseries.json';
fetch(dataUrl)
	.then(response => response.text())
  .then(nljson => `[${nljson.replace(/\n/g, ',')}]`)
  .then(jsonStr => JSON.parse(jsonStr))
  .then(data => data.sort((a, b) => a.date < b.date ? -1 : 1))
  .then(data => data.map(toNumeric))
	.then(data => {
  const desktop = data.filter(isDesktop);
  const mobile = data.filter(isMobile);
  
  getFlagSeries().then(flagSeries => {
    drawChart([
      getLineSeries('Desktop', desktop.map(toLine), Colors.DESKTOP),
      getAreaSeries('Desktop', desktop.map(toIQR), Colors.DESKTOP),
      getLineSeries('Mobile', mobile.map(toLine), Colors.MOBILE),
      getAreaSeries('Mobile', mobile.map(toIQR), Colors.MOBILE),
      flagSeries
    ]);
  })
});

const isDesktop = o => o.client == 'desktop';
const isMobile = o => o.client == 'mobile';
const toNumeric = o => ({
	timestamp: +o.timestamp,
  p25: o.p25 / 1024,
  p50: o.p50 / 1024,
  p75: o.p75 / 1024,
  client: o.client
});
const toIQR = o => [o.timestamp, o.p25, o.p75];
const toLine = o => [o.timestamp, o.p50];  
const getLineSeries = (name, data, color) => ({
  name,
  type: 'line',
  data,
  color,
  zIndex: 1,
  marker: {
    enabled: false
  }
});
const getAreaSeries = (name, data, color) => ({
  name,
  type: 'areasplinerange',
  linkedTo: ':previous',
  data,
  lineWidth: 0,
  color,
  fillOpacity: 0.1,
  zIndex: 0,
  marker: {
    enabled: false
  }
});
const flags = {};
const getFlagSeries = () => fetch(changelogUrl)
    .then(response => response.json())
    .then(data => {
    	data.forEach(change => {
      	flags[+change.date] = {
        	title: change.title,
          desc: change.desc
        };
      });
			return {
      	type: 'flags',
        name: 'Changelog',
        data: data.map((change, i)...