jast/core/templates/stats.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JAST Statistics</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>

    <!-- Top Navbar -->
    <nav class="navbar">
        <a href="{% url 'home' %}" class="navbar-brand">JAST</a>
        <div class="navbar-actions">
            <a href="{% url 'home' %}" class="btn btn-nav">← Back to Dashboard</a>
            <form action="{% url 'logout' %}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to log out?');">
                {% csrf_token %}
                <button type="submit" class="btn btn-logout">Logout</button>
            </form>
        </div>
    </nav>

    <h1>Spending Statistics</h1>

    <!-- Time Period Filters -->
    <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>

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

    <script>
        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, sans-serif";
            ctx.fillStyle = "#a89984"; // Gruvbox muted text
            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,
                        backgroundColor: [
                            '#fabd2f', // Gruvbox Yellow
                            '#fe8019', // Gruvbox Orange
                            '#fb4934', // Gruvbox Red
                            '#b8bb26', // Gruvbox Green
                            '#83a598', // Gruvbox Blue
                            '#d3869b', // Gruvbox Purple
                            '#8ec07c'  // Gruvbox Aqua
                        ],
                        borderColor: '#3c3836', // Card background color for clean slice gaps
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { 
                            position: 'right',
                            labels: {
                                color: '#ebdbb2', // Gruvbox primary text
                                font: {
                                    family: 'system-ui, -apple-system, sans-serif',
                                    size: 13
                                }
                            }
                        }
                    }
                }
            });
        }
    </script>
</body>
</html>