some more updates

src/routes/+page.svelte

@@ -8,20 +8,23 @@
 	let underAllocatedTrans = $derived(data.underAllocatedTrans);
 	let budgets = $derived(data.budgets);
 	let budgetTransactions = $derived(data.budgetTransactions);
-	let last30days = $derived(data.last30DaysTransactionsSums);
+	let last30days = $derived(data.last30DaysTransactionsSums.reverse());
+
+	$inspect(last30days);
 
 	let chartData = $derived(
-		last30days
-			.reduce((acc, curr) => [...acc, acc[acc.length - 1] + Number(curr.sum)], [Number(total)])
-			.reverse()
-	);
-	let chartDates = $derived(
-		[
-			'now',
-			...last30days.map((day) => `${day.date.getMonth() + 1}/${day.date.getDate()}`)
-		].reverse()
+		last30days.reduce(
+			(acc, curr) => [...acc, acc[acc.length - 1] + Number(curr.sum)],
+			[Number(total)]
+		)
 	);
 
+	$inspect(chartData);
+	let chartDates = $derived([
+		'now',
+		...last30days.map((day) => `${day.date.getMonth() + 1}/${day.date.getDate()}`)
+	]);
+
 	const option = $derived({
 		xAxis: {
 			type: 'category',
@@ -33,7 +36,23 @@
 		series: [
 			{
 				data: chartData,
-				type: 'line'
+				type: 'line',
+				label: {
+					show: false,
+					position: 'top',
+					formatter: (params) => {
+						return `$${params.value.toFixed(2)}`;
+					},
+					fontSize: 20,
+					padding: 10,
+					backgroundColor: 'rgba(255, 255, 255, 0.8)',
+					borderRadius: 5
+				},
+				emphasis: {
+					label: {
+						show: true // Labels appear on hover
+					}
+				}
 			}
 		]
 	});