From f9391bfa105d2cee06dc1fec7192139277936ea8 Mon Sep 17 00:00:00 2001
From: cnachtigall1991 <40701475+cnachtigall1991@users.noreply.github.com>
Date: Tue, 19 Oct 2021 12:40:17 +0200
Subject: [PATCH] added economy-graph

---
 src/components/EqValueGraph.vue    | 131 ++++++++++++++++++++++-------
 src/components/MultiKillsChart.vue |   2 -
 src/components/ScoreTeam.vue       |  15 ++--
 src/constants/index.js             |  16 ----
 src/utils/Utils.js                 |   4 +
 src/utils/index.js                 |   4 +-
 src/views/Match.vue                |   5 +-
 src/views/Player.vue               |   8 +-
 8 files changed, 124 insertions(+), 61 deletions(-)

diff --git a/src/components/EqValueGraph.vue b/src/components/EqValueGraph.vue
index 7c1ec55..a81c03d 100644
--- a/src/components/EqValueGraph.vue
+++ b/src/components/EqValueGraph.vue
@@ -1,24 +1,24 @@
 <template>
-  <table v-if="data.rounds">
-    <thead>
-    <tr>
-      <th>p1</th>
-      <th>p2</th>
-    </tr>
-    </thead>
-    <tbody v-if="data.eq_teams">
-        <tr v-for="(round, i) in data.eq_teams[0][0]" :key="data.eq_teams[0][i]">
-          <td>{{i + ' - ' + round}}</td>
-        </tr>
-    </tbody>
-  </table>
+  <h3 class="text-center col-12 mt-3">Economy</h3>
+  <div id="economy-graph"></div>
 </template>
 
 <script>
 
 import {getPlayerValue} from "../utils";
 import {useStore} from "vuex";
