diff --git a/CHANGELOG.md b/CHANGELOG.md index 2cda49be49..f6e78485c5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ChangeLog (Release Notes) ========================= 主に notable な changes を書いていきます +unreleased +---------- +* New: モバイル版のアクティビティチャートを変更 + 2503 (2017/08/30) ----------------- * デザインの調整 diff --git a/src/web/app/common/tags/index.js b/src/web/app/common/tags/index.js index 1ee8dab42d..dd6ba75d7a 100644 --- a/src/web/app/common/tags/index.js +++ b/src/web/app/common/tags/index.js @@ -27,3 +27,4 @@ require('./activity-table.tag'); require('./reaction-picker.tag'); require('./reactions-viewer.tag'); require('./reaction-icon.tag'); +require('./weekly-activity-chart.tag'); diff --git a/src/web/app/common/tags/weekly-activity-chart.tag b/src/web/app/common/tags/weekly-activity-chart.tag new file mode 100644 index 0000000000..ae9f7071c5 --- /dev/null +++ b/src/web/app/common/tags/weekly-activity-chart.tag @@ -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> diff --git a/src/web/app/mobile/tags/user.tag b/src/web/app/mobile/tags/user.tag index bd6bbad726..3ed186de9e 100644 --- a/src/web/app/mobile/tags/user.tag +++ b/src/web/app/mobile/tags/user.tag @@ -230,7 +230,7 @@ <section class="activity"> <h2><i class="fa fa-bar-chart"></i>%i18n:mobile.tags.mk-user-overview.activity%</h2> <div> - <mk-activity-table user={ user }/> + <mk-weekly-activity-chart user={ user }/> </div> </section> <style>