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

AnalyticsDashboard Component

Overview​

The AnalyticsDashboard provides comprehensive traffic analytics visualization including real-time metrics, historical trends, accident frequency analysis, and correlation insights.

Features​

  • Real-time Metrics: Live traffic statistics and KPIs
  • Charts & Graphs: Line charts, bar charts, heatmaps, pie charts
  • Accident Analysis: Frequency, severity distribution, hotspots
  • Traffic Patterns: Peak hours, seasonal trends
  • Correlation Analysis: Weather-traffic, time-based correlations
  • Export Capabilities: Download data as CSV, PDF reports

Props​

interface AnalyticsDashboardProps {
  timeRange?: '24h' | '7d' | '30d' | '1y';
  locations?: string[];
  refreshInterval?: number;           // Auto-refresh (ms)
  showRealtime?: boolean;
  showTrends?: boolean;
  showCorrelations?: boolean;
}

Usage​

Basic Usage​

import AnalyticsDashboard from '@/components/AnalyticsDashboard';

export default function AnalyticsPage() {
  return (
    <AnalyticsDashboard
      timeRange="7d"
      showRealtime={true}
      showTrends={true}
    />
  );
}

Advanced Usage​

<AnalyticsDashboard
  timeRange="30d"
  locations={['District 1', 'District 3']}
  refreshInterval={60000}
  showRealtime={true}
  showTrends={true}
  showCorrelations={true}
  onExport={(format) => handleExport(format)}
/>

Component Structure​

const AnalyticsDashboard: React.FC<AnalyticsDashboardProps> = ({
  timeRange = '7d',
  locations,
  refreshInterval = 60000,
  showRealtime = true,
  showTrends = true,
  showCorrelations = false
}) => {
  const { data, loading } = useAnalytics(timeRange, locations);
  
  return (
    <div className="analytics-dashboard">
      {showRealtime && (
        <div className="metrics-section">
          <MetricCard title="Total Vehicles" value={data.totalVehicles} />
          <MetricCard title="Avg Speed" value={data.avgSpeed} unit="km/h" />
          <MetricCard title="Accidents Today" value={data.accidentsToday} />
          <MetricCard title="Congestion Level" value={data.congestionLevel} />
        </div>
      )}
      
      {showTrends && (
        <div className="trends-section">
          <LineChart data={data.hourlyTrend} title="Traffic Trend" />
          <BarChart data={data.locationBreakdown} title="By Location" />
        </div>
      )}
      
      {showCorrelations && (
        <CorrelationPanel data={data.correlations} />
      )}
      
      <AccidentFrequencyChart data={data.accidents} />
    </div>
  );
};

Charts​

Traffic Trend Chart​

<LineChart
  data={hourlyData}
  xAxis="time"
  yAxis="vehicle_count"
  title="24-Hour Traffic Trend"
  color="#1976d2"
/>

Accident Frequency​

<AccidentFrequencyChart
  data={accidentData}
  groupBy="hour"
  showSeverity={true}
/>

Heatmap​

<Heatmap
  data={congestionData}
  xAxis="hour"
  yAxis="day"
  colorScheme="YlOrRd"
/>

Integration Examples​

With Date Picker​

const [dateRange, setDateRange] = useState<DateRange>({
  start: new Date('2025-11-20'),
  end: new Date('2025-12-05')
});

<DateRangePicker value={dateRange} onChange={setDateRange} />
<AnalyticsDashboard customDateRange={dateRange} />

With Export​

const handleExport = (format: 'csv' | 'pdf') => {
  if (format === 'csv') {
    exportToCSV(analyticsData);
  } else {
    generatePDFReport(analyticsData);
  }
};

<AnalyticsDashboard onExport={handleExport} />

Styling​

.analytics-dashboard {
  padding: 24px;
  background: #f5f5f5;
}

.metrics-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.trends-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

Performance​

  • Virtualized data rendering
  • Memoized chart calculations
  • Lazy loading for historical data
  • Request debouncing

License​

MIT License - Copyright (c) 2025 UIP Contributors (Nguyễn Nhật Quang, Nguyễn Việt Hoàng, Nguyễn Đình Anh Tuấn)