From 1b69006040d6fee2269682c45640472a35d7e327 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 13 Feb 2023 19:53:39 -0800
Subject: [PATCH] ?

---
 .../client/src/components/MkInstanceStats.vue | 273 +++++++++---------
 1 file changed, 134 insertions(+), 139 deletions(-)

diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index ec1729e8d6..a794677597 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -1,122 +1,101 @@
 <template>
-<div class="zbcjwnqg">
-	<div class="main">
-		<div class="body">
-			<div class="selects" style="display: flex;">
-				<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
-					<optgroup :label="i18n.ts.federation">
-						<option value="federation">{{ i18n.ts._charts.federation }}</option>
-						<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
-					</optgroup>
-					<optgroup :label="i18n.ts.users">
-						<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
-						<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
-						<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
-					</optgroup>
-					<optgroup :label="i18n.ts.notes">
-						<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
-						<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
-						<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
-						<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
-					</optgroup>
-					<optgroup :label="i18n.ts.drive">
-						<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
-						<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
-					</optgroup>
-				</MkSelect>
-				<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
-					<option value="hour">{{ i18n.ts.perHour }}</option>
-					<option value="day">{{ i18n.ts.perDay }}</option>
-				</MkSelect>
-			</div>
-			<div class="chart">
-				<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="detailed"></MkChart>
-			</div>
-			<div class="item">
-				<template #header>Active users heatmap</template>
-				<MkSelect v-model="heatmapSrc" style="margin: 0 0 10px 0;">
-					<option value="active-users">Active users</option>
-					<option value="notes">Notes</option>
-					<option value="ap-requests-inbox-received">AP Requests: inboxReceived</option>
-					<option value="ap-requests-deliver-succeeded">AP Requests: deliverSucceeded</option>
-					<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
-				</MkSelect>
-				<div class="_panel heatmap">
-					<MkHeatmap :src="heatmapSrc"/>
+	<div :class="$style.root">
+		<MkFoldableSection class="item">
+			<template #header>Chart</template>
+			<div :class="$style.chart">
+				<div class="selects">
+					<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
+						<optgroup :label="i18n.ts.federation">
+							<option value="federation">{{ i18n.ts._charts.federation }}</option>
+							<option value="ap-request">{{ i18n.ts._charts.apRequest }}</option>
+						</optgroup>
+						<optgroup :label="i18n.ts.users">
+							<option value="users">{{ i18n.ts._charts.usersIncDec }}</option>
+							<option value="users-total">{{ i18n.ts._charts.usersTotal }}</option>
+							<option value="active-users">{{ i18n.ts._charts.activeUsers }}</option>
+						</optgroup>
+						<optgroup :label="i18n.ts.notes">
+							<option value="notes">{{ i18n.ts._charts.notesIncDec }}</option>
+							<option value="local-notes">{{ i18n.ts._charts.localNotesIncDec }}</option>
+							<option value="remote-notes">{{ i18n.ts._charts.remoteNotesIncDec }}</option>
+							<option value="notes-total">{{ i18n.ts._charts.notesTotal }}</option>
+						</optgroup>
+						<optgroup :label="i18n.ts.drive">
+							<option value="drive-files">{{ i18n.ts._charts.filesIncDec }}</option>
+							<option value="drive">{{ i18n.ts._charts.storageUsageIncDec }}</option>
+						</optgroup>
+					</MkSelect>
+					<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">
+						<option value="hour">{{ i18n.ts.perHour }}</option>
+						<option value="day">{{ i18n.ts.perDay }}</option>
+					</MkSelect>
+				</div>
+				<div class="chart _panel">
+					<MkChart :src="chartSrc" :span="chartSpan" :limit="chartLimit" :detailed="true"></MkChart>
 				</div>
 			</div>
-		</div>
+		</MkFoldableSection>
+
+		<MkFoldableSection class="item">
+			<template #header>Active users heatmap</template>
+			<MkSelect v-model="heatmapSrc" style="margin: 0 0 12px 0;">
+				<option value="active-users">Active users</option>
+				<option value="notes">Notes</option>
+				<option value="ap-requests-inbox-received">AP Requests: inboxReceived</option>
+				<option value="ap-requests-deliver-succeeded">AP Requests: deliverSucceeded</option>
+				<option value="ap-requests-deliver-failed">AP Requests: deliverFailed</option>
+			</MkSelect>
+			<div class="_panel" :class="$style.heatmap">
+				<MkHeatmap :src="heatmapSrc"/>
+			</div>
+		</MkFoldableSection>
+
+		<MkFoldableSection class="item">
+			<template #header>Retention rate</template>
+			<div class="_panel" :class="$style.retention">
+				<MkRetentionHeatmap/>
+			</div>
+		</MkFoldableSection>
+
+		<MkFoldableSection class="item">
+			<template #header>Federation</template>
+			<div :class="$style.federation">
+				<div class="pies">
+					<div class="sub">
+						<div class="title">Sub</div>
+						<canvas ref="subDoughnutEl"></canvas>
+					</div>
+					<div class="pub">
+						<div class="title">Pub</div>
+						<canvas ref="pubDoughnutEl"></canvas>
+					</div>
+				</div>
+			</div>
+		</MkFoldableSection>
 	</div>
