more match-info, parsed-icon on player-page, disabled score-nav-links for not-parsed demos

src/components/DamageChart.vue

@@ -0,0 +1,211 @@
+<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))
+        }
+      }
+      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))
+        }
+      }
+      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))
+        }
+      }
+      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>