refactor(client): better formatting of global stats

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

View file

@ -92,13 +92,13 @@
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">{{ 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.count|round }}</div>
</li>
<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">{{ (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">{{ (stats.global.time / stats.global.count)|secToTime(true) }}</div>
</li>

View file

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