misskey/packages/frontend/src/widgets/WidgetActivity.calendar.vue

93 lines
1.9 KiB
Vue
Raw Normal View History

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
2020-02-18 10:31:11 +00:00
<template>
<svg viewBox="0 0 21 7">
2023-05-19 07:20:53 +00:00
<rect
v-for="record in activity" class="day"
2020-02-18 10:31:11 +00:00
width="1" height="1"
:x="record.x" :y="record.date.weekday"
rx="1" ry="1"
2023-05-19 07:20:53 +00:00
fill="transparent"
>
2020-02-18 10:31:11 +00:00
<title>{{ record.date.year }}/{{ record.date.month + 1 }}/{{ record.date.day }}</title>
</rect>
2023-05-19 07:20:53 +00:00
<rect
v-for="record in activity" class="day"
2020-02-18 10:31:11 +00:00
: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"
2023-05-19 07:20:53 +00:00
style="pointer-events: none;"
/>
<rect
class="today"
2020-02-18 10:31:11 +00:00
width="1" height="1"
:x="activity[0].x" :y="activity[0].date.weekday"
2020-02-18 10:31:11 +00:00
rx="1" ry="1"
fill="none"
stroke-width="0.1"
2023-05-19 07:20:53 +00:00
stroke="#f73520"
/>
2020-02-18 10:31:11 +00:00
</svg>
</template>
<script lang="ts" setup>
const props = defineProps<{
activity: any[]
}>();
2020-02-18 10:31:11 +00:00
for (const d of props.activity) {
d.total = d.notes + d.replies + d.renotes;
}
const peak = Math.max(...props.activity.map(d => d.total));
2020-02-18 10:31:11 +00:00
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
const day = now.getDate();
2020-02-18 10:31:11 +00:00
let x = 20;
props.activity.slice().forEach((d, i) => {
d.x = x;
2020-02-18 10:31:11 +00:00
const date = new Date(year, month, day - i);
d.date = {
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDate(),
weekday: date.getDay(),
};
2020-02-18 10:31:11 +00:00
d.v = peak === 0 ? 0 : d.total / (peak / 2);
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}%)`;
2020-02-18 10:31:11 +00:00
if (d.date.weekday === 0) x--;
2020-02-18 10:31:11 +00:00
});
</script>
<style lang="scss" scoped>
svg {
display: block;
padding: 16px;
width: 100%;
box-sizing: border-box;
> rect {
transform-origin: center;
&.day {
&:hover {
fill: rgba(#000, 0.05);
}
}
}
}
</style>