jingrow/gantt
1
0
Fork 0
Code Pull Requests Activity

Merge pull request #14 from frappe/hustcc-master

Browse Source 
Custom class for tasks (hustcc pr enhancement)
This commit is contained in:
Faris Ansari 2017-03-21 10:35:54 +05:30 committed by GitHub
commit d07c38b769
10 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -17,7 +17,7 @@ Include it in your html:
``` ```
And start hacking: And start hacking:
``` ```js
var tasks = [ var tasks = [
{ {
id: 'Task 1', id: 'Task 1',
@ -25,7 +25,8 @@ var tasks = [
start: '2016-12-28', start: '2016-12-28',
end: '2016-12-31', end: '2016-12-31',
progress: 20, progress: 20,
dependencies: 'Task 2, Task 3' dependencies: 'Task 2, Task 3',
custom_class: 'bar-milestone' // optional
}, },
... ...
] ]

4
dist/frappe-gantt.js vendored
View File

@ -804,7 +804,7 @@ return /******/ (function(modules) { // webpackBootstrap
* Gantt: * Gantt:
* element: querySelector string, required * element: querySelector string, required
* tasks: array of tasks, required * tasks: array of tasks, required
* task: { id, name, start, end, progress, dependencies } * task: { id, name, start, end, progress, dependencies, custom_class }
* config: configuration options, optional * config: configuration options, optional
*/ */
module.exports = exports['default']; module.exports = exports['default'];
@ -1206,7 +1206,7 @@ return /******/ (function(modules) { // webpackBootstrap
self.duration = (self.task._end.diff(self.task._start, 'hours') + 24) / gt.config.step; self.duration = (self.task._end.diff(self.task._start, 'hours') + 24) / gt.config.step;
self.width = gt.config.column_width * self.duration; self.width = gt.config.column_width * self.duration;
self.progress_width = gt.config.column_width * self.duration * (self.task.progress / 100) || 0; self.progress_width = gt.config.column_width * self.duration * (self.task.progress / 100) || 0;
self.group = gt.canvas.group().addClass('bar-wrapper'); self.group = gt.canvas.group().addClass('bar-wrapper').addClass(self.task.custom_class || '');
self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group); self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group);
self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group); self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
} }

2
dist/frappe-gantt.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/frappe-gantt.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

43
index.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Simple Gantt</title> <title>Simple Gantt</title>
<style> <style>
body { body {
font-family: sans-serif; font-family: sans-serif;
background: #ccc; background: #ccc;
@ -15,13 +15,17 @@
.gantt-container { .gantt-container {
overflow: scroll; overflow: scroll;
} }
/* custom class */
.gantt .bar-milestone .bar-progress {
fill: tomato;
}
</style> </style>
<script src="node_modules/moment/min/moment.min.js"></script> <script src="node_modules/moment/min/moment.min.js"></script>
<script src="node_modules/snapsvg/dist/snap.svg-min.js"></script> <script src="node_modules/snapsvg/dist/snap.svg-min.js"></script>
<script src="dist/frappe-gantt.js"></script> <script src="dist/frappe-gantt.js"></script>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h2>Interactive Gantt Chart entirely made in SVG!</h2> <h2>Interactive Gantt Chart entirely made in SVG!</h2>
<div class="gantt-container"> <div class="gantt-container">
<svg id="gantt" width="400" height="600"></svg> <svg id="gantt" width="400" height="600"></svg>
@ -56,21 +60,22 @@
tasks[2].dependencies = "Task 1" tasks[2].dependencies = "Task 1"
tasks[3].dependencies = "Task 2" tasks[3].dependencies = "Task 2"
tasks[5].dependencies = "Task 4" tasks[5].dependencies = "Task 4"
tasks[5].custom_class = "bar-milestone";
var gantt_chart = Gantt("#gantt", tasks, { var gantt_chart = Gantt("#gantt", tasks, {
on_click: function (task) { on_click: function (task) {
console.log(task); console.log(task);
}, },
on_date_change: function(task, start, end) { on_date_change: function(task, start, end) {
console.log(task, start, end); console.log(task, start, end);
}, },
on_progress_change: function(task, progress) { on_progress_change: function(task, progress) {
console.log(task, progress); console.log(task, progress);
}, },
on_view_change: function(mode) { on_view_change: function(mode) {
console.log(mode); console.log(mode);
} }
}); });
console.log(gantt_chart); console.log(gantt_chart);
</script> </script>
</body> </body>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "frappe-gantt", "name": "frappe-gantt",
"version": "0.0.4", "version": "0.0.5",
"description": "A simple, modern, interactive gantt library for the web", "description": "A simple, modern, interactive gantt library for the web",
"main": "dist/frappe-gantt.js", "main": "dist/frappe-gantt.js",
"scripts": { "scripts": {

2
src/Bar.js
View File

@ -37,7 +37,7 @@ export default function Bar(gt, task) {
self.duration = (self.task._end.diff(self.task._start, 'hours') + 24) / gt.config.step; self.duration = (self.task._end.diff(self.task._start, 'hours') + 24) / gt.config.step;
self.width = gt.config.column_width * self.duration; self.width = gt.config.column_width * self.duration;
self.progress_width = gt.config.column_width * self.duration * (self.task.progress / 100) || 0; self.progress_width = gt.config.column_width * self.duration * (self.task.progress / 100) || 0;
self.group = gt.canvas.group().addClass('bar-wrapper'); self.group = gt.canvas.group().addClass('bar-wrapper').addClass(self.task.custom_class || '');
self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group); self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group);
self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group); self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
} }

2
src/Gantt.js
View File

@ -3,7 +3,7 @@
* Gantt: * Gantt:
* element: querySelector string, required * element: querySelector string, required
* tasks: array of tasks, required * tasks: array of tasks, required
* task: { id, name, start, end, progress, dependencies } * task: { id, name, start, end, progress, dependencies, custom_class }
* config: configuration options, optional * config: configuration options, optional
*/ */
import './gantt.scss'; import './gantt.scss';

2
webpack.config.js
View File

@ -14,7 +14,7 @@ if (env === 'build') {
outputFile = libraryName + '.js'; outputFile = libraryName + '.js';
} }
let config = { var config = {
entry: __dirname + '/src/Gantt.js', entry: __dirname + '/src/Gantt.js',
devtool: 'source-map', devtool: 'source-map',
output: { output: {