reworked the sub-navigation on the Match-page

src/components/FlashChart.vue

@@ -1,6 +1,6 @@
 <template>
-  <h4 class="text-center mt-3">Flash-Duration <small class="text-muted">(in s)</small></h4>
-  <div v-if="props.stats" class="player-dmg d-xxl-flex">
+  <h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3>
+  <div class="player-dmg d-xxl-flex">
     <div class="team-1 mx-5">
       <h4 class="text-center mt-3 mb-3">Team 1</h4>
       <div id="flash-chart-1"></div>
@@ -19,16 +19,13 @@ import {BarChart} from 'echarts/charts';
 import {CanvasRenderer} from 'echarts/renderers';
 import {onMounted} from "vue";
 import {checkStatEmpty, getPlayerArr} from "../utils";
+import {useStore} from "vuex";
 
 export default {
   name: "FlashChart",
-  props: {
-    stats: {
-      type: Object,
-      required: true
-    },
-  },
-  setup(props) {
+  setup() {
+    const store = useStore()
+
     const durationArr = (stats, team, prop) => {
       if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
         let arr = []
@@ -53,11 +50,6 @@ export default {
             }
           }
         },
-        legend: {
-          textStyle: {
-            color: 'white'
-          }
-        },
         grid: {
           left: '3%',
           right: '4%',
@@ -70,24 +62,24 @@ export default {
         },
         yAxis: {
           type: 'category',
-          data: getPlayerArr(props.stats, id)
+          data: getPlayerArr(store.state.matchDetails.stats, id, true)
         },
         color: color,
         series: [
           {
             name: 'Enemy',
             type: 'bar',
-            data: durationArr(props.stats, id, 'enemy'),
+            data: durationArr(store.state.matchDetails.stats, id, 'enemy'),
           },
           {
             name: 'Team',
             type: 'bar',
-            data: durationArr(props.stats, id, 'team'),
+            data: durationArr(store.state.matchDetails.stats, id, 'team'),
           },
           {
             name: 'Self',
             type: 'bar',
-            data: durationArr(props.stats, id, 'self'),
+            data: durationArr(store.state.matchDetails.stats, id, 'self'),
           }
         ]
       }
@@ -96,7 +88,7 @@ export default {
     let myChart1, myChart2, option1, option2
 
     onMounted(() => {
-      if (props.stats) {
+      if (store.state.matchDetails.stats) {
         const color = ['indianred', '#69b13b', 'cornflowerblue']
 
         echarts.use([
@@ -116,8 +108,6 @@ export default {
         myChart2.setOption(option2);
       }
     })
-
-    return {props}
   }
 }
 </script>