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

Enhance index.html and JavaScript for improved flavor statistics display

Browse Source 
- Updated index.html to include additional flavor statistics with dynamic data binding for second and third common flavors.
- Refactored JavaScript functions to handle multiple elements for flavor statistics, ensuring accurate updates and removal of loading animations.
- Improved user experience by providing clearer visual representation of flavor data on the dashboard.
This commit is contained in:
Nikolay Tatarinov
2026-02-07 17:21:28 +03:00
parent fd03c22042
commit d61ea6eef8
2 changed files with 31 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
templates/index.html
View File

@@ -266,8 +266,20 @@
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between items-center text-sm animate-pulse h-5 bg-base-200/50 rounded w-full max-w-[80%]"></div>
<div class="flex justify-between items-center text-sm animate-pulse h-5 bg-base-200/50 rounded w-full max-w-[60%]"></div>
<div class="flex justify-between items-center text-sm">
<div class="flex items-center gap-2">
<div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
<span class="animate-pulse" data-stats="flavors.second_name">—</span>
</div>
<span class="text-xs badge badge-outline animate-pulse" data-stats="flavors.second_count">—</span>
</div>
<div class="flex justify-between items-center text-sm">
<div class="flex items-center gap-2">
<div class="w-1.5 h-1.5 rounded-full bg-base-content/30"></div>
<span class="animate-pulse" data-stats="flavors.third_name">—</span>
</div>
<span class="text-xs badge badge-outline animate-pulse" data-stats="flavors.third_count">—</span>
</div>
</div>
</div>
{% else %}
@@ -473,12 +485,18 @@
let cpuDistributionChart = null;
function setStat(key, text) {
var el = document.querySelector('[data-stats="' + key + '"]');
if (el) { el.textContent = text; el.classList.remove('animate-pulse'); }
document.querySelectorAll('[data-stats="' + key + '"]').forEach(function(el) {
el.textContent = text;
el.classList.remove('animate-pulse');
});
}
function setProgress(key, value) {
var el = document.querySelector('[data-stats="' + key + '"]');
if (el && el.tagName === 'PROGRESS') { el.value = value; el.classList.remove('animate-pulse'); }
document.querySelectorAll('[data-stats="' + key + '"]').forEach(function(el) {
if (el.tagName === 'PROGRESS') {
el.value = value;
el.classList.remove('animate-pulse');
}
});
}
function renderStats(data) {
@@ -529,6 +547,10 @@
var vmCount = data.vm && data.vm.count ? data.vm.count : 0;
var firstCount = data.flavors && data.flavors.first_common_flavor ? data.flavors.first_common_flavor.count : 0;
setStat('flavors.first_share', (vmCount ? Math.round(firstCount / vmCount * 100) : 0) + '%');
setStat('flavors.second_name', data.flavors && data.flavors.second_common_flavor ? data.flavors.second_common_flavor.name : '—');
setStat('flavors.second_count', data.flavors && data.flavors.second_common_flavor ? String(data.flavors.second_common_flavor.count) : '—');
setStat('flavors.third_name', data.flavors && data.flavors.third_common_flavor ? data.flavors.third_common_flavor.name : '—');
setStat('flavors.third_count', data.flavors && data.flavors.third_common_flavor ? String(data.flavors.third_common_flavor.count) : '—');
document.querySelectorAll('[data-stats]').forEach(function(n) { n.classList.remove('animate-pulse'); });
}