fixed bug with charts not showing + better mobile support

src/components/DamageChart.vue

@@ -11,7 +11,7 @@ import * as echarts from 'echarts/core';
 import {GridComponent, LegendComponent, TooltipComponent} from 'echarts/components';
 import {BarChart} from 'echarts/charts';
 import {CanvasRenderer} from 'echarts/renderers';
-import {onMounted} from "vue";
+import {onMounted, onUnmounted, ref} from "vue";
 import {checkStatEmpty, getPlayerArr} from "../utils";
 import {useStore} from "vuex";
 
@@ -20,6 +20,10 @@ export default {
   setup() {
     const store = useStore()
 
+    let myChart1, myChart2
+    const width = ref(window.innerWidth <= 1000 && window.innerWidth >= 751 ? window.innerWidth : 1000)
+    const height = ref(window.innerWidth >= 751 ? width.value * 3 / 10 : window.innerWidth >= 501 && window.innerWidth <= 751 ? width.value * 3 / 7.5 : width.value * 3 / 5)
+
     const dataArr = (stats, team, prop) => {
       if (['team', 'enemy', 'self'].indexOf(prop) > -1) {
         let arr = []
@@ -98,7 +102,24 @@ export default {
       }
     }
 
-    let myChart1, myChart2
+    const disposeCharts = () => {
+      if (myChart1 != null && myChart1 !== '' && myChart1 !== undefined) {
+        myChart1.dispose()
+      }
+      if (myChart2 != null && myChart2 !== '' && myChart2 !== undefined) {
+        myChart2.dispose()
+      }
+    }
+
+    const buildCharts = () => {
+      disposeCharts()
+
+      myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: width.value, height: height.value});
+      myChart1.setOption(optionGen(1));
+
+      myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: width.value, height: height.value});
+      myChart2.setOption(optionGen(2));
+    }
 
     onMounted(() => {
       if (store.state.matchDetails.stats) {
@@ -110,13 +131,30 @@ export default {
           CanvasRenderer
         ]);
 
-        myChart1 = echarts.init(document.getElementById('dmg-chart-1'), {}, {width: 1000, height: 300});
+        buildCharts()
-        myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
-
-        myChart1.setOption(optionGen(1));
-        myChart2.setOption(optionGen(2));
       }
     })
+
+    onUnmounted(() => {
+      disposeCharts()
+    })
+
+    window.onresize = () => {
+      if (window.innerWidth <= 1000) {
+        width.value = window.innerWidth - 20
+        if (window.innerWidth <= 500) {
+          height.value = width.value * 3 / 5
+        }
+        if (window.innerWidth <= 750 && window.innerWidth >= 501) {
+          height.value = width.value * 3 / 7.5
+        }
+        if (window.innerWidth <= 1000 && window.innerWidth >= 751) {
+          height.value = width.value * 3 / 10
+        }
+      }
+
+      buildCharts()
+    }
   }
 }
 </script>
@@ -137,11 +175,4 @@ export default {
     margin-top: -40px;
   }
 }
-
-@media (max-width: 1200px) {
-  #dmg-chart-1,
-  #dmg-chart-2 {
-    overflow: scroll;
-  }
-}
 </style>

src/components/EqValueGraph.vue

@@ -8,9 +8,9 @@
 
 <script>
 
-import {getPlayerValue} from "../utils";
+import {getPlayerValue} from "@/utils";
 import {useStore} from "vuex";
-import {onBeforeMount, onMounted, reactive, watch} from "vue";
+import {onBeforeMount, onMounted, onUnmounted, reactive, ref, watch} from "vue";
 
 import * as echarts from 'echarts/core';
 import {
@@ -29,6 +29,12 @@ export default {
   setup() {
     const store = useStore()
 
+    let myChart1, max_rounds
+    let valueList = []
+    let dataList = []
+    const width = ref(window.innerWidth >= 800 && window.innerWidth <= 1200 ? window.innerWidth : window.innerWidth < 800 ? 800 : 1200)
+    const height = ref(width.value * 1 / 3)
+
     const data = reactive({
       rounds: {},
       team: [],
@@ -164,7 +170,21 @@ export default {
       }
     }
 
-    let myChart1, max_rounds
+    const disposeCharts = () => {
+      if (myChart1 != null && myChart1 !== '' && myChart1 !== undefined) {
+        myChart1.dispose()
+      }
+    }
+
+    const buildCharts = () => {
+      disposeCharts()
+
+      myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {
+        width: width.value,
+        height: height.value
+      })
+      myChart1.setOption(optionGen(dataList, valueList))
+    }
 
     onBeforeMount(() => {
       max_rounds = store.state.matchDetails.max_rounds ? store.state.matchDetails.max_rounds : 30
@@ -182,7 +202,6 @@ export default {
           UniversalTransition,
           MarkAreaComponent
         ]);
-        myChart1 = echarts.init(document.getElementById('economy-graph'), {}, {width: 1200, height: 400})
 
         data.team.push(getTeamPlayer(store.state.matchDetails.stats, 1))
         data.team.push(getTeamPlayer(store.state.matchDetails.stats, 2))
@@ -191,18 +210,36 @@ export default {
       }
     })
 
+    onUnmounted(() => {
+      disposeCharts()
+    })
+
     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)
+      valueList = BuildGraphData(data.eq_team_1, data.eq_team_2, max_rounds)
 
-      const dataList = Array.from(Array(valueList.length + 1).keys())
+      dataList = Array.from(Array(valueList.length + 1).keys())
       dataList.shift()
 
-      myChart1.setOption(optionGen(dataList, valueList))
+      buildCharts()
     })
 
