mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-11-01 15:45:58 +09:00
chore(client): tweak ui
This commit is contained in:
parent
4c2cd3c8d5
commit
cb697cf582
@ -106,7 +106,7 @@ const { handler: externalTooltipHandler1 } = useChartTooltip();
|
||||
const { handler: externalTooltipHandler2 } = useChartTooltip();
|
||||
|
||||
function createDoughnut(chartEl, tooltip, data) {
|
||||
return new Chart(chartEl, {
|
||||
const chartInstance = new Chart(chartEl, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: data.map(x => x.name),
|
||||
@ -127,6 +127,12 @@ function createDoughnut(chartEl, tooltip, data) {
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
onClick: (ev) => {
|
||||
const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
|
||||
if (hit && data[hit.index].onClick) {
|
||||
data[hit.index].onClick();
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
@ -142,12 +148,29 @@ function createDoughnut(chartEl, tooltip, data) {
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return chartInstance;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
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 }]));
|
||||
createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
value: x.followersCount,
|
||||
onClick: () => {
|
||||
os.pageWindow(`/instance-info/${x.host}`);
|
||||
},
|
||||
})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]));
|
||||
|
||||
createDoughnut(pubDoughnutEl, externalTooltipHandler2, fedStats.topPubInstances.map(x => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
value: x.followingCount,
|
||||
onClick: () => {
|
||||
os.pageWindow(`/instance-info/${x.host}`);
|
||||
},
|
||||
})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
@ -45,7 +45,7 @@ Chart.register(
|
||||
);
|
||||
|
||||
const props = defineProps<{
|
||||
data: { name: string; value: number; color: string; }[];
|
||||
data: { name: string; value: number; color: string; onClick?: () => void }[];
|
||||
}>();
|
||||
|
||||
const chartEl = ref<HTMLCanvasElement>(null);
|
||||
@ -79,6 +79,12 @@ onMounted(() => {
|
||||
bottom: 16,
|
||||
},
|
||||
},
|
||||
onClick: (ev) => {
|
||||
const hit = chartInstance.getElementsAtEventForMode(ev, 'nearest', { intersect: true }, false)[0];
|
||||
if (hit && props.data[hit.index].onClick) {
|
||||
props.data[hit.index].onClick();
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
|
@ -119,16 +119,16 @@
|
||||
</MkTagCloud>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="fedStats" class="container federationPies">
|
||||
<div v-if="topSubInstancesForPie && topPubInstancesForPie" class="container federationPies">
|
||||
<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: '#80808080', value: fedStats.otherFollowersCount }])"/>
|
||||
<XPie :data="topSubInstancesForPie"/>
|
||||
<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: '#80808080', value: fedStats.otherFollowingCount }])"/>
|
||||
<XPie :data="topPubInstancesForPie"/>
|
||||
<div class="subTitle">Top 10</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -200,7 +200,8 @@ const rootEl = $ref<HTMLElement>();
|
||||
const chartEl = $ref<HTMLCanvasElement>(null);
|
||||
let stats: any = $ref(null);
|
||||
let serverInfo: any = $ref(null);
|
||||
let fedStats: any = $ref(null);
|
||||
let topSubInstancesForPie: any = $ref(null);
|
||||
let topPubInstancesForPie: any = $ref(null);
|
||||
let usersComparedToThePrevDay: any = $ref(null);
|
||||
let notesComparedToThePrevDay: any = $ref(null);
|
||||
let federationPubActive = $ref<number | null>(null);
|
||||
@ -412,7 +413,22 @@ onMounted(async () => {
|
||||
});
|
||||
|
||||
os.apiGet('federation/stats', { limit: 10 }).then(res => {
|
||||
fedStats = res;
|
||||
topSubInstancesForPie = fedStats.topSubInstances.map(x => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
value: x.followersCount,
|
||||
onClick: () => {
|
||||
os.pageWindow(`/instance-info/${x.host}`);
|
||||
},
|
||||
})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowersCount }]);
|
||||
topPubInstancesForPie = fedStats.topPubInstances.map(x => ({
|
||||
name: x.host,
|
||||
color: x.themeColor,
|
||||
value: x.followingCount,
|
||||
onClick: () => {
|
||||
os.pageWindow(`/instance-info/${x.host}`);
|
||||
},
|
||||
})).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }]);
|
||||
});
|
||||
|
||||
os.api('admin/server-info').then(serverInfoResponse => {
|
||||
|
Loading…
Reference in New Issue
Block a user