reworked the sub-navigation on the Match-page

src/components/MultiKillsChart.vue

@@ -1,7 +1,14 @@
 <template>
-  <div class="multi-kills-chart" v-if="props.stats">
-    <h4 class="text-center">Multi-Kills</h4>
-    <div id="multi-kills-chart"></div>
+  <h3 class="text-center col-12 mt-3">Multi-Kills</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="multi-kills-chart-1"></div>
+    </div>
+    <div class="team-2 mx-5">
+      <h4 class="text-center mt-3 mb-3">Team 2</h4>
+      <div id="multi-kills-chart-2"></div>
+    </div>
   </div>
 </template>
 
@@ -11,46 +18,35 @@ import {GridComponent, TooltipComponent, VisualMapComponent} from 'echarts/compo
 import {HeatmapChart} from 'echarts/charts';
 import {CanvasRenderer} from 'echarts/renderers';
 import {onMounted} from "vue";
+import {getPlayerArr, checkStatEmpty} from "../utils";
+import {useStore} from "vuex";
 
 export default {
   name: "FlashChart",
-  props: {
-    stats: {
-      type: Object,
-      required: true
-    }
-  },
-  setup(props) {
-    const teamArr = (stats) => {
-      let arr = []
-      for (let i = 0; i < stats.length; i++) {
-        arr.push(truncate(checkStatEmpty(stats[i].player.name), 15))
-      }
+  setup() {
+    const store = useStore()
+    const multiKills = ['2k', '3k', '4k', '5k']
 
-      arr.reverse()
-      return arr
-    }
-
-    const multiKillArr = (stats) => {
+    const multiKillArr = (stats, team) => {
       let arr = []
-      for (let i = 0; i < stats.length; i++) {
+      for (let i = (team - 1) * 5; i < team * 5; i++) {
         for (let j = 0; j < multiKills.length; j++) {
           if (j === 0)
-            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.duo)])
+            arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.duo)])
           if (j === 1)
-            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.triple)])
+            arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.triple)])
           if (j === 2)
-            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.quad)])
+            arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.quad)])
           if (j === 3)
-            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.pent)])
+            arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.pent)])
         }
       }
       return arr
     }
 
-    const getMax = (stats) => {
+    const getMax = (stats, team) => {
       let max = 0
-      for (let i = 0; i < stats.length; i++) {
+      for (let i = (team - 1) * 5; i < team * 5; i++) {
         if (stats[i].multi_kills.duo > max)
           max = stats[i].multi_kills.duo
         if (stats[i].multi_kills.triple > max)
@@ -63,41 +59,17 @@ export default {
       return max
     }
 
-    const checkStatEmpty = (stat) => {
-      if (stat)
-        return stat
-    }
-
-    const truncate = (str, len, ending) => {
-      if (len == null)
-        len = 100
-
-      if (ending == null)
-        ending = '..'
-
-      if (str.length > len)
-        return str.substring(0, len - ending.length) + ending
-      else
-        return str
-    }
-
-    const multiKills = ['2k', '3k', '4k', '5k']
-    const player = teamArr(props.stats)
-    const data = multiKillArr(props.stats)
-    const max = getMax(props.stats)
-
-    const optionGen = (player, data) => {
+    const optionGen = (team) => {
       return {
-        tooltip: {
-          position: 'top',
-        },
+        tooltip: {},
         grid: {
-          height: '50%',
-          top: '10%'
+          height: '65%',
+          top: '0%',
+          bottom: '10%'
         },
         xAxis: {
           type: 'category',
-          data: player,
+          data: getPlayerArr(store.state.matchDetails.stats, team, true),
           splitArea: {
             show: true
           },
@@ -119,11 +91,11 @@ export default {
         },
         visualMap: {
           min: 0,
-          max: max,
+          max: getMax(store.state.matchDetails.stats, team),
           calculable: true,
           orient: 'horizontal',
           left: 'center',
-          bottom: '15%',
+          bottom: '5%',
           textStyle: {
             color: 'white'
           }
@@ -131,7 +103,7 @@ export default {
         series: [
           {
             type: 'heatmap',
-            data: data,
+            data: multiKillArr(store.state.matchDetails.stats, team),
             label: {
               fontSize: 14,
               show: true
@@ -156,14 +128,12 @@ export default {
         CanvasRenderer
       ]);
 
+        let myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {width: 500, height: 500});
+        let myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: 500, height: 500});
 
-      let myChart = echarts.init(document.getElementById('multi-kills-chart'), {}, {width: 1000, height: 600});
-      let option = optionGen(player, data)
-
-      myChart.setOption(option);
+        myChart1.setOption(optionGen(1));
+        myChart2.setOption(optionGen(2));
     })
-
-    return {props}
   }
 }
 </script>
@@ -174,12 +144,8 @@ export default {
   align-items: center;
 
   h4 {
-    margin-top: 1rem;
-    margin-bottom: -40px;
-  }
-
-  #multi-kills-chart {
-    margin: 0;
+    margin-top: 7px;
+    color: cornflowerblue;
   }
 }
 </style>