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,68 +25,18 @@ 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 = (team - 1) * 5; i < team * 5; i++) {
-        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))
-        }
-      }
       arr.reverse()
       return arr
     }
 
     const enemyArr = (stats, team) => {
       let arr = []
-      if (team === 1) {
+      for (let i = (team - 1) * 5; i < team * 5; i++) {
-        for (let i = 0; i < 5; i++) {
         arr.push({
           value: checkStatEmpty(stats[i].dmg.enemy),
           itemStyle: {
@@ -93,16 +44,6 @@ export default {
           }
         })
       }
-      } 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}`)
-            }
-          })
-        }
-      }
       arr.reverse()
       return arr
     }
@@ -116,10 +57,7 @@ export default {
           }
         },
         legend: {
-          textStyle: {
+          show: false
-            color: 'white'
-          },
-          data: ['Enemy', 'Team']
         },
         grid: {
           left: '3%',
@@ -138,7 +76,7 @@ export default {
             axisTick: {
               show: false
             },
-            data: playerArr(stats, team)
+            data: getPlayerArr(stats, team)
           }
         ],
         series: [
@@ -173,6 +111,7 @@ export default {
     }
 
     onMounted(() => {
+      if (props.stats) {
         echarts.use([
           TooltipComponent,
           GridComponent,
@@ -188,6 +127,7 @@ export default {
 
         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>

src/components/FlashChart.vue

@@ -1,188 +1,120 @@
 <template>
-  <div :style="props.total.self || props.total.team || props.total.enemy ? 'display: flex' : 'display: none'"
+  <h4 class="text-center mt-3">Flash-Duration <small class="text-muted">(in s)</small></h4>
-       class="player-flash">
+  <div v-if="props.stats" class="player-dmg d-xxl-flex">
-    <div class="heading">
+    <div class="team-1 mx-5">
-      <img :src="props.avatar" alt="Player avatar" class="avatar">
+      <h4 class="text-center mt-3 mb-3">Team 1</h4>
-      <h4>{{ props.name }}</h4>
+      <div id="flash-chart-1"></div>
+    </div>
+    <div class="team-2 mx-5">
+      <h4 class="text-center mt-3 mb-3">Team 2</h4>
+      <div id="flash-chart-2"></div>
     </div>
-    <div :id="'flash-chart-' + props.id"></div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts/core';
-import {LegendComponent, TooltipComponent} from 'echarts/components';
+import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
-import {PieChart} from 'echarts/charts';
+import {BarChart} from 'echarts/charts';
-import {LabelLayout} from 'echarts/features';
 import {CanvasRenderer} from 'echarts/renderers';
 import {onMounted} from "vue";
+import {checkStatEmpty, getPlayerArr} from "../utils";
 
 export default {
   name: "FlashChart",
   props: {
-    id: {
+    stats: {
-      type: Number,
-      default: 0,
-      required: true
-    },
-    avatar: {
-      type: String,
-      default: '',
-      required: true
-    },
-    name: {
-      type: String,
-      default: '',
-      required: true
-    },
-    total: {
-      type: Object,
-      required: true
-    },
-    duration: {
       type: Object,
       required: true
     },
   },
   setup(props) {
-    onMounted(() => {
+    const durationArr = (stats, team, prop) => {
-      echarts.use([
+      if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
-        TooltipComponent,
+        let arr = []
-        LegendComponent,
+        for (let i = (team - 1) * 5; i < team * 5; i++) {
-        PieChart,
+          arr.push(checkStatEmpty(Function('return(function(stats, i){ return stats[i].flash.duration.' + prop + '})')()(stats, i)).toFixed(2))
-        CanvasRenderer,
+        }
-        LabelLayout
+        arr.reverse()
-      ]);
 
-      let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`), {},{width: 600, height: 400});
+        return arr
-      let option
+      }
+    }
 
