85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
window.moonlightServersRealtimeChart = {
|
|
instances: new Map(),
|
|
init: function (id, elementId, maxDataPoints, minY, maxY, defaultLabels, defaultDataPoints) {
|
|
const canvas = document.getElementById(elementId);
|
|
|
|
const labels = [];
|
|
labels.push(... defaultLabels);
|
|
|
|
const dataPoints = [];
|
|
dataPoints.push(... defaultDataPoints);
|
|
|
|
const chart = new Chart(canvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels,
|
|
datasets: [{
|
|
data: dataPoints,
|
|
borderColor: 'oklch(0.58 0.18 270)',
|
|
backgroundColor: 'rgba(55,138,221,0.15)',
|
|
borderWidth: 2,
|
|
pointRadius: 0,
|
|
tension: 0.4,
|
|
fill: true
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
animation: {
|
|
duration: 400,
|
|
easing: 'easeInOutCubic'
|
|
},
|
|
layout: {padding: 0},
|
|
plugins: {legend: {display: false}, tooltip: {enabled: false}},
|
|
scales: {
|
|
x: {display: false},
|
|
y: {display: false, min: minY, max: maxY}
|
|
}
|
|
}
|
|
});
|
|
|
|
this.instances.set(id, {
|
|
chart: chart,
|
|
labels: labels,
|
|
dataPoints: dataPoints,
|
|
maxDataPoints: maxDataPoints
|
|
});
|
|
},
|
|
pushValue: function (id, label, val) {
|
|
const chartData = this.instances.get(id);
|
|
const isShifting = chartData.labels.length >= chartData.maxDataPoints;
|
|
|
|
chartData.labels.push(label);
|
|
chartData.dataPoints.push(val);
|
|
|
|
if (isShifting) {
|
|
// Animate the new point drawing in first...
|
|
chartData.chart.update({
|
|
duration: 300,
|
|
easing: 'easeOutCubic',
|
|
lazy: false
|
|
});
|
|
|
|
// ...then silently trim the oldest point after the animation completes
|
|
setTimeout(() => {
|
|
chartData.labels.shift();
|
|
chartData.dataPoints.shift();
|
|
chartData.chart.update('none');
|
|
}, 300);
|
|
} else {
|
|
chartData.chart.update({
|
|
duration: 500,
|
|
easing: 'easeOutQuart',
|
|
lazy: false
|
|
});
|
|
}
|
|
},
|
|
destroy: function (id) {
|
|
const chartData = this.instances.get(id);
|
|
|
|
chartData.chart.destroy();
|
|
|
|
this.instances.delete(id);
|
|
}
|
|
} |