|
1 | | -# Airlines-tracker-using-gantt-chart |
2 | | -In this demo sample, customized Gantt chart to track the airlines live status from different airports using templates, events in React. |
| 1 | +# Airlines Tracker Using Gantt Chart |
3 | 2 |
|
4 | | -### `npm start` |
| 3 | +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. |
5 | 4 |
|
6 | | -Runs the app in the development mode.<br /> |
7 | | -Open [http://localhost:3000](http://localhost:3000) to view it in the browser. |
| 5 | +## Features |
8 | 6 |
|
9 | | -The page will reload if you make edits.<br /> |
10 | | -You will also see any lint errors in the console. |
| 7 | +- **Resource view Gantt chart** with flights grouped by airport |
| 8 | +- **Custom taskbar templates** for active, completed, and upcoming flights |
| 9 | +- **Rich tooltip cards** with departure, arrival, and aircraft details |
| 10 | +- **Day and hour timeline** with event markers |
| 11 | +- **Built with** `@syncfusion/ej2-react-gantt` |
| 12 | + |
| 13 | +## Prerequisites |
| 14 | + |
| 15 | +- Node.js ( LTS or later ) |
| 16 | +- npm |
| 17 | + |
| 18 | +## Installation and Run |
| 19 | + |
| 20 | +```bash |
| 21 | +npm install |
| 22 | +npm start |
| 23 | +``` |
| 24 | + |
| 25 | +Open the application at `http://localhost:3000` |
| 26 | + |
| 27 | +## How It Works |
| 28 | + |
| 29 | +**Data configuration** (`src/data.js`): |
| 30 | +- Flight schedules (`TimeTable`) and resources |
| 31 | + |
| 32 | +**Application setup** (`src/index.js`): |
| 33 | +- `taskFields` and `resourceFields` |
| 34 | +- `labelSettings` for departure and arrival labels |
| 35 | +- `taskbarTemplate` to differentiate flight status |
| 36 | +- `tooltipSettings` for details |
| 37 | +- `viewType` set to `ResourceView` |
| 38 | + |
| 39 | +## Notes |
| 40 | + |
| 41 | +- "Current time" hardcoded as `02/13/2021 15:25:00` |
| 42 | +- `Dep` = flight start time, `Journey` = duration in hours |
| 43 | +- Static data without real‑time updates |
| 44 | + |
| 45 | +## Use Cases |
| 46 | + |
| 47 | +This repository demonstrates: |
| 48 | +- Modeling non-project data in Gantt charts |
| 49 | +- Resource view for scheduling scenarios |
| 50 | +- Customizing taskbars and tooltips in Syncfusion React Gantt |
0 commit comments