-      option = {
+    const setOptions = (id, color) => {
+      return {
         tooltip: {
-          trigger: 'item',
+          trigger: 'axis',
-          formatter: '{a} <br/>{b}: {c} ({d}%)'
+          axisPointer: {
+            type: 'shadow',
+            shadowStyle: {
+              shadowBlur: 2,
+              shadowColor: 'rgba(255, 255, 255, .3)'
+            }
+          }
         },
         legend: {
-          data: [
-            {
-              name: 'Self',
           textStyle: {
-                color: 'white',
+            color: 'white'
           }
         },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value',
+          boundaryGap: [0, 0.01]
+        },
+        yAxis: {
+          type: 'category',
+          data: getPlayerArr(props.stats, id)
+        },
+        color: color,
+        series: [
+          {
+            name: 'Enemy',
+            type: 'bar',
+            data: durationArr(props.stats, id, 'enemy'),
+          },
           {
             name: 'Team',
-              textStyle: {
+            type: 'bar',
-                color: 'white'
+            data: durationArr(props.stats, id, 'team'),
-              }
           },
           {
-              name: 'Enemy',
-              textStyle: {
-                color: 'white'
-              }
-            },
-          ]
-        },
-        series: [
-          {
-            name: 'Flash-Count',
-            type: 'pie',
-            radius: [0, '40%'],
-            avoidLabelOverlap: true,
-            itemStyle: {
-              borderRadius: 10,
-              borderColor: '#000',
-              borderWidth: 3
-            },
-            label: {
-              position: 'inside',
-              fontsize: 36,
-              fontWeight: 'bold'
-            },
-            labelLine: {
-              show: false
-            },
-            data: [
-              {
-                value: props.total.self ? props.total.self : null,
             name: 'Self',
-                selected: true
+            type: 'bar',
-              },
+            data: durationArr(props.stats, id, 'self'),
-              {
-                value: props.total.team ? props.total.team : null,
-                name: 'Team'
-              },
-              {
-                value: props.total.enemy ? props.total.enemy : null,
-                name: 'Enemy'
-              }
-            ]
-          },
-          {
-            name: 'Flash-Duration (in s)',
-            type: 'pie',
-            radius: ['45%', '65%'],
-            avoidLabelOverlap: true,
-            itemStyle: {
-              borderRadius: 10,
-              borderColor: '#000',
-              borderWidth: 3
-            },
-            labelLine: {
-              length: 20
-            },
-            label: {
-              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
-              backgroundColor: '#F6F8FC',
-              borderColor: '#8C8D8E',
-              borderWidth: 1,
-              borderRadius: 4,
-              rich: {
-                a: {
-                  color: '#6E7079',
-                  lineHeight: 22,
-                  align: 'center'
-                },
-                hr: {
-                  borderColor: '#8C8D8E',
-                  width: '100%',
-                  borderWidth: 1,
-                  height: 0
-                },
-                b: {
-                  color: '#4C5058',
-                  fontSize: 14,
-                  fontWeight: 'bold',
-                  lineHeight: 33
-                },
-                per: {
-                  color: '#fff',
-                  backgroundColor: '#4C5058',
-                  padding: [3, 4],
-                  borderRadius: 4
-                }
-              }
-            },
-            data: [
-              {
-                value: props.duration.self ? props.duration.self.toFixed(2) : null,
-                name: 'Self'
-              },
-              {
-                value: props.duration.team ? props.duration.team.toFixed(2) : null,
-                name: 'Team'
-              },
-              {
-                value: props.duration.enemy ? props.duration.enemy.toFixed(2) : null,
-                name: 'Enemy'
           }
         ]
       }
-        ]
+    }
-      };
 
-      myChart.setOption(option);
+    let myChart1, myChart2, option1, option2
+
+    onMounted(() => {
+      if (props.stats) {
+        const color = ['indianred', '#69b13b', 'cornflowerblue']
+
+        echarts.use([
+          TooltipComponent,
+          GridComponent,
+          LegendComponent,
+          BarChart,
+          CanvasRenderer
+        ]);
+
+        myChart1 = echarts.init(document.getElementById('flash-chart-1'), {}, {width: 600, height: 400});
+        myChart2 = echarts.init(document.getElementById('flash-chart-2'), {}, {width: 600, height: 400});
+        option1 = setOptions(1, color)
+        option2 = setOptions(2, color)
+
+        myChart1.setOption(option1);
+        myChart2.setOption(option2);
+      }
     })
 
     return {props}
@@ -195,27 +127,9 @@ export default {
   flex-direction: column;
   align-items: center;
 
-  .heading {
-    display: flex;
-    margin-top: 10px;
-    margin-bottom: -20px;
-
-    .avatar {
-      width: 50px;
-      height: 50px;
-      border-radius: 50%;
-      margin-right: 20px;
-    }
-
   h4 {
     margin-top: 7px;
-    }
+    color: cornflowerblue;
-  }
-}
-
-@for $i from 0 through 9 {
-  #flash-chart-#{$i} {
-    margin: 40px 40px -40px 40px;
   }
 }
 </style>

