mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-23 17:03:10 +02:00
🎨
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>
|
</style>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue