Add 'Balance' Scatter Plot

3 files changed, 83 insertions, 5 deletions

diff --git a/src/ModeTab.vue b/src/ModeTab.vue
index a003712..1e1b686 100644
--- a/src/ModeTab.vue
+++ b/src/ModeTab.vue
@@ -33,6 +33,12 @@
       </div>
     </div>
 
+    <div class="box">
+      <h2 class="title is-2">Hero Balance Overview</h2>
+      <h3 class="subtitle is-hidden-desktop">Best viewed on a large screen</h3>
+      <win-pick-scatter></win-pick-scatter>
+    </div>
+
     <Adsense class="adsense"
       data-ad-client="ca-pub-6856963757796636"
       data-ad-slot="4801023518">
@@ -61,6 +67,7 @@ import HeroTalentTable from './HeroTalentTable.vue';
 import ReportTable from './ReportTable.vue';
 import IntroBox from './IntroBox.vue';
 import InstallNotification from './InstallNotification.vue';
+import WinPickScatter from './WinPickScatter.vue';
 import RouterParamMixin from './RouterParamMixin';
 import * as maps from './maps/maps.js';
 
@@ -83,6 +90,7 @@ export default Vue.component('mode-tab', {
     HeroTalentTable,
     ReportTable,
     IntroBox,
+    WinPickScatter,
     InstallNotification,
   },
 });
diff --git a/src/WinPickScatter.vue b/src/WinPickScatter.vue
new file mode 100644
index 0000000..45106e6
--- /dev/null
+++ b/src/WinPickScatter.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="plotly" ref="graph"></div>
+</template>
+
+<script>
+import Vue from 'vue';
+import Plotly from 'plotly.js/lib/core';
+import ReportService from './ReportService';
+import RouterParamMixin from './RouterParamMixin';
+import * as maps from './maps/maps';
+
+Plotly.register([
+]);
+
+export default Vue.component('win-pick-scatter', {
+  mixins: [ RouterParamMixin ],
+  mounted() {
+    this.refresh();
+    window.addEventListener('resize', this.resize);
+  },
+  watch: {
+    selectedMode() {
+      this.refresh();
+    },
+    selectedActor() {
+      this.refresh();
+    },
+  },
+  methods: {
+    refresh() {
+      const data = ReportService.getReport(this.selectedMode);
+      const total = ReportService.getTotalMatches(this.selectedMode);
+      const dataWithRarity = (rarity) => data.filter((entry) => maps.getTalentRarity(entry.Talent) == rarity);
+
+      const traces = maps.RARITIES.map((rarity) => ({
+        x: dataWithRarity(rarity).map((entry) => entry.Winner),
+        y: dataWithRarity(rarity).map((entry) => maps.playersPerMatch(this.selectedMode) * entry.Count / total),
+        text: dataWithRarity(rarity).map((entry) => `${maps.getHero(entry.Actor)} ${rarity}`),
+        name: rarity,
+        mode: 'markers',
+        type: 'scatter',
+      }));
+
+      this.plot = Plotly.newPlot(this.$refs.graph, traces, {
+        xaxis: {
+          title: 'Win Rate',
+          fixedrange: true,
+          tickformat: ',.0%',
+        },
+        yaxis: {
+          title: 'Pick Rate',
+          fixedrange: true,
+          tickformat: ',.0%',
+        },
+        margin: { t: 40, l: 40, b: 40, r: 40 },
+        staticPlot: true,
+      }, {
+        displayModeBar: false
+      });
+    },
+    resize() {
+      Plotly.Plots.resize(this.$refs.graph);
+    },
+  }
+});
+</script>
+
+<style scoped>
+.plotly {
+    height: 20em;
+}
+</style>
diff --git a/src/maps/maps.js b/src/maps/maps.js
index 14eead1..08ce779 100644
--- a/src/maps/maps.js
+++ b/src/maps/maps.js
@@ -2,6 +2,8 @@ const rarities = require('./rarities.json');
 const names = require('./names.json');
 const modes = require('./modes.json');
 
+const RARITIES = ['None', 'Rare', 'Epic', 'Legendary'];
+
 function getTalentName(talent) {
   if (talent == 'NoTalent') {
     return 'No Talent';
@@ -53,10 +55,6 @@ function getScaledLevel(entry) {
   }
 };
 
-function getTalentRarityIndex(talent) {
-  return ['None', 'Rare', 'Epic', 'Legendary'];
-}
-
 function getHero(actor) {
   return actor.substring(1, actor.length - 1);
 }
@@ -74,9 +72,9 @@ function playersPerMatch(mode) {
 }
 
 module.exports = {
+  RARITIES,
   getTalentName,
   getTalentRarity,
-  getTalentRarityIndex,
   getScaledLevel,
   getHero,
   getMode,