observatory
This commit is contained in:
parent
bb20cdbc90
commit
1ea4f0eae0
@ -47,7 +47,7 @@ export function ObservatoryMap({
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw world map background (simplified)
|
||||
ctx.fillStyle = '#f5f5f5';
|
||||
ctx.fillStyle = '#f9f9f9';
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Draw grid lines for better visualization
|
||||
@ -55,7 +55,7 @@ export function ObservatoryMap({
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
// Horizontal grid lines
|
||||
for (let y = 0; y < canvas.height; y += 40) {
|
||||
for (let y = 0; y < canvas.height; y += 50) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(canvas.width, y);
|
||||
@ -63,40 +63,82 @@ export function ObservatoryMap({
|
||||
}
|
||||
|
||||
// Vertical grid lines
|
||||
for (let x = 0; x < canvas.width; x += 40) {
|
||||
for (let x = 0; x < canvas.width; x += 50) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, canvas.height);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw country markers (in random positions)
|
||||
countries.forEach((country, index) => {
|
||||
// Generate random positions (in a real app, we would use actual coordinates)
|
||||
const x = (index * 60 + 100) % (canvas.width - 80);
|
||||
const y = 60 + Math.floor(index / 4) * 70;
|
||||
// Draw country markers at more fixed positions
|
||||
countries.forEach((country) => {
|
||||
// Position based on country name (simplified)
|
||||
let x, y;
|
||||
|
||||
// Very simple positioning logic
|
||||
switch(country.name) {
|
||||
case 'Sudan':
|
||||
x = canvas.width * 0.55;
|
||||
y = canvas.height * 0.45;
|
||||
break;
|
||||
case 'Ukraine':
|
||||
x = canvas.width * 0.65;
|
||||
y = canvas.height * 0.25;
|
||||
break;
|
||||
case 'USA':
|
||||
case 'New York':
|
||||
x = canvas.width * 0.25;
|
||||
y = canvas.height * 0.35;
|
||||
break;
|
||||
case 'UK':
|
||||
x = canvas.width * 0.45;
|
||||
y = canvas.height * 0.25;
|
||||
break;
|
||||
case 'France':
|
||||
x = canvas.width * 0.48;
|
||||
y = canvas.height * 0.30;
|
||||
break;
|
||||
case 'China':
|
||||
x = canvas.width * 0.75;
|
||||
y = canvas.height * 0.35;
|
||||
break;
|
||||
case 'Russia':
|
||||
x = canvas.width * 0.70;
|
||||
y = canvas.height * 0.20;
|
||||
break;
|
||||
case 'India':
|
||||
x = canvas.width * 0.70;
|
||||
y = canvas.height * 0.40;
|
||||
break;
|
||||
case 'Brazil':
|
||||
x = canvas.width * 0.35;
|
||||
y = canvas.height * 0.60;
|
||||
break;
|
||||
case 'Australia':
|
||||
x = canvas.width * 0.80;
|
||||
y = canvas.height * 0.65;
|
||||
break;
|
||||
default:
|
||||
// Random position for other countries
|
||||
x = 100 + Math.random() * (canvas.width - 200);
|
||||
y = 100 + Math.random() * (canvas.height - 200);
|
||||
}
|
||||
|
||||
// Draw marker
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, country.count > 5 ? 8 : (country.count > 2 ? 6 : 4), 0, Math.PI * 2);
|
||||
ctx.arc(x, y, 6, 0, Math.PI * 2);
|
||||
|
||||
// Highlight selected country
|
||||
if (selectedCountry === country.name) {
|
||||
ctx.fillStyle = '#3b82f6';
|
||||
ctx.strokeStyle = '#2563eb';
|
||||
} else {
|
||||
ctx.fillStyle = '#f87171';
|
||||
ctx.strokeStyle = '#ef4444';
|
||||
}
|
||||
// Simple color
|
||||
ctx.fillStyle = country.name === 'Sudan' ? '#f87171' : '#cbd5e1';
|
||||
|
||||
ctx.fill();
|
||||
ctx.lineWidth = 1;
|
||||
ctx.stroke();
|
||||
|
||||
// Draw country name
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.font = '12px Inter, system-ui, sans-serif';
|
||||
ctx.fillText(country.name, x + 14, y + 4);
|
||||
// Draw country name if it's Sudan or selected
|
||||
if (country.name === 'Sudan' || country.name === selectedCountry) {
|
||||
ctx.fillStyle = '#374151';
|
||||
ctx.font = '12px system-ui, sans-serif';
|
||||
ctx.fillText(country.name, x + 10, y + 4);
|
||||
}
|
||||
|
||||
// Store coordinates for click detection
|
||||
country.x = x;
|
||||
@ -116,7 +158,7 @@ export function ObservatoryMap({
|
||||
Math.pow(x - country.x, 2) + Math.pow(y - country.y, 2)
|
||||
);
|
||||
|
||||
if (distance <= 10) {
|
||||
if (distance <= 8) {
|
||||
onCountrySelect(country.name);
|
||||
break;
|
||||
}
|
||||
@ -134,7 +176,7 @@ export function ObservatoryMap({
|
||||
}, [countries, selectedCountry, onCountrySelect]);
|
||||
|
||||
return (
|
||||
<div className="w-full h-full bg-gray-50 relative">
|
||||
<div className="w-full h-full">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="w-full h-full"
|
||||
|
||||
@ -57,7 +57,7 @@ export function ObservatoryView() {
|
||||
const countries = [
|
||||
'France', 'USA', 'Canada', 'UK', 'Germany', 'Japan', 'China',
|
||||
'India', 'Brazil', 'Australia', 'Russia', 'Italy', 'Spain',
|
||||
'Sudan', 'New York', 'United Nations'
|
||||
'Sudan', 'New York', 'United Nations', 'Ukraine'
|
||||
];
|
||||
|
||||
const result: Record<string, NewsItem[]> = {};
|
||||
@ -95,7 +95,7 @@ export function ObservatoryView() {
|
||||
// Loading state
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="w-full h-[calc(100vh-8rem)] flex items-center justify-center">
|
||||
<div className="w-full h-[calc(100vh-2rem)] flex items-center justify-center">
|
||||
<RefreshCw className="h-10 w-10 animate-spin text-gray-400" />
|
||||
</div>
|
||||
);
|
||||
@ -104,7 +104,7 @@ export function ObservatoryView() {
|
||||
// Error state
|
||||
if (error) {
|
||||
return (
|
||||
<div className="w-full h-[calc(100vh-8rem)] flex flex-col items-center justify-center">
|
||||
<div className="w-full h-[calc(100vh-2rem)] flex flex-col items-center justify-center">
|
||||
<p className="text-red-500 mb-4">{error}</p>
|
||||
<Button onClick={fetchNews}>Retry</Button>
|
||||
</div>
|
||||
@ -113,115 +113,72 @@ export function ObservatoryView() {
|
||||
|
||||
const filteredNews = getFilteredNews();
|
||||
const countriesMap = extractCountries(news);
|
||||
const countries = Object.keys(countriesMap);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-2">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between bg-white rounded-lg shadow px-4 py-3 mb-4">
|
||||
<h1 className="text-xl font-medium flex items-center gap-2">
|
||||
<Globe className="h-5 w-5 text-gray-600" />
|
||||
News Observatory
|
||||
</h1>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={fetchNews}
|
||||
className="flex items-center"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="w-full h-[calc(100vh-2rem)] bg-[#f5f4ef] pt-16 px-12">
|
||||
{/* Main Content */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
|
||||
{/* News Feed Section - Narrower */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card className="bg-white shadow border-0 rounded-lg overflow-hidden">
|
||||
<CardHeader className="px-4 py-3 border-b border-gray-100 bg-white">
|
||||
<CardTitle className="text-lg font-medium">
|
||||
{selectedCountry ? `News about ${selectedCountry}` : 'Latest News'}
|
||||
<span className="text-sm font-normal ml-2 text-gray-500">
|
||||
({filteredNews.length} articles)
|
||||
</span>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
|
||||
<div className="grid grid-cols-2 gap-4 h-[calc(100vh-6rem)]">
|
||||
{/* News Feed Section */}
|
||||
<div>
|
||||
<div className="bg-white rounded-lg overflow-hidden h-full flex flex-col">
|
||||
<div className="px-4 py-3 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium">
|
||||
Latest News
|
||||
<span className="text-sm font-normal ml-2 text-gray-500">
|
||||
({filteredNews.length} articles)
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-y-auto flex-grow">
|
||||
<div className="divide-y divide-gray-100">
|
||||
{filteredNews.length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-10">No news available</p>
|
||||
) : (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{filteredNews.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
onClick={() => window.open(item.url, '_blank')}
|
||||
>
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 mb-1">
|
||||
<span>{item.displayDate}</span>
|
||||
<span>{item.source}</span>
|
||||
</div>
|
||||
<h3 className="text-base font-medium text-gray-800 mb-1">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 line-clamp-2">
|
||||
{item.description}
|
||||
</p>
|
||||
filteredNews.map(item => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="px-4 py-5 hover:bg-gray-50 transition-colors cursor-pointer"
|
||||
onClick={() => window.open(item.url, '_blank')}
|
||||
>
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 mb-1">
|
||||
<span>{item.displayDate}</span>
|
||||
<span>Unknown</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<h3 className="text-base font-medium text-gray-800 mb-1">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 line-clamp-2">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map Section - Wider */}
|
||||
<div className="lg:col-span-3">
|
||||
<Card className="bg-white shadow border-0 rounded-lg overflow-hidden">
|
||||
<CardHeader className="px-4 py-3 border-b border-gray-100 bg-white">
|
||||
<CardTitle className="text-lg font-medium">
|
||||
World Map
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{/* Map Container */}
|
||||
<div className="h-[500px]">
|
||||
<ObservatoryMap
|
||||
countries={Object.entries(countriesMap).map(([name, items]) => ({
|
||||
name,
|
||||
count: items.length
|
||||
}))}
|
||||
onCountrySelect={handleCountrySelect}
|
||||
selectedCountry={selectedCountry}
|
||||
/>
|
||||
{/* Map Section */}
|
||||
<div>
|
||||
<div className="bg-white rounded-lg overflow-hidden h-full flex flex-col">
|
||||
<div className="px-4 py-3 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium">World Map</h2>
|
||||
</div>
|
||||
|
||||
{/* Countries List */}
|
||||
<div className="px-4 py-3 border-t border-gray-100">
|
||||
<h4 className="text-sm font-medium mb-2">Mentioned Countries:</h4>
|
||||
{countries.length === 0 ? (
|
||||
<p className="text-sm text-gray-500">No countries detected</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{countries.map(country => (
|
||||
<Button
|
||||
key={country}
|
||||
variant={selectedCountry === country ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => handleCountrySelect(country)}
|
||||
className="text-xs"
|
||||
>
|
||||
{country} ({countriesMap[country].length})
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<ObservatoryMap
|
||||
countries={Object.entries(countriesMap).map(([name, items]) => ({
|
||||
name,
|
||||
count: items.length
|
||||
}))}
|
||||
onCountrySelect={handleCountrySelect}
|
||||
selectedCountry={selectedCountry}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user