added pie-charts for flashes

2021-10-10 21:22:09 +02:00
parent 11863f144c
commit e75f70ce05
4 changed files with 301 additions and 16 deletions
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
    "axios": "^0.22.0",
    "bootstrap": "^5.1.2",
    "core-js": "^3.18.2",
+    "echarts": "^5.2.1",
    "luxon": "^2.0.2",
    "vue": "^3.2.19",
    "vue-router": "^4.0.11",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,6 +13,7 @@ specifiers:
  babel-eslint: ^10.1.0
  bootstrap: ^5.1.2
  core-js: ^3.18.2
+  echarts: ^5.2.1
  eslint: ^6.8.0
  eslint-plugin-vue: ^7.19.1
  luxon: ^2.0.2
@@ -29,6 +30,7 @@ dependencies:
  axios: 0.22.0
  bootstrap: 5.1.2_@popperjs+core@2.10.2
  core-js: 3.18.2
+  echarts: 5.2.1
  luxon: 2.0.2
  vue: 3.2.19
  vue-router: 4.0.11_vue@3.2.19
@@ -3665,6 +3667,13 @@ packages:
      safer-buffer: 2.1.2
    dev: true

+  /echarts/5.2.1:
+    resolution: {integrity: sha512-OJ79b22eqRfbSV8vYmDKmA+XWfNbr0Uk/OafWcFNIGDWti2Uw9A6eVCiJLmqPa9Sk+EWL+t5v26aak0z3gxiZw==}
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.2.1
+    dev: false
+
  /ee-first/1.1.1:
    resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=}
    dev: true
@@ -8188,6 +8197,10 @@ packages:
    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
    dev: true

+  /tslib/2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+    dev: false
+
  /tty-browserify/0.0.0:
    resolution: {integrity: sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=}
    dev: true
@@ -8914,3 +8927,9 @@ packages:
      normalize-path: 1.0.0
      strip-indent: 2.0.0
    dev: true
