feat: Built the Oracle Tab

2026-04-11 19:33:13 +05:30
parent 8e1ffe0e43
commit 8017006b5b
54 changed files with 10651 additions and 818 deletions
--- a/app/src/oracle/components/renderers/LineChartRenderer.tsx
+++ b/app/src/oracle/components/renderers/LineChartRenderer.tsx
@@ -0,0 +1,54 @@
+import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';
+import type { CanvasComponent } from '../../types/canvas';
+import { RendererWrapper, GlassTooltip, NoDataPlaceholder, type ComponentRenderContext } from './RendererWrapper';
+
+interface Props { component: CanvasComponent; ctx: ComponentRenderContext }
+
+export function LineChartRenderer({ component, ctx }: Props) {
+  const rows = (component.dataRows ?? []) as Array<Record<string, number | string>>;
+  const dims = component.dataBindings.dimensions;
+  const measures = component.dataBindings.measures;
+  const xKey = dims[0] ?? 'date';
+
+  const LINE_COLORS = ['#3B82F6', '#22D3EE', '#A78BFA', '#34D399'];
+
+  if (!rows.length) return (
+    <RendererWrapper component={component} ctx={ctx}>
+      <NoDataPlaceholder />
+    </RendererWrapper>
+  );
+
+  return (
+    <RendererWrapper component={component} ctx={ctx} minHeight={300}>
+      <div className="h-[220px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={rows} margin={{ top: 4, right: 8, left: -20, bottom: 0 }}>
+            <defs>
+              {measures.map((m, i) => (
+                <linearGradient key={m} id={`grad_${m}`} x1="0" y1="0" x2="1" y2="0">
+                  <stop offset="0%" stopColor={LINE_COLORS[i % LINE_COLORS.length]} />
+                  <stop offset="100%" stopColor={LINE_COLORS[(i + 1) % LINE_COLORS.length]} />
+                </linearGradient>
+              ))}
+            </defs>
+            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.04)" vertical={false} />
+            <XAxis dataKey={xKey} stroke="#3f3f46" tick={{ fontSize: 11, fill: '#71717a' }} axisLine={false} tickLine={false} dy={6} />
+            <YAxis stroke="#3f3f46" tick={{ fontSize: 11, fill: '#71717a' }} axisLine={false} tickLine={false} />
+            <Tooltip content={<GlassTooltip />} />
+            {measures.map((m, i) => (
+              <Line
+                key={m}
+                type="monotone"
+                dataKey={m}
+                stroke={`url(#grad_${m})`}
+                strokeWidth={2.5}
+                dot={{ r: 3, fill: '#0a0c14', stroke: LINE_COLORS[i % LINE_COLORS.length], strokeWidth: 2 }}
+                activeDot={{ r: 5, fill: LINE_COLORS[i % LINE_COLORS.length] }}
+              />
+            ))}
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </RendererWrapper>
+  );
+}