Archives/ohwgiles_laminar
1
0
Fork 0
mirror of https://github.com/ohwgiles/laminar.git synced 2024-10-27 20:34:20 +00:00
Code Issues Projects Releases Wiki Activity

Better average line in Build time graph

Browse Source 
The technique to display the average line in the old Chart.js
does not look so great in the new version. Take a different
approach using a plugin instead.
This commit is contained in:
Oliver Giles 2022-10-26 20:12:23 +13:00
parent e25b58944d
commit 3cc01bc45d
1 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/resources/js/app.js
View File

@ -332,15 +332,6 @@ const Charts = (() => {
data: { data: {
labels: jobs.map(e => '#' + e.number).reverse(), labels: jobs.map(e => '#' + e.number).reverse(),
datasets: [{ datasets: [{
label: 'Average',
type: 'line',
data: Array(jobs.length).fill(avg*scale.factor),
borderColor: '#7483af',
backgroundColor: 'transparent',
pointRadius: 0,
pointHitRadius: 0,
pointHoverRadius: 0,
},{
label: 'Build time', label: 'Build time',
backgroundColor: jobs.map(e => e.result == 'success' ? '#74af77': '#883d3d').reverse(), backgroundColor: jobs.map(e => e.result == 'success' ? '#74af77': '#883d3d').reverse(),
barPercentage: 1.0, barPercentage: 1.0,
@ -366,25 +357,40 @@ const Charts = (() => {
} }
}, },
y: { y: {
suggestedMax: avg * scale.factor,
ticks: {callback: scale.ticks }, ticks: {callback: scale.ticks },
title: {display: true, text: scale.label} title: {display: true, text: scale.label}
} }
}, },
},
plugins: [{
afterDraw: (chart, args, options) => {
const {ctx, avg, chartArea, scales:{y:yaxis}} = chart;
const y = chartArea.top + yaxis.height - avg * scale.factor * yaxis.height / yaxis.end;
ctx.save();
ctx.beginPath();
ctx.translate(chartArea.left, y);
ctx.moveTo(0,0);
ctx.lineTo(chartArea.width, 0);
ctx.lineWidth = 2;
ctx.strokeStyle = '#7483af';
ctx.stroke();
ctx.restore();
} }
}]
}); });
c.avg = avg;
c.jobCompleted = (num, result, time) => { c.jobCompleted = (num, result, time) => {
let avg = c.data.datasets[0].data[0].y / scale.factor; c.avg = ((c.avg * (num - 1)) + time) / num;
avg = ((avg * (num - 1)) + time) / num; c.options.scales.y.suggestedMax = avg * scale.factor;
c.data.datasets[0].data[0].y = avg * scale.factor; if(c.data.datasets[0].data.length == 20) {
c.data.datasets[0].data[1].y = avg * scale.factor;
if(c.data.datasets[1].data.length == 20) {
c.data.labels.shift(); c.data.labels.shift();
c.data.datasets[1].data.shift(); c.data.datasets[0].data.shift();
c.data.datasets[1].backgroundColor.shift(); c.data.datasets[0].backgroundColor.shift();
} }
c.data.labels.push('#' + num); c.data.labels.push('#' + num);
c.data.datasets[1].data.push(time * scale.factor); c.data.datasets[0].data.push(time * scale.factor);
c.data.datasets[1].backgroundColor.push(result == 'success' ? '#74af77': '#883d3d'); c.data.datasets[0].backgroundColor.push(result == 'success' ? '#74af77': '#883d3d');
c.update(); c.update();
}; };
return c; return c;