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
|
<html>
<head>
<title>Mapbox GL Binary Size</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var data;
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(function() {
var platforms = [
{ 'platform': 'iOS', 'arch': 'armv7' },
{ 'platform': 'iOS', 'arch': 'arm64' },
{ 'platform': 'macOS', 'arch': 'x86_64' },
{ 'platform': 'Android', 'arch': 'arm-v7' },
{ 'platform': 'Android', 'arch': 'arm-v8' },
{ 'platform': 'Android', 'arch': 'x86' },
{ 'platform': 'Android', 'arch': 'x86_64' }
];
data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
platforms.forEach(function(item) {
data.addColumn('number', item.platform + '/' + item.arch);
});
const beginDate = new Date('2016-11-16');
var dateFormatter = new google.visualization.DateFormat({formatType: 'long'});
var byteFormatter = new google.visualization.NumberFormat({pattern:'###,### bytes'});
function addDataset(platform, arch, index) {
getLogs(platform, arch, function(err, json) {
if (err) throw err;
for (var i = 0; i < json.Datapoints.length; i++) {
var item = json.Datapoints[i];
var row = [new Date(item.Timestamp)];
if (row[0] < beginDate) continue;
for (var j = 0; j < platforms.length; j++) {
if (j == index) {
row.push(item.Maximum);
} else {
row.push(null);
}
}
data.addRow(row);
}
data.sort([{column: 0}]);
drawChart();
});
}
platforms.forEach(function(item, index) {
addDataset(item.platform, item.arch, index);
});
});
function drawChart() {
var options = {
title: 'Mapbox GL Binary size',
chartArea: { height: '90%', width: '90%' },
series: [
{ color: '#dc464c', targetAxisIndex: 1, pointSize: 2 }, // iOS/armv7
{ color: '#a01d22', targetAxisIndex: 1, pointSize: 2 }, // iOS/arm64
{ color: '#1a2c41', targetAxisIndex: 1, pointSize: 2 }, // macOS/x86_64
{ color: '#8b87e0', targetAxisIndex: 1, pointSize: 2 }, // Android/arm-v5
{ color: '#7774c0', targetAxisIndex: 1, pointSize: 2 }, // Android/arm-v7
{ color: '#5f5c99', targetAxisIndex: 1, pointSize: 2 }, // Android/arm-v7
{ color: '#48ad6e', targetAxisIndex: 1, pointSize: 2 }, // Android/x86
{ color: '#357f51', targetAxisIndex: 1, pointSize: 2 }, // Android/x86_64
{ color: '#f9a12e', targetAxisIndex: 1, pointSize: 2 }, // Android/mips
],
legend: { position: 'in' },
pointsVisible: true,
vAxis: {
ticks: [ 1e6, 1.5e6, 2e6, 2.5e6, 3e6, 3.5e6, 4e6, 4.5e6, 5e6, 5.5e6, 6e6, 6.5e6, 7e6, 7.5e6, 8e6, 8.5e6, 9e6 ],
gridlines: { color: '#999' },
minorGridlines: { count: 4, color: '#EEE' },
textPosition: 'out',
format: 'short',
viewWindow: { min: 2.5e6, max: 9e6 }
},
interpolateNulls: true
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
function getLogs(platform, arch, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://mapbox.s3.amazonaws.com/mapbox-gl-native/metrics/binary-size/Platform=' + platform + ',Arch=' + arch + '.json', true);
xhr.onload = function() {
if (xhr.status == 200) {
try {
var logs = JSON.parse(xhr.responseText);
} catch(err) {
callback(err);
return;
}
callback(null, logs);
} else {
callback(new Error(xhr.responseText));
}
};
xhr.onerror = function() {
callback(new Error(xhr.responseText));
};
xhr.send();
}
</script>
</head>
<body>
<div id="chart" style="height:100%"></div>
</body>
</html>
|