{% extends base_template|default:"base.htm" %}
{% load staticfiles %}
{% load user_tags %}

{% block local_head %}
    {% include 'handyhelpers/component/chart_components.htm' %}
{% endblock local_head %}

{% block content %}
    <header>
        <div class="headline text-center">
            <div class="container mb-5">
                <h1 class="text-primary font-weight-bold">{{ title }}</h1>
                <h3 class="text-secondary">{{ sub_title }} &nbsp; </h3>
            </div>
        </div>
    </header>

    {# bar graphs for day/week/month/year #}
    <div class="container-fluid mt-2 mb-5">
        <div class="row mb-4 text-center">
            <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
                <canvas id="bar-chart-day" width="400" height="250"></canvas>
            </div>
            <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
                <canvas id="bar-chart-week" width="400" height="250"></canvas>
            </div>
            <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
                <canvas id="bar-chart-month" width="400" height="250"></canvas>
            </div>
            <div class="col-sm-12 col-md-3 d-flex justify-content-center mb-4">
                <canvas id="bar-chart-year" width="400" height="250"></canvas>
            </div>
        </div>
    </div>

    {# line graph for year #}
    <div class="container-fluid mt-2 mb-5">
        <div class="row mb-4 text-center">
            <div class="col-sm-12 d-flex justify-content-center mb-4">
                <canvas id="annual_trend" width="800" height="250"></canvas>
            </div>
        </div>


    </div>

    <script>
        var style = getComputedStyle(document.body);
        var theme = {};
        theme.primary = style.getPropertyValue('--primary');
        theme.secondary = style.getPropertyValue('--secondary');
        theme.success = style.getPropertyValue('--success');
        theme.info = style.getPropertyValue('--info');
        theme.warning = style.getPropertyValue('--warning');
        theme.danger = style.getPropertyValue('--danger');
        theme.light = style.getPropertyValue('--light');
        theme.dark = style.getPropertyValue('--dark');

        {# bar graph for day #}
        new Chart(document.getElementById("bar-chart-day"), {
            type: 'bar',
            data: {
                labels: [{% for data in dataset %}"{{ data.title }}",{% endfor %}],
                datasets: [
                    {
                        backgroundColor: [{% for data in dataset %}{{ data.color }},{% endfor %}],
                        data: [{% for data in dataset %}{{ data.day }},{% endfor %}]
                    }
                ]
            },
            options: {
                legend: { display: false },
                title: {
                    display: true,
                    text: 'Day',
                    fontSize: 20,
                    position: 'bottom'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        {# bar graph for week #}
        new Chart(document.getElementById("bar-chart-week"), {
            type: 'bar',
            data: {
                labels: [{% for data in dataset %}"{{ data.title }}",{% endfor %}],
                datasets: [
                    {
                        backgroundColor: [{% for data in dataset %}{{ data.color }},{% endfor %}],
                        data: [{% for data in dataset %}{{ data.week }},{% endfor %}]
                    }
                ]
            },
            options: {
                legend: { display: false },
                title: {
                    display: true,
                    text: 'Week',
                    fontSize: 20,
                    position: 'bottom'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        {# bar graph for month #}
        new Chart(document.getElementById("bar-chart-month"), {
            type: 'bar',
            data: {
                labels: [{% for data in dataset %}"{{ data.title }}",{% endfor %}],
                datasets: [
                    {
                        backgroundColor: [{% for data in dataset %}{{ data.color }},{% endfor %}],
                        data: [{% for data in dataset %}{{ data.month }},{% endfor %}]
                    }
                ]
            },
            options: {
                legend: { display: false },
                title: {
                    display: true,
                    text: 'Month',
                    fontSize: 20,
                    position: 'bottom'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

        {# bar graph for year #}
        new Chart(document.getElementById("bar-chart-year"), {
            type: 'bar',
            data: {
                labels: [{% for data in dataset %}"{{ data.title }}",{% endfor %}],
                datasets: [
                    {
                        backgroundColor: [{% for data in dataset %}{{ data.color }},{% endfor %}],
                        data: [{% for data in dataset %}{{ data.year }},{% endfor %}]
                    }
                ]
            },
            options: {
                legend: { display: false },
                title: {
                    display: true,
                    text: 'Year',
                    fontSize: 20,
                    position: 'bottom'
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });


        {# line graph for year #}
        var canvasP = document.getElementById("annual_trend");
        var ctxP = canvasP.getContext('2d');
        var day_chart = new Chart(ctxP, {
            type: 'line',
            data: {
                labels: {{ month_labels|safe }},
                datasets: [
                    {% for data in dataset %}
                    {
                        data: {{ data.annual }},
                        label: "{{ data.title }}",
                        borderColor: {{ data.color }},
                        fill: true
                    },
                    {% endfor %}
                ]
            },
            options: {
                title: {
                    display: true,
                    fontSize: 20,
                    position: "bottom",
                    text: 'trend over the past year'
                },
                options: {
                    responsive: false,
                    maintainAspectRatio: false,
                },
                legend: {
                    display: true,
                    position: "bottom"
                }
            }
        });
     </script>

{% endblock content %}
