summaryrefslogtreecommitdiffstats
path: root/scripts/lib
diff options
context:
space:
mode:
authorNinette Adhikari <13760198+ninetteadhikari@users.noreply.github.com>2024-05-03 16:43:36 +0200
committerRichard Purdie <richard.purdie@linuxfoundation.org>2024-05-15 16:39:19 +0100
commit836b4b57d6d50b04190c7d9b66e73464f5698fd3 (patch)
tree4420b4d33714a7017a2c88a72559ac97160b9b6b /scripts/lib
parent79ab2413e082838291157445038476f9d8edb586 (diff)
downloadpoky-836b4b57d6d50b04190c7d9b66e73464f5698fd3.tar.gz
oe-build-perf-report: Add apache echarts to make report interactive
- Add Apache echarts (https://echarts.apache.org/en/index.html) library to create build performance charts. - Restructure data to time and value array format so that it can be used by echarts. - This commit also converts test duration to minutes to map against the values axis. - Zoom is added to the line charts. (From OE-Core rev: 63c9321832aae79d20a4ddd199a4a1385f81de53) Signed-off-by: Alexandre Belloni <alexandre.belloni@bootlin.com> Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
Diffstat (limited to 'scripts/lib')
-rw-r--r--scripts/lib/build_perf/html/measurement_chart.html116
-rw-r--r--scripts/lib/build_perf/html/report.html6
2 files changed, 72 insertions, 50 deletions
diff --git a/scripts/lib/build_perf/html/measurement_chart.html b/scripts/lib/build_perf/html/measurement_chart.html
index 65f1a227ad..ffec3d09db 100644
--- a/scripts/lib/build_perf/html/measurement_chart.html
+++ b/scripts/lib/build_perf/html/measurement_chart.html
@@ -1,50 +1,76 @@
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 }}],
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 // Convert raw data to the format: [time, value]
24 data.addColumn('number', 'Commit'); 14 const data = rawData.map(([commit, value, time]) => {
25 data.addColumn('{{ measurement.value_type.gv_data_type }}', 15 return [
26 '{{ measurement.value_type.quantity }}'); 16 new Date(time * 1000).getTime(), // The Date object takes values in milliseconds rather than seconds. So to use a Unix timestamp we have to multiply it by 1000.
27 // Add data rows 17 Array.isArray(value) ? convertToMinute(value) : value // Assuming the array values are duration in the format [hours, minutes, seconds, milliseconds]
28 data.addRows([ 18 ]
29 {% for sample in measurement.samples %} 19 });
30 [{{ sample.commit_num }}, {{ sample.mean.gv_value() }}],
31 {% endfor %}
32 ]);
33 20
34 // Finally, draw the chart 21 // Set chart options
35 chart_div = document.getElementById('{{ chart_elem_id }}'); 22 const option = {
36 var chart = new google.visualization.LineChart(chart_div); 23 tooltip: {
37 google.visualization.events.addListener(chart, 'ready', function () { 24 trigger: 'axis',
38 //chart_div = document.getElementById('{{ chart_elem_id }}'); 25 position: function (pt) {
39 //chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">'; 26 return [pt[0], '10%'];
40 png_div = document.getElementById('{{ chart_elem_id }}_png'); 27 },
41 png_div.outerHTML = '<a id="{{ chart_elem_id }}_png" href="' + chart.getImageURI() + '">PNG</a>'; 28 valueFormatter: (value) => value.toFixed(2)
42 console.log("CHART READY: {{ chart_elem_id }}"); 29 },
43 chartsDrawing -= 1; 30 xAxis: {
44 if (chartsDrawing == 0) 31 type: 'time',
45 console.log("ALL CHARTS READY"); 32 },
46 }); 33 yAxis: {
47 chart.draw(data, options); 34 name: '{{ measurement.value_type.quantity }}' == 'time' ? 'Duration (minutes)' : 'Disk size (MB)',
48} 35 type: 'value',
36 min: function(value) {
37 return Math.round(value.min - 0.5);
38 },
39 max: function(value) {
40 return Math.round(value.max + 0.5);
41 }
42 },
43 dataZoom: [
44 {
45 type: 'inside',
46 start: 0,
47 end: 100
48 },
49 {
50 start: 0,
51 end: 100
52 }
53 ],
54 series: [
55 {
56 name: '{{ measurement.value_type.quantity }}',
57 type: 'line',
58 smooth: true,
59 symbol: 'none',
60 data: data
61 }
62 ]
63 };
64
65 // Draw chart
66 const chart_div = document.getElementById('{{ chart_elem_id }}');
67 const measurement_chart= echarts.init(chart_div, null, {
68 height: 320
69 });
70 // Change chart size with browser resize
71 window.addEventListener('resize', function() {
72 measurement_chart.resize();
73 });
74 measurement_chart.setOption(option);
49</script> 75</script>
50 76
diff --git a/scripts/lib/build_perf/html/report.html b/scripts/lib/build_perf/html/report.html
index d1ba6f2578..653fd985bc 100644
--- a/scripts/lib/build_perf/html/report.html
+++ b/scripts/lib/build_perf/html/report.html
@@ -3,11 +3,7 @@
3<head> 3<head>
4{# Scripts, for visualization#} 4{# Scripts, for visualization#}
5<!--START-OF-SCRIPTS--> 5<!--START-OF-SCRIPTS-->
6<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 6<script src=" https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js "></script>
7<script type="text/javascript">
8google.charts.load('current', {'packages':['corechart']});
9var chartsDrawing = 0;
10</script>
11 7
12{# Render measurement result charts #} 8{# Render measurement result charts #}
13{% for test in test_data %} 9{% for test in test_data %}