From b003e24af43e3c98cf9fa0d614440f317c5fa6e3 Mon Sep 17 00:00:00 2001 From: syuilo 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 }])); }); });