admin
9e3cc99bed
- Core infrastructure: Zustand store, API client with mock fallback - Mode detection: Port 8080 (kiosk) / 9090 (remote) - Dashboard components: RainfallCard, ClockDisplay, CommStatus - Header components: VoltageDisplay, BatteryStatus, LoginIndicator - Data polling with visibility awareness - Bundle size: ~100KB gzipped Also adds README.md and WIKI.md documentation
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
|
|
import { BarChart3 } from "lucide-react";
|
|
|
|
export function GraphView() {
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<BarChart3 className="w-6 h-6 text-blue-400" />
|
|
<h1 className="text-2xl font-bold text-white">Graph View</h1>
|
|
</div>
|
|
|
|
<Card className="bg-gray-900 border-gray-700">
|
|
<CardHeader>
|
|
<CardTitle className="text-white">Data Visualization</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="h-64 bg-gray-800 rounded flex items-center justify-center">
|
|
<span className="text-gray-500">Chart visualization area</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<Card className="bg-gray-900 border-gray-700">
|
|
<CardContent className="pt-6">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-blue-400">24h</div>
|
|
<div className="text-sm text-gray-400 mt-1">Time Range</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-gray-900 border-gray-700">
|
|
<CardContent className="pt-6">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-green-400">156</div>
|
|
<div className="text-sm text-gray-400 mt-1">Data Points</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-gray-900 border-gray-700">
|
|
<CardContent className="pt-6">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-purple-400">12.5</div>
|
|
<div className="text-sm text-gray-400 mt-1">Avg Value</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|