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();
+  let error: string | null = null;
-  $inspect(data);
+  let data: StatsTypeCurrencyChart[] = [];
-  let error: string | null = $state(null);
+  let configs: ChartConfiguration[] = [];
-  let { expensesData }: { expensesData: StatsTypeCurrencyChart[] } =
-    $state(data);
-  $inspect("expensesData =", expensesData);
-
-  // let expensesData: StatsTypeCurrencyChart[] = $state(data.expensesData);
-  let canvases: HTMLCanvasElement[] = [];
   let charts: Chart[] = [];
-  let configs: ChartConfiguration[] = $derived(
+  let canvases: HTMLCanvasElement[] = [];
-    expensesData.map((chart) => ({
+
-      type: "doughnut",
+  async function fetchChartStats() {
-      data: {
+    try {
-        labels: chart.elements.map((type) => type.name),
+      const result = await fetch("/api/statistics/type");
-        datasets: [
+      if (!result.ok) {
-          {
+        const obj = await result.json();
-            label: chart.label,
+        error = obj.message;
-            data: chart.elements.map((type) => type.value / 100),
+      } else {
-            backgroundColor: chart.elements.map((type) => type.color),
+        data = await result.json();
+
+        configs = data.map((chart) => ({
+          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 () => {
-  onMount(() => {
+    await fetchChartStats();
-    if (expensesData && canvases.length > 0) {
+    createTypeCharts();
-      createTypeCharts();
-    }
   });
 
   onDestroy(() => {
@@ -60,28 +66,15 @@
 {/if}
 
 <!-- Render canvas elements for charts -->
-<div class="container mx-auto my-8 bg-gray-100 p-6">
+<div class="w-1/2 grid grid-cols-2 gap-4">
-  <h2 class="text-2xl mb-4 font-bold text-center block">
+  {#each configs as _, index}
-    Expenses doughnut charts
+    <div class="flex flex-col">
-  </h2>
+      <div class="type-chart">
-  <div class="flex items-center justify-center">
+        <canvas bind:this={canvases[index]}></canvas>
-    <div
+        <span class="flex justify-center">{data[index].label}</span>
-      class="{configs.length > 4
+      </div>
-        ? '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>
-  </div>
+  {/each}
 </div>
 
 <style lang="postcss">