Polling Dashboard

<div data-component="polling-dashboard">
    <span data-bind="refreshLabel"></span>
    <button data-action="refreshNow">Refresh Now</button>
    <button data-action="togglePolling"
            data-bind="toggleLabel"></button>

    <div>CPU: <span data-bind="cpuLabel"></span></div>
    <!-- Progress bar via data-bind-style -->
    <div data-bind-style="{ width: cpu + '%',
        background: cpu > 80 ? '#c0392b' : '#6b996a' }"></div>

    <div>Memory: <span data-bind="memLabel"></span></div>
    <p>Last updated: <span data-bind="lastUpdated"></span></p>
</div>

<script>
wildflower.component('polling-dashboard', {
    state: {
        cpu: 45, memory: 62,
        lastUpdated: '',
        polling: true, countdown: 5
    },
    computed: {
        cpuLabel() { return this.cpu + '%'; },
        memLabel() { return this.memory + '%'; },
        refreshLabel() {
            return this.polling
                ? 'Next refresh in ' + this.countdown + 's'
                : 'Polling paused';
        },
        toggleLabel() { return this.polling ? 'Pause' : 'Resume'; }
    },
    init() {
        this._tick = setInterval(() => {
            if (!this.polling) return;
            this.countdown--;
            if (this.countdown <= 0) this._refresh();
        }, 1000);
        this._refresh();
    },
    _refresh() {
        this.cpu = 20 + Math.floor(Math.random() * 70);
        this.memory = 40 + Math.floor(Math.random() * 50);
        this.lastUpdated = new Date().toLocaleTimeString();
        this.countdown = 5;
    },
    refreshNow() { this._refresh(); },
    togglePolling() { this.polling = !this.polling; },
    destroy() { clearInterval(this._tick); }
});
</script>