charts

Controllers/VehicleController.cs

@@ -2,16 +2,9 @@ using CarCareTracker.External.Interfaces;
 using CarCareTracker.Models;
 using LiteDB;
 using Microsoft.AspNetCore.Mvc;
-using System.Diagnostics;
-using static System.Net.Mime.MediaTypeNames;
-using System.Drawing;
-using System.Linq.Expressions;
-using Microsoft.Extensions.Logging;
-using CarCareTracker.External.Implementations;
 using CarCareTracker.Helper;
 using CsvHelper;
 using System.Globalization;
-using System.Runtime.InteropServices;
 
 namespace CarCareTracker.Controllers
 {
@@ -415,10 +408,19 @@ namespace CarCareTracker.Controllers
             };
             return PartialView("_CostMakeUpReport", viewModel);
         }
-        //public IActionResult GetFuelCostByMonthByVehicle(int vehicleId)
+        public IActionResult GetFuelCostByMonthByVehicle(int vehicleId, int year = 0)
-        //{
+        {
-
+            var gasRecords = _gasRecordDataAccess.GetGasRecordsByVehicleId(vehicleId);
-        //}
+            if (year != default)
+            {
+                gasRecords.RemoveAll(x => x.Date.Year != year);
+            }
+            var groupedGasRecord = gasRecords.GroupBy(x => x.Date.Month).OrderBy(x=>x.Key).Select(x => new GasCostForVehicleByMonth {
+                MonthName = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(x.Key),
+                Cost = x.Sum(y=>y.Cost)
+            }).ToList();
+            return PartialView("_GasCostByMonthReport", groupedGasRecord);
+        }
         #endregion
     }
 }

Models/Report/GasCostForVehicleByMonth.cs

@@ -0,0 +1,8 @@
+namespace CarCareTracker.Models
+{
+    public class GasCostForVehicleByMonth
+    {
+        public string MonthName { get; set; }
+        public decimal Cost { get; set; }
+    }
+}

Views/Vehicle/_CostMakeUpReport.cshtml

@@ -1,5 +1,5 @@
 @model CostMakeUpForVehicle
-<canvas id="pie-chart" class="vehicleDetailTabContainer"></canvas>
+<canvas id="pie-chart"></canvas>
 <script>
     renderChart();
     function renderChart() {

Views/Vehicle/_GasCostByMonthReport.cshtml

@@ -0,0 +1,49 @@
+@model List<GasCostForVehicleByMonth>
+<canvas id="bar-chart" class="vehicleDetailTabContainer"></canvas>
+<script>
+    renderChart();
+    function renderChart() {
+        var barGraphLabels = [];
+        var barGraphData = [];
+        @foreach (GasCostForVehicleByMonth gasCost in Model)
+        {
+            @:barGraphLabels.push("@gasCost.MonthName");
+            @:barGraphData.push(@gasCost.Cost);
+        }
+            new Chart($("#bar-chart"), {
+                type: 'bar',
+                data: {
+                    labels: barGraphLabels,
+                    datasets: [
+                        {
+                            label: "Gas Expenses by Month",
+                            backgroundColor: ["#00876c", "#43956e", "#67a371", "#89b177", "#a9be80", "#c8cb8b", "#e6d79b", "#e4c281", "#e3ab6b", "#e2925b", "#e07952", "#db5d4f"],
+                            data: barGraphData
+                        }
+                    ]
+                },
+                options: {
+                    plugins: {
+                        legend: {
+                            labels: {
+                                color: '#fff'
+                            }
+                        }
+                    },
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            ticks: {
+                                color: "#fff"
+                            }
+                        },
+                        x: {
+                            ticks: {
+                                color: "#fff"
+                            }
+                        }
+                    }
+                }
+            });
+    }
+</script>

Views/Vehicle/_Report.cshtml

@@ -6,8 +6,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-12" id="costMakeUpReportContent">
+            <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="costMakeUpReportContent">
-
             </div>
         </div>
     </div>
@@ -17,6 +16,10 @@
 
             </div>
         </div>
+        <div class="row">
+            <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="gasCostByMonthReportContent">
+            </div>
+        </div>
     </div>
 </div>
 <script>
@@ -25,6 +28,9 @@
         var vehicleId = GetVehicleId().vehicleId;
         $.get(`/Vehicle/GetCostMakeUpForVehicle?vehicleId=${vehicleId}`, function (data) {
             $("#costMakeUpReportContent").html(data);
+            $.get(`/Vehicle/GetFuelCostByMonthByVehicle?vehicleId=${vehicleId}`, function (data) {
+                $("#gasCostByMonthReportContent").html(data);
+            })
         })
     }
 </script>

appsettings.json

@@ -7,5 +7,5 @@
   },
   "AllowedHosts": "*",
   "DarkMode": true,
-  "EnableCsvImports":  false
+  "EnableCsvImports":  true
 }

wwwroot/css/site.css

@@ -36,6 +36,11 @@ html {
     overflow-x:auto;
 }
 
+.chartContainer{
+    height:65vh;
+    overflow:auto;
+}
+
 .vehicleNoteContainer{
     height:40vh;
 }