add screen size to the frontend dashboard

Author: alexbruy

web/src/api/constants.ts

@@ -24,6 +24,7 @@ export const dimensionNames: Record<Dimension, string> = {
 	utm_medium: "UTM Medium",
 	utm_source: "UTM Source",
 	utm_term: "UTM Term",
+	screen_size: "Screen Size",
 };
 
 export const filterNames: Record<DimensionFilter["filterType"], string> = {

web/src/api/types.ts

@@ -25,6 +25,7 @@ export const dimensions = [
 	"utm_medium",
 	"utm_source",
 	"utm_term",
+	"screen_size",
 ] as const satisfies Dimension[];
 
 export const filterTypes = [

web/src/components/dimensions/index.tsx

@@ -1,5 +1,5 @@
 import { Tabs } from "@base-ui/react/tabs";
-import { LinkIcon, PinIcon, SquareArrowOutUpRightIcon } from "lucide-react";
+import { LinkIcon, MonitorIcon, PinIcon, SquareArrowOutUpRightIcon } from "lucide-react";
 import styles from "./dimensions.module.css";
 
 import { type Dimension, type DimensionTableRow, dimensionNames, metricNames, useDimension } from "../../api";
@@ -298,6 +298,12 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow, onSelect: ()
 			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue}</DimensionValueButton>
 		</>
 	),
+	screen_size: (value, onSelect) => (
+		<>
+			<MonitorIcon size={16} />
+			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue || "Unknown"}</DimensionValueButton>
+		</>
+	),
 };
 
 const isValidFqdn = (fqdn: string) => {

web/src/components/project.tsx

@@ -138,6 +138,7 @@ export const Project = () => {
 					<GeoCard query={query} onSelect={onSelectDimRow} />
 					<DimensionTabsCard dimensions={["platform", "browser"]} query={query} onSelect={onSelectDimRow} />
 					<DimensionCard dimension={"mobile"} query={query} onSelect={(v) => onSelectDimRow(v, "mobile")} />
+					<DimensionCard dimension={"screen_size"} query={query} onSelect={(v) => onSelectDimRow(v, "screen_size")} />
 				</div>
 			</Suspense>
 		</div>