@model PantheonRA.WebApi.Contracts.ZDashPanel
@{
    var chartId = "zChart-" + Model.Qid;
    var filterId = "zFilter-" + Model.Qid;
    var valuesId = "zValues-" + Model.Qid;
}
@foreach (var f in Model.DataGraph.Values)
{
    @Html.Hidden(valuesId + "-" + f.Key, Json.Encode(f.Value))
}

<div class="dash-panel-header">
    <p class="dash-panel-title">@Model.Title</p>
    <p class="dash-panel-description">@Model.Description</p>

    @if (Model.HasFilter)
    {
        <div class="row">
            <div class="col-xs-6">

            </div>
            <div class="col-xs-6">
                <div class="form-group selectpicker-dropdown m-b-none">
                    <select id="@filterId"
                            class="form-control custom-select"
                            title="@Loc.SearchFilter">
                        @foreach (var f in Model.FilterValuesList)
                        {
                            if (f == Model.FilterValue)
                            {
                                <option value="@f" selected>@f</option>
                            }
                            else
                            {
                                <option value="@f">@f</option>
                            }
                        }
                    </select>
                </div>
            </div>
        </div>
    }
</div>

<canvas id="@chartId"></canvas>

<script>
    $(document).ready(function () {
        let data = {
            labels: @Html.Raw(Json.Encode(Model.HasFilter ? Model.DataGraph.Labels.FirstOrDefault(q => q.Key == Model.FilterValue).Value : Model.DataGraph.Labels.FirstOrDefault().Value)),
            datasets: [{
                label: '@Model.Title',
                backgroundColor: @Html.Raw(Json.Encode(Model.DataGraph.Colors)),
                data: @Html.Raw(Json.Encode(Model.HasFilter ? Model.DataGraph.Values.FirstOrDefault(q => q.Key == Model.FilterValue).Value : Model.DataGraph.Values.FirstOrDefault().Value)),
            }]
        };

        let config = {
            type: '@Model.TypeChart',
            data: data,
            options: {
                    indexAxis: '@Model.Axis',
                    plugins: {
                        legend: {
                            position: 'top',
                        },
                        title: {
                            display: false,
                        },
                    },
                    responsive: true,
                    scales: {
                        x: {
                                stacked: true,
                                ticks: {
                                    display: "@Model.TypeChart" == "pie" ? false : true
                                },
                                grid: {
                                    drawBorder: "@Model.TypeChart" == "pie" ? false : true,
                                    drawTicks: "@Model.TypeChart" == "pie" ? false : true,
                                    display: "@Model.TypeChart" == "pie" ? false : true
                                }
                            },
                        y: {
                                stacked: true,
                                ticks: {
                                    display: "@Model.TypeChart" == "pie" ? false : true
                                },
                                grid: {
                                    drawBorder: "@Model.TypeChart" == "pie" ? false : true,
                                    drawTicks: "@Model.TypeChart" == "pie" ? false : true,
                                    display: "@Model.TypeChart" == "pie" ? false : true
                                }
                            }
                        }
                }
            };

        let zChart = new Chart(
            document.getElementById('@chartId'),
            config
        );

        $('#' + '@filterId').on('change', function () {
            let values = JSON.parse($("#@valuesId-" + this.value).val());

            zChart.data.datasets.forEach((dataset) => {
                dataset.data.pop();
            });
            zChart.update();
            zChart.update();
            zChart.update();

            zChart.data.datasets[0].data.push(values);
            zChart.update();
            zChart.update();
            zChart.update();
        });
    });
</script>