Add 'Balance' Scatter Plot

1 files changed, 72 insertions, 0 deletions

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>