Files
artsite/app/components/home/Stats.vue
Arthur DANJOU afbb94ff11 Import and simplify usePrecision in Stats.vue
Updated the usePrecision function by removing unnecessary options for math rounding. Also cleaned up imports to enhance clarity and maintain concise coding practices.
2025-02-02 19:22:26 +01:00

86 lines
2.7 KiB
Vue

<script lang="ts" setup>
import type { Stats } from '~~/types'
import { usePrecision } from '@vueuse/math'
const { locale, locales } = useI18n()
const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
const { data: stats } = await useFetch<Stats>('/api/stats')
const { t } = useI18n({
useScope: 'local',
})
const time = useTimeAgo(new Date(stats.value!.coding.data.range.start)).value.split(' ')[0]
const date = useDateFormat(new Date(stats.value!.coding.data.range.start), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
</script>
<template>
<ClientOnly>
<i18n-t
v-if="stats"
keypath="stats"
tag="p"
>
<template #time>
{{ time }}
</template>
<template #date>
<HoverText
:hover="t('tooltip.date')"
:text="date"
/>
</template>
<template #hours>
<HoverText
:hover="t('tooltip.hours')"
:text="hours"
/>
</template>
<template #editors>
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(t('separator')) }}
</template>
<template
v-if="stats.os.data[0]"
#os
>
{{ stats.os.data[0].name }} ({{ stats.os.data[0].percent }}%)
</template>
<template #languages>
{{
stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(t('separator'))
}}
</template>
</i18n-t>
</ClientOnly>
</template>
<i18n lang="json">
{
"en": {
"stats": "I collect some data for {time} years, started the {date}. I've coded for a total of {hours} hours. My best editors are {editors}. My best OS is {os}. My top languages are {languages}.",
"separator": " and ",
"tooltip": {
"date": "That was so long ago 🫣",
"hours": "That's a lot 😮"
}
},
"fr": {
"stats": "Je collecte des données depuis {time} ans, commencé le {date}. J'ai codé un total de {hours} heures. Mes meilleurs éditeurs sont {editors}. Mon meilleur OS est {os}. Mes langages préférés sont {languages}.",
"separator": " et ",
"tooltip": {
"date": "C'était il y a si longtemps 🫣",
"hours": "C'est beaucoup 😮"
}
},
"es": {
"stats": "Recopilo datos desde hace {time} años, empecé el {date}. He programado durante un total de {hours} horas. Mis mejores editores son {editors}. Mi mejor OS es {os}. Y mis lenguajes favoritos son {languages}.",
"separator": " y ",
"tooltip": {
"date": "hace tato tiempo…🫣",
"hours": "es mucho 😮"
}
}
}
</i18n>