stats
This commit is contained in:
syuilo
@ -8,6 +8,7 @@ const url = `${scheme}//${host}`;
|
||||
const apiUrl = `${scheme}//api.${host}`;
|
||||
const devUrl = `${scheme}//dev.${host}`;
|
||||
const aboutUrl = `${scheme}//about.${host}`;
|
||||
const statsUrl = `${scheme}//stats.${host}`;
|
||||
const statusUrl = `${scheme}//status.${host}`;
|
||||
|
||||
export default {
|
||||
@ -17,5 +18,6 @@ export default {
|
||||
apiUrl,
|
||||
devUrl,
|
||||
aboutUrl,
|
||||
statsUrl,
|
||||
statusUrl
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<mk-nav-home-widget><a href={ CONFIG.aboutUrl }>Misskeyについて</a><i>・</i><a href={ CONFIG.statusUrl }>ステータス</a><i>・</i><a href="http://zawazawa.jp/misskey/">Wiki</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href={ CONFIG.devUrl }>開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
|
||||
<mk-nav-home-widget><a href={ CONFIG.aboutUrl }>Misskeyについて</a><i>・</i><a href={ CONFIG.statsUrl }>統計</a><i>・</i><a href={ CONFIG.statusUrl }>ステータス</a><i>・</i><a href="http://zawazawa.jp/misskey/">Wiki</a><i>・</i><a href="https://github.com/syuilo/misskey">リポジトリ</a><i>・</i><a href={ CONFIG.devUrl }>開発者</a><i>・</i><a href="https://twitter.com/misskey_xyz" target="_blank">Follow us on <i class="fa fa-twitter"></i></a>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
||||
23
src/web/app/stats/script.js
Normal file
23
src/web/app/stats/script.js
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* Stats
|
||||
*/
|
||||
|
||||
// Style
|
||||
import './style.styl';
|
||||
|
||||
import * as riot from 'riot';
|
||||
require('./tags');
|
||||
import init from '../init';
|
||||
|
||||
document.title = 'Misskey Statistics';
|
||||
|
||||
/**
|
||||
* init
|
||||
*/
|
||||
init(me => {
|
||||
mount(document.createElement('mk-index'));
|
||||
});
|
||||
|
||||
function mount(content) {
|
||||
riot.mount(document.getElementById('app').appendChild(content));
|
||||
}
|
||||
9
src/web/app/stats/style.styl
Normal file
9
src/web/app/stats/style.styl
Normal file
@ -0,0 +1,9 @@
|
||||
@import "../base"
|
||||
|
||||
html
|
||||
color #456267
|
||||
background #fff
|
||||
|
||||
body
|
||||
margin 0
|
||||
padding 0
|
||||
1
src/web/app/stats/tags/index.js
Normal file
1
src/web/app/stats/tags/index.js
Normal file
@ -0,0 +1 @@
|
||||
require('./index.tag');
|
||||
202
src/web/app/stats/tags/index.tag
Normal file
202
src/web/app/stats/tags/index.tag
Normal file
@ -0,0 +1,202 @@
|
||||
<mk-index>
|
||||
<h1>Misskey<i>Statistics</i></h1>
|
||||
<main if={ !initializing }>
|
||||
<mk-users stats={ stats }/>
|
||||
<mk-posts stats={ stats }/>
|
||||
</main>
|
||||
<footer><a href={ CONFIG.url }>{ CONFIG.host }</a></footer>
|
||||
<style>
|
||||
: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>
|
||||
this.mixin('api');
|
||||
|
||||
this.initializing = true;
|
||||
|
||||
this.on('mount', () => {
|
||||
this.api('stats').then(stats => {
|
||||
this.update({
|
||||
initializing: false,
|
||||
stats
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</mk-index>
|
||||
|
||||
<mk-posts>
|
||||
<h2>%i18n:stats.posts-count% <b>{ stats.posts_count }</b></h2>
|
||||
<mk-posts-chart if={ !initializing } data={ data }/>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
</style>
|
||||
<script>
|
||||
this.mixin('api');
|
||||
|
||||
this.initializing = true;
|
||||
this.stats = this.opts.stats;
|
||||
|
||||
this.on('mount', () => {
|
||||
this.api('aggregation/posts', {
|
||||
limit: 365
|
||||
}).then(data => {
|
||||
this.update({
|
||||
initializing: false,
|
||||
data
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</mk-posts>
|
||||
|
||||
<mk-users>
|
||||
<h2>%i18n:stats.users-count% <b>{ stats.users_count }</b></h2>
|
||||
<mk-users-chart if={ !initializing } data={ data }/>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
</style>
|
||||
<script>
|
||||
this.mixin('api');
|
||||
|
||||
this.initializing = true;
|
||||
this.stats = this.opts.stats;
|
||||
|
||||
this.on('mount', () => {
|
||||
this.api('aggregation/users', {
|
||||
limit: 365
|
||||
}).then(data => {
|
||||
this.update({
|
||||
initializing: false,
|
||||
data
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</mk-users>
|
||||
|
||||
<mk-posts-chart>
|
||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
|
||||
<title>Black ... Total<br/>Blue ... Posts<br/>Red ... Replies<br/>Green ... Reposts</title>
|
||||
<polyline
|
||||
riot-points={ pointsPost }
|
||||
fill="none"
|
||||
stroke-width="1"
|
||||
stroke="#41ddde"/>
|
||||
<polyline
|
||||
riot-points={ pointsReply }
|
||||
fill="none"
|
||||
stroke-width="1"
|
||||
stroke="#f7796c"/>
|
||||
<polyline
|
||||
riot-points={ pointsRepost }
|
||||
fill="none"
|
||||
stroke-width="1"
|
||||
stroke="#a1de41"/>
|
||||
<polyline
|
||||
riot-points={ pointsTotal }
|
||||
fill="none"
|
||||
stroke-width="1"
|
||||
stroke="#555"
|
||||
stroke-dasharray="2 2"/>
|
||||
</svg>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
||||
> svg
|
||||
display block
|
||||
padding 1px
|
||||
width 100%
|
||||
</style>
|
||||
<script>
|
||||
this.viewBoxX = 365;
|
||||
this.viewBoxY = 60;
|
||||
|
||||
this.data = this.opts.data.reverse();
|
||||
this.data.forEach(d => d.total = d.posts + d.replies + d.reposts);
|
||||
const peak = Math.max.apply(null, this.data.map(d => d.total));
|
||||
|
||||
this.on('mount', () => {
|
||||
this.render();
|
||||
});
|
||||
|
||||
this.render = () => {
|
||||
this.update({
|
||||
pointsPost: this.data.map((d, i) => `${i},${(1 - (d.posts / peak)) * this.viewBoxY}`).join(' '),
|
||||
pointsReply: this.data.map((d, i) => `${i},${(1 - (d.replies / peak)) * this.viewBoxY}`).join(' '),
|
||||
pointsRepost: this.data.map((d, i) => `${i},${(1 - (d.reposts / peak)) * this.viewBoxY}`).join(' '),
|
||||
pointsTotal: this.data.map((d, i) => `${i},${(1 - (d.total / peak)) * this.viewBoxY}`).join(' ')
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-posts-chart>
|
||||
|
||||
<mk-users-chart>
|
||||
<svg riot-viewBox="0 0 { viewBoxX } { viewBoxY }" preserveAspectRatio="none">
|
||||
<polyline
|
||||
riot-points={ points }
|
||||
fill="none"
|
||||
stroke-width="1"
|
||||
stroke="#555"/>
|
||||
</svg>
|
||||
<style>
|
||||
:scope
|
||||
display block
|
||||
|
||||
> svg
|
||||
display block
|
||||
padding 1px
|
||||
width 100%
|
||||
</style>
|
||||
<script>
|
||||
this.viewBoxX = 365;
|
||||
this.viewBoxY = 60;
|
||||
|
||||
this.data = this.opts.data.reverse();
|
||||
const peak = Math.max.apply(null, this.data.map(d => d.count));
|
||||
|
||||
this.on('mount', () => {
|
||||
this.render();
|
||||
});
|
||||
|
||||
this.render = () => {
|
||||
this.update({
|
||||
points: this.data.map((d, i) => `${i},${(1 - (d.count / peak)) * this.viewBoxY}`).join(' ')
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</mk-users-chart>
|
||||
@ -56,7 +56,6 @@
|
||||
this.mixin('api');
|
||||
|
||||
this.initializing = true;
|
||||
this.view = 0;
|
||||
this.connection = new Connection();
|
||||
|
||||
this.on('mount', () => {
|
||||
|
||||
Reference in New Issue
Block a user