🎨

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,