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
|
<script type="module">
// Get raw data
const rawData = [
{% for sample in measurement.samples %}
[{{ sample.commit_num }}, {{ sample.mean.gv_value() }}, {{ sample.start_time }}],
{% 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)
]
});
// Set chart options
const option = {
tooltip: {
trigger: 'axis',
valueFormatter: (value) => {
const commitNumber = rawData.filter(([commit, dataValue, time]) => updateValue(dataValue) === value)
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 [
hours + ':' + minutes + ':' + seconds + ', ' +
'commit number: ' + commitNumber[0][0]
]
}
return [
value.toFixed(2) + ' MB' + ', ' +
'commit number: ' + commitNumber[0][0]
]
},
},
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',
step: 'start',
symbol: 'none',
data: data
}
]
};
// Draw chart
const chart_div = document.getElementById('{{ chart_elem_id }}');
// Set dark mode
let measurement_chart
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
measurement_chart= echarts.init(chart_div, 'dark', {
height: 320
});
} else {
measurement_chart= echarts.init(chart_div, null, {
height: 320
});
}
// Change chart size with browser resize
window.addEventListener('resize', function() {
measurement_chart.resize();
});
measurement_chart.setOption(option);
</script>
|
