chore(client): tweak ui
This commit is contained in:
		
							parent
							
								
									eac31eb323
								
							
						
					
					
						commit
						ed41d542bb
					
				
					 4 changed files with 23 additions and 22 deletions
				
			
		|  | @ -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…
	
	Add table
		Add a link
		
	
		Reference in a new issue