refactored to match api-changes + added multi-kill-chart

src/components/MultiKillsChart.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="multi-kills-chart">
+    <h4 class="text-center">Multi-Kills</h4>
+    <div id="multi-kills-chart"></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";
+
+export default {
+  name: "FlashChart",
+  props: {
+    stats: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const teamArr = (stats) => {
+      let arr = []
+      for (let i = 0; i < stats.length; i++) {
+        arr.push(truncate(checkStatEmpty(stats[i].player.name), 15))
+      }
+
+      arr.reverse()
+      return arr
+    }
+
+    const multiKillArr = (stats) => {
+      let arr = []
+      for (let i = 0; i < stats.length; i++) {
+        for (let j = 0; j < multiKills.length; j++) {
+          if (j === 0)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.duo)])
+          if (j === 1)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.triple)])
+          if (j === 2)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.quad)])
+          if (j === 3)
+            arr.push([i, j, checkStatEmpty(stats[i].multi_kills.pent)])
+        }
+      }
+      return arr
+    }
+
+    const getMax = (stats) => {
+      let max = 0
+      for (let i = 0; i < stats.length; 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 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 multiKills = ['2k', '3k', '4k', '5k']
+    const player = teamArr(props.stats)
+    const data = multiKillArr(props.stats)
+    const max = getMax(props.stats)
+
+    const optionGen = (player, data) => {
+      return {
+        tooltip: {
+          position: 'top'
+        },
+        grid: {
+          height: '50%',
+          top: '10%'
+        },
+        xAxis: {
+          type: 'category',
+          data: player,
+          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: max,
+          calculable: true,
+          orient: 'horizontal',
+          left: 'center',
+          bottom: '15%',
+          textStyle: {
+            color: 'white'
+          }
+        },
+        series: [
+          {
+            name: 'Mutlki-Kill',
+            type: 'heatmap',
+            data: data,
+            label: {
+              fontSize: 14,
+              show: true
+            },
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      }
+    }
+
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        GridComponent,
+        VisualMapComponent,
+        HeatmapChart,
+        CanvasRenderer
+      ]);
+
+
+      let myChart = echarts.init(document.getElementById('multi-kills-chart'), {}, {width: 1000, height: 600});
+      let option = optionGen(player, data)
+
+      myChart.setOption(option);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.multi-kills-chart {
+  flex-direction: column;
+  align-items: center;
+
+  h4 {
+    margin-top: 1rem;
+    margin-bottom: -40px;
+  }
+
+  #multi-kills-chart {
+    margin: 0;
+  }
+}
+</style>