Sharkey/src/client/app/desktop/views/components/activity.calendar.vue

81 lines
1.8 KiB
Vue
Raw Normal View History

2018-02-19 16:37:09 +02:00
<template>
2018-06-09 05:40:42 +03:00
<svg viewBox="0 0 21 7">
2018-02-19 16:37:09 +02:00
<rect v-for="record in data" class="day"
width="1" height="1"
:x="record.x" :y="record.date.weekday"
rx="1" ry="1"
fill="transparent">
<title>{{ record.date.year }}/{{ record.date.month }}/{{ record.date.day }}</title>
</rect>
<rect v-for="record in data" class="day"
:width="record.v" :height="record.v"
:x="record.x + ((1 - record.v) / 2)" :y="record.date.weekday + ((1 - record.v) / 2)"
rx="1" ry="1"
:fill="record.color"
style="pointer-events: none;"/>
<rect class="today"
width="1" height="1"
2018-06-09 05:40:42 +03:00
:x="data[0].x" :y="data[0].date.weekday"
2018-02-19 16:37:09 +02:00
rx="1" ry="1"
fill="none"
stroke-width="0.1"
stroke="#f73520"/>
</svg>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: ['data'],
created() {
for (const d of this.data) {
d.total = d.notes + d.replies + d.renotes;
}
2018-02-19 16:37:09 +02:00
const peak = Math.max.apply(null, this.data.map(d => d.total));
2018-11-03 09:44:05 +02:00
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const day = now.getDate();
2018-02-19 16:37:09 +02:00
let x = 0;
2018-11-03 09:44:05 +02:00
this.data.slice().reverse().forEach((d, i) => {
2018-02-19 16:37:09 +02:00
d.x = x;
2018-11-03 09:44:05 +02:00
const date = new Date(year, month, day - i);
d.date = {
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDate()
};
2018-02-19 16:37:09 +02:00
d.date.weekday = (new Date(d.date.year, d.date.month - 1, d.date.day)).getDay();
2018-02-22 13:52:39 +02:00
d.v = peak == 0 ? 0 : d.total / (peak / 2);
2018-02-19 16:37:09 +02:00
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++;
});
}
});
</script>
<style lang="stylus" scoped>
svg
display block
padding 10px
width 100%
> rect
transform-origin center
&.day
&:hover
2018-04-29 02:51:17 +03:00
fill rgba(#000, 0.05)
2018-02-19 16:37:09 +02:00
</style>