Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Scripts/GlobalJS/d3-gantt-jobstatus.js @ 13847

Last change on this file since 13847 was 13754, checked in by jlodewyc, 9 years ago

#2582 User management done, start resource calendar

File size: 9.1 KB
RevLine 
[13754]1/**
2 * @Orignal author Dimitry Kudrayvtsev
3 * @version 2.1
4
5  * Rewritten for Hive Web Job Manager by Jonas
6 */
7
8d3.gantt = function () {
9    var FIT_TIME_DOMAIN_MODE = "fit";
10    var FIXED_TIME_DOMAIN_MODE = "fixed";
11
12    var margin = {
13        top: 20,
14        right: 40,
15        bottom: 20,
16        left: 70
17    };
18    var drawytitles = true;
19    var selector = 'body';
20    var timeDomainStart = d3.time.day.offset(new Date(), -3);
21    var zoomStart;
22    var zoomEnd;
23    var timeDomainEnd = d3.time.hour.offset(new Date(), +3);
24    var timeDomainMode = FIT_TIME_DOMAIN_MODE;// fixed or fit
25    var taskTypes = [];
26    var taskStatus = [];
27    var height = document.body.clientHeight - margin.top - margin.bottom - 5;
28    var width = document.body.clientWidth - margin.right - margin.left - 5;
29
30    var tickFormat = "%H:%M";
31
32    var keyFunction = function (d) {
33        return d.startDate + d.taskName + d.endDate;
34    };
35    //Locks graph to specific timezone
36    //3600000 = +1 hour
37    var timeCorrector = 3600000 * (+1); //Currently: + 1
38   
39    var rectTransform = function (d) {
40        return "translate(" + x(d.startDate - timeCorrector) + "," + y(d.taskName) + ")";
41    };
42
43    var x = d3.time.scale().domain([timeDomainStart, timeDomainEnd]).range([0, width]).clamp(true);
44
45    var y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([0, height - margin.top - margin.bottom], .1);
46
47    var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format(tickFormat)).tickSubdivide(true)
48      .tickSize(8).tickPadding(8);
49
50    var yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
51
52    var initTimeDomain = function (tasks) {
53        if (timeDomainMode === FIT_TIME_DOMAIN_MODE) {
54            if (tasks === undefined || tasks.length < 1) {
55                timeDomainStart = d3.time.day.offset(new Date(), -3);
56                timeDomainEnd = d3.time.hour.offset(new Date(), +3);
57                return;
58            }
59            tasks.sort(function (a, b) {
60                return a.endDate - b.endDate;
61            });
62            timeDomainEnd = tasks[tasks.length - 1].endDate;
63            tasks.sort(function (a, b) {
64                return a.startDate - b.startDate;
65            });
66            timeDomainStart = tasks[0].startDate;
67        }
68    };
69
70    var initAxis = function () {
71        x = d3.time.scale().domain([timeDomainStart - timeCorrector, timeDomainEnd - timeCorrector]).range([0, width]).clamp(true);
72        y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([0, height - margin.top - margin.bottom], .1);
73        if (new Date(timeDomainStart).toDateString() != new Date(timeDomainEnd).toDateString()) {
74            xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(null).tickSubdivide(true)
75            .tickSize(8).tickPadding(8);
76        }
77        else
78            xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format(tickFormat)).tickSubdivide(true)
79            .tickSize(8).tickPadding(8);
80
81
82        yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
83    };
84
85    function gantt(tasks) {
86
87        initTimeDomain(tasks);
88        initAxis();
89
90        var tip = d3.tip()
91            .attr('class', 'd3-tip')
92            .html(function (d) {
93                var start = new Date(d.startDate);
94                var end = new Date(d.endDate);
95                var stat = d.status;
96                if (d.last) {
97                    return stat + " <br/> " + start.toUTCString() + " to now";
98                }
99                return stat + " <br/> " + start.toUTCString() + " to " + end.toUTCString();
100            });
101
102
103        var svgitself = d3.select(selector)
104       .append("svg")
105       .attr("class", "chart")
106       .attr("width", "100%")
107       .attr("height", height + margin.top + margin.bottom)
108        var svg = svgitself.append("g")
109           .attr("class", "gantt-chart")
110       .attr("width", "100%")
111       .attr("height", height + margin.top + margin.bottom)
112       .attr("transform", "translate(" + margin.left + ", " + margin.top + ")")
113        .call(tip);
114
115
116
117
118        svg.selectAll(".chart")
119       .data(tasks, keyFunction).enter()
120       .append("rect")
121       .attr("rx", 5)
122           .attr("ry", 5)
123       .attr("class", function (d) {
124           if (taskStatus[d.status] == null) { return "bar"; }
125           return taskStatus[d.status];
126       })
127       .attr("y", 0)
128       .attr("transform", rectTransform)
129       .attr("height", function (d) { return y.rangeBand(); })
130       .attr("width", function (d) {
131           return (x(d.endDate - timeCorrector) - x(d.startDate - timeCorrector));
132       })
133       .on('mouseover', tip.show)
134        .on('mouseout', tip.hide);
135
136
137
138
139
140
141        svg.append("g")
142        .attr("class", "x axis")
143        .attr("transform", "translate(0, " + (height - margin.top - margin.bottom) + ")")
144        .transition()
145        .call(xAxis);
146
147        if (drawytitles)
148            svg.append("g")
149                .attr("class", "y axis")
150                //.attr("transform", "translate(" + ((width / 2)) + "," + (-(height / 2) + margin.top) + " )")
151                .transition()
152                .call(yAxis);
153
154        svgitself.on("mousedown", function () {
155           
156            var p = d3.mouse(this);
157            var w = width;
158            w =  (p[0])/w;
159            gantt.zoom(tasks, w, this);
160        })
161        .on("contextmenu", function (d, i) {
162            zoomStart = null;
163            d3.event.preventDefault();
164            gantt.redraw(tasks, this);
165    });
166
167    return gantt;
168
169};
170    gantt.zoom = function (tasks, xcor, el) {
171     
172    initTimeDomain(tasks);
173    if (zoomStart == null) {
174        zoomStart = timeDomainStart;
175        zoomEnd = timeDomainEnd;
176    }
177    var diff = zoomEnd - zoomStart;
178    var cent = (diff * xcor) + zoomStart;
179    var piece = diff / 1.5;
180       
181    var tempstart = cent - (piece / 2);
182    piece = piece /2;
183    if (tempstart < zoomStart) {
184        piece += zoomStart - tempstart;
185    } else
186        zoomStart = tempstart;
187
188    var tempend = cent + piece;
189    if (tempend > zoomEnd)
190        zoomStart -= tempend - zoomEnd;
191    else
192        zoomEnd = tempend;
193
194    timeDomainStart = zoomStart;
195    timeDomainEnd = zoomEnd;
196    gantt.redrawInner(tasks, el);
197}
198
199gantt.redraw = function(tasks, el){
200    initTimeDomain(tasks);
201    gantt.redrawInner(tasks, el);
202}
203
204gantt.redrawInner= function (tasks, el) {
205       
206    initAxis();
207
208    var svg = d3.select(el);
209
210    var ganttChartGroup = svg.select(".gantt-chart");
211    var rect = ganttChartGroup.selectAll("rect").data(tasks, keyFunction);
212
213    rect.enter()
214     .insert("rect", ":first-child")
215     .attr("rx", 5)
216     .attr("ry", 5)
217 .attr("class", function (d) {
218     if (taskStatus[d.status] == null) { return "bar"; }
219     return taskStatus[d.status];
220 })
221 .transition()
222 .attr("y", 0)
223 .attr("transform", rectTransform)
224 .attr("height", function (d) { return y.rangeBand(); })
225 .attr("width", function (d) {
226     return (x(d.endDate - timeCorrector) - x(d.startDate - timeCorrector));
227 });
228
229    rect.transition()
230      .attr("transform", rectTransform)
231 .attr("height", function (d) { return y.rangeBand(); })
232 .attr("width", function (d) {
233     return (x(d.endDate - timeCorrector) - x(d.startDate - timeCorrector));
234 });
235
236    rect.exit().remove();
237
238    svg.select(".x").transition().call(xAxis);
239    svg.select(".y").transition().call(yAxis);
240
241    return gantt;
242};
243
244gantt.margin = function (value) {
245    if (!arguments.length)
246        return margin;
247    margin = value;
248    return gantt;
249};
250gantt.drawytitles = function (value) {
251    if (!arguments.length)
252        return drawytitles;
253    drawytitles = value;
254    return gantt;
255}
256gantt.timeDomain = function (value) {
257    if (!arguments.length)
258        return [timeDomainStart, timeDomainEnd];
259    timeDomainStart = +value[0], timeDomainEnd = +value[1];
260    return gantt;
261};
262
263/**
264 * @param {string}
265 *                vale The value can be "fit" - the domain fits the data or
266 *                "fixed" - fixed domain.
267 */
268gantt.timeDomainMode = function (value) {
269    if (!arguments.length)
270        return timeDomainMode;
271    timeDomainMode = value;
272    return gantt;
273
274};
275
276gantt.taskTypes = function (value) {
277    if (!arguments.length)
278        return taskTypes;
279    taskTypes = value;
280    return gantt;
281};
282
283gantt.taskStatus = function (value) {
284    if (!arguments.length)
285        return taskStatus;
286    taskStatus = value;
287    return gantt;
288};
289
290gantt.width = function (value) {
291    if (!arguments.length)
292        return width;
293    width = +value;
294    return gantt;
295};
296
297gantt.height = function (value) {
298    if (!arguments.length)
299        return height;
300    height = +value;
301    return gantt;
302};
303
304gantt.tickFormat = function (value) {
305    if (!arguments.length)
306        return tickFormat;
307    tickFormat = value;
308    return gantt;
309};
310
311gantt.selector = function (value) {
312    if (!arguments.length)
313        return selector;
314    selector = value;
315    return gantt;
316};
317
318return gantt;
319};
Note: See TracBrowser for help on using the repository browser.