@model List<CostForVehicleByMonth>
@{
        var barGraphColors = new string[] { "#00876c", "#43956e", "#67a371", "#89b177", "#a9be80", "#c8cb8b", "#e6d79b", "#e4c281", "#e3ab6b", "#e2925b", "#e07952", "#db5d4f" };
        var sortedByMPG = Model.OrderByDescending(x => x.Cost).ToList();
}
@if (Model.Where(x=>x.Cost > 0).Any())
{
    
    <canvas id="bar-chart-mpg"></canvas>
    <script>
        renderChart();
        function renderChart() {
        var barGraphLabels = [];
        var barGraphData = [];
        //color gradient from high to low
        var barGraphColors = [];
        var useDarkMode = getGlobalConfig().useDarkMode;
        @foreach (CostForVehicleByMonth gasCost in Model)
        {
            @:barGraphLabels.push("@gasCost.MonthName");
            @:barGraphData.push(globalParseFloat('@gasCost.Cost'));
            var index = sortedByMPG.FindIndex(x => x.MonthName == gasCost.MonthName);
            @:barGraphColors.push('@barGraphColors[index]');
        }
        new Chart($("#bar-chart-mpg"), {
                    type: 'bar',
                    data: {
                        labels: barGraphLabels,
                        datasets: [
                            {
                                label: "Fuel Mileage by Month",
                                backgroundColor: barGraphColors,
                                data: barGraphData
                            }
                        ]
                    },
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                color: useDarkMode ? "#fff" : "#000",
                                text: 'Fuel Mileage by Month'
                            },
                            legend: {
                                display: false,
                                labels: {
                                    color: useDarkMode ? "#fff" : "#000"
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    color: useDarkMode ? "#fff" : "#000"
                                }
                            },
                            x: {
                                ticks: {
                                    color: useDarkMode ? "#fff" : "#000"
                                }
                            }
                        }
                    }
                });
        }
    </script>
} else
{
    <div class="text-center">
        <h4>No data found, insert/select some data to see visualizations here.</h4>
    </div>
}