モバイル版のアクティビティチャートを変更

This commit is contained in:
syuilo 2017-08-30 11:38:35 +09:00
parent c1510f90ad
commit 4c0fbaedfa
4 changed files with 55 additions and 1 deletions

View file

@ -2,6 +2,10 @@ ChangeLog (Release Notes)
========================= =========================
主に notable な changes を書いていきます 主に notable な changes を書いていきます
unreleased
----------
* New: モバイル版のアクティビティチャートを変更
2503 (2017/08/30) 2503 (2017/08/30)
----------------- -----------------
* デザインの調整 * デザインの調整

View file

@ -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');

View 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>

View file

@ -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>