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: "使われていないアカウントを除外"
_charts:
federationInstancesIncDec: "連合の増減"
federationInstancesTotal: "連合の合計"
federation: "連合"
apRequest: "リクエスト"
usersIncDec: "ユーザーの増減"
usersTotal: "ユーザーの合計"
activeUsers: "アクティブユーザー数"

View file

@ -56,8 +56,6 @@ export default define(meta, async () => {
reactionsCount,
//originalReactionsCount,
instances,
driveUsageLocal,
driveUsageRemote,
] = await Promise.all([
Notes.count({ cache: 3600000 }), // 1 hour
Notes.count({ where: { userHost: null }, cache: 3600000 }),
@ -66,8 +64,6 @@ export default define(meta, async () => {
NoteReactions.count({ cache: 3600000 }), // 1 hour
//NoteReactions.count({ where: { userHost: null }, cache: 3600000 }),
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 {
@ -78,7 +74,7 @@ export default define(meta, async () => {
reactionsCount,
//originalReactionsCount,
instances,
driveUsageLocal,
driveUsageRemote,
driveUsageLocal: 0,
driveUsageRemote: 0,
};
});

View file

@ -339,20 +339,51 @@ export default defineComponent({
// 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 });
return {
series: [{
name: 'Instances',
name: 'Instances total',
type: 'area',
data: format(total
? raw.instance.total
: sum(raw.instance.inc, negate(raw.instance.dec))
),
data: format(raw.instance.total),
}, {
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 raw = await os.api('charts/notes', { limit: props.limit, span: props.span });
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 raw = await os.api('charts/drive', { limit: props.limit, span: props.span });
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 raw = await os.api('charts/instance', { host: props.args.host, limit: props.limit, span: props.span });
return {
@ -713,8 +705,8 @@ export default defineComponent({
const fetchAndRender = async () => {
const fetchData = () => {
switch (props.src) {
case 'federation-instances': return fetchFederationInstancesChart(false);
case 'federation-instances-total': return fetchFederationInstancesChart(true);
case 'federation': return fetchFederationChart();
case 'ap-request': return fetchApRequestChart();
case 'users': return fetchUsersChart(false);
case 'users-total': return fetchUsersChart(true);
case 'active-users': return fetchActiveUsersChart();
@ -723,9 +715,7 @@ export default defineComponent({
case 'remote-notes': return fetchNotesChart('remote');
case 'notes-total': return fetchNotesTotalChart();
case 'drive': return fetchDriveChart();
case 'drive-total': return fetchDriveTotalChart();
case 'drive-files': return fetchDriveFilesChart();
case 'drive-files-total': return fetchDriveFilesTotalChart();
case 'instance-requests': return fetchInstanceRequestsChart();
case 'instance-users': return fetchInstanceUsersChart(false);

View file

@ -3,8 +3,8 @@
<div class="selects" style="display: flex;">
<MkSelect v-model="chartSrc" style="margin: 0; flex: 1;">
<optgroup :label="$ts.federation">
<option value="federation-instances">{{ $ts._charts.federationInstancesIncDec }}</option>
<option value="federation-instances-total">{{ $ts._charts.federationInstancesTotal }}</option>
<option value="federation">{{ $ts._charts.federation }}</option>
<option value="ap-request">{{ $ts._charts.apRequest }}</option>
</optgroup>
<optgroup :label="$ts.users">
<option value="users">{{ $ts._charts.usersIncDec }}</option>
@ -19,9 +19,7 @@
</optgroup>
<optgroup :label="$ts.drive">
<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-total">{{ $ts._charts.storageUsageTotal }}</option>
</optgroup>
</MkSelect>
<MkSelect v-model="chartSpan" style="margin: 0 0 0 10px;">