4d-gantt-chart NPM

🚀 4D Gantt

📖 About

This package has started as an idea to create Gantt Chart suited for the construction industry. The inital code was inspired by the blog of Artem aka @shybovycha. The project is open source and can be found here.

📝 Description

This library is developed to fill a gap in the opensource community for tools that could deal with schedules in construction in general. The main focus of the library is the ability to play animation using the timeline so it could integrate with other tools like BIM and libraries like ifc.js and three.js.

This library is part of a suite of libraries developed primairly for planners and project controllers like the PyP6XER library that can be used to read and write P6 XER files.

The package is developed using TypeScript and it is still work in progress.

📦 Installation

The plan for the package is to be published on npmjs.com. However, it is not ready yet. The package can be installed using the following command:

npm install 4d-gantt

🚀 Usage

Demo

You can see a live demo of the project here.

📜 License

📜TODO

Modify task list to be a treetable. This should show heirarichal structure of the wbs and activities section 6 in the image
Automate the chart from and to date by getting them from data
Modify the data structure of tasks to be a list of tasks where a task is defined as

[
{id: 1, name:"Task 1", start: new Date("2022/1/1"), end: new Date("2022/3/1"), parent: null},
{id: 2, name:"Task 2", start: new Date("2022/2/1"), end: new Date("2022/3/1"), parent: 1}
]

Create current Date line to show with 4D simulation.
Make sections resizable i.e. the treetable and the chart area
Package could be publish to npmjs as a reusable package
Add events handlers on taskClicked
Allow user to change timescale to years, months, weeks, days
Allow for multiple themes or even colors setting during development
Change the timescales to show either day, week, month or year
Optimise performance for large schedules
create toolbar to manupilate the Gantt chart with tools like collapse all, expand all, zoom in, zoom out, etc.
Enable dynamic selection of columns