{% set chartId = 'statsPerDayChart' %}
{% set backgroundColor = config('theme.chart.background_color') %}
{% set gridColor = config('theme.chart.grid_color') %}

<div class="chart" style="max-height: {{ config('theme.chart.height') }}px;">
    <canvas id="{{ chartId }}" style="height: {{ config('theme.chart.height') }}px;"></canvas>
</div>

<script type="text/javascript">
    new Chart(document.getElementById('{{ chartId }}').getContext('2d'), {
        type: 'bar',
        data: {
            labels: [
                {% for i in 1..(statsPerDay | length) %}
                '{{ (year ~ "-" ~ month ~ "-" ~ i) | date_short }}',
                {% endfor %}
            ],
            datasets: [{
                label: '{{ 'duration'|trans }}',
                backgroundColor: '{{ backgroundColor }}',
                data: [
                    {% for stats in statsPerDay %}
                    {{ (stats.duration / 3600) | number_format(2, '.', '') }},
                    {% endfor %}
                ],
                realData: [
                    {% for stats in statsPerDay %}
                    '{{ stats.duration | duration }}',
                    {% endfor %}
                ]
            }]
        },
        options: {
            maintainAspectRatio: false,
            responsive: true,
            legend: false,
            scales: {
                y: {
                    scaleLabel: {
                        display: true,
                        labelString: '{{ 'duration'|trans }}',
                    },
                    ticks: {
                        beginAtZero: true
                    },
                    gridLines: {
                        display: true,
                        color: '{{ gridColor }}',
                        lineWidth: 1
                    }
                },
            },
            tooltips: {
                callbacks: {
                    label: function (tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index];
                    }
                }
            },
        },
    });
</script>