Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(client): better formatting of global stats

Browse source
This commit is contained in:
Valentin Kaelin 2022-02-17 00:55:57 +01:00
parent 09621f100e
commit 1a1e68bdaa
2 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Summoner/Overview/SummonerStats.vue
View file

@ -92,13 +92,13 @@
class="flex items-center justify-between px-4 py-1 leading-tight" class="flex items-center justify-between px-4 py-1 leading-tight"
> >
<div class="w-1/4 text-left capitalize">{{ name }}</div> <div class="w-1/4 text-left capitalize">{{ name }}</div>
<div class="w-1/4">{{ stat }}</div> <div class="w-1/4">{{ stat|kilo(false) }}</div>
<div class="w-1/4">{{ stat / (stats.global.time / 60)|round }}</div> <div class="w-1/4">{{ stat / (stats.global.time / 60)|round }}</div>
<div class="w-1/4">{{ stat / stats.global.count|round }}</div> <div class="w-1/4">{{ stat / stats.global.count|round }}</div>
</li> </li>
<li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760"> <li class="flex items-center justify-between px-4 py-1 leading-tight bg-blue-760">
<div class="w-1/4 text-left whitespace-no-wrap">Time</div> <div class="w-1/4 text-left whitespace-no-wrap">Time</div>
<div class="w-1/4">{{ (stats.global.time / 3600).toFixed(1) + 'h' }}</div> <div class="w-1/4">{{ stats.global.time|secToHours }}</div>
<div class="w-1/4"></div> <div class="w-1/4"></div>
<div class="w-1/4">{{ (stats.global.time / stats.global.count)|secToTime(true) }}</div> <div class="w-1/4">{{ (stats.global.time / stats.global.count)|secToTime(true) }}</div>
</li> </li>

24
client/src/main.js
View file

@ -26,8 +26,8 @@ Vue.filter('capitalize', (value) => {
return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase() return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase()
}) })
Vue.filter('kilo', (value) => { Vue.filter('kilo', (value, shortFormat = true) => {
return `${+(value / 1000).toFixed(1)}k` return value > 1000 || shortFormat ? `${+(value / 1000).toFixed(1)}k` : value
}) })
Vue.filter('secToTime', (sec, dotNotation = false) => { Vue.filter('secToTime', (sec, dotNotation = false) => {
@ -43,10 +43,24 @@ Vue.filter('secToTime', (sec, dotNotation = false) => {
Vue.filter('secToHours', (sec) => { Vue.filter('secToHours', (sec) => {
if (isNaN(sec)) return 0 if (isNaN(sec)) return 0
const h = Math.floor(sec / 3600) const result = []
const m = Math.floor((sec % 3600) / 60) const d = Math.floor(sec / (3600 * 24))
const h = Math.floor(sec % (3600 * 24) / 3600)
const m = Math.floor(sec % 3600 / 60)
return h ? `${h}h ${m}m` : `${m}m` if (d > 0) {
result.push(d + ' days')
} else {
if (h > 0) {
result.push(h + 'h')
}
if (m > 0) {
result.push(m + 'm')
}
}
return result.join(' ')
}) })
Vue.filter('percent', (value) => { Vue.filter('percent', (value) => {