add measure page

essays/turso.md

@@ -0,0 +1,5 @@
+# Turso commands
+
+```
+turso db shell <libsql://db-url.io>
+```

src/lib/components/Heatmap/Heatmap.svelte

@@ -9,13 +9,13 @@
 	let divElement: HTMLDivElement;
 
 	const currentDate = new Date();
-	currentDate.setMonth(currentDate.getMonth() - 3);
+	currentDate.setMonth(currentDate.getMonth() - 12);
 	onMount(() => {
 		cal = new CalHeatmap();
 		cal.paint(
 			{
 				itemSelector: divElement,
-				range: 4, // show 6 months
+				range: 13, // show 13 months (current month + 12 months back)
 				domain: {
 					type: 'month',
 					gutter: 4,
@@ -35,7 +35,7 @@
 				scale: {
 					color: {
 						type: 'threshold',
-						range: ['#14432a', '#166b34', '#37a446', '#4dd05a'],
+						range: ['#4dd05a', '#37a446', '#166b34', '#14432a'],
 						domain: [10, 20, 30]
 					}
 				}
@@ -57,7 +57,10 @@
 <div bind:this={divElement}></div>
 
 <style>
-	#ch-tooltip {
+	/* #ch-tooltip {
 		z-index: 100 !important;
+	} */
+	.cal-heatmap.future {
+		fill: red;
 	}
 </style>

src/lib/components/PrimaryNav.svelte

@@ -11,11 +11,12 @@
 	import { page } from '$app/stores';
 	import Google from '$lib/components/Buttons/Google.svelte';
 	import { ROUTES } from '$lib/routes.util';
-	import Heatmap from '$lib/components/Heatmap/Heatmap.svelte';
+	import BodyMeasures from 'virtual:icons/arcticons/body-measures';
 
 	const signedInLinks = [
 		{ href: '/record', text: 'record', icon: JotTextEditor },
 		{ href: '/revise', text: 'revise', icon: SoloLearn },
+		{ href: '/measure', text: 'measure', icon: BodyMeasures },
 		{ href: '/learn', text: 'generate with ai', icon: BrainF }
 	];
 	const signedOuLinks = [
@@ -30,7 +31,6 @@
 	];
 
 	export let user;
-	export let groupedInfo;
 
 	let links;
 	if (user) {
@@ -85,11 +85,4 @@
 			<Logout />
 		{/if}
 	</div>
-	<div class="hidden sm:mx-auto sm:flex sm:h-full sm:items-end sm:pb-4">
-		<div class="flex justify-center">
-			{#await groupedInfo then data}
-				<Heatmap {data} />
-			{/await}
-		</div>
-	</div>
 </header>

src/lib/db/tables/card.table.ts

@@ -35,16 +35,16 @@ export const getCardsOrderByCreated = async (userId: string) => {
 	return data
 }
 
-// export const getCardsGroupedByCreated = async (userId: string) => {
-// 	console.time('getCardsGroupedByCreated')
-// 	const data = await db.select({ date: sql`DATE(${activityTable.createdAt}, 'unixepoch')`, count: count() }).from(activityTable).where(and(eq(activityTable.userId, userId), eq(activityTable.action, 'INSERT'))).groupBy(sql`DATE(${activityTable.createdAt}, 'unixepoch')`)
-// 	console.timeEnd('getCardsGroupedByCreated')
-// 	return data
-// }
+export const getCardsRecorded = async (userId: string) => {
+	console.time('getCardsGroupedByCreated')
+	const data = await db.select({ date: activityTable.createdAt }).from(activityTable).where(and(eq(activityTable.userId, userId), eq(activityTable.action, 'INSERT')))
+	console.timeEnd('getCardsGroupedByCreated')
+	return data
+}
 
-export const getCardsGroupedByUpdated = async (userId: string) => {
+export const getCardsReviewed = async (userId: string) => {
 	console.time('getCardsGroupedByUpdated')
-	const data = await db.select({ date: sql`DATE(${activityTable.createdAt}, 'unixepoch')`, count: count() }).from(activityTable).where(and(eq(activityTable.userId, userId), eq(activityTable.action, 'UPDATE'))).groupBy(sql`DATE(${activityTable.createdAt}, 'unixepoch')`)
+	const data = await db.select({ date: activityTable.createdAt }).from(activityTable).where(and(eq(activityTable.userId, userId), eq(activityTable.action, 'UPDATE')))
 	console.timeEnd('getCardsGroupedByUpdated')
 	return data
 }

src/routes/(protected)/measure/+page.server.ts

@@ -0,0 +1,11 @@
+import { getCardsRecorded, getCardsReviewed } from '$lib/db/tables/card.table.js';
+
+export async function load({ locals }) {
+	const reviewedInfo = getCardsReviewed(locals.user!.id)
+	const recordedInfo = getCardsRecorded(locals.user!.id)
+
+	return {
+		reviewedInfo,
+		recordedInfo
+	};
+}

src/routes/(protected)/measure/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+	import HeatmapCard from './HeatmapCard.svelte';
+	import Streak from './Streak.svelte';
+	export let data;
+</script>
+
+<div class="mx-auto mt-10 max-w-xl">
+	{#await data.reviewedInfo then info}
+		<div class="mb-10">
+			<Streak data={info} />
+		</div>
+		<HeatmapCard title={`${info.length} cards reviewed in last one year`} data={info} />
+	{/await}
+	{#await data.recordedInfo then info}
+		<HeatmapCard title={`${info.length} cards created in last one year`} data={info} />
+	{/await}
+</div>

src/routes/(protected)/measure/HeatmapCard.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	export let data = [];
+	export let title;
+	import Heatmap from '$lib/components/Heatmap/Heatmap.svelte';
+
+	function convertDates(inputArray) {
+		const dateCounts = {};
+
+		inputArray.forEach((item) => {
+			const localDate = new Date(item.date).toLocaleDateString('en-CA');
+
+			if (dateCounts[localDate]) {
+				dateCounts[localDate]++;
+			} else {
+				dateCounts[localDate] = 1;
+			}
+		});
+
+		const outputArray = Object.keys(dateCounts).map((date) => ({
+			date: date,
+			count: dateCounts[date]
+		}));
+
+		return outputArray;
+	}
+</script>
+
+<div>
+	<h2>{title}</h2>
+	<div class="my-4">
+		<Heatmap data={convertDates(data)} />
+	</div>
+</div>

src/routes/(protected)/measure/Streak.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	export let data = [];
+
+	function calculateStreak(inputArray) {
+		const dateSet = new Set(
+			inputArray.map((item) => new Date(item.date).toLocaleDateString('en-CA'))
+		);
+		console.log(dateSet);
+
+		const currentDate = new Date();
+
+		let streak = 0;
+
+		while (dateSet.has(currentDate.toLocaleDateString('en-CA'))) {
+			streak++;
+			currentDate.setDate(currentDate.getDate() - 1);
+		}
+
+		return streak;
+	}
+</script>
+
+<div>
+	<h2 class="text-center">Current Streak: <span class="text-xl">{calculateStreak(data)}</span></h2>
+</div>

src/routes/(protected)/record/+page.server.ts

@@ -1,28 +1,20 @@
-import { redirect } from "@sveltejs/kit";
 import { superValidate } from "sveltekit-superforms";
 import { zod } from "sveltekit-superforms/adapters";
 
 import { ROUTES } from "$lib/routes.util.js";
 
 import { cardAddSchema } from "$lib/schemas.js";
-import { sessionExists } from "$lib/common.util.js";
 import { addAction, deleteAction } from "$lib/actions/card.action.js";
 import { getCardsOrderByCreated } from "$lib/db/tables/card.table.js";
 
 
 export async function load({ locals }) {
-	if (!sessionExists(locals)) {
-		redirect(302, ROUTES.LOGIN)
-	}
-
 	const addForm = await superValidate(zod(cardAddSchema));
-	const cards = await getCardsOrderByCreated(locals.user.id)
-	// const groupedInfo = await getCardsGroupedByCreated(locals.user.id)
+	const cards = await getCardsOrderByCreated(locals.user!.id)
 
 	return {
 		addForm,
 		cards,
-		// groupedInfo
 	};
 }
 

src/routes/(protected)/record/+page.svelte

@@ -1,14 +1,9 @@
 <script lang="ts">
-	import Heatmap from '$lib/components/Heatmap/Heatmap.svelte';
 	import AddNewCard from './AddNewCard.svelte';
 	import NewCards from './NewCards.svelte';
 	export let data;
 </script>
 
 <AddNewCard formData={data.addForm} />
 
-<NewCards cards={data.cards} />
-
-<div class="my-20 flex justify-center">
-	<Heatmap data={data.groupedInfo} />
-</div>
+<NewCards cards={data.cards} />

src/routes/(protected)/revise/+page.server.ts

@@ -7,7 +7,7 @@ import { ROUTES } from "$lib/routes.util.js";
 import { cardReviewSchema } from "$lib/schemas.js";
 import { sessionExists } from "$lib/common.util.js";
 import { deleteAction, reviewAction } from "$lib/actions/card.action.js";
-import { getCardsGroupedByUpdated, getCardsOrderByNextPractice } from "$lib/db/tables/card.table.js";
+import { getCardsOrderByNextPractice } from "$lib/db/tables/card.table.js";
 
 
 export async function load({ locals }) {
@@ -17,12 +17,10 @@ export async function load({ locals }) {
 
 	const reviewForm = superValidate(zod(cardReviewSchema));
 	const cards = getCardsOrderByNextPractice(locals.user.id)
-	const groupedInfo = getCardsGroupedByUpdated(locals.user.id)
 
 	return {
 		reviewForm,
 		cards,
-		groupedInfo
 	};
 }
 

src/routes/(protected)/revise/+page.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
-	import Heatmap from '$lib/components/Heatmap/Heatmap.svelte';
 	import CardReview from '$lib/components/Cards/CardReview.svelte';
 	export let data;
 </script>
 
 {#await data.cards then cards}
 	<CardReview {cards} />
 {/await}
-
-{#await data.groupedInfo then groupedInfo}
-	<div class="my-20 flex justify-center">
-		<Heatmap data={groupedInfo} />
-	</div>
-{/await}

src/routes/+layout.svelte

@@ -21,7 +21,7 @@
 	$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : '';
 </script>
 
-<PrimaryNav user={data?.user} groupedInfo={data?.groupedInfo} />
+<PrimaryNav user={data?.user} />
 <div class="sm:ml-48">
 	<slot></slot>
 </div>