<!DOCTYPE html>
<html>
    <head>
        <title>test-chart</title>
        {{ catalog.render_assets() }}
    </head>
    <body>
        {# djlint:off #}
        {% set labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'] %}
        {% set data = {
            'errors': [12, 19, 3, 5, 2, 3, 7]
        } %}
        {% set chart_data = {
            'labels': labels,
            'datasets': [
                {
                    'label': 'Errors',
                    'data': data.errors,
                    'backgroundColor': 'rgba(220, 53, 69, 0.7)',
                    'borderColor': 'rgba(220, 53, 69, 1)',
                    'borderWidth': 1
                }
            ]
        } %}
        {% set chart_options = {
            'responsive': True,
            'maintainAspectRatio': True,
            'aspectRatio': 3,
            'plugins': {
                'legend': {'display': True},
                'tooltip': {'mode': 'index'}
            },
            'onHover': 'onHoverCallback',
            'onClick': 'onClickCallback',
            'onClick_arg': '/?date=[[label]]',
            'scales': {
                'x':  {
                'title': {'display': True, 'text': 'Dates'}
                },
                'y': {
                'beginAtZero': True,
                'title': {'display': True, 'text': 'Error Count'}
                }
            }
        } %}
        {# djlint:on #}
        <cf:Chart type="bar" :data="chart_data" :options="chart_options" />
    </body>
</html>
