// ganttChart plugin. Call on a table to make it into a gantt chart.
// options -
// width: any css width, width of the entire chart (table + calendar)
// headerHeight: integer, height of the chart header
// columns: object mapping keys to any jQuery selector/element/elementArray/object
// use "columns" to match columns containing the row start dates, finish dates and bar colors
// rowID to give each task a unique ID, dependen(cy/t)IDs hold space-separated list of IDs to reference.
// pxPerDay: integer, width of 1 day in the calendar
// barHeight: integer, px height of the bars
;(function($, undefined) {
jQuery.widget('qcode.ganttChart', {
options: {
width: "100%",
headerHeight: 40,
columns: {
rowID: "[name=task_id]",
dependencyIDs: "[name=dependency_ids]",
dependentIDs: "[name=dependent_ids]",
startDate: "[name=start_date]",
finishDate: "[name=finish_date]",
barColor: "[name=bar_color]"
},
pxPerDay: 15,
barHeight: 10
},
_create: function() {
// Get options from custom attributes
$.each(this.options, (function(name, value) {
this.options[name] = coalesce(this.element.attr(name), value);
}).bind(this));
this.options = $.extend(this.element.data(this.widgetName), this.options);
// Initialise some properties
this.bars = [];
this.table = this.element;
this.rows = this.table.children('tbody').children('tr');
this.drawTimeout = undefined;
// Wrap the whole thing in a div
this.table.wrap('
');
this.wrapper = this.table.parent();
this.wrapper.css('width', this.options.width);
// Create a scrolling window for the calendar
this.calendarFrame = $('
')
.css({
left: this.table.outerWidth(),
right: 0,
top: 0,
bottom: 0
})
.insertAfter(this.table);
var scrollBarWidth = this.calendarFrame.height() - this.calendarFrame[0].scrollHeight;
// Record the old margin in case we want to destroy this widget
this.oldMarginTop = this.table.css('margin-top');
this.oldMarginBottom = this.table.css('margin-bottom');
this.table.css({
'margin-top': this.options.headerHeight - parseInt(this.table.css('border-top-width')) - this.table.find('thead').outerHeight(),
'margin-bottom': scrollBarWidth
});
// Create a canvas for the calendar
this.calendar = $('