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

View file

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

View file

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

View file

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

View file

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