{% extends 'admin/master.html' %}

{% block body %}


<div class="container-fluid">

    <div class="row jumbotron">
        <div class="col-md-6 col-md-offset-3">

            <table class="table table-bordered">
                {% for stat, data in statistics.items() %}
                <tr>
                    <td>{{ stat }}</td>
                    <td class="text-center"><strong>{{ data }}</strong></td>
                </tr>
                {% endfor %}
            </table>

        </div>
    </div>

    <div class="row">
        {% for key, data in users.items() %}
        <div class="col-md-4">
            <table class="table table-bordered">
                <caption>Top {{ key }}</caption>
                <thead>
                    <tr>
                        <th>User</th>
                        <th class="text-center">Nb of {{ key }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% if data %}
                    {% for id, user, count in data %}
                    <tr>
                        <td><a href="{{ url_for('user.details_view', id=id) }}">{{ user }}</a></td>
                        <td class="text-center">{{ count }}</td>
                    </tr>
                    {% endfor %}
                    {% else %}
                    <tr><td>--</td><td class="text-center">--</td></tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
        {% endfor %}

    </div>

    <hr/>

    <div class="bs-3-tab-example">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab-week">Current Week</a></li>
            <li><a data-toggle="tab" href="#tab-day">All days</a></li>
            <li><a data-toggle="tab" href="#tab-month">Month</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab-week" class="tab-pane fade in active">
                <canvas id="week" width="800" height="300"></canvas>
            </div>
            <div id="tab-day" class="tab-pane fade">
                <canvas id="perDay" width="800" height="300"></canvas>
            </div>
            <div id="tab-month" class="tab-pane fade">
                <canvas id="perMonth" width="800" height="300"></canvas>
            </div>
        </div>
    </div>

    <p>&nbsp;</p>
</div>

<script src="{{ url_for('static', filename='js/chart.min.js') }}" type="text/javascript"></script>
<script>


var week = new Chart(document.getElementById("week").getContext('2d'), {
    type: 'bar',
    data: {
        labels: ["{{ week['day']|join('","')|safe }}"],
        datasets: [{
            label: 'Nb of users',
            data: [{{ week['count']|join(',') }}],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        title:{
            display: true,
            text: 'Nb of user for the last week'
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

var perDay= new Chart(document.getElementById("perDay").getContext('2d'), {
    type: 'bar',
    data: {
        labels: ["{{ days['day']|join('","')|safe }}"],
        datasets: [{
            label: 'Nb of users',
            data: [{{ days['count']|join(',') }}],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        title:{
            display: true,
            text: 'Nb of user per day'
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

var perMonth= new Chart(document.getElementById("perMonth").getContext('2d'), {
    type: 'bar',
    data: {
        labels: ["{{ months['month']|join('","')|safe }}"],
        datasets: [{
            label: 'Nb of users',
            data: [{{ months['count']|join(',') }}],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        title:{
            display: true,
            text: 'Nb of user per month'
        },
        legend: {
            display: false
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

</script>

{% endblock %}