diff --git a/src/components/DamageChart.vue b/src/components/DamageChart.vue index d913b19..9e2ce5d 100644 --- a/src/components/DamageChart.vue +++ b/src/components/DamageChart.vue @@ -20,8 +20,27 @@ export default { const store = useStore() let myChart1, myChart2 - const width = ref(window.innerWidth <= 1000 && window.innerWidth >= 751 ? window.innerWidth : 750) - const height = ref(window.innerWidth >= 751 ? width.value * 3 / 7.5 : window.innerWidth >= 501 && window.innerWidth <= 751 ? width.value * 3 / 6.5 : width.value * 3 / 5.5) + + const getWindowWidth = () => { + const windowWidth = window.innerWidth + if (windowWidth <= 750) + return windowWidth + else + return 650 + } + + const setHeight = () => { + const windowWidth = getWindowWidth() + if (windowWidth >= 751) + return windowWidth * 3 / 7.5 + else if (windowWidth >= 501 && windowWidth <= 750) + return windowWidth * 3 / 6.5 + else + return windowWidth * 3 / 5.5 + } + + const width = ref(getWindowWidth()) + const height = ref(setHeight()) const dataArr = (stats, team, prop) => { if (['team', 'enemy', 'self'].indexOf(prop) > -1) { @@ -140,16 +159,8 @@ export default { window.onresize = () => { if (window.innerWidth <= 750) { - width.value = window.innerWidth - 20 - if (window.innerWidth <= 500) { - height.value = width.value * 3 / 5.5 - } - if (window.innerWidth <= 750 && window.innerWidth >= 501) { - height.value = width.value * 3 / 6.5 - } - if (window.innerWidth <= 1000 && window.innerWidth >= 751) { - height.value = width.value * 3 / 7.5 - } + width.value = getWindowWidth() - 20 + height.value = setHeight() } buildCharts()