mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-12-23 15:13:09 +02:00
[Client] Improve activity home widget
This commit is contained in:
parent
2b741dc8f8
commit
acc9e07e93
3 changed files with 63 additions and 8 deletions
|
@ -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"
|
||||||
|
|
|
@ -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: "おすすめユーザー"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue