retention chart

packages/frontend/src/components/MkInstanceStats.vue

@@ -43,6 +43,13 @@
 		</div>
 	</MkFolder>
 
+	<MkFolder class="item">
+		<template #header>Retention rate</template>
+		<div class="_panel" :class="$style.retention">
+			<MkRetentionHeatmap/>
+		</div>
+	</MkFolder>
+
 	<MkFolder class="item">
 		<template #header>Federation</template>
 		<div :class="$style.federation">
@@ -88,6 +95,7 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import MkActiveUsersHeatmap from '@/components/MkActiveUsersHeatmap.vue';
 import MkFolder from '@/components/MkFolder.vue';
+import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue';
 
 Chart.register(
 	ArcElement,
@@ -224,6 +232,11 @@ onMounted(() => {
 	margin-bottom: 16px;
 }
 
+.retention {
+	padding: 16px;
+	margin-bottom: 16px;
+}
+
 .federation {
 	&:global {
 		> .pies {