+    window.onresize = () => {
+      if (window.innerWidth > 1200) {
+        width.value = 1200
+      }
+      if (window.innerWidth <= 1200 && window.innerWidth >= 800) {
+        width.value = window.innerWidth - 20
+      }
+      if (window.innerWidth < 800) {
+        width.value = 800
+      }
+
+      height.value = width.value * 1 / 3
+      buildCharts()
+    }
   }
 }
 </script>
@@ -215,7 +252,7 @@ export default {
   justify-content: center;
   align-items: center;
 
-  margin: 1rem auto 1rem;
+  margin: 1rem auto 3rem;
 
   h3 {
     margin-bottom: -1rem;
@@ -230,11 +267,12 @@ export default {
     h3 {
       margin-left: 2rem;
     }
+  }
+}
 
+@media (max-width: 800px) and (min-width: 1199px) {
   #economy-graph {
     overflow: scroll;
-      margin: 0 0 0 -3rem;
-    }
   }
 }
 </style>

src/components/FlashChart.vue

@@ -32,8 +32,8 @@ export default {
     const toggle = ref('duration')
     let myChart1, myChart2
     const color = ['#bb792c', '#9bd270', '#eac42a']
-    const width = ref(600)
+    const width = ref(window.innerWidth <= 600 ? window.innerWidth : 600)
-    const height = ref(400)
+    const height = ref(width.value * 2 / 3)
 
     const toggleShow = () => {
       const offBtn = document.getElementById('toggle-off')
@@ -165,7 +165,6 @@ export default {
       }
     }
 
-
     return {toggleShow, toggle}
   }
 }

src/components/MultiKillsChart.vue

@@ -12,7 +12,7 @@ import * as echarts from 'echarts/core';
 import {GridComponent, TooltipComponent, VisualMapComponent} from 'echarts/components';
 import {HeatmapChart} from 'echarts/charts';
 import {CanvasRenderer} from 'echarts/renderers';
-import {onMounted} from "vue";
+import {onMounted, onUnmounted, ref} from "vue";
 import {checkStatEmpty, getPlayerArr} from "../utils";
 import {useStore} from "vuex";
 
@@ -20,7 +20,11 @@ export default {
   name: "FlashChart",
   setup() {
     const store = useStore()
+
     const multiKills = ['2k', '3k', '4k', '5k']
+    let myChart1, myChart2
+    const width = ref(window.innerWidth <= 500 ? window.innerWidth : 500)
+    const height = ref(width.value)
 
     const multiKillArr = (stats, team) => {
       let arr = []
@@ -114,7 +118,24 @@ export default {
       }
     }
 
-    let myChart1, myChart2
+    const disposeCharts = () => {
+      if (myChart1 != null && myChart1 !== '' && myChart1 !== undefined) {
+        myChart1.dispose()
+      }
+      if (myChart2 != null && myChart2 !== '' && myChart2 !== undefined) {
+        myChart2.dispose()
+      }
+    }
+
+    const buildCharts = () => {
+      disposeCharts()
+
+      myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {width: width.value, height: height.value});
+      myChart1.setOption(optionGen(1));
+
+      myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: width.value, height: height.value});
+      myChart2.setOption(optionGen(2));
+    }
 
     onMounted(() => {
       if (store.state.matchDetails.stats) {
@@ -126,13 +147,22 @@ export default {
           CanvasRenderer
         ]);
 
-        myChart1 = echarts.init(document.getElementById('multi-kills-chart-1'), {}, {width: 500, height: 500});
+        buildCharts()
-        myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: 500, height: 500});
-
-        myChart1.setOption(optionGen(1));
-        myChart2.setOption(optionGen(2));
       }
     })
+
+    onUnmounted(() => {
+      disposeCharts()
+    })
+
+    window.onresize = () => {
+      if (window.innerWidth <= 500) {
+        width.value = window.innerWidth - 20
+        height.value = width.value
+
+        buildCharts()
+      }
+    }
   }
 }
 </script>
@@ -161,17 +191,8 @@ export default {
 
 @media (max-width: 1200px) {
   .multi-kills {
-    justify-content: flex-start;
+    justify-content: center;
-    align-items: flex-start;
+    align-items: center;
-    margin: 0 0 0 0;
-    overflow: hidden;
-
-    #multi-kills-chart-1,
-    #multi-kills-chart-2 {
-      flex-basis: 100%;
-      margin: 2rem 0 0 0;
-      overflow: scroll;
-    }
   }
 }
 </style>