wip
This commit is contained in:
syuilo
parent
335200c31e
commit
0481de6629
17 changed files with 149 additions and 703 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
const { default: Chart } = require('../../built/models/chart');
|
const { default: Stats } = require('../../built/models/stats');
|
||||||
const { default: User } = require('../../built/models/user');
|
const { default: User } = require('../../built/models/user');
|
||||||
const { default: Note } = require('../../built/models/note');
|
const { default: Note } = require('../../built/models/note');
|
||||||
const { default: DriveFile } = require('../../built/models/drive-file');
|
const { default: DriveFile } = require('../../built/models/drive-file');
|
||||||
|
|
@ -80,7 +80,7 @@ async function main() {
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
|
|
||||||
await Chart.insert({
|
await Stats.insert({
|
||||||
date: today,
|
date: today,
|
||||||
users: {
|
users: {
|
||||||
local: {
|
local: {
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@ import Vue from 'vue';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
props: {
|
props: {
|
||||||
data: {
|
chart: {
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
type: {
|
type: {
|
||||||
|
|
@ -39,7 +39,6 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: this.data,
|
|
||||||
viewBoxX: 365,
|
viewBoxX: 365,
|
||||||
viewBoxY: 70,
|
viewBoxY: 70,
|
||||||
pointsNote: null,
|
pointsNote: null,
|
||||||
|
|
@ -49,21 +48,17 @@ export default Vue.extend({
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.chart.forEach(d => {
|
const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.notes.local.diff : d.notes.remote.diff));
|
||||||
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) {
|
if (peak != 0) {
|
||||||
const data = this.chart.slice().reverse();
|
const data = this.chart.slice().reverse().map(x => ({
|
||||||
this.pointsNote = data.map((d, i) => `${i},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' ');
|
normal: this.type == 'local' ? x.notes.local.diffs.normal : x.notes.remote.diffs.normal,
|
||||||
|
replies: this.type == 'local' ? x.notes.local.diffs.replies : x.notes.remote.diffs.replies,
|
||||||
|
renotes: this.type == 'local' ? x.notes.local.diffs.renotes : x.notes.remote.diffs.renotes,
|
||||||
|
total: this.type == 'local' ? x.notes.local.diff : x.notes.remote.diff
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.pointsNote = data.map((d, i) => `${i},${(1 - (d.normal / peak)) * this.viewBoxY}`).join(' ');
|
||||||
this.pointsReply = data.map((d, i) => `${i},${(1 - (d.replies / 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.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(' ');
|
this.pointsTotal = data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ');
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,11 @@
|
||||||
<header>%i18n:@title%</header>
|
<header>%i18n:@title%</header>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<header>%i18n:@local%</header>
|
<header>%i18n:@local%</header>
|
||||||
<x-chart v-if="data" :data="data" type="local"/>
|
<x-chart v-if="chart" :chart="chart" type="local"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<header>%i18n:@remote%</header>
|
<header>%i18n:@remote%</header>
|
||||||
<x-chart v-if="data" :data="data" type="remote"/>
|
<x-chart v-if="chart" :chart="chart" type="remote"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -20,15 +20,10 @@ export default Vue.extend({
|
||||||
components: {
|
components: {
|
||||||
XChart
|
XChart
|
||||||
},
|
},
|
||||||
data() {
|
props: {
|
||||||
return {
|
chart: {
|
||||||
data: null
|
required: true
|
||||||
};
|
}
|
||||||
},
|
|
||||||
created() {
|
|
||||||
(this as any).api('aggregation/notes').then(res => {
|
|
||||||
this.data = res;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@ import Vue from 'vue';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
props: {
|
props: {
|
||||||
data: {
|
chart: {
|
||||||
required: true
|
required: true
|
||||||
},
|
},
|
||||||
type: {
|
type: {
|
||||||
|
|
@ -23,21 +23,19 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
chart: this.data,
|
|
||||||
viewBoxX: 365,
|
viewBoxX: 365,
|
||||||
viewBoxY: 70,
|
viewBoxY: 70,
|
||||||
points: null
|
points: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
this.chart.forEach(d => {
|
const peak = Math.max.apply(null, this.chart.map(d => this.type == 'local' ? d.users.local.diff : d.users.remote.diff));
|
||||||
d.count = this.type == 'local' ? d.local : d.remote;
|
|
||||||
});
|
|
||||||
|
|
||||||
const peak = Math.max.apply(null, this.chart.map(d => d.count));
|
|
||||||
|
|
||||||
if (peak != 0) {
|
if (peak != 0) {
|
||||||
const data = this.chart.slice().reverse();
|
const data = this.chart.slice().reverse().map(x => ({
|
||||||
|
count: this.type == 'local' ? x.users.local.diff : x.users.remote.diff
|
||||||
|
}));
|
||||||
|
|
||||||
this.points = data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ');
|
this.points = data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,11 +3,11 @@
|
||||||
<header>%i18n:@title%</header>
|
<header>%i18n:@title%</header>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<header>%i18n:@local%</header>
|
<header>%i18n:@local%</header>
|
||||||
<x-chart v-if="data" :data="data" type="local"/>
|
<x-chart v-if="chart" :chart="chart" type="local"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<header>%i18n:@remote%</header>
|
<header>%i18n:@remote%</header>
|
||||||
<x-chart v-if="data" :data="data" type="remote"/>
|
<x-chart v-if="chart" :chart="chart" type="remote"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -20,15 +20,10 @@ export default Vue.extend({
|
||||||
components: {
|
components: {
|
||||||
XChart
|
XChart
|
||||||
},
|
},
|
||||||
data() {
|
props: {
|
||||||
return {
|
chart: {
|
||||||
data: null
|
required: true
|
||||||
};
|
}
|
||||||
},
|
|
||||||
created() {
|
|
||||||
(this as any).api('aggregation/users').then(res => {
|
|
||||||
this.data = res;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,8 @@
|
||||||
<main>
|
<main>
|
||||||
<div v-show="page == 'dashboard'">
|
<div v-show="page == 'dashboard'">
|
||||||
<x-dashboard/>
|
<x-dashboard/>
|
||||||
<x-users-chart/>
|
<x-users-chart :chart="chart"/>
|
||||||
<x-notes-chart/>
|
<x-notes-chart :chart="chart"/>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="page == 'users'">
|
<div v-if="page == 'users'">
|
||||||
<x-suspend-user/>
|
<x-suspend-user/>
|
||||||
|
|
@ -48,9 +48,15 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
page: 'dashboard'
|
page: 'dashboard',
|
||||||
|
chart: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
(this as any).api('admin/chart').then(chart => {
|
||||||
|
this.chart = chart;
|
||||||
|
});
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
nav(page: string) {
|
nav(page: string) {
|
||||||
this.page = page;
|
this.page = page;
|
||||||
|
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
@import "../app"
|
|
||||||
@import "../reset"
|
|
||||||
|
|
||||||
html
|
|
||||||
color #456267
|
|
||||||
background #fff
|
|
||||||
|
|
||||||
body
|
|
||||||
margin 0
|
|
||||||
padding 0
|
|
||||||
|
|
@ -1,209 +0,0 @@
|
||||||
<mk-index>
|
|
||||||
<h1>Misskey<i>Statistics</i></h1>
|
|
||||||
<main v-if="!initializing">
|
|
||||||
<mk-users stats={ stats }/>
|
|
||||||
<mk-notes stats={ stats }/>
|
|
||||||
</main>
|
|
||||||
<footer><a href={ _URL_ }>{ _HOST_ }</a></footer>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
margin 0 auto
|
|
||||||
padding 0 16px
|
|
||||||
max-width 700px
|
|
||||||
|
|
||||||
> h1
|
|
||||||
margin 0
|
|
||||||
padding 24px 0 0 0
|
|
||||||
font-size 24px
|
|
||||||
font-weight normal
|
|
||||||
|
|
||||||
> i
|
|
||||||
font-style normal
|
|
||||||
color #f43b16
|
|
||||||
|
|
||||||
> main
|
|
||||||
> *
|
|
||||||
margin 24px 0
|
|
||||||
padding-top 24px
|
|
||||||
border-top solid 1px #eee
|
|
||||||
|
|
||||||
> h2
|
|
||||||
margin 0 0 12px 0
|
|
||||||
font-size 18px
|
|
||||||
font-weight normal
|
|
||||||
|
|
||||||
> footer
|
|
||||||
margin 24px 0
|
|
||||||
text-align center
|
|
||||||
|
|
||||||
> a
|
|
||||||
color #546567
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.initializing = true;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.$root.$data.os.api('stats').then(stats => {
|
|
||||||
this.update({
|
|
||||||
initializing: false,
|
|
||||||
stats
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-index>
|
|
||||||
|
|
||||||
<mk-notes>
|
|
||||||
<h2>%i18n:stats.notes-count% <b>{ stats.notesCount }</b></h2>
|
|
||||||
<mk-notes-chart v-if="!initializing" data={ data }/>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.initializing = true;
|
|
||||||
this.stats = this.opts.stats;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.$root.$data.os.api('aggregation/notes', {
|
|
||||||
limit: 365
|
|
||||||
}).then(data => {
|
|
||||||
this.update({
|
|
||||||
initializing: false,
|
|
||||||
data
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-notes>
|
|
||||||
|
|
||||||
<mk-users>
|
|
||||||
<h2>%i18n:stats.users-count% <b>{ stats.usersCount }</b></h2>
|
|
||||||
<mk-users-chart v-if="!initializing" data={ data }/>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.initializing = true;
|
|
||||||
this.stats = this.opts.stats;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.$root.$data.os.api('aggregation/users', {
|
|
||||||
limit: 365
|
|
||||||
}).then(data => {
|
|
||||||
this.update({
|
|
||||||
initializing: false,
|
|
||||||
data
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-users>
|
|
||||||
|
|
||||||
<mk-notes-chart>
|
|
||||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
|
|
||||||
<title>Black ... Total<br/>Blue ... Notes<br/>Red ... Replies<br/>Green ... Renotes</title>
|
|
||||||
<polyline
|
|
||||||
riot-points={ pointsNote }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#41ddde"/>
|
|
||||||
<polyline
|
|
||||||
riot-points={ pointsReply }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#f7796c"/>
|
|
||||||
<polyline
|
|
||||||
riot-points={ pointsRenote }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#a1de41"/>
|
|
||||||
<polyline
|
|
||||||
riot-points={ pointsTotal }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#555"
|
|
||||||
stroke-dasharray="2 2"/>
|
|
||||||
</svg>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
|
|
||||||
> svg
|
|
||||||
display block
|
|
||||||
padding 1px
|
|
||||||
width 100%
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.viewBoxX = 365;
|
|
||||||
this.viewBoxY = 80;
|
|
||||||
|
|
||||||
this.data = this.opts.data.reverse();
|
|
||||||
this.data.forEach(d => d.total = d.notes + d.replies + d.renotes);
|
|
||||||
const peak = Math.max.apply(null, this.data.map(d => d.total));
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.render();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.render = () => {
|
|
||||||
this.update({
|
|
||||||
pointsNote: this.data.map((d, i) => `${i},${(1 - (d.notes / peak)) * this.viewBoxY}`).join(' '),
|
|
||||||
pointsReply: this.data.map((d, i) => `${i},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '),
|
|
||||||
pointsRenote: this.data.map((d, i) => `${i},${(1 - (d.renotes / peak)) * this.viewBoxY}`).join(' '),
|
|
||||||
pointsTotal: this.data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ')
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-notes-chart>
|
|
||||||
|
|
||||||
<mk-users-chart>
|
|
||||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
|
|
||||||
<polyline
|
|
||||||
riot-points={ createdPoints }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#1cde84"/>
|
|
||||||
<polyline
|
|
||||||
riot-points={ totalPoints }
|
|
||||||
fill="none"
|
|
||||||
stroke-width="1"
|
|
||||||
stroke="#555"/>
|
|
||||||
</svg>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
|
|
||||||
> svg
|
|
||||||
display block
|
|
||||||
padding 1px
|
|
||||||
width 100%
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.viewBoxX = 365;
|
|
||||||
this.viewBoxY = 80;
|
|
||||||
|
|
||||||
this.data = this.opts.data.reverse();
|
|
||||||
const totalPeak = Math.max.apply(null, this.data.map(d => d.total));
|
|
||||||
const createdPeak = Math.max.apply(null, this.data.map(d => d.created));
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.render();
|
|
||||||
});
|
|
||||||
|
|
||||||
this.render = () => {
|
|
||||||
this.update({
|
|
||||||
totalPoints: this.data.map((d, i) => `${i},${(1 - (d.total / totalPeak)) * this.viewBoxY}`).join(' '),
|
|
||||||
createdPoints: this.data.map((d, i) => `${i},${(1 - (d.created / createdPeak)) * this.viewBoxY}`).join(' ')
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-users-chart>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
require('./index.tag');
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
@import "../app"
|
|
||||||
@import "../reset"
|
|
||||||
|
|
||||||
html
|
|
||||||
color #456267
|
|
||||||
background #fff
|
|
||||||
|
|
||||||
body
|
|
||||||
margin 0
|
|
||||||
padding 0
|
|
||||||
|
|
@ -1,201 +0,0 @@
|
||||||
<mk-index>
|
|
||||||
<h1>Misskey<i>Status</i></h1>
|
|
||||||
<p>%fa:info-circle%%i18n:status.all-systems-maybe-operational%</p>
|
|
||||||
<main>
|
|
||||||
<mk-cpu-usage connection={ connection }/>
|
|
||||||
<mk-mem-usage connection={ connection }/>
|
|
||||||
</main>
|
|
||||||
<footer><a href={ _URL_ }>{ _HOST_ }</a></footer>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
margin 0 auto
|
|
||||||
padding 0 16px
|
|
||||||
max-width 700px
|
|
||||||
|
|
||||||
> h1
|
|
||||||
margin 0
|
|
||||||
padding 24px 0 16px 0
|
|
||||||
font-size 24px
|
|
||||||
font-weight normal
|
|
||||||
|
|
||||||
> [data-fa]
|
|
||||||
font-style normal
|
|
||||||
color #f43b16
|
|
||||||
|
|
||||||
> p
|
|
||||||
display block
|
|
||||||
margin 0
|
|
||||||
padding 12px 16px
|
|
||||||
background #eaf4ef
|
|
||||||
//border solid 1px #99ccb2
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
> [data-fa]
|
|
||||||
margin-right 5px
|
|
||||||
|
|
||||||
> main
|
|
||||||
> *
|
|
||||||
margin 24px 0
|
|
||||||
|
|
||||||
> h2
|
|
||||||
margin 0 0 12px 0
|
|
||||||
font-size 18px
|
|
||||||
font-weight normal
|
|
||||||
|
|
||||||
> footer
|
|
||||||
margin 24px 0
|
|
||||||
text-align center
|
|
||||||
|
|
||||||
> a
|
|
||||||
color #546567
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import Connection from '../../common/scripts/streaming/server-stream';
|
|
||||||
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.initializing = true;
|
|
||||||
this.connection = new Connection();
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.$root.$data.os.api('meta').then(meta => {
|
|
||||||
this.update({
|
|
||||||
initializing: false,
|
|
||||||
meta
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
this.on('unmount', () => {
|
|
||||||
this.connection.close();
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</mk-index>
|
|
||||||
|
|
||||||
<mk-cpu-usage>
|
|
||||||
<h2>CPU <b>{ percentage }%</b></h2>
|
|
||||||
<mk-line-chart ref="chart"/>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.connection = this.opts.connection;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.connection.on('stats', this.onStats);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.on('unmount', () => {
|
|
||||||
this.connection.off('stats', this.onStats);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.onStats = stats => {
|
|
||||||
this.$refs.chart.addData(1 - stats.cpu_usage);
|
|
||||||
|
|
||||||
const percentage = (stats.cpu_usage * 100).toFixed(0);
|
|
||||||
|
|
||||||
this.update({
|
|
||||||
percentage
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-cpu-usage>
|
|
||||||
|
|
||||||
<mk-mem-usage>
|
|
||||||
<h2>MEM <b>{ percentage }%</b></h2>
|
|
||||||
<mk-line-chart ref="chart"/>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.connection = this.opts.connection;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.connection.on('stats', this.onStats);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.on('unmount', () => {
|
|
||||||
this.connection.off('stats', this.onStats);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.onStats = stats => {
|
|
||||||
stats.mem.used = stats.mem.total - stats.mem.free;
|
|
||||||
this.$refs.chart.addData(1 - (stats.mem.used / stats.mem.total));
|
|
||||||
|
|
||||||
const percentage = (stats.mem.used / stats.mem.total * 100).toFixed(0);
|
|
||||||
|
|
||||||
this.update({
|
|
||||||
percentage
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-mem-usage>
|
|
||||||
|
|
||||||
<mk-line-chart>
|
|
||||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id={ gradientId } x1="0" x2="0" y1="1" y2="0">
|
|
||||||
<stop offset="0%" stop-color="rgba(244, 59, 22, 0)"></stop>
|
|
||||||
<stop offset="100%" stop-color="#f43b16"></stop>
|
|
||||||
</linearGradient>
|
|
||||||
<mask id={ maskId } x="0" y="0" riot-width={ viewBoxX } riot-height={ viewBoxY }>
|
|
||||||
<polygon
|
|
||||||
riot-points={ polygonPoints }
|
|
||||||
fill="#fff"
|
|
||||||
fill-opacity="0.5"/>
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
<line x1="0" y1="0" riot-x2={ viewBoxX } y2="0" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
|
|
||||||
<line x1="0" y1="25%" riot-x2={ viewBoxX } y2="25%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
|
|
||||||
<line x1="0" y1="50%" riot-x2={ viewBoxX } y2="50%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
|
|
||||||
<line x1="0" y1="75%" riot-x2={ viewBoxX } y2="75%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
|
|
||||||
<line x1="0" y1="100%" riot-x2={ viewBoxX } y2="100%" stroke="rgba(255, 255, 255, 0.1)" stroke-width="0.25" stroke-dasharray="1"/>
|
|
||||||
<rect
|
|
||||||
x="-1" y="-1"
|
|
||||||
riot-width={ viewBoxX + 2 } riot-height={ viewBoxY + 2 }
|
|
||||||
style="stroke: none; fill: url(#{ gradientId }); mask: url(#{ maskId })"/>
|
|
||||||
<polyline
|
|
||||||
riot-points={ polylinePoints }
|
|
||||||
fill="none"
|
|
||||||
stroke="#f43b16"
|
|
||||||
stroke-width="0.5"/>
|
|
||||||
</svg>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
padding 16px
|
|
||||||
border-radius 8px
|
|
||||||
background #1c2531
|
|
||||||
|
|
||||||
> svg
|
|
||||||
display block
|
|
||||||
padding 1px
|
|
||||||
width 100%
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import uuid from 'uuid';
|
|
||||||
|
|
||||||
this.viewBoxX = 100;
|
|
||||||
this.viewBoxY = 30;
|
|
||||||
this.data = [];
|
|
||||||
this.gradientId = uuid();
|
|
||||||
this.maskId = uuid();
|
|
||||||
|
|
||||||
this.addData = data => {
|
|
||||||
this.data.push(data);
|
|
||||||
if (this.data.length > 100) this.data.shift();
|
|
||||||
|
|
||||||
const polylinePoints = this.data.map((d, i) => `${this.viewBoxX - ((this.data.length - 1) - i)},${d * this.viewBoxY}`).join(' ');
|
|
||||||
const polygonPoints = `${this.viewBoxX - (this.data.length - 1)},${ this.viewBoxY } ${ polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
|
|
||||||
|
|
||||||
this.update({
|
|
||||||
polylinePoints,
|
|
||||||
polygonPoints
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-line-chart>
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
require('./index.tag');
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import * as mongo from 'mongodb';
|
import * as mongo from 'mongodb';
|
||||||
import db from '../db/mongodb';
|
import db from '../db/mongodb';
|
||||||
|
|
||||||
const Chart = db.get<IChart>('chart');
|
const Stats = db.get<IStats>('stats');
|
||||||
Chart.createIndex('date', { unique: true });
|
Stats.createIndex({ date: -1 }, { unique: true });
|
||||||
export default Chart;
|
export default Stats;
|
||||||
|
|
||||||
export interface IChart {
|
export interface IStats {
|
||||||
_id: mongo.ObjectID;
|
_id: mongo.ObjectID;
|
||||||
|
|
||||||
date: Date;
|
date: Date;
|
||||||
97
src/server/api/endpoints/admin/chart.ts
Normal file
97
src/server/api/endpoints/admin/chart.ts
Normal file
|
|
@ -0,0 +1,97 @@
|
||||||
|
import Stats, { IStats } from '../../../../models/stats';
|
||||||
|
|
||||||
|
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
||||||
|
|
||||||
|
export const meta = {
|
||||||
|
requireCredential: true,
|
||||||
|
requireAdmin: true
|
||||||
|
};
|
||||||
|
|
||||||
|
export default (params: any) => new Promise(async (res, rej) => {
|
||||||
|
const now = new Date();
|
||||||
|
const y = now.getFullYear();
|
||||||
|
const m = now.getMonth();
|
||||||
|
const d = now.getDate();
|
||||||
|
|
||||||
|
const stats = await Stats.find({
|
||||||
|
date: {
|
||||||
|
$gt: new Date(y - 1, m, d)
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
sort: {
|
||||||
|
date: -1
|
||||||
|
},
|
||||||
|
fields: {
|
||||||
|
_id: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const chart: Array<Omit<IStats, '_id'>> = [];
|
||||||
|
|
||||||
|
for (let i = 364; i >= 0; i--) {
|
||||||
|
const day = new Date(y, m, d - i);
|
||||||
|
|
||||||
|
const stat = stats.find(s => s.date.getTime() == day.getTime());
|
||||||
|
|
||||||
|
if (stat) {
|
||||||
|
chart.push(stat);
|
||||||
|
} else { // 隙間埋め
|
||||||
|
const mostRecent = stats.find(s => s.date.getTime() < day.getTime());
|
||||||
|
if (mostRecent) {
|
||||||
|
chart.push(Object.assign({}, mostRecent, {
|
||||||
|
date: day
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
chart.push({
|
||||||
|
date: day,
|
||||||
|
users: {
|
||||||
|
local: {
|
||||||
|
total: 0,
|
||||||
|
diff: 0
|
||||||
|
},
|
||||||
|
remote: {
|
||||||
|
total: 0,
|
||||||
|
diff: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
notes: {
|
||||||
|
local: {
|
||||||
|
total: 0,
|
||||||
|
diff: 0,
|
||||||
|
diffs: {
|
||||||
|
normal: 0,
|
||||||
|
reply: 0,
|
||||||
|
renote: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
remote: {
|
||||||
|
total: 0,
|
||||||
|
diff: 0,
|
||||||
|
diffs: {
|
||||||
|
normal: 0,
|
||||||
|
reply: 0,
|
||||||
|
renote: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
drive: {
|
||||||
|
local: {
|
||||||
|
totalCount: 0,
|
||||||
|
totalSize: 0,
|
||||||
|
diffCount: 0,
|
||||||
|
diffSize: 0
|
||||||
|
},
|
||||||
|
remote: {
|
||||||
|
totalCount: 0,
|
||||||
|
totalSize: 0,
|
||||||
|
diffCount: 0,
|
||||||
|
diffSize: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
res(chart);
|
||||||
|
});
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
import Note from '../../../../models/note';
|
|
||||||
|
|
||||||
export const meta = {
|
|
||||||
requireCredential: true,
|
|
||||||
requireAdmin: true
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Aggregate notes
|
|
||||||
*/
|
|
||||||
export default (params: any) => new Promise(async (res, rej) => {
|
|
||||||
const query = [{
|
|
||||||
$match: {
|
|
||||||
createdAt: {
|
|
||||||
$gt: new Date(new Date().setFullYear(new Date().getFullYear() - 1))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
$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 < 365; 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);
|
|
||||||
});
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
import User from '../../../../models/user';
|
|
||||||
|
|
||||||
export const meta = {
|
|
||||||
requireCredential: true,
|
|
||||||
requireAdmin: true
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Aggregate users
|
|
||||||
*/
|
|
||||||
export default (params: any) => new Promise(async (res, rej) => {
|
|
||||||
const query = [{
|
|
||||||
$match: {
|
|
||||||
createdAt: {
|
|
||||||
$gt: new Date(new Date().setFullYear(new Date().getFullYear() - 1))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
$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 < 365; 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() },
|
|
||||||
local: 0,
|
|
||||||
remote: 0
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
res(graph);
|
|
||||||
});
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import { INote } from '../models/note';
|
import { INote } from '../models/note';
|
||||||
import Chart, { IChart } from '../models/chart';
|
import Stats, { IStats } from '../models/stats';
|
||||||
import { isLocalUser, IUser } from '../models/user';
|
import { isLocalUser, IUser } from '../models/user';
|
||||||
import { IDriveFile } from '../models/drive-file';
|
import { IDriveFile } from '../models/drive-file';
|
||||||
|
|
||||||
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
||||||
|
|
||||||
async function getTodayStats(): Promise<IChart> {
|
async function getTodayStats(): Promise<IStats> {
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const y = now.getFullYear();
|
const y = now.getFullYear();
|
||||||
const m = now.getMonth();
|
const m = now.getMonth();
|
||||||
|
|
@ -13,7 +13,7 @@ async function getTodayStats(): Promise<IChart> {
|
||||||
const today = new Date(y, m, d);
|
const today = new Date(y, m, d);
|
||||||
|
|
||||||
// 今日の統計
|
// 今日の統計
|
||||||
const todayStats = await Chart.findOne({
|
const todayStats = await Stats.findOne({
|
||||||
date: today
|
date: today
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -23,7 +23,7 @@ async function getTodayStats(): Promise<IChart> {
|
||||||
// * 昨日何もチャートを更新するような出来事がなかった場合は、
|
// * 昨日何もチャートを更新するような出来事がなかった場合は、
|
||||||
// 統計がそもそも作られずドキュメントが存在しないということがあり得るため、
|
// 統計がそもそも作られずドキュメントが存在しないということがあり得るため、
|
||||||
// 「昨日の」と決め打ちせずに「もっとも最近の」とします
|
// 「昨日の」と決め打ちせずに「もっとも最近の」とします
|
||||||
const mostRecentStats = await Chart.findOne({}, {
|
const mostRecentStats = await Stats.findOne({}, {
|
||||||
sort: {
|
sort: {
|
||||||
date: -1
|
date: -1
|
||||||
}
|
}
|
||||||
|
|
@ -33,7 +33,7 @@ async function getTodayStats(): Promise<IChart> {
|
||||||
// * Misskeyインスタンスを建てて初めてのチャート更新時など
|
// * Misskeyインスタンスを建てて初めてのチャート更新時など
|
||||||
if (mostRecentStats == null) {
|
if (mostRecentStats == null) {
|
||||||
// 空の統計を作成
|
// 空の統計を作成
|
||||||
const chart: Omit<IChart, '_id'> = {
|
const chart: Omit<IStats, '_id'> = {
|
||||||
date: today,
|
date: today,
|
||||||
users: {
|
users: {
|
||||||
local: {
|
local: {
|
||||||
|
|
@ -81,12 +81,12 @@ async function getTodayStats(): Promise<IChart> {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const stats = await Chart.insert(chart);
|
const stats = await Stats.insert(chart);
|
||||||
|
|
||||||
return stats;
|
return stats;
|
||||||
} else {
|
} else {
|
||||||
// 今日の統計を初期挿入
|
// 今日の統計を初期挿入
|
||||||
const chart: Omit<IChart, '_id'> = {
|
const chart: Omit<IStats, '_id'> = {
|
||||||
date: today,
|
date: today,
|
||||||
users: {
|
users: {
|
||||||
local: {
|
local: {
|
||||||
|
|
@ -134,7 +134,7 @@ async function getTodayStats(): Promise<IChart> {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const stats = await Chart.insert(chart);
|
const stats = await Stats.insert(chart);
|
||||||
|
|
||||||
return stats;
|
return stats;
|
||||||
}
|
}
|
||||||
|
|
@ -146,7 +146,7 @@ async function getTodayStats(): Promise<IChart> {
|
||||||
async function update(inc: any) {
|
async function update(inc: any) {
|
||||||
const stats = await getTodayStats();
|
const stats = await getTodayStats();
|
||||||
|
|
||||||
await Chart.findOneAndUpdate({
|
await Stats.findOneAndUpdate({
|
||||||
_id: stats._id
|
_id: stats._id
|
||||||
}, {
|
}, {
|
||||||
$inc: inc
|
$inc: inc
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue