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 2cda49be4..f6e78485c 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 1ee8dab42..dd6ba75d7 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 000000000..ae9f7071c
--- /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 bd6bbad72..3ed186de9 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>