Support talentless modes

6 files changed, 59 insertions, 21 deletions

diff --git a/src/Highlights.vue b/src/Highlights.vue
index 02392ee..c4d288d 100644
--- a/src/Highlights.vue
+++ b/src/Highlights.vue
@@ -14,7 +14,7 @@
                   title="Trending"
                   type="Total Pick Rate"
                   label="%"
-                  :value="(100 * 6 * stats.topPick.Count / stats.totalPicks).toFixed(2)"
+                  :value="(100 * playersPerMatch * stats.topPick.Count / stats.totalPicks).toFixed(2)"
                   :entry="stats.topPick" />
     </div>
 
@@ -77,6 +77,7 @@
 import Vue from 'vue';
 import TalentBox from './TalentBox.vue';
 import RouterParamMixin from './RouterParamMixin.js';
+import * as maps from './maps/maps.js';
 
 export default Vue.component('highlights', {
   props: [ 'reportService' ],
@@ -95,6 +96,9 @@ export default Vue.component('highlights', {
         lowestLevelAvg: this.reportService.getLowestLevelAvg(this.selectedMode),
       };
     },
+    playersPerMatch: function() {
+      return maps.playersPerMatch(this.selectedMode);
+    },
   },
   components: {
     TalentBox,
diff --git a/src/ModeTab.vue b/src/ModeTab.vue
index e629ef0..09bc343 100644
--- a/src/ModeTab.vue
+++ b/src/ModeTab.vue
@@ -1,18 +1,18 @@
 <template>
   <div>
     <div class="columns is-multiline">
-      <div class="column">
+      <div class="column" v-if="hasTalents">
         <h2 class="title is-2">Highlights</h2>
         <highlights :reportService="reportService"></highlights>
       </div>
 
       <div class="column is-narrow">
-        <h2 class="title is-2">Top 10 Talents</h2>
+        <h2 class="title is-2">Top 10</h2>
         <top-talents-box :reportService="reportService"></top-talents-box>
       </div>
     </div>
 
-    <div class="columns is-multiline">
+    <div class="columns is-multiline" v-if="hasTalents">
       <h2 class="title is-2">Individual Hero Statistics</h2>
       <div class="column is-two-thirds">
         <hero-draft-grid :reportService="reportService"></hero-draft-grid>
@@ -36,9 +36,17 @@ import TopTalentsBox from './TopTalentsBox.vue';
 import HeroDraftGrid from './HeroDraftGrid.vue';
 import HeroTalentTable from './HeroTalentTable.vue';
 import ReportTable from './ReportTable.vue';
+import RouterParamMixin from './RouterParamMixin';
+import * as maps from './maps/maps.js';
 
 export default Vue.component('mode-tab', {
   props: [ 'reportService' ],
+  mixins: [ RouterParamMixin ],
+  computed: {
+    hasTalents: function() {
+      return maps.hasTalents(this.selectedMode);
+    },
+  },
   components: {
     Highlights,
     TopTalentsBox,
diff --git a/src/ReportTable.vue b/src/ReportTable.vue
index ed099c2..9d3cea1 100644
--- a/src/ReportTable.vue
+++ b/src/ReportTable.vue
@@ -22,7 +22,7 @@
           </div>
         </b-table-column>
 
-        <b-table-column field="Talent" label="Talent">
+        <b-table-column field="Talent" label="Talent" :visible="hasTalents">
           <!-- desktop, table view -->
           <div class="is-hidden-touch">
             <div style="display: flex; align-items: center; justify-content: space-between;">
@@ -39,7 +39,7 @@
           </div>
         </b-table-column>
 
-        <b-table-column field="Level" label="Average Level" sortable numeric>
+        <b-table-column field="Level" label="Average Level" :visible="hasTalents" sortable numeric>
           <template v-if="!!props.row.Level">
             {{ props.row.Level.toFixed(2) }}
           </template>
@@ -49,15 +49,11 @@
         </b-table-column>
 
         <b-table-column field="Winner" label="Win Rate" sortable numeric>
-          <template v-if="!!props.row.Winner">
-            {{ (100 * props.row.Winner).toFixed(2) }}%
-          </template>
+          {{ (100 * props.row.Winner).toFixed(2) }}%
         </b-table-column>
 
         <b-table-column field="Count" label="Pick Rate" sortable numeric>
-          <template v-if="!!props.row.Count">
-            {{ (100 * 6 * props.row.Count / totalPicks).toFixed(2) }}%
-          </template>
+          {{ (100 * playersPerMatch * props.row.Count / totalPicks).toFixed(2) }}%
         </b-table-column>
       </template>
     </b-table>
@@ -87,6 +83,12 @@ export default Vue.component('report-table', {
     totalPicks: function() {
       return this.reportService.getTotalPicks(this.selectedMode);
     },
+    playersPerMatch: function() {
+      return maps.playersPerMatch(this.selectedMode);
+    },
+    hasTalents: function() {
+      return maps.hasTalents(this.selectedMode);
+    },
   },
   components: {
     HeroImage,
diff --git a/src/TopTalentsBox.vue b/src/TopTalentsBox.vue
index eb73ef0..44a4e16 100644
--- a/src/TopTalentsBox.vue
+++ b/src/TopTalentsBox.vue
@@ -7,13 +7,17 @@
           <hero-image :actor="props.row.Actor" class="is-square"></hero-image>
         </b-table-column>
 
-        <b-table-column field="Talent" label="Talent">
+        <b-table-column field="Talent" label="Talent" :visible="hasTalents">
           <div style="display: flex; align-items: center; justify-content: space-between;">
             <span>{{ getTalentName(props.row.Talent) }}</span>
             <talent-image :entry="props.row" :size="48"></talent-image>
           </div>
         </b-table-column>
 
+        <b-table-column field="Count" label="Pick Rate" :visible="!hasTalents" sortable numeric>
+          <span>{{ Math.round(100 * playersPerMatch * props.row.Count / totalPicks) }}%</span>
+        </b-table-column>
+
         <b-table-column field="Winner" label="Win Rate" sortable numeric>
           <span>{{ Math.round(100 * props.row.Winner) }}%</span>
         </b-table-column>
@@ -42,6 +46,15 @@ export default Vue.component('top-talents-box', {
     top10Talents: function() {
       return this.reportService.getTop10Picks(this.selectedMode);
     },
+    hasTalents: function() {
+      return maps.hasTalents(this.selectedMode);
+    },
+    totalPicks: function() {
+      return this.reportService.getTotalPicks(this.selectedMode);
+    },
+    playersPerMatch: function() {
+      return maps.playersPerMatch(this.selectedMode);
+    },
   },
   components: {
     TalentImage,
diff --git a/src/maps/maps.js b/src/maps/maps.js
index cc6ee4b..9bd252e 100644
--- a/src/maps/maps.js
+++ b/src/maps/maps.js
@@ -55,10 +55,20 @@ function getMode(mode) {
   return modes[mode];
 }
 
+function hasTalents(mode) {
+  return ['blitz_pvp_ranked', 'casual_aral'].includes(mode);
+}
+
+function playersPerMatch(mode) {
+  return mode.includes('5v5')? 10 : 6;
+}
+
 module.exports = {
   getTalentName,
   getTalentRarity,
   getTalentRarityIndex,
   getHero,
   getMode,
+  hasTalents,
+  playersPerMatch,
 };
diff --git a/src/report-service.js b/src/report-service.js
index 8b6ed23..7443672 100644
--- a/src/report-service.js
+++ b/src/report-service.js
@@ -1,11 +1,11 @@
 import * as maps from './maps/maps';
 
-const MODES = [ 'casual_aral', 'blitz_pvp_ranked' ];
+const MODES = [ 'casual_aral', 'blitz_pvp_ranked', 'ranked', '5v5_pvp_ranked' ];
 const POPULAR_THRESHOLD = 0.1;
 
 export default class ReportService {
   constructor() {
-    this.report = require('../data/98aae7f0/report.json')
+    this.report = require('../data/95fb1cdb/report.json')
       .filter((entry) => entry.Actor != undefined); // bad data from API downtime
 
     this.reports = new Map();
@@ -22,8 +22,9 @@ export default class ReportService {
     this.actors = [];
     this.modes = MODES;
 
-    for(let mode of MODES) {
+    for(let mode of this.modes) {
       const relevancy = (entry) => (entry.Count / this.totalPicks.get(mode)) * entry.Winner;
+      const playersPerMatch = maps.playersPerMatch(mode);
 
       this.reports.set(mode, this.report.filter((entry) => entry.Mode == mode));
       this.totalPicks.set(mode, this.report.map((entry) => entry.Count).reduce((agg, cur) => agg + cur, 0));
@@ -32,19 +33,19 @@ export default class ReportService {
         .slice(0, 10));
       this.topPicks.set(mode, this.reports.get(mode).sort((entry1, entry2) => entry2.Count - entry1.Count)[0]);
       this.topWins.set(mode, this.reports.get(mode)
-        .filter((entry) => 100 * 6 * entry.Count / this.totalPicks.get(mode) > POPULAR_THRESHOLD)
+        .filter((entry) => 100 * playersPerMatch * entry.Count / this.totalPicks.get(mode) > POPULAR_THRESHOLD)
         .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0]);
       this.topUnpopularWins.set(mode, this.reports.get(mode)
-        .filter((entry) => 100 * 6 * entry.Count / this.totalPicks.get(mode) <= POPULAR_THRESHOLD)
+        .filter((entry) => 100 * playersPerMatch * entry.Count / this.totalPicks.get(mode) <= POPULAR_THRESHOLD)
         .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0]);
       this.topRareWins.set(mode, this.reports.get(mode)
-        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Rare' && 100 * 6 * entry.Count / this.totalPicks.get(mode) > POPULAR_THRESHOLD)
+        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Rare' && 100 * playersPerMatch * entry.Count / this.totalPicks.get(mode) > POPULAR_THRESHOLD)
         .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0]);
       this.topEpicWins.set(mode, this.reports.get(mode)
-        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Epic' && 100 * 6 * entry.Count / this.totalPicks.get(mode) > POPULAR_THRESHOLD)
+        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Epic' && 100 * playersPerMatch * entry.Count / this.totalPicks.get(mode) > POPULAR_THRESHOLD)
         .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0]);
       this.topLegendaryWins.set(mode, this.reports.get(mode)
-        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Legendary' && 100 * 6 * entry.Count / this.totalPicks.get(mode) > POPULAR_THRESHOLD)
+        .filter((entry) => maps.getTalentRarity(entry.Talent) == 'Legendary' && 100 * playersPerMatch * entry.Count / this.totalPicks.get(mode) > POPULAR_THRESHOLD)
         .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0]);
       this.topLeveledUp.set(mode, this.reports.get(mode).sort((entry1, entry2) => {
         if (!entry1.Level) return 1;