flashes toggle-btn rework

src/components/FlashChart.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="player-flash">
-    <h3>Flash-Duration</h3>
+    <h3>Flash-<span v-if="toggle === 'duration'">Duration</span><span v-if="toggle === 'total'">Count</span></h3>
     <div class="flexbreak"></div>
     <div class="toggle-btn">
-      <i id="toggle-off" class="fas fa-toggle-off show" title="Flashcount" @click="toggleShow"></i>
+      <span class="fs-6 text-muted" @click="toggleShow">
-      <i id="toggle-on" class="fas fa-toggle-on" title="Flashduration" @click="toggleShow"></i>
+        <span v-if="toggle === 'duration'">Count:</span><span v-if="toggle === 'total'">Duration:</span>
+        <i id="toggle-off" class="fas fa-toggle-off show" title="Flashcount"></i>
+        <i id="toggle-on" class="fas fa-toggle-on" title="Flashduration"></i>
+      </span>
     </div>
     <div class="flexbreak"></div>
     <div id="flash-chart-1"></div>
@@ -17,7 +20,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, ref, watch} from "vue";
+import {onMounted, onUnmounted, ref, watch} from "vue";
 import {checkStatEmpty, getPlayerArr} from "../utils";
 import {useStore} from "vuex";
 
@@ -26,9 +29,11 @@ export default {
   setup() {
     const store = useStore()
 
-    let toggle = ref('duration')
+    const toggle = ref('duration')
     let myChart1, myChart2
     const color = ['#bb792c', '#9bd270', '#eac42a']
+    const width = ref(600)
+    const height = ref(400)
 
     const toggleShow = () => {
       const offBtn = document.getElementById('toggle-off')
@@ -104,9 +109,33 @@ export default {
       }
     }
 
+    const disposeCharts = () => {
+      if (myChart1 != null && myChart1 !== '' && myChart1 !== undefined) {
+        myChart1.dispose()
+      }
+      if (myChart2 != null && myChart2 !== '' && myChart2 !== undefined) {
+        myChart2.dispose()
+      }
+    }
+
+    const buildCharts = () => {
+      disposeCharts()
+
+      myChart1 = echarts.init(document.getElementById('flash-chart-1'), {}, {
+        width: width.value,
+        height: height.value
+      });
+      myChart1.setOption(setOptions(1, color));
+
+      myChart2 = echarts.init(document.getElementById('flash-chart-2'), {}, {
+        width: width.value,
+        height: height.value
+      });
+      myChart2.setOption(setOptions(2, color));
+    }
+
     onMounted(() => {
       if (store.state.matchDetails.stats) {
-
         echarts.use([
           TooltipComponent,
           GridComponent,
@@ -115,20 +144,29 @@ export default {
           CanvasRenderer
         ]);
 
-        myChart1 = echarts.init(document.getElementById('flash-chart-1'), {}, {width: 600, height: 400});
+        buildCharts()
-        myChart2 = echarts.init(document.getElementById('flash-chart-2'), {}, {width: 600, height: 400});
-
-        myChart1.setOption(setOptions(1, color));
-        myChart2.setOption(setOptions(2, color));
       }
     })
 
-    watch(() => toggle.value, () => {
+    onUnmounted(() => {
-      myChart1.setOption(setOptions(1, color));
+      disposeCharts()
-      myChart2.setOption(setOptions(2, color));
     })
 
-    return {toggleShow}
+    watch(() => toggle.value, () => {
+      buildCharts()
+    })
+
+    window.onresize = () => {
+      if (window.innerWidth <= 600) {
+        width.value = window.innerWidth - 20
+        height.value = width.value * 2 / 3
+
+        buildCharts()
+      }
+    }
+
+
+    return {toggleShow, toggle}
   }
 }
 </script>
@@ -149,11 +187,13 @@ export default {
   }
 
   .toggle-btn {
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     margin: 1rem auto 0;
+    cursor: pointer;
 
     .fas {
       display: none;
+      margin-left: 5px;
 
       &.show {
         display: initial;
@@ -169,18 +209,10 @@ export default {
 
 @media (max-width: 1200px) {
   .player-flash {
-    display: grid;
+    justify-content: center;
-    grid-template-columns: minmax(1rem, 1fr) 2fr minmax(1rem, 1fr);
+    align-items: center;
-    margin-bottom: 1rem;
+    padding: 0;
-
+    margin: 0;
-    & > * {
-      grid-column: 1 / -1;
-    }
-
-    #flash-chart-1,
-    #flash-chart-2 {
-      overflow: scroll;
-    }
   }
 }
 </style>