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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
<script type="module">
// Get raw data
const rawData = [
{% for sample in measurement.samples %}
[{{ sample.commit_num }}, {{ sample.mean.gv_value() }}, {{ sample.start_time }}, '{{sample.commit}}'],
{% endfor %}
];
const convertToMinute = (time) => {
return time[0]*60 + time[1] + time[2]/60 + time[3]/3600;
}
// Update value format to either minutes or leave as size value
const updateValue = (value) => {
// Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
return Array.isArray(value) ? convertToMinute(value) : value
}
// Convert raw data to the format: [time, value]
const data = rawData.map(([commit, value, time]) => {
return [
// The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000.
new Date(time * 1000).getTime(),
// Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
updateValue(value)
]
});
const commitCountList = rawData.map(([commit, value, time]) => {
return commit
});
const commitCountData = rawData.map(([commit, value, time]) => {
return updateValue(value)
});
// Set chart options
const option_start_time = {
tooltip: {
trigger: 'axis',
enterable: true,
position: function (point, params, dom, rect, size) {
return [point[0], '0%'];
},
formatter: function (param) {
const value = param[0].value[1]
const sample = rawData.filter(([commit, dataValue]) => updateValue(dataValue) === value)
const formattedDate = new Date(sample[0][2] * 1000).toString().replace(/GMT[+-]\d{4}/, '').replace(/\(.*\)/, '(CEST)');
// Add commit hash to the tooltip as a link
const commitLink = `https://git.yoctoproject.org/poky/commit/?id=${sample[0][3]}`
if ('{{ measurement.value_type.quantity }}' == 'time') {
const hours = Math.floor(value/60)
const minutes = Math.floor(value % 60)
const seconds = Math.floor((value * 60) % 60)
return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
}
return `<strong>Size:</strong> ${value.toFixed(2)} MB, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
;}
},
xAxis: {
type: 'time',
},
yAxis: {
name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration in minutes' : 'Disk size in MB',
type: 'value',
min: function(value) {
return Math.round(value.min - 0.5);
},
max: function(value) {
return Math.round(value.max + 0.5);
}
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'none'
},
],
series: [
{
name: '{{ measurement.value_type.quantity }}',
type: 'line',
symbol: 'none',
data: data
}
]
};
const option_commit_count = {
tooltip: {
trigger: 'axis',
enterable: true,
position: function (point, params, dom, rect, size) {
return [point[0], '0%'];
},
formatter: function (param) {
const value = param[0].value
const sample = rawData.filter(([commit, dataValue]) => updateValue(dataValue) === value)
const formattedDate = new Date(sample[0][2] * 1000).toString().replace(/GMT[+-]\d{4}/, '').replace(/\(.*\)/, '(CEST)');
// Add commit hash to the tooltip as a link
const commitLink = `https://git.yoctoproject.org/poky/commit/?id=${sample[0][3]}`
if ('{{ measurement.value_type.quantity }}' == 'time') {
const hours = Math.floor(value/60)
const minutes = Math.floor(value % 60)
const seconds = Math.floor((value * 60) % 60)
return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
}
return `<strong>Size:</strong> ${value.toFixed(2)} MB, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
;}
},
xAxis: {
name: 'Commit count',
type: 'category',
data: commitCountList
},
yAxis: {
name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration in minutes' : 'Disk size in MB',
type: 'value',
min: function(value) {
return Math.round(value.min - 0.5);
},
max: function(value) {
return Math.round(value.max + 0.5);
}
},
dataZoom: [
{
type: 'slider',
xAxisIndex: 0,
filterMode: 'none'
},
],
series: [
{
name: '{{ measurement.value_type.quantity }}',
type: 'line',
symbol: 'none',
data: commitCountData
}
]
};
// Draw chart
const draw_chart = (chart_id, option) => {
let chart_name
const chart_div = document.getElementById(chart_id);
// Set dark mode
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
chart_name= echarts.init(chart_div, 'dark', {
height: 320
});
} else {
chart_name= echarts.init(chart_div, null, {
height: 320
});
}
// Change chart size with browser resize
window.addEventListener('resize', function() {
chart_name.resize();
});
return chart_name.setOption(option);
}
draw_chart('{{ chart_elem_start_time_id }}', option_start_time)
draw_chart('{{ chart_elem_commit_count_id }}', option_commit_count)
</script>
|
