added economy-graph

2021-10-19 12:40:17 +02:00
parent bb3da7d3c4
commit f9391bfa10
8 changed files with 124 additions and 61 deletions
--- 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}
--- 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>
--- 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 {
--- 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',
--- 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++) {
--- 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
 }
--- 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`

--- 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')
    })