Uppdating typescript tuff to allow it t build

frontend/src/vues/ServerStats.vue

@@ -92,31 +92,91 @@
 </style>
 
 <script setup lang="ts">
+import { GameStats, RoleStats } from '../types'
 import { onMounted, watch, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import Chart from 'chart.js/auto'
 import axios from 'axios'
 
+type ChartType = 'gametypes' | 'apps' | 'picks' | 'active'
+
 const route = useRoute()
 const router = useRouter()
 
 const dateSelect = ref(-1)
-
 const dateItems = buildDateItems()
-
-const chartSelect = ref('active')
-
+const chartSelect = ref<ChartType>('active')
 const chartItems = [
   { title: 'Game Types', value: 'gametypes' },
   { title: 'Active Characters', value: 'active' },
   { title: 'Role Picks', value: 'picks' },
   { title: 'Role Applications', value: 'apps' }
 ]
+const gameStats = ref<GameStats>({
+  Complete: 0,
+  Postponed: 0,
+  Pending: 0,
+  Fixes: 0,
+  Events: 0,
+  AverageIP: 0,
+  AverageEB: 0,
+  TotalIP: 0,
+  TotalEB: 0
+})
+const roleStats = ref<RoleStats>({
+  Fixer: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Tech: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Medtech: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Media: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Netrunner: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Solo: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Nomad: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Exec: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Lawman: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  },
+  Rocker: {
+    apps: 0,
+    picks: 0,
+    active: 0
+  }
+})
 
-const gameStats = ref({})
-
-const roleStats = ref({})
-
-let chart
+let chart: Chart<'pie', number[], string>
 
 async function loadData() {
   const gameStatsResponse = await axios.post('/api/serverstats/gamestats', {
@@ -155,7 +215,7 @@ function dateToMonthId(date: Date) {
   return (date.getUTCFullYear() - 2023) * 12 + date.getUTCMonth()
 }
 
-function updateChart(stats, tag) {
+function updateChart(stats: RoleStats, tag: ChartType) {
   if (tag === 'gametypes') {
     chart.data = {
       labels: ['Standard', 'Postponed', 'Pending', 'Event', 'Fix'],
@@ -195,7 +255,7 @@ watch(roleStats, async (newValue, oldValue) => {
   updateChart(newValue, chartSelect.value)
 })
 
-watch(chartSelect, async (newValue, oldValue) => {
+watch(chartSelect, async (newValue: ChartType, oldValue: ChartType) => {
   updateChart(roleStats.value, newValue)
 })
 
@@ -207,7 +267,7 @@ onMounted(async () => {
     dateSelect.value = Number(route.query.monthId)
   }
   loadData()
-  chart = new Chart(document.getElementById('piechart'), {
+  chart = new Chart(document.getElementById('piechart')! as HTMLCanvasElement, {
     type: 'pie',
     data: {
       labels: [],