graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 11:13:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2023-01-06 20:19:27 +09:00
parent 3551ac328e
commit 70805e00eb
4 changed files with 57 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/frontend/src/components/MkChartLegend.vue
View file

@ -72,4 +72,11 @@ defineExpose({
}
}
}
@container (max-width: 500px) {
.root {
font-size: 90%;
gap: 6px;
}
}
</style>

8
packages/frontend/src/pages/user/activity.heatmap.vue
View file

@ -1,7 +1,7 @@
<template>
<div ref="rootEl">
<MkLoading v-if="fetching"/>
<div v-else>
<div v-else :class="$style.root" class="_panel">
<canvas ref="chartEl"></canvas>
</div>
</div>
@ -205,3 +205,9 @@ onMounted(async () => {
renderChart();
});
</script>
<style lang="scss" module>
.root {
padding: 20px;
}
</style>

36
packages/frontend/src/pages/user/activity.pv.vue
View file

@ -64,6 +64,8 @@ async function renderChart() {
const colorUser = '#3498db';
const colorVisitor = '#2ecc71';
const colorUser2 = '#3498db88';
const colorVisitor2 = '#2ecc7188';
chartInstance = new Chart(chartEl, {
type: 'bar',
@ -78,8 +80,9 @@ async function renderChart() {
borderRadius: 4,
backgroundColor: colorUser,
barPercentage: 0.7,
categoryPercentage: 1,
categoryPercentage: 0.7,
fill: true,
stack: 'u',
}, {
parsing: false,
label: 'UPV (visitor)',
@ -90,8 +93,35 @@ async function renderChart() {
borderRadius: 4,
backgroundColor: colorVisitor,
barPercentage: 0.7,
categoryPercentage: 1,
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',
}],
},
options: {
@ -146,7 +176,7 @@ async function renderChart() {
plugins: {
title: {
display: true,
text: 'Unique PV',
text: 'Unique/Natural PV',
padding: {
left: 0,
right: 0,

18
packages/frontend/src/pages/user/activity.vue
View file

@ -1,13 +1,15 @@
<template>
<MkSpacer :content-max="700">
<MkFolder class="item">
<template #header>Heatmap</template>
<XHeatmap :user="user" :src="'notes'"/>
</MkFolder>
<MkFolder class="item">
<template #header>PV</template>
<XPv :user="user"/>
</MkFolder>
<div class="_gaps">
<MkFolder class="item">
<template #header>Heatmap</template>
<XHeatmap :user="user" :src="'notes'"/>
</MkFolder>
<MkFolder class="item">
<template #header>PV</template>
<XPv :user="user"/>
</MkFolder>
</div>
</MkSpacer>
</template>