src/components/MultiKillsChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="multi-kills-chart">
+  <div class="multi-kills-chart" v-if="props.stats">
     <h4 class="text-center">Multi-Kills</h4>
     <div id="multi-kills-chart"></div>
   </div>
@@ -89,7 +89,7 @@ export default {
     const optionGen = (player, data) => {
       return {
         tooltip: {
-          position: 'top'
+          position: 'top',
         },
         grid: {
           height: '50%',
@@ -130,7 +130,6 @@ export default {
         },
         series: [
           {
-            name: 'Mutlki-Kill',
             type: 'heatmap',
             data: data,
             label: {

src/components/UtilityChartTotal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="utility-chart-total">
+  <div class="utility-chart-total" v-if="props.stats">
     <div class="heading">
       <h4>Total Utility Damage</h4>
     </div>

src/utils/Utils.js

@@ -10,6 +10,39 @@ export const GetWinLoss = (matchResult, teamId) => {
   }
 }
 
+export 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
+}
+
+export const checkStatEmpty = (stat) => {
+  if (stat)
+    return stat
+  return 0
+}
+
+export const getPlayerArr = (stats, team) => {
+  let arr = []
+  for (let i = (team - 1) * 5; i < team * 5; i++) {
+    arr.push({
+      value: truncate(stats[i].player.name, 15),
+      textStyle: {
+        color: 'white'
+      }
+    })
+  }
+  arr.reverse()
+  return arr
+}
+
 export const TrackMe = async (id64, authcode, sharecode) => {
   let statusError = ''
   let status = 200

src/utils/index.js

@@ -4,7 +4,7 @@ import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
 import {GetUser} from "./ApiRequests";
-import {GetWinLoss, TrackMe} from "./Utils";
+import {GetWinLoss, TrackMe, truncate, checkStatEmpty, getPlayerArr} from "./Utils";
 
 export {
   FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
@@ -13,5 +13,5 @@ export {
   GetHLTV_1,
   DisplayRank, LoadImage,
   GetUser,
-  GetWinLoss, TrackMe
+  GetWinLoss, TrackMe, truncate, checkStatEmpty, getPlayerArr
 }

src/views/Match.vue

@@ -70,13 +70,7 @@
     </div>
 
     <div id="flashes">
-      <FlashChart v-for="(player, id) in data.stats" :id="id"
+      <FlashChart :stats="data.stats" />
-                  :key="player.player.steamid64"
-                  :avatar="player.player.avatar"
-                  :duration="player.flash.duration"
-                  :name="player.player.name"
-                  :total="player.flash.total"
-      />
     </div>
 
     <div id="utility">

src/views/Player.vue

@@ -201,7 +201,7 @@
 </template>
 
 <script>
-import {onMounted, reactive, watch} from "vue";
+import {onMounted, reactive} from "vue";
 import router from "../router";
 import {useStore} from "vuex";
 import {