refactored to match api-changes + added multi-kill-chart

src/components/DamageChart.vue

@@ -71,11 +71,11 @@ export default {
       let arr = []
       if (team === 1) {
         for (let i = 0; i < 5; i++) {
-          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
+          arr.push(-checkStatEmpty(stats[i].dmg.team))
         }
       } else {
         for (let i = 5; i < stats.length; i++) {
-          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
+          arr.push(-checkStatEmpty(stats[i].dmg.team))
         }
       }
       arr.reverse()
@@ -87,18 +87,18 @@ export default {
       if (team === 1) {
         for (let i = 0; i < 5; i++) {
           arr.push({
-            value: checkStatEmpty(stats[i].extended.dmg.enemy),
+            value: checkStatEmpty(stats[i].dmg.enemy),
             itemStyle: {
-              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].extended.color}`)
+              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
             }
           })
         }
       } else {
         for (let i = 5; i < stats.length; i++) {
           arr.push({
-            value: checkStatEmpty(stats[i].extended.dmg.enemy),
+            value: checkStatEmpty(stats[i].dmg.enemy),
             itemStyle: {
-              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].extended.color}`)
+              color: getComputedStyle(document.documentElement).getPropertyValue(`--csgo-${stats[i].color}`)
             }
           })
         }

src/components/MultiKillsChart.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="multi-kills-chart">
+    <h4 class="text-center">Multi-Kills</h4>
+    <div id="multi-kills-chart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import {GridComponent, TooltipComponent, VisualMapComponent} from 'echarts/components';
+import {HeatmapChart} from 'echarts/charts';
+import {CanvasRenderer} from 'echarts/renderers';
+import {onMounted} from "vue";
+
+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))
+      }
+
+      arr.reverse()
+      return arr
+    }
+
+    const multiKillArr = (stats) => {
+      let arr = []
+      for (let i = 0; i < stats.length; i++) {
+        for (let j = 0; j < multiKills.length; j++) {
+          if (j === 0)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.duo)])
+          if (j === 1)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.triple)])
+          if (j === 2)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.quad)])
+          if (j === 3)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.pent)])
+        }
+      }
+      return arr
+    }
+
+    const getMax = (stats) => {
+      let max = 0
+      for (let i = 0; i < stats.length; i++) {
+        if (stats[i].multi_kills.duo > max)
+          max = stats[i].multi_kills.duo
+        if (stats[i].multi_kills.triple > max)
+          max = stats[i].multi_kills.triple
+        if (stats[i].multi_kills.quad > max)
+          max = stats[i].multi_kills.quad
+        if (stats[i].multi_kills.pent > max)
+          max = stats[i].multi_kills.pent
+      }
+      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) => {
+      return {
+        tooltip: {
+          position: 'top'
+        },
+        grid: {
+          height: '50%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: player,
+          splitArea: {
+            show: true
+          },
+          axisLabel: {
+            fontSize: 14,
+            color: 'white',
+            rotate: 50
+          }
+        },
+        yAxis: {
+          type: 'category',
+          data: multiKills,
+          splitArea: {
+            show: true
+          },
+          axisLabel: {
+            color: 'white'
+          }
+        },
+        visualMap: {
+          min: 0,
+          max: max,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '15%',
+          textStyle: {
+            color: 'white'
+          }
+        },
+        series: [
+          {
+            name: 'Mutlki-Kill',
+            type: 'heatmap',
+            data: data,
+            label: {
+              fontSize: 14,
+              show: true
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+    }
+
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        GridComponent,
+        VisualMapComponent,
+        HeatmapChart,
+        CanvasRenderer
+      ]);
+
+
+      let myChart = echarts.init(document.getElementById('multi-kills-chart'), {}, {width: 1000, height: 600});
+      let option = optionGen(player, data)
+
+      myChart.setOption(option);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.multi-kills-chart {
+  flex-direction: column;
+  align-items: center;
+
+  h4 {
+    margin-top: 1rem;
+    margin-bottom: -40px;
+  }
+
+  #multi-kills-chart {
+    margin: 0;
+  }
+}
+</style>

src/components/ScoreTeam.vue

@@ -27,20 +27,20 @@
             :assists="player.assists"
             :avatar="player.player.avatar"
             :deaths="player.deaths"
-            :dmg="player.extended?.dmg?.enemy"
+            :dmg="player.dmg?.enemy"
             :hs="player.headshot"
             :kdiff="player.kills - player.deaths"
             :kills="player.kills"
-            :mk_duo="player.extended?.multi_kills?.duo"
-            :mk_pent="player.extended?.multi_kills?.pent"
-            :mk_quad="player.extended?.multi_kills?.quad"
-            :mk_triple="player.extended?.multi_kills?.triple"
+            :mk_duo="player.multi_kills?.duo"
+            :mk_pent="player.multi_kills?.pent"
+            :mk_quad="player.multi_kills?.quad"
+            :mk_triple="player.multi_kills?.triple"
             :mvp="player.mvp"
             :name="player.player.name"
             :player_score="player.score"
-            :rank="player.extended?.rank?.old"
+            :rank="player.rank?.old"
             :rounds_played="props.rounds_played"
-            :color="player.extended?.color"
+            :color="player.color"
             :tracked="player.player.tracked"
             :parsed="props.parsed"
         />
@@ -131,4 +131,4 @@ table {
     cursor: help;
   }
 }
-</style>
+</style>

src/components/UtilityChartTotal.vue

@@ -34,7 +34,7 @@ export default {
     const seriesArr = (stats) => {
       let arr = []
       for (let i = 0; i < stats.length; i++) {
-        const sum = checkStatEmpty(stats[i].extended.dmg.ud.flames) + checkStatEmpty(stats[i].extended.dmg.ud.flash) + checkStatEmpty(stats[i].extended.dmg.ud.he) + checkStatEmpty(stats[i].extended.dmg.ud.smoke)
+        const sum = checkStatEmpty(stats[i].dmg.ud.flames) + checkStatEmpty(stats[i].dmg.ud.flash) + checkStatEmpty(stats[i].dmg.ud.he) + checkStatEmpty(stats[i].dmg.ud.smoke)
 
         if (sum !== 0) {
           arr.push({