ReportTable: Add CSV download

3 files changed, 44 insertions, 1 deletions

diff --git a/src/ReportService.js b/src/ReportService.js
index acfbea2..a050bb4 100644
--- a/src/ReportService.js
+++ b/src/ReportService.js
@@ -141,6 +141,32 @@ export default {
     return reports.get(mode);
   },
 
+  getCsv(mode) {
+    return 'Hero,Talent,Rarity,Kills,Deaths,TurretKills,' +
+      'AverageWinrate,BaseLevelWinrate,MaxLevelWinrate,LevelWinrateVariance,Wins,Picks' +
+      '\n' +
+      reports.get(mode)
+      .map((entry) => [
+        maps.getHero(entry.Actor),
+        maps.getTalentName(entry.Talent),
+        maps.getTalentRarity(entry.Talent),
+        entry.Kills,
+        entry.Deaths,
+        /*
+        entry.CrystalMinerKills,
+        entry.GoldMinerKills,
+        */
+        entry.TurretKills,
+        entry.TotalWinner,
+        entry.TalentWinrateBase || entry.TotalWinner,
+        entry.TalentWinrateMax || entry.TotalWinner,
+        entry.TalentWinrateVariance || entry.TotalWinner,
+        entry.TotalWinner * entry.TotalPicks,
+        entry.TotalPicks,
+      ].join(','))
+    .join('\n');
+  },
+
   getTotalPicks(mode) {
     return totalPicks.get(mode);
   },
diff --git a/src/ReportTable.vue b/src/ReportTable.vue
index 0531ca4..972b006 100644
--- a/src/ReportTable.vue
+++ b/src/ReportTable.vue
@@ -30,6 +30,12 @@
         </b-tooltip>
       </template>
 
+      <template slot="footer">
+        <div class="has-text-right">
+          <button class="button" @click="downloadCsv()">Download CSV</button>
+        </div>
+      </template>
+
       <template slot-scope="props">
         <b-table-column field="Actor" label="Hero" sortable>
           <!-- desktop, table view -->
@@ -131,6 +137,16 @@ export default Vue.component('report-table', {
       return ReportService.getTotalPicks(this.selectedMode);
     },
   },
+  methods: {
+    downloadCsv: function() {
+      const csv = ReportService.getCsv(this.selectedMode);
+      const downloaderElement = document.createElement('a');
+      downloaderElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
+      downloaderElement.target = '_blank';
+      downloaderElement.download = maps.getMode(this.selectedMode) + '.csv';
+      downloaderElement.click();
+    },
+  },
   components: {
     HeroImage,
   },
diff --git a/src/maps/maps.js b/src/maps/maps.js
index 9237c4b..c3f50c8 100644
--- a/src/maps/maps.js
+++ b/src/maps/maps.js
@@ -23,7 +23,8 @@ function getTalentName(talent) {
                .replace(/([A-Z])/g, (s) => ' ' + s.toLowerCase())
                .split(' ') // capitalize first letter
                .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-               .join(' ');
+               .join(' ')
+               .substring(1);
   }
 }