csgowtf/src/components/TotalDamage.vue

<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>