ReportTable: Advantage per Level -> Max Win Rate, fix 5v5/3v3 table, add filters

1 files changed, 49 insertions, 10 deletions

diff --git a/src/ReportTable.vue b/src/ReportTable.vue
index 4cbc280..8a0d617 100644
--- a/src/ReportTable.vue
+++ b/src/ReportTable.vue
@@ -1,9 +1,38 @@
 <template>
   <section>
+    <b-field>
+      <p class="control">
+        <b-dropdown v-model="filterRarity">
+          <button class="button" slot="trigger">
+            <span>{{ filterRarity || 'All' }} Talents</span>
+            <b-icon icon="menu-down"></b-icon>
+          </button>
+
+          <b-dropdown-item value="">All Talents</b-dropdown-item>
+          <b-dropdown-item v-for="rarity in RARITIES" :key="rarity" :value="rarity">{{ rarity }} Talents</b-dropdown-item>
+        </b-dropdown>
+      </p>
+
+      <b-input placeholder="Search…" type="search" icon="magnify" v-model="filterName"></b-input>
+
+    </b-field>
+
+    <b-field>
+      <div class="control">
+        <b-switch v-model="filterLowPickrate">Include entries without enough data</b-switch>
+      </div>
+    </b-field>
+
     <b-table :data="report"
              :default-sort="['TotalPicks', 'desc']"
              :default-sort-directon="'desc'"
              :paginated="true">
+      <template slot-scope="props" slot="header">
+        <b-tooltip :active="!!props.column.meta" :label="props.column.meta || ''" position="is-bottom" dashed>
+          {{ props.column.label }}
+        </b-tooltip>
+      </template>
+
       <template slot-scope="props">
         <b-table-column field="Actor" label="Hero" sortable>
           <!-- desktop, table view -->
@@ -39,24 +68,25 @@
           </div>
         </b-table-column>
 
-        <b-table-column field="Winner" label="Level 1 Win Rate" sortable numeric>
-          <template v-if="isNaN(props.row.TalentWinrateBase) || props.row.SampleTooSmall">
-            {{ (100 * props.row.Winner).toFixed(2) }}%
+        <b-table-column field="TalentWinrateBase" label="Level 1 Win Rate" meta="Estimated." :visible="hasTalents" sortable numeric>
+          <template v-if="isNaN(props.row.TalentWinrateBase)">
+            {{ (100 * props.row.Winner).toFixed(2) }}% <!-- No Talent -->
           </template>
           <template v-else>
             {{ (100 * props.row.TalentWinrateBase).toFixed(2) }}%
           </template>
         </b-table-column>
 
-        <b-table-column field="TalentWinrateScaling" label="Win Rate Advantage" sortable numeric>
-          <template v-if="isNaN(props.row.TalentWinrateScaling) || props.row.SampleTooSmall">
-            <span class="mdi mdi-gauge-empty mdi-18px" title="Not enough data"></span>
-          </template>
-          <template v-else>
-            {{ (props.row.TalentWinrateScaling > 0? '+' : '') + (100 * props.row.TalentWinrateScaling / getLevelBuckets()).toFixed(2) }}% <small>for {{ getLevelsPerBucket(props.row) + (getLevelsPerBucket(props.row) > 1? ' Levels' : ' Level') }}</small>
+        <b-table-column field="TalentWinrateMax" label="Max Level Win Rate" meta="Estimated." :visible="hasTalents" sortable numeric>
+          <template v-if="!isNaN(props.row.TalentWinrateMax)">
+            {{ (100 * props.row.TalentWinrateMax).toFixed(2) }}%
           </template>
         </b-table-column>
 
+        <b-table-column field="Winner" label="Win Rate" :visible="!hasTalents" sortable numeric>
+          {{ (100 * props.row.Winner).toFixed(2) }}%
+        </b-table-column>
+
         <b-table-column field="TotalPicks" label="Pick Rate" sortable numeric>
           {{ (100 * playersPerMatch * props.row.TotalPicks / totalPicks).toFixed(2) }}%
         </b-table-column>
@@ -76,6 +106,7 @@ export default Vue.component('report-table', {
   mixins: [ RouterParamMixin ],
   data: function() {
     return {
+      RARITIES: maps.RARITIES,
       getTalentName: maps.getTalentName,
       getTalentRarityIndex: maps.getTalentRarityIndex,
       getHero: maps.getHero,
@@ -85,7 +116,15 @@ export default Vue.component('report-table', {
   },
   computed: {
     report: function() {
-      return ReportService.getReport(this.selectedMode);
+      const giveTrue = (x) => true;
+      const filters = [
+        this.filterRarity != ''? (entry) => maps.getTalentRarity(entry.Talent) == this.filterRarity : giveTrue,
+        this.filterName   != ''? (entry) => maps.getHero(entry.Actor).includes(this.filterName) || maps.getTalentName(entry.Talent).includes(this.filterName) : giveTrue,
+        !this.filterLowPickrate? (entry) => !entry.SampleTooSmall : giveTrue,
+      ];
+      const and = (a, b) => a && b;
+      return ReportService.getReport(this.selectedMode)
+        .filter((entry) => filters.map((filter) => filter(entry)).reduce(and, true));
     },
     totalPicks: function() {
       return ReportService.getTotalPicks(this.selectedMode);