add gamemode filter and multiselection

.editorconfig

@@ -3,3 +3,9 @@ indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true
 insert_final_newline = true
+
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -1,21 +1,30 @@
 module.exports = {
   root: true,
+
   env: {
     node: true
   },
+
   extends: [
     'plugin:vue/vue3-essential',
     '@vue/standard',
     '@vue/typescript/recommended'
   ],
+
   parserOptions: {
     ecmaVersion: 2020
   },
+
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     '@typescript-eslint/indent': ['error', 2],
     camelcase: 0
-  }
+  },
 
+  extends: [
+    'plugin:vue/vue3-essential',
+    '@vue/standard',
+    '@vue/typescript/recommended'
+  ]
 }

src/components/GamemodeChart.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="gamemodeChart" ref="container">
+    <LoadingBar v-if="progress !== 1" :value="progress"></LoadingBar>
+    <Doughnut :data="chart" :options="chartOptions" v-if="progress === 1" />
+  </div>
+</template>
+
+<script lang="ts">
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, ChartData, ChartOptions } from 'chart.js'
+import dataLabel from 'chartjs-plugin-datalabels'
+import { Weapon, Filter, useKillStore } from '@/stores/kill'
+import { Doughnut } from 'vue-chartjs'
+import { defineComponent, PropType, Ref, unref } from 'vue'
+import gamemodes from '../stores/gamemodes.json'
+
+import LoadingBar from './LoadingBar.vue'
+
+ChartJS.register(ArcElement, Tooltip, Legend, dataLabel)
+
+export default defineComponent({
+  name: 'GamemodeChart',
+  props: {
+    filters: Object as PropType<Filter>,
+    playerHighlighted: String
+  },
+  emits: ['highlightPlayer'],
+  components: {
+    Doughnut, LoadingBar
+  },
+  mounted () {
+    this.refreshColors++
+  },
+  data: () => {
+    return {
+      store: useKillStore(),
+      refreshColors: 0
+    }
+  },
+  computed: {
+    progress () {
+      const filter = new Filter(this.filters)
+      delete filter.gamemode
+      const data = this.store.getList('gamemodes', filter)?.value
+      if (!data) return this.store.fetch('gamemodes', filter).value.progress.value
+      return data.progress.value
+    },
+    colors () {
+      // eslint-disable-next-line no-unused-expressions
+      this.refreshColors
+      const colors = {} as { [key: string]: string }
+      if (this.$refs.container) {
+        const style = getComputedStyle(this.$refs.container as Element)
+        colors.fg = style.getPropertyValue('--foreground')
+        colors.bg = style.getPropertyValue('--bg-color')
+        colors.orange = style.getPropertyValue('--orange')
+        colors.cyan = style.getPropertyValue('--cyan')
+        colors.yellow = style.getPropertyValue('--yellow')
+        colors.green = style.getPropertyValue('--green')
+        colors.purple = style.getPropertyValue('--purple')
+        colors.red = style.getPropertyValue('--red')
+        colors.pink = style.getPropertyValue('--pink')
+        colors.currentLine = style.getPropertyValue('--current-line')
+      } else {
+        colors.fg = '#ffffff'
+      }
+      return colors
+    },
+    chart (): ChartData<'doughnut', number[]> {
+      const colors = [
+        'cyan',
+        'green',
+        'orange',
+        'pink',
+        'purple',
+        'red',
+        'yellow'
+      ]
+      const chartData: ChartData<'doughnut', number[]> = {
+        datasets: [
+          {
+            label: 'Weapons',
+            borderColor: () => this.colors.fg,
+            backgroundColor: (context) => {
+              return this.colors[
+                colors[(context.dataIndex * 3) % colors.length]
+              ]
+            },
+            data: [] as number[]
+          }
+        ]
+      }
+      if (!this.sortedList) {
+        return chartData
+      }
+      chartData.datasets[0].data = this.sortedList.map((e) => {
+        if (!this.values) {
+          return 0
+        }
+        return this.values[e].value.kills
+      })
+      return chartData
+    },
+    chartOptions (): ChartOptions<'doughnut'> {
+      // eslint-disable-next-line no-unused-expressions
+      this.$props.playerHighlighted
+      const options: ChartOptions<'doughnut'> = {
+        responsive: true,
+        maintainAspectRatio: true,
+        animation: { duration: 500 },
+        layout: { autoPadding: false },
+        plugins: {
+          datalabels: {
+            formatter: (value, context) => {
+              const weaponId = this.sortedList[context.dataIndex]
+              // if (!(weapons as {[key:string]:string})[weaponId]) console.log(weaponId)
+              return (gamemodes as { [key: string]: string })[weaponId] || weaponId
+            },
+            backgroundColor: (context) => {
+              return context.dataset.backgroundColor(context, options)
+            },
+            borderColor: this.colors.fg,
+            borderRadius: 25,
+            borderWidth: 2,
+            color: this.colors.bg,
+            display: (context) => {
+              return context.dataIndex === context.dataset.data.length - 1
+                ? true
+                : 'auto'
+            },
+            padding: 6
+          },
+          tooltip: {
+            callbacks: {
+              label: (ctx: any) => {
+                let label: string
+                if (!this.sortedList) {
+                  label = ctx.dataset.labels[ctx.dataIndex]
+                } else {
+                  label = this.sortedList[ctx.dataIndex]
+                }
+                label += ' (' + this.values[label].value.kills + ' kills)'
+                return label
+              }
+            }
+          }
+        }
+      }
+      return options
+    },
+    values (): { [key: string]: Ref<Weapon> } {
+      const filter = new Filter({ ...this.filters, player: this.playerHighlighted })
+      delete filter.gamemode
+      const data = this.store.getList('gamemodes', filter)?.value.data
+      if (!data) return this.store.fetch('gamemodes', filter).value.data
+      return data
+    },
+    sortedList (): string[] {
+      if (!this.values) return []
+      const weapons = Object.keys(this.values).filter(e => unref(this.values[e]).kills > 0)
+      weapons.sort((a, b) => {
+        if (Number(this.values[a].value.kills) < Number(unref(this.values[b]).kills)) {
+          return -1
+        }
+        if (Number(this.values[a].value.kills) > Number(unref(this.values[b]).kills)) {
+          return 1
+        }
+        return 0
+      })
+      return weapons
+    }
+  }
+})
+</script>
+
+<style scoped>
+.weaponChart {
+  width: calc(min(50vw, 50vh) - 3em);
+  height: calc(min(50vw, 50vh) - 3em);
+}
+
+@media only screen and (max-width: 922px) {
+  canvas {
+    display: none !important;
+  }
+}
+</style>

