mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-14 12:14:42 +01:00
90 lines
2.3 KiB
Vue
90 lines
2.3 KiB
Vue
<script lang="ts" setup>
|
|
import type {Stats} from '~~/types'
|
|
|
|
const stats = await $fetch<Stats>('/api/stats')
|
|
|
|
const CardUi = {
|
|
footer: { padding: 'px-4 py-2' },
|
|
body: { base: 'h-full' },
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UCard
|
|
:ui="CardUi"
|
|
class="flex flex-col justify-between"
|
|
>
|
|
<div class="flex items-center gap-x-4 h-full">
|
|
<p
|
|
class="uppercase tracking-widest text-sm"
|
|
:style="{ writingMode: 'vertical-rl', textOrientation: 'sideways' }"
|
|
>
|
|
STATS
|
|
</p>
|
|
<div v-if="stats">
|
|
<div class="flex gap-4 items-center">
|
|
<div class="text-md">
|
|
<div class="flex items-center gap-x-1">
|
|
<h3>Total hours:</h3>
|
|
<p class="text-subtitle">
|
|
{{ usePrecision(stats.coding.data.grand_total.total_seconds_including_other_language / 3600, 0) }} hours
|
|
</p>
|
|
</div>
|
|
<div class="flex items-start gap-x-1 flex-wrap">
|
|
<h3>Best Editors:</h3>
|
|
<p class="text-subtitle">
|
|
{{ stats.editors.data.slice(0, 2).map(editor => `${editor.name} (${editor.percent}%)`).join(', ') }}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-x-1">
|
|
<h3>Best OS:</h3>
|
|
<p class="text-subtitle">
|
|
{{ stats.os.data[0].name }} with {{ stats.os.data[0].percent }}%
|
|
</p>
|
|
</div>
|
|
<div class="flex items-start gap-x-1 flex-wrap">
|
|
<h3>Top languages:</h3>
|
|
<p class="text-subtitle">
|
|
{{ stats.languages.data.slice(0, 2).map(language => `${language.name} (${language.percent}%)`).join(', ') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #footer>
|
|
<div class="flex items-center justify-between">
|
|
<ClientOnly>
|
|
<p
|
|
v-if="stats"
|
|
class="text-subtitle text-xs w-1/2"
|
|
>
|
|
Started {{ useTimeAgo(new Date(stats.coding.data.range.start)).value }}, the {{ useDateFormat(new Date(stats.coding.data.range.start), 'Do MMMM YYYY').value }}
|
|
</p>
|
|
</ClientOnly>
|
|
<div class="flex items-center justify-end space-x-1">
|
|
<p class="text-subtitle text-xs">
|
|
powered by
|
|
</p>
|
|
<UButton
|
|
size="xs"
|
|
:padded="false"
|
|
variant="link"
|
|
to="https://wakatime.com/"
|
|
target="_blank"
|
|
label="Wakatime"
|
|
/>
|
|
<UIcon
|
|
class="text-subtitle"
|
|
name="i-jam-thunder"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UCard>
|
|
</template>
|
|
|
|
<style>
|
|
|
|
</style>
|