diff options
Diffstat (limited to 'scripts/lib/build_perf/html/measurement_chart.html')
-rw-r--r-- | scripts/lib/build_perf/html/measurement_chart.html | 140 |
1 files changed, 95 insertions, 45 deletions
diff --git a/scripts/lib/build_perf/html/measurement_chart.html b/scripts/lib/build_perf/html/measurement_chart.html index 65f1a227ad..05bd84e6ce 100644 --- a/scripts/lib/build_perf/html/measurement_chart.html +++ b/scripts/lib/build_perf/html/measurement_chart.html | |||
@@ -1,50 +1,100 @@ | |||
1 | <script type="text/javascript"> | 1 | <script type="module"> |
2 | chartsDrawing += 1; | 2 | // Get raw data |
3 | google.charts.setOnLoadCallback(drawChart_{{ chart_elem_id }}); | 3 | const rawData = [ |
4 | function drawChart_{{ chart_elem_id }}() { | 4 | {% for sample in measurement.samples %} |
5 | var data = new google.visualization.DataTable(); | 5 | [{{ sample.commit_num }}, {{ sample.mean.gv_value() }}, {{ sample.start_time }}, '{{sample.commit}}'], |
6 | {% endfor %} | ||
7 | ]; | ||
6 | 8 | ||
7 | // Chart options | 9 | const convertToMinute = (time) => { |
8 | var options = { | 10 | return time[0]*60 + time[1] + time[2]/60 + time[3]/3600; |
9 | theme : 'material', | 11 | } |
10 | legend: 'none', | ||
11 | hAxis: { format: '', title: 'Commit number', | ||
12 | minValue: {{ chart_opts.haxis.min }}, | ||
13 | maxValue: {{ chart_opts.haxis.max }} }, | ||
14 | {% if measurement.type == 'time' %} | ||
15 | vAxis: { format: 'h:mm:ss' }, | ||
16 | {% else %} | ||
17 | vAxis: { format: '' }, | ||
18 | {% endif %} | ||
19 | pointSize: 5, | ||
20 | chartArea: { left: 80, right: 15 }, | ||
21 | }; | ||
22 | 12 | ||
23 | // Define data columns | 13 | // Update value format to either minutes or leave as size value |
24 | data.addColumn('number', 'Commit'); | 14 | const updateValue = (value) => { |
25 | data.addColumn('{{ measurement.value_type.gv_data_type }}', | 15 | // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds] |
26 | '{{ measurement.value_type.quantity }}'); | 16 | return Array.isArray(value) ? convertToMinute(value) : value |
27 | // Add data rows | 17 | } |
28 | data.addRows([ | ||
29 | {% for sample in measurement.samples %} | ||
30 | [{{ sample.commit_num }}, {{ sample.mean.gv_value() }}], | ||
31 | {% endfor %} | ||
32 | ]); | ||
33 | 18 | ||
34 | // Finally, draw the chart | 19 | // Convert raw data to the format: [time, value] |
35 | chart_div = document.getElementById('{{ chart_elem_id }}'); | 20 | const data = rawData.map(([commit, value, time]) => { |
36 | var chart = new google.visualization.LineChart(chart_div); | 21 | return [ |
37 | google.visualization.events.addListener(chart, 'ready', function () { | 22 | // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000. |
38 | //chart_div = document.getElementById('{{ chart_elem_id }}'); | 23 | new Date(time * 1000).getTime(), |
39 | //chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">'; | 24 | // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds] |
40 | png_div = document.getElementById('{{ chart_elem_id }}_png'); | 25 | updateValue(value) |
41 | png_div.outerHTML = '<a id="{{ chart_elem_id }}_png" href="' + chart.getImageURI() + '">PNG</a>'; | 26 | ] |
42 | console.log("CHART READY: {{ chart_elem_id }}"); | 27 | }); |
43 | chartsDrawing -= 1; | 28 | |
44 | if (chartsDrawing == 0) | 29 | // Set chart options |
45 | console.log("ALL CHARTS READY"); | 30 | const option = { |
31 | tooltip: { | ||
32 | trigger: 'axis', | ||
33 | enterable: true, | ||
34 | position: function (point, params, dom, rect, size) { | ||
35 | return [point[0]-150, '10%']; | ||
36 | }, | ||
37 | formatter: function (param) { | ||
38 | const value = param[0].value[1] | ||
39 | const sample = rawData.filter(([commit, dataValue]) => updateValue(dataValue) === value) | ||
40 | // Add commit hash to the tooltip as a link | ||
41 | const commitLink = `https://git.yoctoproject.org/poky/commit/?id=${sample[0][3]}` | ||
42 | if ('{{ measurement.value_type.quantity }}' == 'time') { | ||
43 | const hours = Math.floor(value/60) | ||
44 | const minutes = Math.floor(value % 60) | ||
45 | const seconds = Math.floor((value * 60) % 60) | ||
46 | return `<strong>Duration:</strong> ${hours}:${minutes}:${seconds}, <br/> <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>` | ||
47 | } | ||
48 | return `<strong>Size:</strong> ${value.toFixed(2)} MB, <br/> <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>` | ||
49 | ;} | ||
50 | }, | ||
51 | xAxis: { | ||
52 | type: 'time', | ||
53 | }, | ||
54 | yAxis: { | ||
55 | name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration in minutes' : 'Disk size in MB', | ||
56 | type: 'value', | ||
57 | min: function(value) { | ||
58 | return Math.round(value.min - 0.5); | ||
59 | }, | ||
60 | max: function(value) { | ||
61 | return Math.round(value.max + 0.5); | ||
62 | } | ||
63 | }, | ||
64 | dataZoom: [ | ||
65 | { | ||
66 | type: 'slider', | ||
67 | xAxisIndex: 0, | ||
68 | filterMode: 'none' | ||
69 | }, | ||
70 | ], | ||
71 | series: [ | ||
72 | { | ||
73 | name: '{{ measurement.value_type.quantity }}', | ||
74 | type: 'line', | ||
75 | step: 'start', | ||
76 | symbol: 'none', | ||
77 | data: data | ||
78 | } | ||
79 | ] | ||
80 | }; | ||
81 | |||
82 | // Draw chart | ||
83 | const chart_div = document.getElementById('{{ chart_elem_id }}'); | ||
84 | // Set dark mode | ||
85 | let measurement_chart | ||
86 | if (window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
87 | measurement_chart= echarts.init(chart_div, 'dark', { | ||
88 | height: 320 | ||
46 | }); | 89 | }); |
47 | chart.draw(data, options); | 90 | } else { |
48 | } | 91 | measurement_chart= echarts.init(chart_div, null, { |
92 | height: 320 | ||
93 | }); | ||
94 | } | ||
95 | // Change chart size with browser resize | ||
96 | window.addEventListener('resize', function() { | ||
97 | measurement_chart.resize(); | ||
98 | }); | ||
99 | measurement_chart.setOption(option); | ||
49 | </script> | 100 | </script> |
50 | |||