src/components/List/VirtualList.vue

@@ -66,11 +66,11 @@ export default defineComponent({
       } else if (mustScrollDown) {
         this.vIndex = Math.min(scrollIndex, this.list.length - this.toLoad)
       }
-      if (mustScrollDown || mustScrollUp) {
+      // if (mustScrollDown || mustScrollUp) {
-        const msg = (mustScrollDown ? 'down ' : '') + (mustScrollUp ? 'up ' : '')
+      // const msg = (mustScrollDown ? 'down ' : '') + (mustScrollUp ? 'up ' : '')
       // console.log(this.toLoad)
       // console.log((this.list.length * this.$props.rowHeight) - (this.vIndex * this.$props.rowHeight) - (this.visibleCount * this.$props.rowHeight))
-      }
+      // }
     }
   }
 

src/components/PlayerChart.vue

@@ -22,7 +22,7 @@ import dataLabel from 'chartjs-plugin-datalabels'
 import { useKillStore, Player, Filter } from '@/stores/kill'
 
 import { Scatter } from 'vue-chartjs'
-import { defineComponent, PropType, Ref, toRaw, triggerRef, unref } from 'vue'
+import { defineComponent, PropType, toRaw, unref } from 'vue'
 import { ChartEvent } from 'chart.js/dist/core/core.plugins'
 import { _DeepPartialObject } from 'chart.js/dist/types/utils'
 
