From ed41d542bb8894f2eaca42cd7cc08246089e0490 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
---
.../server/api/endpoints/federation/stats.ts | 5 +++--
.../client/src/components/instance-stats.vue | 20 +++++++++----------
.../client/src/pages/admin/overview.pie.vue | 14 ++++++-------
packages/client/src/pages/admin/overview.vue | 6 +++---
4 files changed, 23 insertions(+), 22 deletions(-)
diff --git a/packages/backend/src/server/api/endpoints/federation/stats.ts b/packages/backend/src/server/api/endpoints/federation/stats.ts
index d3c265908..cbe47dc7c 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 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>
diff --git a/packages/client/src/pages/admin/overview.pie.vue b/packages/client/src/pages/admin/overview.pie.vue
index d14b3cc6d..41a5e53ae 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 6ccee8aea..393ee6645 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;
});