[Client] Improve activity home widget

This commit is contained in:
syuilo 2017-06-08 06:13:52 +09:00
parent 2b741dc8f8
commit acc9e07e93
3 changed files with 63 additions and 8 deletions

View File

@ -245,6 +245,7 @@ desktop:
mk-activity-home-widget: mk-activity-home-widget:
title: "Activity" title: "Activity"
toggle: "Toggle views"
mk-user-recommendation-home-widget: mk-user-recommendation-home-widget:
title: "Recommended users" title: "Recommended users"

View File

@ -245,6 +245,7 @@ desktop:
mk-activity-home-widget: mk-activity-home-widget:
title: "アクティビティ" title: "アクティビティ"
toggle: "表示を切り替え"
mk-user-recommendation-home-widget: mk-user-recommendation-home-widget:
title: "おすすめユーザー" title: "おすすめユーザー"

View File

@ -1,19 +1,44 @@
<mk-activity-home-widget> <mk-activity-home-widget>
<p class="title"><i class="fa fa-bar-chart"></i>%i18n:desktop.tags.mk-activity-home-widget.title%</p> <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> <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"> <svg if={ !initializing && view == 0 } class="calender" viewBox="0 0 21 7" preserveAspectRatio="none">
<rect each={ data } width="1" height="1" <rect each={ data }
width="1" height="1"
riot-x={ x } riot-y={ date.weekday } riot-x={ x } riot-y={ date.weekday }
rx="1" ry="1" rx="1" ry="1"
fill={ color } fill={ color }
style="transform: scale({ v });"/> 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 } riot-x={ data[data.length - 1].x } riot-y={ data[data.length - 1].date.weekday }
rx="1" ry="1" rx="1" ry="1"
fill="none" fill="none"
stroke-width="0.1" stroke-width="0.1"
stroke="#f73520"/> stroke="#f73520"/>
</svg> </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> <style>
:scope :scope
display block display block
@ -32,6 +57,23 @@
> i > i
margin-right 4px 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 > .initializing
margin 0 margin 0
padding 16px padding 16px
@ -46,6 +88,7 @@
padding 10px padding 10px
width 100% width 100%
&.calender
> rect > rect
transform-origin center transform-origin center
@ -55,6 +98,7 @@
this.mixin('api'); this.mixin('api');
this.initializing = true; this.initializing = true;
this.view = 0;
this.on('mount', () => { this.on('mount', () => {
this.api('aggregation/users/activity', { this.api('aggregation/users/activity', {
@ -62,11 +106,11 @@
limit: 20 * 7 limit: 20 * 7
}).then(data => { }).then(data => {
data.forEach(d => d.total = d.posts + d.replies + d.reposts); 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; let x = 0;
data.reverse().forEach(d => { data.reverse().forEach(d => {
d.x = x; d.x = x;
d.v = d.total / this.peak; d.v = d.total / (peak / 2);
if (d.v > 1) d.v = 1; if (d.v > 1) d.v = 1;
d.color = `hsl(170, ${d.v * 100}%, ${15 + ((1 - d.v) * 80)}%)`; 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(); d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
@ -75,9 +119,18 @@
this.update({ this.update({
initializing: false, 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> </script>
</mk-activity-home-widget> </mk-activity-home-widget>