first commit

2025-07-15 20:34:05 -05:00
commit f7eca4bad5
602 changed files with 158990 additions and 0 deletions
--- a/Views/Vehicle/_MPGByMonthReport.cshtml
+++ b/Views/Vehicle/_MPGByMonthReport.cshtml
@@ -0,0 +1,101 @@
+@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>
+}