@@ -26,26 +26,36 @@
]
});
+ const commitCountList = rawData.map(([commit, value, time]) => {
+ return commit
+ });
+
+ const commitCountData = rawData.map(([commit, value, time]) => {
+ return updateValue(value)
+ });
+
// Set chart options
- const option = {
+ const option_start_time = {
tooltip: {
trigger: 'axis',
enterable: true,
position: function (point, params, dom, rect, size) {
- return [point[0]-150, '10%'];
+ return [point[0]+20, '10%'];
},
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}, <br/> <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>`
+ 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, <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, <strong>Commit number:</strong> <a href="${commitLink}" target="_blank" rel="noreferrer noopener">${sample[0][0]}</a>, <br/> <strong>Start time:</strong> ${formattedDate}`
;}
},
xAxis: {
@@ -79,22 +89,82 @@
]
};
+ const option_commit_count = {
+ tooltip: {
+ trigger: 'axis',
+ enterable: true,
+ position: function (point, params, dom, rect, size) {
+ return [point[0]+20, '10%'];
+ },
+ 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',
+ step: 'start',
+ symbol: 'none',
+ data: commitCountData
+ }
+ ]
+ };
+
// 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
+ 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);
}
- // Change chart size with browser resize
- window.addEventListener('resize', function() {
- measurement_chart.resize();
- });
- measurement_chart.setOption(option);
+
+ draw_chart('{{ chart_elem_start_time_id }}', option_start_time)
+ draw_chart('{{ chart_elem_commit_count_id }}', option_commit_count)
</script>
@@ -9,7 +9,8 @@
{% for test in test_data %}
{% if test.status == 'SUCCESS' %}
{% for measurement in test.measurements %}
- {% set chart_elem_id = test.name + '_' + measurement.name + '_chart' %}
+ {% set chart_elem_start_time_id = test.name + '_' + measurement.name + '_chart_start_time' %}
+ {% set chart_elem_commit_count_id = test.name + '_' + measurement.name + '_chart_commit_count' %}
{% include 'measurement_chart.html' %}
{% endfor %}
{% endif %}
@@ -116,6 +117,22 @@ a {
a:hover {
color: #8080ff;
}
+button {
+ background-color: #F3F4F6;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ padding: 10px 12px;
+ transition: 0.3s;
+ border-radius: 8px;
+ color: #3A4353;
+}
+button:hover {
+ background-color: #d6d9e0;
+}
+.tab button.active {
+ background-color: #d6d9e0;
+}
@media (prefers-color-scheme: dark) {
:root {
--text: #e9e8fa;
@@ -126,6 +143,16 @@ a:hover {
--trborder: #212936;
--chartborder: #b1b0bf;
}
+ button {
+ background-color: #28303E;
+ color: #fff;
+ }
+ button:hover {
+ background-color: #545a69;
+ }
+ .tab button.active {
+ background-color: #545a69;
+ }
}
</style>
@@ -233,7 +260,18 @@ a:hover {
<tr>
<td style="width: 75%">
{# Linechart #}
- <div id="{{ test.name }}_{{ measurement.name }}_chart"></div>
+ <div class="tab {{ test.name }}_{{ measurement.name }}_tablinks">
+ <button class="tablinks active" onclick="openChart(event, '{{ test.name }}_{{ measurement.name }}_start_time', '{{ test.name }}_{{ measurement.name }}')">Chart with start time</button>
+ <button class="tablinks" onclick="openChart(event, '{{ test.name }}_{{ measurement.name }}_commit_count', '{{ test.name }}_{{ measurement.name }}')">Chart with commit count</button>
+ </div>
+ <div class="{{ test.name }}_{{ measurement.name }}_tabcontent">
+ <div id="{{ test.name }}_{{ measurement.name }}_start_time" class="tabcontent" style="display: block;">
+ <div id="{{ test.name }}_{{ measurement.name }}_chart_start_time"></div>
+ </div>
+ <div id="{{ test.name }}_{{ measurement.name }}_commit_count" class="tabcontent" style="display: none;">
+ <div id="{{ test.name }}_{{ measurement.name }}_chart_commit_count"></div>
+ </div>
+ </div>
</td>
<td>
{# Measurement statistics #}
@@ -340,6 +378,31 @@ a:hover {
<div class="preformatted">{{ test.message }}</div>
{% endif %}
{% endfor %}
-</div></body>
-</html>
+</div>
+<script>
+function openChart(event, chartType, chartName) {
+ let i, tabcontents, tablinks
+ tabcontents = document.querySelectorAll(`.${chartName}_tabcontent > .tabcontent`);
+ tabcontents.forEach((tabcontent) => {
+ tabcontent.style.display = "none";
+ });
+
+ tablinks = document.querySelectorAll(`.${chartName}_tablinks > .tablinks`);
+ tablinks.forEach((tabLink) => {
+ tabLink.classList.remove('active');
+ });
+
+ const targetTab = document.getElementById(chartType)
+ targetTab.style.display = "block";
+
+ // Call resize on the ECharts instance to redraw the chart
+ const chartContainer = targetTab.querySelector('div')
+ echarts.init(chartContainer).resize();
+
+ event.currentTarget.classList.add('active');
+}
+</script>
+
+</body>
+</html>