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 = { | 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…
	
	Add table
		Add a link
		
	
		Reference in a new issue