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",
|
||||
"rewire": "^2.1.3",
|
||||
"rimraf": "^2.2.8",
|
||||
"semantic-ui": "^1.4.1",
|
||||
"tape": "^3.0.3"
|
||||
}
|
||||
}
|
||||
|
@ -28067,9 +28066,36 @@ var compileData = function(prevTask, dataStr){
|
|||
}
|
||||
|
||||
var data = ds.split(',');
|
||||
|
||||
|
||||
var task = {};
|
||||
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){
|
||||
case 1:
|
||||
task.id = parseId();
|
||||
|
@ -28107,6 +28133,9 @@ exports.addTask = function(descr,data){
|
|||
newTask.startTime = taskInfo.startTime;
|
||||
newTask.endTime = taskInfo.endTime;
|
||||
newTask.id = taskInfo.id;
|
||||
newTask.active = taskInfo.active;
|
||||
newTask.done = taskInfo.done;
|
||||
newTask.crit = taskInfo.crit;
|
||||
lastTask = newTask;
|
||||
tasks.push(newTask);
|
||||
};
|
||||
|
@ -28123,8 +28152,10 @@ var conf = {
|
|||
titleTopMargin: 25,
|
||||
barHeight: 20,
|
||||
barGap: 4,
|
||||
topPadding:75,
|
||||
sidePadding:75
|
||||
topPadding: 50,
|
||||
sidePadding: 75,
|
||||
gridLineStartPadding: 35,
|
||||
fontSize: 11
|
||||
};
|
||||
module.exports.setConf = function (cnf) {
|
||||
var keys = Object.keys(cnf);
|
||||
|
@ -28184,9 +28215,7 @@ module.exports.draw = function (text, id) {
|
|||
.text(gantt.yy.getTitle())
|
||||
.attr("x", w / 2)
|
||||
.attr("y", conf.titleTopMargin)
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("font-size", 18)
|
||||
.attr("fill", "#009FFC");
|
||||
.attr('class', 'titleText');
|
||||
|
||||
|
||||
function makeGant(tasks, pageWidth, pageHeight) {
|
||||
|
@ -28223,15 +28252,14 @@ module.exports.draw = function (text, id) {
|
|||
return w - theSidePad / 2;
|
||||
})
|
||||
.attr("height", theGap)
|
||||
.attr("stroke", "none")
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
return d3.rgb(theColorScale(i));
|
||||
return 'section section' + (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
})
|
||||
.attr("opacity", 0.2);
|
||||
return 'section section0';
|
||||
});
|
||||
|
||||
|
||||
var rectangles = svg.append('g')
|
||||
|
@ -28253,21 +28281,47 @@ module.exports.draw = function (text, id) {
|
|||
return (timeScale(d.endTime) - timeScale(d.startTime));
|
||||
})
|
||||
.attr("height", theBarHeight)
|
||||
.attr("stroke", "none")
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
var res = 'task ';
|
||||
|
||||
|
||||
var secNum = 0;
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
return d3.rgb(theColorScale(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")
|
||||
.text(function (d) {
|
||||
return d.task;
|
||||
})
|
||||
.attr("font-size", 11)
|
||||
.attr("x", function (d) {
|
||||
var startX = timeScale(d.startTime),
|
||||
endX = timeScale(d.endTime),
|
||||
|
@ -28285,7 +28339,7 @@ module.exports.draw = function (text, id) {
|
|||
}
|
||||
})
|
||||
.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-height", theBarHeight)
|
||||
|
@ -28293,16 +28347,22 @@ module.exports.draw = function (text, id) {
|
|||
var startX = timeScale(d.startTime),
|
||||
endX = timeScale(d.endTime),
|
||||
textWidth = this.getBBox().width;
|
||||
var secNum = 0;
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
secNum = (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
|
||||
// Check id text width > width of rectangle
|
||||
if (textWidth > (endX - startX)) {
|
||||
if (endX + textWidth > w) {
|
||||
return 'taskTextOutsideLeft';
|
||||
return 'taskTextOutsideLeft taskTextOutside' + secNum;
|
||||
} else {
|
||||
return 'taskTextOutsideRight';
|
||||
return 'taskTextOutsideRight taskTextOutsideRight' + secNum;
|
||||
}
|
||||
} else {
|
||||
return 'taskText';
|
||||
return 'taskText taskText' + secNum;
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -28315,8 +28375,8 @@ module.exports.draw = function (text, id) {
|
|||
.scale(timeScale)
|
||||
.orient('bottom')
|
||||
//.ticks(d3.time.days, 5)
|
||||
.tickSize(-h + theTopPad + 20, 0, 0)
|
||||
.tickFormat(d3.time.format('%d %b'));
|
||||
.tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0);
|
||||
//.tickFormat(d3.time.format('%d %b'));
|
||||
|
||||
var grid = svg.append('g')
|
||||
.attr('class', 'grid')
|
||||
|
@ -28358,16 +28418,13 @@ module.exports.draw = function (text, id) {
|
|||
return d[1] * theGap / 2 + theTopPad;
|
||||
}
|
||||
})
|
||||
.attr("font-size", 11)
|
||||
.attr("text-anchor", "start")
|
||||
.attr("text-height", 14)
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d[0] === categories[i]) {
|
||||
// console.log("true!");
|
||||
return d3.rgb(theColorScale(i)).darker();
|
||||
return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
return 'sectionTitle';
|
||||
});
|
||||
|
||||
}
|
||||
|
@ -30662,6 +30719,10 @@ var init = function (sequenceConfig) {
|
|||
utils.cloneCssStyles(element.firstChild, []);
|
||||
break;
|
||||
case 'gantt':
|
||||
if(typeof mermaid.ganttConfig === 'object'){
|
||||
gantt.setConf(mermaid.ganttConfig);
|
||||
|
||||
}
|
||||
gantt.draw(txt,id);
|
||||
utils.cloneCssStyles(element.firstChild, []);
|
||||
break;
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -24808,7 +24808,6 @@ module.exports={
|
|||
"proxyquire": "^1.3.1",
|
||||
"rewire": "^2.1.3",
|
||||
"rimraf": "^2.2.8",
|
||||
"semantic-ui": "^1.4.1",
|
||||
"tape": "^3.0.3"
|
||||
}
|
||||
}
|
||||
|
@ -28035,9 +28034,36 @@ var compileData = function(prevTask, dataStr){
|
|||
}
|
||||
|
||||
var data = ds.split(',');
|
||||
|
||||
|
||||
var task = {};
|
||||
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){
|
||||
case 1:
|
||||
task.id = parseId();
|
||||
|
@ -28075,6 +28101,9 @@ exports.addTask = function(descr,data){
|
|||
newTask.startTime = taskInfo.startTime;
|
||||
newTask.endTime = taskInfo.endTime;
|
||||
newTask.id = taskInfo.id;
|
||||
newTask.active = taskInfo.active;
|
||||
newTask.done = taskInfo.done;
|
||||
newTask.crit = taskInfo.crit;
|
||||
lastTask = newTask;
|
||||
tasks.push(newTask);
|
||||
};
|
||||
|
@ -28091,8 +28120,10 @@ var conf = {
|
|||
titleTopMargin: 25,
|
||||
barHeight: 20,
|
||||
barGap: 4,
|
||||
topPadding:75,
|
||||
sidePadding:75
|
||||
topPadding: 50,
|
||||
sidePadding: 75,
|
||||
gridLineStartPadding: 35,
|
||||
fontSize: 11
|
||||
};
|
||||
module.exports.setConf = function (cnf) {
|
||||
var keys = Object.keys(cnf);
|
||||
|
@ -28152,9 +28183,7 @@ module.exports.draw = function (text, id) {
|
|||
.text(gantt.yy.getTitle())
|
||||
.attr("x", w / 2)
|
||||
.attr("y", conf.titleTopMargin)
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("font-size", 18)
|
||||
.attr("fill", "#009FFC");
|
||||
.attr('class', 'titleText');
|
||||
|
||||
|
||||
function makeGant(tasks, pageWidth, pageHeight) {
|
||||
|
@ -28191,15 +28220,14 @@ module.exports.draw = function (text, id) {
|
|||
return w - theSidePad / 2;
|
||||
})
|
||||
.attr("height", theGap)
|
||||
.attr("stroke", "none")
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
return d3.rgb(theColorScale(i));
|
||||
return 'section section' + (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
})
|
||||
.attr("opacity", 0.2);
|
||||
return 'section section0';
|
||||
});
|
||||
|
||||
|
||||
var rectangles = svg.append('g')
|
||||
|
@ -28221,21 +28249,47 @@ module.exports.draw = function (text, id) {
|
|||
return (timeScale(d.endTime) - timeScale(d.startTime));
|
||||
})
|
||||
.attr("height", theBarHeight)
|
||||
.attr("stroke", "none")
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
var res = 'task ';
|
||||
|
||||
|
||||
var secNum = 0;
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
return d3.rgb(theColorScale(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")
|
||||
.text(function (d) {
|
||||
return d.task;
|
||||
})
|
||||
.attr("font-size", 11)
|
||||
.attr("x", function (d) {
|
||||
var startX = timeScale(d.startTime),
|
||||
endX = timeScale(d.endTime),
|
||||
|
@ -28253,7 +28307,7 @@ module.exports.draw = function (text, id) {
|
|||
}
|
||||
})
|
||||
.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-height", theBarHeight)
|
||||
|
@ -28261,16 +28315,22 @@ module.exports.draw = function (text, id) {
|
|||
var startX = timeScale(d.startTime),
|
||||
endX = timeScale(d.endTime),
|
||||
textWidth = this.getBBox().width;
|
||||
var secNum = 0;
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
secNum = (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
|
||||
// Check id text width > width of rectangle
|
||||
if (textWidth > (endX - startX)) {
|
||||
if (endX + textWidth > w) {
|
||||
return 'taskTextOutsideLeft';
|
||||
return 'taskTextOutsideLeft taskTextOutside' + secNum;
|
||||
} else {
|
||||
return 'taskTextOutsideRight';
|
||||
return 'taskTextOutsideRight taskTextOutsideRight' + secNum;
|
||||
}
|
||||
} else {
|
||||
return 'taskText';
|
||||
return 'taskText taskText' + secNum;
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -28283,8 +28343,8 @@ module.exports.draw = function (text, id) {
|
|||
.scale(timeScale)
|
||||
.orient('bottom')
|
||||
//.ticks(d3.time.days, 5)
|
||||
.tickSize(-h + theTopPad + 20, 0, 0)
|
||||
.tickFormat(d3.time.format('%d %b'));
|
||||
.tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0);
|
||||
//.tickFormat(d3.time.format('%d %b'));
|
||||
|
||||
var grid = svg.append('g')
|
||||
.attr('class', 'grid')
|
||||
|
@ -28326,16 +28386,13 @@ module.exports.draw = function (text, id) {
|
|||
return d[1] * theGap / 2 + theTopPad;
|
||||
}
|
||||
})
|
||||
.attr("font-size", 11)
|
||||
.attr("text-anchor", "start")
|
||||
.attr("text-height", 14)
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d[0] === categories[i]) {
|
||||
// console.log("true!");
|
||||
return d3.rgb(theColorScale(i)).darker();
|
||||
return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
return 'sectionTitle';
|
||||
});
|
||||
|
||||
}
|
||||
|
@ -30630,6 +30687,10 @@ var init = function (sequenceConfig) {
|
|||
utils.cloneCssStyles(element.firstChild, []);
|
||||
break;
|
||||
case 'gantt':
|
||||
if(typeof mermaid.ganttConfig === 'object'){
|
||||
gantt.setConf(mermaid.ganttConfig);
|
||||
|
||||
}
|
||||
gantt.draw(txt,id);
|
||||
utils.cloneCssStyles(element.firstChild, []);
|
||||
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 task = {};
|
||||
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){
|
||||
case 1:
|
||||
task.id = parseId();
|
||||
|
@ -191,6 +218,9 @@ exports.addTask = function(descr,data){
|
|||
newTask.startTime = taskInfo.startTime;
|
||||
newTask.endTime = taskInfo.endTime;
|
||||
newTask.id = taskInfo.id;
|
||||
newTask.active = taskInfo.active;
|
||||
newTask.done = taskInfo.done;
|
||||
newTask.crit = taskInfo.crit;
|
||||
lastTask = newTask;
|
||||
tasks.push(newTask);
|
||||
};
|
||||
|
|
|
@ -6,8 +6,10 @@ var conf = {
|
|||
titleTopMargin: 25,
|
||||
barHeight: 20,
|
||||
barGap: 4,
|
||||
topPadding:75,
|
||||
sidePadding:75
|
||||
topPadding: 50,
|
||||
sidePadding: 75,
|
||||
gridLineStartPadding: 35,
|
||||
fontSize: 11
|
||||
};
|
||||
module.exports.setConf = function (cnf) {
|
||||
var keys = Object.keys(cnf);
|
||||
|
@ -67,9 +69,7 @@ module.exports.draw = function (text, id) {
|
|||
.text(gantt.yy.getTitle())
|
||||
.attr("x", w / 2)
|
||||
.attr("y", conf.titleTopMargin)
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("font-size", 18)
|
||||
.attr("fill", "#009FFC");
|
||||
.attr('class', 'titleText');
|
||||
|
||||
|
||||
function makeGant(tasks, pageWidth, pageHeight) {
|
||||
|
@ -106,15 +106,14 @@ module.exports.draw = function (text, id) {
|
|||
return w - theSidePad / 2;
|
||||
})
|
||||
.attr("height", theGap)
|
||||
.attr("stroke", "none")
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
return d3.rgb(theColorScale(i));
|
||||
return 'section section' + (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
})
|
||||
.attr("opacity", 0.2);
|
||||
return 'section section0';
|
||||
});
|
||||
|
||||
|
||||
var rectangles = svg.append('g')
|
||||
|
@ -136,21 +135,47 @@ module.exports.draw = function (text, id) {
|
|||
return (timeScale(d.endTime) - timeScale(d.startTime));
|
||||
})
|
||||
.attr("height", theBarHeight)
|
||||
.attr("stroke", "none")
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
var res = 'task ';
|
||||
|
||||
|
||||
var secNum = 0;
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
return d3.rgb(theColorScale(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")
|
||||
.text(function (d) {
|
||||
return d.task;
|
||||
})
|
||||
.attr("font-size", 11)
|
||||
.attr("x", function (d) {
|
||||
var startX = timeScale(d.startTime),
|
||||
endX = timeScale(d.endTime),
|
||||
|
@ -168,7 +193,7 @@ module.exports.draw = function (text, id) {
|
|||
}
|
||||
})
|
||||
.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-height", theBarHeight)
|
||||
|
@ -176,16 +201,22 @@ module.exports.draw = function (text, id) {
|
|||
var startX = timeScale(d.startTime),
|
||||
endX = timeScale(d.endTime),
|
||||
textWidth = this.getBBox().width;
|
||||
var secNum = 0;
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
secNum = (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
|
||||
// Check id text width > width of rectangle
|
||||
if (textWidth > (endX - startX)) {
|
||||
if (endX + textWidth > w) {
|
||||
return 'taskTextOutsideLeft';
|
||||
return 'taskTextOutsideLeft taskTextOutside' + secNum;
|
||||
} else {
|
||||
return 'taskTextOutsideRight';
|
||||
return 'taskTextOutsideRight taskTextOutsideRight' + secNum;
|
||||
}
|
||||
} else {
|
||||
return 'taskText';
|
||||
return 'taskText taskText' + secNum;
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -198,8 +229,8 @@ module.exports.draw = function (text, id) {
|
|||
.scale(timeScale)
|
||||
.orient('bottom')
|
||||
//.ticks(d3.time.days, 5)
|
||||
.tickSize(-h + theTopPad + 20, 0, 0)
|
||||
.tickFormat(d3.time.format('%d %b'));
|
||||
.tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0);
|
||||
//.tickFormat(d3.time.format('%d %b'));
|
||||
|
||||
var grid = svg.append('g')
|
||||
.attr('class', 'grid')
|
||||
|
@ -241,16 +272,13 @@ module.exports.draw = function (text, id) {
|
|||
return d[1] * theGap / 2 + theTopPad;
|
||||
}
|
||||
})
|
||||
.attr("font-size", 11)
|
||||
.attr("text-anchor", "start")
|
||||
.attr("text-height", 14)
|
||||
.attr("fill", function (d) {
|
||||
.attr('class', function (d) {
|
||||
for (var i = 0; i < categories.length; i++) {
|
||||
if (d[0] === categories[i]) {
|
||||
// console.log("true!");
|
||||
return d3.rgb(theColorScale(i)).darker();
|
||||
return 'sectionTitle sectionTitle' + (i % conf.numberSectionStyles);
|
||||
}
|
||||
}
|
||||
return 'sectionTitle';
|
||||
});
|
||||
|
||||
}
|
||||
|
|
|
@ -125,6 +125,10 @@ var init = function (sequenceConfig) {
|
|||
utils.cloneCssStyles(element.firstChild, []);
|
||||
break;
|
||||
case 'gantt':
|
||||
if(typeof mermaid.ganttConfig === 'object'){
|
||||
gantt.setConf(mermaid.ganttConfig);
|
||||
|
||||
}
|
||||
gantt.draw(txt,id);
|
||||
utils.cloneCssStyles(element.firstChild, []);
|
||||
break;
|
||||
|
|
201
test/gantt.html
201
test/gantt.html
|
@ -9,9 +9,17 @@
|
|||
var mermaid_config = {
|
||||
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 = JSON.parse('{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":165,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35}');
|
||||
|
||||
mermaid.sequenceConfig = '{"diagramMarginX":50,"diagramMarginY":10,"actorMargin":50,"width":150,"height":45,"boxMargin":10,"boxTextMargin":5,"noteMargin":10,"messageMargin":35, "mirrorActors":false}';
|
||||
mermaid.ganttConfig = {
|
||||
titleTopMargin:25,
|
||||
barHeight:20,
|
||||
barGap:4,
|
||||
topPadding:50,
|
||||
sidePadding:75,
|
||||
gridLineStartPadding:35,
|
||||
fontSize:11,
|
||||
numberSectionStyles:3
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
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 {
|
||||
stroke: lightgrey;
|
||||
opacity: 0.3;
|
||||
|
@ -53,80 +46,176 @@
|
|||
stroke-width: 0;
|
||||
}
|
||||
|
||||
|
||||
#tag {
|
||||
color: white;
|
||||
background: #FA283D;
|
||||
width: 150px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
padding:3px 6px;
|
||||
margin-left: -80px;
|
||||
.taskText {
|
||||
text-anchor:middle;
|
||||
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;
|
||||
.taskText0, .taskText3 {
|
||||
fill:black;
|
||||
}
|
||||
.taskText {
|
||||
.taskText1, .taskText2 {
|
||||
fill:white;
|
||||
text-anchor:middle;
|
||||
}
|
||||
.taskTextOutsideRight {
|
||||
fill:black;
|
||||
text-anchor:start;
|
||||
font-size:11px;
|
||||
}
|
||||
.taskTextOutsideLeft {
|
||||
fill:black;
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<h1>No line breaks</h1>
|
||||
<filter id="blur-effect-1">
|
||||
<feGaussianBlur stdDeviation="2" />
|
||||
</filter>
|
||||
<h1>Gantt tests</h1>
|
||||
<div class="mermaid">
|
||||
gantt
|
||||
dateFormat YYYY-MM-DD
|
||||
title Adding GANTT diagram functionality to mermaid
|
||||
|
||||
section Design
|
||||
Design jison grammar :des1, 2014-01-01, 2014-01-04
|
||||
Create example text :des2, 2014-01-01, 3d
|
||||
Bounce gantt example with users :des3, after des2, 5d
|
||||
Design jison grammar :done, crit, des1, 2014-01-01, 2014-01-04
|
||||
Create example text :done, des2, 2014-01-01, 3d
|
||||
Bounce gantt example with users :active, crit, des3, after des2, 5d
|
||||
|
||||
section Implementation
|
||||
update build script :2014-01-02,24h
|
||||
Implement parser and jison :after des1, 2d
|
||||
Create tests for parser :3d
|
||||
Create renderer :5d
|
||||
Create tests for parser :active, 3d
|
||||
Create renderer :crit, 5d
|
||||
Create tests for renderer :2d
|
||||
Add to mermaid core bore tore gore bore lore :1d
|
||||
|
||||
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 another diagram to demo page :after a1 , 48h
|
||||
</div>
|
||||
Text before. Bla b la bla. Look at the diagram below:
|
||||
<div class="mermaid">
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
title A small test
|
||||
|
||||
section Documentation
|
||||
Describe gantt syntax :a1, 2014-01-01, 30d
|
||||
Add gantt diagram to demo page :after a1 , 20d
|
||||
Add another diagram to demo page :after a1 , 48d
|
||||
section Section
|
||||
A task :a1, 2014-01-01, 3d
|
||||
Another task :after a1 , 20d
|
||||
section Another
|
||||
Task in sec :2014-01-12 , 12d
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue