@using BankContracts.ViewModels.Cashier.Diagram

@model CashierDiagramViewModel

@{
    ViewData["Title"] = "Диаграмма";
}

<div class="text-center">
    <h1 class="display-4">Диаграмма суммарных поступлений на счёт по месяцам</h1>
</div>

<form method="post">
    <div class="row mb-2">
        <div class="row">Номер счета:</div>
        <select id="accountId" name="accountId" class="form-control" asp-items="@(new SelectList( @ViewBag.Accounts, "Id", "AccountNumber"))">
            <option disabled selected>Выберите счёт</option>
        </select>
    </div>
    <div class="row mb-2">
        <input style="width:100%;" type="submit" value="Выбрать" class="btn btn-dark" />
    </div>
</form>

@if (Model == null) return;

<div id="Diagrams" class="text-center">
    <div id="@Model.DiagramName Diagram">
        <canvas id="Chart"></canvas>
        <div id="params">
            @foreach (var info in Model.Elements)
            {
                <input type="hidden" id="@info.Name" value="@info.Value" />
            }
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const diagrams = document.getElementById('Diagrams').childNodes;

    let diagram_name = diagrams[1].id;

    console.log(diagram_name);
    let diagram = document.getElementById(diagram_name).childNodes;
    console.log(diagram);
    let labels = [];
    let data = [];
    document.getElementById('params').childNodes.forEach(element => {
        if (element.id != undefined) {
            labels.push(element.id);
        }
    });
    document.getElementById('params').childNodes.forEach(element => {
        if (element.id != undefined) {
            data.push(Number(element.value));
        }
    });

    new Chart(diagram.item(1), {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Денег в этом месяце',
                data: data,
                borderWidth: 1,
                backgroundColor: 'rgb(33, 37, 41)'
            }]
        },
        options: {
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    suggestedMin: Math.min(data) - Math.min(data) * -0.1,
                    suggestedMax: Math.max(data) + Math.max(data) * 0.1,
                }
            }
        }
    }
    );

</script>