Chuyển tới nội dung chính

Dashboard Page

Main traffic monitoring interface integrating traffic map, sidebar controls, and analytics panel with real-time WebSocket updates.

Overview​

The Dashboard page is the primary interface for the Urban Intelligence Platform, orchestrating:

  • Real-time traffic map with 8+ overlay layers
  • Sidebar with filters, layer controls, and AI agent panels
  • Analytics dashboard with charts and metrics
  • WebSocket connection for live data updates
  • Zustand store integration for state management
graph TD
    A[Dashboard] --> B[Sidebar]
    A --> C[TrafficMap]
    A --> D[AnalyticsDashboard]
    A --> E[WebSocket Service]
    A --> F[Traffic Store]
    
    B --> G[Layer Controls]
    B --> H[Filters]
    B --> I[AI Agents]
    
    C --> J[Camera Markers]
    C --> K[Heatmaps]
    C --> L[Zones]
    
    D --> M[Charts]
    D --> N[Metrics]

Component Architecture​

const Dashboard: React.FC = () => {
    const { refreshData, loading, error } = useTrafficStore();
    const [isAnalyticsOpen, setIsAnalyticsOpen] = useState(false);
    const [isInitialized, setIsInitialized] = useState(false);
    const trafficMapRef = useRef<any>(null);

    useEffect(() => {
        const initializeApp = async () => {
            await refreshData();
            setIsInitialized(true);
            wsService.connect();
        };
        initializeApp();
        return () => wsService.disconnect();
    }, [refreshData]);

    return (
        <div className="flex h-screen w-screen overflow-hidden bg-gray-50">
            <Sidebar onCameraSelect={...} onZoomToCamera={...} onZoomToDistrict={...} />
            <div className="flex-1 relative">
                <TrafficMap ref={trafficMapRef} />
                <AnalyticsDashboard isOpen={isAnalyticsOpen} onToggle={...} />
            </div>
        </div>
    );
};

Features​

Loading States​

  • Animated spinner during initial data load
  • Gradient background with pulse animation
  • Progress indicators for initialization

Error Handling​

  • Error state display with retry button
  • Error icon and descriptive message
  • Graceful degradation when data load fails

Child Components​

ComponentPurposeRef Methods
SidebarLayer controls, filters, AI agents-
TrafficMapInteractive MapLibre maphandleCameraClick, handleZoomToCamera, handleZoomToDistrict
AnalyticsDashboardCollapsible charts panel-

Usage​

// In App.tsx router
import Dashboard from './pages/Dashboard';

<Route path="/dashboard" element={<Dashboard />} />

Dependencies​

  • react@^18.2: UI library
  • TrafficMap, Sidebar, AnalyticsDashboard: Child components
  • wsService: WebSocket connection management
  • useTrafficStore: Zustand global state

See Also​