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

2021-10-12 02:43:20 +02:00
parent 76aba61361
commit a53c4a3c14
10 changed files with 487 additions and 78 deletions
--- a/src/components/UtilityChartTotal.vue
+++ b/src/components/UtilityChartTotal.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="utility-chart-total">
+    <div class="heading">
+      <h4>Total Utility Damage</h4>
+    </div>
+    <div id="utility-chart-total"></div>
+    <hr>
+  </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
+      else
+        return 0
+    }
+
+    const seriesArr = (stats) => {
+      let arr = []
+      for (let i = 0; i < stats.length; i++) {
+        const sum = checkStatEmpty(stats[i].extended.dmg.ud.flames) + checkStatEmpty(stats[i].extended.dmg.ud.flash) + checkStatEmpty(stats[i].extended.dmg.ud.he) + checkStatEmpty(stats[i].extended.dmg.ud.smoke)
+
+        if (sum !== 0) {
+          arr.push({
+            name: stats[i].player.name,
+            type: 'bar',
+            stack: 'total',
+            label: {
+              show: true
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [sum]
+          })
+        }
+      }
+
+      arr.sort((a, b) => parseFloat(b.data[0]) - parseFloat(a.data[0]))
+
+      return arr
+    }
+
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        GridComponent,
+        LegendComponent,
+        BarChart,
+        CanvasRenderer
+      ]);
+
+      let myChart = echarts.init(document.getElementById('utility-chart-total'), {}, {width: 800, height: 200});
+      let option
+
+      option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line'
+          }
+        },
+        // color: ['#143147', '#39546c', '#617a94', '#89a2bd', '#b3cce8', '#eac65c', '#bd9d2c', '#917501', '#685000', '#412c00'],
+        // color: ['#003470', '#005a9b', '#0982c7', '#4bace5', '#90d3fe', '#febf4a', '#d7931c', '#ac6a01', '#804400', '#572000'],
+        // color: ['#888F98', '#10121A', '#1B2732', '#5F7892', '#C3A235'],
+        legend: {
+          textStyle: {
+            color: 'white'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'value'
+        },
+        yAxis: {
+          type: 'category',
+          data: ['Total']
+        },
+        aria: {
+          enabled: true,
+          show: true,
+          decal: {
+            show: true
+          }
+        },
+
+        series: seriesArr(props.stats)
+      };
+
+      myChart.setOption(option);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.utility-chart-total {
+  .heading {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: -30px;
+
+    h4 {
+      margin: 7px auto 0;
+    }
+  }
+
+  p {
+    padding-top: 40px;
+    margin-bottom: -20px;
+  }
+}
+
+#utility-chart-total {
+  margin: 40px 0;
+}
+</style>