csgowtf/src/components/DamageChart.vue

<template>
  <div class="player-dmg">
    <h4 class="text-center mt-3 mb-3">Team 1</h4>
    <div id="dmg-chart-1"></div>
    <hr>
    <h4 class="text-center mt-3 mb-3">Team 2</h4>
    <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} from "vue";

export default {
  name: "FlashChart",
  props: {
    stats: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    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 playerArr = (stats, team) => {
      let arr = []
      if (team === 1) {
        for (let i = 0; i < 5; i++) {
          arr.push(truncate(stats[i].player.name, 10))
        }
      } else {
        for (let i = 5; i < stats.length; i++) {
          arr.push(truncate(stats[i].player.name, 10))
        }
      }
      arr.reverse()
      return arr
    }

    const teamArr = (stats, team) => {
      let arr = []
      if (team === 1) {
        for (let i = 0; i < 5; i++) {
          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
        }
      } else {
        for (let i = 5; i < stats.length; i++) {
          arr.push(-checkStatEmpty(stats[i].extended.dmg.team))
        }
      }
      arr.reverse()
      return arr
    }

    const enemyArr = (stats, team) => {
      let arr = []
      if (team === 1) {
        for (let i = 0; i < 5; i++) {
          arr.push(checkStatEmpty(stats[i].extended.dmg.enemy))
        }
      } else {
        for (let i = 5; i < stats.length; i++) {
          arr.push(checkStatEmpty(stats[i].extended.dmg.enemy))
        }
      }
      arr.reverse()
      return arr
    }

    const optionGen = (stats, team) => {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: 'white'
          },
          data: ['Enemy', 'Team']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value'
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {
              show: false
            },
            data: playerArr(stats, team)
          }
        ],
        series: [
          {
            name: 'Team',
            type: 'bar',
            stack: 'Total',
            color: 'firebrick',
            label: {
              show: true,
            },
            emphasis: {
              focus: 'series'
            },
            data: teamArr(stats, team)
          },
          {
            name: 'Enemy',
            type: 'bar',
            stack: 'Total',
            color: ['orange'],
            label: {
              show: true,
              position: 'inside'
            },
            emphasis: {
              focus: 'series'
            },
            data: enemyArr(stats, team)
          }
        ]
      }
    }

    onMounted(() => {
      echarts.use([
        TooltipComponent,
        GridComponent,
        LegendComponent,
        BarChart,
        CanvasRenderer
      ]);

      let myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
      let myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
      let option1 = optionGen(props.stats, 1)
      let option2 = optionGen(props.stats, 2)

      myChart1.setOption(option1);
      myChart2.setOption(option2);
    })

    return {props}
  }
}
</script>

<style lang="scss" scoped>
.player-dmg {
  flex-direction: column;
  align-items: center;

  .heading {
    display: flex;
    margin-top: 10px;
    margin-bottom: -30px;
    //color: darkolivegreen;

    .avatar {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      margin-right: 20px;
      color: #ff4343;
    }

    h4 {
      margin-top: 7px;
    }
  }

  p {
    padding-top: 40px;
    margin-bottom: -20px;
  }
}

@for $i from 0 through 9 {
  #dmg-chart-#{$i} {
    margin: 0;
  }
}
</style>