@useatlas/create 0.0.5 → 0.0.7

package/templates/docker/src/ui/components/branding-head.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect } from "react";
+import { useBranding } from "@/ui/hooks/use-branding";
+
+/**
+ * Client component that dynamically updates the favicon and page title based
+ * on workspace branding. Uses direct DOM manipulation because branding data is
+ * fetched at runtime (session-dependent) and cannot use Next.js static metadata.
+ */
+export function BrandingHead() {
+  const { branding } = useBranding();
+
+  useEffect(() => {
+    if (!branding) return;
+
+    // Dynamic favicon
+    if (branding.faviconUrl) {
+      let link = document.querySelector<HTMLLinkElement>("link[data-branding-favicon]");
+      if (!link) {
+        link = document.createElement("link");
+        link.rel = "icon";
+        link.setAttribute("data-branding-favicon", "");
+        document.head.appendChild(link);
+      }
+      if (link.href !== branding.faviconUrl) {
+        link.href = branding.faviconUrl;
+      }
+    }
+
+    // Dynamic title (replace all occurrences of "Atlas" with custom text)
+    if (branding.hideAtlasBranding && branding.logoText) {
+      const currentTitle = document.title;
+      if (currentTitle.includes("Atlas")) {
+        document.title = currentTitle.replaceAll("Atlas", branding.logoText);
+      }
+    }
+  }, [branding]);
+
+  return null;
+}

package/templates/docker/src/ui/components/chart/chart-detection.ts

@@ -1,6 +1,6 @@
 /* Chart detection — pure functions, zero React deps. Kept framework-agnostic for direct unit testing. */
 
-export type ColumnType = "numeric" | "date" | "categorical" | "unknown";
+type ColumnType = "numeric" | "date" | "categorical" | "unknown";
 
 export type ClassifiedColumn = {
   index: number;
@@ -9,7 +9,7 @@ export type ClassifiedColumn = {
   uniqueCount: number;
 };
 
-export type ChartType = "bar" | "line" | "pie";
+export type ChartType = "bar" | "line" | "pie" | "area" | "stacked-bar" | "scatter";
 
 export type ChartRecommendation = {
   type: ChartType;
@@ -156,6 +156,26 @@ export function detectCharts(headers: string[], rows: string[][]): ChartDetectio
     });
   }
 
