From b003e24af43e3c98cf9fa0d614440f317c5fa6e3 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 30 Jun 2022 20:15:14 +0900
Subject: [PATCH] chore(client): tweak ui

cherry-picked from ed41d542bb8894f2eaca42cd7cc08246089e0490
---
 .../server/api/endpoints/federation/stats.ts  |  5 +++--
 .../client/src/components/instance-stats.vue  | 20 +++++++++----------
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/backend/src/server/api/endpoints/federation/stats.ts b/packages/backend/src/server/api/endpoints/federation/stats.ts
index 576999670..59328b031 100644
--- a/packages/backend/src/server/api/endpoints/federation/stats.ts
+++ b/packages/backend/src/server/api/endpoints/federation/stats.ts
@@ -15,6 +15,7 @@ export const meta = {
 export const paramDef = {
 	type: 'object',
 	properties: {
+		limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
 	},
 	required: [],
 } as const;
@@ -29,7 +30,7 @@ export default define(meta, paramDef, async (ps) => {
 			order: {
 				followersCount: 'DESC',
 			},
-			take: 10,
+			take: ps.limit,
 		}),
 		Instances.find({
 			where: {
@@ -38,7 +39,7 @@ export default define(meta, paramDef, async (ps) => {
 			order: {
 				followingCount: 'DESC',
 			},
-			take: 10,
+			take: ps.limit,
 		}),
 	]);
 
diff --git a/packages/client/src/components/instance-stats.vue b/packages/client/src/components/instance-stats.vue
index 9a1769a3a..1646a7e93 100644
--- a/packages/client/src/components/instance-stats.vue
+++ b/packages/client/src/components/instance-stats.vue
@@ -112,21 +112,21 @@ function createDoughnut(chartEl, tooltip, data) {
 			labels: data.map(x => x.name),
 			datasets: [{
 				backgroundColor: data.map(x => x.color),
+				borderWidth: 0,
+				spacing: 4,
+				hoverOffset: 4,
 				data: data.map(x => x.value),
 			}],
 		},
 		options: {
 			layout: {
 				padding: {
-					left: 8,
-					right: 8,
-					top: 8,
-					bottom: 8,
+					left: 16,
+					right: 16,
+					top: 16,
+					bottom: 16,
 				},
 			},
-			interaction: {
-				intersect: false,
-			},
 			plugins: {
 				legend: {
 					display: false,
@@ -145,9 +145,9 @@ function createDoughnut(chartEl, tooltip, data) {
 }
 
 onMounted(() => {
-	os.apiGet('federation/stats').then(fedStats => {
-		createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followersCount })).concat([{ name: '(other)', color: '#808080', value: fedStats.otherFollowersCount }]));
-		createDoughnut(pubDoughnutEl, externalTooltipHandler1, fedStats.topPubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followingCount })).concat([{ name: '(other)', color: '#808080', value: fedStats.otherFollowingCount }]));
+	os.apiGet('federation/stats', { limit: 15 }).then(fedStats => {
+		createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followersCount })).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
+		createDoughnut(pubDoughnutEl, externalTooltipHandler1, fedStats.topPubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followingCount })).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
 	});
 });
 </script>