Better styling for gantt diagrams and addition of critical path, active and completed tasks
This commit is contained in:
parent
4078cf3aed
commit
e5657d028d
|
@ -24840,7 +24840,6 @@ module.exports={
|
||||||
"proxyquire": "^1.3.1",
|
"proxyquire": "^1.3.1",
|
||||||
"rewire": "^2.1.3",
|
"rewire": "^2.1.3",
|
||||||
"rimraf": "^2.2.8",
|
"rimraf": "^2.2.8",
|
||||||
"semantic-ui": "^1.4.1",
|
|
||||||
"tape": "^3.0.3"
|
"tape": "^3.0.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -28067,9 +28066,36 @@ var compileData = function(prevTask, dataStr){
|
||||||
}
|
}
|
||||||
|
|
||||||
var data = ds.split(',');
|
var data = ds.split(',');
|
||||||
|
|
||||||
|
|
||||||
var task = {};
|
var task = {};
|
||||||
var df = exports.getDateFormat();
|
var df = exports.getDateFormat();
|
||||||
|
|
||||||
|
var matchFound = true;
|
||||||
|
while(matchFound){
|
||||||
|
matchFound = false;
|
||||||
|
if(data[0].match(/^\s*active\s*$/)){
|
||||||
|
task.active = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
if(data[0].match(/^\s*done\s*$/)){
|
||||||
|
task.done = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
}
|
||||||
|
if(data[0].match(/^\s*crit\s*$/)){
|
||||||
|
task.crit = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for(i=0;i<data.length;i++){
|
||||||
|
data[i] = data[i].trim();
|
||||||
|
}
|
||||||
|
|
||||||
switch(data.length){
|
switch(data.length){
|
||||||
case 1:
|
case 1:
|
||||||
task.id = parseId();
|
task.id = parseId();
|
||||||
|
@ -28107,6 +28133,9 @@ exports.addTask = function(descr,data){
|
||||||
newTask.startTime = taskInfo.startTime;
|
newTask.startTime = taskInfo.startTime;
|
||||||
newTask.endTime = taskInfo.endTime;
|
newTask.endTime = taskInfo.endTime;
|
||||||
newTask.id = taskInfo.id;
|
newTask.id = taskInfo.id;
|
||||||
|
newTask.active = taskInfo.active;
|
||||||
|
newTask.done = taskInfo.done;
|
||||||
|
newTask.crit = taskInfo.crit;
|
||||||
lastTask = newTask;
|
lastTask = newTask;
|
||||||
tasks.push(newTask);
|
tasks.push(newTask);
|
||||||
};
|
};
|
||||||
|
@ -28120,16 +28149,18 @@ gantt.yy = require('./ganttDb');
|
||||||
var d3 = require('./d3');
|
var d3 = require('./d3');
|
||||||
|
|
||||||
var conf = {
|
var conf = {
|
||||||
titleTopMargin:25,
|
titleTopMargin: 25,
|
||||||
barHeight:20,
|
barHeight: 20,
|
||||||
barGap:4,
|
barGap: 4,
|
||||||
topPadding:75,
|
topPadding: 50,
|
||||||
sidePadding:75
|
sidePadding: 75,
|
||||||
|
gridLineStartPadding: 35,
|
||||||
|
fontSize: 11
|
||||||
};
|
};
|
||||||
module.exports.setConf = function(cnf){
|
module.exports.setConf = function (cnf) {
|
||||||
var keys = Object.keys(cnf);
|
var keys = Object.keys(cnf);
|
||||||
|
|
||||||
keys.forEach(function(key){
|
keys.forEach(function (key) {
|
||||||
conf[key] = cnf[key];
|
conf[key] = cnf[key];
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -28139,18 +28170,18 @@ module.exports.draw = function (text, id) {
|
||||||
gantt.parse(text);
|
gantt.parse(text);
|
||||||
var elem = document.getElementById(id);
|
var elem = document.getElementById(id);
|
||||||
w = elem.offsetWidth;
|
w = elem.offsetWidth;
|
||||||
|
|
||||||
if(typeof w === 'undefined'){
|
if (typeof w === 'undefined') {
|
||||||
w = 800;
|
w = 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
var taskArray = gantt.yy.getTasks();
|
|
||||||
|
|
||||||
// Set height based on number of tasks
|
|
||||||
var h = taskArray.length*(conf.barHeight+conf.barGap)+2*conf.topPadding;
|
|
||||||
|
|
||||||
elem.style.height = h+'px';
|
var taskArray = gantt.yy.getTasks();
|
||||||
var svg = d3.select('#'+id);
|
|
||||||
|
// Set height based on number of tasks
|
||||||
|
var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
|
||||||
|
|
||||||
|
elem.style.height = h + 'px';
|
||||||
|
var svg = d3.select('#' + id);
|
||||||
|
|
||||||
// http://codepen.io/anon/pen/azLvWR
|
// http://codepen.io/anon/pen/azLvWR
|
||||||
|
|
||||||
|
@ -28184,9 +28215,7 @@ module.exports.draw = function (text, id) {
|
||||||
.text(gantt.yy.getTitle())
|
.text(gantt.yy.getTitle())
|
||||||
.attr("x", w / 2)
|
.attr("x", w / 2)
|
||||||
.attr("y", conf.titleTopMargin)
|
.attr("y", conf.titleTopMargin)
|
||||||
.attr("text-anchor", "middle")
|
.attr('class', 'titleText');
|
||||||
.attr("font-size", 18)
|
|
||||||
.attr("fill", "#009FFC");
|
|
||||||
|
|
||||||
|
|
||||||
function makeGant(tasks, pageWidth, pageHeight) {
|
function makeGant(tasks, pageWidth, pageHeight) {
|
||||||
|
@ -28223,15 +28252,14 @@ module.exports.draw = function (text, id) {
|
||||||
return w - theSidePad / 2;
|
return w - theSidePad / 2;
|
||||||
})
|
})
|
||||||
.attr("height", theGap)
|
.attr("height", theGap)
|
||||||
.attr("stroke", "none")
|
.attr('class', function (d) {
|
||||||
.attr("fill", function (d) {
|
|
||||||
for (var i = 0; i < categories.length; i++) {
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if (d.type === categories[i]) {
|
if (d.type === categories[i]) {
|
||||||
return d3.rgb(theColorScale(i));
|
return 'section section' + (i % conf.numberSectionStyles);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
return 'section section0';
|
||||||
.attr("opacity", 0.2);
|
});
|
||||||
|
|
||||||
|
|
||||||
var rectangles = svg.append('g')
|
var rectangles = svg.append('g')
|
||||||
|
@ -28241,68 +28269,100 @@ module.exports.draw = function (text, id) {
|
||||||
|
|
||||||
|
|
||||||
var innerRects = rectangles.append("rect")
|
var innerRects = rectangles.append("rect")
|
||||||
.attr("rx", 3)
|
.attr("rx", 3)
|
||||||
.attr("ry", 3)
|
.attr("ry", 3)
|
||||||
.attr("x", function (d) {
|
.attr("x", function (d) {
|
||||||
return timeScale(d.startTime) + theSidePad;
|
return timeScale(d.startTime) + theSidePad;
|
||||||
})
|
})
|
||||||
.attr("y", function (d, i) {
|
.attr("y", function (d, i) {
|
||||||
return i * theGap + theTopPad;
|
return i * theGap + theTopPad;
|
||||||
})
|
})
|
||||||
.attr("width", function (d) {
|
.attr("width", function (d) {
|
||||||
return (timeScale(d.endTime) - timeScale(d.startTime));
|
return (timeScale(d.endTime) - timeScale(d.startTime));
|
||||||
})
|
})
|
||||||
.attr("height", theBarHeight)
|
.attr("height", theBarHeight)
|
||||||
.attr("stroke", "none")
|
.attr('class', function (d) {
|
||||||
.attr("fill", function (d) {
|
var res = 'task ';
|
||||||
for (var i = 0; i < categories.length; i++) {
|
|
||||||
if (d.type === categories[i]) {
|
|
||||||
return d3.rgb(theColorScale(i));
|
var secNum = 0;
|
||||||
|
for (var i = 0; i < categories.length; i++) {
|
||||||
|
if (d.type === categories[i]) {
|
||||||
|
secNum = (i % conf.numberSectionStyles);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
if(d.active){
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' activeCrit'+secNum;
|
||||||
|
}else{
|
||||||
|
return res + ' active'+secNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.done) {
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' doneCrit'+secNum;
|
||||||
|
}else{
|
||||||
|
return res + ' done'+secNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' crit'+secNum;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return res + ' task'+secNum;
|
||||||
|
})
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
var rectText = rectangles.append("text")
|
var rectText = rectangles.append("text")
|
||||||
.text(function (d) {
|
.text(function (d) {
|
||||||
return d.task;
|
return d.task;
|
||||||
})
|
})
|
||||||
.attr("font-size", 11)
|
|
||||||
.attr("x", function (d) {
|
.attr("x", function (d) {
|
||||||
var startX = timeScale(d.startTime),
|
var startX = timeScale(d.startTime),
|
||||||
endX = timeScale(d.endTime),
|
endX = timeScale(d.endTime),
|
||||||
textWidth = this.getBBox().width;
|
textWidth = this.getBBox().width;
|
||||||
|
|
||||||
// Check id text width > width of rectangle
|
// Check id text width > width of rectangle
|
||||||
if(textWidth>(endX-startX)){
|
if (textWidth > (endX - startX)) {
|
||||||
if (endX + textWidth > w){
|
if (endX + textWidth > w) {
|
||||||
return startX + theSidePad;
|
return startX + theSidePad;
|
||||||
}else {
|
} else {
|
||||||
return endX + theSidePad;
|
return endX + theSidePad;
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
return (endX - startX) / 2 + startX + theSidePad;
|
return (endX - startX) / 2 + startX + theSidePad;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.attr("y", function (d, i) {
|
.attr("y", function (d, i) {
|
||||||
return i * theGap + 14 + theTopPad;
|
return i * theGap + (conf.barHeight / 2) + (conf.fontSize / 2 - 2) + theTopPad;
|
||||||
})
|
})
|
||||||
//.attr("text-anchor", "middle")
|
//.attr("text-anchor", "middle")
|
||||||
.attr("text-height", theBarHeight)
|
.attr("text-height", theBarHeight)
|
||||||
.attr("class",function (d) {
|
.attr("class", function (d) {
|
||||||
var startX = timeScale(d.startTime),
|
var startX = timeScale(d.startTime),
|
||||||
endX = timeScale(d.endTime),
|
endX = timeScale(d.endTime),
|
||||||
textWidth = this.getBBox().width;
|
textWidth = this.getBBox().width;
|
||||||
|
var secNum = 0;
|
||||||
// Check id text width > width of rectangle
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if(textWidth>(endX-startX)) {
|
if (d.type === categories[i]) {
|
||||||
if (endX + textWidth > w){
|
secNum = (i % conf.numberSectionStyles);
|
||||||
return 'taskTextOutsideLeft';
|
|
||||||
}else {
|
|
||||||
return 'taskTextOutsideRight';
|
|
||||||
}
|
}
|
||||||
}else{
|
}
|
||||||
return 'taskText';
|
|
||||||
|
// Check id text width > width of rectangle
|
||||||
|
if (textWidth > (endX - startX)) {
|
||||||
|
if (endX + textWidth > w) {
|
||||||
|
return 'taskTextOutsideLeft taskTextOutside' + secNum;
|
||||||
|
} else {
|
||||||
|
return 'taskTextOutsideRight taskTextOutsideRight' + secNum;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return 'taskText taskText' + secNum;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -28315,8 +28375,8 @@ module.exports.draw = function (text, id) {
|
||||||
.scale(timeScale)
|
.scale(timeScale)
|
||||||
.orient('bottom')
|
.orient('bottom')
|
||||||
//.ticks(d3.time.days, 5)
|
//.ticks(d3.time.days, 5)
|
||||||
.tickSize(-h + theTopPad + 20, 0, 0)
|
.tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0);
|
||||||
.tickFormat(d3.time.format('%d %b'));
|
//.tickFormat(d3.time.format('%d %b'));
|
||||||
|
|
||||||
var grid = svg.append('g')
|
var grid = svg.append('g')
|
||||||
.attr('class', 'grid')
|
.attr('class', 'grid')
|
||||||
|
@ -28358,16 +28418,13 @@ module.exports.draw = function (text, id) {
|
||||||
return d[1] * theGap / 2 + theTopPad;
|
return d[1] * theGap / 2 + theTopPad;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.attr("font-size", 11)
|
.attr('class', function (d) {
|
||||||
.attr("text-anchor", "start")
|
|
||||||
.attr("text-height", 14)
|
|
||||||
.attr("fill", function (d) {
|
|
||||||
for (var i = 0; i < categories.length; i++) {
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if (d[0] === categories[i]) {
|
if (d[0] === categories[i]) {
|
||||||
// console.log("true!");
|
return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);
|
||||||
return d3.rgb(theColorScale(i)).darker();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return 'sectionTitle';
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -28388,9 +28445,9 @@ module.exports.draw = function (text, id) {
|
||||||
function getCounts(arr) {
|
function getCounts(arr) {
|
||||||
var i = arr.length, // var to loop over
|
var i = arr.length, // var to loop over
|
||||||
obj = {}; // obj to store results
|
obj = {}; // obj to store results
|
||||||
while (i){
|
while (i) {
|
||||||
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
|
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
|
||||||
}
|
}
|
||||||
return obj;
|
return obj;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30608,7 +30665,7 @@ var parse = function(text){
|
||||||
var init = function (sequenceConfig) {
|
var init = function (sequenceConfig) {
|
||||||
var arr = document.querySelectorAll('.mermaid');
|
var arr = document.querySelectorAll('.mermaid');
|
||||||
var i;
|
var i;
|
||||||
|
|
||||||
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
|
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
|
||||||
if(typeof sequenceConfig === 'object'){
|
if(typeof sequenceConfig === 'object'){
|
||||||
seq.setConf(sequenceConfig);
|
seq.setConf(sequenceConfig);
|
||||||
|
@ -30662,6 +30719,10 @@ var init = function (sequenceConfig) {
|
||||||
utils.cloneCssStyles(element.firstChild, []);
|
utils.cloneCssStyles(element.firstChild, []);
|
||||||
break;
|
break;
|
||||||
case 'gantt':
|
case 'gantt':
|
||||||
|
if(typeof mermaid.ganttConfig === 'object'){
|
||||||
|
gantt.setConf(mermaid.ganttConfig);
|
||||||
|
|
||||||
|
}
|
||||||
gantt.draw(txt,id);
|
gantt.draw(txt,id);
|
||||||
utils.cloneCssStyles(element.firstChild, []);
|
utils.cloneCssStyles(element.firstChild, []);
|
||||||
break;
|
break;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -24808,7 +24808,6 @@ module.exports={
|
||||||
"proxyquire": "^1.3.1",
|
"proxyquire": "^1.3.1",
|
||||||
"rewire": "^2.1.3",
|
"rewire": "^2.1.3",
|
||||||
"rimraf": "^2.2.8",
|
"rimraf": "^2.2.8",
|
||||||
"semantic-ui": "^1.4.1",
|
|
||||||
"tape": "^3.0.3"
|
"tape": "^3.0.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -28035,9 +28034,36 @@ var compileData = function(prevTask, dataStr){
|
||||||
}
|
}
|
||||||
|
|
||||||
var data = ds.split(',');
|
var data = ds.split(',');
|
||||||
|
|
||||||
|
|
||||||
var task = {};
|
var task = {};
|
||||||
var df = exports.getDateFormat();
|
var df = exports.getDateFormat();
|
||||||
|
|
||||||
|
var matchFound = true;
|
||||||
|
while(matchFound){
|
||||||
|
matchFound = false;
|
||||||
|
if(data[0].match(/^\s*active\s*$/)){
|
||||||
|
task.active = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
if(data[0].match(/^\s*done\s*$/)){
|
||||||
|
task.done = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
}
|
||||||
|
if(data[0].match(/^\s*crit\s*$/)){
|
||||||
|
task.crit = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for(i=0;i<data.length;i++){
|
||||||
|
data[i] = data[i].trim();
|
||||||
|
}
|
||||||
|
|
||||||
switch(data.length){
|
switch(data.length){
|
||||||
case 1:
|
case 1:
|
||||||
task.id = parseId();
|
task.id = parseId();
|
||||||
|
@ -28075,6 +28101,9 @@ exports.addTask = function(descr,data){
|
||||||
newTask.startTime = taskInfo.startTime;
|
newTask.startTime = taskInfo.startTime;
|
||||||
newTask.endTime = taskInfo.endTime;
|
newTask.endTime = taskInfo.endTime;
|
||||||
newTask.id = taskInfo.id;
|
newTask.id = taskInfo.id;
|
||||||
|
newTask.active = taskInfo.active;
|
||||||
|
newTask.done = taskInfo.done;
|
||||||
|
newTask.crit = taskInfo.crit;
|
||||||
lastTask = newTask;
|
lastTask = newTask;
|
||||||
tasks.push(newTask);
|
tasks.push(newTask);
|
||||||
};
|
};
|
||||||
|
@ -28088,16 +28117,18 @@ gantt.yy = require('./ganttDb');
|
||||||
var d3 = require('./d3');
|
var d3 = require('./d3');
|
||||||
|
|
||||||
var conf = {
|
var conf = {
|
||||||
titleTopMargin:25,
|
titleTopMargin: 25,
|
||||||
barHeight:20,
|
barHeight: 20,
|
||||||
barGap:4,
|
barGap: 4,
|
||||||
topPadding:75,
|
topPadding: 50,
|
||||||
sidePadding:75
|
sidePadding: 75,
|
||||||
|
gridLineStartPadding: 35,
|
||||||
|
fontSize: 11
|
||||||
};
|
};
|
||||||
module.exports.setConf = function(cnf){
|
module.exports.setConf = function (cnf) {
|
||||||
var keys = Object.keys(cnf);
|
var keys = Object.keys(cnf);
|
||||||
|
|
||||||
keys.forEach(function(key){
|
keys.forEach(function (key) {
|
||||||
conf[key] = cnf[key];
|
conf[key] = cnf[key];
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -28107,18 +28138,18 @@ module.exports.draw = function (text, id) {
|
||||||
gantt.parse(text);
|
gantt.parse(text);
|
||||||
var elem = document.getElementById(id);
|
var elem = document.getElementById(id);
|
||||||
w = elem.offsetWidth;
|
w = elem.offsetWidth;
|
||||||
|
|
||||||
if(typeof w === 'undefined'){
|
if (typeof w === 'undefined') {
|
||||||
w = 800;
|
w = 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
var taskArray = gantt.yy.getTasks();
|
|
||||||
|
|
||||||
// Set height based on number of tasks
|
|
||||||
var h = taskArray.length*(conf.barHeight+conf.barGap)+2*conf.topPadding;
|
|
||||||
|
|
||||||
elem.style.height = h+'px';
|
var taskArray = gantt.yy.getTasks();
|
||||||
var svg = d3.select('#'+id);
|
|
||||||
|
// Set height based on number of tasks
|
||||||
|
var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
|
||||||
|
|
||||||
|
elem.style.height = h + 'px';
|
||||||
|
var svg = d3.select('#' + id);
|
||||||
|
|
||||||
// http://codepen.io/anon/pen/azLvWR
|
// http://codepen.io/anon/pen/azLvWR
|
||||||
|
|
||||||
|
@ -28152,9 +28183,7 @@ module.exports.draw = function (text, id) {
|
||||||
.text(gantt.yy.getTitle())
|
.text(gantt.yy.getTitle())
|
||||||
.attr("x", w / 2)
|
.attr("x", w / 2)
|
||||||
.attr("y", conf.titleTopMargin)
|
.attr("y", conf.titleTopMargin)
|
||||||
.attr("text-anchor", "middle")
|
.attr('class', 'titleText');
|
||||||
.attr("font-size", 18)
|
|
||||||
.attr("fill", "#009FFC");
|
|
||||||
|
|
||||||
|
|
||||||
function makeGant(tasks, pageWidth, pageHeight) {
|
function makeGant(tasks, pageWidth, pageHeight) {
|
||||||
|
@ -28191,15 +28220,14 @@ module.exports.draw = function (text, id) {
|
||||||
return w - theSidePad / 2;
|
return w - theSidePad / 2;
|
||||||
})
|
})
|
||||||
.attr("height", theGap)
|
.attr("height", theGap)
|
||||||
.attr("stroke", "none")
|
.attr('class', function (d) {
|
||||||
.attr("fill", function (d) {
|
|
||||||
for (var i = 0; i < categories.length; i++) {
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if (d.type === categories[i]) {
|
if (d.type === categories[i]) {
|
||||||
return d3.rgb(theColorScale(i));
|
return 'section section' + (i % conf.numberSectionStyles);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
return 'section section0';
|
||||||
.attr("opacity", 0.2);
|
});
|
||||||
|
|
||||||
|
|
||||||
var rectangles = svg.append('g')
|
var rectangles = svg.append('g')
|
||||||
|
@ -28209,68 +28237,100 @@ module.exports.draw = function (text, id) {
|
||||||
|
|
||||||
|
|
||||||
var innerRects = rectangles.append("rect")
|
var innerRects = rectangles.append("rect")
|
||||||
.attr("rx", 3)
|
.attr("rx", 3)
|
||||||
.attr("ry", 3)
|
.attr("ry", 3)
|
||||||
.attr("x", function (d) {
|
.attr("x", function (d) {
|
||||||
return timeScale(d.startTime) + theSidePad;
|
return timeScale(d.startTime) + theSidePad;
|
||||||
})
|
})
|
||||||
.attr("y", function (d, i) {
|
.attr("y", function (d, i) {
|
||||||
return i * theGap + theTopPad;
|
return i * theGap + theTopPad;
|
||||||
})
|
})
|
||||||
.attr("width", function (d) {
|
.attr("width", function (d) {
|
||||||
return (timeScale(d.endTime) - timeScale(d.startTime));
|
return (timeScale(d.endTime) - timeScale(d.startTime));
|
||||||
})
|
})
|
||||||
.attr("height", theBarHeight)
|
.attr("height", theBarHeight)
|
||||||
.attr("stroke", "none")
|
.attr('class', function (d) {
|
||||||
.attr("fill", function (d) {
|
var res = 'task ';
|
||||||
for (var i = 0; i < categories.length; i++) {
|
|
||||||
if (d.type === categories[i]) {
|
|
||||||
return d3.rgb(theColorScale(i));
|
var secNum = 0;
|
||||||
|
for (var i = 0; i < categories.length; i++) {
|
||||||
|
if (d.type === categories[i]) {
|
||||||
|
secNum = (i % conf.numberSectionStyles);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
if(d.active){
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' activeCrit'+secNum;
|
||||||
|
}else{
|
||||||
|
return res + ' active'+secNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.done) {
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' doneCrit'+secNum;
|
||||||
|
}else{
|
||||||
|
return res + ' done'+secNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' crit'+secNum;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return res + ' task'+secNum;
|
||||||
|
})
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
var rectText = rectangles.append("text")
|
var rectText = rectangles.append("text")
|
||||||
.text(function (d) {
|
.text(function (d) {
|
||||||
return d.task;
|
return d.task;
|
||||||
})
|
})
|
||||||
.attr("font-size", 11)
|
|
||||||
.attr("x", function (d) {
|
.attr("x", function (d) {
|
||||||
var startX = timeScale(d.startTime),
|
var startX = timeScale(d.startTime),
|
||||||
endX = timeScale(d.endTime),
|
endX = timeScale(d.endTime),
|
||||||
textWidth = this.getBBox().width;
|
textWidth = this.getBBox().width;
|
||||||
|
|
||||||
// Check id text width > width of rectangle
|
// Check id text width > width of rectangle
|
||||||
if(textWidth>(endX-startX)){
|
if (textWidth > (endX - startX)) {
|
||||||
if (endX + textWidth > w){
|
if (endX + textWidth > w) {
|
||||||
return startX + theSidePad;
|
return startX + theSidePad;
|
||||||
}else {
|
} else {
|
||||||
return endX + theSidePad;
|
return endX + theSidePad;
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
return (endX - startX) / 2 + startX + theSidePad;
|
return (endX - startX) / 2 + startX + theSidePad;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.attr("y", function (d, i) {
|
.attr("y", function (d, i) {
|
||||||
return i * theGap + 14 + theTopPad;
|
return i * theGap + (conf.barHeight / 2) + (conf.fontSize / 2 - 2) + theTopPad;
|
||||||
})
|
})
|
||||||
//.attr("text-anchor", "middle")
|
//.attr("text-anchor", "middle")
|
||||||
.attr("text-height", theBarHeight)
|
.attr("text-height", theBarHeight)
|
||||||
.attr("class",function (d) {
|
.attr("class", function (d) {
|
||||||
var startX = timeScale(d.startTime),
|
var startX = timeScale(d.startTime),
|
||||||
endX = timeScale(d.endTime),
|
endX = timeScale(d.endTime),
|
||||||
textWidth = this.getBBox().width;
|
textWidth = this.getBBox().width;
|
||||||
|
var secNum = 0;
|
||||||
// Check id text width > width of rectangle
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if(textWidth>(endX-startX)) {
|
if (d.type === categories[i]) {
|
||||||
if (endX + textWidth > w){
|
secNum = (i % conf.numberSectionStyles);
|
||||||
return 'taskTextOutsideLeft';
|
|
||||||
}else {
|
|
||||||
return 'taskTextOutsideRight';
|
|
||||||
}
|
}
|
||||||
}else{
|
}
|
||||||
return 'taskText';
|
|
||||||
|
// Check id text width > width of rectangle
|
||||||
|
if (textWidth > (endX - startX)) {
|
||||||
|
if (endX + textWidth > w) {
|
||||||
|
return 'taskTextOutsideLeft taskTextOutside' + secNum;
|
||||||
|
} else {
|
||||||
|
return 'taskTextOutsideRight taskTextOutsideRight' + secNum;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return 'taskText taskText' + secNum;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -28283,8 +28343,8 @@ module.exports.draw = function (text, id) {
|
||||||
.scale(timeScale)
|
.scale(timeScale)
|
||||||
.orient('bottom')
|
.orient('bottom')
|
||||||
//.ticks(d3.time.days, 5)
|
//.ticks(d3.time.days, 5)
|
||||||
.tickSize(-h + theTopPad + 20, 0, 0)
|
.tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0);
|
||||||
.tickFormat(d3.time.format('%d %b'));
|
//.tickFormat(d3.time.format('%d %b'));
|
||||||
|
|
||||||
var grid = svg.append('g')
|
var grid = svg.append('g')
|
||||||
.attr('class', 'grid')
|
.attr('class', 'grid')
|
||||||
|
@ -28326,16 +28386,13 @@ module.exports.draw = function (text, id) {
|
||||||
return d[1] * theGap / 2 + theTopPad;
|
return d[1] * theGap / 2 + theTopPad;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.attr("font-size", 11)
|
.attr('class', function (d) {
|
||||||
.attr("text-anchor", "start")
|
|
||||||
.attr("text-height", 14)
|
|
||||||
.attr("fill", function (d) {
|
|
||||||
for (var i = 0; i < categories.length; i++) {
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if (d[0] === categories[i]) {
|
if (d[0] === categories[i]) {
|
||||||
// console.log("true!");
|
return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);
|
||||||
return d3.rgb(theColorScale(i)).darker();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return 'sectionTitle';
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -28356,9 +28413,9 @@ module.exports.draw = function (text, id) {
|
||||||
function getCounts(arr) {
|
function getCounts(arr) {
|
||||||
var i = arr.length, // var to loop over
|
var i = arr.length, // var to loop over
|
||||||
obj = {}; // obj to store results
|
obj = {}; // obj to store results
|
||||||
while (i){
|
while (i) {
|
||||||
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
|
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
|
||||||
}
|
}
|
||||||
return obj;
|
return obj;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30576,7 +30633,7 @@ var parse = function(text){
|
||||||
var init = function (sequenceConfig) {
|
var init = function (sequenceConfig) {
|
||||||
var arr = document.querySelectorAll('.mermaid');
|
var arr = document.querySelectorAll('.mermaid');
|
||||||
var i;
|
var i;
|
||||||
|
|
||||||
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
|
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
|
||||||
if(typeof sequenceConfig === 'object'){
|
if(typeof sequenceConfig === 'object'){
|
||||||
seq.setConf(sequenceConfig);
|
seq.setConf(sequenceConfig);
|
||||||
|
@ -30630,6 +30687,10 @@ var init = function (sequenceConfig) {
|
||||||
utils.cloneCssStyles(element.firstChild, []);
|
utils.cloneCssStyles(element.firstChild, []);
|
||||||
break;
|
break;
|
||||||
case 'gantt':
|
case 'gantt':
|
||||||
|
if(typeof mermaid.ganttConfig === 'object'){
|
||||||
|
gantt.setConf(mermaid.ganttConfig);
|
||||||
|
|
||||||
|
}
|
||||||
gantt.draw(txt,id);
|
gantt.draw(txt,id);
|
||||||
utils.cloneCssStyles(element.firstChild, []);
|
utils.cloneCssStyles(element.firstChild, []);
|
||||||
break;
|
break;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -151,9 +151,36 @@ var compileData = function(prevTask, dataStr){
|
||||||
}
|
}
|
||||||
|
|
||||||
var data = ds.split(',');
|
var data = ds.split(',');
|
||||||
|
|
||||||
|
|
||||||
var task = {};
|
var task = {};
|
||||||
var df = exports.getDateFormat();
|
var df = exports.getDateFormat();
|
||||||
|
|
||||||
|
var matchFound = true;
|
||||||
|
while(matchFound){
|
||||||
|
matchFound = false;
|
||||||
|
if(data[0].match(/^\s*active\s*$/)){
|
||||||
|
task.active = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
if(data[0].match(/^\s*done\s*$/)){
|
||||||
|
task.done = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
}
|
||||||
|
if(data[0].match(/^\s*crit\s*$/)){
|
||||||
|
task.crit = true;
|
||||||
|
data.shift(1);
|
||||||
|
matchFound = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for(i=0;i<data.length;i++){
|
||||||
|
data[i] = data[i].trim();
|
||||||
|
}
|
||||||
|
|
||||||
switch(data.length){
|
switch(data.length){
|
||||||
case 1:
|
case 1:
|
||||||
task.id = parseId();
|
task.id = parseId();
|
||||||
|
@ -191,6 +218,9 @@ exports.addTask = function(descr,data){
|
||||||
newTask.startTime = taskInfo.startTime;
|
newTask.startTime = taskInfo.startTime;
|
||||||
newTask.endTime = taskInfo.endTime;
|
newTask.endTime = taskInfo.endTime;
|
||||||
newTask.id = taskInfo.id;
|
newTask.id = taskInfo.id;
|
||||||
|
newTask.active = taskInfo.active;
|
||||||
|
newTask.done = taskInfo.done;
|
||||||
|
newTask.crit = taskInfo.crit;
|
||||||
lastTask = newTask;
|
lastTask = newTask;
|
||||||
tasks.push(newTask);
|
tasks.push(newTask);
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,16 +3,18 @@ gantt.yy = require('./ganttDb');
|
||||||
var d3 = require('./d3');
|
var d3 = require('./d3');
|
||||||
|
|
||||||
var conf = {
|
var conf = {
|
||||||
titleTopMargin:25,
|
titleTopMargin: 25,
|
||||||
barHeight:20,
|
barHeight: 20,
|
||||||
barGap:4,
|
barGap: 4,
|
||||||
topPadding:75,
|
topPadding: 50,
|
||||||
sidePadding:75
|
sidePadding: 75,
|
||||||
|
gridLineStartPadding: 35,
|
||||||
|
fontSize: 11
|
||||||
};
|
};
|
||||||
module.exports.setConf = function(cnf){
|
module.exports.setConf = function (cnf) {
|
||||||
var keys = Object.keys(cnf);
|
var keys = Object.keys(cnf);
|
||||||
|
|
||||||
keys.forEach(function(key){
|
keys.forEach(function (key) {
|
||||||
conf[key] = cnf[key];
|
conf[key] = cnf[key];
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
@ -22,18 +24,18 @@ module.exports.draw = function (text, id) {
|
||||||
gantt.parse(text);
|
gantt.parse(text);
|
||||||
var elem = document.getElementById(id);
|
var elem = document.getElementById(id);
|
||||||
w = elem.offsetWidth;
|
w = elem.offsetWidth;
|
||||||
|
|
||||||
if(typeof w === 'undefined'){
|
if (typeof w === 'undefined') {
|
||||||
w = 800;
|
w = 800;
|
||||||
}
|
}
|
||||||
|
|
||||||
var taskArray = gantt.yy.getTasks();
|
|
||||||
|
|
||||||
// Set height based on number of tasks
|
|
||||||
var h = taskArray.length*(conf.barHeight+conf.barGap)+2*conf.topPadding;
|
|
||||||
|
|
||||||
elem.style.height = h+'px';
|
var taskArray = gantt.yy.getTasks();
|
||||||
var svg = d3.select('#'+id);
|
|
||||||
|
// Set height based on number of tasks
|
||||||
|
var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
|
||||||
|
|
||||||
|
elem.style.height = h + 'px';
|
||||||
|
var svg = d3.select('#' + id);
|
||||||
|
|
||||||
// http://codepen.io/anon/pen/azLvWR
|
// http://codepen.io/anon/pen/azLvWR
|
||||||
|
|
||||||
|
@ -67,9 +69,7 @@ module.exports.draw = function (text, id) {
|
||||||
.text(gantt.yy.getTitle())
|
.text(gantt.yy.getTitle())
|
||||||
.attr("x", w / 2)
|
.attr("x", w / 2)
|
||||||
.attr("y", conf.titleTopMargin)
|
.attr("y", conf.titleTopMargin)
|
||||||
.attr("text-anchor", "middle")
|
.attr('class', 'titleText');
|
||||||
.attr("font-size", 18)
|
|
||||||
.attr("fill", "#009FFC");
|
|
||||||
|
|
||||||
|
|
||||||
function makeGant(tasks, pageWidth, pageHeight) {
|
function makeGant(tasks, pageWidth, pageHeight) {
|
||||||
|
@ -106,15 +106,14 @@ module.exports.draw = function (text, id) {
|
||||||
return w - theSidePad / 2;
|
return w - theSidePad / 2;
|
||||||
})
|
})
|
||||||
.attr("height", theGap)
|
.attr("height", theGap)
|
||||||
.attr("stroke", "none")
|
.attr('class', function (d) {
|
||||||
.attr("fill", function (d) {
|
|
||||||
for (var i = 0; i < categories.length; i++) {
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if (d.type === categories[i]) {
|
if (d.type === categories[i]) {
|
||||||
return d3.rgb(theColorScale(i));
|
return 'section section' + (i % conf.numberSectionStyles);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
return 'section section0';
|
||||||
.attr("opacity", 0.2);
|
});
|
||||||
|
|
||||||
|
|
||||||
var rectangles = svg.append('g')
|
var rectangles = svg.append('g')
|
||||||
|
@ -124,68 +123,100 @@ module.exports.draw = function (text, id) {
|
||||||
|
|
||||||
|
|
||||||
var innerRects = rectangles.append("rect")
|
var innerRects = rectangles.append("rect")
|
||||||
.attr("rx", 3)
|
.attr("rx", 3)
|
||||||
.attr("ry", 3)
|
.attr("ry", 3)
|
||||||
.attr("x", function (d) {
|
.attr("x", function (d) {
|
||||||
return timeScale(d.startTime) + theSidePad;
|
return timeScale(d.startTime) + theSidePad;
|
||||||
})
|
})
|
||||||
.attr("y", function (d, i) {
|
.attr("y", function (d, i) {
|
||||||
return i * theGap + theTopPad;
|
return i * theGap + theTopPad;
|
||||||
})
|
})
|
||||||
.attr("width", function (d) {
|
.attr("width", function (d) {
|
||||||
return (timeScale(d.endTime) - timeScale(d.startTime));
|
return (timeScale(d.endTime) - timeScale(d.startTime));
|
||||||
})
|
})
|
||||||
.attr("height", theBarHeight)
|
.attr("height", theBarHeight)
|
||||||
.attr("stroke", "none")
|
.attr('class', function (d) {
|
||||||
.attr("fill", function (d) {
|
var res = 'task ';
|
||||||
for (var i = 0; i < categories.length; i++) {
|
|
||||||
if (d.type === categories[i]) {
|
|
||||||
return d3.rgb(theColorScale(i));
|
var secNum = 0;
|
||||||
|
for (var i = 0; i < categories.length; i++) {
|
||||||
|
if (d.type === categories[i]) {
|
||||||
|
secNum = (i % conf.numberSectionStyles);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
if(d.active){
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' activeCrit'+secNum;
|
||||||
|
}else{
|
||||||
|
return res + ' active'+secNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.done) {
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' doneCrit'+secNum;
|
||||||
|
}else{
|
||||||
|
return res + ' done'+secNum;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (d.crit) {
|
||||||
|
return res + ' crit'+secNum;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return res + ' task'+secNum;
|
||||||
|
})
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
var rectText = rectangles.append("text")
|
var rectText = rectangles.append("text")
|
||||||
.text(function (d) {
|
.text(function (d) {
|
||||||
return d.task;
|
return d.task;
|
||||||
})
|
})
|
||||||
.attr("font-size", 11)
|
|
||||||
.attr("x", function (d) {
|
.attr("x", function (d) {
|
||||||
var startX = timeScale(d.startTime),
|
var startX = timeScale(d.startTime),
|
||||||
endX = timeScale(d.endTime),
|
endX = timeScale(d.endTime),
|
||||||
textWidth = this.getBBox().width;
|
textWidth = this.getBBox().width;
|
||||||
|
|
||||||
// Check id text width > width of rectangle
|
// Check id text width > width of rectangle
|
||||||
if(textWidth>(endX-startX)){
|
if (textWidth > (endX - startX)) {
|
||||||
if (endX + textWidth > w){
|
if (endX + textWidth > w) {
|
||||||
return startX + theSidePad;
|
return startX + theSidePad;
|
||||||
}else {
|
} else {
|
||||||
return endX + theSidePad;
|
return endX + theSidePad;
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
return (endX - startX) / 2 + startX + theSidePad;
|
return (endX - startX) / 2 + startX + theSidePad;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.attr("y", function (d, i) {
|
.attr("y", function (d, i) {
|
||||||
return i * theGap + 14 + theTopPad;
|
return i * theGap + (conf.barHeight / 2) + (conf.fontSize / 2 - 2) + theTopPad;
|
||||||
})
|
})
|
||||||
//.attr("text-anchor", "middle")
|
//.attr("text-anchor", "middle")
|
||||||
.attr("text-height", theBarHeight)
|
.attr("text-height", theBarHeight)
|
||||||
.attr("class",function (d) {
|
.attr("class", function (d) {
|
||||||
var startX = timeScale(d.startTime),
|
var startX = timeScale(d.startTime),
|
||||||
endX = timeScale(d.endTime),
|
endX = timeScale(d.endTime),
|
||||||
textWidth = this.getBBox().width;
|
textWidth = this.getBBox().width;
|
||||||
|
var secNum = 0;
|
||||||
// Check id text width > width of rectangle
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if(textWidth>(endX-startX)) {
|
if (d.type === categories[i]) {
|
||||||
if (endX + textWidth > w){
|
secNum = (i % conf.numberSectionStyles);
|
||||||
return 'taskTextOutsideLeft';
|
|
||||||
}else {
|
|
||||||
return 'taskTextOutsideRight';
|
|
||||||
}
|
}
|
||||||
}else{
|
}
|
||||||
return 'taskText';
|
|
||||||
|
// Check id text width > width of rectangle
|
||||||
|
if (textWidth > (endX - startX)) {
|
||||||
|
if (endX + textWidth > w) {
|
||||||
|
return 'taskTextOutsideLeft taskTextOutside' + secNum;
|
||||||
|
} else {
|
||||||
|
return 'taskTextOutsideRight taskTextOutsideRight' + secNum;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return 'taskText taskText' + secNum;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -198,8 +229,8 @@ module.exports.draw = function (text, id) {
|
||||||
.scale(timeScale)
|
.scale(timeScale)
|
||||||
.orient('bottom')
|
.orient('bottom')
|
||||||
//.ticks(d3.time.days, 5)
|
//.ticks(d3.time.days, 5)
|
||||||
.tickSize(-h + theTopPad + 20, 0, 0)
|
.tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0);
|
||||||
.tickFormat(d3.time.format('%d %b'));
|
//.tickFormat(d3.time.format('%d %b'));
|
||||||
|
|
||||||
var grid = svg.append('g')
|
var grid = svg.append('g')
|
||||||
.attr('class', 'grid')
|
.attr('class', 'grid')
|
||||||
|
@ -241,16 +272,13 @@ module.exports.draw = function (text, id) {
|
||||||
return d[1] * theGap / 2 + theTopPad;
|
return d[1] * theGap / 2 + theTopPad;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.attr("font-size", 11)
|
.attr('class', function (d) {
|
||||||
.attr("text-anchor", "start")
|
|
||||||
.attr("text-height", 14)
|
|
||||||
.attr("fill", function (d) {
|
|
||||||
for (var i = 0; i < categories.length; i++) {
|
for (var i = 0; i < categories.length; i++) {
|
||||||
if (d[0] === categories[i]) {
|
if (d[0] === categories[i]) {
|
||||||
// console.log("true!");
|
return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);
|
||||||
return d3.rgb(theColorScale(i)).darker();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return 'sectionTitle';
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -271,9 +299,9 @@ module.exports.draw = function (text, id) {
|
||||||
function getCounts(arr) {
|
function getCounts(arr) {
|
||||||
var i = arr.length, // var to loop over
|
var i = arr.length, // var to loop over
|
||||||
obj = {}; // obj to store results
|
obj = {}; // obj to store results
|
||||||
while (i){
|
while (i) {
|
||||||
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
|
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
|
||||||
}
|
}
|
||||||
return obj;
|
return obj;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -71,7 +71,7 @@ var parse = function(text){
|
||||||
var init = function (sequenceConfig) {
|
var init = function (sequenceConfig) {
|
||||||
var arr = document.querySelectorAll('.mermaid');
|
var arr = document.querySelectorAll('.mermaid');
|
||||||
var i;
|
var i;
|
||||||
|
|
||||||
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
|
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
|
||||||
if(typeof sequenceConfig === 'object'){
|
if(typeof sequenceConfig === 'object'){
|
||||||
seq.setConf(sequenceConfig);
|
seq.setConf(sequenceConfig);
|
||||||
|
@ -125,6 +125,10 @@ var init = function (sequenceConfig) {
|
||||||
utils.cloneCssStyles(element.firstChild, []);
|
utils.cloneCssStyles(element.firstChild, []);
|
||||||
break;
|
break;
|
||||||
case 'gantt':
|
case 'gantt':
|
||||||
|
if(typeof mermaid.ganttConfig === 'object'){
|
||||||
|
gantt.setConf(mermaid.ganttConfig);
|
||||||
|
|
||||||
|
}
|
||||||
gantt.draw(txt,id);
|
gantt.draw(txt,id);
|
||||||
utils.cloneCssStyles(element.firstChild, []);
|
utils.cloneCssStyles(element.firstChild, []);
|
||||||
break;
|
break;
|
||||||
|
|
205
test/gantt.html
205
test/gantt.html
|
@ -9,9 +9,17 @@
|
||||||
var mermaid_config = {
|
var mermaid_config = {
|
||||||
startOnLoad:true
|
startOnLoad:true
|
||||||
}
|
}
|
||||||
//mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":false}';
|
mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":false}';
|
||||||
//mermaid.sequenceConfig = JSON.parse('{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":165,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35}');
|
mermaid.ganttConfig = {
|
||||||
|
titleTopMargin:25,
|
||||||
|
barHeight:20,
|
||||||
|
barGap:4,
|
||||||
|
topPadding:50,
|
||||||
|
sidePadding:75,
|
||||||
|
gridLineStartPadding:35,
|
||||||
|
fontSize:11,
|
||||||
|
numberSectionStyles:3
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
function apa(){
|
function apa(){
|
||||||
|
@ -29,21 +37,6 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#container{
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
width:800px;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.svg {
|
|
||||||
width:800px;
|
|
||||||
height:400px;
|
|
||||||
overflow: visible;
|
|
||||||
position:absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid .tick {
|
.grid .tick {
|
||||||
stroke: lightgrey;
|
stroke: lightgrey;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
|
@ -53,80 +46,176 @@
|
||||||
stroke-width: 0;
|
stroke-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#tag {
|
|
||||||
color: white;
|
|
||||||
background: #FA283D;
|
|
||||||
width: 150px;
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
padding:3px 6px;
|
|
||||||
margin-left: -80px;
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#tag:before {
|
|
||||||
border: solid transparent;
|
|
||||||
content: ' ';
|
|
||||||
height: 0;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: -5px;
|
|
||||||
position: absolute;
|
|
||||||
width: 0;
|
|
||||||
border-width: 10px;
|
|
||||||
border-bottom-color: #FA283D;
|
|
||||||
top: -20px;
|
|
||||||
}
|
|
||||||
.taskText {
|
.taskText {
|
||||||
fill:white;
|
|
||||||
text-anchor:middle;
|
text-anchor:middle;
|
||||||
|
font-size:11px;
|
||||||
|
}
|
||||||
|
.taskText0, .taskText3 {
|
||||||
|
fill:black;
|
||||||
|
}
|
||||||
|
.taskText1, .taskText2 {
|
||||||
|
fill:white;
|
||||||
}
|
}
|
||||||
.taskTextOutsideRight {
|
.taskTextOutsideRight {
|
||||||
fill:black;
|
fill:black;
|
||||||
text-anchor:start;
|
text-anchor:start;
|
||||||
|
font-size:11px;
|
||||||
}
|
}
|
||||||
.taskTextOutsideLeft {
|
.taskTextOutsideLeft {
|
||||||
fill:black;
|
fill:black;
|
||||||
text-anchor:end;
|
text-anchor:end;
|
||||||
|
font-size:11px;
|
||||||
|
}
|
||||||
|
.taskTextOutside0,.taskTextOutside2, {
|
||||||
|
fill:black;
|
||||||
|
}
|
||||||
|
.taskTextOutside1, .taskTextOutside3 {
|
||||||
|
fill:darkblue;
|
||||||
|
}
|
||||||
|
.titleText {
|
||||||
|
text-anchor:middle;
|
||||||
|
font-size:18px;
|
||||||
|
fill:#633;
|
||||||
|
}
|
||||||
|
.section {
|
||||||
|
stroke:none;
|
||||||
|
opacity:0.2;
|
||||||
|
}
|
||||||
|
.section0 {
|
||||||
|
fill:#6666FF;
|
||||||
|
}
|
||||||
|
.section1 {
|
||||||
|
fill:white;
|
||||||
|
opacity:0.2;
|
||||||
|
}
|
||||||
|
.section2 {
|
||||||
|
fill:orange;
|
||||||
|
opacity:0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task {
|
||||||
|
/*stroke:none;*/
|
||||||
|
}
|
||||||
|
.task0 {
|
||||||
|
fill: #ffffdd;
|
||||||
|
}
|
||||||
|
.task1 {
|
||||||
|
fill: #8a90dd;
|
||||||
|
}
|
||||||
|
.task2 {
|
||||||
|
fill: #8a90dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle {
|
||||||
|
text-anchor:start;
|
||||||
|
font-size:11px;
|
||||||
|
text-height:14px;
|
||||||
|
}
|
||||||
|
.sectionTitle0 { fill:#454545;}
|
||||||
|
.sectionTitle1 { fill:#454545;}
|
||||||
|
.sectionTitle2 { fill:#454545;}
|
||||||
|
.sectionTitle3 { fill:#b23473;}
|
||||||
|
.done0, .done1, .done2, .done3 {
|
||||||
|
stroke:grey;
|
||||||
|
fill: lightgrey;
|
||||||
|
stroke-width:2;
|
||||||
|
}
|
||||||
|
.crit0, .crit1, .crit2, .crit3 {
|
||||||
|
stroke:#ff8888;
|
||||||
|
fill: red;
|
||||||
|
stroke-width:2;
|
||||||
|
}
|
||||||
|
.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
|
||||||
|
stroke:#ff8888;
|
||||||
|
fill: #ffffc0;
|
||||||
|
stroke-width:2;
|
||||||
|
}
|
||||||
|
.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
|
||||||
|
stroke:#ff8888;
|
||||||
|
fill: lightgrey;
|
||||||
|
stroke-width:2;
|
||||||
|
cursor: pointer;
|
||||||
|
shape-rendering: crispEdges;
|
||||||
|
}
|
||||||
|
.active0 {
|
||||||
|
stroke:black;
|
||||||
|
fill: #ffffdd;
|
||||||
|
stroke-width:2;
|
||||||
|
}
|
||||||
|
.active1 {
|
||||||
|
stroke:black;
|
||||||
|
fill: #8a90dd;
|
||||||
|
stroke-width:2;
|
||||||
|
}
|
||||||
|
.active2 {
|
||||||
|
stroke:black;
|
||||||
|
fill: #8a90dd;
|
||||||
|
stroke-width:2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>No line breaks</h1>
|
<filter id="blur-effect-1">
|
||||||
|
<feGaussianBlur stdDeviation="2" />
|
||||||
|
</filter>
|
||||||
|
<h1>Gantt tests</h1>
|
||||||
<div class="mermaid">
|
<div class="mermaid">
|
||||||
gantt
|
gantt
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
title Adding GANTT diagram functionality to mermaid
|
title Adding GANTT diagram functionality to mermaid
|
||||||
|
|
||||||
section Design
|
section Design
|
||||||
Design jison grammar :des1, 2014-01-01, 2014-01-04
|
Design jison grammar :done, crit, des1, 2014-01-01, 2014-01-04
|
||||||
Create example text :des2, 2014-01-01, 3d
|
Create example text :done, des2, 2014-01-01, 3d
|
||||||
Bounce gantt example with users :des3, after des2, 5d
|
Bounce gantt example with users :active, crit, des3, after des2, 5d
|
||||||
|
|
||||||
section Implementation
|
section Implementation
|
||||||
update build script :2014-01-02,24h
|
update build script :2014-01-02,24h
|
||||||
Implement parser and jison :after des1, 2d
|
Implement parser and jison :after des1, 2d
|
||||||
Create tests for parser :3d
|
Create tests for parser :active, 3d
|
||||||
Create renderer :5d
|
Create renderer :crit, 5d
|
||||||
Create tests for renderer :2d
|
Create tests for renderer :2d
|
||||||
Add to mermaid core bore tore gore bore lore :1d
|
Add to mermaid core bore tore gore bore lore :1d
|
||||||
|
|
||||||
section Documentation
|
section Documentation
|
||||||
Describe gantt syntax :a1, 2014-01-10, 3d
|
Describe gantt syntax :active,a1, 2014-01-10, 3d
|
||||||
Add gantt diagram to demo page :after a1 , 20h
|
Add gantt diagram to demo page :after a1 , 20h
|
||||||
Add another diagram to demo page :after a1 , 48h
|
Add another diagram to demo page :after a1 , 48h
|
||||||
</div>
|
</div>
|
||||||
|
Text before. Bla b la bla. Look at the diagram below:
|
||||||
<div class="mermaid">
|
<div class="mermaid">
|
||||||
gantt
|
gantt
|
||||||
|
title A Gantt Diagram
|
||||||
dateFormat YYYY-MM-DD
|
dateFormat YYYY-MM-DD
|
||||||
title A small test
|
section Section
|
||||||
|
A task :a1, 2014-01-01, 3d
|
||||||
section Documentation
|
Another task :after a1 , 20d
|
||||||
Describe gantt syntax :a1, 2014-01-01, 30d
|
section Another
|
||||||
Add gantt diagram to demo page :after a1 , 20d
|
Task in sec :2014-01-12 , 12d
|
||||||
Add another diagram to demo page :after a1 , 48d
|
section Another2
|
||||||
|
anther task : 24d
|
||||||
|
section Another3
|
||||||
|
anther task : 24d
|
||||||
|
section Another4
|
||||||
|
anther task : 24d
|
||||||
|
section Another5
|
||||||
|
anther task : 24d
|
||||||
|
section Another6
|
||||||
|
anther task : 24d
|
||||||
|
section Another7
|
||||||
|
anther task : 24d
|
||||||
|
section Another8
|
||||||
|
anther task : 24d
|
||||||
|
section Another9
|
||||||
|
anther task : 24d
|
||||||
|
</div>
|
||||||
|
As you can see, bla bla bla.
|
||||||
|
<div class="mermaid">
|
||||||
|
gantt
|
||||||
|
title A Gantt Diagram
|
||||||
|
dateFormat YYYY-MM-DD
|
||||||
|
section Section
|
||||||
|
A task :a1, 2014-01-01, 3h
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue