Show some charts in control panel

This commit is contained in:
syuilo 2018-08-18 03:52:24 +09:00
parent cd09fa5a28
commit bc34ac82cf
10 changed files with 413 additions and 151 deletions

View file

@ -1,11 +1,11 @@
<template>
<div>
<h1>%i18n:@dashboard%</h1>
<div v-if="stats">
<p><b>%i18n:@all-users%</b>: <span>{{ stats.usersCount | number }}</span></p>
<p><b>%i18n:@original-users%</b>: <span>{{ stats.originalUsersCount | number }}</span></p>
<p><b>%i18n:@all-notes%</b>: <span>{{ stats.notesCount | number }}</span></p>
<p><b>%i18n:@original-notes%</b>: <span>{{ stats.originalNotesCount | number }}</span></p>
<div class="obdskegsannmntldydackcpzezagxqfy">
<header>%i18n:@dashboard%</header>
<div v-if="stats" class="stats">
<div><b>%fa:user% {{ stats.originalUsersCount | number }}</b><span>%i18n:@original-users%</span></div>
<div><b>%fa:user% {{ stats.usersCount | number }}</b><span>%i18n:@all-users%</span></div>
<div><b>%fa:pen% {{ stats.originalNotesCount | number }}</b><span>%i18n:@original-notes%</span></div>
<div><b>%fa:pen% {{ stats.notesCount | number }}</b><span>%i18n:@all-notes%</span></div>
</div>
<div>
<button class="ui" @click="invite">%i18n:@invite%</button>
@ -40,10 +40,23 @@ export default Vue.extend({
</script>
<style lang="stylus" scoped>
h1
margin 0 0 1em 0
padding 0 0 8px 0
font-size 1em
color #555
border-bottom solid 1px #eee
@import '~const.styl'
.obdskegsannmntldydackcpzezagxqfy
> .stats
display flex
justify-content center
margin-bottom 16px
> div
flex 1
text-align center
> b
display block
color $theme-color
> span
font-size 70%
</style>

View file

@ -0,0 +1,81 @@
<template>
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
<polyline
:points="pointsNote"
fill="none"
stroke-width="1"
stroke="#41ddde"/>
<polyline
:points="pointsReply"
fill="none"
stroke-width="1"
stroke="#f7796c"/>
<polyline
:points="pointsRenote"
fill="none"
stroke-width="1"
stroke="#a1de41"/>
<polyline
:points="pointsTotal"
fill="none"
stroke-width="1"
stroke="#555"
stroke-dasharray="2 2"/>
</svg>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
data: {
required: true
},
type: {
type: String,
required: true
}
},
data() {
return {
chart: this.data,
viewBoxX: 365,
viewBoxY: 70,
pointsNote: null,
pointsReply: null,
pointsRenote: null,
pointsTotal: null
};
},
created() {
this.chart.forEach(d => {
d.notes = this.type == 'local' ? d.localNotes : d.remoteNotes;
d.replies = this.type == 'local' ? d.localReplies : d.remoteReplies;
d.renotes = this.type == 'local' ? d.localRenotes : d.remoteRenotes;
});
this.chart.forEach(d => {
d.total = d.notes + d.replies + d.renotes;
});
const peak = Math.max.apply(null, this.chart.map(d => d.total));
if (peak != 0) {
const data = this.chart.slice().reverse();
this.pointsNote = data.map((d, i) => `${i},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' ');
this.pointsReply = data.map((d, i) => `${i},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' ');
this.pointsRenote = data.map((d, i) => `${i},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' ');
this.pointsTotal = data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
}
}
});
</script>
<style lang="stylus" scoped>
svg
display block
padding 10px
width 100%
</style>

View file

@ -0,0 +1,33 @@
<template>
<div>
<header>%i18n:@title%</header>
<x-chart v-if="data" :data="data" type="local"/>
<x-chart v-if="data" :data="data" type="remote"/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import XChart from "./admin.notes-chart.chart.vue";
export default Vue.extend({
components: {
XChart
},
data() {
return {
data: null
};
},
created() {
(this as any).api('aggregation/notes').then(res => {
this.data = res;
});
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
</style>

View file

@ -37,15 +37,3 @@ export default Vue.extend({
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
header
margin 10px 0
button
margin 16px 0
</style>

View file

@ -0,0 +1,53 @@
<template>
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
<polyline
:points="points"
fill="none"
stroke-width="1"
stroke="#555"/>
</svg>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
data: {
required: true
},
type: {
type: String,
required: true
}
},
data() {
return {
chart: this.data,
viewBoxX: 365,
viewBoxY: 70,
points: null
};
},
created() {
this.chart.forEach(d => {
d.count = this.type == 'local' ? d.local : d.remote;
});
const peak = Math.max.apply(null, this.chart.map(d => d.count));
if (peak != 0) {
const data = this.chart.slice().reverse();
this.points = data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ');
}
}
});
</script>
<style lang="stylus" scoped>
svg
display block
padding 10px
width 100%
</style>

View file

@ -0,0 +1,33 @@
<template>
<div>
<header>%i18n:@title%</header>
<x-chart v-if="data" :data="data" type="local"/>
<x-chart v-if="data" :data="data" type="remote"/>
</div>
</template>
<script lang="ts">
import Vue from "vue";
import XChart from "./admin.users-chart.chart.vue";
export default Vue.extend({
components: {
XChart
},
data() {
return {
data: null
};
},
created() {
(this as any).api('aggregation/users').then(res => {
this.data = res;
});
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
</style>

View file

@ -11,6 +11,8 @@
<main>
<div v-if="page == 'dashboard'">
<x-dashboard/>
<x-users-chart/>
<x-notes-chart/>
</div>
<div v-if="page == 'users'">
<x-suspend-user/>
@ -29,13 +31,17 @@ import XDashboard from "./admin.dashboard.vue";
import XSuspendUser from "./admin.suspend-user.vue";
import XUnsuspendUser from "./admin.unsuspend-user.vue";
import XVerifyUser from "./admin.verify-user.vue";
import XUsersChart from "./admin.users-chart.vue";
import XNotesChart from "./admin.notes-chart.vue";
export default Vue.extend({
components: {
XDashboard,
XSuspendUser,
XUnsuspendUser,
XVerifyUser
XVerifyUser,
XUsersChart,
XNotesChart
},
data() {
return {
@ -50,7 +56,7 @@ export default Vue.extend({
});
</script>
<style lang="stylus" scoped>
<style lang="stylus">
@import '~const.styl'
.mk-admin
@ -101,13 +107,11 @@ export default Vue.extend({
background #fff
box-shadow 0 2px 8px rgba(#000, 0.1)
header
margin 10px 0
button
margin 16px 0
position absolute
right 0
> header
margin 0 0 1em 0
padding 0 0 8px 0
font-size 1em
color #555
border-bottom solid 1px #eee
</style>

View file

@ -0,0 +1,110 @@
import $ from 'cafy';
import Note from '../../../../models/note';
/**
* Aggregate notes
*/
export default (params: any) => new Promise(async (res, rej) => {
// Get 'limit' parameter
const [limit = 365, limitErr] = $.num.optional.range(1, 365).get(params.limit);
if (limitErr) return rej('invalid limit param');
const query = [{
$project: {
renoteId: '$renoteId',
replyId: '$replyId',
user: '$_user',
createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
}
}, {
$project: {
date: {
year: { $year: '$createdAt' },
month: { $month: '$createdAt' },
day: { $dayOfMonth: '$createdAt' }
},
type: {
$cond: {
if: { $ne: ['$renoteId', null] },
then: 'renote',
else: {
$cond: {
if: { $ne: ['$replyId', null] },
then: 'reply',
else: 'note'
}
}
}
},
origin: {
$cond: {
if: { $eq: ['$user.host', null] },
then: 'local',
else: 'remote'
}
}
}
}, {
$group: {
_id: {
date: '$date',
type: '$type',
origin: '$origin'
},
count: { $sum: 1 }
}
}, {
$group: {
_id: '$_id.date',
data: {
$addToSet: {
type: '$_id.type',
origin: '$_id.origin',
count: '$count'
}
}
}
}] as any;
const datas = await Note.aggregate(query);
datas.forEach((data: any) => {
data.date = data._id;
delete data._id;
data.localNotes = (data.data.filter((x: any) => x.type == 'note' && x.origin == 'local')[0] || { count: 0 }).count;
data.localRenotes = (data.data.filter((x: any) => x.type == 'renote' && x.origin == 'local')[0] || { count: 0 }).count;
data.localReplies = (data.data.filter((x: any) => x.type == 'reply' && x.origin == 'local')[0] || { count: 0 }).count;
data.remoteNotes = (data.data.filter((x: any) => x.type == 'note' && x.origin == 'remote')[0] || { count: 0 }).count;
data.remoteRenotes = (data.data.filter((x: any) => x.type == 'renote' && x.origin == 'remote')[0] || { count: 0 }).count;
data.remoteReplies = (data.data.filter((x: any) => x.type == 'reply' && x.origin == 'remote')[0] || { count: 0 }).count;
delete data.data;
});
const graph = [];
for (let i = 0; i < limit; i++) {
const day = new Date(new Date().setDate(new Date().getDate() - i));
const data = datas.filter((d: any) =>
d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
)[0];
if (data) {
graph.push(data);
} else {
graph.push({
date: { year: day.getFullYear(), month: day.getMonth() + 1, day: day.getDate() },
localNotes: 0,
localRenotes: 0,
localReplies: 0,
remoteNotes: 0,
remoteRenotes: 0,
remoteReplies: 0
});
}
}
res(graph);
});

View file

@ -1,84 +0,0 @@
import $ from 'cafy';
import Note from '../../../../models/note';
/**
* Aggregate notes
*/
export default (params: any) => new Promise(async (res, rej) => {
// Get 'limit' parameter
const [limit = 365, limitErr] = $.num.optional.range(1, 365).get(params.limit);
if (limitErr) return rej('invalid limit param');
const datas = await Note
.aggregate([
{ $project: {
renoteId: '$renoteId',
replyId: '$replyId',
createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
}},
{ $project: {
date: {
year: { $year: '$createdAt' },
month: { $month: '$createdAt' },
day: { $dayOfMonth: '$createdAt' }
},
type: {
$cond: {
if: { $ne: ['$renoteId', null] },
then: 'renote',
else: {
$cond: {
if: { $ne: ['$replyId', null] },
then: 'reply',
else: 'note'
}
}
}
}}
},
{ $group: { _id: {
date: '$date',
type: '$type'
}, count: { $sum: 1 } } },
{ $group: {
_id: '$_id.date',
data: { $addToSet: {
type: '$_id.type',
count: '$count'
}}
} }
]);
datas.forEach((data: any) => {
data.date = data._id;
delete data._id;
data.notes = (data.data.filter((x: any) => x.type == 'note')[0] || { count: 0 }).count;
data.renotes = (data.data.filter((x: any) => x.type == 'renote')[0] || { count: 0 }).count;
data.replies = (data.data.filter((x: any) => x.type == 'reply')[0] || { count: 0 }).count;
delete data.data;
});
const graph = [];
for (let i = 0; i < limit; i++) {
const day = new Date(new Date().setDate(new Date().getDate() - i));
const data = datas.filter((d: any) =>
d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
)[0];
if (data) {
graph.push(data);
} else {
graph.push({
notes: 0,
renotes: 0,
replies: 0
});
}
}
res(graph);
});

View file

@ -9,47 +9,78 @@ export default (params: any) => new Promise(async (res, rej) => {
const [limit = 365, limitErr] = $.num.optional.range(1, 365).get(params.limit);
if (limitErr) return rej('invalid limit param');
const users = await User
.find({}, {
sort: {
_id: -1
},
fields: {
_id: false,
createdAt: true,
deletedAt: true
const query = [{
$project: {
host: '$host',
createdAt: { $add: ['$createdAt', 9 * 60 * 60 * 1000] } // Convert into JST
}
}, {
$project: {
date: {
year: { $year: '$createdAt' },
month: { $month: '$createdAt' },
day: { $dayOfMonth: '$createdAt' }
},
origin: {
$cond: {
if: { $eq: ['$host', null] },
then: 'local',
else: 'remote'
}
}
}
}, {
$group: {
_id: {
date: '$date',
origin: '$origin'
},
count: { $sum: 1 }
}
}, {
$group: {
_id: '$_id.date',
data: {
$addToSet: {
type: '$_id.type',
origin: '$_id.origin',
count: '$count'
}
}
}
}] as any;
const datas = await User.aggregate(query);
datas.forEach((data: any) => {
data.date = data._id;
delete data._id;
data.local = (data.data.filter((x: any) => x.origin == 'local')[0] || { count: 0 }).count;
data.remote = (data.data.filter((x: any) => x.origin == 'remote')[0] || { count: 0 }).count;
delete data.data;
});
const graph = [];
for (let i = 0; i < limit; i++) {
let dayStart = new Date(new Date().setDate(new Date().getDate() - i));
dayStart = new Date(dayStart.setMilliseconds(0));
dayStart = new Date(dayStart.setSeconds(0));
dayStart = new Date(dayStart.setMinutes(0));
dayStart = new Date(dayStart.setHours(0));
const day = new Date(new Date().setDate(new Date().getDate() - i));
let dayEnd = new Date(new Date().setDate(new Date().getDate() - i));
dayEnd = new Date(dayEnd.setMilliseconds(999));
dayEnd = new Date(dayEnd.setSeconds(59));
dayEnd = new Date(dayEnd.setMinutes(59));
dayEnd = new Date(dayEnd.setHours(23));
// day = day.getTime();
const total = users.filter(u =>
u.createdAt < dayEnd && (u.deletedAt == null || u.deletedAt > dayEnd)
).length;
const created = users.filter(u =>
u.createdAt < dayEnd && u.createdAt > dayStart
).length;
const data = datas.filter((d: any) =>
d.date.year == day.getFullYear() && d.date.month == day.getMonth() + 1 && d.date.day == day.getDate()
)[0];
if (data) {
graph.push(data);
} else {
graph.push({
total: total,
created: created
date: { year: day.getFullYear(), month: day.getMonth() + 1, day: day.getDate() },
local: 0,
remote: 0
});
}
}
res(graph);
});