{% extends 'admin/base.html.twig' %}

{% block content %}
    <div class="content">
        <div class="container-fluid">

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Количество уникальных пользователей (по дням)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="usersDay" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Количество новых пользователей (по дням)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="newUsersDay" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Количество просмотренных страниц (по дням)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="hitsDay" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Количество сессий (по дням)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="sessionsDay" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Средняя длительность сессии в минутах (по дням)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="avgSessionDurationDay" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Показатель отказов в % (по дням)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="bounceRateDay" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Количество уникальных пользователей (по неделям)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="usersWeek" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Количество новых пользователей (по неделям)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="newUsersWeek" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Количество просмотренных страниц (по неделям)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="hitsWeek" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Количество сессий (по неделям)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="sessionsWeek" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Средняя длительность сессии в минутах (по неделям)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="avgSessionDurationWeek" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="float-left">
                                <h4 class="card-title">Показатель отказов в % (по неделям)</h4>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="bounceRateWeek" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
{% endblock %}

{% block admin_js_body %}
    {{ parent() }}
    <script src="{{ asset('static/admin/src/chart/Chart.min.js') }}"></script>

    <script>
    function getOptions(max) {
        return {
            responsive: true,
            maintainAspectRatio: false,
            legend: { display: false },
            scales: {
                yAxes: [{
                    ticks: { beginAtZero: true, min: 0, suggestedMax: max }
                }]
            },
            tooltips: {
                displayColors: false,
                callbacks: {
                    title: function(tooltipItem, data) {
                        return '';
                    },
                    label: function(tooltipItem, data) {
                        return tooltipItem.yLabel.toString();
                    }
                }
            }
        };
    }

    {% if statistics['day']['users'] is defined %}
        const usersDayContext = document.getElementById('usersDay').getContext('2d');
        const usersDayChart = new Chart(usersDayContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['day']['users']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['day']['users']['values']|join(',') }}],
                    backgroundColor: ['rgba(58, 235, 137, 0.2)'],
                    borderColor: ['rgba(58, 235, 137, 1)'],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['day']['users']['values']) }})
        });
    {% endif %}

    {% if statistics['day']['newUsers'] is defined %}
        const newUsersDayContext = document.getElementById('newUsersDay').getContext('2d');
        const newUsersDayChart = new Chart(newUsersDayContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['day']['newUsers']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['day']['newUsers']['values']|join(',') }}],
                    backgroundColor: ['rgba(219, 220, 85, 0.2)'],
                    borderColor: ['rgba(219, 220, 85, 1)'],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['day']['newUsers']['values']) }})
        });
    {% endif %}

    {% if statistics['day']['hits'] is defined %}
        const hitsDayContext = document.getElementById('hitsDay').getContext('2d');
        const hitsDayChart = new Chart(hitsDayContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['day']['hits']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['day']['hits']['values']|join(',') }}],
                    backgroundColor: [ 'rgba(54, 162, 235, 0.2)' ],
                    borderColor: [ 'rgba(54, 162, 235, 1)' ],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['day']['hits']['values']) }})
        });
    {% endif %}

    {% if statistics['day']['sessions'] is defined %}
        const sessionsDayContext = document.getElementById('sessionsDay').getContext('2d');
        const sessionsDayChart = new Chart(sessionsDayContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['day']['sessions']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['day']['sessions']['values']|join(',') }}],
                    backgroundColor: [ 'rgba(188, 62, 236, 0.2)' ],
                    borderColor: [ 'rgba(188, 62, 236, 1)' ],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['day']['sessions']['values']) }})
        });
    {% endif %}

    {% if statistics['day']['avgSessionDuration'] is defined %}
        const avgSessionDurationDayContext = document.getElementById('avgSessionDurationDay').getContext('2d');
        const avgSessionDurationDayChart = new Chart(avgSessionDurationDayContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['day']['avgSessionDuration']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['day']['avgSessionDuration']['values']|join(',') }}],
                    backgroundColor: [ 'rgba(131, 235, 58, 0.2)' ],
                    borderColor: [ 'rgba(131, 235, 58, 1)' ],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['day']['avgSessionDuration']['values']) }})
        });
    {% endif %}

    {% if statistics['day']['bounceRate'] is defined %}
        const bounceRateDayContext = document.getElementById('bounceRateDay').getContext('2d');
        const bounceRateDayChart = new Chart(bounceRateDayContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['day']['bounceRate']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['day']['bounceRate']['values']|join(',') }}],
                    backgroundColor: [ 'rgba(237, 67, 64, 0.1)' ],
                    borderColor: [ 'rgba(237, 67, 64, 0.8)' ],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['day']['bounceRate']['values']) }})
        });
    {% endif %}

    {% if statistics['week']['users'] is defined %}
        const usersWeekContext = document.getElementById('usersWeek').getContext('2d');

        const usersWeekChart = new Chart(usersWeekContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['week']['users']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['week']['users']['values']|join(',') }}],
                    backgroundColor: ['rgba(58, 235, 137, 0.2)'],
                    borderColor: ['rgba(58, 235, 137, 1)'],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['week']['users']['values']) }})
        });
    {% endif %}

    {% if statistics['week']['newUsers'] is defined %}
        const newUsersWeekContext = document.getElementById('newUsersWeek').getContext('2d');

        const newUsersWeekChart = new Chart(newUsersWeekContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['week']['newUsers']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['week']['newUsers']['values']|join(',') }}],
                    backgroundColor: ['rgba(219, 220, 85, 0.2)'],
                    borderColor: ['rgba(219, 220, 85, 1)'],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['week']['newUsers']['values']) }})
        });
    {% endif %}

    {% if statistics['week']['hits'] is defined %}
        const hitsWeekContext = document.getElementById('hitsWeek').getContext('2d');

        const hitsWeekChart = new Chart(hitsWeekContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['week']['hits']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['week']['hits']['values']|join(',') }}],
                    backgroundColor: [ 'rgba(54, 162, 235, 0.2)' ],
                    borderColor: [ 'rgba(54, 162, 235, 1)' ],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['week']['hits']['values']) }})
        });
    {% endif %}

    {% if statistics['week']['sessions'] is defined %}
        const sessionsWeekContext = document.getElementById('sessionsWeek').getContext('2d');

        const sessionsWeekChart = new Chart(sessionsWeekContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['week']['sessions']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['week']['sessions']['values']|join(',') }}],
                    backgroundColor: [ 'rgba(188, 62, 236, 0.2)' ],
                    borderColor: [ 'rgba(188, 62, 236, 1)' ],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['week']['sessions']['values']) }})
        });
    {% endif %}

    {% if statistics['week']['avgSessionDuration'] is defined %}
        const avgSessionDurationWeekContext = document.getElementById('avgSessionDurationWeek').getContext('2d');

        const avgSessionDurationWeekChart = new Chart(avgSessionDurationWeekContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['week']['avgSessionDuration']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['week']['avgSessionDuration']['values']|join(',') }}],
                    backgroundColor: [ 'rgba(131, 235, 58, 0.2)' ],
                    borderColor: [ 'rgba(131, 235, 58, 1)' ],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['week']['avgSessionDuration']['values']) }})
        });
    {% endif %}

    {% if statistics['week']['bounceRate'] is defined %}
        const bounceRateWeekContext = document.getElementById('bounceRateWeek').getContext('2d');

        const bounceRateWeekChart = new Chart(bounceRateWeekContext, {
            type: 'line',
            data: {
                labels: [{{ statistics['week']['bounceRate']['labels']|map((elem) => "'#{elem}'")|join(',')|raw }}],
                datasets: [{
                    label: '',
                    data: [{{ statistics['week']['bounceRate']['values']|join(',') }}],
                    backgroundColor: [ 'rgba(237, 67, 64, 0.1)' ],
                    borderColor: [ 'rgba(237, 67, 64, 0.8)' ],
                    borderWidth: 2
                }]
            },
            options: getOptions({{ max(statistics['week']['bounceRate']['values']) }})
        });
    {% endif %}

    </script>

{% endblock %}