🎨

packages/frontend/src/components/MkChartLegend.vue

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

packages/frontend/src/pages/user/activity.heatmap.vue

 <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>

packages/frontend/src/pages/user/activity.pv.vue

@@ -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,

packages/frontend/src/pages/user/activity.vue

 <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>