eco2d/flecs-dash/etc/apps/overview/delta_time_graph.js

123 lines
2.8 KiB
JavaScript

const delta_time_chart = {
type: 'line',
data: {
labels: [],
datasets: [
{
label: 'avg',
data: [],
backgroundColor: [ 'rgba(0,0,0,0)' ],
borderColor: [
'#5BE595',
],
borderWidth: 2,
pointRadius: 0
},
{
label: 'min',
data: [],
backgroundColor: [ 'rgba(0,0,0,0)' ],
borderColor: [
'#40805B',
],
borderWidth: 1,
pointRadius: 0
},
{
label: 'max',
data: [],
backgroundColor: [ 'rgba(0,0,0,0)' ],
borderColor: [
'#40805B',
],
borderWidth: 1,
pointRadius: 0
}
]
},
options: {
title: {
display: false
},
responsive: true,
maintainAspectRatio: false,
lineTension: 1,
animation: {
duration: 0
},
scales: {
yAxes: [{
id: 'time',
position: 'right',
ticks: {
beginAtZero: false,
padding: 10,
callback: function(value, index, values) {
return (1000 * value).toFixed(2) + "ms";
}
}
}],
xAxes: [{
ticks: {
minRotation: 0,
maxRotation: 0,
maxTicksLimit: 20
}
}]
}
}
}
Vue.component('delta-time-graph', {
props: ['tick', 'data'],
updated() {
this.updateChart();
},
data: function() {
return {
chart: undefined
}
},
methods: {
setValues() {
if (!this.data.world) {
return;
}
if (!this.chart) {
this.createChart();
}
var labels = [];
var length = this.data.world.history_1m.frame_time_total.avg.length;
for (var i = 0; i < length; i ++) {
labels.push((length - i) + "s");
}
delta_time_chart.data.labels = labels;
delta_time_chart.data.datasets[0].data = this.data.world.history_1m.delta_time.avg;
delta_time_chart.data.datasets[1].data = this.data.world.history_1m.delta_time.min;
delta_time_chart.data.datasets[2].data = this.data.world.history_1m.delta_time.max;
},
createChart() {
const ctx = document.getElementById('delta-time-graph');
this.chart = new Chart(ctx, {
type: delta_time_chart.type,
data: delta_time_chart.data,
options: delta_time_chart.options
});
},
updateChart() {
if (!this.data.world) {
return;
}
this.setValues();
this.chart.update();
}
},
template: `
<div class="app-graph">
<canvas id="delta-time-graph" :data-fps="tick"></canvas>
</div>`
});