fix: Chart Circular Dependency (#772)

* Fix: Chart Circular Dependency

* Corrections to greptile reviews

* code rabbit coding guideline

---------

apps/dashboard/src/lib/features/analytics/components/trend-chart.svelte

@@ -1,13 +1,14 @@
 <script module lang="ts">
-  let pending: Promise<typeof import('@cio/ui/base/chart')> | null = null;
   function loadChart() {
-    pending ??= import('@cio/ui/base/chart');
-    return pending;
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
+
+    return import('@cio/ui/base/chart');
   }
 </script>
 
 <script lang="ts">
-  import type * as Chart from '@cio/ui/base/chart';
+  import { browser } from '$app/environment';
+  import type { ChartConfig } from '@cio/ui/base/chart/types';
   import { Spinner } from '@cio/ui/base/spinner';
   import { Empty } from '@cio/ui/custom/empty';
   import TrendingUpIcon from '@lucide/svelte/icons/trending-up';
@@ -31,7 +32,7 @@
       label: $t('analytics.trend.enrollments'),
       color: 'var(--chart-2, var(--primary))'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const series = [
     { key: 'views', value: 'views', label: 'Views', color: 'var(--color-views)' },
@@ -49,12 +50,16 @@
       <div class="flex h-[280px] items-center justify-center">
         <Spinner class="ui:text-muted-foreground size-6" />
       </div>
-    {:else if hasData && data}
+    {:else if browser && hasData && data}
       {#await loadChart() then C}
         <C.ChartContainer class="h-[280px] w-full" config={chartConfig}>
           <C.AreaChart data={data.sparkline} x="date" axis="x" {series} />
         </C.ChartContainer>
       {/await}
+    {:else if hasData && data}
+      <div class="flex h-[280px] items-center justify-center">
+        <Spinner class="ui:text-muted-foreground size-6" />
+      </div>
     {:else}
       <Empty icon={TrendingUpIcon} title={$t('analytics.trend.empty')} class="h-[280px]" />
     {/if}

apps/dashboard/src/lib/features/course/components/analytics/analytics-graph.svelte

@@ -1,13 +1,13 @@
 <script module lang="ts">
-  let pending: Promise<typeof import('@cio/ui/base/chart')> | null = null;
   function loadChart() {
-    pending ??= import('@cio/ui/base/chart');
-    return pending;
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
+    return import('@cio/ui/base/chart');
   }
 </script>
 
 <script lang="ts">
-  import type * as Chart from '@cio/ui/base/chart';
+  import { browser } from '$app/environment';
+  import type { ChartConfig } from '@cio/ui/base/chart/types';
   import { Spinner } from '@cio/ui/base/spinner';
   import { Empty } from '@cio/ui/custom/empty';
   import BarChartIcon from '@lucide/svelte/icons/bar-chart-3';
@@ -32,14 +32,14 @@
       label: $t('analytics.number_of_students'),
       color: 'var(--chart-1)'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const gradeChartConfig = $derived({
     students: {
       label: $t('analytics.number_of_students'),
       color: 'var(--chart-2)'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const hasStudentData = $derived(Boolean(courseAnalytics?.students?.length));
 
@@ -142,7 +142,7 @@
         <div class="flex h-[280px] items-center justify-center">
           <Spinner class="ui:text-muted-foreground size-6" />
         </div>
-      {:else if hasStudentData}
+      {:else if browser && hasStudentData}
         {#await loadChart() then C}
           <C.ChartContainer class="h-[280px] w-full" config={progressChartConfig}>
             <C.BarChart
@@ -154,6 +154,10 @@
             />
           </C.ChartContainer>
         {/await}
+      {:else if hasStudentData}
+        <div class="flex h-[280px] items-center justify-center">
+          <Spinner class="ui:text-muted-foreground size-6" />
+        </div>
       {:else}
         <Empty icon={BarChartIcon} title={$t('analytics.no_progress_data')} class="h-[280px]" />
       {/if}
@@ -169,12 +173,16 @@
         <div class="flex h-[280px] items-center justify-center">
           <Spinner class="ui:text-muted-foreground size-6" />
         </div>
-      {:else if hasStudentData}
+      {:else if browser && hasStudentData}
         {#await loadChart() then C}
           <C.ChartContainer class="h-[280px] w-full" config={gradeChartConfig}>
             <C.BarChart data={gradeChartData} x="group" axis="x" props={gradeChartProps} series={gradeSeries} />
           </C.ChartContainer>
         {/await}
+      {:else if hasStudentData}
+        <div class="flex h-[280px] items-center justify-center">
+          <Spinner class="ui:text-muted-foreground size-6" />
+        </div>
       {:else}
         <Empty icon={BarChartIcon} title={$t('analytics.no_grade_data')} class="h-[280px]" />
       {/if}

apps/dashboard/src/lib/features/org/components/login-activity-chart.svelte

@@ -1,13 +1,14 @@
 <script module lang="ts">
-  let pending: Promise<typeof import('@cio/ui/base/chart')> | null = null;
   function loadChart() {
-    pending ??= import('@cio/ui/base/chart');
-    return pending;
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
+    return import('@cio/ui/base/chart');
   }
 </script>
 
 <script lang="ts">
-  import type * as Chart from '@cio/ui/base/chart';
+  import { browser } from '$app/environment';
+  import type { ChartConfig } from '@cio/ui/base/chart/types';
+  import { Spinner } from '@cio/ui/base/spinner';
   import { t } from '$lib/utils/functions/translations';
   import type { LoginActivityData } from '$features/org/utils/types';
 
@@ -22,7 +23,7 @@
       label: $t('dashboard.login_activity_logins'),
       color: 'var(--chart-1)'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const series = $derived([
     {
@@ -47,12 +48,16 @@
   </div>
 
   <div class="flex h-full flex-col justify-center">
-    {#if hasData}
+    {#if browser && hasData}
       {#await loadChart() then C}
         <C.ChartContainer class="h-[260px] w-full" config={chartConfig}>
           <C.BarChart {data} x="day" axis="x" {series} />
         </C.ChartContainer>
       {/await}
+    {:else if hasData}
+      <div class="flex h-[260px] items-center justify-center">
+        <Spinner class="ui:text-muted-foreground size-6" />
+      </div>
     {:else}
       <div class="ui:text-muted-foreground flex h-[260px] items-center justify-center text-sm">
         {$t('dashboard.login_activity_no_data')}

apps/dashboard/src/lib/features/settings/components/ai-credits/usage-chart.svelte

@@ -1,13 +1,14 @@
 <script module lang="ts">
-  let pending: Promise<typeof import('@cio/ui/base/chart')> | null = null;
   function loadChart() {
-    pending ??= import('@cio/ui/base/chart');
-    return pending;
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
+    return import('@cio/ui/base/chart');
   }
 </script>
 
 <script lang="ts">
-  import type * as Chart from '@cio/ui/base/chart';
+  import { browser } from '$app/environment';
+  import type { ChartConfig } from '@cio/ui/base/chart/types';
+  import { Spinner } from '@cio/ui/base/spinner';
   import { t } from '$lib/utils/functions/translations';
   import type { AiUsageData } from '$features/settings/utils/types';
 
@@ -26,7 +27,7 @@
       label: $t('settings.ai_credits.chart.tokens'),
       color: 'var(--chart-1)'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const series = $derived([
     { key: 'tokens', value: 'tokens', label: chartConfig.tokens.label, color: 'var(--color-tokens)' }
@@ -55,12 +56,16 @@
     </div>
   </div>
 
-  {#if hasData}
+  {#if browser && hasData}
     {#await loadChart() then C}
       <C.ChartContainer class="h-[260px] w-full" config={chartConfig}>
         <C.BarChart {data} x="date" axis="x" {series} />
       </C.ChartContainer>
     {/await}
+  {:else if hasData}
+    <div class="flex h-[260px] items-center justify-center">
+      <Spinner class="ui:text-muted-foreground size-6" />
+    </div>
   {:else}
     <div class="ui:text-muted-foreground flex h-[260px] items-center justify-center text-sm">
       {$t('settings.ai_credits.chart.empty')}