Sharkey/packages/frontend/src/pages/admin/overview.stats.vue

173 lines
4.1 KiB
Vue
Raw Normal View History

<template>
<div>
2022-12-30 06:52:40 +02:00
<Transition :name="$store.state.animation ? '_transition_zoom' : ''" mode="out-in">
2022-12-26 07:34:46 +02:00
<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">
2022-12-31 13:36:49 +02:00
<MkNumber :value="stats.originalUsersCount" style="margin-right: 0.5em;"/>
2022-12-26 07:34:46 +02:00
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="usersComparedToThePrevDay"></MkNumberDiff>
</div>
<div class="label">Users</div>
</div>
</div>
2022-12-26 07:34:46 +02:00
<div class="item _panel notes">
<div class="icon"><i class="ti ti-pencil"></i></div>
<div class="body">
<div class="value">
2022-12-31 13:36:49 +02:00
<MkNumber :value="stats.originalNotesCount" style="margin-right: 0.5em;"/>
2022-12-26 07:34:46 +02:00
<MkNumberDiff v-tooltip="i18n.ts.dayOverDayChanges" class="diff" :value="notesComparedToThePrevDay"></MkNumberDiff>
</div>
<div class="label">Notes</div>
</div>
</div>
2022-12-26 07:34:46 +02:00
<div class="item _panel instances">
<div class="icon"><i class="ti ti-planet"></i></div>
<div class="body">
<div class="value">
2022-12-31 13:36:49 +02:00
<MkNumber :value="stats.instances" style="margin-right: 0.5em;"/>
2022-12-26 07:34:46 +02:00
</div>
<div class="label">Instances</div>
</div>
</div>
2022-12-31 13:36:49 +02:00
<div class="item _panel emojis">
<div class="icon"><i class="ti ti-icons"></i></div>
<div class="body">
<div class="value">
<MkNumber :value="$instance.emojis.length" style="margin-right: 0.5em;"/>
</div>
<div class="label">Custom emojis</div>
</div>
</div>
2022-12-26 07:34:46 +02:00
<div class="item _panel online">
<div class="icon"><i class="ti ti-access-point"></i></div>
<div class="body">
<div class="value">
2022-12-31 13:36:49 +02:00
<MkNumber :value="stats.onlineUsersCount" style="margin-right: 0.5em;"/>
2022-12-26 07:34:46 +02:00
</div>
<div class="label">Online</div>
</div>
</div>
</div>
2022-12-30 06:37:14 +02:00
</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';
2022-12-31 13:36:49 +02:00
import MkNumber from '@/components/MkNumber.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;
2022-12-25 08:36:03 +02:00
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
2022-12-25 08:43:46 +02:00
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;
}
}
2022-12-31 13:36:49 +02:00
&.emojis {
> .icon {
background: #d5ba0026;
color: #dfc300;
}
}
&.online {
> .icon {
background: #8a00d126;
color: #c01ac3;
}
}
> .body {
2022-12-25 08:36:03 +02:00
padding: 2px 0;
> .value {
2023-01-02 02:21:44 +02:00
font-size: 1.2em;
font-weight: bold;
> .diff {
font-size: 0.65em;
font-weight: normal;
}
}
> .label {
font-size: 0.8em;
opacity: 0.5;
}
}
}
}
}
</style>