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

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

@@ -13,48 +13,41 @@
 
   Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
 
-  let error: string | null = null;
-  let data: StatsTypeCurrencyChart[] = [];
-  let configs: ChartConfiguration[] = [];
-  let charts: Chart[] = [];
+  let { data } = $props();
+  $inspect(data);
+  let error: string | null = $state(null);
+  let { expensesData }: { expensesData: StatsTypeCurrencyChart[] } =
+    $state(data);
+  $inspect("expensesData =", expensesData);
+
+  // let expensesData: StatsTypeCurrencyChart[] = $state(data.expensesData);
   let canvases: HTMLCanvasElement[] = [];
-
-  async function fetchChartStats() {
-    try {
-      const result = await fetch("/api/statistics/type");
-      if (!result.ok) {
-        const obj = await result.json();
-        error = obj.message;
-      } else {
-        data = await result.json();
-
-        configs = data.map((chart) => ({
-          type: "doughnut",
-          data: {
-            labels: chart.elements.map((type) => type.name),
-            datasets: [
-              {
-                label: chart.label,
-                data: chart.elements.map((type) => type.value / 100),
-                backgroundColor: chart.elements.map((type) => type.color),
-              },
-            ],
+  let charts: Chart[] = [];
+  let configs: ChartConfiguration[] = $derived(
+    expensesData.map((chart) => ({
+      type: "doughnut",
+      data: {
+        labels: chart.elements.map((type) => type.name),
+        datasets: [
+          {
+            label: chart.label,
+            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();
-    createTypeCharts();
+
+  onMount(() => {
+    if (expensesData && canvases.length > 0) {
+      createTypeCharts();
+    }
   });
 
   onDestroy(() => {
@@ -67,22 +60,27 @@
 {/if}
 
 <!-- Render canvas elements for charts -->
-<div class="flex items-center justify-center">
-  <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(data[index].total)} ${data[index].label}`}</span
-          >
+<div class="container mx-auto my-8 bg-gray-100 p-6">
+  <h2 class="text-2xl mb-4 font-bold text-center block">
+    Expenses doughnut charts
+  </h2>
+  <div class="flex items-center justify-center">
+    <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>
-      </div>
-    {/each}
+      {/each}
+    </div>
   </div>
 </div>