From 30c12345f652999c405ee33d1af16de5a3f59be1 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Mon, 21 May 2018 13:42:58 +0200
Subject: Add more highlights

---
 src/Highlights.vue | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

(limited to 'src/Highlights.vue')

diff --git a/src/Highlights.vue b/src/Highlights.vue
index 022c23d..b98e792 100644
--- a/src/Highlights.vue
+++ b/src/Highlights.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="columns is-multiline">
+  <div class="columns is-multiline is-mobile">
     <div class="column">
       <talent-box class="is-dark notification"
                   title="Overpowered"
@@ -18,6 +18,15 @@
                   :entry="stats.topPick" />
     </div>
 
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Hidden Gem"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topUnpopularWin.Winner)"
+                  :entry="stats.topUnpopularWin" />
+    </div>
+
     <div class="column">
       <talent-box class="is-dark notification"
                   title="Highest Level"
@@ -33,6 +42,34 @@
                   :value="stats.lowestLevelAvg.Level.toFixed(2)"
                   :entry="stats.lowestLevelAvg" />
     </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Best Rare"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topRareWin.Winner)"
+                  :entry="stats.topRareWin" />
+    </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Best Epic"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topEpicWin.Winner)"
+                  :entry="stats.topEpicWin" />
+    </div>
+
+    <div class="column">
+      <talent-box class="is-dark notification"
+                  title="Best Legendary"
+                  type="Win Rate"
+                  label="%"
+                  :value="Math.round(100 * stats.topLegendaryWin.Winner)"
+                  :entry="stats.topLegendaryWin" />
+    </div>
+
   </div>
 </template>
 
@@ -51,9 +88,13 @@ export default Vue.component('highlights', {
     stats: function() {
       return {
         topWin: this.reportService.getTopWin(this.selectedMode),
+        topUnpopularWin: this.reportService.getTopUnpopularWin(this.selectedMode),
         topPick: this.reportService.getTopPick(this.selectedMode),
         totalPicks: this.reportService.getTotalPicks(this.selectedMode),
         highestLevelAvg: this.reportService.getHighestLevelAvg(this.selectedMode),
+        topRareWin: this.reportService.getTopRareWins(this.selectedMode),
+        topEpicWin: this.reportService.getTopEpicWins(this.selectedMode),
+        topLegendaryWin: this.reportService.getTopLegendaryWins(this.selectedMode),
         lowestLevelAvg: this.reportService.getLowestLevelAvg(this.selectedMode),
       };
     },
-- 
cgit v1.3.1