WMGZON/templates/stats.html

<link rel="stylesheet" href="{{ url_for('static', filename='css/products.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/stats.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/forms.css') }}">
 
<div class="stats">
    <div>
        <canvas id="myChart" width="800px" height="500px"></canvas>
        <br >
        <div class="form-row">
            <a href="?prev_days=7">1 Week</a>
            <a href="?prev_days=14">2 Weeks</a>
            <a href="?prev_days=31">1 Month</a>
        </div>
    </div>
    <div>
        <p><b>Age:</b> {{data['age']}}</p>
        <p><b>Ranking:</b> #{{data['ranking']}} in {{data['category']}}</p>
        <p><b>Stock Level:</b> {{data['stocklevel']}}</p>
        <p><b>Total Views:</b> {{data['views']['total']}}</p>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const ctx = document.getElementById('myChart');

    new Chart(ctx, {
        type: 'line',
        data: {
            labels: {{data['views']['headings']|safe}},
            datasets: [{
                label: '# of Views',
                data: {{data['views']['data']}},
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    title: {
                        display: true,
                        text: "Num Views"
                    },
                    beginAtZero: true
                },
                x: {
                    title: {
                        display: true,
                        text: "Prev Days"
                    },
                }
            }
        }
    });


    // Remove the need for a submit button on the graph buttons
    const form = document.getElementById("timeframe_form");
    const rbs = form.querySelectorAll("input[type='radio']");
    console.log(rbs)
    console.log(form)
    rbs.forEach((input) => {
        input.addEventListener("change", () => {
            form.submit();
        });
    });
</script>