+  // Area: alternative to line for date + numeric (volume/magnitude over time)
+  if (dateColumns.length >= 1 && numericColumns.length >= 1) {
+    recommendations.push({
+      type: "area",
+      categoryColumn: dateColumns[0],
+      valueColumns: numericColumns as [ClassifiedColumn, ...ClassifiedColumn[]],
+      reason: `Volume over time: ${numericColumns.map((c) => c.header).join(", ")} by ${dateColumns[0].header}`,
+    });
+  }
+
+  // Stacked bar: categorical + multiple numeric columns (part-to-whole comparison)
+  if (categoricalColumns.length >= 1 && numericColumns.length >= 2) {
+    recommendations.push({
+      type: "stacked-bar",
+      categoryColumn: categoricalColumns[0],
+      valueColumns: numericColumns as [ClassifiedColumn, ...ClassifiedColumn[]],
+      reason: `Stacked: ${numericColumns.map((c) => c.header).join(", ")} by ${categoricalColumns[0].header}`,
+    });
+  }
+
   // Bar: categorical + numeric
   if (categoricalColumns.length >= 1 && numericColumns.length >= 1) {
     recommendations.push({
@@ -179,8 +199,22 @@ export function detectCharts(headers: string[], rows: string[][]): ChartDetectio
     }
   }
 
+  // Scatter: 2+ numeric columns (correlation analysis)
+  if (numericColumns.length >= 2) {
+    const [xCol, yCol, ...rest] = numericColumns;
+    const scatterValues = rest.length > 0
+      ? [yCol, ...rest] as [ClassifiedColumn, ...ClassifiedColumn[]]
+      : [yCol] as [ClassifiedColumn, ...ClassifiedColumn[]];
+    recommendations.push({
+      type: "scatter",
+      categoryColumn: xCol,
+      valueColumns: scatterValues,
+      reason: `Correlation: ${xCol.header} vs ${yCol.header}${rest.length > 0 ? ` (size: ${rest[0].header})` : ""}`,
+    });
+  }
+
   // Fallback: when all columns are numeric, treat first as category axis (often an index or bucket label)
-  if (recommendations.length === 0 && numericColumns.length >= 2) {
+  if (!recommendations.some((r) => r.type === "bar") && numericColumns.length >= 2) {
     const first = columns[0];
     const rest = numericColumns.filter((c) => c.index !== first.index);
     if (rest.length >= 1) {
@@ -228,6 +262,12 @@ function parseNumericValue(raw: string): number {
   return isFinite(num) ? num : 0;
 }
 
+function isFiniteNumeric(raw: string): boolean {
+  const cleaned = raw.replace(/[$%,\s]/g, "");
+  if (cleaned === "" || cleaned === "-") return false;
+  return isFinite(Number(cleaned));
+}
+
 export function transformData(
   rows: string[][],
   recommendation: ChartRecommendation,
@@ -236,9 +276,26 @@ export function transformData(
   const catHeader = recommendation.categoryColumn.header;
   const valIdxs = recommendation.valueColumns.map((c) => c.index);
 
-  // Cap rows for bar charts with many categories
+  // Scatter: both axes are numeric — categoryColumn is x, first valueColumn is y, optional z for size
+  // Filter out rows where x or y are non-numeric to avoid misleading zero-origin clusters
+  if (recommendation.type === "scatter") {
+    const yIdx = recommendation.valueColumns[0].index;
+    return rows.flatMap((row) => {
+      const rawX = row[catIdx] ?? "";
+      const rawY = row[yIdx] ?? "";
+      if (!isFiniteNumeric(rawX) || !isFiniteNumeric(rawY)) return [];
+      const record: RechartsRow = {};
+      record[catHeader] = parseNumericValue(rawX);
+      for (const vc of recommendation.valueColumns) {
+        record[vc.header] = parseNumericValue(row[vc.index] ?? "0");
+      }
+      return [record];
+    });
+  }
+
+  // Cap rows for bar/stacked-bar charts with many categories
   let effectiveRows = rows;
-  if (recommendation.type === "bar" && rows.length > 30) {
+  if ((recommendation.type === "bar" || recommendation.type === "stacked-bar") && rows.length > 30) {
     // Sort by first value column descending, take top 20
     const valIdx = valIdxs[0];
     effectiveRows = [...rows]

package/templates/docker/src/ui/components/chart/result-chart.tsx

@@ -1,12 +1,18 @@
 "use client";
 
-import { Component, type ReactNode, type ErrorInfo, useMemo, useState } from "react";
+import { useMemo, useId, useState } from "react";
+import { ErrorBoundary } from "../error-boundary";
 import {
   ResponsiveContainer,
   BarChart,
   Bar,
   LineChart,
   Line,
+  AreaChart,
+  Area,
+  ScatterChart,
+  Scatter,
+  ZAxis,
   PieChart,
   Pie,
   Cell,
@@ -27,39 +33,6 @@ import {
   type ChartDetectionResult,
 } from "./chart-detection";
 
-/* ------------------------------------------------------------------ */
-/*  Error boundary                                                       */
-/* ------------------------------------------------------------------ */
-
-class ChartErrorBoundary extends Component<
-  { children: ReactNode; fallback?: ReactNode },
-  { hasError: boolean }
-> {
-  constructor(props: { children: ReactNode; fallback?: ReactNode }) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(): { hasError: boolean } {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error: Error, info: ErrorInfo) {
-    console.error("Chart rendering failed:", error, info.componentStack);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return this.props.fallback ?? (
-        <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
-          Chart could not be rendered. Switch to Table view to see your data.
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
 /* ------------------------------------------------------------------ */
 /*  Theme helpers                                                       */
 /* ------------------------------------------------------------------ */
@@ -129,7 +102,7 @@ function ChartTooltip({ active, payload, label, dark }: {
   if (!active || !payload?.length) return null;
   return (
     <div style={getTooltipStyle(dark)}>
-      <p style={TOOLTIP_LABEL_STYLE}>{label}</p>
+      {label && <p style={TOOLTIP_LABEL_STYLE}>{label}</p>}
       {payload.map((entry, i) => (
         <p key={i} style={{ color: entry.color }}>
           {entry.name}: {typeof entry.value === "number" ? formatNumber(entry.value) : entry.value}
@@ -158,32 +131,35 @@ function BarChartView({
   const valKeys = rec.valueColumns.map((c) => c.header);
 
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <BarChart data={data} margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
-        <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
-        <XAxis
-          dataKey={catKey}
-          tick={{ fill: t.axis, fontSize: 11 }}
-          tickFormatter={(v: string) => truncateLabel(v)}
-          angle={-45}
-          textAnchor="end"
-          height={60}
-        />
-        <YAxis tick={{ fill: t.axis, fontSize: 11 }} tickFormatter={formatNumber} />
-        <Tooltip content={<ChartTooltip dark={dark} />} />
-        {valKeys.length > 1 && (
-          <Legend wrapperStyle={{ fontSize: 12, color: t.legendText }} />
-        )}
-        {valKeys.map((key, i) => (
-          <Bar
-            key={key}
-            dataKey={key}
-            fill={colors[i % colors.length]}
-            radius={[4, 4, 0, 0]}
+    <div className="aspect-[4/3] sm:aspect-[16/9]">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data} margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
+          <XAxis
+            dataKey={catKey}
+            tick={{ fill: t.axis, fontSize: 11 }}
+            tickFormatter={(v: string) => truncateLabel(v)}
+            angle={-45}
+            textAnchor="end"
+            height={60}
+            interval="preserveStartEnd"
           />
-        ))}
-      </BarChart>
-    </ResponsiveContainer>
+          <YAxis tick={{ fill: t.axis, fontSize: 11 }} tickFormatter={formatNumber} />
+          <Tooltip content={<ChartTooltip dark={dark} />} />
+          {valKeys.length > 1 && (
+            <Legend wrapperStyle={{ fontSize: 12, color: t.legendText }} />
+          )}
+          {valKeys.map((key, i) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              fill={colors[i % colors.length]}
+              radius={[4, 4, 0, 0]}
+            />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
   );
 }
 
@@ -202,35 +178,38 @@ function LineChartView({
   const valKeys = rec.valueColumns.map((c) => c.header);
 
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <LineChart data={data} margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
-        <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
-        <XAxis
-          dataKey={catKey}
-          tick={{ fill: t.axis, fontSize: 11 }}
-          tickFormatter={(v: string) => truncateLabel(v)}
-          angle={-45}
-          textAnchor="end"
-          height={60}
-        />
-        <YAxis tick={{ fill: t.axis, fontSize: 11 }} tickFormatter={formatNumber} />
-        <Tooltip content={<ChartTooltip dark={dark} />} />
-        {valKeys.length > 1 && (
-          <Legend wrapperStyle={{ fontSize: 12, color: t.legendText }} />
-        )}
-        {valKeys.map((key, i) => (
-          <Line
-            key={key}
-            type="monotone"
-            dataKey={key}
-            stroke={colors[i % colors.length]}
-            strokeWidth={2}
-            dot={{ r: 3, fill: colors[i % colors.length] }}
-            activeDot={{ r: 5 }}
+    <div className="aspect-[4/3] sm:aspect-[16/9]">
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart data={data} margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
+          <XAxis
+            dataKey={catKey}
+            tick={{ fill: t.axis, fontSize: 11 }}
+            tickFormatter={(v: string) => truncateLabel(v)}
+            angle={-45}
+            textAnchor="end"
+            height={60}
+            interval="preserveStartEnd"
           />
-        ))}
-      </LineChart>
-    </ResponsiveContainer>
+          <YAxis tick={{ fill: t.axis, fontSize: 11 }} tickFormatter={formatNumber} />
+          <Tooltip content={<ChartTooltip dark={dark} />} />
+          {valKeys.length > 1 && (
+            <Legend wrapperStyle={{ fontSize: 12, color: t.legendText }} />
+          )}
+          {valKeys.map((key, i) => (
+            <Line
+              key={key}
+              type="monotone"
+              dataKey={key}
+              stroke={colors[i % colors.length]}
+              strokeWidth={2}
+              dot={{ r: 3, fill: colors[i % colors.length] }}
+              activeDot={{ r: 5 }}
+            />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
   );
 }
 
@@ -253,36 +232,203 @@ function PieChartView({
   const hasNegative = data.some(d => typeof d[valKey] === "number" && (d[valKey] as number) < 0);
   if (total <= 0 || hasNegative) {
     return (
-      <div className="flex h-[300px] items-center justify-center text-xs text-zinc-400">
+      <div className="flex aspect-[4/3] items-center justify-center text-xs text-zinc-400 sm:aspect-[16/9]">
         Pie chart is not suitable for this data.
       </div>
     );
   }
 
   return (
-    <ResponsiveContainer width="100%" height={300}>
-      <PieChart>
-        <Pie
-          data={data}
-          dataKey={valKey}
-          nameKey={catKey}
-          cx="50%"
-          cy="50%"
-          innerRadius={40}
-          outerRadius={100}
-          label={({ name, value }: { name?: string; value?: number }) =>
-            `${truncateLabel(String(name ?? ""), 10)} ${total > 0 && value != null ? ((value / total) * 100).toFixed(0) : 0}%`
-          }
-          labelLine={{ stroke: t.axis }}
-          fontSize={11}
-        >
-          {data.map((_, i) => (
-            <Cell key={i} fill={colors[i % colors.length]} />
+    <div className="aspect-[4/3] sm:aspect-[16/9]">
+      <ResponsiveContainer width="100%" height="100%">
+        <PieChart>
+          <Pie
+            data={data}
+            dataKey={valKey}
+            nameKey={catKey}
+            cx="50%"
+            cy="50%"
+            innerRadius={40}
+            outerRadius={100}
+            label={({ name, value }: { name?: string; value?: number }) =>
+              `${truncateLabel(String(name ?? ""), 10)} ${total > 0 && value != null ? ((value / total) * 100).toFixed(0) : 0}%`
+            }
+            labelLine={{ stroke: t.axis }}
+            fontSize={11}
+          >
+            {data.map((_, i) => (
+              <Cell key={i} fill={colors[i % colors.length]} />
+            ))}
+          </Pie>
+          <Tooltip content={<ChartTooltip dark={dark} />} />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Area chart                                                           */
+/* ------------------------------------------------------------------ */
+
+function AreaChartView({
+  data,
+  rec,
+  dark,
+}: {
+  data: RechartsRow[];
+  rec: ChartRecommendation;
+  dark: boolean;
+}) {
+  const chartId = useId();
+  const colors = getColors(dark);
+  const t = themeTokens(dark);
+  const catKey = rec.categoryColumn.header;
+  const valKeys = rec.valueColumns.map((c) => c.header);
+
+  return (
+    <div className="aspect-[4/3] sm:aspect-[16/9]">
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart data={data} margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
+          <defs>
+            {valKeys.map((key, i) => (
+              <linearGradient key={key} id={`area-grad-${chartId}-${i}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor={colors[i % colors.length]} stopOpacity={0.3} />
+                <stop offset="95%" stopColor={colors[i % colors.length]} stopOpacity={0.05} />
+              </linearGradient>
+            ))}
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
+          <XAxis
+            dataKey={catKey}
+            tick={{ fill: t.axis, fontSize: 11 }}
+            tickFormatter={(v: string) => truncateLabel(v)}
+            angle={-45}
+            textAnchor="end"
+            height={60}
+            interval="preserveStartEnd"
+          />
+          <YAxis tick={{ fill: t.axis, fontSize: 11 }} tickFormatter={formatNumber} />
+          <Tooltip content={<ChartTooltip dark={dark} />} />
+          {valKeys.length > 1 && (
+            <Legend wrapperStyle={{ fontSize: 12, color: t.legendText }} />
+          )}
+          {valKeys.map((key, i) => (
+            <Area
+              key={key}
+              type="monotone"
+              dataKey={key}
+              stroke={colors[i % colors.length]}
+              strokeWidth={2}
+              fill={`url(#area-grad-${chartId}-${i})`}
+            />
+          ))}
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Stacked bar chart                                                    */
+/* ------------------------------------------------------------------ */
+
+function StackedBarChartView({
+  data,
+  rec,
+  dark,
+}: {
+  data: RechartsRow[];
+  rec: ChartRecommendation;
+  dark: boolean;
+}) {
+  const colors = getColors(dark);
+  const t = themeTokens(dark);
+  const catKey = rec.categoryColumn.header;
+  const valKeys = rec.valueColumns.map((c) => c.header);
+
+  return (
+    <div className="aspect-[4/3] sm:aspect-[16/9]">
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart data={data} margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
+          <XAxis
+            dataKey={catKey}
+            tick={{ fill: t.axis, fontSize: 11 }}
+            tickFormatter={(v: string) => truncateLabel(v)}
+            angle={-45}
+            textAnchor="end"
+            height={60}
+            interval="preserveStartEnd"
+          />
+          <YAxis tick={{ fill: t.axis, fontSize: 11 }} tickFormatter={formatNumber} />
+          <Tooltip content={<ChartTooltip dark={dark} />} />
+          <Legend wrapperStyle={{ fontSize: 12, color: t.legendText }} />
+          {valKeys.map((key, i) => (
+            <Bar
+              key={key}
+              dataKey={key}
+              stackId="a"
+              fill={colors[i % colors.length]}
+              radius={i === valKeys.length - 1 ? [4, 4, 0, 0] : undefined}
+            />
           ))}
-        </Pie>
-        <Tooltip content={<ChartTooltip dark={dark} />} />
-      </PieChart>
-    </ResponsiveContainer>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Scatter chart                                                        */
+/* ------------------------------------------------------------------ */
+
+function ScatterChartView({
+  data,
+  rec,
+  dark,
+}: {
+  data: RechartsRow[];
+  rec: ChartRecommendation;
+  dark: boolean;
+}) {
+  const colors = getColors(dark);
+  const t = themeTokens(dark);
+  const xKey = rec.categoryColumn.header;
+  const yKey = rec.valueColumns[0].header;
+  const zKey = rec.valueColumns.length > 1 ? rec.valueColumns[1].header : undefined;
+
+  return (
+    <div className="aspect-[4/3] sm:aspect-[16/9]">
+      <ResponsiveContainer width="100%" height="100%">
+        <ScatterChart margin={{ top: 8, right: 8, bottom: 40, left: 8 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke={t.grid} />
+          <XAxis
+            dataKey={xKey}
+            type="number"
+            name={xKey}
+            tick={{ fill: t.axis, fontSize: 11 }}
+            tickFormatter={formatNumber}
+          />
+          <YAxis
+            dataKey={yKey}
+            type="number"
+            name={yKey}
+            tick={{ fill: t.axis, fontSize: 11 }}
+            tickFormatter={formatNumber}
+          />
+          {zKey && <ZAxis dataKey={zKey} type="number" name={zKey} range={[40, 400]} />}
+          <Tooltip
+            content={<ChartTooltip dark={dark} />}
+            cursor={{ strokeDasharray: "3 3" }}
+          />
+          <Scatter
+            data={data}
+            fill={colors[0]}
+          />
+        </ScatterChart>
+      </ResponsiveContainer>
+    </div>
   );
 }
 
@@ -290,7 +436,14 @@ function PieChartView({
 /*  Chart type selector                                                 */
 /* ------------------------------------------------------------------ */
 
-const CHART_LABELS: Record<ChartType, string> = { bar: "Bar", line: "Line", pie: "Pie" };
+const CHART_LABELS: Record<ChartType, string> = {
+  bar: "Bar",
+  line: "Line",
+  pie: "Pie",
+  area: "Area",
+  "stacked-bar": "Stacked",
+  scatter: "Scatter",
+};
 
 function ChartTypeSelector({
   recommendations,
@@ -318,7 +471,8 @@ function ChartTypeSelector({
         <button
           key={rec.type}
           onClick={() => onChange(rec.type)}
-          className={`rounded px-2 py-0.5 text-xs font-medium transition-colors ${
+          aria-pressed={active === rec.type}
+          className={`rounded-md px-3 py-1.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 ${
             active === rec.type
               ? "bg-blue-100 text-blue-700 dark:bg-blue-600/20 dark:text-blue-400"
               : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
@@ -331,6 +485,39 @@ function ChartTypeSelector({
   );
 }
 
+/* ------------------------------------------------------------------ */
+/*  Chart renderer (inside error boundary)                               */
+/* ------------------------------------------------------------------ */
+
+function ChartRenderer({
+  rows,
+  rec,
+  defaultData,
+  defaultRec,
+  dark,
+}: {
+  rows: string[][];
+  rec: ChartRecommendation;
+  defaultData: RechartsRow[];
+  defaultRec: ChartRecommendation;
+  dark: boolean;
+}) {
+  // Re-transform data when switching chart type (category axis may differ)
+  const chartData = rec === defaultRec ? defaultData : transformData(rows, rec);
+  const type = rec.type;
+
+  return (
+    <div className="p-2">
+      {type === "bar" ? <BarChartView data={chartData} rec={rec} dark={dark} />
+        : type === "line" ? <LineChartView data={chartData} rec={rec} dark={dark} />
+        : type === "area" ? <AreaChartView data={chartData} rec={rec} dark={dark} />
+        : type === "stacked-bar" ? <StackedBarChartView data={chartData} rec={rec} dark={dark} />
+        : type === "scatter" ? <ScatterChartView data={chartData} rec={rec} dark={dark} />
+        : <PieChartView data={chartData} rec={rec} dark={dark} />}
+    </div>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Main ResultChart component                                          */
 /* ------------------------------------------------------------------ */
@@ -358,11 +545,6 @@ export function ResultChart({
   const currentType = activeType ?? result.recommendations[0].type;
   const currentRec = result.recommendations.find((r) => r.type === currentType) ?? result.recommendations[0];
 
-  // Re-transform data when switching chart type (category axis may differ)
-  const chartData = currentRec === result.recommendations[0]
-    ? result.data
-    : transformData(rows, currentRec);
-
   return (
     <div className="overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-700">
       <div className="flex items-center justify-between border-b border-zinc-100 bg-zinc-50/50 px-3 py-2 dark:border-zinc-800 dark:bg-zinc-900/50">
@@ -373,13 +555,22 @@ export function ResultChart({
           onChange={setActiveType}
         />
       </div>
-      <ChartErrorBoundary key={currentType}>
-        <div className="p-2">
-          {currentType === "bar" ? <BarChartView data={chartData} rec={currentRec} dark={dark} />
-            : currentType === "line" ? <LineChartView data={chartData} rec={currentRec} dark={dark} />
-            : <PieChartView data={chartData} rec={currentRec} dark={dark} />}
-        </div>
-      </ChartErrorBoundary>
+      <ErrorBoundary
+        key={currentType}
+        fallback={
+          <div className="rounded-lg border border-yellow-300 bg-yellow-50 px-3 py-2 text-xs text-yellow-700 dark:border-yellow-900/50 dark:bg-yellow-950/20 dark:text-yellow-400">
+            Unable to render chart. Switch to Table view to see your data.
+          </div>
+        }
+      >
+        <ChartRenderer
+          rows={rows}
+          rec={currentRec}
+          defaultData={result.data}
+          defaultRec={result.recommendations[0]}
+          dark={dark}
+        />
+      </ErrorBoundary>
     </div>
   );
 }