mirror of
git://git.yoctoproject.org/poky.git
synced 2025-07-19 21:09:03 +02:00
f66f8fa9f6
Update tooltip to include the commit hash link to the poky repository (From OE-Core rev: 1187a460c2608369df8de08fe52a5542e4ab6ecd) Signed-off-by: Ninette Adhikari <ninette@thehoodiefirm.com> Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
101 lines
3.3 KiB
HTML
101 lines
3.3 KiB
HTML
<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)
|
|
]
|
|
});
|
|
|
|
// Set chart options
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
enterable: true,
|
|
position: function (point, params, dom, rect, size) {
|
|
return [point[0]-150, '10%'];
|
|
},
|
|
formatter: function (param) {
|
|
const value = param[0].value[1]
|
|
const sample = rawData.filter(([commit, dataValue]) => updateValue(dataValue) === value)
|
|
// 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}, <br/> <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>`
|
|
}
|
|
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>`
|
|
;}
|
|
},
|
|
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>
|