chore: improved world map rendering & graph for bounce rate metric

Signed-off-by: Henry <mail@henrygressmann.de>

Author: explodingcamera

CHANGELOG.md

@@ -22,7 +22,7 @@ Since this is not a library, this changelog focuses on the changes that are rele
 - Fixed error when both `listen` and `port` configuration options are set
 - Added retry logic when loading the DuckDB database to handle potential locking issues on startup (e.g. when the database is being updated by another process or when using a shared network drive)
 - Improved filtering out invalid referrers
-- Improved world map rendering for bounce rate metric
+- Improved world map rendering & graph for bounce rate metric
 
 ## [v1.4.0] - 2026-03-14
 

src/utils/referrer.rs

@@ -56,7 +56,13 @@ pub fn process_referer(referer: Option<&str>) -> Referrer {
         return Referrer::Local;
     }
 
-    match referer.map(url::Url::parse) {
+    let original = referer;
+    let referer = original.map(|referer| {
+        // if the referer doesn't start with a scheme, add "http://" to make it parseable as a URL
+        if referer.contains("://") { referer.to_string() } else { format!("http://{}", referer) }
+    });
+
+    match referer.as_deref().map(url::Url::parse) {
         // valid referer are stripped to the FQDN
         Some(Ok(referer_uri)) => {
             // ignore localhost / IP addresses
@@ -73,7 +79,7 @@ pub fn process_referer(referer: Option<&str>) -> Referrer {
             Referrer::Fqdn(referer_fqn.to_string())
         }
         // invalid referer are kept as is (e.g. when using custom referer values outside of the browser)
-        Some(Err(_)) => Referrer::Unknown(referer.map(ToString::to_string)),
+        Some(Err(_)) => Referrer::Unknown(original.map(ToString::to_string)),
         None => Referrer::Unknown(None),
     }
 }
@@ -99,10 +105,10 @@ mod test {
         );
 
         assert_eq!(process_referer(Some("google.com")), Referrer::Fqdn("google.com".to_string()));
-        assert_eq!(process_referer(Some("127.0.0.1")), Referrer::Unknown(None));
-        assert_eq!(process_referer(Some("1.1.1.1")), Referrer::Unknown(None));
-        assert_eq!(process_referer(Some("localhost")), Referrer::Unknown(None));
-        assert_eq!(process_referer(Some("asdf.localhost")), Referrer::Unknown(None));
+        assert_eq!(process_referer(Some("127.0.0.1")), Referrer::Local);
+        assert_eq!(process_referer(Some("1.1.1.1")), Referrer::Local);
+        assert_eq!(process_referer(Some("localhost")), Referrer::Local);
+        assert_eq!(process_referer(Some("asdf.localhost")), Referrer::Local);
 
         assert_eq!(
             process_referer(Some("invalid referrer")),

web/src/components/graph/graph.tsx

@@ -94,12 +94,30 @@ export const LineGraph = ({
 					? scaleLinear([0, 1], [dimensions.height - paddingBottom - paddingTop, 0])
 					: scaleLinear([0, Math.max(maxY * 1.25 || 0, 20)], [dimensions.height - paddingBottom - paddingTop, 0]);
 
+			const bounceTolerance = 0.01;
+			const isExtremeBouncePoint = (d: DataPoint) =>
+				metric === "bounce_rate" && (d.y <= bounceTolerance || d.y >= 1 - bounceTolerance);
+			const isNormalPoint = (d: DataPoint) => !isExtremeBouncePoint(d);
+
 			const svgArea = area<DataPoint>()
+				.defined(isNormalPoint)
+				.x((d) => xAxis(d.x))
+				.y0(yAxis(0))
+				.y1((d) => yAxis(d.y));
+
+			const svgAreaFaded = area<DataPoint>()
+				.defined(() => metric === "bounce_rate")
 				.x((d) => xAxis(d.x))
 				.y0(yAxis(0))
 				.y1((d) => yAxis(d.y));
 
 			const svgLine = area<DataPoint>()
+				.defined(isNormalPoint)
+				.x((d) => xAxis(d.x))
+				.y((d) => yAxis(d.y));
+
+			const svgLineFaded = area<DataPoint>()
+				.defined(() => metric === "bounce_rate")
 				.x((d) => xAxis(d.x))
 				.y((d) => yAxis(d.y));
 
@@ -111,6 +129,14 @@ export const LineGraph = ({
 				.duration(transition)
 				.attr("d", svgArea(data) || "");
 
+			svg
+				.selectChild("#background-faded")
+				.attr("transform", `translate(0, ${paddingTop})`)
+				.transition()
+				.ease(easeCubic)
+				.duration(transition)
+				.attr("d", svgAreaFaded(data) || "");
+
 			svg
 				.selectChild("#line")
 				.attr("transform", `translate(0, ${paddingTop})`)
@@ -119,6 +145,14 @@ export const LineGraph = ({
 				.duration(transition)
 				.attr("d", svgLine(data) || "");
 
+			svg
+				.selectChild("#line-faded")
+				.attr("transform", `translate(0, ${paddingTop})`)
+				.transition()
+				.ease(easeCubic)
+				.duration(transition)
+				.attr("d", svgLineFaded(data) || "");
+
 			const yAxisElement = svg.selectChild<SVGGElement>("#y-axis");
 			const xAxisElement = svg.selectChild<SVGGElement>("#x-axis");
 
@@ -287,7 +321,9 @@ export const LineGraph = ({
 					</linearGradient>
 				</defs>
 				<path id="background" fill="url(#graphGradient)" stroke="none" />
+				<path id="background-faded" fill="url(#graphGradient)" stroke="none" opacity="0.14" />
 				<path id="line" fill="none" stroke="#a6cee3" />
+				<path id="line-faded" fill="none" stroke="#a6cee3" opacity="0.15" />
 				{/* doted line */}
 				<path
 					id="needle"