feat: add UTM dimensions to ui

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

data/licenses-cargo.json

@@ -10,6 +10,18 @@
     display: flex;
     gap: 1rem;
     margin-bottom: 1rem;
+
+    .dimensionSelect {
+      all: unset;
+      user-select: none;
+      appearance: menulist;
+      cursor: pointer;
+      margin-right: auto;
+      outline: none;
+      padding-bottom: 0.2rem;
+      padding-left: 0.2rem;
+      box-shadow: none !important;
+    }
   }
 
   .tabsList > button {

data/licenses-npm.json

@@ -1,5 +1,5 @@
 import * as Tabs from "@radix-ui/react-tabs";
-import { LinkIcon, SquareArrowOutUpRightIcon } from "lucide-react";
+import { ArrowDownIcon, LinkIcon, PinIcon, SquareArrowOutUpRightIcon } from "lucide-react";
 import styles from "./dimensions.module.css";
 
 import { type Dimension, type DimensionTableRow, dimensionNames, metricNames, useDimension } from "../../api";
@@ -9,6 +9,7 @@ import { cls, countryCodeToFlag, formatHost, formatPath, getHref, tryParseUrl }
 import { DetailsModal } from "./modal";
 import { formatMetricVal } from "../../utils";
 import type { ProjectQuery } from "../project";
+import { useState } from "react";
 
 export const cardStyles = styles.card;
 
@@ -46,6 +47,67 @@ export const DimensionTabsCard = ({
 	);
 };
 
+export const DimensionDropdownCard = ({
+	dimensions,
+	query,
+	onSelect,
+}: {
+	dimensions: Dimension[];
+	query: ProjectQuery;
+	onSelect: (value: DimensionTableRow, dimension: Dimension) => void;
+}) => {
+	return (
+		<article className={styles.card}>
+			<DimensionDropdown dimensions={dimensions} query={query} onSelect={onSelect} />
+		</article>
+	);
+};
+
+export const DimensionDropdown = ({
+	dimensions,
+	query,
+	onSelect,
+}: {
+	dimensions: Dimension[];
+	query: ProjectQuery;
+	onSelect: (value: DimensionTableRow, dimension: Dimension) => void;
+}) => {
+	const [selectedDimension, setSelectedDimension] = useState(dimensions[0]);
+
+	return (
+		<Tabs.Root
+			className={styles.tabs}
+			value={selectedDimension}
+			onValueChange={(value) => setSelectedDimension(value as Dimension)}
+		>
+			<Tabs.List className={styles.tabsList}>
+				<select
+					className={styles.dimensionSelect}
+					value={selectedDimension}
+					onChange={(e) => setSelectedDimension(e.target.value as Dimension)}
+				>
+					{dimensions.map((dimension) => (
+						<option key={dimension} value={dimension}>
+							{dimensionNames[dimension]}
+						</option>
+					))}
+				</select>
+				{/* {Object.entries(dimensions).map(([key, value]) => (
+					<Tabs.Trigger key={key} value={value}>
+						{dimensionNames[value]}
+					</Tabs.Trigger>
+				))} */}
+				<div>{metricNames[query.metric]}</div>
+			</Tabs.List>
+			{dimensions.map((dimension) => (
+				<Tabs.Content key={dimension} value={dimension} className={styles.tabsContent}>
+					<DimensionTable dimension={dimension} query={query} onSelect={(value) => onSelect(value, dimension)} />
+				</Tabs.Content>
+			))}
+		</Tabs.Root>
+	);
+};
+
 export const DimensionTabs = ({
 	dimensions,
 	query,
@@ -125,6 +187,36 @@ const DimensionValueButton = ({
 );
 
 const dimensionLabels: Record<Dimension, (value: DimensionTableRow, onSelect: () => void) => React.ReactNode> = {
+	utm_campaign: (value, onSelect) => (
+		<>
+			<PinIcon size={24} />
+			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue || "Unknown/None"}</DimensionValueButton>
+		</>
+	),
+	utm_content: (value, onSelect) => (
+		<>
+			<PinIcon size={24} />
+			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue || "Unknown/None"}</DimensionValueButton>
+		</>
+	),
+	utm_medium: (value, onSelect) => (
+		<>
+			<PinIcon size={24} />
+			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue || "Unknown/None"}</DimensionValueButton>
+		</>
+	),
+	utm_source: (value, onSelect) => (
+		<>
+			<PinIcon size={24} />
+			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue || "Unknown/None"}</DimensionValueButton>
+		</>
+	),
+	utm_term: (value, onSelect) => (
+		<>
+			<PinIcon size={24} />
+			<DimensionValueButton onSelect={onSelect}>{value.dimensionValue || "Unknown/None"}</DimensionValueButton>
+		</>
+	),
 	platform: (value, onSelect) => (
 		<>
 			<OSIcon os={value.dimensionValue} size={24} />

web/src/components/dimensions/dimensions.module.css

@@ -14,7 +14,7 @@ import { SelectRange } from "./project/range";
 import { ProjectHeader } from "./project/project";
 import { SelectMetrics } from "./project/metric";
 import { SelectFilters } from "./project/filter";
-import { DimensionCard, DimensionTabs, DimensionTabsCard, cardStyles } from "./dimensions";
+import { DimensionCard, DimensionDropdownCard, DimensionTabs, DimensionTabsCard, cardStyles } from "./dimensions";
 
 const WorldMap = lazy(() => import("./worldmap").then((module) => ({ default: module.WorldMap })));
 
@@ -102,7 +102,11 @@ export const Project = () => {
 				</article>
 				<div className={styles.tables}>
 					<DimensionTabsCard dimensions={["url", "fqdn"]} query={query} onSelect={onSelectDimRow} />
-					<DimensionCard dimension={"referrer"} query={query} onSelect={(v) => onSelectDimRow(v, "referrer")} />
+					<DimensionDropdownCard
+						dimensions={["referrer", "utm_source", "utm_medium", "utm_campaign", "utm_content", "utm_term"]}
+						query={query}
+						onSelect={onSelectDimRow}
+					/>
 					<GeoCard query={query} onSelect={onSelectDimRow} />
 					<DimensionTabsCard dimensions={["platform", "browser"]} query={query} onSelect={onSelectDimRow} />
 					<DimensionCard dimension={"mobile"} query={query} onSelect={(v) => onSelectDimRow(v, "mobile")} />

web/src/components/dimensions/index.tsx

@@ -75,6 +75,26 @@ const filters = {
 		invertable: true,
 		filterTypes: ["equal", "contains"],
 	},
+	utm_campaign: {
+		invertable: true,
+		filterTypes: ["equal", "contains"],
+	},
+	utm_content: {
+		invertable: true,
+		filterTypes: ["equal", "contains"],
+	},
+	utm_medium: {
+		invertable: true,
+		filterTypes: ["equal", "contains"],
+	},
+	utm_source: {
+		invertable: true,
+		filterTypes: ["equal", "contains"],
+	},
+	utm_term: {
+		invertable: true,
+		filterTypes: ["equal", "contains"],
+	},
 	mobile: {
 		custom: true,
 		displayValue: (filter: DimensionFilter) => (filter.filterType === "is_true" ? "Mobile" : "Desktop"),