csgowtf/src/components/MultiKillsChart.vue

<template>
  <div class="charts">
    <div id="multi-kills-chart-1"></div>
    <div id="multi-kills-chart-2"></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, onUnmounted, ref} from "vue";
import {checkStatEmpty, getPlayerArr} from "../utils";
import {useStore} from "vuex";

export default {
  name: "MultiKillsChart",
  setup() {
    const store = useStore()

    const multiKills = ['2k', '3k', '4k', '5k']
    let myChart1, myChart2
    const width = ref(window.innerWidth <= 500 ? window.innerWidth : 500)
    const height = ref(width.value)

    const multiKillArr = (stats, team) => {
      let arr = []
      for (let i = (team - 1) * 5; i < team * 5; i++) {
        for (let j = 0; j < multiKills.length; j++) {
          if (j === 0)
            arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.duo) === 0 ? null : stats[i].multi_kills.duo])
          if (j === 1)
            arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.triple) === 0 ? null : stats[i].multi_kills.triple])
          if (j === 2)
            arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.quad) === 0 ? null : stats[i].multi_kills.quad])
          if (j === 3)
            arr.push([i % 5, j, checkStatEmpty(stats[i].multi_kills.pent) === 0 ? null : stats[i].multi_kills.pent])
        }
      }
      return arr
    }

    const getMax = (stats, team) => {
      let max = 0
      for (let i = (team - 1) * 5; i < team * 5; 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 optionGen = (team) => {
      return {
        tooltip: {},
        grid: {
          height: '65%',
          top: '0%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          data: getPlayerArr(store.state.matchDetails.stats, team, true).reverse(),
          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: getMax(store.state.matchDetails.stats, team),
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '5%',
          textStyle: {
            color: 'white'
          }
        },
        series: [
          {
            type: 'heatmap',
            data: multiKillArr(store.state.matchDetails.stats, team),
            label: {
              fontSize: 14,
              show: true
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }

    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('multi-kills-chart-1'), {}, {
        width: width.value,
        height: height.value
      });
      myChart1.setOption(optionGen(1));

      myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {
        width: width.value,
        height: height.value
      });
      myChart2.setOption(optionGen(2));
    }

    onMounted(() => {
      if (store.state.matchDetails.stats) {
        echarts.use([
          TooltipComponent,
          GridComponent,
          VisualMapComponent,
          HeatmapChart,
          CanvasRenderer
        ]);

        buildCharts()
      }
    })

    onUnmounted(() => {
      disposeCharts()
    })

    window.onresize = () => {
      if (window.innerWidth <= 500) {
        width.value = window.innerWidth - 20
        height.value = width.value

        buildCharts()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.charts {
  display: flex;

  #multi-kills-chart-1,
  #multi-kills-chart-2 {
    flex-basis: 50%;
  }
}
</style>