Arnike/watcher-visio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Update dashboard metrics and enhance CPU statistics visualization
Some checks failed
CI / ci (push) Has been cancelled
Details

Browse Source 
- Expanded mock data to include additional host labels and updated CPU current and projected values for better representation.
- Modified JavaScript to conditionally display projected CPU statistics and standard deviation, improving user experience.
- Refactored chart configuration to dynamically handle datasets based on the presence of projected data.
- Updated HTML to include a new block for displaying standard deviation, enhancing clarity in CPU metrics presentation.
This commit is contained in:
Nikolay Tatarinov
2026-02-12 13:56:05 +03:00
parent 6a27fecb13
commit 263379c072
4 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/js/dashboard.js
View File

@@ -161,11 +161,14 @@
var data = window.auditData && window.auditData[auditId];
if (!data || !data.hostData) return;
var hasProjected = (auditId !== 'current');
var ctx = document.getElementById('cpuDistributionChart').getContext('2d');
var currentStats = calculateStats(data.hostData.current);
document.getElementById('currentCpuMean').textContent = currentStats.mean.toFixed(1);
document.getElementById('currentCpuStd').textContent = (currentStats.std * 0.5).toFixed(1);
var stdBlock = document.getElementById('currentCpuStdBlock');
if (stdBlock) stdBlock.style.display = hasProjected ? '' : 'none';
if (cpuDistributionChart) cpuDistributionChart.destroy();
@@ -182,14 +185,26 @@
var textColor = getCSSVar('--color-base-content');
var gridColor = getCSSVar('--chart-grid-color') || textColor;
var datasets = [
{ label: 'Current', data: data.hostData.current.slice(), backgroundColor: colors.info + '40', borderColor: colors.info, borderWidth: 1, borderRadius: 3 }
];
if (hasProjected) {
datasets.push({ label: 'Projected', data: data.hostData.projected.slice(), backgroundColor: colors.warning + '40', borderColor: colors.warning, borderWidth: 1, borderRadius: 3 });
}
var annotationConfig = {
MeanLine: { type: 'line', yMin: currentStats.mean, yMax: currentStats.mean, borderColor: colors.success, borderWidth: 2, borderDash: [] }
};
if (hasProjected) {
annotationConfig.upperStdLine = { type: 'line', yMin: currentStats.mean + currentStats.std * 0.5, yMax: currentStats.mean + currentStats.std * 0.5, borderColor: colors.error, borderWidth: 1, borderDash: [5, 5] };
annotationConfig.lowerStdLine = { type: 'line', yMin: currentStats.mean > currentStats.std * 0.5 ? currentStats.mean - currentStats.std * 0.5 : 0, yMax: currentStats.mean > currentStats.std * 0.5 ? currentStats.mean - currentStats.std * 0.5 : 0, borderColor: colors.error, borderWidth: 1, borderDash: [5, 5] };
}
cpuDistributionChart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.hostData.labels,
datasets: [
{ label: 'Current', data: data.hostData.current.slice(), backgroundColor: colors.info + '40', borderColor: colors.info, borderWidth: 1, borderRadius: 3 },
{ label: 'Projected', data: data.hostData.projected.slice(), backgroundColor: colors.warning + '40', borderColor: colors.warning, borderWidth: 1, borderRadius: 3 }
]
datasets: datasets
},
options: {
responsive: true,
@@ -246,11 +261,7 @@
callbacks: { label: function(ctx) { return ctx.dataset.label + ': ' + Number(ctx.parsed.y).toFixed(2) + '% CPU'; } }
},
annotation: {
annotations: {
MeanLine: { type: 'line', yMin: currentStats.mean, yMax: currentStats.mean, borderColor: colors.success, borderWidth: 2, borderDash: [] },
upperStdLine: { type: 'line', yMin: currentStats.mean + currentStats.std * 0.5, yMax: currentStats.mean + currentStats.std * 0.5, borderColor: colors.error, borderWidth: 1, borderDash: [5, 5] },
lowerStdLine: { type: 'line', yMin: currentStats.mean > currentStats.std * 0.5 ? currentStats.mean - currentStats.std * 0.5 : 0, yMax: currentStats.mean > currentStats.std * 0.5 ? currentStats.mean - currentStats.std * 0.5 : 0, borderColor: colors.error, borderWidth: 1, borderDash: [5, 5] }
}
annotations: annotationConfig
}
},
scales: {
@@ -259,7 +270,9 @@
}
}
});
cpuDistributionChart._cpuOriginalData = [ data.hostData.current.slice(), data.hostData.projected.slice() ];
cpuDistributionChart._cpuOriginalData = hasProjected
? [ data.hostData.current.slice(), data.hostData.projected.slice() ]
: [ data.hostData.current.slice() ];
}
document.addEventListener('DOMContentLoaded', function() {