yumechi-no-kuni/packages/client/src/pages/admin/overview.stats.vue

<template>
<div>
	<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>
</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(230px, 1fr));
	grid-gap: 16px;

	&: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: 4px 0;

				> .value {
					font-size: 1.3em;
					font-weight: bold;

					> .diff {
						font-size: 0.65em;
						font-weight: normal;
					}
				}

				> .label {
					font-size: 0.8em;
					opacity: 0.5;
				}
			}
		}
	}
}
</style>