wip
This commit is contained in:
parent
dd72410b1d
commit
9842946610
|
@ -1,57 +0,0 @@
|
||||||
<mk-activity-table>
|
|
||||||
<svg v-if="data" ref="canvas" viewBox="0 0 53 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"
|
|
||||||
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>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
max-width 600px
|
|
||||||
margin 0 auto
|
|
||||||
|
|
||||||
> svg
|
|
||||||
display block
|
|
||||||
|
|
||||||
> rect
|
|
||||||
transform-origin center
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.user = this.opts.user;
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
this.$root.$data.os.api('aggregation/users/activity', {
|
|
||||||
user_id: this.user.id
|
|
||||||
}).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;
|
|
||||||
let x = 0;
|
|
||||||
data.reverse().forEach(d => {
|
|
||||||
d.x = x;
|
|
||||||
d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
|
|
||||||
|
|
||||||
d.v = d.total / this.peak;
|
|
||||||
if (d.v > 1) d.v = 1;
|
|
||||||
const ch = d.date.weekday == 0 || d.date.weekday == 6 ? 275 : 170;
|
|
||||||
const cs = d.v * 100;
|
|
||||||
const cl = 15 + ((1 - d.v) * 80);
|
|
||||||
d.color = `hsl(${ch}, ${cs}%, ${cl}%)`;
|
|
||||||
|
|
||||||
if (d.date.weekday == 6) x++;
|
|
||||||
});
|
|
||||||
this.update({ data });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-activity-table>
|
|
|
@ -26,8 +26,8 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="status">
|
<div class="status">
|
||||||
<a>
|
<a>
|
||||||
<b>{{ user.posts_count }}</b>
|
<b>{{ user.posts_count }}</b>
|
||||||
<i>%i18n:mobile.tags.mk-user.posts%</i>
|
<i>%i18n:mobile.tags.mk-user.posts%</i>
|
||||||
</a>
|
</a>
|
||||||
<a :href="`${user.username}/following`">
|
<a :href="`${user.username}/following`">
|
||||||
|
@ -199,9 +199,6 @@ export default Vue.extend({
|
||||||
> i
|
> i
|
||||||
font-size 14px
|
font-size 14px
|
||||||
|
|
||||||
> .mk-activity-table
|
|
||||||
margin 12px 0 0 0
|
|
||||||
|
|
||||||
> nav
|
> nav
|
||||||
display flex
|
display flex
|
||||||
justify-content center
|
justify-content center
|
||||||
|
|
Loading…
Reference in New Issue