src/lib/entities.ts

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

src/routes/+page.server.ts

@@ -1,13 +0,0 @@
-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,45 +9,51 @@
     type ChartConfiguration,
   } from "chart.js";
   import type { StatsTypeCurrencyChart } from "$lib/entities";
-  import { NumberToFPA } from "$lib/util/fpa";
 
   Chart.register(DoughnutController, ArcElement, Tooltip, Legend);
 
-  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[] = [];
+  let error: string | null = null;
+  let data: StatsTypeCurrencyChart[] = [];
+  let configs: ChartConfiguration[] = [];
   let charts: Chart[] = [];
-  let configs: ChartConfiguration[] = $derived(
-    expensesData.map((chart) => ({
+  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,
+                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(() => {
-    if (expensesData && canvases.length > 0) {
+  onMount(async () => {
+    await fetchChartStats();
     createTypeCharts();
-    }
   });
 
   onDestroy(() => {
@@ -60,29 +66,16 @@
 {/if}
 
 <!-- Render canvas elements for charts -->
-<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"
-    >
+<div class="w-1/2 grid grid-cols-2 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
-            >
+        <span class="flex justify-center">{data[index].label}</span>
       </div>
     </div>
   {/each}
 </div>
-  </div>
-</div>
 
 <style lang="postcss">
   .type-chart {