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