add screen size to the dashboard

Author: alexbruy

web/src/api/constants.ts

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

web/src/api/types.ts

@@ -23,6 +23,7 @@ export const dimensions = [
 	"utm_medium",
 	"utm_source",
 	"utm_term",
+	"screen_resolution",
 ] 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";
@@ -290,6 +290,12 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow, onSelect: ()
 			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue}</DimensionValueButton>
 		</>
 	),
+	screen_resolution: (value, onSelect) => (
+		<>
+		<MonitorIcon size={16} />
+		<DimensionValueButton onSelect={onSelect}>{value.dimensionValue || "Unknown"}</DimensionValueButton>
+		</>
+	),
 };
 
 const isValidFqdn = (fqdn: string) => {

web/src/components/project.tsx

@@ -121,6 +121,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_resolution"} query={query} onSelect={(v) => onSelectDimRow(v, "screen_resolution")} />
 				</div>
 			</Suspense>
 		</div>