#5 added Hitgroup-Puppet to DamageSite

src/components/TotalDamage.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="player-dmg">
+    <div id="dmg-chart-1"></div>
+    <div id="dmg-chart-2"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
+import {BarChart} from 'echarts/charts';
+import {CanvasRenderer} from 'echarts/renderers';
+import {onMounted, onUnmounted, ref} from "vue";
+import {checkStatEmpty, getPlayerArr} from "../utils";
+import {useStore} from "vuex";
+
+export default {
+  name: "FlashChart",
+  setup() {
+    const store = useStore()
+
+    let myChart1, myChart2
+
+    const getWindowWidth = () => {
+      const windowWidth = window.innerWidth
+      if (windowWidth <= 750)
+        return windowWidth
+      else
+        return 650
+    }
+
+    const setHeight = () => {
+      const windowWidth = getWindowWidth()
+      if (windowWidth >= 751)
+        return windowWidth * 3 / 7.5
+      else if (windowWidth >= 501 && windowWidth <= 750)
+        return windowWidth * 3 / 6.5
+      else
+        return windowWidth * 3 / 5.5
+    }
+
+    const width = ref(getWindowWidth())
+    const height = ref(setHeight())
+
+    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
+      }
+    }
+
+    const optionGen = (team) => {
+      return {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: {
+          show: false
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'value',
+            min: -300
+          }
+        ],
+        yAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              show: false
+            },
+            data: getPlayerArr(store.state.matchDetails.stats, team)
+          }
+        ],
+        series: [
+          {
+            name: 'Team',
+            type: 'bar',
+            stack: 'Total',
+            label: {
+              show: true,
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: dataArr(store.state.matchDetails.stats, team, 'team')
+          },
+          {
+            name: 'Enemy',
+            type: 'bar',
+            stack: 'Total',
+            label: {
+              show: true,
+              position: 'inside'
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: dataArr(store.state.matchDetails.stats, team, 'enemy')
+          }
+        ]
+      }
+    }
+
+    const disposeCharts = () => {
+      if (myChart1 != null && myChart1 !== '' && myChart1 !== undefined) {
+        myChart1.dispose()
+      }
+      if (myChart2 != null && myChart2 !== '' && myChart2 !== undefined) {
+        myChart2.dispose()
+      }
+    }
+
+    const buildCharts = () => {
+      disposeCharts()
+
+      myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: width.value, height: height.value});
+      myChart1.setOption(optionGen(1));
+
+      myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: width.value, height: height.value});
+      myChart2.setOption(optionGen(2));
+    }
+
+    onMounted(() => {
+      if (store.state.matchDetails.stats) {
+        echarts.use([
+          TooltipComponent,
+          GridComponent,
+          LegendComponent,
+          BarChart,
+          CanvasRenderer
+        ]);
+
+        buildCharts()
+      }
+    })
+
+    onUnmounted(() => {
+      disposeCharts()
+    })
+
+    window.onresize = () => {
+      if (window.innerWidth <= 750) {
+        width.value = getWindowWidth() - 20
+        height.value = setHeight()
+      }
+
+      buildCharts()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.player-dmg {
+  display: flex;
+  margin-bottom: 4rem;
+
+  #dmg-chart-1,
+  #dmg-chart-2 {
+    flex-basis: 50%;
+  }
+}
+
+@media (max-width: 1200px) {
+  .player-dmg {
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+  }
+
+}
+</style>