more refactoring ✨

src/components/DamageChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="player-dmg">
+  <div v-if="props.stats" class="player-dmg">
     <h4 class="text-center mt-3 mb-3">Team 1</h4>
     <div id="dmg-chart-1"></div>
     <hr>
@@ -14,6 +14,7 @@ import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/componen
 import {BarChart} from 'echarts/charts';
 import {CanvasRenderer} from 'echarts/renderers';
 import {onMounted} from "vue";
+import {checkStatEmpty, getPlayerArr} from "../utils";
 
 export default {
   name: "FlashChart",
@@ -24,59 +25,10 @@ export default {
     }
   },
   setup(props) {
-    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 playerArr = (stats, team) => {
-      let arr = []
-      if (team === 1) {
-        for (let i = 0; i < 5; i++) {
-          arr.push({
-            value: truncate(stats[i].player.name, 10),
-            textStyle: {
-              color: 'white'
-            }
-          })
-        }
-      } else {
-        for (let i = 5; i < stats.length; i++) {
-          arr.push({
-            value: truncate(stats[i].player.name, 10),
-            textStyle: {
-              color: 'white'
-            }
-          })
-        }
-      }
-      arr.reverse()
-      return arr
-    }
-
     const teamArr = (stats, team) => {
       let arr = []
-      if (team === 1) {
-        for (let i = 0; i < 5; i++) {
-          arr.push(-checkStatEmpty(stats[i].dmg.team))
-        }
-      } else {
-        for (let i = 5; i < stats.length; i++) {
-          arr.push(-checkStatEmpty(stats[i].dmg.team))
-        }
+      for (let i = (team - 1) * 5; i < team * 5; i++) {
+        arr.push(-checkStatEmpty(stats[i].dmg.team))
       }
       arr.reverse()
       return arr
@@ -84,24 +36,13 @@ export default {
 
     const enemyArr = (stats, team) => {
       let arr = []
-      if (team === 1) {
-        for (let i = 0; i < 5; i++) {
-          arr.push({
-            value: checkStatEmpty(stats[i].dmg.enemy),
-            itemStyle: {
-              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
-            }
-          })
-        }
-      } else {
-        for (let i = 5; i < stats.length; i++) {
-          arr.push({
-            value: checkStatEmpty(stats[i].dmg.enemy),
-            itemStyle: {
-              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
-            }
-          })
-        }
+      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}`)
+          }
+        })
       }
       arr.reverse()
       return arr
@@ -116,10 +57,7 @@ export default {
           }
         },
         legend: {
-          textStyle: {
-            color: 'white'
-          },
-          data: ['Enemy', 'Team']
+          show: false
         },
         grid: {
           left: '3%',
@@ -138,7 +76,7 @@ export default {
             axisTick: {
               show: false
             },
-            data: playerArr(stats, team)
+            data: getPlayerArr(stats, team)
           }
         ],
         series: [
@@ -173,21 +111,23 @@ export default {
     }
 
     onMounted(() => {
-      echarts.use([
-        TooltipComponent,
-        GridComponent,
-        LegendComponent,
-        BarChart,
-        CanvasRenderer
-      ]);
+      if (props.stats) {
+        echarts.use([
+          TooltipComponent,
+          GridComponent,
+          LegendComponent,
+          BarChart,
+          CanvasRenderer
+        ]);
 
-      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 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)
 
-      myChart1.setOption(option1);
-      myChart2.setOption(option2);
+        myChart1.setOption(option1);
+        myChart2.setOption(option2);
+      }
     })
 
     return {props}
@@ -199,34 +139,11 @@ export default {
 .player-dmg {
   flex-direction: column;
   align-items: center;
-
-  .heading {
-    display: flex;
-    margin-top: 10px;
-    margin-bottom: -30px;
-
-    .avatar {
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      margin-right: 20px;
-      color: #ff4343;
-    }
-
-    h4 {
-      margin-top: 7px;
-    }
-  }
-
-  p {
-    padding-top: 40px;
-    margin-bottom: -20px;
-  }
 }
 
 @for $i from 0 through 9 {
   #dmg-chart-#{$i} {
-    margin: 0;
+    margin: -50px 0 0 0;
   }
 }
 </style>