156 lines
3.5 KiB
Vue
156 lines
3.5 KiB
Vue
<template>
|
|
<div>
|
|
<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
|
|
<MkLoading v-if="fetching"/>
|
|
<div v-else :class="$style.root">
|
|
<div class="item _panel users">
|
|
<div class="icon"><i class="ti ti-users"></i></div>
|
|
<div class="body">
|
|
<div class="value">
|
|
{{ number(stats.originalUsersCount) }}
|
|
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
|
|
</div>
|
|
<div class="label">Users</div>
|
|
</div>
|
|
</div>
|
|
<div class="item _panel notes">
|
|
<div class="icon"><i class="ti ti-pencil"></i></div>
|
|
<div class="body">
|
|
<div class="value">
|
|
{{ number(stats.originalNotesCount) }}
|
|
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
|
|
</div>
|
|
<div class="label">Notes</div>
|
|
</div>
|
|
</div>
|
|
<div class="item _panel instances">
|
|
<div class="icon"><i class="ti ti-planet"></i></div>
|
|
<div class="body">
|
|
<div class="value">
|
|
{{ number(stats.instances) }}
|
|
</div>
|
|
<div class="label">Instances</div>
|
|
</div>
|
|
</div>
|
|
<div class="item _panel online">
|
|
<div class="icon"><i class="ti ti-access-point"></i></div>
|
|
<div class="body">
|
|
<div class="value">
|
|
{{ number(onlineUsersCount) }}
|
|
</div>
|
|
<div class="label">Online</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, onUnmounted, ref } from 'vue';
|
|
import MkMiniChart from '@/components/MkMiniChart.vue';
|
|
import * as os from '@/os';
|
|
import number from '@/filters/number';
|
|
import MkNumberDiff from '@/components/MkNumberDiff.vue';
|
|
import { i18n } from '@/i18n';
|
|
|
|
let stats: any = $ref(null);
|
|
let usersComparedToThePrevDay = $ref<number>();
|
|
let notesComparedToThePrevDay = $ref<number>();
|
|
let onlineUsersCount = $ref(0);
|
|
let fetching = $ref(true);
|
|
|
|
onMounted(async () => {
|
|
const [_stats, _onlineUsersCount] = await Promise.all([
|
|
os.api('stats', {}),
|
|
os.api('get-online-users-count').then(res => res.count),
|
|
]);
|
|
stats = _stats;
|
|
onlineUsersCount = _onlineUsersCount;
|
|
|
|
os.apiGet('charts/users', { limit: 2, span: 'day' }).then(chart => {
|
|
usersComparedToThePrevDay = stats.originalUsersCount - chart.local.total[1];
|
|
});
|
|
|
|
os.apiGet('charts/notes', { limit: 2, span: 'day' }).then(chart => {
|
|
notesComparedToThePrevDay = stats.originalNotesCount - chart.local.total[1];
|
|
});
|
|
|
|
fetching = false;
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" module>
|
|
.root {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
|
|
grid-gap: 12px;
|
|
|
|
&:global {
|
|
> .item {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding: 12px;
|
|
|
|
> .icon {
|
|
display: grid;
|
|
place-items: center;
|
|
height: 100%;
|
|
aspect-ratio: 1;
|
|
margin-right: 12px;
|
|
background: var(--accentedBg);
|
|
color: var(--accent);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
&.users {
|
|
> .icon {
|
|
background: #0088d726;
|
|
color: #3d96c1;
|
|
}
|
|
}
|
|
|
|
&.notes {
|
|
> .icon {
|
|
background: #86b30026;
|
|
color: #86b300;
|
|
}
|
|
}
|
|
|
|
&.instances {
|
|
> .icon {
|
|
background: #e96b0026;
|
|
color: #d76d00;
|
|
}
|
|
}
|
|
|
|
&.online {
|
|
> .icon {
|
|
background: #8a00d126;
|
|
color: #c01ac3;
|
|
}
|
|
}
|
|
|
|
> .body {
|
|
padding: 2px 0;
|
|
|
|
> .value {
|
|
font-size: 1.25em;
|
|
font-weight: bold;
|
|
|
|
> .diff {
|
|
font-size: 0.65em;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
> .label {
|
|
font-size: 0.8em;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|