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

176 lines
4.1 KiB
Vue
Raw Normal View History

<template>
<div>
<MkLoading v-if="fetching"/>
<div v-show="!fetching" :class="$style.root" class="_panel">
<canvas ref="chartEl"></canvas>
<MkChartLegend ref="legendEl" style="margin-top: 8px;"/>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { Chart, ChartDataset } from 'chart.js';
import * as misskey from 'misskey-js';
import gradient from 'chartjs-plugin-gradient';
import * as os from '@/os';
import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { chartVLine } from '@/scripts/chart-vline';
import { initChart } from '@/scripts/init-chart';
import { chartLegend } from '@/scripts/chart-legend';
import MkChartLegend from '@/components/MkChartLegend.vue';
initChart();
const props = defineProps<{
user: misskey.entities.User;
}>();
const chartEl = $shallowRef<HTMLCanvasElement>(null);
let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
const now = new Date();
let chartInstance: Chart = null;
2023-01-08 13:02:07 +02:00
const chartLimit = 30;
let fetching = $ref(true);
const { handler: externalTooltipHandler } = useChartTooltip();
async function renderChart() {
if (chartInstance) {
chartInstance.destroy();
}
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) => ({
x: getDate(i).getTime(),
y: v,
}));
};
const raw = await os.api('charts/user/following', { userId: props.user.id, limit: chartLimit, span: 'day' });
const vLineColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
const colorFollowLocal = '#008FFB';
const colorFollowRemote = '#008FFB88';
const colorFollowedLocal = '#2ecc71';
const colorFollowedRemote = '#2ecc7188';
function makeDataset(label: string, data: ChartDataset['data'], extra: Partial<ChartDataset> = {}): ChartDataset {
return Object.assign({
label: label,
data: data,
parsing: false,
pointRadius: 0,
borderWidth: 0,
borderJoinStyle: 'round',
borderRadius: 4,
2023-01-08 13:02:07 +02:00
barPercentage: 0.7,
categoryPercentage: 0.7,
fill: true,
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, extra);
*/
}, extra);
}
chartInstance = new Chart(chartEl, {
type: 'bar',
data: {
datasets: [
2023-01-08 13:02:07 +02:00
makeDataset('Follow (local)', format(raw.local.followings.inc).slice().reverse(), { backgroundColor: colorFollowLocal, stack: 'follow' }),
makeDataset('Follow (remote)', format(raw.remote.followings.inc).slice().reverse(), { backgroundColor: colorFollowRemote, stack: 'follow' }),
makeDataset('Followed (local)', format(raw.local.followers.inc).slice().reverse(), { backgroundColor: colorFollowedLocal, stack: 'followed' }),
makeDataset('Followed (remote)', format(raw.remote.followers.inc).slice().reverse(), { backgroundColor: colorFollowedRemote, stack: 'followed' }),
],
},
options: {
aspectRatio: 3,
layout: {
padding: {
left: 0,
right: 8,
top: 0,
bottom: 0,
},
},
scales: {
x: {
type: 'time',
offset: true,
stacked: true,
time: {
stepSize: 1,
unit: 'day',
displayFormats: {
day: 'M/d',
month: 'Y/M',
},
},
grid: {
display: false,
},
ticks: {
display: true,
maxRotation: 0,
autoSkipPadding: 8,
},
},
y: {
position: 'left',
stacked: true,
suggestedMax: 10,
grid: {
display: true,
},
ticks: {
display: true,
//mirror: true,
},
},
},
interaction: {
intersect: false,
mode: 'index',
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
mode: 'index',
animation: {
duration: 0,
},
external: externalTooltipHandler,
},
gradient,
},
},
plugins: [chartVLine(vLineColor), chartLegend(legendEl)],
});
fetching = false;
}
onMounted(async () => {
renderChart();
});
</script>
<style lang="scss" module>
.root {
padding: 20px;
}
</style>