feat(activities): cool chart

1 files changed, 45 insertions, 0 deletions

diff --git a/src/lib/Tools/ActivityHistory.svelte b/src/lib/Tools/ActivityHistory.svelte
index 122a7513..57037f15 100644
--- a/src/lib/Tools/ActivityHistory.svelte
+++ b/src/lib/Tools/ActivityHistory.svelte
@@ -16,6 +16,7 @@
 
 	let activityHistoryData: Promise<ActivityHistoryEntry[]>;
 	let currentUserIdentity = { name: '', id: -1 };
+	let baseHue = Math.floor(Math.random() * 360);
 
 	onMount(async () => {
 		clearAllParameters();
@@ -34,6 +35,12 @@
 
 	// 	return date;
 	// };
+
+	const gradientColour = (amount: number, maxAmount: number, baseHue: number) => {
+		const lightness = 100 - Math.round((amount / maxAmount) * 50);
+
+		return `hsl(${baseHue}, 100%, ${lightness}%)`;
+	};
 </script>
 
 <blockquote>
@@ -49,6 +56,26 @@
 		{#if activities === undefined}
 			Loading ...
 		{:else}
+			{@const highestActivity = Math.max(...activities.map((activity) => activity.amount))}
+
+			<div class="grid">
+				{#each activities as activity}
+					<div
+						class="grid-item"
+						style="background-color: {gradientColour(activity.amount, highestActivity, baseHue)}"
+						on:click={() => (baseHue = Math.floor(Math.random() * 360))}
+						on:keydown={() => {}}
+						role="button"
+						tabindex="0"
+						title={`Date: ${new Date(activity.date * 1000).toLocaleDateString()}\nAmount: ${
+							activity.amount
+						}`}
+					/>
+				{/each}
+			</div>
+
+			<p />
+
 			<ul>
 				{#each fillMissingDays(activities) as activity}
 					{#if activity.amount === 0}
@@ -63,3 +90,21 @@
 		{/if}
 	{/await}
 {/if}
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(52, 1fr);
+		grid-template-rows: repeat(7, 1fr);
+		/* gap: 2px; */
+		grid-auto-flow: column;
+		width: fit-content;
+	}
+	.grid-item {
+		width: 20px;
+		height: 20px;
+		/* width: 3.25vw; */
+		/* height: 3.25vw; */
+		/* border: 1px solid #ccc; */
+	}
+</style>