amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(client): tweak ui

Browse Source
This commit is contained in:
syuilo 2022-06-30 20:15:14 +09:00
parent eac31eb323
commit ed41d542bb
4 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/backend/src/server/api/endpoints/federation/stats.ts
View File

@ -15,6 +15,7 @@ export const meta = {
export const paramDef = { export const paramDef = {
type: 'object', type: 'object',
properties: { properties: {
limit: { type: 'integer', minimum: 1, maximum: 100, default: 10 },
}, },
required: [], required: [],
} as const; } as const;
@ -29,7 +30,7 @@ export default define(meta, paramDef, async (ps) => {
order: { order: {
followersCount: 'DESC', followersCount: 'DESC',
}, },
take: 10, take: ps.limit,
}), }),
Instances.find({ Instances.find({
where: { where: {
@ -38,7 +39,7 @@ export default define(meta, paramDef, async (ps) => {
order: { order: {
followingCount: 'DESC', followingCount: 'DESC',
}, },
take: 10, take: ps.limit,
}), }),
Followings.count({ Followings.count({
where: { where: {

20
packages/client/src/components/instance-stats.vue
View File

@ -112,21 +112,21 @@ function createDoughnut(chartEl, tooltip, data) {
labels: data.map(x => x.name), labels: data.map(x => x.name),
datasets: [{ datasets: [{
backgroundColor: data.map(x => x.color), backgroundColor: data.map(x => x.color),
borderWidth: 0,
spacing: 4,
hoverOffset: 4,
data: data.map(x => x.value), data: data.map(x => x.value),
}], }],
}, },
options: { options: {
layout: { layout: {
padding: { padding: {
left: 8, left: 16,
right: 8, right: 16,
top: 8, top: 16,
bottom: 8, bottom: 16,
}, },
}, },
interaction: {
intersect: false,
},
plugins: { plugins: {
legend: { legend: {
display: false, display: false,
@ -145,9 +145,9 @@ function createDoughnut(chartEl, tooltip, data) {
} }
onMounted(() => { onMounted(() => {
os.apiGet('federation/stats').then(fedStats => { 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: '#808080', value: fedStats.otherFollowersCount }])); 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: '#808080', value: fedStats.otherFollowingCount }])); 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> </script>

14
packages/client/src/pages/admin/overview.pie.vue
View File

@ -64,21 +64,21 @@ onMounted(() => {
labels: props.data.map(x => x.name), labels: props.data.map(x => x.name),
datasets: [{ datasets: [{
backgroundColor: props.data.map(x => x.color), backgroundColor: props.data.map(x => x.color),
borderWidth: 0,
spacing: 4,
hoverOffset: 4,
data: props.data.map(x => x.value), data: props.data.map(x => x.value),
}], }],
}, },
options: { options: {
layout: { layout: {
padding: { padding: {
left: 8, left: 16,
right: 8, right: 16,
top: 8, top: 16,
bottom: 8, bottom: 16,
}, },
}, },
interaction: {
intersect: false,
},
plugins: { plugins: {
legend: { legend: {
display: false, display: false,

6
packages/client/src/pages/admin/overview.vue
View File

@ -123,12 +123,12 @@
<div class="body"> <div class="body">
<div class="chart deliver"> <div class="chart deliver">
<div class="title">Sub</div> <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 class="subTitle">Top 10</div>
</div> </div>
<div class="chart inbox"> <div class="chart inbox">
<div class="title">Pub</div> <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 class="subTitle">Top 10</div>
</div> </div>
</div> </div>
@ -411,7 +411,7 @@ onMounted(async () => {
federationSubActiveDiff = chart.subActive[0] - chart.subActive[1]; federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
}); });
os.apiGet('federation/stats').then(res => { os.apiGet('federation/stats', { limit: 10 }).then(res => {
fedStats = res; fedStats = res;
}); });