TimeMachine

An interactive time navigation component for viewing historical traffic data.

📋 Overview

Property	Value
File	src/components/TimeMachine.tsx
Type	React Functional Component
Author	UIP Team
Version	1.0.0

🎯 Purpose

• Navigate to historical timestamps
• Playback traffic over time
• Compare different time periods
• Quick jump to common times

🚀 Usage

import { TimeMachine } from '@/components/TimeMachine';

function Dashboard() {
  return (
    <TimeMachine
      currentTime={selectedTime}
      onChange={handleTimeChange}
      onPlayback={handlePlayback}
    />
  );
}

📦 Props

Prop	Type	Required	Default	Description
currentTime	Date	Yes	-	Selected time
onChange	(time: Date) => void	Yes	-	Time change handler
onPlayback	(playing: boolean) => void	No	-	Playback handler
minTime	Date	No	7 days ago	Earliest time
maxTime	Date	No	Now	Latest time
step	number	No	300	Step in seconds

🎛️ Controls

Control	Function
Date Picker	Select specific date
Time Slider	Fine-tune time
Play/Pause	Playback control
Speed	Playback speed
Presets	Quick jumps

📖 Related Components

• HistoricalViewBanner - View indicator
• TrafficMap - Map display
• AnalyticsDashboard - Analytics

---

See the complete components reference for all available components.