-import {onMounted, reactive} from "vue";
+import {onBeforeMount, onMounted, reactive, watch} from "vue";
+
+import * as echarts from 'echarts/core';
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  VisualMapComponent
+} from 'echarts/components';
+import { LineChart } from 'echarts/charts';
+import { UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
 
 export default {
   name: "EqValueGraph",
@@ -32,7 +32,6 @@ export default {
       eq_team_2: [],
       eq_team_player_1: [],
       eq_team_player_2: [],
-      eq_teams: []
     })
 
     const getTeamPlayer = (stats, team) => {
@@ -47,14 +46,11 @@ export default {
     const parseObject = async () => {
       data.rounds = await getPlayerValue(store.state.matchDetails.match_id)
 
-      let eq_1 = []
-      let eq_2 = []
-
       for (const round in data.rounds) {
         for (const player in data.rounds[round]) {
           for (let p in data.team[0]) {
             if (data.team[0][p] === player) {
-              eq_1.push({
+              data.eq_team_player_1.push({
                 round: round,
                 player: player,
                 eq: (data.rounds[round][player][0] + data.rounds[round][player][2])
@@ -63,7 +59,7 @@ export default {
           }
           for (let p in data.team[1]) {
             if (data.team[1][p] === player) {
-              eq_2.push({
+              data.eq_team_player_2.push({
                 round: round,
                 player: player,
                 eq: (data.rounds[round][player][0] + data.rounds[round][player][2])
@@ -72,12 +68,6 @@ export default {
           }
         }
       }
-
-      data.eq_team_player_1.push(eq_1)
-      data.eq_team_player_2.push(eq_2)
-
-      data.eq_team_1.push(sumArr(eq_1))
-      data.eq_team_2.push(sumArr(eq_2))
     }
 
     const sumArr = (arr) => {
@@ -87,15 +77,98 @@ export default {
       }), {})
     }
 
-    onMounted(() => {
+    const BuildGraphData = (team_1, team_2, max_rounds) => {
+      let newArr = []
+      const half_point = max_rounds / 2 - 1
+      for (let round in team_1) {
+        if (round < half_point) {
+          newArr.push(team_1[round] - team_2[round])
+        } else
+          newArr.push(team_2[round] - team_1[round])
+      }
+      return newArr
+    }
+
+    const optionGen = (dataList, valueList) => {
+      return {
+        // Make gradient line here
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+            seriesIndex: 0,
+            color: ['#3a6e99', '#c3a235'],
+          },
+        ],
+        tooltip: {
+          trigger: 'axis',
+          formatter: 'Round <b>{b0}</b><br />{a0} <b>{c0}</b>',
+        },
+        xAxis: [
+          {
+            data: dataList,
+          }
+        ],
+        yAxis: [
+          {},
+        ],
+        grid: [
+          {
+            bottom: '60%'
+          },
+          {
+            top: '60%'
+          }
+        ],
+        series: [
+          {
+            name: 'Net-Worth',
+            type: 'line',
+            lineStyle: {
+              width: 4
+            },
+            showSymbol: false,
+            data: valueList,
+          },
+        ]
+      }
+    }
+
+    let myChart1
+
+    onBeforeMount(() => {
       data.team.push(getTeamPlayer(store.state.matchDetails.stats, 1))
       data.team.push(getTeamPlayer(store.state.matchDetails.stats, 2))
+    })
 
+    onMounted(() => {
       parseObject()
 
-      data.eq_teams.push(data.eq_team_1, data.eq_team_2)
+      if (store.state.matchDetails.stats) {
+        echarts.use([
+          TitleComponent,
+          TooltipComponent,
+          GridComponent,
+          VisualMapComponent,
+          LineChart,
+          CanvasRenderer,
+          UniversalTransition
+        ]);
 
-      // console.log(data.eq_team)
+        myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {width: 1000, height: 800});
+      }
+    })
+
+    watch(() => data.rounds, () => {
+      data.eq_team_1 = sumArr(data.eq_team_player_1)
+      data.eq_team_2 = sumArr(data.eq_team_player_2)
+
+      const valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, store.state.matchDetails.max_rounds ? store.state.matchDetails.max_rounds : 30)
+
+      const dataList = Array.from(Array(valueList.length + 1).keys())
+      dataList.shift()
+
+      myChart1.setOption(optionGen(dataList, valueList));
     })
 
     return {data}
diff --git a/src/components/MultiKillsChart.vue b/src/components/MultiKillsChart.vue
index 5bccb10..00a1ce2 100644
--- a/src/components/MultiKillsChart.vue
+++ b/src/components/MultiKillsChart.vue
@@ -2,11 +2,9 @@
   <h3 class="text-center col-12 mt-3">Multi-Kills</h3>
   <div class="player-dmg col-12">
     <div class="team-1">
-      <h4 class="text-center mt-3 mb-3">Team 1</h4>
       <div id="multi-kills-chart-1"></div>
     </div>
     <div class="team-2">
-      <h4 class="text-center mt-3 mb-3">Team 2</h4>
       <div id="multi-kills-chart-2"></div>
     </div>
   </div>
diff --git a/src/components/ScoreTeam.vue b/src/components/ScoreTeam.vue
index 6495c53..7ba1af4 100644
--- a/src/components/ScoreTeam.vue
+++ b/src/components/ScoreTeam.vue
@@ -4,11 +4,11 @@
            :class="'team-' + (team_id + 1)">
       <caption v-if="store.state.matchDetails.max_rounds === 16"
                :class="score === 9 ? 'text-success' : score === 8 ? 'text-warning' : 'text-danger'">
-        {{ score }}
+        <span v-if="score < 10" class="hidden">0</span>{{ score }}
       </caption>
       <caption v-if="store.state.matchDetails.max_rounds === 30 || !store.state.matchDetails.max_rounds"
                :class="score === 16 ? 'text-success' : score === 15 ? 'text-warning' : 'text-danger'">
-        {{ score }}
+        <span v-if="score < 10" class="hidden">0</span>{{ score }}
       </caption>
       <thead v-if="team_id === 0">
       <tr>
@@ -87,16 +87,21 @@ hr {
 table {
   width: 900px;
   text-align: center;
-  margin-top: 120px;
-  margin-bottom: -100px;
+  margin-top: 100px;
+  margin-bottom: -80px;
 
   caption {
     color: white;
     font-size: 3rem;
     caption-side: top;
     padding: 0;
-    margin-left: -70px;
+    margin-left: -78px;
     margin-bottom: -158px;
+
+    .hidden {
+      color: transparent;
+      user-select: none;
+    }
   }
 
   tr {
diff --git a/src/constants/index.js b/src/constants/index.js
index cca4777..ebacbee 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1,19 +1,3 @@
-export const MAPNAMES = {
-  'cs_agency': 'Agency',
-  'cs_insetion2': 'Insertion II',
-  'cs_office': 'Office',
-  'de_ancient': 'Ancient',
-  'de_basalt': 'Basalt',
-  'de_cache': 'Cache',
-  'de_dust2': 'Dust II',
-  'de_inferno': 'Inferno',
-  'de_mirage': 'Mirage',
-  'de_nuke': 'Nuke',
-  'de_overpass': 'Overpass',
-  'de_train': 'Train',
-  'de_vertigo': 'Vertigo',
-}
-
 export const HITGROUPS = {
   0: 'HitGroupGeneric',
   1: 'HitGroupHead',
diff --git a/src/utils/Utils.js b/src/utils/Utils.js
index 59d6ca9..a6b704e 100644
--- a/src/utils/Utils.js
+++ b/src/utils/Utils.js
@@ -31,6 +31,10 @@ export const checkStatEmpty = (stat) => {
   return 0
 }
 
+export const FixMapName = (map) => {
+  return map.split('_')[1].replace(/^\w/, c => c.toUpperCase());
+}
+
 export const getPlayerArr = (stats, team, color) => {
   let arr = []
   for (let i = (team - 1) * 5; i < team * 5; i++) {
diff --git a/src/utils/index.js b/src/utils/index.js
index bed707a..90cd310 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -4,7 +4,7 @@ import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
 import {GetUser, TrackMe, getPlayerValue} from "./ApiRequests";
-import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank} from "./Utils";
+import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName} from "./Utils";
 
 export {
   FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
@@ -13,5 +13,5 @@ export {
   GetHLTV_1,
   DisplayRank, LoadImage,
   GetUser, TrackMe, getPlayerValue,
-  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank
+  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank, FixMapName
 }
diff --git a/src/views/Match.vue b/src/views/Match.vue
index 71c26f3..d8f388c 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -87,10 +87,9 @@
 <script>
 import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import axios from 'axios'
-import {DisplayRank, FormatFullDate, GetAvgRank, GoToLink, LoadImage} from "../utils";
+import {DisplayRank, FixMapName, FormatFullDate, GetAvgRank, GoToLink, LoadImage} from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
-import {MAPNAMES} from "../constants";
 
 export default {
   name: 'Match',
@@ -117,7 +116,7 @@ export default {
             .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
             .then((response) => {
               if (response.data.map)
-                document.title = `${MAPNAMES[response.data.map]} | csgoWTF`
+                document.title = `${FixMapName(response.data.map)} | csgoWTF`
               else
                 document.title = `Match-Details | csgoWTF`
 
diff --git a/src/views/Player.vue b/src/views/Player.vue
index bc4ae3b..d10a468 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -377,10 +377,10 @@ export default {
     )
 
     onBeforeUnmount(() => {
-      store.commit({
-        type: 'changeId64',
-        data: store.state.playerDetails.steamid64
-      })
+      // store.commit({
+      //   type: 'changeId64',
+      //   id: store.state.playerDetails.steamid64
+      // })
       store.commit('resetPlayerDetails')
     })