<div class="card h-100">
    <div class="card-header"><h6 class="mb-0"><i class="fas fa-user-plus me-2"></i><?= lang('reports.member_growth') ?></h6></div>
    <div class="card-body">
        <canvas id="widget-growth-chart" height="200"></canvas>
    </div>
</div>
<script>
(function() {
    function loadWidget() {
        $.get('/api/reports/member-growth', function(res) {
            if (!res.success) return;
            var ctx = document.getElementById('widget-growth-chart');
            if (!ctx) return;
            new Chart(ctx, {
                type: 'bar',
                data: { labels: res.labels, datasets: [{label: 'New Members', data: res.values, backgroundColor: '#38a169', borderRadius: 4}] },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } }, plugins: { legend: { display: false } } }
            });
        });
    }
    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', loadWidget); } else { loadWidget(); }
})();
</script>