375 lines
11 KiB
Vue
375 lines
11 KiB
Vue
|
|
<script setup>
|
|
|
|
import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue';
|
|
import Chart from 'chart.js/auto';
|
|
import { prettyDecimalSize, formatDate } from '@cloudron/pankow/utils';
|
|
import annotationPlugin from 'chartjs-plugin-annotation';
|
|
|
|
Chart.register(annotationPlugin);
|
|
|
|
const LIVE_REFRESH_INTERVAL_MSECS = 1000; // for realtime graphs, the time (x axis) advances at this pace
|
|
|
|
const graphNode = useTemplateRef('graphNode');
|
|
const tooltipElem = useTemplateRef('tooltipElem');
|
|
|
|
let graph = null;
|
|
let liveRefreshIntervalId = null;
|
|
let yscaleUnit = null;
|
|
|
|
const props = defineProps({
|
|
title: String,
|
|
subtext: String,
|
|
footer: String,
|
|
period: Object, // { hours, format, tooltpFormat }
|
|
yscale: String, // cpu, memory
|
|
memory: Number,
|
|
cpuCount: Number,
|
|
highMark: Number,
|
|
highMarkLabel: String,
|
|
});
|
|
|
|
function renderTooltip(context) {
|
|
// console.log(context); { chart, tooltip } tooltip has { title, body }
|
|
if (!tooltipElem.value) return;
|
|
|
|
const { /*chart, */ tooltip } = context;
|
|
|
|
if (tooltip.opacity === 0) {
|
|
tooltipElem.value.style.opacity = 0;
|
|
return;
|
|
}
|
|
|
|
const { title, body, labelColors } = tooltip; // these were computed in the "callback" in tooltip configuration
|
|
if (body) {
|
|
const titleLines = title || [];
|
|
const bodyLines = body.map(item => item.lines);
|
|
|
|
let innerHtml = `<div class="graphs-tooltip-title">${titleLines[0]}</div>`;
|
|
|
|
bodyLines.forEach(function(body, i) {
|
|
const colors = labelColors[i];
|
|
innerHtml += `<div style="color: ${colors.borderColor}" class="graphs-tooltip-item">${body}</div>`;
|
|
});
|
|
|
|
tooltipElem.value.innerHTML = innerHtml;
|
|
}
|
|
|
|
tooltipElem.value.style.opacity = 1;
|
|
tooltipElem.value.style.position = 'absolute';
|
|
|
|
tooltipElem.value.classList.remove('graphs-tooltip-caret-left', 'graphs-tooltip-caret-right');
|
|
|
|
if (tooltip.chart.width/2 < tooltip.caretX) {
|
|
tooltipElem.value.style.right = (tooltip.chart.width - tooltip.caretX) + 'px';
|
|
tooltipElem.value.style.left = 'unset';
|
|
tooltipElem.value.classList.add('graphs-tooltip-caret-right');
|
|
} else {
|
|
tooltipElem.value.style.right = 'unset';
|
|
tooltipElem.value.style.left = tooltip.caretX + 'px';
|
|
tooltipElem.value.classList.add('graphs-tooltip-caret-left');
|
|
}
|
|
|
|
tooltipElem.value.style.top = '0px';
|
|
tooltipElem.value.style.height = '100%';
|
|
}
|
|
|
|
function createGraphOptions({ yscale, period, highMark }) {
|
|
let startTime, endTime, stepSize, count; // x axis configuration values
|
|
|
|
const now = Date.now();
|
|
|
|
if (period.hours === 0) {
|
|
startTime = now - 5*60*1000; // for realtime graph, we just show last 5mins
|
|
endTime = now;
|
|
stepSize = 60*1000; // a tick for a minute
|
|
} else {
|
|
endTime = Math.ceil(Date.now() / (1000*5*60)) * (1000*5*60); // round up to nearest minute for pretty values. otherwise, we have to display seconds
|
|
startTime = endTime - period.hours*60*60*1000;
|
|
count = 7; // anything more than 7 will not work for "7 days".
|
|
}
|
|
|
|
return {
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
position: 'bottom' // not used, hidden since color code is shown in tooltip
|
|
},
|
|
tooltip: {
|
|
enabled: false,
|
|
callbacks: { // passed as title,body to the tooltip renderer
|
|
title: (tooltipItem) => formatDate(period.tooltipFormat, tooltipItem[0].raw.x),
|
|
label: (tooltipItem) => {
|
|
const datasetLabel = tooltipItem.chart.data.datasets[tooltipItem.datasetIndex].label;
|
|
return `${datasetLabel}: <span>${yscale.ticks.callback(tooltipItem.raw.y)}</span>`;
|
|
}
|
|
},
|
|
external: renderTooltip,
|
|
},
|
|
annotation: {
|
|
annotations: {
|
|
high: {
|
|
display: highMark !== null,
|
|
type: 'line',
|
|
yMin: highMark,
|
|
yMax: highMark,
|
|
borderColor: 'rgb(139, 0, 0)',
|
|
borderWidth: 0.5,
|
|
label: {
|
|
display: true,
|
|
content: `Max ${props.title}`,
|
|
position: 'end', // 'start', 'center', or 'end'
|
|
backgroundColor: 'transparent',
|
|
color: 'rgb(139, 0, 0)',
|
|
yAdjust: -6,
|
|
font: {
|
|
size: 10
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
scales: {
|
|
x: {
|
|
// we used to use 'time' type but it relies on the data to generate ticks. we may not have data for our time periods
|
|
type: 'linear',
|
|
min: startTime,
|
|
max: endTime,
|
|
ticks: {
|
|
autoSkip: true, // skip tick labels as needed
|
|
autoSkipPadding: 20, // padding between ticks
|
|
maxRotation: 0, // don't rotate the labels
|
|
callback: function (value) {
|
|
if (period.hours === 0) return `${5-(value-this.min)/60000}min`;
|
|
return formatDate(period.tickFormat, value);
|
|
},
|
|
count, // ignored when stepSize is set
|
|
stepSize // for realtime graph, generate steps of 1min and appropriate tick text
|
|
},
|
|
grid: {
|
|
drawOnChartArea: false,
|
|
},
|
|
},
|
|
y: yscale,
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
mode: 'nearest',
|
|
axis: 'x'
|
|
}
|
|
};
|
|
}
|
|
|
|
function transformData(data) {
|
|
const x = data[1]*1000; // convert to msecs
|
|
let y;
|
|
if (props.yscale === 'memory') {
|
|
y = yscaleUnit === 'GiB' ? data[0] / 1024 / 1024 / 1024 : data[0] / 1024 / 1024;
|
|
} else { // in non-memory case, for relative values like cpu, if null make it 0
|
|
y = data[0] || 0;
|
|
}
|
|
return { x, y };
|
|
}
|
|
|
|
function setDatasets(datasets) {
|
|
graph.data = { datasets: [] };
|
|
|
|
for (const dataset of datasets) {
|
|
graph.data.datasets.push({
|
|
label: dataset.label,
|
|
data: dataset.data.map(transformData),
|
|
pointRadius: 0,
|
|
borderWidth: 1, // https://www.chartjs.org/docs/latest/charts/line.html#line-styling
|
|
tension: 0.4,
|
|
showLine: true,
|
|
fill: true,
|
|
color: dataset.color,
|
|
stack: dataset.stack || 'stackgroup', // put them all in same stackgroup
|
|
});
|
|
}
|
|
|
|
graph.update('none');
|
|
}
|
|
|
|
function pruneGraphData(dataset, options) {
|
|
while (dataset.data.length && (dataset.data[0].x < options.scales.x.min)) { // remove elements beyond our time window
|
|
dataset.data.shift();
|
|
}
|
|
}
|
|
|
|
function advance() {
|
|
graph.options.scales.x.min += LIVE_REFRESH_INTERVAL_MSECS;
|
|
graph.options.scales.x.max += LIVE_REFRESH_INTERVAL_MSECS;
|
|
graph.update('none');
|
|
}
|
|
|
|
function pushData(datasetIndex, ...data) {
|
|
for (const [index, item] of data.entries()) {
|
|
graph.data.datasets[datasetIndex+index].data.push(transformData(item));
|
|
pruneGraphData(graph.data.datasets[datasetIndex+index], graph.options);
|
|
}
|
|
}
|
|
|
|
function onPeriodChanged() {
|
|
if (liveRefreshIntervalId) {
|
|
clearInterval(liveRefreshIntervalId);
|
|
liveRefreshIntervalId = null;
|
|
}
|
|
|
|
// CPU and Memory graph have known min/max set and auto-scaling gets disabled
|
|
// Disk and Network graphs auto-scale the y values.
|
|
|
|
let yscale = null, highMark = null;
|
|
|
|
if (props.yscale === 'cpu') {
|
|
yscale = {
|
|
type: 'linear',
|
|
min: 0,
|
|
max: props.cpuCount * 100,
|
|
ticks: {
|
|
callback: (value) => `${value.toFixed(2).replace('.00', '')}%`,
|
|
maxTicksLimit: 6 // max tick labels to show
|
|
},
|
|
beginAtZero: true,
|
|
};
|
|
if (props.highMark) highMark = props.highMark * 100;
|
|
} else if (props.yscale === 'memory') {
|
|
const giB = 1024 * 1024 * 1024;
|
|
const roundedMemoryGiB = Math.ceil(props.memory / giB);
|
|
yscaleUnit = roundedMemoryGiB === 1 ? 'MiB' : 'GiB';
|
|
const roundedMemory = yscaleUnit === 'GiB' ? roundedMemoryGiB : roundedMemoryGiB * 1024;
|
|
|
|
yscale = {
|
|
type: 'linear',
|
|
min: 0,
|
|
max: roundedMemory,
|
|
ticks: {
|
|
stepSize: yscaleUnit === 'GiB' ? 1 : 256,
|
|
autoSkip: true, // skip tick labels as needed
|
|
autoSkipPadding: 20, // padding between ticks
|
|
callback: (value) => `${value.toFixed(2).replace('.00', '')} ${yscaleUnit}`,
|
|
maxTicksLimit: 8 // max tick labels to show
|
|
},
|
|
beginAtZero: true,
|
|
stacked: true,
|
|
};
|
|
|
|
if (props.highMark) highMark = yscaleUnit === 'GiB' ? props.highMark/giB : props.highMark/(1024*1024);
|
|
} else if (props.yscale === 'disk') {
|
|
yscale = {
|
|
type: 'linear',
|
|
min: 0,
|
|
grace: 100*1000, // add 100kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
|
|
ticks: {
|
|
callback: (value) => `${prettyDecimalSize(value)}/s`,
|
|
maxTicksLimit: 6 // max tick labels to show
|
|
},
|
|
beginAtZero: true,
|
|
stacked: false,
|
|
};
|
|
} else if (props.yscale === 'network') {
|
|
yscale = {
|
|
type: 'linear',
|
|
min: 0,
|
|
grace: 50*1000, // add 50kBps. otherwise, the yaxis auto-scales to data and the values appear too dramatic
|
|
ticks: {
|
|
callback: (value) => `${prettyDecimalSize(value)}/s`,
|
|
maxTicksLimit: 6 // max tick labels to show
|
|
},
|
|
beginAtZero: true,
|
|
stacked: false,
|
|
};
|
|
}
|
|
|
|
// this sets a min 'x' based on current timestamp. so it has to re-created every time the period changes
|
|
const graphOptions = createGraphOptions({ yscale, period: props.period, highMark });
|
|
|
|
if (!graph) {
|
|
graph = new Chart(graphNode.value, { type: 'line', data: { datasets: [] }, options: graphOptions });
|
|
} else {
|
|
graph.options = graphOptions;
|
|
graph.update('none');
|
|
}
|
|
|
|
// advances the time window. this is independent of incoming data vis pushData()
|
|
if (props.period.hours === 0) liveRefreshIntervalId = setInterval(advance, LIVE_REFRESH_INTERVAL_MSECS);
|
|
}
|
|
|
|
watch(() => props.period, onPeriodChanged);
|
|
|
|
onMounted(async function () {
|
|
await onPeriodChanged();
|
|
});
|
|
|
|
onUnmounted(async function () {
|
|
if (liveRefreshIntervalId) clearInterval(liveRefreshIntervalId);
|
|
});
|
|
|
|
defineExpose({
|
|
setDatasets,
|
|
pushData,
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="graph-container">
|
|
<label>{{ title }} <span class="pull-right text-small">{{ subtext }}</span></label>
|
|
<div class="graph">
|
|
<canvas ref="graphNode"></canvas>
|
|
<div ref="tooltipElem" class="graphs-tooltip"></div>
|
|
</div>
|
|
<div class="footer">{{ footer }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.graph-container {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.graphs label {
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.graph {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 160px;
|
|
}
|
|
|
|
.footer {
|
|
margin-top: 10px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<style>
|
|
|
|
.graphs-tooltip {
|
|
white-space: nowrap;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.graphs-tooltip-caret-left {
|
|
border-left: 1px var(--pankow-color-primary) solid;
|
|
}
|
|
|
|
.graphs-tooltip-caret-right {
|
|
border-right: 1px var(--pankow-color-primary) solid;
|
|
}
|
|
|
|
.graphs-tooltip-item {
|
|
padding: 2px 0px;
|
|
}
|
|
|
|
</style>
|