forked from mirror/misskey
モバイル版のアクティビティチャートを変更
This commit is contained in:
parent
c1510f90ad
commit
4c0fbaedfa
@ -2,6 +2,10 @@ ChangeLog (Release Notes)
|
|||||||
=========================
|
=========================
|
||||||
主に notable な changes を書いていきます
|
主に notable な changes を書いていきます
|
||||||
|
|
||||||
|
unreleased
|
||||||
|
----------
|
||||||
|
* New: モバイル版のアクティビティチャートを変更
|
||||||
|
|
||||||
2503 (2017/08/30)
|
2503 (2017/08/30)
|
||||||
-----------------
|
-----------------
|
||||||
* デザインの調整
|
* デザインの調整
|
||||||
|
@ -27,3 +27,4 @@ require('./activity-table.tag');
|
|||||||
require('./reaction-picker.tag');
|
require('./reaction-picker.tag');
|
||||||
require('./reactions-viewer.tag');
|
require('./reactions-viewer.tag');
|
||||||
require('./reaction-icon.tag');
|
require('./reaction-icon.tag');
|
||||||
|
require('./weekly-activity-chart.tag');
|
||||||
|
49
src/web/app/common/tags/weekly-activity-chart.tag
Normal file
49
src/web/app/common/tags/weekly-activity-chart.tag
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<mk-weekly-activity-chart>
|
||||||
|
<svg if={ data } ref="canvas" viewBox="0 0 7 1" preserveAspectRatio="none">
|
||||||
|
<g each={ d, i in data.reverse() }>
|
||||||
|
<rect width="0.8" riot-height={ d.postsH }
|
||||||
|
riot-x={ i + 0.1 } y={ 1 - d.postsH - d.repliesH - d.repostsH }
|
||||||
|
fill="#41ddde"/>
|
||||||
|
<rect width="0.8" riot-height={ d.repliesH }
|
||||||
|
riot-x={ i + 0.1 } y={ 1 - d.repliesH - d.repostsH }
|
||||||
|
fill="#f7796c"/>
|
||||||
|
<rect width="0.8" riot-height={ d.repostsH }
|
||||||
|
riot-x={ i + 0.1 } y={ 1 - d.repostsH }
|
||||||
|
fill="#a1de41"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
max-width 600px
|
||||||
|
margin 0 auto
|
||||||
|
|
||||||
|
> svg
|
||||||
|
display block
|
||||||
|
|
||||||
|
> rect
|
||||||
|
transform-origin center
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
this.mixin('api');
|
||||||
|
|
||||||
|
this.user = this.opts.user;
|
||||||
|
|
||||||
|
this.on('mount', () => {
|
||||||
|
this.api('aggregation/users/activity', {
|
||||||
|
user_id: this.user.id,
|
||||||
|
limit: 7
|
||||||
|
}).then(data => {
|
||||||
|
data.forEach(d => d.total = d.posts + d.replies + d.reposts);
|
||||||
|
this.peak = Math.max.apply(null, data.map(d => d.total));
|
||||||
|
data.forEach(d => {
|
||||||
|
d.postsH = d.posts / this.peak;
|
||||||
|
d.repliesH = d.replies / this.peak;
|
||||||
|
d.repostsH = d.reposts / this.peak;
|
||||||
|
});
|
||||||
|
this.update({ data });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</mk-weekly-activity-chart>
|
@ -230,7 +230,7 @@
|
|||||||
<section class="activity">
|
<section class="activity">
|
||||||
<h2><i class="fa fa-bar-chart"></i>%i18n:mobile.tags.mk-user-overview.activity%</h2>
|
<h2><i class="fa fa-bar-chart"></i>%i18n:mobile.tags.mk-user-overview.activity%</h2>
|
||||||
<div>
|
<div>
|
||||||
<mk-activity-table user={ user }/>
|
<mk-weekly-activity-chart user={ user }/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<style>
|
<style>
|
||||||
|
Loading…
Reference in New Issue
Block a user