mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-14 06:00:44 +01:00
wip: retention for dashboard
This commit is contained in:
parent
d0331eebbf
commit
db6fff6f26
2 changed files with 55 additions and 0 deletions
49
packages/client/src/pages/admin/overview.retention.vue
Normal file
49
packages/client/src/pages/admin/overview.retention.vue
Normal 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>
|
|
@ -16,6 +16,11 @@
|
||||||
<XHeatmap/>
|
<XHeatmap/>
|
||||||
</MkFolder>
|
</MkFolder>
|
||||||
|
|
||||||
|
<MkFolder class="item">
|
||||||
|
<template #header>Retention rate</template>
|
||||||
|
<XRetention/>
|
||||||
|
</MkFolder>
|
||||||
|
|
||||||
<MkFolder class="item">
|
<MkFolder class="item">
|
||||||
<template #header>Moderators</template>
|
<template #header>Moderators</template>
|
||||||
<XModerators/>
|
<XModerators/>
|
||||||
|
@ -63,6 +68,7 @@ import XApRequests from './overview.ap-requests.vue';
|
||||||
import XUsers from './overview.users.vue';
|
import XUsers from './overview.users.vue';
|
||||||
import XActiveUsers from './overview.active-users.vue';
|
import XActiveUsers from './overview.active-users.vue';
|
||||||
import XStats from './overview.stats.vue';
|
import XStats from './overview.stats.vue';
|
||||||
|
import XRetention from './overview.retention.vue';
|
||||||
import XModerators from './overview.moderators.vue';
|
import XModerators from './overview.moderators.vue';
|
||||||
import XHeatmap from './overview.heatmap.vue';
|
import XHeatmap from './overview.heatmap.vue';
|
||||||
import MkTagCloud from '@/components/MkTagCloud.vue';
|
import MkTagCloud from '@/components/MkTagCloud.vue';
|
||||||
|
|
Loading…
Reference in a new issue