fix: Chart Circular Dependency (#772)

* Fix: Chart Circular Dependency * Corrections to greptile reviews * code rabbit coding guideline ---------
2026-07-24 14:09:09 +01:00
parent 2ceafcc6d1
commit 05833f441f
15 changed files with 156 additions and 80 deletions
@@ -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];
@@ -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> });
+};
@@ -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([
    {
@@ -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([
    {
@@ -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';
@@ -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 type { ChartConfig } from '../../../../base/chart';
+  import { Spinner } from '../../../../base/spinner';
+  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,17 +43,32 @@
 </script>

 {#if chartData.length > 0}
-  <Chart.Container config={chartConfig} class="ui:aspect-auto ui:w-full" style="height: {chartHeightPx}px">
-    <Chart.BarChart
-      data={chartData}
-      orientation="horizontal"
-      y="label"
-      axis="y"
-      bandPadding={0.25}
-      props={{ yAxis: { format: truncateAxisLabel } }}
-      {series}
-    />
-  </Chart.Container>
+  {#if isBrowser}
+    {#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"
+          axis="y"
+          bandPadding={0.25}
+          props={{ yAxis: { format: truncateAxisLabel } }}
+          {series}
+        />
+      </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}
@@ -1,9 +1,17 @@
-<script lang="ts">
-  import * as Chart from '../../../../base/chart';
-  import type { ChartConfig } from '../../../../base/chart';
+<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 { 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">
-    <Chart.PieChart data={chartData} key="key" label="label" value="responses" c="color" />
-    <Chart.ChartLegend
-      items={chartData.map((d) => ({
-        label: d.label,
-        color: d.color ?? CHART_COLORS[0],
-        value: d.responses
-      }))}
-    />
-  </Chart.Container>
+  {#if isBrowser}
+    {#await loadChart() then C}
+      <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
+          }))}
+        />
+      </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}
@@ -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}
-  <Chart.Container config={chartConfig} class="ui:h-[280px] ui:w-full ui:flex-col ui:items-center">
-    <Chart.PieChart data={chartData} key="key" label="label" value="responses" c="color" />
-    <Chart.ChartLegend items={chartData.map((d) => ({ label: d.label, color: d.color, value: d.responses }))} />
-  </Chart.Container>
-{:else}
-  <p class="ui:text-muted-foreground ui:text-sm">
-    {getSubmissionLabel(labels, 'submission.chart.no_data', 'No responses yet')}
-  </p>
-{/if}
+<SubmissionResponsePieChart
+  {chartData}
+  {chartConfig}
+  emptyLabel={getSubmissionLabel(labels, 'submission.chart.no_data', 'No responses yet')}
+/>
@@ -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([
    {