csgowtf/src/components/MultiKillsChart.vue

<template>
  <div class="multi-kills">
    <h3>Multi-Kills</h3>
    <div class="flexbreak"></div>
    <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} from "vue";
import {checkStatEmpty, getPlayerArr} from "../utils";
import {useStore} from "vuex";

export default {
  name: "FlashChart",
  setup() {
    const store = useStore()
    const multiKills = ['2k', '3k', '4k', '5k']

    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),
          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)'
              }
            }
          }
        ]
      }
    }

    let myChart1, myChart2

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

        myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {width: 500, height: 500});
        myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: 500, height: 500});

        myChart1.setOption(optionGen(1));
        myChart2.setOption(optionGen(2));
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.multi-kills {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;

  .flexbreak {
    flex-basis: 100%;
    margin-bottom: 2rem;
    height: 0;
  }

  h3 {
    margin: 1rem auto -1rem;
  }

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

@media (max-width: 1200px) {
  .multi-kills {
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0 0 0 0;
    overflow: hidden;

    #multi-kills-chart-1,
    #multi-kills-chart-2 {
      flex-basis: 100%;
      margin: 2rem 0 0 0;
      overflow: scroll;
    }
  }
}
</style>