-	<div class="subpub">
-		<div class="sub">
-			<div class="title">Sub</div>
-			<canvas ref="subDoughnutEl"></canvas>
-		</div>
-		<div class="pub">
-			<div class="title">Pub</div>
-			<canvas ref="pubDoughnutEl"></canvas>
-		</div>
-	</div>
-</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
-import {
-	Chart,
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-	DoughnutController,
-} from 'chart.js';
-import MkSelect from '@/components/form/select.vue';
+import { Chart } from 'chart.js';
+import MkSelect from '@/components/MkSelect.vue';
 import MkChart from '@/components/MkChart.vue';
-import MkHeatmap from '@/components/MkHeatmap.vue';
 import { useChartTooltip } from '@/scripts/use-chart-tooltip';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
+import MkHeatmap from '@/components/MkHeatmap.vue';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
+import MkRetentionHeatmap from '@/components/MkRetentionHeatmap.vue';
+import { initChart } from '@/scripts/init-chart';
 
-Chart.register(
-	ArcElement,
-	LineElement,
-	BarElement,
-	PointElement,
-	BarController,
-	LineController,
-	DoughnutController,
-	CategoryScale,
-	LinearScale,
-	TimeScale,
-	Legend,
-	Title,
-	Tooltip,
-	SubTitle,
-	Filler,
-);
-
-const props = withDefaults(defineProps<{
-	chartLimit?: number;
-	detailed?: boolean;
-}>(), {
-	chartLimit: 90,
-});
+initChart();
 
+const chartLimit = 500;
 let chartSpan = $ref<'hour' | 'day'>('hour');
 let chartSrc = $ref('active-users');
-// let heatmapSrc = $ref('active-users');
-let subDoughnutEl = $ref<HTMLCanvasElement>();
-let pubDoughnutEl = $ref<HTMLCanvasElement>();
+let heatmapSrc = $ref('active-users');
+let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
+let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
 
 const { handler: externalTooltipHandler1 } = useChartTooltip({
 	position: 'middle',
@@ -196,47 +175,63 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-.zbcjwnqg {
-	> .main {
-		background: var(--panel);
-		border-radius: var(--radius);
-		padding: 24px;
-		margin-bottom: 16px;
-
-		> .body {
-			> .chart {
-				padding: 8px 0 0 0;
-			}
-			> .heatmap {
-				padding: 12px;
-				margin-bottom: 12px;
-			}
+<style lang="scss" module>
+.root {
+	&:global {
+		> .item {
+			margin-bottom: 16px;
 		}
 	}
+}
 
-	> .subpub {
-		display: flex;
-		gap: 16px;
-
-		> .sub, > .pub {
-			flex: 1;
-			min-width: 0;
-			position: relative;
-			background: var(--panel);
-			border-radius: var(--radius);
-			padding: 24px;
-			max-height: 300px;
-
-			> .title {
-				position: absolute;
-				top: 24px;
-				left: 24px;
-			}
+.chart {
+	&:global {
+		> .selects {
+			display: flex;
+			margin-bottom: 12px;
 		}
 
-		@media (max-width: 600px) {
-			flex-direction: column;
+		> .chart {
+			padding: 16px;
+		}
+	}
+}
+
+.heatmap {
+	padding: 16px;
+	margin-bottom: 16px;
+}
+
+.retention {
+	padding: 16px;
+	margin-bottom: 16px;
+}
+
+.federation {
+	&:global {
+		> .pies {
+			display: flex;
+			gap: 16px;
+
+			> .sub, > .pub {
+				flex: 1;
+				min-width: 0;
+				position: relative;
+				background: var(--panel);
+				border-radius: var(--radius);
+				padding: 24px;
+				max-height: 300px;
+
+				> .title {
+					position: absolute;
+					top: 24px;
+					left: 24px;
+				}
+			}
+
+			@media (max-width: 600px) {
+				flex-direction: column;
+			}
 		}
 	}
 }