From acc9e07e93df2e0867b21a20065de8ae2ee9e51b Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 8 Jun 2017 06:13:52 +0900
Subject: [PATCH] [Client] Improve activity home widget
---
locales/en.yml | 1 +
locales/ja.yml | 1 +
.../desktop/tags/home-widgets/activity.tag | 69 ++++++++++++++++---
3 files changed, 63 insertions(+), 8 deletions(-)
diff --git a/locales/en.yml b/locales/en.yml
index 74ff52979c..6104cbdc9d 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -245,6 +245,7 @@ desktop:
mk-activity-home-widget:
title: "Activity"
+ toggle: "Toggle views"
mk-user-recommendation-home-widget:
title: "Recommended users"
diff --git a/locales/ja.yml b/locales/ja.yml
index dda0da5856..e83c0eb724 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -245,6 +245,7 @@ desktop:
mk-activity-home-widget:
title: "アクティビティ"
+ toggle: "表示を切り替え"
mk-user-recommendation-home-widget:
title: "おすすめユーザー"
diff --git a/src/web/app/desktop/tags/home-widgets/activity.tag b/src/web/app/desktop/tags/home-widgets/activity.tag
index 3abfd12c5f..408388b8fd 100644
--- a/src/web/app/desktop/tags/home-widgets/activity.tag
+++ b/src/web/app/desktop/tags/home-widgets/activity.tag
@@ -1,19 +1,44 @@
<mk-activity-home-widget>
<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-home-widget.title%</p>
+ <button onclick={ toggle } title="%i18n:desktop.tags.mk-activity-home-widget.toggle%"><i class="fa fa-sort"></i></button>
<p class="initializing" if={ initializing }><i class="fa fa-spinner fa-pulse fa-fw"></i>%i18n:common.loading%<mk-ellipsis/></p>
- <svg if={ !initializing } ref="canvas" viewBox="0 0 21 7" preserveAspectRatio="none">
- <rect each={ data } width="1" height="1"
+ <svg if={ !initializing && view == 0 } class="calender" viewBox="0 0 21 7" preserveAspectRatio="none">
+ <rect each={ data }
+ width="1" height="1"
riot-x={ x } riot-y={ date.weekday }
rx="1" ry="1"
fill={ color }
style="transform: scale({ v });"/>
- <rect class="today" width="1" height="1"
+ <rect class="today"
+ width="1" height="1"
riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
rx="1" ry="1"
fill="none"
stroke-width="0.1"
stroke="#f73520"/>
</svg>
+ <svg if={ !initializing && view == 1 } class="chart" viewBox="0 0 140 60" preserveAspectRatio="none">
+ <polyline
+ riot-points={ chartPointsPost }
+ fill="none"
+ stroke-width="1"
+ stroke="#41ddde"/>
+ <polyline
+ riot-points={ chartPointsReply }
+ fill="none"
+ stroke-width="1"
+ stroke="#f7796c"/>
+ <polyline
+ riot-points={ chartPointsRepost }
+ fill="none"
+ stroke-width="1"
+ stroke="#a1de41"/>
+ <polyline
+ riot-points={ chartPointsTotal }
+ fill="none"
+ stroke-width="1"
+ stroke="#555"/>
+ </svg>
<style>
:scope
display block
@@ -32,6 +57,23 @@
> i
margin-right 4px
+ > button
+ position absolute
+ z-index 2
+ top 0
+ right 0
+ padding 0
+ width 42px
+ font-size 0.9em
+ line-height 42px
+ color #ccc
+
+ &:hover
+ color #aaa
+
+ &:active
+ color #999
+
> .initializing
margin 0
padding 16px
@@ -46,8 +88,9 @@
padding 10px
width 100%
- > rect
- transform-origin center
+ &.calender
+ > rect
+ transform-origin center
</style>
<script>
@@ -55,6 +98,7 @@
this.mixin('api');
this.initializing = true;
+ this.view = 0;
this.on('mount', () => {
this.api('aggregation/users/activity', {
@@ -62,11 +106,11 @@
limit: 20 * 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)) / 2;
+ const peak = Math.max.apply(null, data.map(d => d.total));
let x = 0;
data.reverse().forEach(d => {
d.x = x;
- d.v = d.total / this.peak;
+ d.v = d.total / (peak / 2);
if (d.v > 1) d.v = 1;
d.color = `hsl(170, ${d.v * 100}%, ${15 + ((1 - d.v) * 80)}%)`;
d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
@@ -75,9 +119,18 @@
this.update({
initializing: false,
- data
+ data,
+ chartPointsPost: data.map((d, i) => `${i},${(1 - (d.posts / peak)) * 60}`).join(' '),
+ chartPointsReply: data.map((d, i) => `${i},${(1 - (d.replies / peak)) * 60}`).join(' '),
+ chartPointsRepost: data.map((d, i) => `${i},${(1 - (d.reposts / peak)) * 60}`).join(' '),
+ chartPointsTotal: data.map((d, i) => `${i},${(1 - (d.total / peak)) * 60}`).join(' ')
});
});
});
+
+ this.toggle = () => {
+ this.view++;
+ if (this.view == 2) this.view = 0;
+ };
</script>
</mk-activity-home-widget>