Deepvest/ProfilingAI

1import React from 'react';2import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';3import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';4 5interface MarketData {6  currentRegime: string;7  marketSentiment: number;8  volatilityLevel: number;9  metrics: {10    var95: number;11    sharpeRatio: number;12    beta: number;13  };14  history: Array<{15    date: string;16    volatility: number;17    sentiment: number;18  }>;19}20 21const MarketAnalysis: React.FC<{ data: MarketData }> = ({ data }) => {22  const getSentimentColor = (sentiment: number): string => {23    if (sentiment > 0.6) return 'text-green-600';24    if (sentiment < 0.4) return 'text-red-600';25    return 'text-yellow-600';26  };27 28  return (29    <div className="space-y-6">30      {/* Conditions actuelles */}31      <Card>32        <CardHeader>33          <CardTitle>Conditions de marché actuelles</CardTitle>34        </CardHeader>35        <CardContent>36          <div className="grid grid-cols-3 gap-4">37            <div className="text-center">38              <h3 className="text-sm font-medium text-gray-500">Régime</h3>39              <p className="mt-1 text-lg font-semibold text-gray-900">40                {data.currentRegime}41              </p>42            </div>43            <div className="text-center">44              <h3 className="text-sm font-medium text-gray-500">Sentiment</h3>45              <p className={`mt-1 text-lg font-semibold ${getSentimentColor(data.marketSentiment)}`}>46                {(data.marketSentiment * 100).toFixed(1)}%47              </p>48            </div>49            <div className="text-center">50              <h3 className="text-sm font-medium text-gray-500">Volatilité</h3>51              <p className="mt-1 text-lg font-semibold text-gray-900">52                {(data.volatilityLevel * 100).toFixed(1)}%53              </p>54            </div>55          </div>56        </CardContent>57      </Card>58 59      {/* Métriques de risque */}60      <Card>61        <CardHeader>62          <CardTitle>Métriques de risque</CardTitle>63        </CardHeader>64        <CardContent>65          <div className="grid grid-cols-3 gap-4">66            <div className="p-4 bg-gray-50 rounded text-center">67              <h4 className="text-sm font-medium text-gray-500">VaR (95%)</h4>68              <p className="mt-1 text-lg font-semibold text-gray-900">69                {(data.metrics.var95 * 100).toFixed(1)}%70              </p>71            </div>72            <div className="p-4 bg-gray-50 rounded text-center">73              <h4 className="text-sm font-medium text-gray-500">Ratio de Sharpe</h4>74              <p className="mt-1 text-lg font-semibold text-gray-900">75                {data.metrics.sharpeRatio.toFixed(2)}76              </p>77            </div>78            <div className="p-4 bg-gray-50 rounded text-center">79              <h4 className="text-sm font-medium text-gray-500">Beta</h4>80              <p className="mt-1 text-lg font-semibold text-gray-900">81                {data.metrics.beta.toFixed(2)}82              </p>83            </div>84          </div>85        </CardContent>86      </Card>87 88      {/* Graphique d'évolution */}89      <Card>90        <CardHeader>91          <CardTitle>Évolution des indicateurs</CardTitle>92        </CardHeader>93        <CardContent>94          <div className="h-96">95            <ResponsiveContainer width="100%" height="100%">96              <LineChart data={data.history}>97                <CartesianGrid strokeDasharray="3 3" className="stroke-gray-200" />98                <XAxis dataKey="date" className="text-xs" />99                <YAxis className="text-xs" />100                <Tooltip />101                <Legend />102                <Line 103                  type="monotone" 104                  dataKey="volatility" 105                  stroke="#ef4444" 106                  name="Volatilité"107                  strokeWidth={2}108                  dot={false}109                />110                <Line 111                  type="monotone" 112                  dataKey="sentiment" 113                  stroke="#3b82f6" 114                  name="Sentiment"115                  strokeWidth={2}116                  dot={false}117                />118              </LineChart>119            </ResponsiveContainer>120          </div>121        </CardContent>122      </Card>123    </div>124  );125};126 127export default MarketAnalysis;128