From e4e096119b5c3753d5733f8fea213d004fa2dee4 Mon Sep 17 00:00:00 2001
From: Ronni Skansing <rskansing@gmail.com>
Date: Tue, 28 Oct 2025 19:13:56 +0100
Subject: [PATCH] added relative metrics

Signed-off-by: Ronni Skansing <rskansing@gmail.com>
---
 .../lib/components/CampaignTrendChart.svelte  | 39 ++++++++++++++-----
 1 file changed, 29 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/CampaignTrendChart.svelte b/frontend/src/lib/components/CampaignTrendChart.svelte
index d7a9ff8..bd7a754 100644
--- a/frontend/src/lib/components/CampaignTrendChart.svelte
+++ b/frontend/src/lib/components/CampaignTrendChart.svelte
@@ -132,6 +132,7 @@
 	let chartData = [];
 	let xScale, yScale;
 	let useLogScale = false;
+	let useRelativeMetrics = false;
 
 	// Time range filter for campaigns
 	const timeRanges = [
@@ -213,7 +214,7 @@
 		.join('-');
 
 	// --- Data processing ---
-	function processData(stats) {
+	function processData(stats, useRelativeMetrics) {
 		const sortedStats = [...(stats || [])]
 			.filter((stat) => stat.campaignClosedAt)
 			.sort(
@@ -230,15 +231,19 @@
 			date: stat.campaignClosedAt ? new Date(stat.campaignClosedAt) : null,
 			name: stat.campaignName || `Campaign ${index + 1}`,
 			openRate: pct(stat.trackingPixelLoaded, stat.totalRecipients),
-			clickRate: pct(stat.websiteVisits, stat.totalRecipients),
-			submissionRate: pct(stat.dataSubmissions, stat.totalRecipients),
+			clickRate: useRelativeMetrics
+				? pct(stat.websiteVisits, stat.trackingPixelLoaded)
+				: pct(stat.websiteVisits, stat.totalRecipients),
+			submissionRate: useRelativeMetrics
+				? pct(stat.dataSubmissions, stat.websiteVisits)
+				: pct(stat.dataSubmissions, stat.totalRecipients),
 			reportRate: pct(stat.reported, stat.totalRecipients),
 			totalRecipients: stat.totalRecipients
 		}));
 	}
 
-	// Use filtered campaign stats based on selected time range
-	$: chartData = processData(filteredCampaignStats);
+	// Use filtered campaign stats based on selected time range and relative metrics toggle
+	$: chartData = processData(filteredCampaignStats, useRelativeMetrics);
 
 	function createChart() {
 		if (!chartContainer || chartData.length < 2) return;
@@ -1042,11 +1047,13 @@
 	});
 
 	// Only create chart when width is set and chartData is ready
-	$: if (
-		(containerReady && chartContainer && width > 0 && chartData.length > 1 && movingAvgN) ||
-		useLogScale
-	) {
-		createChart();
+	$: {
+		if (containerReady && chartContainer && width > 0 && chartData.length > 1 && movingAvgN) {
+			// reference toggles so Svelte tracks them for reactivity
+			useLogScale;
+			useRelativeMetrics;
+			createChart();
+		}
 	}
 </script>
 
@@ -1185,6 +1192,18 @@
 								Log scale:
 								<input type="checkbox" bind:checked={useLogScale} class="accent-blue-600" />
 							</label>
+							<div class="ml-auto flex items-center">
+								<label
+									class="flex items-center gap-1 text-xs text-gray-700 dark:text-gray-300 transition-colors duration-200"
+								>
+									Relative metrics:
+									<input
+										type="checkbox"
+										bind:checked={useRelativeMetrics}
+										class="accent-blue-600"
+									/>
+								</label>
+							</div>
 						</div>
 					</div>
 					<div class="mb-8"></div>