feat: add all champions stats

client/src/components/SVGContainer.vue

@@ -1,10 +1,12 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" class="hidden">
+    <symbol id="caret-down" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z" /></symbol>
+    <symbol id="caret-up" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z"></path></symbol>
     <symbol id="layers" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></symbol>
     <symbol id="people" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /> <circle cx="9" cy="7" r="4" /> <path d="M23 21v-2a4 4 0 0 0-3-3.87" /> <path d="M16 3.13a4 4 0 0 1 0 7.75" /> </symbol>
     <symbol id="graph" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="20" x2="18" y2="10" /> <line x1="12" y1="20" x2="12" y2="4" /> <line x1="6" y1="20" x2="6" y2="14" /> </symbol>
     <symbol id="info" class="stroke-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></symbol>
-    <symbol id="award" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M97.12 362.63c-8.69-8.69-4.16-6.24-25.12-11.85-9.51-2.55-17.87-7.45-25.43-13.32L1.2 448.7c-4.39 10.77 3.81 22.47 15.43 22.03l52.69-2.01L105.56 507c8 8.44 22.04 5.81 26.43-4.96l52.05-127.62c-10.84 6.04-22.87 9.58-35.31 9.58-19.5 0-37.82-7.59-51.61-21.37zM382.8 448.7l-45.37-111.24c-7.56 5.88-15.92 10.77-25.43 13.32-21.07 5.64-16.45 3.18-25.12 11.85-13.79 13.78-32.12 21.37-51.62 21.37-12.44 0-24.47-3.55-35.31-9.58L252 502.04c4.39 10.77 18.44 13.4 26.43 4.96l36.25-38.28 52.69 2.01c11.62.44 19.82-11.27 15.43-22.03zM263 340c15.28-15.55 17.03-14.21 38.79-20.14 13.89-3.79 24.75-14.84 28.47-28.98 7.48-28.4 5.54-24.97 25.95-45.75 10.17-10.35 14.14-25.44 10.42-39.58-7.47-28.38-7.48-24.42 0-52.83 3.72-14.14-.25-29.23-10.42-39.58-20.41-20.78-18.47-17.36-25.95-45.75-3.72-14.14-14.58-25.19-28.47-28.98-27.88-7.61-24.52-5.62-44.95-26.41-10.17-10.35-25-14.4-38.89-10.61-27.87 7.6-23.98 7.61-51.9 0-13.89-3.79-28.72.25-38.89 10.61-20.41 20.78-17.05 18.8-44.94 26.41-13.89 3.79-24.75 14.84-28.47 28.98-7.47 28.39-5.54 24.97-25.95 45.75-10.17 10.35-14.15 25.44-10.42 39.58 7.47 28.36 7.48 24.4 0 52.82-3.72 14.14.25 29.23 10.42 39.59 20.41 20.78 18.47 17.35 25.95 45.75 3.72 14.14 14.58 25.19 28.47 28.98C104.6 325.96 106.27 325 121 340c13.23 13.47 33.84 15.88 49.74 5.82a39.676 39.676 0 0 1 42.53 0c15.89 10.06 36.5 7.65 49.73-5.82zM97.66 175.96c0-53.03 42.24-96.02 94.34-96.02s94.34 42.99 94.34 96.02-42.24 96.02-94.34 96.02-94.34-42.99-94.34-96.02z"></path></symbol>
+    <symbol id="award" class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M97.12 362.63c-8.69-8.69-4.16-6.24-25.12-11.85-9.51-2.55-17.87-7.45-25.43-13.32L1.2 448.7c-4.39 10.77 3.81 22.47 15.43 22.03l52.69-2.01L105.56 507c8 8.44 22.04 5.81 26.43-4.96l52.05-127.62c-10.84 6.04-22.87 9.58-35.31 9.58-19.5 0-37.82-7.59-51.61-21.37zM382.8 448.7l-45.37-111.24c-7.56 5.88-15.92 10.77-25.43 13.32-21.07 5.64-16.45 3.18-25.12 11.85-13.79 13.78-32.12 21.37-51.62 21.37-12.44 0-24.47-3.55-35.31-9.58L252 502.04c4.39 10.77 18.44 13.4 26.43 4.96l36.25-38.28 52.69 2.01c11.62.44 19.82-11.27 15.43-22.03zM263 340c15.28-15.55 17.03-14.21 38.79-20.14 13.89-3.79 24.75-14.84 28.47-28.98 7.48-28.4 5.54-24.97 25.95-45.75 10.17-10.35 14.14-25.44 10.42-39.58-7.47-28.38-7.48-24.42 0-52.83 3.72-14.14-.25-29.23-10.42-39.58-20.41-20.78-18.47-17.36-25.95-45.75-3.72-14.14-14.58-25.19-28.47-28.98-27.88-7.61-24.52-5.62-44.95-26.41-10.17-10.35-25-14.4-38.89-10.61-27.87 7.6-23.98 7.61-51.9 0-13.89-3.79-28.72.25-38.89 10.61-20.41 20.78-17.05 18.8-44.94 26.41-13.89 3.79-24.75 14.84-28.47 28.98-7.47 28.39-5.54 24.97-25.95 45.75-10.17 10.35-14.15 25.44-10.42 39.58 7.47 28.36 7.48 24.4 0 52.82-3.72 14.14.25 29.23 10.42 39.59 20.41 20.78 18.47 17.35 25.95 45.75 3.72 14.14 14.58 25.19 28.47 28.98C104.6 325.96 106.27 325 121 340c13.23 13.47 33.84 15.88 49.74 5.82a39.676 39.676 0 0 1 42.53 0c15.89 10.06 36.5 7.65 49.73-5.82zM97.66 175.96c0-53.03 42.24-96.02 94.34-96.02s94.34 42.99 94.34 96.02-42.24 96.02-94.34 96.02-94.34-42.99-94.34-96.02z"></path></symbol>
     <symbol id="gold" class="fill-current" viewBox="0 0 15 15" fill="fill-current"><title>gold</title><path d="M14 5.63324C14 3.57057 11.7157 1.8999 8.89286 1.8999C6.07 1.8999 3.78571 3.57057 3.78571 5.63324C3.7765 5.76685 3.7765 5.90095 3.78571 6.03457C2.12357 6.65057 1 7.90124 1 9.36657C1 11.4292 3.28429 13.0999 6.10714 13.0999C8.93 13.0999 11.2143 11.4292 11.2143 9.36657C11.2235 9.23295 11.2235 9.09885 11.2143 8.96524C12.8486 8.34924 14 7.08924 14 5.63324ZM6.10714 11.3172C4.315 11.3172 2.85714 10.2999 2.85714 8.94657C2.90787 8.55215 3.06303 8.17865 3.3064 7.86507C3.54978 7.55149 3.87244 7.30934 4.24071 7.1639C4.77538 7.8881 5.47991 8.46817 6.29158 8.85247C7.10324 9.23677 7.99686 9.41338 8.89286 9.36657H9.30143C9.03214 10.4679 7.71357 11.3172 6.10714 11.3172Z" /></symbol>
     <symbol id="rank-iron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M31.9461 26.5c-8 4.8-9.3333 14.6667-9 19-12.8-5.6-15.9733-20.5-12.8066-26 6.5 4 17.5 6 21.8066 7zM14.9462 49.5c2.8-.8 6.4999-1.6667 7.9999-2 2.3999 9.6 9.6667 14.6667 13.0001 16-14-1.6-19.8334-10-21-14zM44.4462 14c-2 1.6-6.1667 7.3333-8 10 5.6-1.6 12.9999-.6667 15.9999 0-2.4-4-6.3333-8.3333-7.9999-10zM73.4462 49.5c-2.8-.8-6.5-1.6667-8-2-2.4 9.6-9.6667 14.6667-13.0001 16 14-1.6 19.8334-10 21.0001-14zM57.4461 44c0 7.1797-5.8202 13-12.9999 13s-13-5.8203-13-13 5.8203-13 13-13 12.9999 5.8203 12.9999 13zM50.4461 64c-4.5 1-6.4999 1-11.9999 0 1.6 4 6.9999 8.5 9.4999 10 0-2 1.6667-7.6667 2.5-10zM56.4462 26.5c8 4.8 9.3333 14.6667 9 19 12.8-5.6 15.9733-20.5 12.8066-26-6.5 4-17.4999 6-21.8066 7z" fill="#574D4F" /></symbol>
     <symbol id="rank-bronze" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"><path d="M31.9461 26.5c-8 4.8-9.3333 14.6667-9 19-12.8-5.6-15.9733-20.5-12.8066-26 6.5 4 17.5 6 21.8066 7zM14.9462 49.5c2.8-.8 6.4999-1.6667 7.9999-2 2.3999 9.6 9.6667 14.6667 13.0001 16-14-1.6-19.8334-10-21-14zM44.4462 14c-2 1.6-6.1667 7.3333-8 10 5.6-1.6 12.9999-.6667 15.9999 0-2.4-4-6.3333-8.3333-7.9999-10zM73.4462 49.5c-2.8-.8-6.5-1.6667-8-2-2.4 9.6-9.6667 14.6667-13.0001 16 14-1.6 19.8334-10 21.0001-14zM57.4461 44c0 7.1797-5.8202 13-12.9999 13s-13-5.8203-13-13 5.8203-13 13-13 12.9999 5.8203 12.9999 13zM50.4461 64c-4.5 1-6.4999 1-11.9999 0 1.6 4 4.0538 8 6.5538 9.5 2-1.5 4.6128-7.1667 5.4461-9.5zM56.4462 26.5c8 4.8 9.3333 14.6667 9 19 12.8-5.6 15.9733-20.5 12.8066-26-6.5 4-17.4999 6-21.8066 7z" fill="#8C523A" /></symbol>

