Live Stats Card

Auto-updating dashboard statistics.

Live Demo

Active Users
Requests/sec
Avg Latency
Error Rate

Updates every 2 seconds.

Source

HTML + JavaScript 
<div data-component="live-stats">
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value" data-bind="formattedUsers"></div>
            <div class="stat-label">Active Users</div>
        </div>
        <!-- more cards... -->
    </div>
</div>

<script>
wildflower.component('live-stats', {
    state: {
        users: 1247,
        requests: 342,
        latency: 45,
        errors: 12,
        total: 10000,
        running: true
    },
    computed: {
        formattedUsers() { return this.users.toLocaleString(); },
        formattedRequests() { return this.requests + '/s'; },
        formattedLatency() { return this.latency + 'ms'; },
        errorRate() { return ((this.errors / this.total) * 100).toFixed(2) + '%'; }
    },
    init() {
        this._interval = setInterval(() => {
            if (!this.running) return;
            this.users += Math.floor(Math.random() * 20) - 10;
            this.requests = 300 + Math.floor(Math.random() * 100);
            this.latency = 30 + Math.floor(Math.random() * 40);
            this.errors = Math.floor(Math.random() * 30);
        }, 2000);
    },
    destroy() { clearInterval(this._interval); }
});
</script>

Key Points

  • State updates in setInterval trigger automatic DOM updates. No manual rendering
  • Computed properties format raw numbers for display (locale strings, units, percentages)
  • Use init() to start the interval and destroy() to clean it up
  • Multiple state mutations in one callback are batched into a single DOM update

Related documentation

Computed Properties →