HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

[Client] Improve activity home widget

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
locales/en.yml
View file

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

1
locales/ja.yml
View file

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

65
src/web/app/desktop/tags/home-widgets/activity.tag
View file

@ -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,6 +88,7 @@
padding 10px
width 100%
&.calender
> rect
transform-origin center
@ -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>