add chart

src/components/PlayerChart.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="playerChart">
+        <Scatter :data="chart" :options="options" />
+    </div>
+</template>
+
+<script lang="ts">
+import {
+  Chart as ChartJS,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Tooltip,
+  Legend
+} from 'chart.js'
+
+import { Scatter } from 'vue-chartjs'
+import { defineComponent } from 'vue'
+
+ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)
+
+export default defineComponent({
+  name: 'PlayerChart',
+  props: {
+    players: Object
+  },
+  components: {
+    Scatter
+  },
+  computed: {
+    chart () {
+      const chartData = {
+        datasets: [
+          {
+            label: 'Players',
+            labels: [] as string[],
+            borderColor: '#f87979',
+            backgroundColor: '#f87979',
+            data: [] as {x:number, y:number}[]
+          }
+        ]
+      }
+      if (!this.$props.players) {
+        return chartData
+      }
+      chartData.datasets[0].labels = Object.keys(this.$props.players)
+      chartData.datasets[0].data = Object.values(this.$props.players).map((e:any) => ({ x: e.deaths, y: e.kills }))
+      return chartData
+    }
+  },
+  /* watch: {
+    players: function (newval: any, oldval: any): void {
+
+    }
+  }, */
+  data () {
+    return {
+      options: {
+        responsive: true,
+        plugins: {
+          tooltip: {
+            callbacks: {
+              label: (ctx:any) => {
+                let label:string
+                if (!this.$props.players) {
+                  label = ctx.dataset.labels[ctx.dataIndex]
+                } else {
+                  label = this.$props.players[ctx.dataset.labels[ctx.dataIndex]].username
+                }
+                label += ' (' + ctx.parsed.y + ' kills ' + ctx.parsed.x + ' deaths)'
+                return label
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+})
+</script>
+
+<style scoped>
+.playerChart {
+  position:sticky;
+  height:fit-content;
+  top:0
+}
+</style>

src/components/PlayerList.vue

@@ -1,86 +1,91 @@
 <template>
   <div class="playerList">
-    <select v-on:change="weaponFilter">
-        <option>global</option>
-        <option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId">{{weaponId}}</option>
-    </select>
     <div class="player">
-      <span>username</span>
-      <span>kills</span>
-      <span>deaths</span>
-      <span>k/d</span>
-      <span>max kill distance</span>
-      <span>average kill distance</span>
+      <span v-on:click="sortPlayerList('username')">username</span>
+      <span v-on:click="sortPlayerList('kills')">kills</span>
+      <span v-on:click="sortPlayerList('deaths')">deaths</span>
+      <span v-on:click="sortPlayerList('k/d')">k/d</span>
+      <span v-on:click="sortPlayerList('max_kill_distance')">max kill distance</span>
+      <span v-on:click="sortPlayerList('avg_kill_distance')">average kill distance</span>
     </div>
-    <div class="player" v-for="(playerData, playerId) in players" v-bind:key="playerId">
-      <span>{{ playerData.username }}</span>
-      <span>{{ playerData.kills }}</span>
-      <span>{{ playerData.deaths }}</span>
-      <span>{{ Math.round(playerData.kills/playerData.deaths*100)/100 }}</span>
-      <span>{{ playerData.max_kill_distance }}</span>
-      <span>{{ Math.round(playerData.avg_kill_distance * 100) / 100}}</span>
+    <div class="player" v-for="playerId in playerIdList" v-bind:key="playerId">
+      <span>{{ $props.players[playerId].username }}</span>
+      <span>{{ players[playerId].kills }}</span>
+      <span>{{ players[playerId].deaths }}</span>
+      <span>{{ Math.round(players[playerId].kills / players[playerId].deaths * 100) / 100 }}</span>
+      <span>{{ players[playerId].max_kill_distance }}</span>
+      <span>{{ Math.round(players[playerId].avg_kill_distance * 100) / 100 }}</span>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component'
+import { defineComponent } from 'vue'
 
-@Options({
+export default defineComponent({
   props: {
-    msg: String
-  }
-})
-export default class HelloWorld extends Vue {
-  msg!: string;
-  players: any = {}
-  weapons: any = {}
-  created () {
-    this.fetchPlayers({})
-    this.fetchWeapons({})
-  }
+    players: Object
+  },
+  data () {
+    return {
+      sortingData: { direction: -1, argument: '' },
+      playerIdList: [] as string[]
+    }
+  },
+  watch: {
+    players: function (newval: any, oldval: any): void {
+      this.playerIdList = []
+      this.sortingData.direction *= -1
+      this.playerIdList = Object.keys(newval)
+      this.sortPlayerList(this.sortingData.argument)
+    }
+  },
+  methods: {
+    sortPlayerList (arg: string) {
+      if (arg === this.sortingData.argument) {
+        this.sortingData.direction *= -1
+      } else {
+        if (arg === 'username') {
+          this.sortingData.direction = 1
+        }
+      }
+      this.sortingData.argument = arg
 
-  async fetchPlayers ({ weapon, server }:{weapon?:string, server?:string}) {
-    const searchParams:Record<string, string> = {}
-    if (weapon) { searchParams.weapon = weapon }
-    if (server) { searchParams.server = server }
+      this.playerIdList.sort((a:any, b:any) => {
+        if (!this.$props.players) {
+          return 0
+        }
+        let varA = this.$props.players[a][arg]
+        let varB = this.$props.players[b][arg]
+        if (arg === 'k/d') {
+          varA = this.$props.players[a].kills / this.$props.players[a].deaths
+          varB = this.$props.players[b].kills / this.$props.players[b].deaths
+        }
 
-    const response = await fetch(
-      'https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams)
-    )
-    const data = await response.json()
-    this.players = data
-  }
-
-  async fetchWeapons ({ server }:{server?:string}) {
-    const searchParams:Record<string, string> = {}
-    if (server) { searchParams.server = server }
-    const response = await fetch(
-      'https://tone.sleepycat.date/v1/client/weapons?' + new URLSearchParams(searchParams)
-    )
-    const data = await response.json()
-    this.weapons = data
-    console.log(data)
-  }
-
-  weaponFilter (e:Event) {
-    const weapon = (e.target as HTMLInputElement).value
-    if (weapon === 'global') {
-      return this.fetchPlayers({ })
+        if (varA < varB) {
+          return -1 * this.sortingData.direction
+        }
+        if (varA > varB) {
+          return 1 * this.sortingData.direction
+        }
+        // names must be equal
+        return 0
+      })
     }
-    this.fetchPlayers({ weapon })
   }
-}
+
+})
 </script>
 
 <style scoped>
 .player {
   display: grid;
-  grid-template-columns: 200px 100px 100px 100px 100px 100px;
+  grid-template-columns: 200px 75px 75px 75px 100px 100px;
   background: lightgray;
   margin: 10px;
   text-align: left;
 }
+
 .player span {
   text-overflow: ellipsis;
   overflow: hidden;

src/views/PlayerView.vue

@@ -1,23 +1,78 @@
 <template>
-  <PlayerList></PlayerList>
+  <select v-on:change="weaponFilter">
+    <option>global</option>
+    <option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId">{{ weaponId }}</option>
+  </select>
+  <div class="playersData">
+
+    <PlayerList :players="players"></PlayerList>
+    <PlayerChart :players="players"></PlayerChart>
+  </div>
 </template>
 
 <script lang="ts">
 import { Options, Vue } from 'vue-class-component'
 import PlayerList from '@/components/PlayerList.vue'
+import PlayerChart from '@/components/PlayerChart.vue'
 
 @Options({
   components: {
-    PlayerList
+    PlayerList, PlayerChart
   }
 })
 export default class PlayerView extends Vue {
-  mounted = function () {
-    console.log('q')
-  };
+  players: any = {}
+  weapons: any = {}
+  created () {
+    this.fetchPlayers({})
+    this.fetchWeapons({})
+  }
+
+  async fetchWeapons ({ server }: { server?: string }) {
+    const searchParams: Record<string, string> = {}
+    if (server) { searchParams.server = server }
+    const response = await fetch(
+      'https://tone.sleepycat.date/v1/client/weapons?' + new URLSearchParams(searchParams)
+    )
+    const data = await response.json()
+    this.weapons = data
+  }
 
   data () {
     return { a: 1 }
   }
+
+  weaponFilter (e: Event) {
+    const weapon = (e.target as HTMLInputElement).value
+    if (weapon === 'global') {
+      return this.fetchPlayers({})
+    }
+    this.fetchPlayers({ weapon })
+  }
+
+  async fetchPlayers ({ weapon, server }: { weapon?: string, server?: string }) {
+    const searchParams: Record<string, string> = {}
+    if (weapon) { searchParams.weapon = weapon }
+    if (server) { searchParams.server = server }
+
+    const response = await fetch(
+      'https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams)
+    )
+    const data = await response.json()
+    Object.keys(data).forEach(e => {
+      data[e].kills = Number(data[e].kills)
+      data[e].deaths = Number(data[e].deaths)
+      data[e].max_kill_distance = Number(data[e].max_kill_distance)
+      data[e].avg_kill_distance = Number(data[e].avg_kill_distance)
+    })
+    this.players = data
+  }
 }
 </script>
+
+<style scoped>
+.playersData {
+  display: grid;
+  grid-template-columns: 50% 50%;
+}
+</style>