Rework home page to use $state, $props, and $derived

src/lib/entities.ts

@@ -146,6 +146,7 @@ export interface StatsType {
 export interface StatsTypeCurrencyChart {
   label: string;
   elements: StatsType[];
+  total: number;
 }
 
 // {{{ Settings section

src/routes/+page.server.ts

@@ -0,0 +1,13 @@
+import type { StatsTypeCurrencyChart } from "$lib/entities";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ fetch }) => {
+  try {
+    const expensesData: StatsTypeCurrencyChart[] = await fetch("/api/statistics/type").then((res) => res.json());
+    return { expensesData: expensesData };
+  } catch (error) {
+    console.log("error in +page.server.ts", error)
+    return { expensesData: [] };
+  }
+};
+

src/routes/+page.svelte

@@ -9,51 +9,45 @@
     type ChartConfiguration,
   } from "chart.js";
   import type { StatsTypeCurrencyChart } from "$lib/entities";
+  import { NumberToFPA } from "$lib/util/fpa";
 
   Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
 
-  let error: string | null = null;
+  let { data } = $props();
-  let data: StatsTypeCurrencyChart[] = [];
+  $inspect(data);
-  let configs: ChartConfiguration[] = [];
+  let error: string | null = $state(null);
-  let charts: Chart[] = [];
+  let { expensesData }: { expensesData: StatsTypeCurrencyChart[] } =
+    $state(data);
+  $inspect("expensesData =", expensesData);
+
+  // let expensesData: StatsTypeCurrencyChart[] = $state(data.expensesData);
   let canvases: HTMLCanvasElement[] = [];
-
+  let charts: Chart[] = [];
-  async function fetchChartStats() {
+  let configs: ChartConfiguration[] = $derived(
-    try {
+    expensesData.map((chart) => ({
-      const result = await fetch("/api/statistics/type");
+      type: "doughnut",
-      if (!result.ok) {
+      data: {
-        const obj = await result.json();
+        labels: chart.elements.map((type) => type.name),
-        error = obj.message;
+        datasets: [
-      } else {
+          {
-        data = await result.json();
+            label: chart.label,
-
+            data: chart.elements.map((type) => type.value / 100),
-        configs = data.map((chart) => ({
+            backgroundColor: chart.elements.map((type) => type.color),
-          type: "doughnut",
-          data: {
-            labels: chart.elements.map((type) => type.name),
-            datasets: [
-              {
-                label: "Chart Dataset",
-                data: chart.elements.map((type) => type.value / 100),
-                backgroundColor: chart.elements.map((type) => type.color),
-              },
-            ],
           },
-        }));
+        ],
-      }
+      },
-    } catch (e) {
+    })),
-      console.error("Error fetching data:", e);
+  );
-      error = "Failed to fetch chart data.";
-    }
-  }
 
   function createTypeCharts() {
     charts.forEach((chart) => chart.destroy());
     charts = configs.map((config, index) => new Chart(canvases[index], config));
   }
-  onMount(async () => {
+
-    await fetchChartStats();
+  onMount(() => {
-    createTypeCharts();
+    if (expensesData && canvases.length > 0) {
+      createTypeCharts();
+    }
   });
 
   onDestroy(() => {
@@ -66,15 +60,28 @@
 {/if}
 
 <!-- Render canvas elements for charts -->
-<div class="w-1/2 grid grid-cols-2 gap-4">
+<div class="container mx-auto my-8 bg-gray-100 p-6">
-  {#each configs as _, index}
+  <h2 class="text-2xl mb-4 font-bold text-center block">
-    <div class="flex flex-col">
+    Expenses doughnut charts
-      <div class="type-chart">
+  </h2>
-        <canvas bind:this={canvases[index]}></canvas>
+  <div class="flex items-center justify-center">
-        <span class="flex justify-center">{data[index].label}</span>
+    <div
-      </div>
+      class="{configs.length > 4
+        ? 'grid-cols-4'
+        : 'grid-cols-2'} w-fit grid gap-4"
+    >
+      {#each configs as _, index}
+        <div class="flex flex-col">
+          <div class="type-chart">
+            <canvas bind:this={canvases[index]}></canvas>
+            <span class="flex justify-center"
+              >{`Total: ${NumberToFPA(expensesData[index].total)} ${expensesData[index].label}`}</span
+            >
+          </div>
+        </div>
+      {/each}
     </div>
-  {/each}
+  </div>
 </div>
 
 <style lang="postcss">