Fix bugs
This commit is contained in:
Jenit Jain
parent
37e4a09022
commit
66b5ff0bff
|
|
@ -28,4 +28,5 @@ uvicorn[standard]
|
|||
pydantic
|
||||
python-multipart
|
||||
python-jose[cryptography]
|
||||
passlib[bcrypt]
|
||||
passlib[bcrypt]
|
||||
python-dotenv
|
||||
|
|
@ -190,11 +190,14 @@ class TradingAgentsGraph:
|
|||
# Log state
|
||||
self._log_state(trade_date, final_state)
|
||||
|
||||
eval_results_path=f"{RESULTS_BASE}"
|
||||
input_file_path = f"{eval_results_path}/{company_name}/TradingAgentsStrategy_logs/full_states_log_{trade_date}.json"
|
||||
output_file_path = f"{eval_results_path}/{company_name}/TradingAgentsStrategy_transformed_logs/"
|
||||
|
||||
# Transform output JSON into widget-friendly format
|
||||
data_transformation_agent = DataTransformationAgent(TransformationConfig(
|
||||
eval_results_path=f"{RESULTS_BASE}/{company_name}/TradingAgentsStrategy_transformed_logs/full_states_log_{trade_date}.json"))
|
||||
data_transformation_agent = DataTransformationAgent(TransformationConfig(eval_results_path=eval_results_path))
|
||||
|
||||
transformed_output = data_transformation_agent.transform_single_file(self._get_state(trade_date))
|
||||
transformed_output = data_transformation_agent.process_single_file(input_file_path, output_file_path)
|
||||
|
||||
# Return decision and processed signal
|
||||
return transformed_output, self.process_signal(final_state["final_trade_decision"])
|
||||
|
|
@ -232,11 +235,12 @@ class TradingAgentsGraph:
|
|||
}
|
||||
|
||||
# Save to file
|
||||
directory = Path(f"../output_data/{self.ticker}/TradingAgentsStrategy_logs/")
|
||||
output_directory_path = os.path.join(os.path.dirname(__file__), "..", "..", "output_data",f"{self.ticker}", "TradingAgentsStrategy_logs")
|
||||
directory = Path(output_directory_path)
|
||||
directory.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
with open(
|
||||
f"../output_data/{self.ticker}/TradingAgentsStrategy_logs/full_states_log_{trade_date}.json",
|
||||
f"{output_directory_path}/full_states_log_{trade_date}.json",
|
||||
"w",
|
||||
) as f:
|
||||
json.dump(self.log_states_dict, f, indent=4)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,17 @@ import os
|
|||
from datetime import datetime
|
||||
import glob
|
||||
import uuid
|
||||
from starlette.concurrency import run_in_threadpool
|
||||
|
||||
# Load environment variables from .env (if present)
|
||||
try:
|
||||
from dotenv import load_dotenv, find_dotenv
|
||||
_dotenv_path = find_dotenv()
|
||||
if _dotenv_path:
|
||||
load_dotenv(_dotenv_path)
|
||||
except Exception:
|
||||
# dotenv is optional; ignore if not installed
|
||||
pass
|
||||
|
||||
# Import your TradingAgents components
|
||||
import sys
|
||||
|
|
@ -19,6 +30,13 @@ app = FastAPI(title="TradingAgents API", version="1.0.0", debug=True)
|
|||
# Centralized results directory to avoid repetition
|
||||
RESULTS_BASE = os.path.join(os.path.dirname(__file__), "..", "..", "output_data")
|
||||
|
||||
# Simple startup check for OPENAI_API_KEY
|
||||
OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
|
||||
if not OPENAI_API_KEY:
|
||||
print("[WARN] OPENAI_API_KEY is not set. Set it in your shell or in a .env file.")
|
||||
else:
|
||||
print("[INFO] OPENAI_API_KEY detected from environment.")
|
||||
|
||||
# Configure CORS
|
||||
app.add_middleware(
|
||||
CORSMiddleware,
|
||||
|
|
@ -58,38 +76,37 @@ async def health_check():
|
|||
return {"status": "healthy", "timestamp": datetime.now().isoformat()}
|
||||
|
||||
async def run_analysis_task(job_id: str, symbol: str, analysis_date: str, config_overrides: Dict[str, Any] = None):
|
||||
"""Background task to run the trading analysis"""
|
||||
"""Background task to run the trading analysis without blocking the event loop"""
|
||||
try:
|
||||
jobs[job_id].status = "running"
|
||||
jobs[job_id].progress = "Initializing TradingAgents..."
|
||||
|
||||
# Create custom config
|
||||
|
||||
# Prepare config
|
||||
config = DEFAULT_CONFIG.copy()
|
||||
if config_overrides:
|
||||
config.update(config_overrides)
|
||||
|
||||
# Initialize TradingAgents
|
||||
|
||||
jobs[job_id].progress = "Setting up trading graph..."
|
||||
|
||||
# Do not set API keys in code. Use environment variables or a secure secret manager.
|
||||
ta = TradingAgentsGraph(debug=True, config=config)
|
||||
|
||||
# Run the analysis
|
||||
jobs[job_id].progress = f"Analyzing {symbol} for {analysis_date}..."
|
||||
_, decision = ta.propagate(symbol, analysis_date)
|
||||
|
||||
print(_)
|
||||
print("Decision: ", decision)
|
||||
|
||||
# Define blocking work as sync function
|
||||
def _do_work():
|
||||
ta = TradingAgentsGraph(debug=True, config=config)
|
||||
jobs[job_id].progress = f"Analyzing {symbol} for {analysis_date}..."
|
||||
_, decision = ta.propagate(symbol, analysis_date)
|
||||
return decision
|
||||
|
||||
# Run blocking work in threadpool so the event loop stays responsive
|
||||
decision = await run_in_threadpool(_do_work)
|
||||
|
||||
jobs[job_id].status = "completed"
|
||||
jobs[job_id].result = {
|
||||
"symbol": symbol,
|
||||
"date": analysis_date,
|
||||
"decision": decision,
|
||||
"completed_at": datetime.now().isoformat()
|
||||
"completed_at": datetime.now().isoformat(),
|
||||
}
|
||||
jobs[job_id].progress = "Analysis completed successfully"
|
||||
|
||||
|
||||
except Exception as e:
|
||||
jobs[job_id].status = "failed"
|
||||
jobs[job_id].error = str(e)
|
||||
|
|
@ -320,6 +337,20 @@ async def get_specific_transformed_result(symbol: str, date: str):
|
|||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Error reading file: {str(e)}")
|
||||
|
||||
@app.get("/jobs")
|
||||
async def get_jobs():
|
||||
"""Get all jobs"""
|
||||
job_lst = []
|
||||
for job_id, job in jobs.items():
|
||||
job_lst.append({
|
||||
"job_id": job_id,
|
||||
"status": job.status,
|
||||
"progress": job.progress,
|
||||
"result": job.result,
|
||||
"error": job.error
|
||||
})
|
||||
return {"jobs": job_lst}
|
||||
|
||||
@app.get("/config")
|
||||
async def get_default_config():
|
||||
"""Get the default configuration"""
|
||||
|
|
@ -327,4 +358,4 @@ async def get_default_config():
|
|||
|
||||
if __name__ == "__main__":
|
||||
import uvicorn
|
||||
uvicorn.run(app, host="0.0.0.0", port=8000, reload=True)
|
||||
uvicorn.run(app, host="0.0.0.0", port=8000)
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ function App() {
|
|||
const [showDetailModal, setShowDetailModal] = useState(false);
|
||||
const [showWidgetsView, setShowWidgetsView] = useState(false);
|
||||
const [showTransformedDataModal, setShowTransformedDataModal] = useState(false);
|
||||
const [showJobsModal, setShowJobsModal] = useState(false);
|
||||
const [analysisForm, setAnalysisForm] = useState({ symbol: '', date: '' });
|
||||
const [isRunningAnalysis, setIsRunningAnalysis] = useState(false);
|
||||
const [selectedCompany, setSelectedCompany] = useState(null);
|
||||
|
|
@ -29,6 +30,11 @@ function App() {
|
|||
const [transformedCompanyFiles, setTransformedCompanyFiles] = useState([]);
|
||||
const [activeDetailTab, setActiveDetailTab] = useState(null);
|
||||
|
||||
// Job management state
|
||||
const [jobs, setJobs] = useState([]);
|
||||
const [jobsStats, setJobsStats] = useState({ total: 0, running: 0, completed: 0, failed: 0 });
|
||||
const [isLoadingJobs, setIsLoadingJobs] = useState(false);
|
||||
|
||||
// Fields to display as pretty cards in the Details modal
|
||||
const detailFields = useMemo(() => ([
|
||||
'market_report',
|
||||
|
|
@ -106,6 +112,10 @@ function App() {
|
|||
setShowResultsModal(false);
|
||||
return;
|
||||
}
|
||||
if (showJobsModal) {
|
||||
setShowJobsModal(false);
|
||||
return;
|
||||
}
|
||||
if (showAnalysisModal) {
|
||||
setShowAnalysisModal(false);
|
||||
}
|
||||
|
|
@ -113,7 +123,7 @@ function App() {
|
|||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [showDetailModal, showWidgetsView, showTransformedDataModal, showResultsModal, showAnalysisModal]);
|
||||
}, [showDetailModal, showWidgetsView, showTransformedDataModal, showResultsModal, showJobsModal, showAnalysisModal]);
|
||||
|
||||
useEffect(() => {
|
||||
checkBackendStatus();
|
||||
|
|
@ -140,6 +150,10 @@ function App() {
|
|||
setShowResultsModal(false);
|
||||
return;
|
||||
}
|
||||
if (showJobsModal) {
|
||||
setShowJobsModal(false);
|
||||
return;
|
||||
}
|
||||
if (showAnalysisModal) {
|
||||
setShowAnalysisModal(false);
|
||||
}
|
||||
|
|
@ -147,7 +161,7 @@ function App() {
|
|||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [showDetailModal, showWidgetsView, showTransformedDataModal, showResultsModal, showAnalysisModal]);
|
||||
}, [showDetailModal, showWidgetsView, showTransformedDataModal, showResultsModal, showJobsModal, showAnalysisModal]);
|
||||
|
||||
// Keep the active details tab in sync with available fields for the selected result
|
||||
useEffect(() => {
|
||||
|
|
@ -314,6 +328,7 @@ function App() {
|
|||
setShowDetailModal(false);
|
||||
setShowWidgetsView(false);
|
||||
setShowTransformedDataModal(false);
|
||||
setShowJobsModal(false);
|
||||
setSelectedResult(null);
|
||||
setResultDetail(null);
|
||||
setSelectedTransformedData(null);
|
||||
|
|
@ -331,6 +346,32 @@ function App() {
|
|||
}
|
||||
};
|
||||
|
||||
const fetchJobs = async () => {
|
||||
setIsLoadingJobs(true);
|
||||
try {
|
||||
const response = await axios.get('/jobs');
|
||||
const jobsData = response.data.jobs || [];
|
||||
setJobs(jobsData);
|
||||
const stats = {
|
||||
total: jobsData.length,
|
||||
running: jobsData.filter((job) => job.status === 'running').length,
|
||||
completed: jobsData.filter((job) => job.status === 'completed').length,
|
||||
failed: jobsData.filter((job) => job.status === 'failed').length,
|
||||
};
|
||||
setJobsStats(stats);
|
||||
} catch (error) {
|
||||
console.error('Error fetching jobs:', error);
|
||||
} finally {
|
||||
setIsLoadingJobs(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleViewJobResult = (job) => {
|
||||
setSelectedResult(job);
|
||||
setShowJobsModal(false);
|
||||
setShowResultsModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
{/* Header */}
|
||||
|
|
@ -421,7 +462,7 @@ function App() {
|
|||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<button
|
||||
onClick={handleStartAnalysis}
|
||||
className="group relative w-full flex justify-center py-8 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out"
|
||||
|
|
@ -460,6 +501,19 @@ function App() {
|
|||
<div className="text-sm opacity-90">View enhanced analyses</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowJobsModal(true)}
|
||||
className="group relative w-full flex justify-center py-8 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out"
|
||||
>
|
||||
<span className="absolute left-0 inset-y-0 flex items-center pl-3">
|
||||
<span className="text-2xl">📊</span>
|
||||
</span>
|
||||
<div className="text-center">
|
||||
<div className="text-lg font-semibold">Job Management</div>
|
||||
<div className="text-sm opacity-90">View and manage jobs</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -636,7 +690,7 @@ function App() {
|
|||
<AnalysisDataAdapter tradingResult={resultDetail} />
|
||||
) : (
|
||||
<div className="p-8 text-center">
|
||||
<div className="text-gray-500">Loading analysis data...</div>
|
||||
<div className="text-gray-500 mb-2">Loading analysis data...</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -717,15 +771,25 @@ function App() {
|
|||
<h3 className="text-lg font-medium text-gray-900">
|
||||
{selectedCompany ? `${selectedCompany} Analysis Results` : "Analysis Results"}
|
||||
</h3>
|
||||
<button
|
||||
onClick={closeAllModals}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<span className="sr-only">Close</span>
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
{selectedCompany && (
|
||||
<button
|
||||
onClick={() => { setSelectedCompany(null); setCompanyResults([]); }}
|
||||
className="text-sm px-3 py-1 rounded-md border text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={closeAllModals}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<span className="sr-only">Close</span>
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
|
|
@ -759,15 +823,6 @@ function App() {
|
|||
// Company results view
|
||||
<div>
|
||||
<div className="flex items-center mb-4">
|
||||
<button
|
||||
onClick={() => {setSelectedCompany(null); setCompanyResults([]);}}
|
||||
className="flex items-center text-indigo-600 hover:text-indigo-800 mr-4"
|
||||
>
|
||||
<svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
Back
|
||||
</button>
|
||||
<h4 className="text-lg font-semibold">{selectedCompany} Results</h4>
|
||||
</div>
|
||||
|
||||
|
|
@ -805,6 +860,154 @@ function App() {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Jobs Modal */}
|
||||
{showJobsModal && (
|
||||
<div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
|
||||
<div className="relative top-20 mx-auto p-5 border w-11/12 max-w-6xl shadow-lg rounded-md bg-white">
|
||||
<div className="mt-3">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-medium text-gray-900">Job Management</h3>
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={fetchJobs}
|
||||
className="text-sm px-3 py-1 rounded-md border text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
<button
|
||||
onClick={closeAllModals}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<span className="sr-only">Close</span>
|
||||
<svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Job Statistics */}
|
||||
<div className="grid grid-cols-4 gap-4 mb-6">
|
||||
<div className="bg-blue-50 p-3 rounded-lg text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">{jobsStats.total}</div>
|
||||
<div className="text-sm text-blue-800">Total Jobs</div>
|
||||
</div>
|
||||
<div className="bg-yellow-50 p-3 rounded-lg text-center">
|
||||
<div className="text-2xl font-bold text-yellow-600">{jobsStats.running}</div>
|
||||
<div className="text-sm text-yellow-800">Running</div>
|
||||
</div>
|
||||
<div className="bg-green-50 p-3 rounded-lg text-center">
|
||||
<div className="text-2xl font-bold text-green-600">{jobsStats.completed}</div>
|
||||
<div className="text-sm text-green-800">Completed</div>
|
||||
</div>
|
||||
<div className="bg-red-50 p-3 rounded-lg text-center">
|
||||
<div className="text-2xl font-bold text-red-600">{jobsStats.failed}</div>
|
||||
<div className="text-sm text-red-800">Failed</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isLoadingJobs ? (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-gray-500 mb-2">Loading jobs...</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="max-h-96 overflow-y-auto">
|
||||
{jobs.length > 0 ? (
|
||||
<div className="space-y-3">
|
||||
{jobs.map((job, index) => (
|
||||
<div key={job.job_id || index} className="bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
||||
job.status === 'completed' ? 'bg-green-100 text-green-800' :
|
||||
job.status === 'running' ? 'bg-yellow-100 text-yellow-800' :
|
||||
job.status === 'failed' ? 'bg-red-100 text-red-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{job.status === 'running' && '🔄'}
|
||||
{job.status === 'completed' && '✅'}
|
||||
{job.status === 'failed' && '❌'}
|
||||
{job.status}
|
||||
</span>
|
||||
<div className="font-medium text-gray-900">
|
||||
Job ID: {job.job_id}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{job.result && (
|
||||
<div className="text-sm text-gray-600 mb-1">
|
||||
<span className="font-medium">Symbol:</span> {job.result.symbol} |
|
||||
<span className="font-medium ml-2">Date:</span> {job.result.date}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{job.progress && (
|
||||
<div className="text-sm text-gray-500">
|
||||
{job.progress}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{job.error && (
|
||||
<div className="text-sm text-red-600 mt-1">
|
||||
Error: {job.error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{job.result && job.result.completed_at && (
|
||||
<div className="text-xs text-gray-400 mt-1">
|
||||
Completed: {new Date(job.result.completed_at).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
{job.status === 'completed' && job.result && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => handleViewJobResult(job)}
|
||||
className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
|
||||
>
|
||||
📈 View Results
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
const { symbol, date } = job.result;
|
||||
try {
|
||||
const response = await axios.get(`http://localhost:8000/results/transformed/${symbol}/${date}`);
|
||||
setSelectedTransformedData(response.data);
|
||||
setShowJobsModal(false);
|
||||
setShowTransformedDataModal(true);
|
||||
} catch (error) {
|
||||
console.error('Error fetching transformed result:', error);
|
||||
// Fallback to regular result view
|
||||
handleViewJobResult(job);
|
||||
}
|
||||
}}
|
||||
className="inline-flex items-center px-3 py-1 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
|
||||
>
|
||||
🔄 Visualize
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8">
|
||||
<div className="text-gray-500 mb-2">No jobs found</div>
|
||||
<div className="text-sm text-gray-400">Run a new analysis to see jobs here</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Detail Modal */}
|
||||
{showDetailModal && (
|
||||
<div className="fixed inset-0 bg-gray-900 bg-opacity-75 z-50">
|
||||
|
|
|
|||
|
|
@ -13,12 +13,23 @@ interface NewsItem {
|
|||
interface NewsFeedWidgetProps {
|
||||
symbol: string;
|
||||
maxItems?: number;
|
||||
onBack?: () => void;
|
||||
onRefresh?: () => void;
|
||||
}
|
||||
|
||||
const NewsFeedWidget: React.FC<NewsFeedWidgetProps> = ({ symbol, maxItems = 10 }) => {
|
||||
const NewsFeedWidget: React.FC<NewsFeedWidgetProps> = ({ symbol, maxItems = 10, onBack, onRefresh }) => {
|
||||
const [newsItems, setNewsItems] = useState<NewsItem[]>([]);
|
||||
const [filter, setFilter] = useState<'all' | 'macro' | 'company' | 'sector'>('all');
|
||||
|
||||
const handleBack = () => {
|
||||
if (onBack) return onBack();
|
||||
if (typeof window !== 'undefined' && window.history) window.history.back();
|
||||
};
|
||||
const handleRefresh = () => {
|
||||
if (onRefresh) return onRefresh();
|
||||
if (typeof window !== 'undefined') window.location.reload();
|
||||
};
|
||||
|
||||
// Mock news data - in production, this would come from your backend
|
||||
useEffect(() => {
|
||||
const mockNews: NewsItem[] = [
|
||||
|
|
@ -103,8 +114,31 @@ const NewsFeedWidget: React.FC<NewsFeedWidgetProps> = ({ symbol, maxItems = 10 }
|
|||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBack}
|
||||
className="p-2 rounded hover:bg-gray-100 text-gray-600"
|
||||
aria-label="Back"
|
||||
title="Back"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<h3 className="text-lg font-semibold">News Feed</h3>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRefresh}
|
||||
className="p-2 rounded hover:bg-gray-100 text-gray-600"
|
||||
aria-label="Refresh"
|
||||
title="Refresh"
|
||||
>
|
||||
⟳
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-lg font-semibold">News Feed</h3>
|
||||
<div className="flex-1" />
|
||||
<div className="flex space-x-2">
|
||||
{['all', 'macro', 'company', 'sector'].map((filterOption) => (
|
||||
<button
|
||||
|
|
@ -120,6 +154,7 @@ const NewsFeedWidget: React.FC<NewsFeedWidgetProps> = ({ symbol, maxItems = 10 }
|
|||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||
|
|
|
|||
|
|
@ -32,14 +32,49 @@ interface AnalysisData {
|
|||
interface AnalysisWidgetsProps {
|
||||
data: AnalysisData;
|
||||
rawData?: any;
|
||||
onBackWidget?: () => void;
|
||||
onRefreshWidget?: () => void;
|
||||
}
|
||||
|
||||
const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
||||
const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData, onBackWidget, onRefreshWidget }) => {
|
||||
const [activeTab, setActiveTab] = useState('bull');
|
||||
const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set());
|
||||
const [positionSize, setPositionSize] = useState(10000);
|
||||
const [portfolioAllocation, setPortfolioAllocation] = useState(4);
|
||||
|
||||
const handleBack = () => {
|
||||
if (onBackWidget) return onBackWidget();
|
||||
if (typeof window !== 'undefined' && window.history) window.history.back();
|
||||
};
|
||||
const handleRefresh = () => {
|
||||
if (onRefreshWidget) return onRefreshWidget();
|
||||
if (typeof window !== 'undefined') window.location.reload();
|
||||
};
|
||||
|
||||
const WidgetHeader: React.FC<{ title: string }> = ({ title }) => (
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleBack}
|
||||
className="p-2 rounded hover:bg-gray-100 text-gray-600"
|
||||
aria-label="Back"
|
||||
title="Back"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<h3 className="text-lg font-semibold text-gray-900">{title}</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleRefresh}
|
||||
className="p-2 rounded hover:bg-gray-100 text-gray-600"
|
||||
aria-label="Refresh"
|
||||
title="Refresh"
|
||||
>
|
||||
⟳
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Mock price data for chart
|
||||
const priceData = [
|
||||
{ date: '2024-07-01', price: 4.20, volume: 1200000 },
|
||||
|
|
@ -107,7 +142,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
{/* Stock Price Chart */}
|
||||
<div className="lg:col-span-2 bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Stock Price Chart</h3>
|
||||
<WidgetHeader title="Stock Price Chart" />
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<LineChart data={priceData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
|
|
@ -131,7 +166,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
|
||||
{/* Technical Indicators Dashboard */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Technical Indicators</h3>
|
||||
<WidgetHeader title="Technical Indicators" />
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-gray-600">RSI</span>
|
||||
|
|
@ -186,7 +221,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
||||
{/* Bull vs Bear Debate Viewer */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Bull vs Bear Debate</h3>
|
||||
<WidgetHeader title="Bull vs Bear Debate" />
|
||||
<div className="flex space-x-1 mb-4">
|
||||
<button
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium ${
|
||||
|
|
@ -242,7 +277,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
|
||||
{/* Investment Plan Timeline */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Investment Plan Timeline</h3>
|
||||
<WidgetHeader title="Investment Plan Timeline" />
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center">
|
||||
<div className="w-4 h-4 bg-blue-500 rounded-full mr-4"></div>
|
||||
|
|
@ -280,7 +315,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
{/* Risk Assessment Gauge */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Risk Assessment</h3>
|
||||
<WidgetHeader title="Risk Assessment" />
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<div className="relative w-32 h-32">
|
||||
<svg className="w-32 h-32 transform -rotate-90" viewBox="0 0 36 36">
|
||||
|
|
@ -314,7 +349,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
|
||||
{/* Position Calculator */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Position Calculator</h3>
|
||||
<WidgetHeader title="Position Calculator" />
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
|
|
@ -350,7 +385,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
|
||||
{/* Sentiment Thermometer */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Sentiment Thermometer</h3>
|
||||
<WidgetHeader title="Sentiment Thermometer" />
|
||||
<div className="flex items-center justify-center mb-4">
|
||||
<div className="w-8 h-32 bg-gray-200 rounded-full relative">
|
||||
<div
|
||||
|
|
@ -376,12 +411,12 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
{/* News Feed Widget */}
|
||||
<div className="lg:col-span-1">
|
||||
<NewsFeedWidget symbol={data.symbol} maxItems={8} />
|
||||
<NewsFeedWidget symbol={data.symbol} maxItems={8} onBack={handleBack} onRefresh={handleRefresh} />
|
||||
</div>
|
||||
|
||||
{/* Earnings Countdown Timer */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Earnings Countdown</h3>
|
||||
<WidgetHeader title="Earnings Countdown" />
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-blue-600 mb-2">{data.earningsDate}</p>
|
||||
<p className="text-sm text-gray-600 mb-4">Next Earnings Call</p>
|
||||
|
|
@ -399,7 +434,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
|
||||
{/* Ownership Structure Pie Chart */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Ownership Structure</h3>
|
||||
<WidgetHeader title="Ownership Structure" />
|
||||
<ResponsiveContainer width="100%" height={200}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
|
|
@ -422,7 +457,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
|
||||
{/* Decision History Tracker */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6 mb-8">
|
||||
<h3 className="text-lg font-semibold mb-4">Decision History Tracker</h3>
|
||||
<WidgetHeader title="Decision History Tracker" />
|
||||
<div className="relative">
|
||||
<div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-300"></div>
|
||||
<div className="space-y-6">
|
||||
|
|
@ -460,7 +495,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
<div className="space-y-6">
|
||||
{/* Executive Summary Box */}
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Executive Summary</h3>
|
||||
<WidgetHeader title="Executive Summary" />
|
||||
<div className="bg-blue-50 border-l-4 border-blue-400 p-4">
|
||||
<p className="text-sm">
|
||||
<strong>Final Recommendation: {data.finalDecision}</strong> - {data.decisionReasoning}
|
||||
|
|
@ -500,7 +535,7 @@ const AnalysisWidgets: React.FC<AnalysisWidgetsProps> = ({ data, rawData }) => {
|
|||
{/* Raw Data Viewer */}
|
||||
{rawData && (
|
||||
<div className="bg-white rounded-lg shadow-md p-6">
|
||||
<h3 className="text-lg font-semibold mb-4">Detailed Analysis Data</h3>
|
||||
<WidgetHeader title="Detailed Analysis Data" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{Object.entries(rawData).map(([key, value]) => (
|
||||
<div key={key} className="space-y-2">
|
||||
|
|
|
|||
Loading…
Reference in New Issue