Sharkey/packages/frontend/src/pages/user/activity.heatmap.vue

220 lines
4.6 KiB
Vue
Raw Normal View History

<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
2023-01-02 03:18:47 +02:00
<template>
<div ref="rootEl">
<MkLoading v-if="fetching"/>
2023-01-06 13:19:27 +02:00
<div v-else :class="$style.root" class="_panel">
2023-01-02 03:18:47 +02:00
<canvas ref="chartEl"></canvas>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, nextTick, watch } from 'vue';
2023-01-02 03:18:47 +02:00
import { Chart } from 'chart.js';
import * as Misskey from 'misskey-js';
2023-09-19 10:37:43 +03:00
import * as os from '@/os.js';
import { defaultStore } from '@/store.js';
import { useChartTooltip } from '@/scripts/use-chart-tooltip.js';
import { alpha } from '@/scripts/color.js';
import { initChart } from '@/scripts/init-chart.js';
2023-01-02 03:18:47 +02:00
initChart();
const props = defineProps<{
src: string;
user: Misskey.entities.User;
2023-01-02 03:18:47 +02:00
}>();
const rootEl = $shallowRef<HTMLDivElement>(null);
const chartEl = $shallowRef<HTMLCanvasElement>(null);
2023-01-02 03:18:47 +02:00
const now = new Date();
let chartInstance: Chart = null;
let fetching = $ref(true);
const { handler: externalTooltipHandler } = useChartTooltip({
position: 'middle',
});
async function renderChart() {
if (chartInstance) {
chartInstance.destroy();
}
const wide = rootEl.offsetWidth > 700;
const narrow = rootEl.offsetWidth < 400;
const weeks = wide ? 50 : narrow ? 10 : 25;
const chartLimit = 7 * weeks;
const getDate = (ago: number) => {
const y = now.getFullYear();
const m = now.getMonth();
const d = now.getDate();
return new Date(y, m, d - ago);
};
const format = (arr) => {
return arr.map((v, i) => {
const dt = getDate(i);
const iso = `${dt.getFullYear()}-${(dt.getMonth() + 1).toString().padStart(2, '0')}-${dt.getDate().toString().padStart(2, '0')}`;
return {
x: iso,
y: dt.getDay(),
d: iso,
v,
};
});
};
let values;
if (props.src === 'notes') {
const raw = await os.api('charts/user/notes', { userId: props.user.id, limit: chartLimit, span: 'day' });
values = raw.inc;
}
fetching = false;
await nextTick();
const color = defaultStore.state.darkMode ? '#b4e900' : '#86b300';
// 視覚上の分かりやすさのため上から最も大きい3つの値の平均を最大値とする
const max = values.slice().sort((a, b) => b - a).slice(0, 3).reduce((a, b) => a + b, 0) / 3;
const min = Math.max(0, Math.min(...values) - 1);
const marginEachCell = 4;
chartInstance = new Chart(chartEl, {
type: 'matrix',
data: {
datasets: [{
label: '',
data: format(values),
pointRadius: 0,
borderWidth: 0,
borderJoinStyle: 'round',
borderRadius: 3,
backgroundColor(c) {
const value = c.dataset.data[c.dataIndex].v;
let a = (value - min) / max;
if (value !== 0) { // 0でない限りは完全に不可視にはしない
a = Math.max(a, 0.05);
}
return alpha(color, a);
},
fill: true,
width(c) {
const a = c.chart.chartArea ?? {};
return (a.right - a.left) / weeks - marginEachCell;
},
height(c) {
const a = c.chart.chartArea ?? {};
return (a.bottom - a.top) / 7 - marginEachCell;
},
build(#10336): Storybook & Chromatic & msw (#10365) * build(#10336): init * fix(#10336): invalid name conversion * build(#10336): load locales and vite config * refactor(#10336): remove unused imports * build(#10336): separate definitions and generated codes * refactor(#10336): remove hatches * refactor(#10336): module semantics * refactor(#10336): remove unused common preferences * fix: typo * build(#10336): mock assets * build(#10336): impl `SatisfiesExpression` * build(#10336): control themes * refactor(#10336): semantics * build(#10336): make .storybook as an individual TypeScript project * style(#10336): use single quote * build(#10336): avoid intrinsic component names * chore: suppress linter * style: typing * build(#10336): update dependencies * docs: note about Storybook * build(#10336): sync * build(#10336): full reload server on change * chore: use defaultStore instead * build(#10336): show popups on Story * refactor(#10336): remove redundant div * docs: fix * build(#10336): interactions * build(#10336): add an interaction test for `<MkA/>` * build(#10336): bump storybook * docs(#10336): mention to pre-build misskey-js * build(#10336): write stories for `MkAcct` * build(#10336): write stories for `MkAd` * build(#10336): fix missing type definition * build(#10336): use `toHaveTextContent` * build(#10336): write some stories * build(#10336): hide internal args * build(#10336): generate `components/global` stories only * build(#10336): write stories for `MkMisskeyFlavoredMarkdown` * fix: conflict errors * build(#10336): subcomponents on sidebar * refactor: restore `SatisfiesExpression` * docs(#10336): note development status * build(#10336): use chokidar-cli * docs(#10336): note chokidar-cli mode * chore(#10336): untrack generated stories files * fix: pointer handling * build(#10336): finalize * chore: add static option to `MkLoading` * refactor(#10336): bind to local args * fix: missing case * revert: restore `SatisfiesExpression` This reverts commit f246699f38a28befbfccc11e9eade22cbaace4f3. * build(#10336): make storybook buildable * build(#10336): staticify assets * build(#10336): staticified directory structure * build(#10336): normalize path for Windows * ci(#10336): create actions * build(#10336): ignore tsc errors * build(#10336): ignore tsc errors * build(#10336): missing dependencies * build(#10336): missing dependencies * build(#10336): use fast-glob * fix: invalid lockfile * ci(#10336): increase heap size * build(#10336): use unpkg for storybook tabler icons * build(#10336): use unpkg for storybook twemojis * build(#10336): disable `ProfilePageCat` * build(#10336): blur `MkA` before interaction ends * ci(#10336): stabilize * ci(#10336): fetch-depth * build(#10336): isChromatic * ci(#10336): notify on changes * ci(#10336): fix typo * ci(#10336): missing working directory * ci(#10336): skip build * ci(#10336): fix path * build(#10336): fails on Windows * build(#10336): available on Windows * ci(#10336): disable animation on chromatic * ci(#10336): add static option to `PageHeader.tabs` * chore: void * ci(#10336): change parameters * docs(#10336): update CONTRIBUTING * docs(#10336): note about meta overriding and etc. * ci(#10336): use Chromatic for checks * ci(#10336): use `pull_request` instead of `pull_request_target` for now * ci(#10336): use `exitOnceUploaded` * ci(#10336): reuse built storybook * ci(#10336): back to `pull_request_target` * chore: unused dependencies * style(#10336): reduce prettier indents * style: note about `TSSatisfiesExpression`
2023-04-04 03:38:34 +03:00
/* @see <https://github.com/misskey-dev/misskey/pull/10365#discussion_r1155511107>
}] satisfies ChartData[],
*/
2023-01-02 03:18:47 +02:00
}],
},
options: {
aspectRatio: wide ? 6 : narrow ? 1.8 : 3.2,
layout: {
padding: {
left: 8,
right: 0,
top: 0,
bottom: 0,
},
},
scales: {
x: {
type: 'time',
offset: true,
position: 'bottom',
time: {
unit: 'week',
round: 'week',
isoWeekday: 0,
displayFormats: {
2023-01-06 13:00:06 +02:00
day: 'M/d',
month: 'Y/M',
week: 'M/d',
2023-01-02 03:18:47 +02:00
},
},
grid: {
display: false,
},
ticks: {
display: true,
maxRotation: 0,
autoSkipPadding: 8,
},
},
y: {
offset: true,
reverse: true,
position: 'right',
grid: {
display: false,
},
ticks: {
maxRotation: 0,
autoSkip: true,
padding: 1,
font: {
size: 9,
},
callback: (value, index, values) => ['', 'Mon', '', 'Wed', '', 'Fri', ''][value],
},
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
callbacks: {
title(context) {
const v = context[0].dataset.data[context[0].dataIndex];
return v.d;
},
label(context) {
const v = context.dataset.data[context.dataIndex];
return [v.v];
},
},
//mode: 'index',
animation: {
duration: 0,
},
external: externalTooltipHandler,
},
},
},
});
}
watch(() => props.src, () => {
fetching = true;
renderChart();
});
onMounted(async () => {
renderChart();
});
</script>
2023-01-06 13:19:27 +02:00
<style lang="scss" module>
.root {
padding: 20px;
}
</style>