jast/core/templates/stats.html

<!DOCTYPE html>
<html>
<head>
    <title>DIME Statistics</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: system-ui, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
        .nav { margin-bottom: 20px; }
        .nav a { background: #e4e4e7; color: black; text-decoration: none; padding: 8px 16px; border-radius: 4px; font-weight: bold; }
        .filters { margin-bottom: 30px; display: flex; gap: 10px; }
        .filters a { padding: 6px 12px; border-radius: 4px; text-decoration: none; border: 1px solid #d4d4d8; color: black; }
        .filters a.active { background: #18181b; color: white; border-color: #18181b; }
        .chart-container { position: relative; height: 400px; width: 100%; margin-top: 20px; }
    </style>
</head>
<body>
    <div class="nav">
        <a href="{% url 'home' %}">← Back to Tracker</a>
    </div>

    <h1>Spending Statistics</h1>

    <div class="filters">
        <a href="?filter=week" class="{% if current_filter == 'week' %}active{% endif %}">Last 7 Days</a>
        <a href="?filter=month" class="{% if current_filter == 'month' %}active{% endif %}">Last 30 Days</a>
        <a href="?filter=year" class="{% if current_filter == 'year' %}active{% endif %}">Last 365 Days</a>
        <a href="?filter=all" class="{% if current_filter == 'all' %}active{% endif %}">All Time</a>
    </div>

    <div class="chart-container">
        <canvas id="categoryChart"></canvas>
    </div>

    <script>
        // Parse the JSON data passed from Django
        const labels = JSON.parse('{{ labels|safe }}');
        const data = JSON.parse('{{ data|safe }}');

        const ctx = document.getElementById('categoryChart').getContext('2d');
        
        if (data.length === 0) {
            ctx.font = "16px system-ui";
            ctx.fillText("No expenses logged for this time period.", 10, 50);
        } else {
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Amount Spent (kr)',
                        data: data,
                        // A simple color palette
                        backgroundColor: ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6'],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { position: 'right' }
                    }
                }
            });
        }
    </script>
</body>
</html>