added pie-chart for utility damage, updated flashchart

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">
-      Grenades
+    <div id="utility">
+      <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;
   }