diff --git a/packages/client/src/pages/admin/overview.retention.vue b/packages/client/src/pages/admin/overview.retention.vue new file mode 100644 index 0000000000000000000000000000000000000000..feac6f81189c92f1d1b5105d82991e55416ce380 --- /dev/null +++ b/packages/client/src/pages/admin/overview.retention.vue @@ -0,0 +1,49 @@ +<template> +<div> + <MkLoading v-if="fetching"/> + <div v-else :class="$style.root"> + <div v-for="row in retention" class="row"> + <div v-for="value in getValues(row)" v-tooltip="value.percentage" class="cell"> + </div> + </div> + </div> +</div> +</template> + +<script lang="ts" setup> +import { onMounted, onUnmounted, ref } from 'vue'; +import * as os from '@/os'; +import number from '@/filters/number'; +import { i18n } from '@/i18n'; + +let retention: any = $ref(null); +let fetching = $ref(true); + +function getValues(row) { + const data = []; + for (const key in row.data) { + data.push({ + date: new Date(key), + value: number(row.data[key]), + percentage: `${Math.ceil(row.data[key] / row.users) * 100}%`, + }); + } + data.sort((a, b) => a.date > b.date); + return data; +} + +onMounted(async () => { + retention = await os.apiGet('retention', {}); + + fetching = false; +}); +</script> + +<style lang="scss" module> +.root { + + &:global { + + } +} +</style> diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue index cc5b9b7b6807197b504155ecc83da189c1fa3ce6..d656e55200f85c48e4f4cd703131f126fa309cad 100644 --- a/packages/client/src/pages/admin/overview.vue +++ b/packages/client/src/pages/admin/overview.vue @@ -16,6 +16,11 @@ <XHeatmap/> </MkFolder> + <MkFolder class="item"> + <template #header>Retention rate</template> + <XRetention/> + </MkFolder> + <MkFolder class="item"> <template #header>Moderators</template> <XModerators/> @@ -63,6 +68,7 @@ import XApRequests from './overview.ap-requests.vue'; import XUsers from './overview.users.vue'; import XActiveUsers from './overview.active-users.vue'; import XStats from './overview.stats.vue'; +import XRetention from './overview.retention.vue'; import XModerators from './overview.moderators.vue'; import XHeatmap from './overview.heatmap.vue'; import MkTagCloud from '@/components/MkTagCloud.vue';