From 8e6a717ad797329c82f07ab1c931591a852d636b Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Wed, 20 Oct 2021 19:55:33 +0200
Subject: [PATCH] Squashed commit of the following:

commit d364237a9eaa2d29cdc6e9ab4f6e019ae9746aa6
Author: cnachtigall1991 <40701475+cnachtigall1991@users.noreply.github.com>
Date:   Wed Oct 20 19:35:46 2021 +0200

    added toggle-btn for flashes
---
 src/components/FlashChart.vue | 61 +++++++++++++++++++++++++++++------
 1 file changed, 51 insertions(+), 10 deletions(-)

diff --git a/src/components/FlashChart.vue b/src/components/FlashChart.vue
index 21e2f27..c3b0816 100644
--- a/src/components/FlashChart.vue
+++ b/src/components/FlashChart.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="player-flash">
-    <h3>Flash-Duration <small class="text-muted">(in s)</small></h3>
+    <h3>Flash-Duration</h3>
+    <div class="flexbreak"></div>
+    <div class="toggle-btn">
+      <i id="toggle-off" class="fas fa-toggle-off show" title="Flashcount" @click="toggleShow"></i>
+      <i id="toggle-on" class="fas fa-toggle-on" title="Flashduration" @click="toggleShow"></i>
+    </div>
     <div class="flexbreak"></div>
     <div id="flash-chart-1"></div>
     <div id="flash-chart-2"></div>
@@ -12,7 +17,7 @@ import * as echarts from 'echarts/core';
 import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
 import {BarChart} from 'echarts/charts';
 import {CanvasRenderer} from 'echarts/renderers';
-import {onMounted} from "vue";
+import {onMounted, ref, watch} from "vue";
 import {checkStatEmpty, getPlayerArr} from "../utils";
 import {useStore} from "vuex";
 
@@ -21,11 +26,30 @@ export default {
   setup() {
     const store = useStore()
 
-    const durationArr = (stats, team, prop) => {
+    let toggle = ref('duration')
+    let myChart1, myChart2
+    const color = ['#bb792c', '#9bd270', '#eac42a']
+
+    const toggleShow = () => {
+      const offBtn = document.getElementById('toggle-off')
+      const onBtn = document.getElementById('toggle-on')
+
+      if (offBtn.classList.contains('show')) {
+        offBtn.classList.remove('show')
+        onBtn.classList.add('show')
+        toggle.value = 'total'
+      } else if (onBtn.classList.contains('show')) {
+        offBtn.classList.add('show')
+        onBtn.classList.remove('show')
+        toggle.value = 'duration'
+      }
+    }
+
+    const valueArr = (stats, team, toggle, prop) => {
       if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
         let arr = []
         for (let i = (team - 1) * 5; i < team * 5; i++) {
-          arr.push(checkStatEmpty(Function('return(function(stats, i){ return stats[i].flash.duration.' + prop + '})')()(stats, i)).toFixed(2))
+          arr.push(checkStatEmpty(Function('return(function(stats, i){ return stats[i].flash.' + toggle.value + '.' + prop + '})')()(stats, i)).toFixed(2))
         }
         arr.reverse()
 
@@ -64,27 +88,24 @@ export default {
           {
             name: 'Enemy',
             type: 'bar',
-            data: durationArr(store.state.matchDetails.stats, id, 'enemy'),
+            data: valueArr(store.state.matchDetails.stats, id, toggle, 'enemy'),
           },
           {
             name: 'Team',
             type: 'bar',
-            data: durationArr(store.state.matchDetails.stats, id, 'team'),
+            data: valueArr(store.state.matchDetails.stats, id, toggle,'team'),
           },
           {
             name: 'Self',
             type: 'bar',
-            data: durationArr(store.state.matchDetails.stats, id, 'self'),
+            data: valueArr(store.state.matchDetails.stats, id, toggle,'self'),
           }
         ]
       }
     }
 
-    let myChart1, myChart2
-
     onMounted(() => {
       if (store.state.matchDetails.stats) {
-        const color = ['indianred', '#69b13b', 'cornflowerblue']
 
         echarts.use([
           TooltipComponent,
@@ -101,6 +122,13 @@ export default {
         myChart2.setOption(setOptions(2, color));
       }
     })
+
+    watch(() => toggle.value, () => {
+      myChart1.setOption(setOptions(1, color));
+      myChart2.setOption(setOptions(2, color));
+    })
+
+    return {toggleShow}
   }
 }
 </script>
@@ -120,6 +148,19 @@ export default {
     margin: 1rem auto -1rem;
   }
 
+  .toggle-btn {
+    font-size: 1.5rem;
+    margin: 1rem auto 0;
+
+    .fas {
+      display: none;
+
+      &.show {
+        display: initial;
+      }
+    }
+  }
+
   #flash-chart-1,
   #flash-chart-2 {
     flex-basis: 50%;