better support for mobile devices

src/components/EqValueGraph.vue

@@ -1,13 +1,16 @@
 <template>
-  <h3 class="text-center col-12 mt-3">Economy</h3>
-  <div id="economy-graph"></div>
+  <div class="economy">
+    <h3>Economy</h3>
+    <div class="flexbreak"></div>
+    <div id="economy-graph"></div>
+  </div>
 </template>
 
 <script>
 
 import {getPlayerValue} from "../utils";
 import {useStore} from "vuex";
-import {onBeforeMount, onMounted, reactive, watch} from "vue";
+import {onMounted, reactive, watch} from "vue";
 
 import * as echarts from 'echarts/core';
 import {
@@ -116,10 +119,16 @@ export default {
         ],
         grid: [
           {
-            bottom: '50%'
+            bottom: '10%'
           },
           {
-            top: '60%'
+            top: '0%'
+          },
+          {
+            right: '0%'
+          },
+          {
+            left: '0%'
           }
         ],
         series: [
@@ -157,13 +166,21 @@ export default {
 
     let myChart1, max_rounds
 
-    onBeforeMount(() => {
+    onMounted(() => {
       data.team.push(getTeamPlayer(store.state.matchDetails.stats, 1))
       data.team.push(getTeamPlayer(store.state.matchDetails.stats, 2))
+
+      parseObject()
     })
 
-    onMounted(() => {
-      parseObject()
+    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, max_rounds)
+
+      const dataList = Array.from(Array(valueList.length + 1).keys())
+      dataList.shift()
 
       if (store.state.matchDetails.stats) {
         echarts.use([
@@ -177,28 +194,44 @@ export default {
           MarkAreaComponent
         ]);
 
-        myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {width: 1000, height: 800});
+        myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {width: 1200, height: 400});
         max_rounds = store.state.matchDetails.max_rounds ? store.state.matchDetails.max_rounds : 30
       }
-    })
-
-    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, max_rounds)
-
-      const dataList = Array.from(Array(valueList.length + 1).keys())
-      dataList.shift()
 
       myChart1.setOption(optionGen(dataList, valueList));
     })
-
-    return {data}
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.economy {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
+  margin: 1rem auto 1rem;
+
+  h3 {
+    margin-bottom: -1rem;
+  }
+}
+
+@media (max-width: 1200px) {
+  .economy {
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    h3 {
+      margin-left: 2rem;
+    }
+
+    #economy-graph {
+      overflow: scroll;
+      margin: 0 0 0 -3rem;
+    }
+  }
+}
 </style>