improve chart
This commit is contained in:
		
							parent
							
								
									c1b264e4e9
								
							
						
					
					
						commit
						80fa92fb97
					
				
					 4 changed files with 45 additions and 61 deletions
				
			
		|  | @ -1296,8 +1296,8 @@ _exportOrImport: | ||||||
|   excludeInactiveUsers: "使われていないアカウントを除外" |   excludeInactiveUsers: "使われていないアカウントを除外" | ||||||
| 
 | 
 | ||||||
| _charts: | _charts: | ||||||
|   federationInstancesIncDec: "連合の増減" |   federation: "連合" | ||||||
|   federationInstancesTotal: "連合の合計" |   apRequest: "リクエスト" | ||||||
|   usersIncDec: "ユーザーの増減" |   usersIncDec: "ユーザーの増減" | ||||||
|   usersTotal: "ユーザーの合計" |   usersTotal: "ユーザーの合計" | ||||||
|   activeUsers: "アクティブユーザー数" |   activeUsers: "アクティブユーザー数" | ||||||
|  |  | ||||||
|  | @ -56,8 +56,6 @@ export default define(meta, async () => { | ||||||
| 		reactionsCount, | 		reactionsCount, | ||||||
| 		//originalReactionsCount,
 | 		//originalReactionsCount,
 | ||||||
| 		instances, | 		instances, | ||||||
| 		driveUsageLocal, |  | ||||||
| 		driveUsageRemote, |  | ||||||
| 	] = await Promise.all([ | 	] = await Promise.all([ | ||||||
| 		Notes.count({ cache: 3600000 }), // 1 hour
 | 		Notes.count({ cache: 3600000 }), // 1 hour
 | ||||||
| 		Notes.count({ where: { userHost: null }, cache: 3600000 }), | 		Notes.count({ where: { userHost: null }, cache: 3600000 }), | ||||||
|  | @ -66,8 +64,6 @@ export default define(meta, async () => { | ||||||
| 		NoteReactions.count({ cache: 3600000 }), // 1 hour
 | 		NoteReactions.count({ cache: 3600000 }), // 1 hour
 | ||||||
| 		//NoteReactions.count({ where: { userHost: null }, cache: 3600000 }),
 | 		//NoteReactions.count({ where: { userHost: null }, cache: 3600000 }),
 | ||||||
| 		federationChart.getChart('hour', 1, null).then(chart => chart.instance.total[0]), | 		federationChart.getChart('hour', 1, null).then(chart => chart.instance.total[0]), | ||||||
| 		driveChart.getChart('hour', 1, null).then(chart => chart.local.totalSize[0] * 1000), |  | ||||||
| 		driveChart.getChart('hour', 1, null).then(chart => chart.remote.totalSize[0] * 1000), |  | ||||||
| 	]); | 	]); | ||||||
| 
 | 
 | ||||||
| 	return { | 	return { | ||||||
|  | @ -78,7 +74,7 @@ export default define(meta, async () => { | ||||||
| 		reactionsCount, | 		reactionsCount, | ||||||
| 		//originalReactionsCount,
 | 		//originalReactionsCount,
 | ||||||
| 		instances, | 		instances, | ||||||
| 		driveUsageLocal, | 		driveUsageLocal: 0, | ||||||
| 		driveUsageRemote, | 		driveUsageRemote: 0, | ||||||
| 	}; | 	}; | ||||||
| }); | }); | ||||||
|  |  | ||||||
|  | @ -339,20 +339,51 @@ export default defineComponent({ | ||||||
| 			// TODO | 			// TODO | ||||||
| 		}; | 		}; | ||||||
| 
 | 
 | ||||||
| 		const fetchFederationInstancesChart = async (total: boolean): Promise<typeof data> => { | 		const fetchFederationChart = async (): Promise<typeof data> => { | ||||||
| 			const raw = await os.api('charts/federation', { limit: props.limit, span: props.span }); | 			const raw = await os.api('charts/federation', { limit: props.limit, span: props.span }); | ||||||
| 			return { | 			return { | ||||||
| 				series: [{ | 				series: [{ | ||||||
| 					name: 'Instances', | 					name: 'Instances total', | ||||||
| 					type: 'area', | 					type: 'area', | ||||||
| 					data: format(total | 					data: format(raw.instance.total), | ||||||
| 						? raw.instance.total | 				}, { | ||||||
| 						: sum(raw.instance.inc, negate(raw.instance.dec)) | 					name: 'Instances inc/dec', | ||||||
| 					), | 					type: 'area', | ||||||
|  | 					data: format(sum(raw.instance.inc, negate(raw.instance.dec))), | ||||||
|  | 				}, { | ||||||
|  | 					name: 'Delivered instances', | ||||||
|  | 					type: 'area', | ||||||
|  | 					data: format(raw.deliveredInstances), | ||||||
|  | 				}, { | ||||||
|  | 					name: 'Inbox instances', | ||||||
|  | 					type: 'area', | ||||||
|  | 					data: format(raw.inboxInstances), | ||||||
| 				}], | 				}], | ||||||
| 			}; | 			}; | ||||||
| 		}; | 		}; | ||||||
| 
 | 
 | ||||||
