added economy-graph

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}