Show some charts in control panel
This commit is contained in:
syuilo
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user