MAKE CHARTS GREAT AGAIN

src/web/app/common/scripts/get-median.ts

@@ -0,0 +1,11 @@
+/**
+ * 中央値を求めます
+ * @param samples サンプル
+ */
+export default function(samples) {
+	if (!samples.length) return 0;
+	const numbers = samples.slice(0).sort((a, b) => a - b);
+	const middle = Math.floor(numbers.length / 2);
+	const isEven = numbers.length % 2 === 0;
+	return isEven ? (numbers[middle] + numbers[middle - 1]) / 2 : numbers[middle];
+}

src/web/app/desktop/tags/user.tag

@@ -51,9 +51,9 @@
 			<p class="location" if={ user.profile.location }><i class="fa fa-map-marker"></i>{ user.profile.location }</p>
 		</div>
 		<footer>
-			<a href={ '/' + user.username } data-active>概要</a>
+			<a href={ '/' + user.username } data-active={ parent.page == 'home' }><i class="fa fa-home"></i>概要</a>
-			<a href={ '/' + user.username + '/media' }>メディア</a>
+			<a href={ '/' + user.username + '/media' } data-active={ parent.page == 'media' }><i class="fa fa-picture-o"></i>メディア</a>
-			<a href={ '/' + user.username + '/graphs' }>グラフ</a>
+			<a href={ '/' + user.username + '/graphs' } data-active={ parent.page == 'graphs' }><i class="fa fa-bar-chart"></i>グラフ</a>
 		</footer>
 	</div>
 	<style>
@@ -160,6 +160,9 @@
 						&[data-active]
 							border-bottom solid 4px $theme-color
 
+						> i
+							margin-right 6px
+
 					> button
 						display block
 						position absolute
@@ -708,16 +711,22 @@
 
 <mk-user-graphs>
 	<section>
-		<h1>投稿</h1>
+		<div>
-		<mk-user-posts-graph user={ opts.user }/>
+			<h1><i class="fa fa-pencil"></i>投稿</h1>
+			<mk-user-graphs-activity-chart user={ opts.user }/>
+		</div>
 	</section>
 	<section>
-		<h1>フォロー/フォロワー</h1>
+		<div>
-		<mk-user-friends-graph user={ opts.user }/>
+			<h1>フォロー/フォロワー</h1>
+			<mk-user-friends-graph user={ opts.user }/>
+		</div>
 	</section>
 	<section>
-		<h1>いいね</h1>
+		<div>
-		<mk-user-likes-graph user={ opts.user }/>
+			<h1>いいね</h1>
+			<mk-user-likes-graph user={ opts.user }/>
+		</div>
 	</section>
 	<style>
 		:scope
@@ -725,20 +734,21 @@
 
 			> section
 				margin 16px 0
-				background #fff
+				color #666
-				border solid 1px rgba(0, 0, 0, 0.1)
+				border-bottom solid 1px rgba(0, 0, 0, 0.1)
-				border-radius 4px
 
-				> h1
+				> div
-					margin 0 0 8px 0
+					max-width 1200px
+					margin 0 auto
 					padding 0 16px
-					line-height 40px
-					font-size 1em
-					color #666
-					border-bottom solid 1px #eee
 
-				> *:not(h1)
+					> h1
-					margin 0 auto 16px auto
+						margin 0 0 16px 0
+						padding 0
+						font-size 1.3em
+
+						> i
+							margin-right 8px
 
 	</style>
 	<script>
@@ -747,3 +757,71 @@
 		});
 	</script>
 </mk-user-graphs>
+
+<mk-user-graphs-activity-chart>
+	<svg if={ data } ref="canvas" viewBox="0 0 365 1" preserveAspectRatio="none">
+		<g each={ d, i in data.reverse() }>
+			<rect width="0.8" riot-height={ d.postsH }
+				riot-x={ i + 0.1 } riot-y={ 1 - d.postsH - d.repliesH - d.repostsH }
+				fill="#41ddde"/>
+			<rect width="0.8" riot-height={ d.repliesH }
+				riot-x={ i + 0.1 } riot-y={ 1 - d.repliesH - d.repostsH }
+				fill="#f7796c"/>
+			<rect width="0.8" riot-height={ d.repostsH }
+				riot-x={ i + 0.1 } riot-y={ 1 - d.repostsH }
+				fill="#a1de41"/>
+			</g>
+	</svg>
+	<p>直近1年間分の統計です。一番右が現在で、一番左が1年前です。青は通常の投稿、赤は返信、緑はRepostをそれぞれ表しています。</p>
+	<p>
+		<span>だいたい*1日に<b>{ averageOfAllTypePostsEachDays }回</b>投稿(返信、Repost含む)しています。</span><br>
+		<span>だいたい*1日に<b>{ averageOfPostsEachDays }回</b>投稿(通常の)しています。</span><br>
+		<span>だいたい*1日に<b>{ averageOfRepliesEachDays }回</b>返信しています。</span><br>
+		<span>だいたい*1日に<b>{ averageOfRepostsEachDays }回</b>Repostしています。</span><br>
+	</p>
+	<p>* 中央値</p>
+
+	<style>
+		:scope
+			display block
+
+			> svg
+				display block
+				width 100%
+				height 180px
+
+				> rect
+					transform-origin center
+
+	</style>
+	<script>
+		import getMedian from '../../common/scripts/get-median';
+
+		this.mixin('api');
+
+		this.user = this.opts.user;
+
+		this.on('mount', () => {
+			this.api('aggregation/users/activity', {
+				user_id: this.user.id,
+				limit: 365
+			}).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,
+					averageOfAllTypePostsEachDays: getMedian(data.map(d => d.total)),
+					averageOfPostsEachDays: getMedian(data.map(d => d.posts)),
+					averageOfRepliesEachDays: getMedian(data.map(d => d.replies)),
+					averageOfRepostsEachDays: getMedian(data.map(d => d.reposts))
+				});
+			});
+		});
+	</script>
+</mk-user-graphs-activity-chart>