chore(client): tweak ui
This commit is contained in:
parent
eac31eb323
commit
ed41d542bb
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue