From 4c0fbaedfa4cd1cac6c4980b078330566eafaed5 Mon Sep 17 00:00:00 2001 From: syuilo <syuilotan@yahoo.co.jp> Date: Wed, 30 Aug 2017 11:38:35 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=A2=E3=83=90=E3=82=A4=E3=83=AB=E7=89=88?= =?UTF-8?q?=E3=81=AE=E3=82=A2=E3=82=AF=E3=83=86=E3=82=A3=E3=83=93=E3=83=86?= =?UTF-8?q?=E3=82=A3=E3=83=81=E3=83=A3=E3=83=BC=E3=83=88=E3=82=92=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 ++ src/web/app/common/tags/index.js | 1 + .../app/common/tags/weekly-activity-chart.tag | 49 +++++++++++++++++++ src/web/app/mobile/tags/user.tag | 2 +- 4 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 src/web/app/common/tags/weekly-activity-chart.tag 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>