diff --git a/packages/backend/src/server/api/endpoints/federation/stats.ts b/packages/backend/src/server/api/endpoints/federation/stats.ts index d3c26590887ac3e3528815d762ad314f42801f7a..cbe47dc7cbc272f3875d2a580b99282fe57fbe7e 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, }), Followings.count({ where: { diff --git a/packages/client/src/components/instance-stats.vue b/packages/client/src/components/instance-stats.vue index 9a1769a3a11816fc97f69953a1462f928ea0b4e5..1646a7e93ea1cc8056c415b403229510a34712cc 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> diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue index d14b3cc6dbf232e49610ec67e93309936d297353..41a5e53ae3e5410adbcffcd716d77b2e7b33576b 100644 --- a/packages/client/src/pages/admin/overview.pie.vue +++ b/packages/client/src/pages/admin/overview.pie.vue @@ -64,21 +64,21 @@ onMounted(() => { labels: props.data.map(x => x.name), datasets: [{ backgroundColor: props.data.map(x => x.color), + borderWidth: 0, + spacing: 4, + hoverOffset: 4, data: props.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, diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue index 6ccee8aea2921d50e3b975e8da70cc444f2900ff..393ee6645293976a48ac2d442c0be9fe5d2e81dc 100644 --- a/packages/client/src/pages/admin/overview.vue +++ b/packages/client/src/pages/admin/overview.vue @@ -123,12 +123,12 @@ <div class="body"> <div class="chart deliver"> <div class="title">Sub</div> - <XPie :data="fedStats.topSubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followersCount })).concat([{ name: '(other)', color: '#808080', value: fedStats.otherFollowersCount }])"/> + <XPie :data="fedStats.topSubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followersCount })).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }])"/> <div class="subTitle">Top 10</div> </div> <div class="chart inbox"> <div class="title">Pub</div> - <XPie :data="fedStats.topPubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followingCount })).concat([{ name: '(other)', color: '#808080', value: fedStats.otherFollowingCount }])"/> + <XPie :data="fedStats.topPubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followingCount })).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }])"/> <div class="subTitle">Top 10</div> </div> </div> @@ -411,7 +411,7 @@ onMounted(async () => { federationSubActiveDiff = chart.subActive[0] - chart.subActive[1]; }); - os.apiGet('federation/stats').then(res => { + os.apiGet('federation/stats', { limit: 10 }).then(res => { fedStats = res; });