chore: wip worldmap

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

src/web/webext.rs

@@ -102,7 +102,9 @@ impl<E: RustEmbed + Send + Sync> Endpoint for EmbeddedFilesEndpoint<E> {
             return Err(StatusCode::METHOD_NOT_ALLOWED.into());
         }
 
-        let file = if let Some(content) = E::get(&path) { Some(content) } else {
+        let file = if let Some(content) = E::get(&path) {
+            Some(content)
+        } else {
             path = format!("{path}/index.html");
             E::get(&path)
         };

web/package.json

@@ -12,6 +12,7 @@
 		"@explodingcamera/css": "^0.0.4",
 		"@fontsource-variable/figtree": "^5.0.21",
 		"@icons-pack/react-simple-icons": "^9.6.0",
+		"@nivo/geo": "^0.87.0",
 		"@nivo/line": "^0.87.0",
 		"@picocss/pico": "^2.0.6",
 		"@radix-ui/react-dialog": "^1.1.1",
@@ -20,6 +21,7 @@
 		"@tanstack/react-query": "^5.51.23",
 		"@types/react": "^18.3.3",
 		"@types/react-dom": "^18.3.0",
+		"@types/react-simple-maps": "^3.0.6",
 		"@uidotdev/usehooks": "^2.4.1",
 		"astro": "^4.13.4",
 		"date-fns": "^3.6.0",
@@ -29,7 +31,9 @@
 		"react": "^18.3.1",
 		"react-countup": "^6.5.3",
 		"react-dom": "^18.3.1",
+		"react-simple-maps": "^3.0.0",
 		"react-tag-autocomplete": "^7.3.0",
+		"react-tooltip": "^5.28.0",
 		"typescript": "^5.5.4"
 	},
 	"devDependencies": {

web/src/components/project.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { lazy, Suspense, useEffect, useMemo, useState } from "react";
 import styles from "./project.module.css";
 
 import {
@@ -19,6 +19,8 @@ import { BrowserIcon, MobileDeviceIcon, OSIcon, ReferrerIcon } from "./icons";
 import { LinkIcon } from "lucide-react";
 const server = typeof window === "undefined";
 
+const WorldMap = lazy(() => import("./worldmap").then((module) => ({ default: module.WorldMap })));
+
 export const Project = () => {
 	const [projectId, setProjectId] = useState<string | null>(null);
 	const [dateRange, setDateRange] = useLocalStorage<RangeName>("date-range", "last7Days");
@@ -57,6 +59,9 @@ export const Project = () => {
 				<DimTable project={data} dimension={"referrer"} metric={metric} range={resolveRange(dateRange).range} />
 				<DimTable project={data} dimension={"city"} metric={metric} range={resolveRange(dateRange).range} />
 				<DimTable project={data} dimension={"country"} metric={metric} range={resolveRange(dateRange).range} />
+				<Suspense>
+					<WorldMap />
+				</Suspense>
 			</div>
 		</div>
 	);

web/src/components/worldmap.module.css

@@ -0,0 +1,40 @@
+.reset {
+  all: unset;
+}
+
+.geo {
+  opacity: 0.9;
+  &:hover {
+    opacity: 1;
+  }
+}
+
+div.tooltip {
+  background-color: var(--pico-secondary-background);
+  padding: 0.4rem 0.5rem;
+  border-radius: 0.4rem;
+  min-width: 7rem;
+
+  h2 {
+    margin-bottom: 0.3rem;
+    font-size: 1rem;
+    color: var(--pico-contrast);
+  }
+
+  h3 {
+    font-size: 1rem;
+    display: flex;
+    justify-content: space-between;
+    margin: 0;
+    color: var(--pico-contrast);
+    font-weight: 800;
+    align-items: center;
+
+    span {
+      color: var(--pico-h3-color);
+      padding: 0.1rem 0.2rem;
+      font-weight: 500;
+      border-radius: 0.2rem;
+    }
+  }
+}

web/src/components/worldmap.tsx

@@ -0,0 +1,55 @@
+import styles from "./worldmap.module.css";
+import geo from "../../../data/geo.json";
+import { ComposableMap, Geographies, Geography } from "react-simple-maps";
+import { Tooltip } from "react-tooltip";
+import { useState } from "react";
+
+type Geo = {
+	name: string;
+	iso: string;
+};
+
+export const WorldMap = () => {
+	const [currentGeo, setCurrentGeo] = useState<Geo | null>(null);
+
+	return (
+		<div className={styles.worldmap} data-tooltip-float={true} data-tooltip-id="map">
+			<ComposableMap projection="geoMercator">
+				<Geographies geography={geo}>
+					{({ geographies }) =>
+						geographies.map((geo) => {
+							console.log(geo);
+
+							return (
+								<Geography
+									className={styles.geo}
+									onMouseEnter={() => {
+										setCurrentGeo({
+											name: geo.properties.name,
+											iso: geo.properties.iso,
+										});
+									}}
+									onMouseLeave={() => {
+										setCurrentGeo(null);
+									}}
+									key={geo.rsmKey}
+									geography={geo}
+								/>
+							);
+						})
+					}
+				</Geographies>
+			</ComposableMap>
+			<Tooltip id="map" className={styles.reset} classNameArrow={styles.reset} disableStyleInjection>
+				{currentGeo && (
+					<div className={styles.tooltip} data-theme="dark">
+						<h2>{currentGeo.name}</h2>
+						<h3>
+							{currentGeo.iso} <span>asdf</span>
+						</h3>
+					</div>
+				)}
+			</Tooltip>
+		</div>
+	);
+};

web/src/global.css

@@ -1,5 +1,6 @@
 @import "@explodingcamera/css/all.css" layer(base);
 @import "@picocss/pico/css/pico.lime.min.css" layer(pico);
+@import "react-tooltip/dist/react-tooltip.css" layer(tooltip);
 
 @layer pico {
   :root {