javascriptgantt 1.0.0

package/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "javascriptgantt",
+    "version": "1.0.0",
+    "description": "An open source JavaScript Gantt. This library provides a powerful set of tools and functionalities to create interactive Gantt charts for project management.",
+    "main": "src/gantt.js",
+    "scripts": {
+        "lint": "eslint ."
+      },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Sunilsolankiji/jsgantt"
+    },
+    "keywords": [
+        "gantt",
+        "chart",
+        "gantt chart",
+        "scheduler",
+        "timeline",
+        "jsganttchart",
+        "jsgantt"
+    ],
+    "author": "Sunil Solanki",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/Sunilsolankiji/jsgantt/issues"
+    },
+    "homepage": "https://github.com/Sunilsolankiji/jsgantt#readme",
+    "devDependencies": {
+        "@eslint/js": "^9.6.0",
+        "eslint": "^9.6.0",
+        "globals": "^15.8.0"
+    }
+}

package/readme.md

@@ -0,0 +1,158 @@
+# jsGantt Chart Library Documentation  
+  
+
+## Introduction  
+Welcome to the documentation for [jsGantt](https://zehntech.github.io/zt-gantt/) 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 jsGantt Chart Library!    
+
+<a href="https://zehntech.github.io/zt-gantt/">
+  <img src="./src/assets/images/zt-gantt-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 jsGantt(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://zehntech.github.io/zt-gantt/)      
+
+**Complete Documentation:** [jsGantt 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://zehntech.github.io/zt-gantt/">
+    <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://zehntech.github.io/zt-gantt/">
+    <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://zehntech.github.io/zt-gantt/">
+    <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://zehntech.github.io/zt-gantt/">
+    <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.    
+    
+  ---

package/src/assets/zt-tour/zt-tour.css

@@ -0,0 +1,227 @@
+.zt-tour-popup * {
+  font-family: Helvetica Neue, Inter, ui-sans-serif, "Apple Color Emoji",
+    Helvetica, Arial, sans-serif;
+  color: var(--text-color);
+}
+
+.zt-tour-popup {
+  all: unset;
+  box-sizing: border-box;
+  color: var(--text-color);
+  margin: 0;
+  border-radius: 5px;
+  min-width: 250px;
+  max-width: 300px;
+  box-shadow: 0 1px 10px #0006;
+  z-index: 1000000000;
+  position: fixed;
+  top: 0;
+  right: 0;
+  background-color: var(--bg-color);
+}
+
+.zt-tour-popup-close-btn {
+  all: unset;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  font-size: 24px;
+  font-weight: 500;
+  color: #ffffff;
+  text-align: center;
+  transition: color;
+  transition-duration: 0.3s;
+  z-index: 1;
+}
+
+.zt-tour-popup-close-btn:hover {
+  color: #000;
+}
+
+.zt-tour-popup-description {
+  margin-bottom: 0;
+  font-size: 14px;
+  font-weight: 400;
+  padding: 5px;
+}
+
+.zt-tour-popup-footer {
+  margin-top: 15px;
+  text-align: right;
+  zoom: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+}
+
+.zt-tour-popup-navigation-btns {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+.zt-tour-popup-footer button {
+  font-size: 12px;
+  cursor: pointer;
+  padding: 10px 20px;
+  background-color: var(--index-primary-color);
+  color: #fff;
+  border-radius: 3px;
+  border: transparent;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+  margin-left: 10px;
+}
+
+.zt-tour-popup-footer button:hover {
+  background-color: var(--index-primary-hover-color);
+}
+
+.zt-tour-popup-footer button:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.zt-tour-popup-footer .zt-tour-popup-btn-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.zt-tour-popup-arrow {
+  content: "";
+  position: absolute;
+  border: 5px solid #408be1;
+}
+
+.zt-tour-popup-arrow-side-left {
+  left: 100%;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-top-color: transparent;
+}
+
+.zt-tour-popup-arrow-side-right {
+  right: 100%;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  border-top-color: transparent;
+}
+
+.zt-tour-popup-arrow-side-top {
+  top: 100%;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
+
+.zt-tour-popup-arrow-side-bottom {
+  bottom: 100%;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  border-right-color: transparent;
+}
+
+.zt-tour-popup-arrow-side-left.zt-tour-popup-arrow-align-start,
+.zt-tour-popup-arrow-side-right.zt-tour-popup-arrow-align-start {
+  top: 15px;
+}
+
+.zt-tour-popup-arrow-side-bottom.zt-tour-popup-arrow-align-start,
+.zt-tour-popup-arrow-side-top.zt-tour-popup-arrow-align-start {
+  left: 15px;
+}
+
+.zt-tour-popup-arrow-align-end.zt-tour-popup-arrow-side-left,
+.zt-tour-popup-arrow-align-end.zt-tour-popup-arrow-side-right {
+  bottom: 15px;
+}
+
+.zt-tour-popup-arrow-side-bottom.zt-tour-popup-arrow-align-end,
+.zt-tour-popup-arrow-side-top.zt-tour-popup-arrow-align-end {
+  right: 15px;
+}
+
+.zt-tour-popup-arrow-side-left.zt-tour-popup-arrow-align-center,
+.zt-tour-popup-arrow-side-right.zt-tour-popup-arrow-align-center {
+  top: 50%;
+  margin-top: -5px;
+}
+
+.zt-tour-popup-arrow-side-bottom.zt-tour-popup-arrow-align-center,
+.zt-tour-popup-arrow-side-top.zt-tour-popup-arrow-align-center {
+  left: 50%;
+  margin-left: -5px;
+}
+
+.zt-tour-popup-arrow-side-over.zt-tour-popup-arrow-align-over {
+  display: none;
+}
+
+.zt-tour-d-none {
+  display: none;
+}
+
+.zt-tour-popup-title {
+  font-size: 18px;
+  font-weight: 700;
+  display: block;
+  position: relative;
+  margin: 0;
+  padding: 10px;
+  background-color: var(--index-primary-color);
+  color: #fff;
+  border-radius: 5px 5px 0 0;
+}
+
+.zt-tour-popup-description {
+  margin-bottom: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 400;
+  zoom: 1;
+  color: var(--text-color);
+  padding: 10px;
+}
+
+.zt-tour-hint,
+.zt-tour-announcement {
+  position: absolute;
+  background-color: #fff;
+  box-shadow: 0 0 17px rgba(0, 0, 0, 0.24);
+  padding: 12px 18px;
+  border-radius: 5px;
+  max-width: 400px;
+  z-index: 10001010;
+  animation-name: fadein;
+  animation-duration: 0.2s;
+}
+
+.zt-tour-hint-backdrop,
+.zt-tour-announcement-backdrop {
+  background-color: transparent;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: 1000109;
+}
+
+@keyframes fadein {
+  0% {
+    opacity: 0;
+    scale: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+    scale: 0.8;
+  }
+  100% {
+    opacity: 1;
+    scale: 1;
+  }
+}