Skip to content

Commit 9d943ed

Browse files
mariohmoleduardomourar
mariohmol
authored and
eduardomourar
committed
v2 with TS, demo, browserify and npm project (#115)
* Change the source to use Typescript and organizing in small modules * Start/End Dates with Planned and Executed values * Now Tasks has Cost value as well, showed in a column * Gantt now shows two bars for each task, planned and executed, one is full background and other has transparency * Fixing small layout bugs
1 parent 4d1b0d3 commit 9d943ed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+9690
-2826
lines changed

‎.gitignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
dist/
2+
node_modules/
3+
*.log
4+
/jsgantt.js

‎.travis.yml

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
language: node_js
2+
node_js:
3+
- "9"
4+
addons:
5+
chrome: stable
6+
before_script:
7+
- "export DISPLAY=:99.0"
8+
- "sh -e /etc/init.d/xvfb start"
9+
- sleep 3 # give xvfb some time to start
10+
- npm run dist
11+
- cp jsgantt.js docs/ && cp src/jsgantt.css docs/ && cd docs && http-server & # start a Web server
12+
- sleep 3 # give Web server some time to bind to sockets, etc
13+
14+
before_install:
15+
- npm install -g http-server browserify webdriver-manager
16+
- "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16"
17+
- google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
18+
19+
install:
20+
- npm install
21+
- webdriver-manager update
22+
- node node_modules/protractor/bin/webdriver-manager update
23+
- node_modules/protractor/bin/webdriver-manager update

‎Documentation.md

Lines changed: 466 additions & 0 deletions
Large diffs are not rendered by default.

‎README.md

Lines changed: 111 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,124 @@
1-
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.
1+
[![Build Status](https://travis-ci.com/jsGanttImproved/jsgantt-improved.svg?branch=master)](https://travis-ci.com/jsGanttImproved/jsgantt-improved)
22

3-
You can view a live example at https://jsGanttImproved.github.io/jsgantt-improved
43

5-
Features include:
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+
![Demo Image](/docs/demo.png)
8+
9+
10+
Start using with including the files `jsgantt.js` and `jsgantt.css` that are inside `docs/` 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+
For **Angular** use the component [ng-gantt](https://github.com/mariohmol/ng-gantt)
19+
20+
21+
22+
23+
## Example
24+
25+
Take a look at this Landing Page with docs and live examples:
26+
27+
* https://jsganttimproved.github.io/jsgantt-improved/docs
28+
29+
You can view a Solo live example at:
30+
31+
https://jsganttimproved.github.io/jsgantt-improved/docs/demo.html
32+
33+
34+
## Easy to Use
35+
36+
```html
37+
<link href="jsgantt.css" rel="stylesheet" type="text/css"/>
38+
<script src="jsgantt.js" type="text/javascript"></script>
39+
40+
<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
41+
42+
<script>
43+
44+
var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');
45+
46+
g.setOptions({
47+
vCaptionType: 'Complete', // Set to Show Caption : None,Caption,Resource,Duration,Complete,
48+
vQuarterColWidth: 36,
49+
vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tool tip box
50+
vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',// Set format to dates in the "Major" header of the "Day" view
51+
vWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" view
52+
vLang: 'en',
53+
vShowTaskInfoLink: 1, // Show link in tool tip (0/1)
54+
vShowEndWeekDate: 0, // Show/Hide the date for the last day of the week in header for daily
55+
vUseSingleCell: 10000, // Set the threshold cell per table row (Helps performance for large data.
56+
vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers
57+
});
58+
59+
// Load from a Json url
60+
JSGantt.parseJSON('./fixes/data.json', g);
61+
62+
// Or Adding Manually
63+
g.AddTaskItemObject({
64+
"pID": 1,
65+
"pName": "Define Chart <strong>API</strong>",
66+
"pStart": "2017-02-25",
67+
"pEnd": "2017-03-17",
68+
"pPlanStart": "2017-04-01",
69+
"pPlanEnd": "2017-04-15 12:00",
70+
"pClass": "ggroupblack",
71+
"pLink": "",
72+
"pMile": 0,
73+
"pRes": "Brian",
74+
"pComp": 0,
75+
"pGroup": 1,
76+
"pParent": 0,
77+
"pOpen": 1,
78+
"pDepend": "",
79+
"pCaption": "",
80+
"pCost": 1000,
81+
"pNotes": "Some Notes text"
82+
});
83+
84+
g.Draw();
85+
86+
</script>
87+
```
88+
89+
## Features
90+
691
* Tasks & Collapsible Task Groups
792
* Dependencies
893
* Task Completion
9-
* Task Styling
94+
* Task Styling or as HTML tags
1095
* Milestones
1196
* Resources
97+
* Costs
98+
* Plan Start and End Dates
99+
* Gantt with Planned vs Executed
12100
* Dynamic Loading of Tasks
13101
* Dynamic change of format: Hour, Day, Week, Month, Quarter
14-
* Load Gantt from XML
102+
* Load Gantt from XML and JSON
15103
* From external files (including experimental support for MS Project XML files)
16104
* From JavaScript Strings
17-
* Support for Internationalization (all hard coded strings can be overridden)
105+
* Support for Internationalization
106+
107+
## Documentation
108+
109+
See the [Documentation](./Documentation.md) wiki page or the included ``docs/index.html`` file for instructions on use.
110+
111+
Project based on https://code.google.com/p/jsgantt/.
112+
113+
114+
## Want to Collaborate?
115+
116+
Its easy to get it set:
18117

19-
Project forked as I was unable to contact the original maintainers. This work was done to support a personal project that didn't warrant a more heavyweight system (e.g. the dojo toolkit gantt chart features).
118+
* Clone this repo
119+
* Install lib dependencies: `npm i`
120+
* Install global dependencies: `npm i -g browserify nodemon`
121+
* Run the demo, This will start a `localhost:8080` with a live example: `npm start`.
122+
* Use `npm run watch:dist` or do your change in `src` and restart this command refresh the changes.
20123

21-
See the [Documentation](https://github.com/jsGanttImproved/jsgantt-improved/wiki/Documentation) wiki page or the included ``index.html`` file for instructions on use.
124+
For testing use `npm run test` with e2e tests.

‎docs/demo.html

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html lang="en" class="no-js">
3+
4+
<!-- Head -->
5+
6+
<head>
7+
<!-- Meta data -->
8+
<meta charset="utf-8">
9+
<title>jsGantt Improved</title>
10+
<meta name="description" content="FREE javascript gantt - jsGantt Improved HTML, CSS and AJAX only">
11+
<meta name="keywords" content="jsgantt-improved free javascript gantt-chart html css ajax">
12+
<meta name="viewport" content="width=device-width,initial-scale=1">
13+
<style>
14+
.row [type=checkbox] {
15+
margin-right: 10px
16+
}
17+
18+
.row {
19+
width: 100%
20+
}
21+
</style>
22+
<!-- External resources -->
23+
<!-- jQuery + Ajax [required by Bootstrap] -->
24+
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
25+
crossorigin="anonymous"></script>
26+
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
27+
crossorigin="anonymous"></script>
28+
<!-- Required by smooth scrolling -->
29+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
30+
<!-- Bootstrap v4.0.0 Alpha -->
31+
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
32+
crossorigin="anonymous" />
33+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
34+
crossorigin="anonymous"></script>
35+
<!-- Font Awesome -->
36+
<script src="https://use.fontawesome.com/78d1e57168.js"></script>
37+
<!-- Google's Code Prettify -->
38+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>
39+
<!-- Google Fonts -->
40+
<link href="https://fonts.googleapis.com/css?family=Cookie|Satisfy|Kelly+Slab|Overlock" rel="stylesheet">
41+
42+
<!-- jsGanttImproved App -->
43+
<link href="jsgantt.css" rel="stylesheet" type="text/css" />
44+
<script src="jsgantt.js" type="text/javascript"></script>
45+
</head>
46+
47+
<!-- Content -->
48+
49+
<body data-spy="scroll" data-target="#my-navbar-nav" style="padding: 30px;">
50+
51+
52+
<div class="row">
53+
<h3 class="row">Hide and Show Properties</h3>
54+
55+
<div class="row">
56+
<span>
57+
<label for="vShowRes">Responsible</label>
58+
<input type="checkbox" id="vShowRes" checked onchange="start(event)" />
59+
</span>
60+
61+
<span>
62+
<label for="vShowDur">Duration</label>
63+
<input type="checkbox" id="vShowDur" checked onchange="start(event)" />
64+
</span>
65+
66+
<span>
67+
<label for="vShowCost">Cost</label>
68+
<input type="checkbox" id="vShowCost" checked onchange="start(event)" />
69+
</span>
70+
71+
<span>
72+
<label for="vShowComp">Comp</label>
73+
<input type="checkbox" id="vShowComp" checked onchange="start(event)" />
74+
</span>
75+
76+
<span>
77+
<label for="vShowTaskInfoLink">tooltip</label>
78+
<input type="checkbox" id="vShowTaskInfoLink" checked onchange="start(event)" />
79+
</span>
80+
81+
<span>
82+
<label for="vShowEndWeekDate">date for the last day of the week</label>
83+
<input type="checkbox" id="vShowEndWeekDate" onchange="start(event)" />
84+
</span>
85+
86+
87+
88+
</div>
89+
90+
<span>
91+
<label for="vShowStartDate">StartDate</label>
92+
<input type="checkbox" id="vShowStartDate" checked onchange="start(event)" />
93+
</span>
94+
95+
<span>
96+
<label for="vShowEndDate">EndDate</label>
97+
<input type="checkbox" id="vShowEndDate" checked onchange="start(event)" />
98+
</span>
99+
100+
<span>
101+
<label for="vShowPlanStartDate">Planned StartDate</label>
102+
<input type="checkbox" id="vShowPlanStartDate" checked onchange="start(event)" />
103+
</span>
104+
105+
<span>
106+
<label for="vShowPlanEndDate">Planned EndDate</label>
107+
<input type="checkbox" id="vShowPlanEndDate" checked onchange="start(event)" />
108+
</span>
109+
</div>
110+
111+
112+
<br>
113+
114+
Choose a language:
115+
<select id="lang" onchange="start(event)">
116+
<option value='pt'>pt</option>
117+
<option value='en'>en</option>
118+
<option value='ru'>ru</option>
119+
<option value='es'>es</option>
120+
<option value='fr'>fr</option>
121+
<option value='de'>de</option>
122+
</select>
123+
124+
<br />
125+
Data getting from a URL, <a href="fixes/data.json">JSON Data</a>
126+
127+
<br />
128+
129+
Delay for tooltip to hide (in ms): <input id="delay" onchange="start(event)" value="150" type="number">
130+
131+
<br />
132+
<div id="embedded-Gantt">
133+
</div>
134+
135+
</body>
136+
<script type="text/javascript" src="index.js"></script>
137+
138+
</html>

‎docs/demo.png

320 KB
Loading

0 commit comments

Comments
 (0)