+
+  /zrender/5.2.1:
+    resolution: {integrity: sha512-M3bPGZuyLTNBC6LiNKXJwSCtglMp8XUEqEBG+2MdICDI3d1s500Y4P0CzldQGsqpRVB7fkvf3BKQQRxsEaTlsw==}
+    dependencies:
+      tslib: 2.3.0
+    dev: false
--- a/src/components/FlashChart.vue
+++ b/src/components/FlashChart.vue
@@ -0,0 +1,222 @@
+<template>
+  <div :style="props.total.self || props.total.team || props.total.enemy ? 'display: flex' : 'display: none'"
+       class="player-flash">
+    <div class="heading">
+      <img :src="props.avatar" alt="Player avatar" class="avatar">
+      <h4>{{ props.name }}</h4>
+    </div>
+    <div :id="'flash-chart-' + props.id"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core';
+import {LegendComponent, TooltipComponent} from 'echarts/components';
+import {PieChart} from 'echarts/charts';
+import {LabelLayout} from 'echarts/features';
+import {CanvasRenderer} from 'echarts/renderers';
+import {onMounted} from "vue";
+
+export default {
+  name: "FlashChart",
+  props: {
+    id: {
+      type: Number,
+      default: 0,
+      required: true
+    },
+    avatar: {
+      type: String,
+      default: '',
+      required: true
+    },
+    name: {
+      type: String,
+      default: '',
+      required: true
+    },
+    total: {
+      type: Object,
+      required: true
+    },
+    duration: {
+      type: Object,
+      required: true
+    },
+  },
+  setup(props) {
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        LegendComponent,
+        PieChart,
+        CanvasRenderer,
+        LabelLayout
+      ]);
+
+      let myChart = echarts.init(document.getElementById(`flash-chart-${props.id}`));
+      let option
+
+      option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          data: [
+            {
+              name: 'Self',
+              textStyle: {
+                color: 'white',
+              }
+            },
+            {
+              name: 'Team',
+              textStyle: {
+                color: 'white'
+              }
+            },
+            {
+              name: 'Enemy',
+              textStyle: {
+                color: 'white'
+              }
+            },
+          ]
+        },
+        series: [
+          {
+            name: 'Flash-Count',
+            type: 'pie',
+            radius: [0, '30%'],
+            avoidLabelOverlap: true,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#000',
+              borderWidth: 3
+            },
+            label: {
+              show: false
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {
+                value: props.total.self ? props.total.self : null,
+                name: 'Self',
+                selected: true
+              },
+              {
+                value: props.total.team ? props.total.team : null,
+                name: 'Team'
+              },
+              {
+                value: props.total.enemy ? props.total.enemy : null,
+                name: 'Enemy'
+              }
+            ]
+          },
+          {
+            name: 'Flash-Duration (in s)',
+            type: 'pie',
+            radius: ['35%', '55%'],
+            avoidLabelOverlap: true,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#000',
+              borderWidth: 3
+            },
+            labelLine: {
+              length: 10
+            },
+            label: {
+              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+              backgroundColor: '#F6F8FC',
+              borderColor: '#8C8D8E',
+              borderWidth: 1,
+              borderRadius: 4,
+              rich: {
+                a: {
+                  color: '#6E7079',
+                  lineHeight: 22,
+                  align: 'center'
+                },
+                hr: {
+                  borderColor: '#8C8D8E',
+                  width: '100%',
+                  borderWidth: 1,
+                  height: 0
+                },
+                b: {
+                  color: '#4C5058',
+                  fontSize: 14,
+                  fontWeight: 'bold',
+                  lineHeight: 33
+                },
+                per: {
+                  color: '#fff',
+                  backgroundColor: '#4C5058',
+                  padding: [3, 4],
+                  borderRadius: 4
+                }
+              }
+            },
+            data: [
+              {
+                value: props.duration.self ? props.duration.self.toFixed(2) : null,
+                name: 'Self',
+                selected: true
+              },
+              {
+                value: props.duration.team ? props.duration.team.toFixed(2) : null,
+                name: 'Team'
+              },
+              {
+                value: props.duration.enemy ? props.duration.enemy.toFixed(2) : null,
+                name: 'Enemy'
+              }
+            ]
+          }
+        ]
+      };
+
+      myChart.setOption(option);
+    })
+
+    return {props}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.player-flash {
+  flex-direction: column;
+  align-items: center;
+
+  .heading {
+    display: flex;
+    margin-top: 10px;
+    margin-bottom: -30px;
+
+    .avatar {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      margin-right: 20px;
+    }
+
+    h4 {
+      margin-top: 7px;
+    }
+  }
+}
+
+@for $i from 0 through 9 {
+  #flash-chart-#{$i} {
+    width: 600px;
+    height: 400px;
+    margin: 40px 40px -40px 40px;
+  }
+}
+</style>
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -1,5 +1,5 @@
 <template>
-  <img class="bg-img" src="" alt="">
+  <img alt="" class="bg-img" src="">

  <div class="">
    <div class="head row m-auto text-center">
@@ -7,9 +7,9 @@
        <img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
             :src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
             :title="data.matchDetails.map" class="map-icon">
-        <img v-if="!data.matchDetails.map" alt="Map icon"
-             :src="require('../images/map_icons/map_icon_lobby_mapveto.svg')"
-             title="Map unknown" class="map-icon">
+        <img v-if="!data.matchDetails.map" :src="require('../images/map_icons/map_icon_lobby_mapveto.svg')"
+             alt="Map icon"
+             class="map-icon" title="Map unknown">
      </div>
      <p class="text-center text-muted fs-6">
        {{ FormatFullDate(data.matchDetails.date) }}
@@ -35,15 +35,15 @@
    </button>
    <div id="matchNav" class="collapse navbar-collapse">
      <ul class="list-unstyled d-flex m-auto">
