added pie-chart for utility damage, updated flashchart

src/components/FlashChart.vue

@@ -88,7 +88,7 @@ export default {
           {
             name: 'Flash-Count',
             type: 'pie',
-            radius: [0, '30%'],
+            radius: [0, '40%'],
             avoidLabelOverlap: true,
             itemStyle: {
               borderRadius: 10,
@@ -96,7 +96,9 @@ export default {
               borderWidth: 3
             },
             label: {
-              show: false
+              position: 'inside',
+              fontsize: 36,
+              fontWeight: 'bold'
             },
             labelLine: {
               show: false
@@ -120,7 +122,7 @@ export default {
           {
             name: 'Flash-Duration (in s)',
             type: 'pie',
-            radius: ['35%', '55%'],
+            radius: ['45%', '65%'],
             avoidLabelOverlap: true,
             itemStyle: {
               borderRadius: 10,
@@ -128,7 +130,7 @@ export default {
               borderWidth: 3
             },
             labelLine: {
-              length: 10
+              length: 20
             },
             label: {
               formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
@@ -165,8 +167,7 @@ export default {
             data: [
               {
                 value: props.duration.self ? props.duration.self.toFixed(2) : null,
-                name: 'Self',
+                name: 'Self'
-                selected: true
               },
               {
                 value: props.duration.team ? props.duration.team.toFixed(2) : null,
@@ -197,7 +198,7 @@ export default {
   .heading {
     display: flex;
     margin-top: 10px;
-    margin-bottom: -30px;
+    margin-bottom: -20px;
 
     .avatar {
       width: 50px;

src/components/UtilityChart.vue

@@ -0,0 +1,171 @@
+<template>
+  <div :style="props.ud.flames || props.ud.flash || props.ud.he ? 'display: flex' : 'display: none'"
+       class="player-flash">
+    <div class="heading">
+      <img :src="props.avatar" alt="Player avatar" class="avatar">
+      <h4>{{ props.name }}</h4>
+    </div>
+    <p><span class="text-muted">Total UD:</span> {{ props.ud.flames ? props.ud.flames : 0 + props.ud.flash ? props.ud.flash : 0 + props.ud.he ? props.ud.he : 0 }}</p>
+    <div :id="'utility-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
+    },
+    ud: {
+      type: Object,
+      required: true
+    },
+  },
+  setup(props) {
+    onMounted(() => {
+      echarts.use([
+        TooltipComponent,
+        LegendComponent,
+        PieChart,
+        CanvasRenderer,
+        LabelLayout
+      ]);
+
+      let myChart = echarts.init(document.getElementById(`utility-chart-${props.id}`));
+      let option
+
+      option = {
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b}: {c} ({d}%)'
+        },
+        legend: {
+          data: [
+            {
+              name: 'Flames',
+              textStyle: {
+                color: 'white',
+              },
+              itemStyle: {
+                color: '#FF4343FF'
+              }
+            },
+            {
+              name: 'Flash',
+              textStyle: {
+                color: 'white'
+              }
+            },
+            {
+              name: 'HE',
+              textStyle: {
+                color: 'white'
+              }
+            },
+          ]
+        },
+        series: [
+          {
+            name: 'Utility Damage',
+            type: 'pie',
+            radius: [0, '65%'],
+            avoidLabelOverlap: true,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#000',
+              borderWidth: 3
+            },
+            label: {
+              position: 'inside',
+              fontsize: 36,
+              fontWeight: 'bold'
+            },
+            labelLine: {
+              show: false
+            },
+            data: [
+              {
+                value: props.ud.flames ? props.ud.flames : null,
+                name: 'Flames',
+                itemStyle: {
+                  color: '#FF4343FF'
+                }
+              },
+              {
+                value: props.ud.flash ? props.ud.flash : null,
+                name: 'Flash',
+              },
+              {
+                value: props.ud.he ? props.ud.he : null,
+                name: 'HE',
+              }
+            ]
+          }
+        ]
+      };
+
+      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;
+      color: #ff4343;
+    }
+
+    h4 {
+      margin-top: 7px;
+    }
+  }
+
+  p {
+    padding-top: 40px;
+    margin-bottom: -20px;
+  }
+}
+
+@for $i from 0 through 9 {
+  #utility-chart-#{$i} {
+    width: 500px;
+    height: 300px;
+    margin: 40px 40px -40px 40px;
+  }
+}
+</style>

src/views/Match.vue

@@ -37,7 +37,7 @@
       <ul class="list-unstyled d-flex m-auto">
         <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 utility" @click.prevent="ActivateScoreInfo('utility')">Utility</li>
         <li class="list-item damage" @click.prevent="ActivateScoreInfo('damage')">Damage</li>
       </ul>
     </div>
@@ -66,8 +66,13 @@
       />
     </div>
 
-    <div id="grenades">
+    <div id="utility">
-      Grenades
+      <UtilityChart v-for="(player, id) in data.stats" :key="player.player.steamid64"
+                  :id="id"
+                  :avatar="player.player.avatar"
+                    :name="player.player.name"
+                  :ud="player.extended.dmg.ud"
+      />
     </div>
 
     <div id="damage">
@@ -83,6 +88,7 @@ import {DisplayRank, FormatFullDate, GetHLTV_1, GoToPlayer, LoadImage} from "../
 
 const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
 const FlashChart = defineAsyncComponent(() => import('../components/FlashChart'))
+const UtilityChart = defineAsyncComponent(() => import('../components/UtilityChart'))
 
 export default {
   name: 'Match',
@@ -90,6 +96,7 @@ export default {
   components: {
     ScoreTeam,
     FlashChart,
+    UtilityChart,
   },
   setup(props) {
     // Refs
@@ -207,7 +214,7 @@ export default {
       rgba(0, 0, 0, .6) 100%
   );
 
-  #scoreboard, #flashes, #grenades, #damage {
+  #scoreboard, #flashes, #utility, #damage {
     display: none;
     flex-direction: column;
     align-items: center;
@@ -215,7 +222,7 @@ export default {
 
   #scoreboard.active,
   #flashes.active,
-  #grenades.active,
+  #utility.active,
   #damage.active {
     display: flex;
   }