misskey/packages/frontend/src/pages/user/activity.pv.vue

189 lines
3.8 KiB
Vue
Raw Normal View History

2023-01-02 10:18:47 +09:00
<template>
<div>
<MkLoading v-if="fetching"/>
<div v-show="!fetching" :class="$style.root" class="_panel">
<canvas ref="chartEl"></canvas>
2023-01-03 14:08:52 +09:00
<MkChartLegend ref="legendEl" style="margin-top: 8px;"/>
2023-01-02 10:18:47 +09:00
</div>
</div>
</template>
<script lang="ts" setup>
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { Chart } from 'chart.js';
import { enUS } from 'date-fns/locale';
import tinycolor from 'tinycolor2';
import * as misskey from 'misskey-js';
2023-01-03 13:09:24 +09:00
import gradient from 'chartjs-plugin-gradient';
2023-01-02 10:18:47 +09:00
import * as os from '@/os';
import { defaultStore } from '@/store';
import { useChartTooltip } from '@/scripts/use-chart-tooltip';
import { chartVLine } from '@/scripts/chart-vline';
import { alpha } from '@/scripts/color';
import { initChart } from '@/scripts/init-chart';
2023-01-03 14:08:52 +09:00
import { chartLegend } from '@/scripts/chart-legend';
import MkChartLegend from '@/components/MkChartLegend.vue';
2023-01-02 10:18:47 +09:00
initChart();
const props = defineProps<{
user: misskey.entities.User;
}>();
const chartEl = $shallowRef<HTMLCanvasElement>(null);
2023-01-03 14:08:52 +09:00
let legendEl = $shallowRef<InstanceType<typeof MkChartLegend>>();
2023-01-02 10:18:47 +09:00
const now = new Date();
let chartInstance: Chart = null;
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/pv', { 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 colorUser = '#3498db';
const colorVisitor = '#2ecc71';
chartInstance = new Chart(chartEl, {
type: 'bar',
data: {
datasets: [{
parsing: false,
label: 'UPV (user)',
data: format(raw.upv.user).slice().reverse(),
pointRadius: 0,
borderWidth: 0,
borderJoinStyle: 'round',
borderRadius: 4,
backgroundColor: colorUser,
barPercentage: 0.7,
categoryPercentage: 1,
fill: true,
}, {
parsing: false,
label: 'UPV (visitor)',
data: format(raw.upv.visitor).slice().reverse(),
pointRadius: 0,
borderWidth: 0,
borderJoinStyle: 'round',
borderRadius: 4,
backgroundColor: colorVisitor,
barPercentage: 0.7,
categoryPercentage: 1,
fill: true,
}],
},
options: {
aspectRatio: 2.5,
layout: {
padding: {
left: 0,
right: 8,
top: 0,
bottom: 0,
},
},
scales: {
x: {
type: 'time',
offset: true,
stacked: true,
time: {
stepSize: 1,
unit: 'day',
},
grid: {
display: false,
},
ticks: {
display: true,
maxRotation: 0,
autoSkipPadding: 8,
},
adapters: {
date: {
locale: enUS,
},
},
},
y: {
position: 'left',
stacked: true,
suggestedMax: 10,
grid: {
display: true,
},
ticks: {
display: true,
//mirror: true,
},
},
},
interaction: {
intersect: false,
mode: 'index',
},
plugins: {
title: {
display: true,
text: 'Unique PV',
padding: {
left: 0,
right: 0,
top: 0,
bottom: 12,
},
},
legend: {
2023-01-03 14:08:52 +09:00
display: false,
2023-01-02 10:18:47 +09:00
},
tooltip: {
enabled: false,
mode: 'index',
animation: {
duration: 0,
},
external: externalTooltipHandler,
},
gradient,
},
},
2023-01-03 14:08:52 +09:00
plugins: [chartVLine(vLineColor), chartLegend(legendEl)],
2023-01-02 10:18:47 +09:00
});
fetching = false;
}
onMounted(async () => {
renderChart();
});
</script>
<style lang="scss" module>
.root {
padding: 20px;
}
</style>