Skip to content

README.md

Latest commit

 

History

History
50 lines (35 loc) · 1.42 KB

README.md

File metadata and controls

50 lines (35 loc) · 1.42 KB

Airlines Tracker Using Gantt Chart

This repository contains a React application visualizing airline flight schedules using Syncfusion Gantt chart. It demonstrates how Gantt charts adapt for time‑based resource scheduling beyond traditional project management.

Features

  • Resource view Gantt chart with flights grouped by airport
  • Custom taskbar templates for active, completed, and upcoming flights
  • Rich tooltip cards with departure, arrival, and aircraft details
  • Day and hour timeline with event markers
  • Built with @syncfusion/ej2-react-gantt

Prerequisites

  • Node.js ( LTS or later )
  • npm

Installation and Run

npm install
npm start

Open the application at http://localhost:3000

How It Works

Data configuration (src/data.js):

  • Flight schedules (TimeTable) and resources

Application setup (src/index.js):

  • taskFields and resourceFields
  • labelSettings for departure and arrival labels
  • taskbarTemplate to differentiate flight status
  • tooltipSettings for details
  • viewType set to ResourceView

Notes

  • "Current time" hardcoded as 02/13/2021 15:25:00
  • Dep = flight start time, Journey = duration in hours
  • Static data without real‑time updates

Use Cases

This repository demonstrates:

  • Modeling non-project data in Gantt charts
  • Resource view for scheduling scenarios
  • Customizing taskbars and tooltips in Syncfusion React Gantt