Interactive Gantt Chart entirely made in SVG!
@@ -56,21 +60,22 @@
tasks[2].dependencies = "Task 1"
tasks[3].dependencies = "Task 2"
tasks[5].dependencies = "Task 4"
+ tasks[5].custom_class = "bar-milestone";
var gantt_chart = Gantt("#gantt", tasks, {
- on_click: function (task) {
- console.log(task);
- },
- on_date_change: function(task, start, end) {
- console.log(task, start, end);
- },
- on_progress_change: function(task, progress) {
- console.log(task, progress);
- },
- on_view_change: function(mode) {
- console.log(mode);
- }
- });
+ on_click: function (task) {
+ console.log(task);
+ },
+ on_date_change: function(task, start, end) {
+ console.log(task, start, end);
+ },
+ on_progress_change: function(task, progress) {
+ console.log(task, progress);
+ },
+ on_view_change: function(mode) {
+ console.log(mode);
+ }
+ });
console.log(gantt_chart);
diff --git a/src/Bar.js b/src/Bar.js
index 313c1af..83a9f60 100644
--- a/src/Bar.js
+++ b/src/Bar.js
@@ -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.width = gt.config.column_width * self.duration;
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.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
}
diff --git a/src/Gantt.js b/src/Gantt.js
index 7195df0..2cabb95 100644
--- a/src/Gantt.js
+++ b/src/Gantt.js
@@ -3,7 +3,7 @@
* Gantt:
* element: querySelector string, 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
*/
import './gantt.scss';