-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.template
100 lines (88 loc) · 3.63 KB
/
index.template
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
<html>
<head>
<title>Ember build size tracker</title>
<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="Chart.Scatter.min.js"></script>
<style>
body {
background-color: #FAF4F1;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
padding: 15px;
font-size: 12px;
}
.container {
display: flex;
justify-content: center;
width: 100%;
}
canvas {
width: 90vh;
height: 40vh;
}
.green {
color: green;
}
.group {
padding: 20px 0px;
}
</style>
</head>
<body>
<% _.forEach(branches, function(branch) { %>
<div class="container group">
<h2>Ember <b>${branch.branch}</b> channel build sizes (in bytes). Tracking period <%= branch.trackingPeriod %>.</h2>
</div>
<div class="container">
<canvas id="${branch.branch}Chart" width="90%" height="30%"></canvas>
</div>
<div class="container group">
<div>
This chart tracks the size of <b>ember.min.js</b> located in <a href="https://github.com/components/ember/tree/${branch.branch}">https://github.com/components/ember/tree/${branch.branch}</a>. <span class="green">Green line</span> shows the gzipped size. Chart is updated once in a day.
</div>
</div>
<% }); %>
<script>
var data = {};
var canvas;
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleFontSize = 10;
<% _.forEach(branches, function(branch) { %>
data['${branch.branch}'] = [{
fillColor: 'rgba(220,220,220,0.2)',
strokeColor: 'rgba(220,220,220,1)',
pointColor: 'black',
pointStrokeColor: '#fff',
pointHighlightFill: '#000',
pointHighlightStroke: 'rgba(220,220,220,1)',
data: ${JSON.stringify(branch.dataPoints)}
}, {
fillColor: 'rgba(120,220,120,0.2)',
strokeColor: 'rgba(120,220,120,1)',
pointColor: 'black',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data: ${JSON.stringify(branch.dataPointsGzipped)}
}];
canvas = document.getElementById('${branch.branch}Chart');
new Chart(canvas.getContext('2d')).Scatter(data['${branch.branch}'], {
scaleLineColor: 'rgba(0, 0 , 0, 0.7)',
scaleGridLineColor: 'rgba(0, 0 ,0, 0.1)',
scaleShowGridLines : true,
pointDotRadius: 2,
pointHitDetectionRadius: 2,
scaleType: 'date',
scaleDateFormat: '${branch.branch}' === 'release' ? 'mmm yyyy' : 'mmm d yyyy',
scaleDateTimeFormat: '${branch.branch}' === 'release' ? 'mmm yyyy' : 'mmm d yyyy',
bezierCurve: false,
datasetStrokeWidth: 3
});
<% }); %>
</script>
<div class="container">
<div>
<a href="https://github.com/ilkkao/ember-size-tracker">Source</a>
</div>
</div>
</body>
</html>