reworked the sub-navigation on the Match-page

src/components/DamageChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="props.stats" class="player-dmg">
+  <div class="player-dmg">
     <h4 class="text-center mt-3 mb-3">Team 1</h4>
     <div id="dmg-chart-1"></div>
     <hr>
@@ -15,37 +15,27 @@ 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) {
-    const teamArr = (stats, team) => {
-      let arr = []
-      for (let i = (team - 1) * 5; i < team * 5; i++) {
-        arr.push(-checkStatEmpty(stats[i].dmg.team))
-      }
-      arr.reverse()
-      return arr
-    }
+  setup() {
+    const store = useStore()
 
-    const enemyArr = (stats, team) => {
-      let arr = []
-      for (let i = (team - 1) * 5; i < team * 5; i++) {
-        arr.push({
-          value: checkStatEmpty(stats[i].dmg.enemy),
-          itemStyle: {
-            color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
-          }
-        })
+    const dataArr = (stats, team, prop) => {
+      if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
+        let arr = []
+        for (let i = (team - 1) * 5; i < team * 5; i++) {
+          arr.push({
+            value: checkStatEmpty(Function('return(function(stats, i){ return stats[i].dmg.' + prop + '})')()(stats, i)) * (prop === 'enemy' ? 1 : -1),
+            itemStyle: {
+              color: prop === 'enemy' ? getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`) : 'firebrick'
+            }
+          })
+        }
+        arr.reverse()
+        return arr
       }
-      arr.reverse()
-      return arr
     }
 
     const optionGen = (stats, team) => {
@@ -84,14 +74,13 @@ export default {
             name: 'Team',
             type: 'bar',
             stack: 'Total',
-            color: 'firebrick',
             label: {
               show: true,
             },
             emphasis: {
               focus: 'series'
             },
-            data: teamArr(stats, team)
+            data: dataArr(stats, team, 'team')
           },
           {
             name: 'Enemy',
@@ -104,14 +93,14 @@ export default {
             emphasis: {
               focus: 'series'
             },
-            data: enemyArr(stats, team)
+            data: dataArr(stats, team, 'enemy')
           }
         ]
       }
     }
 
     onMounted(() => {
-      if (props.stats) {
+      if (store.state.matchDetails.stats) {
         echarts.use([
           TooltipComponent,
           GridComponent,
@@ -122,15 +111,13 @@ export default {
 
         let myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
         let myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
-        let option1 = optionGen(props.stats, 1)
-        let option2 = optionGen(props.stats, 2)
+        let option1 = optionGen(store.state.matchDetails.stats, 1)
+        let option2 = optionGen(store.state.matchDetails.stats, 2)
 
         myChart1.setOption(option1);
         myChart2.setOption(option2);
       }
     })
-
-    return {props}
   }
 }
 </script>