Spaces:
Running
Running
File size: 5,968 Bytes
09801ca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { useUserStore } from '@/store/userStore';
import apiService from '@/services/api';
import SimulatorChart from './SimulatorChart';
import { GitCompare, Download, ArrowUpRight, ArrowDownRight } from 'lucide-react';
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
const ComparisonTab: React.FC = () => {
const { isDark } = useUserStore();
const [scenarios, setScenarios] = useState<any[]>([]);
const [comparison, setComparison] = useState<any>(null);
const [loading, setLoading] = useState(true);
const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#ffffff';
const cardBorder = isDark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.06)';
const textPrimary = isDark ? '#f8fafc' : '#0f172a';
const textMuted = isDark ? '#94a3b8' : '#64748b';
useEffect(() => {
const fetchData = async () => {
try {
const savedRes = await apiService.listScenarios();
const saved = savedRes.data || [];
setScenarios(saved);
const compRes = await apiService.compareScenarios(
saved.length > 0 ? saved.map((s: any) => s.id) : []
);
setComparison(compRes.data);
} catch (err) {
console.error(err);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
if (loading) return <div className="flex items-center justify-center h-96"><div className="w-8 h-8 border-3 border-indigo-500 border-t-transparent rounded-full animate-spin" /></div>;
const comps = comparison?.comparisons || [];
const chartData = comps.map((c: any) => ({
name: c.name,
prediction: c.prediction || 0,
impact: c.impact || c.impact_percentage || 0,
confidence: c.confidence || 90,
}));
return (
<div className="space-y-5">
{/* Header */}
<div className="flex items-center justify-between">
<h3 className="text-sm font-bold flex items-center gap-2" style={{ color: textPrimary }}>
<GitCompare className="w-4 h-4 text-indigo-400" /> Scenario Comparison & Trade-off Analysis
</h3>
<button className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl border text-xs hover:bg-white/5" style={{ borderColor: cardBorder, color: textMuted }}>
<Download className="w-3.5 h-3.5" /> Export Comparison
</button>
</div>
{/* Comparison Table */}
<div className="rounded-2xl border p-5 overflow-x-auto" style={{ background: cardBg, borderColor: cardBorder }}>
<table className="w-full text-left">
<thead>
<tr className="border-b" style={{ borderColor: cardBorder }}>
<th className="py-2.5 px-3 text-xs font-semibold" style={{ color: textMuted }}>Metric / Scenario</th>
{comps.map((c: any, i: number) => (
<th key={i} className="py-2.5 px-3 text-xs font-bold" style={{ color: textPrimary }}>
{c.name}
</th>
))}
</tr>
</thead>
<tbody>
<tr className="border-b" style={{ borderColor: cardBorder }}>
<td className="py-3 px-3 text-xs font-semibold" style={{ color: textMuted }}>Target Prediction</td>
{comps.map((c: any, i: number) => (
<td key={i} className="py-3 px-3 text-sm font-bold" style={{ color: '#6366f1' }}>
{c.formatted_prediction || c.prediction?.toLocaleString()}
</td>
))}
</tr>
<tr className="border-b" style={{ borderColor: cardBorder }}>
<td className="py-3 px-3 text-xs font-semibold" style={{ color: textMuted }}>Impact vs Baseline</td>
{comps.map((c: any, i: number) => {
const imp = c.impact || c.impact_percentage || 0;
return (
<td key={i} className="py-3 px-3">
<span className={`text-xs font-bold flex items-center gap-1 ${imp >= 0 ? 'text-emerald-500' : 'text-red-500'}`}>
{imp >= 0 ? <ArrowUpRight className="w-3.5 h-3.5" /> : <ArrowDownRight className="w-3.5 h-3.5" />}
{imp >= 0 ? '+' : ''}{imp.toFixed(1)}%
</span>
</td>
);
})}
</tr>
<tr className="border-b" style={{ borderColor: cardBorder }}>
<td className="py-3 px-3 text-xs font-semibold" style={{ color: textMuted }}>AI Confidence Score</td>
{comps.map((c: any, i: number) => (
<td key={i} className="py-3 px-3 text-xs font-bold text-emerald-500">
{(c.confidence || 90).toFixed(1)}%
</td>
))}
</tr>
</tbody>
</table>
</div>
{/* Grouped Comparison Chart */}
<div className="rounded-2xl border p-5" style={{ background: cardBg, borderColor: cardBorder }}>
<h3 className="text-sm font-bold mb-4" style={{ color: textPrimary }}>Target Metric Comparison</h3>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={chartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
<CartesianGrid strokeDasharray="3 3" stroke={isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.04)'} vertical={false} />
<XAxis dataKey="name" tick={{ fill: textMuted, fontSize: 11 }} axisLine={false} tickLine={false} />
<YAxis tick={{ fill: textMuted, fontSize: 11 }} axisLine={false} tickLine={false} />
<Tooltip contentStyle={{ background: isDark ? '#1e1e2e' : '#fff', border: `1px solid ${cardBorder}`, borderRadius: 12 }} />
<Bar dataKey="prediction" name="Target Prediction" fill="#6366f1" radius={[6, 6, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
};
export default ComparisonTab;
|