etc/Sharkey
0
0
Fork 0
mirror of https://activitypub.software/TransFem-org/Sharkey synced 2024-11-22 05:55:12 +00:00
Code Issues Projects Releases Packages Wiki Activity

wip: retention for dashboard

Browse source
This commit is contained in:
syuilo 2022-12-27 14:31:24 +09:00
parent d0331eebbf
commit db6fff6f26
2 changed files with 55 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
packages/client/src/pages/admin/overview.retention.vue Normal file
View file

@ -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>

6
packages/client/src/pages/admin/overview.vue
View file

@ -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';