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