sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance(client): improve user activity page

Browse Source
This commit is contained in:
syuilo
2023-01-08 14:17:56 +09:00
parent 4ffbbbe6d8
commit 5320f23017
6 changed files with 386 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
packages/frontend/src/pages/user/activity.pv.vue
View File

@@ -10,7 +10,7 @@
<script lang="ts" setup>
import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick } from 'vue';
import { Chart } from 'chart.js';
import { Chart, ChartDataset } from 'chart.js';
import tinycolor from 'tinycolor2';
import * as misskey from 'misskey-js';
import gradient from 'chartjs-plugin-gradient';
@@ -67,65 +67,33 @@ async function renderChart() {
const colorUser2 = '#3498db88';
const colorVisitor2 = '#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,
barPercentage: 0.7,
categoryPercentage: 0.7,
fill: true,
} satisfies ChartDataset, extra);
}
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: 0.7,
fill: true,
stack: 'u',
}, {
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: 0.7,
fill: true,
stack: 'u',
}, {
parsing: false,
label: 'NPV (user)',
data: format(raw.pv.user).slice().reverse(),
pointRadius: 0,
borderWidth: 0,
borderJoinStyle: 'round',
borderRadius: 4,
backgroundColor: colorUser2,
barPercentage: 0.7,
categoryPercentage: 0.7,
fill: true,
stack: 'n',
}, {
parsing: false,
label: 'NPV (visitor)',
data: format(raw.pv.visitor).slice().reverse(),
pointRadius: 0,
borderWidth: 0,
borderJoinStyle: 'round',
borderRadius: 4,
backgroundColor: colorVisitor2,
barPercentage: 0.7,
categoryPercentage: 0.7,
fill: true,
stack: 'n',
}],
datasets: [
makeDataset('UPV (user)', format(raw.upv.user).slice().reverse(), { backgroundColor: colorUser, stack: 'u' }),
makeDataset('UPV (visitor)', format(raw.upv.visitor).slice().reverse(), { backgroundColor: colorVisitor, stack: 'u' }),
makeDataset('NPV (user)', format(raw.pv.user).slice().reverse(), { backgroundColor: colorUser2, stack: 'n' }),
makeDataset('UPV (visitor)', format(raw.pv.visitor).slice().reverse(), { backgroundColor: colorVisitor2, stack: 'n' }),
],
},
options: {
aspectRatio: 2.5,
aspectRatio: 3,
layout: {
padding: {
left: 0,