oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

rename: client -> frontend

Browse source
This commit is contained in:
syuilo 2022-12-27 14:36:33 +09:00
parent db6fff6f26
commit 9384f5399d
592 changed files with 111 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

155
packages/frontend/src/pages/admin/overview.stats.vue Normal file
View file

@ -0,0 +1,155 @@
<template>
<div>
<transition :name="$store.state.animation ? '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>