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');
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
-    return pending;
+
+    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');
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
-    return pending;
+    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');
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
-    return pending;
+    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');
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
-    return pending;
+    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')}

apps/dashboard/vite.config.ts

@@ -47,7 +47,13 @@ export default ({ mode }) => {
     },
     optimizeDeps: {
       entries: ['src/routes/**/+*.{js,ts,svelte}'],
-      include: ['@cio/api/rpc-types'],
+      include: [
+        '@cio/api/rpc-types',
+        // Pre-bundle layerchart via esbuild so its internal circular dependencies
+        // are flattened before Vite SSR evaluates them. Without this, Vite's SSR
+        // transform hits a "not yet fully initialized" circular-dep error.
+        'layerchart'
+      ],
       // Workspace packages must be processed by Svelte/Vite (not pre-bundled)
       // so HMR fires when editing files under packages/*.
       exclude: ['@cio/ui', '@cio/utils', '@cio/question-types']

packages/ui/src/base/chart/chart-utils.ts

@@ -1,5 +1,8 @@
 import type { Tooltip } from 'layerchart';
 import { getContext, setContext, type Component, type ComponentProps, type Snippet } from 'svelte';
+import type { ChartConfig } from './types';
+
+export type { ChartConfig } from './types';
 
 export const THEMES = { light: '', dark: '.dark' } as const;
 
@@ -9,13 +12,6 @@ export type ChartLegendItem = {
   value?: number;
 };
 
-export type ChartConfig = {
-  [k in string]: {
-    label?: string;
-    icon?: Component;
-  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
-};
-
 export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
 
 export type TooltipPayload = ExtractSnippetParams<ComponentProps<typeof Tooltip.Root>['children']>['payload'][number];

packages/ui/src/base/chart/types.ts

@@ -0,0 +1,13 @@
+import type { Component } from 'svelte';
+
+/**
+ * Chart configuration type — no layerchart runtime dependency.
+ * Import from here instead of '@cio/ui/base/chart' to keep the SSR module graph
+ * free from layerchart's circular dependency.
+ */
+export type ChartConfig = {
+  [k in string]: {
+    label?: string;
+    icon?: Component;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<'light' | 'dark', string> });
+};

packages/ui/src/custom/exercise-question/renderers/checkbox/submission.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type * as Chart from '../../../../base/chart';
+  import type { ChartConfig } from '../../../../base/chart/types';
   import type { ExerciseQuestionRendererProps } from '@cio/question-types';
 
   import SubmissionResponseBarChart from '../shared/submission-response-bar-chart.svelte';
@@ -16,7 +16,7 @@
       label: getSubmissionLabel(labels, 'submission.chart.responses', 'Responses'),
       color: 'var(--chart-1)'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const series = $derived([
     {

packages/ui/src/custom/exercise-question/renderers/fill-blank/submission.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type * as Chart from '../../../../base/chart';
+  import type { ChartConfig } from '../../../../base/chart/types';
   import type { ExerciseQuestionRendererProps } from '@cio/question-types';
 
   import SubmissionResponseBarChart from '../shared/submission-response-bar-chart.svelte';
@@ -17,7 +17,7 @@
       label: getSubmissionLabel(labels, 'submission.chart.responses', 'Responses'),
       color: 'var(--chart-1)'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const series = $derived([
     {

packages/ui/src/custom/exercise-question/renderers/radio/submission.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ExerciseQuestionRendererProps } from '@cio/question-types';
-  import type { ChartConfig } from '../../../../base/chart';
+  import type { ChartConfig } from '../../../../base/chart/types';
 
   import SubmissionResponsePieChart from '../shared/submission-response-pie-chart.svelte';
   import { getAnswerForQuestion, getSubmissionLabel, normalizeLabel, withChartColors } from '../submission-utils';

packages/ui/src/custom/exercise-question/renderers/shared/submission-response-bar-chart.svelte

@@ -1,6 +1,17 @@
+<script module lang="ts">
+  function loadChart() {
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
+    return import('../../../../base/chart');
+  }
+</script>
+
 <script lang="ts">
-  import * as Chart from '../../../../base/chart';
+  import { Spinner } from '../../../../base/spinner';
-  import type { ChartConfig } from '../../../../base/chart';
+  import type { ChartConfig } from '../../../../base/chart/types';
+  import Empty from '$src/custom/empty/empty.svelte';
+  import { BarChart3 } from '@lucide/svelte';
+
+  const isBrowser = typeof window !== 'undefined';
 
   interface Row {
     key: string;
@@ -32,8 +43,10 @@
 </script>
 
 {#if chartData.length > 0}
-  <Chart.Container config={chartConfig} class="ui:aspect-auto ui:w-full" style="height: {chartHeightPx}px">
+  {#if isBrowser}
-    <Chart.BarChart
+    {#await loadChart() then C}
+      <C.ChartContainer config={chartConfig} class="ui:aspect-auto ui:w-full" style="height: {chartHeightPx}px">
+        <C.BarChart
           data={chartData}
           orientation="horizontal"
           y="label"
@@ -42,7 +55,20 @@
           props={{ yAxis: { format: truncateAxisLabel } }}
           {series}
         />
-  </Chart.Container>
+      </C.ChartContainer>
+    {:catch error}
+      <Empty
+        title="Unable to load chart"
+        description="Something went wrong while loading the chart. Please refresh the page."
+        icon={BarChart3}
+        variant="page"
+      />
+    {/await}
+  {:else}
+    <div class="ui:flex ui:items-center ui:justify-center" style="height: {chartHeightPx}px">
+      <Spinner class="ui:text-muted-foreground ui:size-6" />
+    </div>
+  {/if}
 {:else}
   <p class="ui:text-muted-foreground ui:text-sm">{emptyLabel}</p>
 {/if}

packages/ui/src/custom/exercise-question/renderers/shared/submission-response-pie-chart.svelte

@@ -1,9 +1,17 @@
-<script lang="ts">
+<script module lang="ts">
-  import * as Chart from '../../../../base/chart';
+  function loadChart() {
-  import type { ChartConfig } from '../../../../base/chart';
+    if (typeof window === 'undefined') return Promise.reject(new Error('browser-only'));
+    return import('../../../../base/chart');
+  }
+</script>
 
+<script lang="ts">
+  import { Spinner } from '../../../../base/spinner';
+  import type { ChartConfig } from '../../../../base/chart/types';
   import { CHART_COLORS } from '../submission-utils';
 
+  const isBrowser = typeof window !== 'undefined';
+
   interface Row {
     key: string;
     label: string;
@@ -21,16 +29,24 @@
 </script>
 
 {#if chartData.length > 0}
-  <Chart.Container config={chartConfig} class="ui:h-[280px] ui:w-full ui:flex-col ui:items-center">
+  {#if isBrowser}
-    <Chart.PieChart data={chartData} key="key" label="label" value="responses" c="color" />
+    {#await loadChart() then C}
-    <Chart.ChartLegend
+      <C.ChartContainer config={chartConfig} class="ui:h-[280px] ui:w-full ui:flex-col ui:items-center">
+        <C.PieChart data={chartData} key="key" label="label" value="responses" c="color" />
+        <C.ChartLegend
           items={chartData.map((d) => ({
             label: d.label,
             color: d.color ?? CHART_COLORS[0],
             value: d.responses
           }))}
         />
-  </Chart.Container>
+      </C.ChartContainer>
+    {/await}
+  {:else}
+    <div class="ui:flex ui:h-[280px] ui:w-full ui:items-center ui:justify-center">
+      <Spinner class="ui:text-muted-foreground ui:size-6" />
+    </div>
+  {/if}
 {:else}
   <p class="ui:text-muted-foreground ui:text-sm">{emptyLabel}</p>
 {/if}

packages/ui/src/custom/exercise-question/renderers/true-false/submission.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  import * as Chart from '../../../../base/chart';
   import type { ExerciseQuestionRendererProps } from '@cio/question-types';
+  import type { ChartConfig } from '../../../../base/chart/types';
 
+  import SubmissionResponsePieChart from '../shared/submission-response-pie-chart.svelte';
   import { getAnswerForQuestion, getSubmissionLabel, normalizeLabel, withChartColors } from '../submission-utils';
 
   let {
@@ -30,7 +31,7 @@
       label: getSubmissionLabel(labels, 'submission.chart.responses', 'Responses'),
       color: 'var(--chart-1)'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const chartData = $derived.by(() => {
     let trueCount = 0;
@@ -81,13 +82,8 @@
   });
 </script>
 
-{#if chartData.length > 0}
+<SubmissionResponsePieChart
-  <Chart.Container config={chartConfig} class="ui:h-[280px] ui:w-full ui:flex-col ui:items-center">
+  {chartData}
-    <Chart.PieChart data={chartData} key="key" label="label" value="responses" c="color" />
+  {chartConfig}
-    <Chart.ChartLegend items={chartData.map((d) => ({ label: d.label, color: d.color, value: d.responses }))} />
+  emptyLabel={getSubmissionLabel(labels, 'submission.chart.no_data', 'No responses yet')}
-  </Chart.Container>
+/>
-{:else}
-  <p class="ui:text-muted-foreground ui:text-sm">
-    {getSubmissionLabel(labels, 'submission.chart.no_data', 'No responses yet')}
-  </p>
-{/if}

packages/ui/src/custom/exercise-question/renderers/word-bank/submission.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type * as Chart from '../../../../base/chart';
+  import type { ChartConfig } from '../../../../base/chart/types';
   import type { ExerciseQuestionRendererProps } from '@cio/question-types';
 
   import SubmissionResponseBarChart from '../shared/submission-response-bar-chart.svelte';
@@ -17,7 +17,7 @@
       label: getSubmissionLabel(labels, 'submission.chart.responses', 'Responses'),
       color: 'var(--chart-1)'
     }
-  } satisfies Chart.ChartConfig);
+  } satisfies ChartConfig);
 
   const series = $derived([
     {