|  | 		const fetchApRequestChart = async (): Promise<typeof data> => { | ||||||
|  | 			const raw = await os.api('charts/ap-request', { limit: props.limit, span: props.span }); | ||||||
|  | 			return { | ||||||
|  | 				series: [{ | ||||||
|  | 					name: 'In', | ||||||
|  | 					type: 'area', | ||||||
|  | 					color: '#008FFB', | ||||||
|  | 					data: format(raw.inboxReceived) | ||||||
|  | 				}, { | ||||||
|  | 					name: 'Out (succ)', | ||||||
|  | 					type: 'area', | ||||||
|  | 					color: '#00E396', | ||||||
|  | 					data: format(raw.deliverSucceeded) | ||||||
|  | 				}, { | ||||||
|  | 					name: 'Out (fail)', | ||||||
|  | 					type: 'area', | ||||||
|  | 					color: '#FEB019', | ||||||
|  | 					data: format(raw.deliverFailed) | ||||||
|  | 				}] | ||||||
|  | 			}; | ||||||
|  | 		}; | ||||||
|  | 
 | ||||||
| 		const fetchNotesChart = async (type: string): Promise<typeof data> => { | 		const fetchNotesChart = async (type: string): Promise<typeof data> => { | ||||||
| 			const raw = await os.api('charts/notes', { limit: props.limit, span: props.span }); | 			const raw = await os.api('charts/notes', { limit: props.limit, span: props.span }); | ||||||
| 			return { | 			return { | ||||||
|  | @ -491,26 +522,6 @@ export default defineComponent({ | ||||||
| 			}; | 			}; | ||||||
| 		}; | 		}; | ||||||
| 
 | 
 | ||||||
| 		const fetchDriveTotalChart = async (): Promise<typeof data> => { |  | ||||||
| 			const raw = await os.api('charts/drive', { limit: props.limit, span: props.span }); |  | ||||||
| 			return { |  | ||||||
| 				bytes: true, |  | ||||||
| 				series: [{ |  | ||||||
| 					name: 'Combined', |  | ||||||
| 					type: 'line', |  | ||||||
| 					data: format(sum(raw.local.totalSize, raw.remote.totalSize)), |  | ||||||
| 				}, { |  | ||||||
| 					name: 'Local', |  | ||||||
| 					type: 'area', |  | ||||||
| 					data: format(raw.local.totalSize), |  | ||||||
| 				}, { |  | ||||||
| 					name: 'Remote', |  | ||||||
| 					type: 'area', |  | ||||||
| 					data: format(raw.remote.totalSize), |  | ||||||
| 				}], |  | ||||||
| 			}; |  | ||||||
| 		}; |  | ||||||
| 
 |  | ||||||
| 		const fetchDriveFilesChart = async (): Promise<typeof data> => { | 		const fetchDriveFilesChart = async (): Promise<typeof data> => { | ||||||
| 			const raw = await os.api('charts/drive', { limit: props.limit, span: props.span }); | 			const raw = await os.api('charts/drive', { limit: props.limit, span: props.span }); | ||||||
| 			return { | 			return { | ||||||
|  | @ -546,25 +557,6 @@ export default defineComponent({ | ||||||
| 			}; | 			}; | ||||||
| 		}; | 		}; | ||||||
| 
 | 
 | ||||||
| 		const fetchDriveFilesTotalChart = async (): Promise<typeof data> => { |  | ||||||
| 			const raw = await os.api('charts/drive', { limit: props.limit, span: props.span }); |  | ||||||
| 			return { |  | ||||||
| 				series: [{ |  | ||||||
| 					name: 'Combined', |  | ||||||
| 					type: 'line', |  | ||||||
| 					data: format(sum(raw.local.totalCount, raw.remote.totalCount)), |  | ||||||
| 				}, { |  | ||||||
| 					name: 'Local', |  | ||||||
| 					type: 'area', |  | ||||||
| 					data: format(raw.local.totalCount), |  | ||||||
| 				}, { |  | ||||||
| 					name: 'Remote', |  | ||||||
| 					type: 'area', |  | ||||||
| 					data: format(raw.remote.totalCount), |  | ||||||
| 				}], |  | ||||||
| 			}; |  | ||||||
| 		}; |  | ||||||
| 
 |  | ||||||
| 		const fetchInstanceRequestsChart = async (): Promise<typeof data> => { | 		const fetchInstanceRequestsChart = async (): Promise<typeof data> => { | ||||||
| 			const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); | 			const raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span }); | ||||||
| 			return { | 			return { | ||||||
|  | @ -713,8 +705,8 @@ export default defineComponent({ | ||||||
| 		const fetchAndRender = async () => { | 		const fetchAndRender = async () => { | ||||||
| 			const fetchData = () => { | 			const fetchData = () => { | ||||||
| 				switch (props.src) { | 				switch (props.src) { | ||||||
| 					case 'federation-instances': return fetchFederationInstancesChart(false); | 					case 'federation': return fetchFederationChart(); | ||||||
| 					case 'federation-instances-total': return fetchFederationInstancesChart(true); | 					case 'ap-request': return fetchApRequestChart(); | ||||||
| 					case 'users': return fetchUsersChart(false); | 					case 'users': return fetchUsersChart(false); | ||||||
| 					case 'users-total': return fetchUsersChart(true); | 					case 'users-total': return fetchUsersChart(true); | ||||||
| 					case 'active-users': return fetchActiveUsersChart(); | 					case 'active-users': return fetchActiveUsersChart(); | ||||||
|  | @ -723,9 +715,7 @@ export default defineComponent({ | ||||||
| 					case 'remote-notes': return fetchNotesChart('remote'); | 					case 'remote-notes': return fetchNotesChart('remote'); | ||||||
| 					case 'notes-total': return fetchNotesTotalChart(); | 					case 'notes-total': return fetchNotesTotalChart(); | ||||||
| 					case 'drive': return fetchDriveChart(); | 					case 'drive': return fetchDriveChart(); | ||||||
| 					case 'drive-total': return fetchDriveTotalChart(); |  | ||||||
| 					case 'drive-files': return fetchDriveFilesChart(); | 					case 'drive-files': return fetchDriveFilesChart(); | ||||||
| 					case 'drive-files-total': return fetchDriveFilesTotalChart(); |  | ||||||
| 					 | 					 | ||||||
| 					case 'instance-requests': return fetchInstanceRequestsChart(); | 					case 'instance-requests': return fetchInstanceRequestsChart(); | ||||||
| 					case 'instance-users': return fetchInstanceUsersChart(false); | 					case 'instance-users': return fetchInstanceUsersChart(false); | ||||||
|  |  | ||||||
|  | @ -3,8 +3,8 @@ | ||||||
| 	<div class="selects" style="display: flex;"> | 	<div class="selects" style="display: flex;"> | ||||||
| 		<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;"> | 		<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;"> | ||||||
| 			<optgroup :label="$ts.federation"> | 			<optgroup :label="$ts.federation"> | ||||||
| 				<option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option> | 				<option value="federation">{{ $ts._charts.federation }}</option> | ||||||
| 				<option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option> | 				<option value="ap-request">{{ $ts._charts.apRequest }}</option> | ||||||
| 			</optgroup> | 			</optgroup> | ||||||
| 			<optgroup :label="$ts.users"> | 			<optgroup :label="$ts.users"> | ||||||
| 				<option value="users">{{ $ts._charts.usersIncDec }}</option> | 				<option value="users">{{ $ts._charts.usersIncDec }}</option> | ||||||
|  | @ -19,9 +19,7 @@ | ||||||
| 			</optgroup> | 			</optgroup> | ||||||
| 			<optgroup :label="$ts.drive"> | 			<optgroup :label="$ts.drive"> | ||||||
| 				<option value="drive-files">{{ $ts._charts.filesIncDec }}</option> | 				<option value="drive-files">{{ $ts._charts.filesIncDec }}</option> | ||||||
| 				<option value="drive-files-total">{{ $ts._charts.filesTotal }}</option> |  | ||||||
| 				<option value="drive">{{ $ts._charts.storageUsageIncDec }}</option> | 				<option value="drive">{{ $ts._charts.storageUsageIncDec }}</option> | ||||||
| 				<option value="drive-total">{{ $ts._charts.storageUsageTotal }}</option> |  | ||||||
| 			</optgroup> | 			</optgroup> | ||||||
| 		</MkSelect> | 		</MkSelect> | ||||||
| 		<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;"> | 		<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;"> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue