sitespeed.io/lib/plugins/html/templates/url/metrics/visualProgress.pug

68 lines
2.0 KiB
Plaintext

- const seriesVisualProgress = [];
- let oldPercent = -1;
- let oldValue = -1;
each eachRow in visualMetrics.VisualProgress
- const newValue = eachRow.timestamp
- const percent = eachRow.percent
//- Sometimes VisualMetrics report the same percentage multiple times after each other
// and since the original time is in ms we wanna remove entries on the same 0.1 s
if percent !== oldPercent && newValue !== oldValue
- oldPercent = percent
- oldValue = newValue
- seriesVisualProgress.push({x: newValue, y: percent})
script(type='text/javascript').
document.addEventListener("DOMContentLoaded", function() {
const visualProgressChart = new Chartist.Line('#ct-visualprogress', {
series: [!{JSON.stringify(seriesVisualProgress)}],
}, {
showArea: true,
showPoint: true,
chartPadding: {
top: 10,
right: 0,
bottom: 30,
left: 10
},
axisX: {
type: Chartist.AutoScaleAxis,
onlyInteger: false,
},
lineSmooth: Chartist.Interpolation.step({
postpone: true,
fillHoles: false
}),
axisY: {
onlyInteger: true
},
plugins: [
Chartist.plugins.ctAxisTitle({
axisX: {
axisTitle: 'Time (seconds)',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: 50
},
textAnchor: 'middle'
},
axisY: {
axisTitle: 'Visual progress %',
axisClass: 'ct-axis-title',
offset: {
x: 0,
y: -4
},
textAnchor: 'middle',
flipTitle: false
}
}),
Chartist.plugins.tooltip({
transformTooltipTextFnc: function(text) {
const m = text.split(',');
return m[0] + 's ' + m[1] + '%';
}
})
]
});
});