csgowtf/src/components/FlashChart.vue

<template>
  <div class="player-flash">
    <h3 class="text-center mt-2">Flash</h3>
    <div class="flex-break"></div>
    <div class="toggle-btn">
      <div @click="toggleShow">
        <table class="table table-borderless text-muted">
          <tr>
            <td>
              <span class="text-uppercase float-end" :class="toggle === 'duration' ? 'text-warning' : ''">Duration</span>
            </td>
            <td class="text-center">
              <i id="toggle-off" class="fa fa-toggle-off show"></i>
              <i id="toggle-on" class="fa fa-toggle-on"></i>
            </td>
            <td>
              <span class="text-uppercase float-start" :class="toggle === 'total' ? 'text-warning' : ''">Count</span>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="flex-break"></div>
    <div id="flash-chart-1"></div>
    <div id="flash-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, watch} from "vue";
import {checkStatEmpty, getPlayerArr} from "@/utils";
import {useStore} from "vuex";

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

    const toggle = ref('duration')
    let myChart1, myChart2
    const color = ['#bb792c', '#9bd270', '#eac42a']
    const width = ref(window.innerWidth <= 600 ? window.innerWidth : 600)
    const height = ref(width.value * 2 / 3)

    const toggleShow = () => {
      const offBtn = document.getElementById('toggle-off')
      const onBtn = document.getElementById('toggle-on')

      if (offBtn.classList.contains('show')) {
        offBtn.classList.remove('show')
        onBtn.classList.add('show')
        toggle.value = 'total'
      } else if (onBtn.classList.contains('show')) {
        onBtn.classList.remove('show')
        offBtn.classList.add('show')
        toggle.value = 'duration'
      }
    }

    const valueArr = (stats, team, toggle, prop) => {
      if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
        let arr = []
        for (let i = (team - 1) * 5; i < team * 5; i++) {
          arr.push(checkStatEmpty(Function('return(function(stats, i){ return stats[i].flash.' + toggle.value + '.' + prop + '})')()(stats, i)).toFixed(2))
        }
        arr.reverse()

        return arr
      }
    }

    const setOptions = (id, color) => {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              shadowBlur: 2,
              shadowColor: 'rgba(255, 255, 255, .3)'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: getPlayerArr(store.state.matchDetails.stats, id, true)
        },
        color: color,
        series: [
          {
            name: 'Enemy',
            type: 'bar',
            data: valueArr(store.state.matchDetails.stats, id, toggle, 'enemy'),
          },
          {
            name: 'Team',
            type: 'bar',
            data: valueArr(store.state.matchDetails.stats, id, toggle, 'team'),
          },
          {
            name: 'Self',
            type: 'bar',
            data: valueArr(store.state.matchDetails.stats, id, toggle, 'self'),
          }
        ]
      }
    }

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

      myChart2 = echarts.init(document.getElementById('flash-chart-2'), {}, {
        width: width.value,
        height: height.value
      });
      myChart2.setOption(setOptions(2, color));
    }

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

        buildCharts()
      }
    })

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

    watch(() => toggle.value, () => {
      buildCharts()
    })

    window.onresize = () => {
      if (window.innerWidth <= 600) {
        width.value = window.innerWidth - 20
        height.value = width.value * 2 / 3

        buildCharts()
      }
    }

    return {toggleShow, toggle}
  }
}
</script>

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

  .flex-break {
    flex-basis: 100%;
    height: 0;
  }

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

  .toggle-btn {
    margin: 0 auto;
    cursor: pointer;

    table {
      margin-top: 1rem;

      td {
        font-size: .8rem;
      }

      td:first-child,
      td:last-child {
        max-width: 80px;
        width: 80px;
      }
      td:nth-child(2) {
        max-width: 30px;
        width: 30px;
      }
    }

    .fa {
      display: none;

      &.show {
        display: initial;
      }
    }
  }

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

@media (max-width: 1200px) {
  .player-flash {
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
  }
}
</style>