Add a Map to the Conference statistics that shows the distribution of participants in Germany (#316)

Author: maximilianilzhoefer

bun.lock

@@ -55,6 +55,7 @@
 		"concurrently": "^9.2.1",
 		"convert-iso-codes": "^1.0.10",
 		"cryptr": "^6.4.0",
+		"csv-parse": "^5.4.9",
 		"csv-stringify": "^6.6.0",
 		"daisyui": "^5.5.5",
 		"date-fns": "^4.1.0",
@@ -75,6 +76,7 @@
 		"jose": "^6.1.3",
 		"jsdom": "^27.2.0",
 		"lefthook": "^1.13.6",
+		"leaflet": "^1.9.4",
 		"lodash": "^4.17.21",
 		"marked": "^15.0.12",
 		"mermaid": "^11.12.2",
@@ -95,6 +97,8 @@
 		"prisma": "^6.19.0",
 		"prisma-generator-pothos-codegen": "^0.7.1",
 		"replace-special-characters": "^1.2.7",
+		"sveaflet": "^0.1.4",
+		"sveaflet-markercluster": "^0.0.3",
 		"svelte": "^5.45.5",
 		"svelte-check": "^4.3.4",
 		"svelte-french-toast": "^1.2.0",

package.json

@@ -3270,6 +3270,7 @@ enum SortOrder {
 }
 
 type StatisticsResult {
+  addresses: [StatisticsResultAddresses!]!
   age: StatisticsResultRegisteredAge!
   countdowns: StatisticsResultCountdowns!
   diet: StatisticsResultRegisteredParticipantDiet!
@@ -3278,6 +3279,18 @@ type StatisticsResult {
   status: StatisticsResultRegisteredParticipantStatus!
 }
 
+type StatisticsResultAddresses {
+  _count: StatisticsResultAddressesCount!
+  country: String
+  zip: String
+}
+
+type StatisticsResultAddressesCount {
+  _all: Int!
+  country: Int!
+  zip: Int!
+}
+
 type StatisticsResultCountdowns {
   daysUntilConference: Int!
   daysUntilEndRegistration: Int!

schema.graphql

@@ -1,7 +1,6 @@
 import { requireToBeConferenceAdmin } from '$api/services/requireUserToBeConferenceAdmin';
 import { conferenceStats } from '$api/services/stats';
 import { db } from '$db/db';
-import { payment, postalRegistration } from '$lib/paraglide/messages';
 import { builder } from '../../builder';
 
 const dietVariations = builder.simpleObject('StatisticsResultRegisteredParticipantDietVariations', {
@@ -163,6 +162,38 @@ const StatisticsResult = builder.simpleObject('StatisticsResult', {
 					didAttend: t.int()
 				})
 			})
+		}),
+		addresses: t.field({
+			type: [
+				t.builder
+					.objectRef<{
+						country: string | null;
+						zip: string | null;
+						_count: { zip: number; country: number; _all: number };
+					}>('StatisticsResultAddresses')
+					.implement({
+						fields: (t) => ({
+							_count: t.field({
+								resolve: (parent) => parent._count,
+								type: t.builder
+									.objectRef<{
+										zip: number;
+										country: number;
+										_all: number;
+									}>('StatisticsResultAddressesCount')
+									.implement({
+										fields: (t) => ({
+											country: t.exposeInt('country'),
+											zip: t.exposeInt('zip'),
+											_all: t.exposeInt('_all')
+										})
+									})
+							}),
+							country: t.exposeString('country', { nullable: true }),
+							zip: t.exposeString('zip', { nullable: true })
+						})
+					})
+			]
 		})
 	})
 });
@@ -178,11 +209,18 @@ builder.queryFields((t) => {
 				const user = ctx.permissions.getLoggedInUserOrThrow();
 				await requireToBeConferenceAdmin({ conferenceId: args.conferenceId, user });
 
-				const { countdowns, registrationStatistics, ageStatistics, diet, gender, status } =
-					await conferenceStats({
-						db,
-						conferenceId: args.conferenceId
-					});
+				const {
+					countdowns,
+					registrationStatistics,
+					ageStatistics,
+					diet,
+					gender,
+					status,
+					addresses
+				} = await conferenceStats({
+					db,
+					conferenceId: args.conferenceId
+				});
 
 				return {
 					countdowns,
@@ -196,7 +234,8 @@ builder.queryFields((t) => {
 							value: v
 						}))
 					},
-					status
+					status,
+					addresses
 				};
 			}
 		})

