Heatmap

src/routes/taxi/availability/+page.server.ts

@@ -5,6 +5,11 @@ import type { Actions, RequestEvent } from './$types';
 import { fail } from '@sveltejs/kit';
 import { msg } from '$lib/msg';
 import { readInt } from '$lib/server/util/readForm';
+import type { UnixtimeMs } from '$lib/util/UnixtimeMs';
+import type { Range } from './Range';
+import { split } from './Range';
+import { groupBy } from '$lib/util/groupBy';
+import { Interval } from '$lib/server/util/interval';
 
 export async function load(event) {
 	const companyId = event.locals.session?.companyId;
@@ -56,9 +61,68 @@ export async function load(event) {
 		company.lat !== null &&
 		company.lng !== null;
 
+	// HEATMAP
+	const heatmapInfos = await db
+		.selectFrom('company as company1')
+		.innerJoin('company as company2', 'company1.zone', 'company2.zone')
+		.innerJoin('vehicle', 'company2.id', 'vehicle.company')
+		.innerJoin('availability', 'vehicle.id', 'availability.vehicle')
+		.where('availability.startTime', '<', toTime.getTime())
+		.where('availability.endTime', '>', fromTime.getTime())
+		.where('company1.id', '=', companyId)
+		.where('company2.id', '!=', companyId)
+		.select([
+			'availability.startTime',
+			'availability.endTime',
+			'availability.vehicle',
+			'vehicle.company'
+		])
+		.execute();
+
+	const mergedheatinfos = groupBy(
+		heatmapInfos,
+		(a) => a.vehicle,
+		(a) => new Interval(a.startTime, a.endTime)
+	);
+	mergedheatinfos.forEach((heatmap, vehicle) =>
+		mergedheatinfos.set(vehicle, Interval.merge(heatmap))
+	);
+
+	type heatinfo = {
+		cell: Range;
+		heat: number;
+	};
+	const heatarray: heatinfo[] = [];
+	const isAInsideB = (rangeA: Range, Bstart: UnixtimeMs, Bend: UnixtimeMs) => {
+		return (
+			rangeA.startTime >= Bstart &&
+			rangeA.startTime < Bend &&
+			rangeA.endTime >= Bstart &&
+			rangeA.endTime <= Bend
+		);
+	};
+	const range: Range = { startTime: fromTime.getTime(), endTime: toTime.getTime() };
+	const hours = split(range, 60);
+	let heatcount = 0;
+	for (const hour of hours) {
+		const cell = split(hour, 15);
+		for (const onecell of cell) {
+			mergedheatinfos.forEach((heatIntervals) => {
+				for (const interval of heatIntervals) {
+					if (isAInsideB(onecell, interval.startTime, interval.endTime)) {
+						heatcount++;
+					}
+				}
+			});
+			heatarray.push({ cell: onecell, heat: heatcount });
+			heatcount = 0;
+		}
+	}
+
 	return {
 		tours: await tours,
 		vehicles: await vehicles,
+		heatarray,
 		utcDate,
 		companyDataComplete,
 		companyCoordinates: companyDataComplete

src/routes/taxi/availability/+page.svelte

@@ -26,17 +26,14 @@
 	import type { Tours } from '$lib/server/db/getTours';
 	import Message from '$lib/ui/Message.svelte';
 	import type { UnixtimeMs } from '$lib/util/UnixtimeMs';
+	import type { Range } from './Range';
+	import { split } from './Range';
 	import type { LngLatLike } from 'maplibre-gl';
 
 	const { data, form } = $props();
 
 	type Vehicle = NonNullable<typeof data.vehicles>[0];
 
-	type Range = {
-		startTime: UnixtimeMs;
-		endTime: UnixtimeMs;
-	};
-
 	// ===
 	// API
 	// ---
@@ -133,18 +130,6 @@
 
 	const isAvailable = (v: Vehicle, cell: Range) => v.availability.some((a) => overlaps(a, cell));
 
-	const split = (range: Range, size: number): Array<Range> => {
-		let cells: Array<Range> = [];
-		let prev = new Date(range.startTime);
-		let t = new Date(range.startTime);
-		t.setMinutes(t.getMinutes() + size);
-		for (; t.getTime() <= range.endTime; t.setMinutes(t.getMinutes() + size)) {
-			cells.push({ startTime: prev.getTime(), endTime: t.getTime() });
-			prev = new Date(t);
-		}
-		return cells;
-	};
-
 	// =========
 	// Selection
 	// ---------
@@ -299,6 +284,45 @@
 			return 'bg-yellow-100';
 		}
 	};
+
+	const heatmapColor = (cell: Range) => {
+		let max = 20;
+		for (let heat of data.heatarray) {
+			if (heat.cell.startTime == cell.startTime && heat.cell.endTime == cell.endTime) {
+				// logarithmisch für stark schwankende Werte:
+				//let normval = Math.floor(10 * (Math.log(heat.heat + 1)) / Math.log(max + 1));
+				let normval = Math.floor((heat.heat / max) * 10);
+				normval = heat.heat > 0 ? Math.max(1, normval) : 0;
+				switch (normval) {
+					case 0:
+						return;
+					case 1:
+						return 'bg-rose-100';
+					case 2:
+						return 'bg-rose-200';
+					case 3:
+						return 'bg-rose-300';
+					case 4:
+						return 'bg-rose-400';
+					case 5:
+						return 'bg-rose-500';
+					case 6:
+						return 'bg-rose-600';
+					case 7:
+						return 'bg-rose-700';
+					case 8:
+						return 'bg-rose-800';
+					case 9:
+						return 'bg-rose-900';
+					case 10:
+						return 'bg-rose-950';
+					default:
+						return;
+				}
+			}
+		}
+		return;
+	};
 </script>
 
 <svelte:window onmouseup={() => selectionFinish()} />
@@ -395,6 +419,37 @@
 					{/each}
 				</tr>
 			{/each}
+			<tr>
+				<td
+					class="h-full pr-2 align-middle font-mono text-sm font-semibold leading-none tracking-tight"
+				>
+					<HoverCard.Root>
+						<HoverCard.Trigger>{'Auslastung'}</HoverCard.Trigger>
+						<HoverCard.Content>
+							<!-- Anpassen, wenn logarithmische Skalierung verwendet wird. -->
+							Eine Heatmap, die die Verfügbarkeiten der anderen Taxiunternehmer anzeigt. Farbcodierung:
+							linear, [1, 10]
+						</HoverCard.Content>
+					</HoverCard.Root>
+				</td>
+				{#each split(range, 60) as x}
+					<td>
+						<table class="w-full">
+							<tbody>
+								<tr>
+									{#each split(x, 15) as cell}
+										<td>
+											<div
+												class={['w-8', 'h-8', 'border', 'rounded-md', heatmapColor(cell)].join(' ')}
+											></div>
+										</td>
+									{/each}
+								</tr>
+							</tbody>
+						</table>
+					</td>
+				{/each}
+			</tr>
 		</tbody>
 	</table>
 {/snippet}

src/routes/taxi/availability/Range.ts

@@ -0,0 +1,18 @@
+import type { UnixtimeMs } from '$lib/util/UnixtimeMs';
+
+export type Range = {
+	startTime: UnixtimeMs;
+	endTime: UnixtimeMs;
+};
+
+export function split(range: Range, size: number): Array<Range> {
+	const cells: Array<Range> = [];
+	let prev = new Date(range.startTime);
+	const t = new Date(range.startTime);
+	t.setMinutes(t.getMinutes() + size);
+	for (; t.getTime() <= range.endTime; t.setMinutes(t.getMinutes() + size)) {
+		cells.push({ startTime: prev.getTime(), endTime: t.getTime() });
+		prev = new Date(t);
+	}
+	return cells;
+}