-        <li class="list-item active">Scoreboard</li>
-        <li class="list-item">Flashes</li>
-        <li class="list-item">Grenades</li>
-        <li class="list-item">Damage</li>
+        <li class="list-item scoreboard active" @click.prevent="ActivateScoreInfo('scoreboard')">Scoreboard</li>
+        <li class="list-item flashes" @click.prevent="ActivateScoreInfo('flashes')">Flashes</li>
+        <li class="list-item grenades" @click.prevent="ActivateScoreInfo('grenades')">Grenades</li>
+        <li class="list-item damage" @click.prevent="ActivateScoreInfo('damage')">Damage</li>
      </ul>
    </div>
  </div>
-  <div v-if="data.score.length === 2 && data.stats" class="scoreboard">
-    <div id="scoreboard">
+  <div v-if="data.score.length === 2 && data.stats" id="scoreWrapper" class="scoreboard">
+    <div id="scoreboard" class="active">
      <ScoreTeam
          :rounds="data.matchDetails.max_rounds ? data.matchDetails.max_rounds : data.score[data.matchDetails.match_result - 1] === 16 ? 30 : data.score[data.matchDetails.match_result - 1] === 15 ? 30 : 16"
          :rounds_played="data.score.reduce((a, b) => a + b)"
@@ -56,20 +56,41 @@
          :stats="data.stats" :team_id="2"/>
    </div>

+    <div id="flashes">
+      <FlashChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
+                  :id="id"
+                  :avatar="player.player.avatar"
+                  :duration="player.extended.flash.duration"
+                  :name="player.player.name"
+                  :total="player.extended.flash.total"
+      />
+    </div>
+
+    <div id="grenades">
+      Grenades
+    </div>
+
+    <div id="damage">
+      Damage
+    </div>
  </div>
 </template>

 <script>
 import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
 import axios from 'axios'
-import {DisplayRank, GetHLTV_1, GoToPlayer, FormatFullDate, LoadImage} from "../utils";
+import {DisplayRank, FormatFullDate, GetHLTV_1, GoToPlayer, LoadImage} from "../utils";

 const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
+const FlashChart = defineAsyncComponent(() => import('../components/FlashChart'))

 export default {
  name: 'Match',
  props: ['match_id'],
-  components: {ScoreTeam},
+  components: {
+    ScoreTeam,
+    FlashChart,
+  },
  setup(props) {
    // Refs
    const data = reactive({
@@ -116,6 +137,19 @@ export default {
        data.avgRank = Math.floor(fullRank / count)
    }

+    const ActivateScoreInfo = (id) => {
+      const activeNavItems = document.querySelector('#matchNav').querySelectorAll('.active')
+      const newNavItem = document.querySelector(`#matchNav .${id}`)
+      const activeItems = document.querySelector('#scoreWrapper').querySelectorAll('.active')
+      const newItem = document.querySelector(`#scoreWrapper #${id}`)
+
+      activeNavItems.forEach(item => item.classList.remove('active'))
+      activeItems.forEach(item => item.classList.remove('active'))
+
+      newNavItem.classList.add('active')
+      newItem.classList.add('active')
+    }
+
    // Watchers
    watch(() => props.match_id, GetMatch)
    watch(() => data.stats, GetAvgRank)
@@ -126,7 +160,7 @@ export default {
    })

    return {
-      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
+      GetMatch, GetAvgRank, ActivateScoreInfo, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
    }
  }
 }
@@ -161,8 +195,10 @@ export default {
  }
 }

-.scoreboard {
+#scoreWrapper {
  z-index: 1;
+  height: 100%;
+  width: 100%;
  max-width: 100vw;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.6) 0%,
@@ -171,11 +207,18 @@ export default {
      rgba(0, 0, 0, .6) 100%
  );

-  div {
-    display: flex;
+  #scoreboard, #flashes, #grenades, #damage {
+    display: none;
    flex-direction: column;
    align-items: center;
  }
+
+  #scoreboard.active,
+  #flashes.active,
+  #grenades.active,
+  #damage.active {
+    display: flex;
+  }
 }

 .nav {