@using MotoVaultPro.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@model MPGForVehicleByMonth
@{
    var barGraphColors = StaticHelper.GetBarChartColors();
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
}
@if (Model.CostData.Any(x => x.Cost > 0))
{
    var chartMax = Math.Ceiling(Model.CostData.Max(x => x.Cost));
    var graphGrace = Decimal.ToInt32(Model.CostData.Max(x => x.Cost) - Model.CostData.Min(x => x.Cost));
    var chartMin = Math.Floor(Model.CostData.Min(x => x.Cost) - graphGrace);
    if (graphGrace < 0 || chartMin < 0)
    {
        graphGrace = 0;
        chartMin = 0;
    }
    var stepSize = StaticHelper.CalculateNiceStepSize(chartMin, chartMax, 8);
    var remMin = stepSize > 0 ? chartMin % stepSize : 0;
    var cleanedMin = chartMin - remMin;
    if (remMin >= (stepSize / 2))
    {
        cleanedMin += stepSize;
    }
    var remMax = stepSize > 0 ? chartMax % stepSize : 0;
    var cleanedMax = chartMax - remMax;
    if (remMax >= (stepSize / 2))
    {
        cleanedMax += stepSize;
    }
    <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.CostData)
        {
            @:barGraphLabels.push(decodeHTMLEntities("@gasCost.MonthName"));
            @:barGraphData.push(globalParseFloat('@gasCost.Cost'));
            var index = Model.SortedCostData.FindIndex(x => x.MonthName == gasCost.MonthName);
            @:barGraphColors.push('@barGraphColors[index]');
        }
                new Chart($("#bar-chart-mpg"), {
                    type: 'bar',
                    data: {
                        labels: barGraphLabels,
                        datasets: [
                            {
                                label: decodeHTMLEntities('@translator.Translate(userLanguage, "Fuel Mileage by Month")'),
                                backgroundColor: barGraphColors,
                                data: barGraphData
                            }
                        ]
                    },
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                color: useDarkMode ? "#fff" : "#000",
                                text: decodeHTMLEntities('@($"{translator.Translate(userLanguage, "Fuel Mileage by Month")}({Model.Unit})")')
                            },
                            legend: {
                                display: false,
                                labels: {
                                    color: useDarkMode ? "#fff" : "#000"
                                }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: false,
                                max: Math.ceil(decodeHTMLEntities('@(cleanedMax)')),
                                min: Math.floor(decodeHTMLEntities('@(cleanedMin)')),
                                ticks: {
                                    color: useDarkMode ? "#fff" : "#000",
                                    stepSize: Math.ceil(decodeHTMLEntities('@(stepSize)'))
                                }
                            },
                            x: {
                                ticks: {
                                    color: useDarkMode ? "#fff" : "#000"
                                }
                            }
                        }
                    }
                });
        }
    </script>
}
else
{
    <div class="text-center">
        <h4>@translator.Translate(userLanguage,"No data found, insert/select some data to see visualizations here.")</h4>
    </div>
}