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
|
<html>
<head>
<title>Mapbox GL Binary Size</title>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(() => {
// Must be in sync with the definition in scripts/check_binary_size.js on the master branch.
const platforms = [
{ 'platform': 'iOS', 'arch': 'armv7' },
{ 'platform': 'iOS', 'arch': 'arm64' },
{ 'platform': 'iOS', 'arch': 'Dynamic' },
{ 'platform': 'Android', 'arch': 'arm-v7' },
{ 'platform': 'Android', 'arch': 'arm-v8' },
{ 'platform': 'Android', 'arch': 'x86' },
{ 'platform': 'Android', 'arch': 'x86_64' }
];
const data = new google.visualization.DataTable();
data.addColumn('string', 'Title');
platforms.forEach(function(item) {
data.addColumn('number', item.platform + '/' + item.arch);
});
fetch('https://mapbox.s3.amazonaws.com/mapbox-gl-native/metrics/binary-size/data.json')
.then(response => response.json())
.then(rows => {
for (const row of rows) {
data.addRow(row);
}
const 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: '#ffcc00', targetAxisIndex: 1, pointSize: 2 }, // iOS/dynamic
{ color: '#7774c0', targetAxisIndex: 1, pointSize: 2 }, // Android/arm-v7
{ color: '#5f5c99', targetAxisIndex: 1, pointSize: 2 }, // Android/arm-v8
{ color: '#48ad6e', targetAxisIndex: 1, pointSize: 2 }, // Android/x86
{ color: '#357f51', targetAxisIndex: 1, pointSize: 2 }, // Android/x86_64
],
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
};
const chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
});
});
</script>
</head>
<body>
<div id="chart" style="height:100%"></div>
</body>
</html>
|
