first commit

2025-07-15 20:34:05 -05:00
commit f7eca4bad5
602 changed files with 158990 additions and 0 deletions
--- a/Views/Vehicle/_GasCostByMonthReport.cshtml
+++ b/Views/Vehicle/_GasCostByMonthReport.cshtml
@@ -0,0 +1,103 @@
+@using MotoVaultPro.Helper
+@inject IConfigHelper config
+@inject ITranslationHelper translator
+@model List<CostForVehicleByMonth>
+@{
+    var userConfig = config.GetUserConfig(User);
+    var userLanguage = userConfig.UserLanguage;
+    var barGraphColors = StaticHelper.GetBarChartColors();
+    var sortedByMPG = Model.OrderBy(x => x.Cost).ToList();
+}
+@if (Model.Any(x=>x.Cost > 0) || Model.Any(x=>x.DistanceTraveled > 0))
+{
+    <canvas id="bar-chart"></canvas>
+    <script>
+        renderChart();
+        function renderChart() {
+            var barGraphLabels = [];
+            var barGraphData = [];
+            var lineChartData = [];
+            //color gradient from high to low
+            var barGraphColors = [];
+            var useDarkMode = getGlobalConfig().useDarkMode;
+        @foreach (CostForVehicleByMonth gasCost in Model)
+        {
+            @:barGraphLabels.push(decodeHTMLEntities("@gasCost.MonthName"));
+            @:barGraphData.push(globalParseFloat('@gasCost.Cost'));
+            @:lineChartData.push(globalParseFloat('@gasCost.DistanceTraveled'));
+            var index = sortedByMPG.FindIndex(x => x.MonthName == gasCost.MonthName);
+            @:barGraphColors.push('@barGraphColors[index]');
+        }
+                new Chart($("#bar-chart"), {
+                    type: 'bar',
+                    data: {
+                        labels: barGraphLabels,
+                        datasets: [
+                            {
+                                label: decodeHTMLEntities('@translator.Translate(userLanguage, "Expenses by Month")'),
+                                backgroundColor: barGraphColors,
+                                data: barGraphData,
+                                order: 1,
+                                yAxisID: 'y',
+                            },
+                            {
+                                label: decodeHTMLEntities('@translator.Translate(userLanguage, "Distance Traveled by Month")'),
+                                data: lineChartData,
+                                borderColor: useDarkMode ? "#fff" : "#000",
+                                backgroundColor: useDarkMode ? "#000" : "#fff",
+                                type: 'line',
+                                order: 0,
+                                yAxisID: 'y1',
+                            }
+                        ]
+                    },
+                    options: {
+                        onClick: (e, a, c) => {
+                            showBarChartTable(a);
+                        },
+                        onHover: (e, a, c) => {
+                            a.length > 0 ? c.canvas.style.cursor = 'pointer' : c.canvas.style.cursor = 'default';
+                        },
+                        plugins: {
+                            title: {
+                                display: true,
+                                color: useDarkMode ? "#fff" : "#000",
+                                text: decodeHTMLEntities('@translator.Translate(userLanguage, "Expenses and Distance Traveled by Month")')
+                            },
+                            legend: {
+                                display: false,
+                                labels: {
+                                    color: useDarkMode ? "#fff" : "#000"
+                                }
+                            }
+                        },
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                ticks: {
+                                    color: useDarkMode ? "#fff" : "#000"
+                                }
+                            },
+                            y1: {
+                                beginAtZero: true,
+                                position: 'right',
+                                ticks: {
+                                    color: useDarkMode ? "#fff" : "#000"
+                                }
+                            },
+                            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>
+}