ability to specify custom class for tasks

This commit is contained in:
Faris Ansari 2017-03-21 10:28:44 +05:30
parent 4534f6b6fe
commit 407f076d51
3 changed files with 26 additions and 21 deletions

View File

@ -15,6 +15,10 @@
.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>
@ -56,6 +60,7 @@
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) {

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);
} }

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';