CSGOWTF/csgowtf
3
2
Fork 1
Code Issues 18 Pull Requests Projects Releases 7 Wiki Activity

fixed bug with charts not showing + better mobile support
All checks were successful
CSGOWTF/csgowtf/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
cnachtigall1991
2021-10-21 00:26:21 +02:00
committed by vikingowl
parent 4ab75c4ac1
commit 24060387e0
4 changed files with 136 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/DamageChart.vue
View File

@@ -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});
myChart2 = echarts.init(document.getElementById('dmg-chart-2'), {}, {width: 1000, height: 300});
myChart1.setOption(optionGen(1));
myChart2.setOption(optionGen(2));
buildCharts()
}
})
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>

62
src/components/EqValueGraph.vue
View File

@@ -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;
}
}
}
#economy-graph {
overflow: scroll;
margin: 0 0 0 -3rem;
}
@media (max-width: 800px) and (min-width: 1199px) {
#economy-graph {
overflow: scroll;
}
}
</style>

5
src/components/FlashChart.vue
View File

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

57
src/components/MultiKillsChart.vue
View File

@@ -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});
myChart2 = echarts.init(document.getElementById('multi-kills-chart-2'), {}, {width: 500, height: 500});
myChart1.setOption(optionGen(1));
myChart2.setOption(optionGen(2));
buildCharts()
}
})
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;
align-items: flex-start;
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;
}
justify-content: center;
align-items: center;
}
}
</style>