113 |
114 |
115 |
116 |
117 | Choose a language:
118 |
131 |
132 |
133 | Data getting from a URL, JSON Data. Use `bigdata.json` to test with more data.
134 |
135 |
136 |
137 | Delay for tooltip to hide (in ms):
138 |
139 | UseSingleCell:
140 |
141 |
142 | * Click events in table are binded to console.log for testing
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://travis-ci.com/jsGanttImproved/jsgantt-improved)
2 |
3 |
4 | A fully featured gantt chart component built entirely in Javascript, CSS and AJAX. It is lightweight and there is no need of external libraries or additional images.
5 |
6 |
7 | 
8 |
9 |
10 | Start using with including the files `jsgantt.js` and `jsgantt.css` that are inside `dist/` folder.
11 |
12 | Or install and use in JS
13 |
14 | `npm install jsgantt-improved`
15 |
16 | Import in your JS `import {JSGantt} from 'jsgantt-improved';`
17 |
18 | See the [FULL DOCUMENTATION](./Documentation.md) for more details in all features.
19 |
20 | For **Angular** use the component [ng-gantt](https://github.com/jsGanttImproved/ng-gantt)
21 |
22 | For **React** use the component [react-jsgantt](https://github.com/jsGanttImproved/react-jsgantt)
23 |
24 | For **Vue** , see this example: https://stackblitz.com/edit/vue-jsgantt-3
25 |
26 | For **.NET** , see this example: [.NET Documentation](./docs/DotNet.md)
27 |
28 |
29 | ## Example
30 |
31 |
32 | You can view a Solo live example at:
33 |
34 | * https://jsganttimproved.github.io/jsgantt-improved/docs/demo.html
35 |
36 | Or use a live coding example at Codenpen:
37 |
38 | * https://codepen.io/mariomol/pen/mQzBPV
39 |
40 |
41 | ## Easy to Use
42 |
43 | ```html
44 |
45 |
46 |
47 |
48 |
49 |
105 | ```
106 |
107 | ## Features
108 |
109 | * Tasks & Collapsible Task Groups
110 | * Dependencies and Highlight when hover a task
111 | * Edit data in gantt table with list of responsible
112 | * Task Completion
113 | * Table with Additional Columns
114 | * Task Styling or as HTML tags
115 | * Milestones
116 | * Resources
117 | * Costs
118 | * Plan Start and End Dates
119 | * Gantt with Planned vs Executed
120 | * Dynamic Loading of Tasks
121 | * Dynamic change of format: Hour, Day, Week, Month, Quarter
122 | * Load Gantt from JSON and XML
123 | * From external files (including experimental support for MS Project XML files)
124 | * From JavaScript Strings
125 |
126 | ### Internationalization
127 |
128 | Support for languages below:
129 |
130 | * Arabic (ar)
131 | * Chinese (cn)
132 | * Czech (cs)
133 | * Dutch (Standard)
134 | * English (en)
135 | * French (fr)
136 | * Finnish (fi)
137 | * German (de)
138 | * Hebrew (he)
139 | * Hungarian (hu)
140 | * Korean (ko)
141 | * Indonesian (id)
142 | * Italian (it)
143 | * Japanese (ja)
144 | * Portuguese (pt)
145 | * Polish (pl)
146 | * Russian (ru)
147 | * Spanish (es)
148 | * Swedish (sv)
149 | * Turkish (tr)
150 | * Ukraininan (ua)
151 |
152 | ## Documentation
153 |
154 | See the [Documentation](./Documentation.md) wiki page or the included ``docs/index.html`` file for instructions on use.
155 |
156 | Project based on https://code.google.com/p/jsgantt/.
157 |
158 |
159 | ## Want to Collaborate?
160 |
161 | Its easy to get it set:
162 |
163 | * Clone this repo
164 | * Install lib dependencies: `npm i`
165 | * Install global dependencies: `npm i -g browserify nodemon onchange tsc`
166 | * Compile final js to be used on demo: `npm run dist`
167 | * Run the demo with a live example: `npm start`.
168 | * You can check the demo gantt that we use for testing features at: `http://127.0.0.1:8080/docs/demo.html`
169 | * Use `npm run watch` or do your change in `src` and restart this command refresh the changes.
170 |
171 | For testing:
172 | * Install global dependencies: `npm i -g webdriver-manager`
173 | * Install selenium webdriver: `npm run webdriver`, it will install something like node_modules/webdriver-manager/selenium/chromedriver_88.0.4324.96.zip
174 |
175 | node node_modules/protractor/bin/webdriver-manager update
176 | apt install chromium
177 |
178 | apt install chromium-bsu
179 |
180 | * Use `npm run test` with e2e tests.
181 | * Or use `npm run watch:test` to keep watching the tests
182 |
183 | For new release:
184 | * Increment the version number on package.json
185 | * Run `npm run publishnpm`
186 |
187 |
188 | Or help us donating...
189 |
190 | [](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=S7B43P63C5QEN)
191 |
192 |
193 |
--------------------------------------------------------------------------------
/src/utils/draw_utils.ts:
--------------------------------------------------------------------------------
1 | import { addFormatListeners } from "../events";
2 |
3 | export const makeInput = function (formattedValue, editable, type = 'text', value = null, choices = null) {
4 | if (!value) {
5 | value = formattedValue;
6 | }
7 | if (editable) {
8 | switch (type) {
9 | case 'date':
10 | // Take timezone into account before converting to ISO String
11 | value = value ? new Date(value.getTime() - (value.getTimezoneOffset() * 60000)).toISOString().split('T')[0] : '';
12 | return ``;
13 | case 'resource':
14 | if (choices) {
15 | const found = choices.filter(c => c.id == value || c.name == value);
16 | if (found && found.length > 0) {
17 | value = found[0].id;
18 | } else {
19 | choices.push({ id: value, name: value });
20 | }
21 | return ``;
22 | } else {
23 | return ``;
24 | }
25 | case 'cost':
26 | return ``;
27 | default:
28 | return ``;
29 | }
30 | } else {
31 | return formattedValue;
32 | }
33 | }
34 |
35 | export const newNode = function (pParent, pNodeType, pId = null, pClass = null, pText = null,
36 | pWidth = null, pLeft = null, pDisplay = null, pColspan = null, pAttribs = null) {
37 | let vNewNode = pParent.appendChild(document.createElement(pNodeType));
38 | if (pAttribs) {
39 | for (let i = 0; i + 1 < pAttribs.length; i += 2) {
40 | vNewNode.setAttribute(pAttribs[i], pAttribs[i + 1]);
41 | }
42 | }
43 | if (pId) vNewNode.id = pId; // I wish I could do this with setAttribute but older IEs don't play nice
44 | if (pClass) vNewNode.className = pClass;
45 | if (pWidth) vNewNode.style.width = (isNaN(pWidth * 1)) ? pWidth : pWidth + 'px';
46 | if (pLeft) vNewNode.style.left = (isNaN(pLeft * 1)) ? pLeft : pLeft + 'px';
47 | if (pText) {
48 | if (pText.indexOf && pText.indexOf('<') === -1) {
49 | vNewNode.appendChild(document.createTextNode(pText));
50 | } else {
51 | vNewNode.insertAdjacentHTML('beforeend', pText);
52 | }
53 | }
54 | if (pDisplay) vNewNode.style.display = pDisplay;
55 | if (pColspan) vNewNode.colSpan = pColspan;
56 | return vNewNode;
57 | };
58 |
59 |
60 |
61 | export const getArrayLocationByID = function (pId) {
62 | let vList = this.getList();
63 | for (let i = 0; i < vList.length; i++) {
64 | if (vList[i].getID() == pId)
65 | return i;
66 | }
67 | return -1;
68 | };
69 |
70 | export const CalcTaskXY = function () {
71 | let vID;
72 | let vList = this.getList();
73 | let vBarDiv;
74 | let vTaskDiv;
75 | let vParDiv;
76 | let vLeft, vTop, vWidth;
77 | let vHeight = Math.floor((this.getRowHeight() / 2));
78 |
79 | for (let i = 0; i < vList.length; i++) {
80 | vID = vList[i].getID();
81 | vBarDiv = vList[i].getBarDiv();
82 | vTaskDiv = vList[i].getTaskDiv();
83 | if ((vList[i].getParItem() && vList[i].getParItem().getGroup() == 2)) {
84 | vParDiv = vList[i].getParItem().getChildRow();
85 | }
86 | else vParDiv = vList[i].getChildRow();
87 |
88 | if (vBarDiv) {
89 | vList[i].setStartX(vBarDiv.offsetLeft + 1);
90 | vList[i].setStartY(vParDiv.offsetTop + vBarDiv.offsetTop + vHeight - 1);
91 | vList[i].setEndX(vBarDiv.offsetLeft + vBarDiv.offsetWidth + 1);
92 | vList[i].setEndY(vParDiv.offsetTop + vBarDiv.offsetTop + vHeight - 1);
93 | }
94 | }
95 | };
96 |
97 | export const sLine = function (x1, y1, x2, y2, pClass) {
98 | let vLeft = Math.min(x1, x2);
99 | let vTop = Math.min(y1, y2);
100 | let vWid = Math.abs(x2 - x1) + 1;
101 | let vHgt = Math.abs(y2 - y1) + 1;
102 |
103 | let vTmpDiv = document.createElement('div');
104 | vTmpDiv.id = this.vDivId + 'line' + this.vDepId++;
105 | vTmpDiv.style.position = 'absolute';
106 | vTmpDiv.style.overflow = 'hidden';
107 | vTmpDiv.style.zIndex = '0';
108 | vTmpDiv.style.left = vLeft + 'px';
109 | vTmpDiv.style.top = vTop + 'px';
110 | vTmpDiv.style.width = vWid + 'px';
111 | vTmpDiv.style.height = vHgt + 'px';
112 |
113 | vTmpDiv.style.visibility = 'visible';
114 |
115 | if (vWid == 1) vTmpDiv.className = 'glinev';
116 | else vTmpDiv.className = 'glineh';
117 |
118 | if (pClass) vTmpDiv.className += ' ' + pClass;
119 |
120 | this.getLines().appendChild(vTmpDiv);
121 |
122 | if (this.vEvents.onLineDraw && typeof this.vEvents.onLineDraw === 'function' ) {
123 | this.vEvents.onLineDraw(vTmpDiv);
124 | }
125 |
126 | return vTmpDiv;
127 | };
128 |
129 | export const drawSelector = function (pPos) {
130 | let vOutput = document.createDocumentFragment();
131 | let vDisplay = false;
132 |
133 | for (let i = 0; i < this.vShowSelector.length && !vDisplay; i++) {
134 | if (this.vShowSelector[i].toLowerCase() == pPos.toLowerCase()) vDisplay = true;
135 | }
136 |
137 | if (vDisplay) {
138 | let vTmpDiv = newNode(vOutput, 'div', null, 'gselector', this.vLangs[this.vLang]['format'] + ':');
139 |
140 | if (this.vFormatArr.join().toLowerCase().indexOf('hour') != -1)
141 | addFormatListeners(this, 'hour', newNode(vTmpDiv, 'span', this.vDivId + 'formathour' + pPos, 'gformlabel' + ((this.vFormat == 'hour') ? ' gselected' : ''), this.vLangs[this.vLang]['hour']));
142 |
143 | if (this.vFormatArr.join().toLowerCase().indexOf('day') != -1)
144 | addFormatListeners(this, 'day', newNode(vTmpDiv, 'span', this.vDivId + 'formatday' + pPos, 'gformlabel' + ((this.vFormat == 'day') ? ' gselected' : ''), this.vLangs[this.vLang]['day']));
145 |
146 | if (this.vFormatArr.join().toLowerCase().indexOf('week') != -1)
147 | addFormatListeners(this, 'week', newNode(vTmpDiv, 'span', this.vDivId + 'formatweek' + pPos, 'gformlabel' + ((this.vFormat == 'week') ? ' gselected' : ''), this.vLangs[this.vLang]['week']));
148 |
149 | if (this.vFormatArr.join().toLowerCase().indexOf('month') != -1)
150 | addFormatListeners(this, 'month', newNode(vTmpDiv, 'span', this.vDivId + 'formatmonth' + pPos, 'gformlabel' + ((this.vFormat == 'month') ? ' gselected' : ''), this.vLangs[this.vLang]['month']));
151 |
152 | if (this.vFormatArr.join().toLowerCase().indexOf('quarter') != -1)
153 | addFormatListeners(this, 'quarter', newNode(vTmpDiv, 'span', this.vDivId + 'formatquarter' + pPos, 'gformlabel' + ((this.vFormat == 'quarter') ? ' gselected' : ''), this.vLangs[this.vLang]['quarter']));
154 | }
155 | else {
156 | newNode(vOutput, 'div', null, 'gselector');
157 | }
158 | return vOutput;
159 | };
160 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to jsGanttImproved
2 |
3 | We'd love for you to contribute to our source code and to make jsGanttImproved even better than it is
4 | today! Here are the guidelines we'd like you to follow:
5 |
6 | - [Issues and Bugs](#issue)
7 | - [Feature Requests](#feature)
8 | - [Submission Guidelines](#submit)
9 | - [Coding Rules](#rules)
10 | - [Commit Message Guidelines](#commit)
11 | - [Further Info](#info)
12 |
13 | ## Found an Issue?
14 |
15 | If you find a bug in the source code or a mistake in the documentation, you can help us by
16 | submitting an issue to our [GitHub Repository][github]. Even better you can submit a Pull Request
17 | with a fix.
18 |
19 | **Please see the [Submission Guidelines](#submit) below.**
20 |
21 | ## Want a Feature?
22 |
23 | You can request a new feature by submitting an issue to our [GitHub Repository][github]. If you
24 | would like to implement a new feature then it can be crafted and submitted as a Pull Request.
25 |
26 | ## Submission Guidelines
27 |
28 | ### Submitting an Issue
29 | Before you submit your issue search the archive, maybe your question was already answered.
30 |
31 | If your issue appears to be a bug, and hasn't been reported, open a new issue. Help us to maximize
32 | the effort we can spend fixing issues and adding new features, by not reporting duplicate issues.
33 | Providing the following information will increase the chances of your issue being dealt with
34 | quickly:
35 |
36 | * **Overview of the Issue** - if an error is being thrown a non-minified stack trace helps
37 | * **Motivation for or Use Case** - explain why this is a bug for you
38 | * **Version(s)** - what is the version(s) being used?
39 | * **Browsers and Operating System** - is this a problem with all browsers or only specific ones?
40 | * **Reproduce the Error** - provide a live example (using [Plunker][plunker] or
41 | [JSFiddle][jsfiddle]) or an unambiguous set of steps.
42 | * **Related Issues** - has a similar issue been reported before?
43 | * **Suggest a Fix** - if you can't fix the bug yourself, perhaps you can point to what might be
44 | causing the problem (line of code or commit)
45 |
46 | ### Submitting a Pull Request
47 | Before you submit your pull request consider the following guidelines:
48 |
49 | * Search [GitHub](https://github.com/jsGanttImproved/jsgantt-improved/pulls) for an open or closed Pull Request
50 | that relates to your submission. You don't want to duplicate effort.
51 | * Make your changes in a new git branch:
52 |
53 | ```shell
54 | git checkout -b my-fix-branch master
55 | ```
56 |
57 | * Create your patch.
58 | * Follow our [Coding Rules](#rules).
59 | * Commit your changes using a descriptive commit message that follows our
60 | [commit message conventions](#commit).
61 |
62 | ```shell
63 | git commit -a
64 | ```
65 | Note: the optional commit `-a` command line option will automatically "add" and "rm" edited files.
66 |
67 | * Push your branch to GitHub:
68 |
69 | ```shell
70 | git push origin my-fix-branch
71 | ```
72 |
73 | In GitHub, send a pull request to `master`.
74 | If we suggest changes, then:
75 |
76 | * Make the required updates.
77 | * Commit your changes to your branch (e.g. `my-fix-branch`).
78 | * Push the changes to your GitHub repository (this will update your Pull Request).
79 |
80 | If the PR gets too outdated we may ask you to rebase and force push to update the PR:
81 |
82 | ```shell
83 | git rebase master -i
84 | git push origin my-fix-branch -f
85 | ```
86 |
87 | _WARNING: Squashing or reverting commits and force-pushing thereafter may remove GitHub comments
88 | on code that were previously made by you or others in your commits. Avoid any form of rebasing
89 | unless necessary._
90 |
91 | That's it! Thank you for your contribution!
92 |
93 | #### After your pull request is merged
94 |
95 | After your pull request is merged, you can safely delete your branch and pull the changes
96 | from the main (upstream) repository:
97 |
98 | * Delete the remote branch on GitHub either through the GitHub web UI or your local shell as follows:
99 |
100 | ```shell
101 | git push origin --delete my-fix-branch
102 | ```
103 |
104 | * Check out the master branch:
105 |
106 | ```shell
107 | git checkout master -f
108 | ```
109 |
110 | * Delete the local branch:
111 |
112 | ```shell
113 | git branch -D my-fix-branch
114 | ```
115 |
116 | * Update your master with the latest upstream version:
117 |
118 | ```shell
119 | git pull --ff upstream master
120 | ```
121 |
122 | ## Coding Rules
123 |
124 | To ensure consistency throughout the source code, keep these rules in mind as you are working:
125 |
126 | * With the exceptions listed below, we follow the rules contained in
127 | [Google's JavaScript Style Guide][js-style-guide]:
128 | * Wrap all code at **100 characters**.
129 |
130 | ## Git Commit Guidelines
131 |
132 | We have very precise rules over how our git commit messages can be formatted. This leads to **more
133 | readable messages** that are easy to follow when looking through the **project history**.
134 |
135 | ### Commit Message Format
136 | Each commit message consists of a **subject**, a **body** and a **footer**:
137 |
138 | ```
139 |
140 |
141 |
142 |
143 |