mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-01 15:45:58 +09:00
Code

chore(client): tweak ui

Browse Source
This commit is contained in:
syuilo 2022-06-30 22:02:08 +09:00
parent 4c2cd3c8d5
commit cb697cf582
3 changed files with 54 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -106,7 +106,7 @@ const { handler: externalTooltipHandler1 } = useChartTooltip();
const { handler: externalTooltipHandler2 } = useChartTooltip(); const { handler: externalTooltipHandler2 } = useChartTooltip();
function createDoughnut(chartEl, tooltip, data) { function createDoughnut(chartEl, tooltip, data) {
return new Chart(chartEl, { const chartInstance = new Chart(chartEl, {
type: 'doughnut', type: 'doughnut',
data: { data: {
labels: data.map(x => x.name), labels: data.map(x => x.name),
@ -127,6 +127,12 @@ function createDoughnut(chartEl, tooltip, data) {
bottom: 16, 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: { plugins: {
legend: { legend: {
display: false, display: false,
@ -142,12 +148,29 @@ function createDoughnut(chartEl, tooltip, data) {
}, },
}, },
}); });
return chartInstance;
} }
onMounted(() => { onMounted(() => {
os.apiGet('federation/stats', { limit: 15 }).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: '#80808080', value: fedStats.otherFollowersCount }])); createDoughnut(subDoughnutEl, externalTooltipHandler1, fedStats.topSubInstances.map(x => ({
createDoughnut(pubDoughnutEl, externalTooltipHandler1, fedStats.topPubInstances.map(x => ({ name: x.host, color: x.themeColor, value: x.followingCount })).concat([{ name: '(other)', color: '#80808080', value: fedStats.otherFollowingCount }])); 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> </script>

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

@ -45,7 +45,7 @@ Chart.register(
); );
const props = defineProps<{ const props = defineProps<{
data: { name: string; value: number; color: string; }[]; data: { name: string; value: number; color: string; onClick?: () => void }[];
}>(); }>();
const chartEl = ref<HTMLCanvasElement>(null); const chartEl = ref<HTMLCanvasElement>(null);
@ -79,6 +79,12 @@ onMounted(() => {
bottom: 16, 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: { plugins: {
legend: { legend: {
display: false, display: false,

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

@ -119,16 +119,16 @@
</MkTagCloud> </MkTagCloud>
</div> </div>
</div> </div>
<div v-if="fedStats" class="container federationPies"> <div v-if="topSubInstancesForPie && topPubInstancesForPie" class="container federationPies">
<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: '#80808080', value: fedStats.otherFollowersCount }])"/> <XPie :data="topSubInstancesForPie"/>
<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: '#80808080', value: fedStats.otherFollowingCount }])"/> <XPie :data="topPubInstancesForPie"/>
<div class="subTitle">Top 10</div> <div class="subTitle">Top 10</div>
</div> </div>
</div> </div>
@ -200,7 +200,8 @@ const rootEl = $ref<HTMLElement>();
const chartEl = $ref<HTMLCanvasElement>(null); const chartEl = $ref<HTMLCanvasElement>(null);
let stats: any = $ref(null); let stats: any = $ref(null);
let serverInfo: 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 usersComparedToThePrevDay: any = $ref(null);
let notesComparedToThePrevDay: any = $ref(null); let notesComparedToThePrevDay: any = $ref(null);
let federationPubActive = $ref<number | null>(null); let federationPubActive = $ref<number | null>(null);
@ -412,7 +413,22 @@ onMounted(async () => {
}); });
os.apiGet('federation/stats', { limit: 10 }).then(res => { 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 => { os.api('admin/server-info').then(serverInfoResponse => {