ability to specify custom class for tasks
This commit is contained in:
parent
4534f6b6fe
commit
407f076d51
@ -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) {
|
||||||
|
|||||||
@ -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);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user