Adding pie chart to stats

pointMaster/Controllers/StatsApiController.cs

@@ -99,6 +99,25 @@ namespace pointMaster.Controllers
             return Ok(JsonConvert.SerializeObject(vm));
         }
 
+        [Route("pointratio")]
+        public async Task<IActionResult> GetPointRatio()
+        {
+            var vm = new PointRatioModel();
+
+            vm.Names = new List<string>();
+            vm.Data = new List<int>();
+
+            var data = await dataContext.Patruljer.Include(x => x.Points).ToListAsync();
+
+            foreach (var patrulje in data)
+            {
+                vm.Names.Add(patrulje.Name);
+                vm.Data.Add(patrulje.Points.Sum(x => x.Points + x.Turnout));
+            }
+
+            return Ok(JsonConvert.SerializeObject(vm));
+        }
+
         public class PointChartModel
         {
             [JsonProperty("name")]
@@ -117,5 +136,13 @@ namespace pointMaster.Controllers
             public string Title { get; set; } = null!;
             public string Value { get; set; } = null!;
         }
+
+        public class PointRatioModel
+        {
+            [JsonProperty("names")]
+            public List<string> Names { get; set; } = null!;
+            [JsonProperty("data")]
+            public List<int> Data { get; set; } = null!;
+        }
     }
 }

pointMaster/js/src/components/Stats.vue

@@ -16,6 +16,8 @@
         <div class="stat-chart">
             <p class="stat-title">Point over tid</p>
             <div id="chart"></div>
+            <p class="stat-title">Point ratio</p>
+            <div id="pie"></div>
         </div>
     </div>
 </template>
@@ -41,7 +43,7 @@ export default defineComponent({
                 chart: {
                     type: "line",
                     toolbar: {
-                        show: false,
+                        show: true,
                     },
                 },
                 xaxis: {
@@ -63,9 +65,35 @@ export default defineComponent({
             } as ApexOptions);
         };
 
+        const initializePieChart = async () => {
+            const options: ApexOptions = {
+                chart: {
+                    type: "pie",
+                    toolbar: {
+                        show: true,
+                    },
+                },
+                series: [],
+            };
+
+            const chart = new ApexCharts(
+                document.querySelector("#pie"),
+                options
+            );
+            chart.render();
+
+            const data = (await axios.get("/api/pointratio")).data;
+
+            chart.updateOptions({
+                series: data.data,
+                labels: data.names,
+            } as ApexOptions);
+        };
+
         onMounted(async () => {
             await GetStats();
             await initializeChart();
+            await initializePieChart();
         });
 
         return {