improve chart

This commit is contained in:
syuilo 2022-02-06 00:43:22 +09:00
parent eaad6e188c
commit f8fd491384
4 changed files with 45 additions and 61 deletions

View File

@ -1296,8 +1296,8 @@ _exportOrImport:
excludeInactiveUsers: "使われていないアカウントを除外" excludeInactiveUsers: "使われていないアカウントを除外"
_charts: _charts:
federationInstancesIncDec: "連合の増減" federation: "連合"
federationInstancesTotal: "連合の合計" apRequest: "リクエスト"
usersIncDec: "ユーザーの増減" usersIncDec: "ユーザーの増減"
usersTotal: "ユーザーの合計" usersTotal: "ユーザーの合計"
activeUsers: "アクティブユーザー数" activeUsers: "アクティブユーザー数"

View File

@ -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,
}; };
}); });

View File

@ -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);

View File

@ -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;">