javascriptgantt 1.2.0 → 1.3.0

package/readme.md

@@ -1,158 +1,405 @@
-# javascriptgantt Chart Library Documentation  
-  
-
-## Introduction  
-Welcome to the documentation for [javascriptgantt](https://sunilsolankiji.github.io/javascriptgantt/) Chart Library. This library provides a powerful set of tools and functionalities to create interactive Gantt charts for project management. This documentation will guide you through the installation process, usage instructions, and available features of the library.   
-  
-
-## Table of Contents 
-- [Installation](#installation)
-- [Getting Started](#getting-started) 
-- [Features](#features)   
-    
----  
-  
-<a name="installation"></a>
-## Installation   
-  
-To integrate the Gantt Chart Library, adhere to the steps below:  
-  
-  1. Download the library files from our website or repository.  
-  2. Integrate the library files (`gantt.js` and `gantt.css`) into your project.  
-  3. Link the library files in your HTML file.  
-  4. You're now ready to start using the javascriptgantt Chart Library!    
-
-<a href="https://sunilsolankiji.github.io/javascriptgantt/">
-  <img src="./src/assets/images/jsgantt-screenshot.png">
-</a>    
-  
----  
-  
-<a name="getting-started"></a>
-## Getting Started ##
-To create a basic Gantt Chart, follow these steps:     
-
-**Step 1:** Add the files:   
-~~~html
-<script src="gantt.js" ></script>
-<link rel="stylesheet" href="gantt.css" type="text/css">
-~~~  
-
-**Step 2:** Insert the markup:  
-~~~html
-<div id="gantt_here" style='width:100%; height:100vh;'></div>
-~~~  
-
-**Step 3:** Invoke the Gantt Chart Library using JavaScript, targeting the container element, and define your tasks, dependencies, and duration.  
-
-~~~js
-let element = document.getElementById("gantt_here"); 
-let gantt = new javascriptgantt(element);  
-gantt.options.columns = [
-  {
-    name: "text",
-    width: 245,
-    min_width: 80,
-    max_width: 300,
-    tree: true,
-    label: "Name",
-    resize: true,
-    template: (task) => {
-      return `<span>${task.parent == 0 ? task.text : task.subject}</span>`;
-    },
-  },
- ...
-];
-
-gantt.options.data = [
-  { id: 1, text: "Project 1", parent: 0, progress: 50 },
-  {
-    id: 2,
-    text: "Task #1",
-    start_date: "05-05-2023",
-    end_date: "05-05-2023",
-    parent: 1,
-    progress: 60,
-  },
-  ...
-];
-
-gantt.options.scales = [
-  {
-    unit: "week",
-    step: 1,
-    format: (t) => {
-      return "%d %F";
-    },
-  },
-  {
-    unit: "day",
-    step: 1,
-    format: "%d %D",
-  },
-];
-
-gantt.options.links = [
-  { id: 1, source: 1, target: 2, type: 0 },
-  { id: 2, source: 2, target: 3, type: 1 },
-  { id: 3, source: 3, target: 4, type: 2 },
-  { id: 4, source: 12, target: 15, type: 3 },
-];  
-
-gantt.render();
-~~~   
-
-**Note:** Remember to call `gantt.render();` whenever you wish to visualize the updated data.  
-
-[Live demo](https://sunilsolankiji.github.io/javascriptgantt/)      
-
-**Complete Documentation:** [javascriptgantt Documentation](./docs/Gantt-Chart-Documentation.pdf)  
-  
-  ---  
-  
-<a name="features"></a>
-## Features     
-
-  * **Task Linking:** Four types - finish-to-start, start-to-start, finish-to-finish, start-to-finish.      
-
-  <a href="https://sunilsolankiji.github.io/javascriptgantt/">
-    <img src="./src/assets/images/links.gif">
-  </a>  
-
-  * **Drag and Drop:** Shift multiple tasks horizontally and vertically.    
-  * **Filtering:** Conveniently filter out tasks.    
-  * **Tooltips:** Additional insights via tooltips.  
-  * **Grid:** Columns in the grid are fully customizable.  
-  * **Customization:** Modify the time scale, task edit form, and much more.    
-    
-  <a href="https://sunilsolankiji.github.io/javascriptgantt/">
-    <img src="./src/assets/images/popup.gif">
-  </a>   
-
-  * **Task Progress:** Update task progress via dragging or manually set the percentage.    
-  * **Exports:** Get your charts in PDF, PNG, or Excel formats.    
-  * **Zoom Levels:** Multiple timeline views - hour, day, week, month, quarter, and year.  
-  * **Full Screen:** View your Gantt in full screen for an immersive experience.    
-  * **Task Management:** Expand, collapse, add markers, modify, or delete tasks.     
-  * **Auto Scheduling:** Tasks are automatically scheduled.   
-  * **Date Selection:** Easily select start and end dates through drag and drop. 
-  * **Mouse Scroll:** Scroll timeline using mouse click.   
-  * **Aesthetics:** Customize the task colors via a color picker.   
-
-  <a href="https://sunilsolankiji.github.io/javascriptgantt/">
-    <img src="./src/assets/images/taskColor.gif">
-  </a>       
-    
-  * **Localization:** Multilingual support to cater to a global audience.   
-  * **Themes:** Dark mode for those late-night work sessions.  
-
-  <a href="https://sunilsolankiji.github.io/javascriptgantt/">
-    <img src="./src/assets/images/theme.gif">
-  </a>  
-  
-  You can see the full list of features in the [documentation](./docs/Gantt-Chart-Documentation.pdf)   
-    
-        
-  [Try it Yourself:](https://stackblitz.com/edit/js-bdaa47?file=index.js): Dive into hands-on examples and truly understand the potential of the library.    
-    
-  ---
+# javascriptgantt
+
+[![npm version](https://img.shields.io/npm/v/javascriptgantt?style=flat-square)](https://www.npmjs.com/package/javascriptgantt)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
+[![GitHub issues](https://img.shields.io/github/issues/Sunilsolankiji/javascriptgantt?style=flat-square)](https://github.com/Sunilsolankiji/javascriptgantt/issues)
+[![GitHub stars](https://img.shields.io/github/stars/Sunilsolankiji/javascriptgantt?style=flat-square)](https://github.com/Sunilsolankiji/javascriptgantt/stargazers)
+[![npm downloads](https://img.shields.io/npm/dm/javascriptgantt?style=flat-square)](https://www.npmjs.com/package/javascriptgantt)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md)
+
+A modern, feature-rich JavaScript Gantt chart library for project management. Build interactive, responsive Gantt charts
+with zero dependencies, featuring drag-and-drop functionality, task dependencies, auto-scheduling, and extensive
+customization options.
+
+## ✨ Key Highlights
+
+- 🚀 **Zero Dependencies** - Lightweight and fast
+- 📱 **Responsive Design** - Works seamlessly on all devices
+- 🎨 **Fully Customizable** - Themes, colors, and layouts
+- 🔗 **Task Dependencies** - Four types of task linking
+- 📊 **Multiple Views** - Hour, day, week, month, quarter, year
+- 🌍 **i18n Support** - Multilingual ready
+- 📤 **Export Options** - PDF, PNG, Excel
+- 🎯 **Auto-Scheduling** - Intelligent task scheduling
+
+## 📚 Table of Contents
+
+- [Installation](#installation)
+- [Getting Started](#getting-started)
+- [Features](#features)
+- [Documentation](#documentation)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+- [Support](#support)
+
+---
+
+<a name="installation"></a>
+
+## 📦 Installation
+
+### Using npm (Recommended)
+
+```bash
+npm install javascriptgantt
+```
+
+Or using yarn:
+
+```bash
+yarn add javascriptgantt
+```
+
+### Via CDN
+
+Add these lines to your HTML file:
+
+```html
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/javascriptgantt@latest/src/gantt.css"
+/>
+<script src="https://unpkg.com/javascriptgantt@latest/src/gantt.js"></script>
+```
+
+### Manual Download
+
+1. Download the latest release from our [GitHub repository](https://github.com/Sunilsolankiji/javascriptgantt/releases)
+2. Extract and copy `gantt.js` and `gantt.css` to your project
+3. Link the files in your HTML:
+   ```html
+   <link rel="stylesheet" href="path/to/gantt.css" />
+   <script src="path/to/gantt.js"></script>
+   ```
+
+<a href="https://sunilsolankiji.github.io/javascriptgantt/">
+  <img src="./src/assets/images/jsgantt-screenshot.png" alt="javascriptgantt Screenshot">
+</a>    
+  
+---
+
+<a name="getting-started"></a>
+
+## 🚀 Getting Started
+
+### Quick Start Guide
+
+**Step 1:** Include the library files in your HTML
+
+```html
+<link rel="stylesheet" href="gantt.css" />
+<script src="gantt.js"></script>
+```
+
+**Step 2:** Create a container element
+
+```html
+<div id="gantt_here" style="width: 100%; height: 100vh;"></div>
+```
+
+**Step 3:** Initialize the Gantt chart with your data
+
+```js
+const element = document.getElementById("gantt_here");
+const gantt = new javascriptgantt(element);
+
+// Configure columns
+gantt.options.columns = [
+  {
+    name: "text",
+    width: 245,
+    min_width: 80,
+    max_width: 300,
+    tree: true,
+    label: "Name",
+    resize: true,
+    template: (task) => {
+      return `<span>${task.parent == 0 ? task.text : task.subject}</span>`;
+    },
+  },
+  // ...more columns
+];
+
+// Add your tasks
+gantt.options.data = [
+  { id: 1, text: "Project 1", parent: 0, progress: 50 },
+  {
+    id: 2,
+    text: "Task #1",
+    start_date: "05-05-2023",
+    end_date: "05-05-2023",
+    parent: 1,
+    progress: 60,
+  },
+  // ...more tasks
+];
+
+// Configure time scales
+gantt.options.scales = [
+  {
+    unit: "week",
+    step: 1,
+    format: (t) => {
+      return "%d %F";
+    },
+  },
+  {
+    unit: "day",
+    step: 1,
+    format: "%d %D",
+  },
+];
+
+// Define task dependencies
+gantt.options.links = [
+  { id: 1, source: 1, target: 2, type: 0 }, // Finish-to-Start
+  { id: 2, source: 2, target: 3, type: 1 }, // Start-to-Start
+  { id: 3, source: 3, target: 4, type: 2 }, // Finish-to-Finish
+  { id: 4, source: 12, target: 15, type: 3 }, // Start-to-Finish
+];
+
+// Render the chart
+gantt.render();
+```
+
+> **💡 Tip:** Call `gantt.render()` whenever you need to update the chart with new data.
+
+### 📖 Resources
+
+- [Live Demo](https://sunilsolankiji.github.io/javascriptgantt/)
+- [Interactive Tutorial on StackBlitz](https://stackblitz.com/edit/js-bdaa47?file=index.js)
+- [Complete Documentation](./docs/Gantt-Chart-Documentation.pdf)
+
+  ***
+
+<a name="features"></a>
+
+## ✨ Features
+
+### Core Functionality
+
+#### 🔗 Task Linking
+
+Four types of task dependencies:
+
+- **Finish-to-Start (FS)** - Task B starts when Task A finishes
+- **Start-to-Start (SS)** - Task B starts when Task A starts
+- **Finish-to-Finish (FF)** - Task B finishes when Task A finishes
+- **Start-to-Finish (SF)** - Task B finishes when Task A starts
+
+<a href="https://sunilsolankiji.github.io/javascriptgantt/">
+  <img src="./src/assets/images/links.gif" alt="Task Linking Demo">
+</a>
+
+#### 🎯 Interactive Controls
+
+- **Drag and Drop:** Move tasks horizontally (reschedule) and vertically (reorder)
+- **Task Progress:** Update progress by dragging or set percentage manually
+- **Date Selection:** Select start and end dates via drag and drop
+- **Mouse Scroll:** Navigate timeline with mouse click and drag
+
+#### 🎨 Customization & Theming
+
+- **Task Colors:** Customize task appearance with color picker
+- **Themes:** Built-in dark mode support
+- **Grid Columns:** Fully customizable column layout
+- **Time Scale:** Configurable time scale and formats
+
+<a href="https://sunilsolankiji.github.io/javascriptgantt/">
+  <img src="./src/assets/images/theme.gif" alt="Theme Demo">
+</a>
+
+<a href="https://sunilsolankiji.github.io/javascriptgantt/">
+  <img src="./src/assets/images/taskColor.gif" alt="Task Color Demo">
+</a>
+
+### Advanced Features
+
+#### 📊 Views & Display
+
+- **Multiple Zoom Levels:** Hour, day, week, month, quarter, and year views
+- **Full Screen Mode:** Immersive full-screen experience
+- **Tooltips:** Detailed task information on hover
+- **Filtering:** Advanced task filtering capabilities
+- **Expand/Collapse:** Hierarchical task management
+
+<a href="https://sunilsolankiji.github.io/javascriptgantt/">
+  <img src="./src/assets/images/popup.gif" alt="Popup Demo">
+</a>
+
+#### ⚡ Productivity
+
+- **Auto-Scheduling:** Automatic task scheduling based on dependencies
+- **Task Management:** Add, modify, or delete tasks easily
+- **Markers:** Add visual markers to important dates
+- **Progress Tracking:** Visual progress indicators
+
+#### 📤 Export & Integration
+
+- **PDF Export:** Generate professional PDF reports
+- **PNG Export:** Export charts as images
+- **Excel Export:** Export data to spreadsheet format
+- **Localization:** Multi-language support (i18n ready)
+
+### 🔍 Learn More
+
+For a complete list of features and detailed usage instructions, see
+our [Full Documentation](./docs/Gantt-Chart-Documentation.pdf).
+
+**Try it yourself:**
+
+- [Live Demo](https://sunilsolankiji.github.io/javascriptgantt/)
+- [Interactive Examples on StackBlitz](https://stackblitz.com/edit/js-bdaa47?file=index.js)
+  ***
+
+<a name="documentation"></a>
+
+## 📖 Documentation
+
+**Complete Documentation:** [javascriptgantt Documentation](./docs/Gantt-Chart-Documentation.pdf)
+
+### Quick Links
+
+- 📘 [Full Documentation PDF](./docs/Gantt-Chart-Documentation.pdf) - Comprehensive guide with all features
+- 🎮 [Live Demo](https://sunilsolankiji.github.io/javascriptgantt/) - See it in action
+- 💻 [StackBlitz Tutorial](https://stackblitz.com/edit/js-bdaa47?file=index.js) - Interactive examples
+
+---
+
+<a name="development"></a>
+
+## 🔧 Development
+
+This project uses modern development tools to maintain code quality and consistency.
+
+### Development Tools
+
+- **Prettier** - Automatic code formatting
+- **ESLint** - Code linting and quality checks
+- **Commitlint** - Conventional commit message validation
+- **Husky** - Git hooks automation
+- **Lint-Staged** - Run linters on staged files
+- **Standard-Version** - Automated versioning and changelog generation
+
+### Quick Start for Contributors
+
+```bash
+# Install dependencies
+npm install
+
+# Format code
+npm run format
+
+# Lint code
+npm run lint
+
+# Run tests (lint + format check)
+npm run test
+
+# Create a release with automatic changelog
+npm run release
+```
+
+### Commit Message Convention
+
+This project follows [Conventional Commits](https://www.conventionalcommits.org/):
+
+```bash
+<type>(<scope>): <subject>
+```
+
+**Types:**
+
+- `feat`: New feature
+- `fix`: Bug fix
+- `docs`: Documentation changes
+- `style`: Code style changes (formatting)
+- `refactor`: Code refactoring
+- `perf`: Performance improvements
+- `test`: Adding or updating tests
+- `build`: Build system changes
+- `ci`: CI/CD changes
+- `chore`: Maintenance tasks
+
+**Example:**
+
+```bash
+git commit -m "feat: add export to Excel functionality"
+git commit -m "fix: resolve drag and drop issue on mobile"
+```
+
+For detailed development guidelines, see [DEVELOPMENT.md](DEVELOPMENT.md).
+
+---
+
+<a name="contributing"></a>
+
+## 🤝 Contributing
+
+We welcome contributions from the community! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started.
+
+### How to Contribute
+
+1. **Fork** the repository
+2. **Create** your feature branch (`git checkout -b feature/AmazingFeature`)
+3. **Commit** your changes (`git commit -m 'Add some AmazingFeature'`)
+4. **Push** to the branch (`git push origin feature/AmazingFeature`)
+5. **Open** a Pull Request
+
+Please ensure your code follows our coding standards and includes appropriate tests.
+
+### Code of Conduct
+
+Please read our [Code of Conduct](CODE_OF_CONDUCT.md) before contributing.
+
+---
+
+<a name="license"></a>
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+---
+
+<a name="support"></a>
+
+## 💬 Support
+
+### Get Help
+
+- 📖 **Documentation:** [Full Documentation](./docs/Gantt-Chart-Documentation.pdf)
+- 🐛 **Bug Reports:** [GitHub Issues](https://github.com/Sunilsolankiji/javascriptgantt/issues)
+- 💡 **Feature Requests:** [Feature Request Template](.github/ISSUE_TEMPLATE/feature_request.md)
+- 💬 **Discussions:** [GitHub Discussions](https://github.com/Sunilsolankiji/javascriptgantt/discussions)
+
+### Reporting Issues
+
+Found a bug? Please report it using our [Bug Report Template](.github/ISSUE_TEMPLATE/bug_report.md).
+
+**Include:**
+
+- Clear description of the issue
+- Steps to reproduce
+- Expected vs actual behavior
+- Browser/environment information
+- Code samples or screenshots
+
+---
+
+## 🌟 Show Your Support
+
+If you find this project useful, please consider:
+
+- ⭐ **Star this repository**
+- 🐛 **Report bugs** to help improve it
+- 💡 **Suggest features** you'd like to see
+- 🤝 **Contribute** to the codebase
+- 📢 **Share** with others who might find it useful
+
+---
+
+Made with ❤️ by [Sunil Solanki](https://github.com/Sunilsolankiji)
+
+**[⬆ Back to Top](#javascriptgantt)**