client/src/components/SearchForm.vue

@@ -15,14 +15,8 @@
           class="border-2 border-transparent cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
         >
           <span class="selected font-bold select-none">{{ selectedRegion }}</span>
-          <svg
+          <svg class="ml-1 -mr-1 w-4 h-4">
-            class="ml-1 -mr-1 w-4 h-4 fill-current"
+            <use xlink:href="#caret-down" />
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"
-          >
-            <path
-              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-            />
           </svg>
         </div>
       </div>

client/src/components/Summoner/Champions/ChampionsTable.vue

@@ -0,0 +1,271 @@
+<template>
+  <table class="w-full table-auto bg-blue-800 rounded-lg text-center leading-none">
+    <thead>
+      <tr class="heading rounded-t-lg text-sm select-none">
+        <th
+          @click="sortBy('index')"
+          :class="sortedClasses('index')"
+          class="relative px-2 py-4 rounded-tl-lg font-normal cursor-pointer hover:bg-blue-700"
+        >rank</th>
+        <th
+          v-for="(heading, index) in headings"
+          :key="`champHeading-${index}`"
+          @click="sortBy(heading.props)"
+          v-html="heading.name"
+          :class="[{'rounded-tr-lg': index === headings.length - 1}, sortedClasses(heading.props)]"
+          class="relative px-2 py-4 font-normal cursor-pointer hover:bg-blue-700"
+        ></th>
+      </tr>
+    </thead>
+    <tbody class="bg-blue-760">
+      <tr
+        v-for="(champion, index) in championsFull"
+        :key="champion._id"
+        :class="{'rounded-b-lg': index === championsFull.length - 1}"
+      >
+        <td
+          :class="{'rounded-bl-lg': index === championsFull.length - 1}"
+          class="relative px-2 py-3 bg-blue-800 border-t-table border-t-table-70 text-white text-sm"
+        >{{ champion.index + 1 }}</td>
+        <td class="relative px-2 py-3 bg-blue-800 border-t-table text-white text-sm">
+          <div class="flex items-center">
+            <div
+              :style="{backgroundImage: `url('${champion.champion.icon}')`}"
+              class="w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
+            ></div>
+            <div class="ml-2">{{ champion.champion.name }}</div>
+          </div>
+        </td>
+        <td
+          :style="bgColor(champion, '71, 132, 116', 'winrate')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.winrate|percent }}</td>
+        <td
+          :style="bgColor(champion, '55, 118, 179', 'playrate')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.playrate|percent }}</td>
+        <td
+          :style="bgColor(champion, '71, 132, 116', 'wins')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.wins }}</td>
+        <td
+          :style="bgColor(champion, '55, 118, 179', 'count')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.count }}</td>
+        <td
+          :style="bgColor(champion, '55, 118, 179', 'kda')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.kda|round }}</td>
+        <td
+          :style="bgColor(champion, '71, 132, 116', 'kp')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.kp|percent }}</td>
+        <td
+          :style="bgColor(champion, '140, 101, 182', 'minions')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.minions|round(0) }}</td>
+        <td
+          :style="bgColor(champion, '146, 100, 79', 'gold')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.gold|kilo }}</td>
+        <td
+          :style="bgColor(champion, '156, 71, 109', 'dmgChamp')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.dmgChamp|kilo }}</td>
+        <td
+          :style="bgColor(champion, '146, 145, 106', 'dmgTaken')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.dmgTaken|kilo }}</td>
+        <td
+          :style="bgColor(champion, '71, 132, 116', 'gameLength')"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.gameLength|secToTime }}</td>
+        <td
+          :class="{'rounded-br-lg': index === championsFull.length - 1}"
+          class="px-2 py-3 text-white text-sm"
+        >{{ champion.lastPlayed }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import { timeDifference } from '@/helpers/functions.js'
+
+export default {
+  props: {
+    champions: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data() {
+    return {
+      headings: [
+        {
+          name: 'name',
+          props: 'champion.name'
+        },
+        {
+          name: 'win rate',
+          props: 'winrate'
+        },
+        {
+          name: 'play <br> rate',
+          props: 'playrate'
+        },
+        {
+          name: 'wins',
+          props: 'wins'
+        },
+        {
+          name: 'plays',
+          props: 'count'
+        },
+        {
+          name: 'kda',
+          props: 'kda'
+        },
+        {
+          name: 'kp',
+          props: 'kp'
+        },
+        {
+          name: 'minions',
+          props: 'minions'
+        },
+        {
+          name: 'gold',
+          props: 'gold'
+        },
+        {
+          name: 'dmg <br> champ',
+          props: 'dmgChamp'
+        },
+        {
+          name: 'dmg <br> taken',
+          props: 'dmgTaken'
+        },
+        {
+          name: 'game <br> length',
+          props: 'gameLength'
+        },
+        {
+          name: 'last played',
+          props: 'date'
+        }
+      ],
+      championsFull: [],
+      sortProps: 'index',
+      order: -1
+    }
+  },
+
+  computed: {
+    totalGames() {
+      return this.champions.reduce((agg, champ) => agg + champ.count, 0)
+    }
+  },
+
+  mounted() {
+    this.championsFull = this.champions.map((champ, index) => {
+      return {
+        ...champ,
+        winrate: champ.wins * 100 / champ.count,
+        playrate: champ.count * 100 / this.totalGames,
+        kda: (champ.kills + champ.assists) / champ.deaths,
+        index,
+        lastPlayed: timeDifference(champ.date)
+      }
+    })
+  },
+
+  methods: {
+    bgColor(champion, rgb, stats) {
+      const value = parseFloat(champion[stats])
+      const biggestValue = Math.max(...this.championsFull.map(c => parseFloat(c[stats])), 0)
+      const opacity = (value / biggestValue).toFixed(2)
+
+      return {
+        backgroundColor: `rgba(${rgb}, ${opacity})`
+      }
+    },
+    sortBy(props) {
+      // Change order of the sort
+      if (props === this.sortProps) {
+        this.order *= -1
+      } else {
+        this.order = -1
+      }
+
+      this.championsFull.sort((a, b) => {
+        const aProp = props.split('.').reduce((p, c) => p && p[c] || null, a)
+        const bProp = props.split('.').reduce((p, c) => p && p[c] || null, b)
+        let order = aProp > bProp ? this.order : this.order * -1
+
+        // Revert order for rank and champion name
+        if (props === 'index' || props === 'champion.name') {
+          order *= -1
+        }
+        return order
+      })
+      this.sortProps = props
+    },
+    sortedClasses(props) {
+      return {
+        'sorted': this.sortProps === props,
+        'sorted-asc': this.sortProps === props && this.order === 1,
+        'sorted-desc': this.sortProps === props && this.order === -1,
+      }
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.heading {
+  box-shadow: none;
+}
+
+.border-t-table::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 2px;
+  background-color: rgba(190, 227, 248, 0.2);
+}
+
+.border-t-table-70::after {
+  width: 70%;
+}
+
+.sorted::after {
+  content: "";
+  position: absolute;
+  top: -15px;
+  left: 0;
+  height: 24px;
+  width: 100%;
+  background-color: rgb(34, 92, 135);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 16px 16px;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.sorted-asc::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.sorted-desc::after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z' /%3E%3C/svg %3E");
+}
+
+.sorted:hover::after {
+  background-color: #2b6cb0;
+}
+</style>

client/src/main.js

@@ -20,7 +20,7 @@ Vue.filter('kilo', (value) => {
 
 Vue.filter('secToTime', (sec) => {
   const min = Math.floor(sec / 60)
-  const newSec = sec - min * 60
+  const newSec = Math.floor(sec - min * 60)
   return min + 'm' + (newSec < 10 ? '0' + newSec : newSec) + 's'
 })
 
@@ -28,8 +28,8 @@ Vue.filter('percent', (value) => {
   return `${+value.toFixed(1)}%`
 })
 
-Vue.filter('round', (value) => {
+Vue.filter('round', (value, decimals = 2) => {
-  return parseFloat(value.toFixed(2))
+  return parseFloat(value.toFixed(decimals))
 })
 
 new Vue({

client/src/store/modules/summoner.js

@@ -6,6 +6,7 @@ export const namespaced = true
 export const state = {
   infos: {
     account: {},
+    champions: [],
     matchIndex: 0,
     matchList: [],
     matches: [],
@@ -14,11 +15,16 @@ export const state = {
     stats: {},
     playing: false
   },
+  championsLoaded: false,
   matchesLoading: false,
   status: '',
 }
 
 export const mutations = {
+  CHAMPIONS_FOUND(state, { champions }) {
+    state.infos.champions = champions
+    state.championsLoaded = true
+  },
   MATCHES_LOADING(state) {
     state.matchesLoading = true
   },
@@ -30,6 +36,8 @@ export const mutations = {
     state.infos.matchIndex += newMatches.length
 
     state.infos.stats = stats
+
+    state.championsLoaded = false
   },
   SUMMONER_REQUEST(state) {
     state.status = 'loading'
@@ -43,6 +51,7 @@ export const mutations = {
     state.infos.playing = infos.playing
     state.infos.stats = infos.stats
     state.status = 'found'
+    state.championsLoaded = false
   },
   SUMMONER_NOT_FOUND(state) {
     state.status = 'error'
@@ -50,6 +59,13 @@ export const mutations = {
 }
 
 export const actions = {
+  async championStats({ commit }) {
+    const resp = await axios(({ url: 'champions', data: { puuid: state.infos.account.puuid }, method: 'POST' })).catch(() => { })
+    console.log('CHAMPIONS STATS')
+    console.log(resp.data)
+
+    commit('CHAMPIONS_FOUND', { champions: resp.data })
+  },
   async moreMatches({ commit }) {
     commit('MATCHES_LOADING')
 

client/src/views/SummonerChampions.vue

@@ -1,7 +1,40 @@
 <template>
   <div>
     <div class="mt-3 min-h-screen">
-      <div class="mt-16 text-center">Coming soon...😉</div>
+      <ChampionsTable
+        v-if="champions.length && championsLoaded"
+        :champions="champions"
+        class="mt-8"
+      />
     </div>
   </div>
 </template>
+
+<script>
+import { mapActions, mapState } from 'vuex'
+import ChampionsTable from '@/components/Summoner/Champions/ChampionsTable.vue'
+
+export default {
+  components: {
+    ChampionsTable,
+  },
+
+  computed: {
+    ...mapState({
+      champions: state => state.summoner.infos.champions,
+      championsLoaded: state => state.summoner.championsLoaded
+    })
+  },
+
+  created() {
+    if (!this.championsLoaded) {
+      console.log('FETCH CHAMPIONS')
+      this.championStats()
+    }
+  },
+
+  methods: {
+    ...mapActions('summoner', ['championStats']),
+  }
+}
+</script>

server/app/Controllers/Http/SummonerController.js

@@ -75,9 +75,9 @@ class SummonerController {
 
   async champions({ request, response }) {
     const puuid = request.input('puuid')
-    console.log('champions request', puuid)
+    console.time('championsRequest')
     const championStats = await StatsService.getChampionStats(puuid)
-
+    console.timeEnd('championsRequest')
     return response.json(championStats)
   }
 }

server/app/Repositories/MatchRepository.js

@@ -85,15 +85,16 @@ class MatchRepository {
   championCompleteStats(puuid) {
     const groupParams = {
       time: { $sum: "$time" },
+      gameLength: { $avg: "$time" },
+      date: { $last: "$date" },
       champion: { $first: "$champion" },
       kills: { $sum: "$stats.kills" },
       deaths: { $sum: "$stats.deaths" },
       assists: { $sum: "$stats.assists" },
-      minions: { $sum: "$stats.minions" },
+      minions: { $avg: "$stats.minions" },
-      vision: { $sum: "$stats.vision" },
+      gold: { $avg: "$stats.gold" },
-      gold: { $sum: "$stats.gold" },
+      dmgChamp: { $avg: "$stats.dmgChamp" },
-      dmgChamp: { $sum: "$stats.dmgChamp" },
+      dmgTaken: { $avg: "$stats.dmgTaken" },
-      dmgTaken: { $sum: "$stats.dmgTaken" },
       kp: { $avg: "$stats.kp" },
     }
     const finalSteps = [