🎨
This commit is contained in:
parent
3551ac328e
commit
70805e00eb
4 changed files with 57 additions and 12 deletions
|
@ -72,4 +72,11 @@ defineExpose({
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@container (max-width: 500px) {
|
||||
.root {
|
||||
font-size: 90%;
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue