add server filter and KD Line

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "chart.js": "^4.2.1",
+        "chartjs-plugin-annotation": "^2.2.1",
         "core-js": "^3.8.3",
         "vue": "^3.2.13",
         "vue-chartjs": "^5.2.0",
@@ -4376,6 +4377,14 @@
         "pnpm": "^7.0.0"
       }
     },
+    "node_modules/chartjs-plugin-annotation": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-annotation/-/chartjs-plugin-annotation-2.2.1.tgz",
+      "integrity": "sha512-RL9UtrFr2SXd7C47zD0MZqn6ZLgrcRt3ySC6cYal2amBdANcYB1QcwFXcpKWAYnO4SGJYRok7P5rKDDNgJMA/w==",
+      "peerDependencies": {
+        "chart.js": ">=3.7.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "chart.js": "^4.2.1",
+    "chartjs-plugin-annotation": "^2.2.1",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
     "vue-chartjs": "^5.2.0",

src/components/PlayerChart.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="playerChart">
-        <Scatter :data="chart" :options="options" />
+        <Scatter :data="chart" :options="chartOptions" />
     </div>
 </template>
 
@@ -13,11 +13,12 @@ import {
   Tooltip,
   Legend
 } from 'chart.js'
+import annotationPlugin from 'chartjs-plugin-annotation'
 
 import { Scatter } from 'vue-chartjs'
 import { defineComponent } from 'vue'
 
-ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend)
+ChartJS.register(LinearScale, PointElement, LineElement, Tooltip, Legend, annotationPlugin)
 
 export default defineComponent({
   name: 'PlayerChart',
@@ -46,16 +47,9 @@ export default defineComponent({
       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: {
+    },
+    chartOptions () {
+      const options = {
         responsive: true,
         plugins: {
           tooltip: {
@@ -71,9 +65,48 @@ export default defineComponent({
                 return label
               }
             }
+          },
+          annotation: {}
+        }
+      }
+      if (!this.$props.players) {
+        return options
+      }
+      const maxX = Math.max(...Object.values(this.$props.players).map(e => e.deaths))
+      const maxY = Math.max(...Object.values(this.$props.players).map(e => e.kills))
+      let endX, endY
+      if (maxY > maxX) {
+        endX = maxX
+        endY = (maxX / maxY) * maxY
+      } else {
+        endY = maxY
+        endX = (maxY / maxX) * maxX
+      }
+      options.plugins.annotation = {
+        annotations: {
+          line: {
+            type: 'line',
+            yMin: 0,
+            xMin: 0,
+            yMax: endY,
+            xMax: endX,
+            borderWidth: 2,
+            borderColor: 'black',
+            borderDash: [1, 5]
           }
         }
       }
+      return options
+    }
+  },
+  /* watch: {
+    players: function (newval: any, oldval: any): void {
+
+    }
+  }, */
+  data () {
+    return {
+
     }
   }
 })

src/views/PlayerView.vue

@@ -1,7 +1,11 @@
 <template>
-  <select v-on:change="weaponFilter">
-    <option>global</option>
-    <option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId">{{ weaponId }}</option>
+  <select v-model="filters.server" v-on:change="fetchPlayers(filters)">
+    <option></option>
+    <option v-for="(serverData, serverId) in servers" v-bind:key="serverId" :value="serverId">{{ serverData.name }}</option>
+  </select>
+  <select v-model="filters.weapon" v-on:change="fetchPlayers(filters)">
+    <option></option>
+    <option v-for="(weaponData, weaponId) in weapons" v-bind:key="weaponId" :value="weaponId">{{ weaponId }}</option>
   </select>
   <div class="playersData">
 
@@ -23,9 +27,12 @@ import PlayerChart from '@/components/PlayerChart.vue'
 export default class PlayerView extends Vue {
   players: any = {}
   weapons: any = {}
+  servers: any = {}
+  filters: any = {}
   created () {
     this.fetchPlayers({})
     this.fetchWeapons({})
+    this.fetchServers()
   }
 
   async fetchWeapons ({ server }: { server?: string }) {
@@ -38,23 +45,25 @@ export default class PlayerView extends Vue {
     this.weapons = data
   }
 
+  async fetchServers () {
+    const response = await fetch(
+      'https://tone.sleepycat.date/v1/client/servers'
+    )
+    const data = await response.json()
+    this.servers = data
+    console.log(this.servers)
+  }
+
   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 }
-
+    if (weapon?.toString()) { searchParams.weapon = weapon }
+    if (server?.toString()) { searchParams.server = server }
+    console.log(server, weapon)
+    console.log('https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams))
     const response = await fetch(
       'https://tone.sleepycat.date/v1/client/players?' + new URLSearchParams(searchParams)
     )