add screen size handling to the backend

Author: alexbruy

src/app/core/reports.rs

@@ -2,8 +2,8 @@ use std::collections::BTreeMap;
 use std::fmt::{Debug, Display};
 
 use crate::app::DuckDBConn;
-use crate::utils::duckdb::{repeat_vars, ParamVec};
-use anyhow::{bail, Result};
+use crate::utils::duckdb::{ParamVec, repeat_vars};
+use anyhow::{Result, bail};
 use chrono::{DateTime, Utc};
 use duckdb::params_from_iter;
 use schemars::JsonSchema;
@@ -66,6 +66,7 @@ pub enum Dimension {
     UtmCampaign,
     UtmContent,
     UtmTerm,
+    ScreenSize,
 }
 
 #[derive(Serialize, Deserialize, JsonSchema, Debug, Clone, Copy, Hash, Eq, PartialEq, PartialOrd, Ord)]
@@ -191,6 +192,7 @@ fn filter_sql(filters: &[DimensionFilter]) -> Result<(String, ParamVec<'_>)> {
                 Dimension::UtmCampaign => format!("utm_campaign {filter_value}"),
                 Dimension::UtmContent => format!("utm_content {filter_value}"),
                 Dimension::UtmTerm => format!("utm_term {filter_value}"),
+                Dimension::ScreenSize => format!("screen_size {filter_value}"),
             })
         })
         .collect::<Result<Vec<String>>>()?;
@@ -481,6 +483,7 @@ pub fn dimension_report(
         Dimension::UtmCampaign => ("utm_campaign", "utm_campaign", None),
         Dimension::UtmContent => ("utm_content", "utm_content", None),
         Dimension::UtmTerm => ("utm_term", "utm_term", None),
+        Dimension::ScreenSize => ("screen_size", "screen_size", None),
     };
     let filters_sql = match (filters_sql.is_empty(), dimension_scope_sql) {
         (true, Some(scope)) => format!("and ({scope})"),

src/app/models.rs

@@ -23,6 +23,7 @@ pub struct Event {
     pub utm_campaign: Option<String>,
     pub utm_content: Option<String>,
     pub utm_term: Option<String>,
+    pub screen_size: Option<String>,
 }
 
 #[derive(Debug, Clone)]
@@ -100,6 +101,7 @@ macro_rules! event_params {
             $event.utm_term,
             None::<std::time::Duration>,
             None::<std::time::Duration>,
+            $event.screen_size,
         ]
     };
 }

src/utils/seed.rs

@@ -125,6 +125,7 @@ pub fn random_events(
             utm_medium: Some(random_el(UTM_MEDIUMS, 0.6).to_string()),
             utm_source: Some(random_el(UTM_SOURCES, 0.6).to_string()),
             utm_term: Some(random_el(UTM_TERMS, 0.6).to_string()),
+            screen_size: None,
         })
     })
 }

src/web/routes/dashboard.rs

@@ -227,6 +227,11 @@ async fn project_detailed_handler(
                 let city = city.filter(|city| !city.is_empty());
                 data.push(DimensionTableRow { dimension_value: key, value, display_name: city, icon: country });
             }
+            Dimension::ScreenSize => {
+                let display_name =
+                    key.chars().next().map(|c| c.to_uppercase().collect::<String>() + &key[c.len_utf8()..]);
+                data.push(DimensionTableRow { dimension_value: key, value, display_name, icon: None });
+            }
             _ => {
                 data.push(DimensionTableRow { dimension_value: key, value, display_name: None, icon: None });
             }

src/web/routes/event.rs

@@ -31,6 +31,7 @@ struct EventRequest {
     url: String,
     referrer: Option<String>,
     utm: Option<Utm>,
+    screen_width: Option<u32>,
 }
 
 #[derive(serde::Deserialize, JsonSchema)]
@@ -42,6 +43,15 @@ struct Utm {
     term: Option<String>,
 }
 
+fn screen_size_bucket(width: u32) -> &'static str {
+    match width {
+        0..=767 => "mobile",
+        768..=1023 => "tablet",
+        1024..=2559 => "desktop",
+        _ => "ultrawide",
+    }
+}
+
 static EXISTING_ENTITIES: LazyLock<quick_cache::sync::Cache<String, ()>> =
     LazyLock::new(|| quick_cache::sync::Cache::new(512));
 
@@ -131,8 +141,45 @@ fn process_event(
         utm_medium: event.utm.as_ref().and_then(|u| u.medium.clone()),
         utm_source: event.utm.as_ref().and_then(|u| u.source.clone()),
         utm_term: event.utm.as_ref().and_then(|u| u.term.clone()),
+        screen_size: event.screen_width.map(|w| screen_size_bucket(w).to_string()),
     };
 
     events.send(event)?;
     Ok(())
 }
+
+#[cfg(test)]
+mod tests {
+    use super::screen_size_bucket;
+
+    #[test]
+    fn test_screen_size_bucket_mobile() {
+        assert_eq!(screen_size_bucket(0), "mobile");
+        assert_eq!(screen_size_bucket(375), "mobile");
+        assert_eq!(screen_size_bucket(430), "mobile");
+        assert_eq!(screen_size_bucket(767), "mobile");
+    }
+
+    #[test]
+    fn test_screen_size_bucket_tablet() {
+        assert_eq!(screen_size_bucket(768), "tablet");
+        assert_eq!(screen_size_bucket(810), "tablet");
+        assert_eq!(screen_size_bucket(1023), "tablet");
+    }
+
+    #[test]
+    fn test_screen_size_bucket_desktop() {
+        assert_eq!(screen_size_bucket(1024), "desktop");
+        assert_eq!(screen_size_bucket(1280), "desktop");
+        assert_eq!(screen_size_bucket(1920), "desktop");
+        assert_eq!(screen_size_bucket(2559), "desktop");
+    }
+
+    #[test]
+    fn test_screen_size_bucket_ultrawide() {
+        assert_eq!(screen_size_bucket(2560), "ultrawide");
+        assert_eq!(screen_size_bucket(3440), "ultrawide");
+        assert_eq!(screen_size_bucket(3840), "ultrawide");
+        assert_eq!(screen_size_bucket(7680), "ultrawide");
+    }
+}