From db6fff6f2659e7f8dd82d3e56010ff3e08eea184 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Tue, 27 Dec 2022 14:31:24 +0900
Subject: [PATCH] wip: retention for dashboard
---
.../src/pages/admin/overview.retention.vue | 49 +++++++++++++++++++
packages/client/src/pages/admin/overview.vue | 6 +++
2 files changed, 55 insertions(+)
create mode 100644 packages/client/src/pages/admin/overview.retention.vue
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 0000000000..feac6f8118
--- /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 cc5b9b7b68..d656e55200 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';
--
GitLab