feat: use kilo notation when displaying the stats

client/src/components/Match/DetailedMatchTeam.vue

@@ -174,19 +174,19 @@
         <td
           class="p-2 text-white text-sm"
           :style="bgColor(player, '146, 100, 79', 'gold')"
-        >{{ player[statsFormat].gold }}</td>
+        >{{ roundStats(player[statsFormat].gold) }}</td>
         <td
           :style="bgColor(player, '156, 71, 109', 'dmgChamp')"
           class="p-2 text-white text-sm"
-        >{{ player[statsFormat].dmgChamp }}</td>
+        >{{ roundStats(player[statsFormat].dmgChamp) }}</td>
         <td
           :style="bgColor(player, '156, 71, 109', 'dmgObj')"
           class="p-2 text-white text-sm text-red"
-        >{{ player[statsFormat].dmgObj }}</td>
+        >{{ roundStats(player[statsFormat].dmgObj) }}</td>
         <td
           :style="bgColor(player, '146, 145, 106', 'dmgTaken')"
           class="p-2 text-white text-sm"
-        >{{ player[statsFormat].dmgTaken }}</td>
+        >{{ roundStats(player[statsFormat].dmgTaken) }}</td>
         <td
           :style="bgColor(player, '71, 132, 116', 'kp')"
           class="p-2 text-white text-sm"
@@ -248,6 +248,9 @@ export default {
     displayBorderbottom(index) {
       return this.allyTeam || index !== this.data.players.length - 1
     },
+    roundStats(value) {
+      return this.percentSettings ? value : this.$options.filters.kilo(value)
+    },
     compareSummonernames,
   }
 }

client/src/components/Match/Match.vue

@@ -81,11 +81,11 @@
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/Gold.svg" alt="Gold" />
-              <div class="ml-1 gold text-sm font-bold">{{ data.stats.gold }}</div>
+              <div class="ml-1 gold text-sm font-bold">{{ data.stats.gold|kilo }}</div>
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/Damage.svg" alt="Damage" />
-              <div class="ml-1 damage text-sm font-bold">{{ data.stats.dmgChamp }}</div>
+              <div class="ml-1 damage text-sm font-bold">{{ data.stats.dmgChamp|kilo }}</div>
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/KillParticipation.svg" alt="KillParticipation" />

client/src/main.js

@@ -14,6 +14,10 @@ Vue.filter('capitalize', (value) => {
   return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase()
 })
 
+Vue.filter('kilo', (value) => {
+  return `${+(value / 1000).toFixed(1)}k`
+})
+
 Vue.filter('secToTime', (sec) => {
   const min = Math.floor(sec / 60)
   const newSec = sec - min * 60