class StatsPanel extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
87
+12%
Pending tasks waiting for worker assignment
8
2 online
Parallel workers processing code generation
1,247
+42 today
Successful transitions stored in Neo4j graph
`;
// Initialize with random values
setTimeout(() => {
this.initializeStats();
// Update stats every 5 seconds
setInterval(() => {
this.updateStats();
}, 5000);
// Replace feather icons
if (window.feather) {
feather.replace();
}
}, 100);
}
initializeStats() {
const stats = {
'queue-tasks': Math.floor(Math.random() * 100),
'workers-active': Math.floor(Math.random() * 8) + 2,
'verified-states': 1247 + Math.floor(Math.random() * 50),
'avg-score': (Math.random() * 5 + 90).toFixed(1)
};
Object.keys(stats).forEach(id => {
const el = this.shadowRoot.getElementById(id);
if (el) {
el.textContent = stats[id];
}
});
}
updateStats() {
// Simulate stat updates
const stats = {
'queue-tasks': Math.max(0, Math.floor(Math.random() * 120)),
'workers-active': Math.max(2, Math.floor(Math.random() * 10)),
'verified-states': 1247 + Math.floor(Math.random() * 100),
'avg-score': (Math.random() * 5 + 90).toFixed(1)
};
Object.keys(stats).forEach(id => {
const el = this.shadowRoot.getElementById(id);
if (el) {
// Animate the change
const oldValue = parseInt(el.textContent.replace(/[^0-9.-]+/g, ""));
const newValue = parseInt(stats[id].toString().replace(/[^0-9.-]+/g, ""));
if (oldValue !== newValue) {
el.style.transform = 'scale(1.1)';
el.style.color = newValue > oldValue ? '#10b981' : '#ef4444';
setTimeout(() => {
el.textContent = stats[id];
el.style.transform = 'scale(1)';
setTimeout(() => {
el.style.color = '';
}, 1000);
}, 300);
}
}
});
// Update progress bars
const progressBars = this.shadowRoot.querySelectorAll('.progress-fill');
progressBars.forEach((bar, index) => {
const newWidth = Math.floor(Math.random() * 30 + 60);
bar.style.width = `${newWidth}%`;
});
}
}
customElements.define('stats-panel', StatsPanel);