@@ -55,7 +55,7 @@ export default defineComponent({
       if (this.filters) {
         const filter = new Filter(this.filters)
         delete filter.player
-        return this.store.getList('players', filter)?.value.progress
+        return this.store.getList('players', filter)?.value.progress.value
       }
       return 0
     },

src/components/PlayerList.vue

@@ -32,7 +32,6 @@ import { defineComponent, PropType, Ref, isRef } from 'vue'
 import { useKillStore, Player, Filter } from '@/stores/kill'
 import VirtualList from './List/VirtualList.vue'
 import LoadingBar from './LoadingBar.vue'
-import { cloneProxy } from 'vue-chartjs/dist/utils'
 
 export default defineComponent({
   components: { VirtualList, LoadingBar },
@@ -51,14 +50,13 @@ export default defineComponent({
     progress () {
       const filter = new Filter(this.filters)
       delete filter.player
-      return this.store.getList('players', filter)?.value.progress
+      return this.store.getList('players', filter)?.value.progress.value
     },
     players (): { [key: string]: Ref<Player> } {
       const filter = new Filter(this.filters)
       delete filter.player
       const data = this.store.getList('players', filter)?.value.data
       if (!data) return this.store.fetch('players', filter).value.data
-      console.log(isRef(data), isRef(Object.values(data)[0]))
       return data
     },
     playerList (): (Ref<Player> & { id: string })[] {
@@ -149,7 +147,6 @@ export default defineComponent({
 }
 
 .playerTable {
-  grid-area: list;
   margin-right: 1rem;
   height: 100%;
   user-select: none;

src/components/WeaponChart.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="weaponChart" ref="container">
     <LoadingBar v-if="progress !== 1" :value="progress"></LoadingBar>
-    <Doughnut :data="chart" :options="chartOptions" v-if="progress === 1"/>
+    <Doughnut :data="chart" :options="chartOptions" v-if="progress === 1" />
   </div>
 </template>
 
 <script lang="ts">
-import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend, ChartData, ChartOptions } from 'chart.js'
 import dataLabel from 'chartjs-plugin-datalabels'
 import { Weapon, Filter, useKillStore } from '@/stores/kill'
 import { Doughnut } from 'vue-chartjs'
@@ -41,8 +41,8 @@ export default defineComponent({
       const filter = new Filter(this.filters)
       delete filter.weapon
       const data = this.store.getList('weapons', filter)?.value
-      if (!data) return this.store.fetch('weapons', filter).value.progress
+      if (!data) return this.store.fetch('weapons', filter).value.progress.value
-      return data.progress
+      return data.progress.value
     },
     colors () {
       // eslint-disable-next-line no-unused-expressions
@@ -65,7 +65,7 @@ export default defineComponent({
       }
       return colors
     },
-    chart () {
+    chart (): ChartData<'doughnut', number[]> {
       const colors = [
         'cyan',
         'green',
@@ -75,13 +75,12 @@ export default defineComponent({
         'red',
         'yellow'
       ]
-      const chartData = {
+      const chartData: ChartData<'doughnut', number[]> = {
         datasets: [
           {
             label: 'Weapons',
-            labels: this.sortedWeaponList || ([] as string[]),
             borderColor: () => this.colors.fg,
-            backgroundColor: (context: any) => {
+            backgroundColor: (context) => {
               return this.colors[
                 colors[(context.dataIndex * 3) % colors.length]
               ]
@@ -101,30 +100,30 @@ export default defineComponent({
       })
       return chartData
     },
-    chartOptions () {
+    chartOptions (): ChartOptions<'doughnut'> {
       // eslint-disable-next-line no-unused-expressions
       this.$props.playerHighlighted
-      const options = {
+      const options: ChartOptions<'doughnut'> = {
         responsive: true,
         maintainAspectRatio: true,
         animation: { duration: 500 },
         layout: { autoPadding: false },
         plugins: {
           datalabels: {
-            formatter: (value: any, context: any) => {
+            formatter: (value, context) => {
               const weaponId = this.sortedWeaponList[context.dataIndex]
               // if (!(weapons as {[key:string]:string})[weaponId]) console.log(weaponId)
-              return (weapons as {[key:string]:string})[weaponId] || weaponId
+              return (weapons as { [key: string]: string })[weaponId] || weaponId
             },
-            backgroundColor: (context: any) => {
+            backgroundColor: (context) => {
-              return context.dataset.backgroundColor(context)
+              return context.dataset.backgroundColor(context, options)
             },
             borderColor: this.colors.fg,
             borderRadius: 25,
             borderWidth: 2,
             color: this.colors.bg,
-            display: (context: any) => {
+            display: (context) => {
-              return context.dataIndex === context.dataset.labels.length - 1
+              return context.dataIndex === context.dataset.data.length - 1
                 ? true
                 : 'auto'
             },
@@ -153,7 +152,6 @@ export default defineComponent({
       delete filter.weapon
       const data = this.store.getList('weapons', filter)?.value.data
       if (!data) return this.store.fetch('weapons', filter).value.data
-      console.log(filter.toURLSearchParams().toString(), filter)
       return data
     },
     sortedWeaponList (): string[] {

src/main.ts

@@ -52,8 +52,8 @@ socket.onmessage = function (e) {
 }
 
 function registerWebSocketKill (data : websocketData) {
-  const { player: _, ...filterWithoutPlayer } = store.$state.currentFilter
+  const filter = new Filter(store.$state.currentFilter)
-  const filter = new Filter(filterWithoutPlayer)
+  delete filter.player
   const list = unref(store.getList('players', filter))
   if (!list) return
   if (!(!filter.server || filter.server.includes(data.servername))) return

src/stores/gamemodes.json

@@ -0,0 +1,19 @@
+{
+  "private_match": "Private Match",
+  "aitdm": "Attrition",
+  "at": "Bounty Hunt",
+  "coliseum": "Coliseum",
+  "cp": "Amped Hardpoint",
+  "ctf": "Capture the Flag",
+  "fw": "Frontier War",
+  "lts": "Last Titan Standing",
+  "mfd": "Marked For Death",
+  "ps": "Pilots vs. Pilots",
+  "solo": "Campaign",
+  "tdm": "Skirmish",
+  "ttdm": "Titan Brawl",
+  "sns": "Stick and Stones",
+  "gg": "GunGame",
+  "fd": "Frontier Defense",
+  "ffa": "Free For All"
+}

src/stores/kill.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { Ref, ref, shallowRef, triggerRef, unref, isRef } from 'vue'
+import { Ref, ref, shallowRef, triggerRef, unref } from 'vue'
 
 export class Filter {
   constructor (filt?:{server?:string[], player?: string, weapon?: string[], host?: string[], map?: string[], gamemode?: string[]}) {
@@ -53,7 +53,10 @@ function fetchWithLoading (url: string, progress: (percentage: number) => void)
       return new Response(
         new ReadableStream({
           start (controller) {
-            const reader = response.body!.getReader()
+            if (response.body === null) {
+              throw new Error('response.body is null')
+            }
+            const reader = response.body.getReader()
 
             read()
             function read () {
@@ -109,7 +112,7 @@ export interface Server extends Kill {
 
 export interface KillData<T extends Kill> {
   data: { [key: string]: Ref<T> };
-  progress?: number;
+  progress: Ref<number>;
 }
 
 export interface NSServer {
@@ -173,7 +176,7 @@ export const useKillStore = defineStore('kill', {
     fetch <T extends StateProperty> (type:T, filter?:Filter): Ref<KillData<StateType<T>>> {
       let entry = this.getList(type, filter)
       if (entry === undefined) {
-        entry = shallowRef<KillData<StateType<T>>>({ data: {} })
+        entry = shallowRef<KillData<StateType<T>>>({ data: {}, progress: ref(0) })
         unref(this.$state.killData[type as keyof typeof this.$state.killData] as Map<string, Ref<KillData<StateType<T>>>>).set(filter?.toURLSearchParams().toString() ?? '', entry)
         // console.log(isRef(entry), this.$state.killData)
       }
@@ -181,9 +184,9 @@ export const useKillStore = defineStore('kill', {
         `https://tone.sleepycat.date/v2/client/${type}?` +
             filter?.toURLSearchParams() ?? '',
         (progress) => {
-          if (entry && progress !== 1) {
+          if (entry && progress !== 1 && unref(entry).progress.value !== 1) {
-            unref(entry).progress = progress
+            unref(entry).progress.value = progress
-            triggerRef(entry)
+            triggerRef(unref(entry).progress)
           }
         }
       ).then(async (response) => {
@@ -194,7 +197,7 @@ export const useKillStore = defineStore('kill', {
               ref(e[1]) as Ref<StateType<T>>
             ])
           )
-          unref(entry).progress = 1
+          unref(entry).progress.value = 1
 
           triggerRef(entry)
         }

src/views/PlayerView.vue

@@ -1,6 +1,12 @@
 <template>
   <div id="filters">
     <span class="multiselect-wrapper">
+
+      <!-- group-values="servers"
+        group-label="id"
+        label="name"
+        :group-select="true"
+        :options="groupedServers" -->
       <VueMultiselect
         selectLabel=""
         deselectLabel="remove"
@@ -21,6 +27,7 @@
         deselectLabel="remove"
         placeholder="Select gamemode"
         v-model="model.gamemode"
+        :custom-label="((e: any) => gamemodeLocale[e] || e)"
         :options="sortedGamemodeList"
         :allow-empty="true"
         :close-on-select="false"
@@ -43,7 +50,7 @@
       </VueMultiselect>
       <button @click="model.weapon = undefined" :disabled="!model.weapon">X</button>
     </span>
-
+    <button @click="applyFilters" :disabled="filters.server == model.server && filters.gamemode == model.gamemode && filters.weapon == model.weapon">Apply Filters</button>
     <span class="multiselect-wrapper">
       <VueMultiselect
         :options-limit="20"
@@ -57,7 +64,6 @@
       ></VueMultiselect>
       <button @click="playerHighlighted = undefined" :disabled="!playerHighlighted">X</button>
     </span>
-    <button @click="applyFilters" :disabled="filters.server == model.server && filters.gamemode == model.gamemode && filters.weapon == model.weapon">Apply Filters</button>
   </div>
 
   <div id="playerView">
@@ -79,6 +85,10 @@
       :playerHighlighted="playerHighlighted?.id"
     >
     </WeaponChart>
+    <GamemodeChart
+      :filters="{ player: playerHighlighted?.id, ...filters }"
+      :playerHighlighted="playerHighlighted?.id"
+    ></GamemodeChart>
   </div>
 </template>
 
@@ -87,24 +97,31 @@ import { Player, Weapon, Server, Kill, useKillStore, Filter } from '@/stores/kil
 import PlayerList from '@/components/PlayerList.vue'
 import PlayerChart from '@/components/PlayerChart.vue'
 import WeaponChart from '@/components/WeaponChart.vue'
+import GamemodeChart from '@/components/GamemodeChart.vue'
 import { Ref, defineComponent, unref } from 'vue'
 import VueMultiselect from 'vue-multiselect'
 import 'vue-multiselect/dist/vue-multiselect.css'
 import weapons from '../stores/weapons.json'
+import gamemodes from '../stores/gamemodes.json'
 import router from '@/router'
 
+function filterOutNull<T> (value:T | null):value is T {
+  return value !== null
+}
+
 export default defineComponent({
   name: 'PlayerView',
   components: {
     VueMultiselect,
     PlayerList,
     PlayerChart,
-    WeaponChart
+    WeaponChart,
+    GamemodeChart
   },
 
   data () {
     return {
-      model: { server: undefined, weapon: undefined } as unknown as {
+      model: { } as unknown as {
         weapon: string[] | undefined;
         server: string[] | undefined;
         gamemode: string[] | undefined;
@@ -112,7 +129,8 @@ export default defineComponent({
       filters: new Filter(),
       store: useKillStore(),
       playerHighlighted: undefined as (Player & { id: string }) | undefined,
-      weaponLocale: weapons as { [key: string]: string }
+      weaponLocale: weapons as { [key: string]: string },
+      gamemodeLocale: gamemodes as { [key: string]: string }
     }
   },
   beforeCreate () {
@@ -128,10 +146,8 @@ export default defineComponent({
   },
   computed: {
     servers (): { [key: string]: Ref<Server> } {
-      const filter = new Filter(this.filters)
+      const data = this.store.getList('servers')?.value.data
-      delete filter.server
+      if (!data) return unref(this.store.fetch('servers')).data
-      const data = this.store.getList('servers', filter)?.value.data
-      if (!data) return unref(this.store.fetch('servers', filter)).data
       return data
     },
     groupedServers () {
@@ -149,11 +165,11 @@ export default defineComponent({
       return hosts
     },
     weapons (): { [key: string]: Ref<Weapon> } {
-      const filter = new Filter(this.filters)
+      // const filter = new Filter(this.filters)
-      delete filter.weapon
+      // delete filter.weapon
-      delete filter.player
+      // delete filter.player
-      const data = this.store.getList('weapons', filter)?.value.data
+      const data = this.store.getList('weapons')?.value.data
-      if (!data) return this.store.fetch('weapons', filter).value.data
+      if (!data) return this.store.fetch('weapons').value.data
       return data
     },
     players (): { [key: string]: Ref<Player> } {
@@ -164,11 +180,11 @@ export default defineComponent({
       return data
     },
     gamemodes (): { [key: string]: Ref<Kill> } {
-      const filter = new Filter(this.filters)
+      // const filter = new Filter(this.filters)
-      delete filter.gamemode
+      // delete filter.gamemode
-      delete filter.player
+      // delete filter.player
-      const data = this.store.getList('gamemodes', filter)?.value.data
+      const data = this.store.getList('gamemodes')?.value.data
-      if (!data) return this.store.fetch('gamemodes', filter).value.data
+      if (!data) return this.store.fetch('gamemodes').value.data
       return data
     },
     sortedWeaponList (): string[] {
@@ -204,6 +220,14 @@ export default defineComponent({
     }
   },
   watch: {
+    model: {
+      handler () {
+        if (this.model.gamemode?.length === 0) this.model.gamemode = undefined
+        if (this.model.server?.length === 0) this.model.server = undefined
+        if (this.model.weapon?.length === 0) this.model.weapon = undefined
+      },
+      deep: true
+    },
     players () {
       const player = this.$route.query.player?.toString()
       if (player && this.playerHighlighted?.id !== player) {
@@ -255,22 +279,24 @@ export default defineComponent({
         }
       }
       if (this.filters.weapon !== this.$route.query.weapon) {
-        this.model.weapon = [this.$route.query.weapon].flat().filter(e => e ?? false).map(e => e!.toString())
+        if (this.$route.query.weapon) this.model.weapon = [this.$route.query.weapon].flat().filter(filterOutNull).map(e => e.toString())
+        else this.model.weapon = undefined
       }
       if (this.filters.server !== this.$route.query.server) {
-        if (this.$route.query.server) this.model.server = [this.$route.query.server].flat().filter(e => e ?? false).map(e => e!.toString())
+        if (this.$route.query.server) this.model.server = [this.$route.query.server].flat().filter(filterOutNull).map(e => e.toString())
         else this.model.server = undefined
       }
       if (this.filters.gamemode !== this.$route.query.gamemode) {
-        if (this.$route.query.gamemode) this.model.gamemode = [this.$route.query.gamemode].flat().filter(e => e ?? false).map(e => e!.toString())
+        if (this.$route.query.gamemode) this.model.gamemode = [this.$route.query.gamemode].flat().filter(filterOutNull).map(e => e.toString())
         else this.model.gamemode = undefined
       }
+      this.applyFilters()
     }
   }
 })
 </script>
 
-<style scoped>
+<style>
 .multiselect {
   margin: 0 0.5em 1em 0.5em;
 }
@@ -290,9 +316,9 @@ export default defineComponent({
   display: grid;
   overflow: auto;
   grid-template-areas:
-    "list chart"
+    "list chart chart"
-    "list info";
+    "list info1 info2";
-  grid-template-columns: 50% 50%;
+  grid-template-columns: 50% 25% 25%;
   grid-template-rows: 50% 50%;
 }
 
@@ -319,13 +345,36 @@ export default defineComponent({
 
   .playerChart {
     display: none;
+    grid-area: "chart";
   }
 
   .weaponChart {
     display: none;
+    grid-area: 'info1';
+  }
+  .gamemodeChart{
+    display:none;
+    grid-area: 'info2';
+  }
+  .playerTable{
+    grid-area: 'list';
   }
 }
 
+.playerChart {
+    grid-area: chart;
+  }
+
+  .weaponChart {
+    grid-area: info1;
+  }
+  .gamemodeChart{
+    grid-area: info2;
+  }
+  .playerTable{
+    grid-area: list;
+  }
+
 #filters {
   grid-area: filters;
 }

tsconfig.json

@@ -5,6 +5,7 @@
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",
+    "noImplicitAny": false,
     "moduleResolution": "node",
     "experimentalDecorators": true,
     "skipLibCheck": true,