{# Migrated from resources/views/components/usage-chart-monthly.blade.php #}
{# Renders a single monthly usage bar chart using Chart.js #}
{# Usage: {% include "components/usage_chart_monthly.html" with chartData=chartData %} #}

<div class="col-xl-12 col-lg-12">
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">{{ chartData.Title }}</h6>
        </div>
        <div class="card-body">
            <div class="chart-bar">
                <canvas id="chart_{{ chartData.ChartType }}" style="min-height: 250px;"></canvas>
            </div>
            <hr>
            <p class="small text-muted mt-2">{{ chartData.Text|safe }}</p>
        </div>
    </div>
</div>

<script>
(function() {
    var ctx = document.getElementById('chart_{{ chartData.ChartType }}').getContext('2d');
    var chartData = {{ chartData|safe }};
    var monate = ["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"];

    var datasets = chartData.charts.map(function(c) {
        return {
            label: c.year + ' [' + chartData.MassEinheit + ']',
            backgroundColor: c.color,
            data: c.data,
        };
    });

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: monate,
            datasets: datasets,
        },
        options: {
            responsive: true,
            scales: {
                y: { beginAtZero: true }
            },
            plugins: {
                tooltip: {
                    callbacks: {
                        label: function(ctx) {
                            var einheit = chartData.MassEinheit;
                            return ctx.raw === null
                                ? ctx.dataset.label + ': keine Daten'
                                : ctx.dataset.label + ': ' + ctx.raw + ' ' + einheit;
                        }
                    }
                }
            }
        }
    });
})();
</script>