feat: add spendings per category graphs

my-app/package.json

@@ -33,7 +33,8 @@
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3",
-		"vitest": "^1.2.0"
+		"vitest": "^1.2.0",
+		"chart.js": "^4.0.0"
 	},
 	"type": "module",
 	"dependencies": {

my-app/src/lib/server/api.ts

@@ -89,6 +89,5 @@ export const categoryService = {
 		data.id > 0
 			? put(`category/${data.id}`, data, getAuthHeader(cookies))
 			: post('category', data, getAuthHeader(cookies)),
-	get: (id: Id, cookies: Cookies) => get(`category/${id}`, getAuthHeader(cookies)),
 	list: (groupId: Id, cookies: Cookies) => get(`category/${groupId}`, getAuthHeader(cookies))
 };

my-app/src/routes/categories/details/[[id=integer]]/+page.server.ts

@@ -7,7 +7,7 @@ export const load: PageServerLoad = async ({ params, url, cookies }) => {
 	const group_id = url.searchParams.get('groupId') || '';
 	const id = Number(params.id) || 0;
 	const category: Category = id
-		? await categoryService.get(id, cookies)
+		? await categoryService.list(id, cookies)
 		: { id: 0, group_id, name: '', description: '', strategy: '' };
 	const groups: Group[] = await groupService.list(cookies);
 	return { category, groups };

my-app/src/routes/groups/graphs/[[id=integer]]/+page.server.ts

@@ -0,0 +1,26 @@
+import { categoryService, groupService, spendingService } from '$lib/server/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params, cookies }) => {
+	const id = Number(params.id) || 0;
+	const group: Group = id
+		? await groupService.get(id, cookies)
+		: { name: '', description: '', id: 0, owner_id: 0, is_archived: false };
+	const categories = await categoryService.list(id, cookies);
+	const spendings = await spendingService.list(id, cookies);
+	const graphData = computePerCategorySpending(categories, spendings);
+	return { group, graphData };
+};
+
+function computePerCategorySpending(categories: Category[], spendings: Spending[]) {
+	const categoryMap = new Map<string, number>(categories.map((category) => [category.name, 0]));
+	spendings.forEach(({ amount }) => {
+		const randomChoice = Math.floor(Math.random() * categories.length);
+		const categoryName = categories[randomChoice].name;
+		const acc = categoryMap.get(categoryName)!;
+		categoryMap.set(categoryName, acc + amount);
+	});
+	const labels = Array.from(categoryMap.keys());
+	const values = Array.from(categoryMap.values());
+	return { labels, values };
+}

my-app/src/routes/groups/graphs/[[id=integer]]/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { title } from '$lib';
+	import type { PageData } from './$types';
+	import type { Action } from 'svelte/action';
+	import { Chart } from 'chart.js/auto';
+
+	export let data: PageData;
+
+	export const loadGraph: Action<HTMLCanvasElement> = (canvas) => {
+		const { labels, values } = data?.graphData;
+		const label = 'Gastos por categoría';
+		// NOTE: this is to have each bar be a different color
+		const datasets = values.map((v, i) => {
+			let data = Array(values.length).fill(0);
+			data[i] = v;
+			return { label, data };
+		});
+
+		const chart = new Chart(canvas, {
+			type: 'bar',
+			options: {
+				plugins: {
+					legend: { display: false },
+					colors: { enabled: true, forceOverride: true }
+				},
+				scales: { x: { stacked: true }, y: { stacked: true } }
+			},
+			data: { labels, datasets }
+		});
+		return { destroy: () => chart.destroy() };
+	};
+</script>
+
+<svelte:head>
+	<title>{title} - Gráficos de finanzas</title>
+</svelte:head>
+
+<nav aria-label="breadcrumb">
+	<ul>
+		<li><a href="/groups">Grupos</a></li>
+		<li><a href="/groups/movements/{data.group.id}">{data.group.name}</a></li>
+		<li>Gráficos de finanzas</li>
+	</ul>
+</nav>
+
+<header class="row">
+	<div>
+		<h2>Gráficos de finanzas</h2>
+		<p>{data.group.description}</p>
+	</div>
+</header>
+
+<div style="width: 600px;"><canvas use:loadGraph></canvas></div>

my-app/src/routes/groups/movements/[id=integer]/+page.svelte

@@ -22,7 +22,7 @@
 
 <header class="row">
 	<div>
-		<h2>Moovimietos</h2>
+		<h2>Moovimientos</h2>
 		<p>{data.group.description}</p>
 	</div>
 	<div class="row">
@@ -31,6 +31,7 @@
 			<summary role="button" class="outline">Resumenes</summary>
 			<ul>
 				<li><a href="/groups/balance/{data.group.id}">Estado de cuenta grupal</a></li>
+				<li><a href="/groups/graphs/{data.group.id}">Gráficos de finanzas</a></li>
 			</ul>
 		</details>
 		<details class="dropdown" style="margin-left: 10px">

my-app/src/types.d.ts

@@ -12,9 +12,9 @@ declare global {
 		is_archived: boolean;
 	};
 	type Category = {
-		id: Id;
-		group_id: string; // ?
+		// NOTE: [name, group_id] is primary key
 		name: string;
+		group_id: string;
 		description: string;
 		strategy: string;
 	};