refactor: create ReportService, move tabs to component

4 files changed, 122 insertions, 50 deletions

diff --git a/src/App.vue b/src/App.vue
index a994a01..aa2d19c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,75 +9,36 @@
       </div>
     </section>
 
-    <b-tabs v-model="activeTab">
+    <b-tabs>
       <b-tab-item label="Blitz">
-        <div class="tile is-ancestor">
-          <div class="tile is-parent">
-            <talent-box class="tile is-child is-warning notification"
-                        title="Overpowered!"
-                        :entry="topWins.blitz_pvp_ranked">
-              {{ Math.round(100 * topWins.blitz_pvp_ranked.Winner) }}% Win Rate
-            </talent-box>
-          </div>
-
-          <div class="tile is-parent">
-            <talent-box class="tile is-child is-success notification"
-                        title="Trending"
-                        :entry="topPicks.blitz_pvp_ranked">
-              {{ (100 * 6 * topPicks.blitz_pvp_ranked.Count / totalPicks.blitz_pvp_ranked).toFixed(2) }}% Pick Rate
-            </talent-box>
-          </div>
-        </div>
-
-        <h2 class="title is-2">Blitz Hero Statistics</h2>
-        <report-table :report="reports.blitz_pvp_ranked" :totalPicks="totalPicks.blitz_pvp_ranked"></report-table>
+        <blitz-tab :reportService="reportService"></blitz-tab>
       </b-tab-item>
 
       <b-tab-item label="Battle Royale">
-        <h2 class="title is-2">Battle Royale Hero Statistics</h2>
-        <report-table :report="reports.casual_aral" :totalPicks="totalPicks.casual_aral"></report-table>
+        <battle-royale-tab :reportService="reportService"></battle-royale-tab>
       </b-tab-item>
     </b-tabs>
   </div>
 </template>
 
 <script>
-import report from '../data/98aae7f0/report.json';
-import ReportTable from './ReportTable.vue';
-import TalentBox from './TalentBox.vue';
-
-const MODES = [
-  'casual_aral', 'blitz_pvp_ranked'
-];
-
-const reports = {};
-const totalPicks = {};
-const topPicks = {};
-const topWins = {};
+import Vue from 'vue';
+import BlitzTab from './BlitzTab.vue';
+import BattleRoyaleTab from './BattleRoyaleTab.vue';
+import ReportService from './report-service.js';
 
-for(let mode of MODES) {
-  reports[mode] = report.filter((entry) => entry.Mode == mode);
-  totalPicks[mode] = report.map((entry) => entry.Count).reduce((agg, cur) => agg + cur, 0);
-  topPicks[mode] = reports[mode].sort((entry1, entry2) => entry2.Count - entry1.Count)[0];
-  topWins[mode] = reports[mode]
-    .filter((entry) => 100 * 6 * entry.Count / totalPicks[mode] > 0.05)
-    .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
-}
+const reportService = new ReportService();
 
 export default {
   name: 'app',
   data: function() {
     return {
-      reports,
-      topPicks,
-      topWins,
-      totalPicks,
-      activeTab: 0,
+      reportService,
     };
   },
   components: {
-    ReportTable,
-    TalentBox,
+    BlitzTab,
+    BattleRoyaleTab,
   },
 };
 </script>
diff --git a/src/BattleRoyaleTab.vue b/src/BattleRoyaleTab.vue
new file mode 100644
index 0000000..48d8b25
--- /dev/null
+++ b/src/BattleRoyaleTab.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h2 class="title is-2">Battle Royale Hero Statistics</h2>
+    <report-table :report="report" :totalPicks="totalPicks"></report-table>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import ReportTable from './ReportTable.vue';
+
+export default Vue.component('battle-royale-tab', {
+  props: [ 'reportService' ],
+  data: function() {
+    return {
+      report: this.reportService.getReport('casual_aral'),
+      totalPicks: this.reportService.getTotalPicks('casual_aral'),
+    };
+  },
+  computed: {
+  },
+  components: {
+    ReportTable,
+  },
+});
+</script>
diff --git a/src/BlitzTab.vue b/src/BlitzTab.vue
new file mode 100644
index 0000000..5d711a2
--- /dev/null
+++ b/src/BlitzTab.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <div class="tile is-ancestor">
+      <div class="tile is-parent">
+        <talent-box class="tile is-child is-warning notification"
+                    title="Overpowered!"
+                    :entry="topWin">
+          {{ Math.round(100 * topWin.Winner) }}% Win Rate
+        </talent-box>
+      </div>
+
+      <div class="tile is-parent">
+        <talent-box class="tile is-child is-success notification"
+                    title="Trending"
+                    :entry="topPick">
+          {{ (100 * 6 * topPick.Count / totalPicks).toFixed(2) }}% Pick Rate
+        </talent-box>
+      </div>
+    </div>
+
+    <h2 class="title is-2">Blitz Hero Statistics</h2>
+    <report-table :report="report" :totalPicks="totalPicks"></report-table>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import ReportTable from './ReportTable.vue';
+import TalentBox from './TalentBox.vue';
+
+export default Vue.component('blitz-tab', {
+  props: [ 'reportService' ],
+  data: function() {
+    return {
+      report: this.reportService.getReport('blitz_pvp_ranked'),
+      topWin: this.reportService.getTopWin('blitz_pvp_ranked'),
+      topPick: this.reportService.getTopPick('blitz_pvp_ranked'),
+      totalPicks: this.reportService.getTotalPicks('blitz_pvp_ranked'),
+    };
+  },
+  computed: {
+  },
+  components: {
+    ReportTable,
+    TalentBox,
+  },
+});
+</script>
diff --git a/src/report-service.js b/src/report-service.js
new file mode 100644
index 0000000..feddec5
--- /dev/null
+++ b/src/report-service.js
@@ -0,0 +1,37 @@
+const MODES = [ 'casual_aral', 'blitz_pvp_ranked' ];
+
+export default class ReportService {
+  constructor() {
+    this.report = require('../data/98aae7f0/report.json');
+
+    this.reports = {};
+    this.totalPicks = {};
+    this.topPicks = {};
+    this.topWins = {};
+
+    for(let mode of MODES) {
+      this.reports[mode] = this.report.filter((entry) => entry.Mode == mode);
+      this.totalPicks[mode] = this.report.map((entry) => entry.Count).reduce((agg, cur) => agg + cur, 0);
+      this.topPicks[mode] = this.reports[mode].sort((entry1, entry2) => entry2.Count - entry1.Count)[0];
+      this.topWins[mode] = this.reports[mode]
+        .filter((entry) => 100 * 6 * entry.Count / this.totalPicks[mode] > 0.05)
+        .sort((entry1, entry2) => entry2.Winner - entry1.Winner)[0];
+    }
+  }
+
+  getReport(mode) {
+    return this.reports[mode];
+  }
+
+  getTotalPicks(mode) {
+    return this.totalPicks[mode];
+  }
+
+  getTopPick(mode) {
+    return this.topPicks[mode];
+  }
+
+  getTopWin(mode) {
+    return this.topWins[mode];
+  }
+}