src/api/resolvers/modules/conference/statistics.ts

@@ -553,12 +553,36 @@ export async function conferenceStats({
 		didAttend: conferenceStatusStats.filter((s) => s.didAttend).length
 	};
 
+	const addresses = await db.user.groupBy({
+		by: ['country', 'zip'],
+		where: {
+			OR: [
+				{ singleParticipant: { some: { conferenceId, applied: true } } },
+				{
+					delegationMemberships: {
+						some: {
+							conferenceId,
+							delegation: {
+								applied: true
+							}
+						}
+					}
+				}
+			]
+		},
+		_count: {
+			zip: true,
+			country: true,
+			_all: true
+		}
+	});
 	return {
 		countdowns,
 		registrationStatistics,
 		ageStatistics,
 		diet,
 		gender,
-		status
+		status,
+		addresses
 	};
 }

src/api/services/stats.ts

@@ -21,8 +21,9 @@
 	import DietMatrix from './widgets/DietMatrix.svelte';
 	import GenderMatrix from './widgets/GenderMatrix.svelte';
 	import Status from './widgets/Status.svelte';
+	import Maps from './widgets/Maps.svelte';
+	import { browser } from '$app/environment';
 	let { data }: { data: PageData } = $props();
-
 	onMount(() => {
 		// look for history in local storage
 		const history: StatsTypeHistoryEntry[] = JSON.parse(
@@ -67,6 +68,7 @@
 	<DietMatrix {data} />
 	<GenderMatrix {data} />
 	<Status {data} />
+	<Maps addresses={data.stats.addresses} />
 	<section class="card bg-base-200 col-span-2 shadow-sm md:col-span-12">
 		<div class="card-body">
 			<h3 class="text-xl font-bold">{m.historyComparison()}</h3>

src/routes/(authenticated)/management/[conferenceId]/stats/+page.svelte

@@ -2,9 +2,20 @@ import { graphql } from '$houdini';
 import { error } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
+export const ssr = false;
+
 const statsQuery = graphql(`
 	query ConferenceStatsQuery($conferenceID: ID!) {
 		getConferenceStatistics(conferenceId: $conferenceID) {
+			addresses {
+				country
+				zip
+				_count {
+					zip
+					country
+					_all
+				}
+			}
 			age {
 				average
 				distribution {

src/routes/(authenticated)/management/[conferenceId]/stats/+page.ts

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { Map, TileLayer, Popup, Marker } from 'sveaflet';
+	import { divIcon, point } from 'leaflet';
+	import { MarkerCluster } from 'sveaflet-markercluster';
+	import type { ConferenceStatsQuery$result } from '$houdini';
+	import type { ZipCoordinate } from '../zip-api/+server';
+	import { m } from '$lib/paraglide/messages';
+	import { page } from '$app/state';
+
+	interface Props {
+		addresses: ConferenceStatsQuery$result['getConferenceStatistics']['addresses'];
+	}
+
+	type Coordinate = {
+		zip: string;
+		country: string;
+		lat: number;
+		lng: number;
+		cached?: boolean;
+		zipCount: number;
+	};
+
+	let { addresses }: Props = $props();
+	let coordinates: Coordinate[] = $state([]);
+
+	// fetch coordinates
+	async function fetchCoordinates() {
+		// call the relative endpoint that lives under the current stats route
+		// (the endpoint file is at src/routes/(authenticated)/management/[conferenceId]/stats/zip-api/+server.ts)
+		// Build an absolute URL from the current location so we always target the
+		// stats folder (avoids browser relative-URL quirks when the path doesn't
+		// end with a trailing slash). Example result: /management/:conferenceId/stats/zip-api
+		const base = page.url.pathname.replace(/\/?$/, '/');
+		const endpoint = base + 'zip-api';
+		const res = await fetch(endpoint, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(addresses.filter((a) => a.country === 'DEU'))
+		});
+		const data: ZipCoordinate[] = await res.json();
+		return data
+			.filter((item) => item.lat != null && item.lng != null)
+			.map((item) => {
+				const addr = addresses.find((a) => a.zip === item.zip && a.country === 'DEU');
+				return {
+					...item,
+					lat: Number(item.lat),
+					lng: Number(item.lng),
+					zipCount: addr?._count.zip ?? 0,
+					country: addr?.country ?? 'N/A'
+				};
+			})
+			.filter((item) => item.country != 'N/A');
+	}
+
+	$effect(() => {
+		fetchCoordinates().then((data) => {
+			coordinates = data;
+		});
+	});
+</script>
+
+<section
+	class="card bg-primary text-primary-content col-span-2 grow shadow-sm md:col-span-12 xl:col-span-6"
+>
+	<div class="w-full h-[500px]">
+		<Map options={{ center: [51.948, 10.2651], zoom: 6 }}>
+			<TileLayer url={'https://tile.openstreetmap.org/{z}/{x}/{y}.png'} />
+			<!-- Marker Rendering -->
+			<MarkerCluster
+				options={{
+					spiderLegPolylineOptions: {
+						weight: 2,
+						color: '#f00',
+						opacity: 0.5
+					},
+					iconCreateFunction: (cluster) => {
+						const markers = cluster.getAllChildMarkers();
+						let count = 0;
+						let icon_size = ' marker-cluster-';
+						for (let i = 0; i < markers.length; i++) {
+							count += markers[i].options.data.count;
+						}
+						if (count < 10) {
+							icon_size += 'small';
+						} else if (count < 50) {
+							icon_size += 'medium';
+						} else {
+							icon_size += 'large';
+						}
+						return divIcon({
+							html: `<div><span>${count}</span></div>`,
+							className: `marker-cluster${icon_size}`,
+							iconSize: point(40, 40)
+						});
+					}
+				}}
+			>
+				{#each coordinates as item (`${item.country}_${item.zip}`)}
+					{@const markerTitle = `${m.zipCode()}: ${item.zip} (${item.zipCount})`}
+					<Marker
+						latLng={[item.lat, item.lng]}
+						options={{ title: markerTitle, data: { count: item.zipCount } }}
+					>
+						<Popup>
+							<strong>{m.zipCode()}: {item.zip}</strong><br />
+							{m.participants()}: {item.zipCount}
+						</Popup>
+					</Marker>
+				{/each}
+			</MarkerCluster>
+		</Map>
+	</div>
+</section>

src/routes/(authenticated)/management/[conferenceId]/stats/widgets/Maps.svelte

@@ -0,0 +1,73 @@
+import type { ConferenceStatsQuery$result } from '$houdini';
+import { parse } from 'csv-parse/sync';
+// This is hard coded for now
+// TODO If we expand to other countries than Germany this should be outsourced into an env variable.
+const CSV_URL =
+	'https://raw.githubusercontent.com/WZBSocialScienceCenter/plz_geocoord/refs/heads/master/plz_geocoord.csv';
+
+let zipMap: Map<string, { lat: number; lng: number }> | null = null;
+
+async function loadZipMap() {
+	if (zipMap) return zipMap; // Cache!
+	try {
+		const res = await fetch(CSV_URL);
+		if (!res.ok) {
+			throw new Error(`Failed to download ZIP CSV: ${res.status} ${res.statusText}`);
+		}
+		const csvText = await res.text();
+		const records = parse(csvText, {
+			columns: ['zip', 'lat', 'lng'],
+			skip_empty_lines: true
+		}) as { lat: string; lng: string; zip: string }[];
+
+		const map = new Map<string, { lat: number; lng: number }>();
+
+		for (const r of records) {
+			if (r.zip && r.lat && r.lng) {
+				map.set(r.zip.trim(), {
+					lat: parseFloat(r.lat),
+					lng: parseFloat(r.lng)
+				});
+			}
+		}
+
+		zipMap = map; // Cache in memory
+		return map;
+	} catch (error) {
+		console.error('Error loading ZIP map:', error);
+		throw new Error('Unable to load geographic data. Please try again later.');
+	}
+}
+
+export interface ZipCoordinate {
+	lat?: number;
+	lng?: number;
+	zip: string;
+}
+
+// Function for multiple Zips
+function getCoordinatesForZips(
+	zips: string[],
+	map: Map<string, { lat: number; lng: number }>
+): ZipCoordinate[] {
+	return zips.map((zip) => {
+		const coords = map.get(zip.trim());
+		if (!coords) return { zip };
+		return { zip, ...coords };
+	});
+}
+
+// POST-Handler
+export const POST = async ({ request }) => {
+	const body: ConferenceStatsQuery$result['getConferenceStatistics']['addresses'] =
+		await request.json();
+	const zips = body
+		.map((item: { zip: string | null }) => item.zip)
+		.filter((zip): zip is string => typeof zip === 'string' && zip.trim() !== '');
+
+	const map = await loadZipMap();
+
+	const results = getCoordinatesForZips(zips, map);
+
+	return new Response(JSON.stringify(results), { status: 200 });
+};