mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Better styling for gantt diagrams and addition of critical path, active and completed tasks

This commit is contained in:
knsv 2015-02-22 20:18:44 +01:00
parent 4078cf3aed
commit e5657d028d
8 changed files with 570 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
dist/mermaid.full.js vendored
View File

@ -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);
};
@ -28120,16 +28149,18 @@ gantt.yy = require('./ganttDb');
var d3 = require('./d3');
var conf = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:75,
sidePadding:75
titleTopMargin: 25,
barHeight: 20,
barGap: 4,
topPadding: 50,
sidePadding: 75,
gridLineStartPadding: 35,
fontSize: 11
};
module.exports.setConf = function(cnf){
module.exports.setConf = function (cnf) {
var keys = Object.keys(cnf);
keys.forEach(function(key){
keys.forEach(function (key) {
conf[key] = cnf[key];
});
};
@ -28139,18 +28170,18 @@ module.exports.draw = function (text, id) {
gantt.parse(text);
var elem = document.getElementById(id);
w = elem.offsetWidth;
if(typeof w === 'undefined'){
if (typeof w === 'undefined') {
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 svg = d3.select('#'+id);
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 svg = d3.select('#' + id);
// http://codepen.io/anon/pen/azLvWR
@ -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')
@ -28241,68 +28269,100 @@ module.exports.draw = function (text, id) {
var innerRects = rectangles.append("rect")
.attr("rx", 3)
.attr("ry", 3)
.attr("x", function (d) {
return timeScale(d.startTime) + theSidePad;
})
.attr("y", function (d, i) {
return i * theGap + theTopPad;
})
.attr("width", function (d) {
return (timeScale(d.endTime) - timeScale(d.startTime));
})
.attr("height", theBarHeight)
.attr("stroke", "none")
.attr("fill", function (d) {
for (var i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
return d3.rgb(theColorScale(i));
.attr("rx", 3)
.attr("ry", 3)
.attr("x", function (d) {
return timeScale(d.startTime) + theSidePad;
})
.attr("y", function (d, i) {
return i * theGap + theTopPad;
})
.attr("width", function (d) {
return (timeScale(d.endTime) - timeScale(d.startTime));
})
.attr("height", theBarHeight)
.attr('class', function (d) {
var res = 'task ';
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")
.text(function (d) {
return d.task;
})
.attr("font-size", 11)
.attr("x", function (d) {
var startX = timeScale(d.startTime),
endX = timeScale(d.endTime),
textWidth = this.getBBox().width;
// Check id text width > width of rectangle
if(textWidth>(endX-startX)){
if (endX + textWidth > w){
if (textWidth > (endX - startX)) {
if (endX + textWidth > w) {
return startX + theSidePad;
}else {
} else {
return endX + theSidePad;
}
}else{
} else {
return (endX - startX) / 2 + startX + theSidePad;
}
})
.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)
.attr("class",function (d) {
.attr("class", function (d) {
var startX = timeScale(d.startTime),
endX = timeScale(d.endTime),
textWidth = this.getBBox().width;
// Check id text width > width of rectangle
if(textWidth>(endX-startX)) {
if (endX + textWidth > w){
return 'taskTextOutsideLeft';
}else {
return 'taskTextOutsideRight';
var secNum = 0;
for (var i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
secNum = (i % conf.numberSectionStyles);
}
}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)
.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';
});
}
@ -28388,9 +28445,9 @@ module.exports.draw = function (text, id) {
function getCounts(arr) {
var i = arr.length, // var to loop over
obj = {}; // obj to store results
while (i){
while (i) {
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
}
}
return obj;
}
@ -30608,7 +30665,7 @@ var parse = function(text){
var init = function (sequenceConfig) {
var arr = document.querySelectorAll('.mermaid');
var i;
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
if(typeof sequenceConfig === 'object'){
seq.setConf(sequenceConfig);
@ -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;

24
dist/mermaid.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

205
dist/mermaid.slim.js vendored
View File

@ -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);
};
@ -28088,16 +28117,18 @@ gantt.yy = require('./ganttDb');
var d3 = require('./d3');
var conf = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:75,
sidePadding:75
titleTopMargin: 25,
barHeight: 20,
barGap: 4,
topPadding: 50,
sidePadding: 75,
gridLineStartPadding: 35,
fontSize: 11
};
module.exports.setConf = function(cnf){
module.exports.setConf = function (cnf) {
var keys = Object.keys(cnf);
keys.forEach(function(key){
keys.forEach(function (key) {
conf[key] = cnf[key];
});
};
@ -28107,18 +28138,18 @@ module.exports.draw = function (text, id) {
gantt.parse(text);
var elem = document.getElementById(id);
w = elem.offsetWidth;
if(typeof w === 'undefined'){
if (typeof w === 'undefined') {
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 svg = d3.select('#'+id);
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 svg = d3.select('#' + id);
// http://codepen.io/anon/pen/azLvWR
@ -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')
@ -28209,68 +28237,100 @@ module.exports.draw = function (text, id) {
var innerRects = rectangles.append("rect")
.attr("rx", 3)
.attr("ry", 3)
.attr("x", function (d) {
return timeScale(d.startTime) + theSidePad;
})
.attr("y", function (d, i) {
return i * theGap + theTopPad;
})
.attr("width", function (d) {
return (timeScale(d.endTime) - timeScale(d.startTime));
})
.attr("height", theBarHeight)
.attr("stroke", "none")
.attr("fill", function (d) {
for (var i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
return d3.rgb(theColorScale(i));
.attr("rx", 3)
.attr("ry", 3)
.attr("x", function (d) {
return timeScale(d.startTime) + theSidePad;
})
.attr("y", function (d, i) {
return i * theGap + theTopPad;
})
.attr("width", function (d) {
return (timeScale(d.endTime) - timeScale(d.startTime));
})
.attr("height", theBarHeight)
.attr('class', function (d) {
var res = 'task ';
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")
.text(function (d) {
return d.task;
})
.attr("font-size", 11)
.attr("x", function (d) {
var startX = timeScale(d.startTime),
endX = timeScale(d.endTime),
textWidth = this.getBBox().width;
// Check id text width > width of rectangle
if(textWidth>(endX-startX)){
if (endX + textWidth > w){
if (textWidth > (endX - startX)) {
if (endX + textWidth > w) {
return startX + theSidePad;
}else {
} else {
return endX + theSidePad;
}
}else{
} else {
return (endX - startX) / 2 + startX + theSidePad;
}
})
.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)
.attr("class",function (d) {
.attr("class", function (d) {
var startX = timeScale(d.startTime),
endX = timeScale(d.endTime),
textWidth = this.getBBox().width;
// Check id text width > width of rectangle
if(textWidth>(endX-startX)) {
if (endX + textWidth > w){
return 'taskTextOutsideLeft';
}else {
return 'taskTextOutsideRight';
var secNum = 0;
for (var i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
secNum = (i % conf.numberSectionStyles);
}
}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)
.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';
});
}
@ -28356,9 +28413,9 @@ module.exports.draw = function (text, id) {
function getCounts(arr) {
var i = arr.length, // var to loop over
obj = {}; // obj to store results
while (i){
while (i) {
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
}
}
return obj;
}
@ -30576,7 +30633,7 @@ var parse = function(text){
var init = function (sequenceConfig) {
var arr = document.querySelectorAll('.mermaid');
var i;
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
if(typeof sequenceConfig === 'object'){
seq.setConf(sequenceConfig);
@ -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;

24
dist/mermaid.slim.min.js vendored
View File

File diff suppressed because one or more lines are too long

30
src/diagrams/gantt/ganttDb.js
View File

@ -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);
};

168
src/diagrams/gantt/ganttRenderer.js
View File

@ -3,16 +3,18 @@ gantt.yy = require('./ganttDb');
var d3 = require('./d3');
var conf = {
titleTopMargin:25,
barHeight:20,
barGap:4,
topPadding:75,
sidePadding:75
titleTopMargin: 25,
barHeight: 20,
barGap: 4,
topPadding: 50,
sidePadding: 75,
gridLineStartPadding: 35,
fontSize: 11
};
module.exports.setConf = function(cnf){
module.exports.setConf = function (cnf) {
var keys = Object.keys(cnf);
keys.forEach(function(key){
keys.forEach(function (key) {
conf[key] = cnf[key];
});
};
@ -22,18 +24,18 @@ module.exports.draw = function (text, id) {
gantt.parse(text);
var elem = document.getElementById(id);
w = elem.offsetWidth;
if(typeof w === 'undefined'){
if (typeof w === 'undefined') {
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 svg = d3.select('#'+id);
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 svg = d3.select('#' + id);
// http://codepen.io/anon/pen/azLvWR
@ -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')
@ -124,68 +123,100 @@ module.exports.draw = function (text, id) {
var innerRects = rectangles.append("rect")
.attr("rx", 3)
.attr("ry", 3)
.attr("x", function (d) {
return timeScale(d.startTime) + theSidePad;
})
.attr("y", function (d, i) {
return i * theGap + theTopPad;
})
.attr("width", function (d) {
return (timeScale(d.endTime) - timeScale(d.startTime));
})
.attr("height", theBarHeight)
.attr("stroke", "none")
.attr("fill", function (d) {
for (var i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
return d3.rgb(theColorScale(i));
.attr("rx", 3)
.attr("ry", 3)
.attr("x", function (d) {
return timeScale(d.startTime) + theSidePad;
})
.attr("y", function (d, i) {
return i * theGap + theTopPad;
})
.attr("width", function (d) {
return (timeScale(d.endTime) - timeScale(d.startTime));
})
.attr("height", theBarHeight)
.attr('class', function (d) {
var res = 'task ';
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")
.text(function (d) {
return d.task;
})
.attr("font-size", 11)
.attr("x", function (d) {
var startX = timeScale(d.startTime),
endX = timeScale(d.endTime),
textWidth = this.getBBox().width;
// Check id text width > width of rectangle
if(textWidth>(endX-startX)){
if (endX + textWidth > w){
if (textWidth > (endX - startX)) {
if (endX + textWidth > w) {
return startX + theSidePad;
}else {
} else {
return endX + theSidePad;
}
}else{
} else {
return (endX - startX) / 2 + startX + theSidePad;
}
})
.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)
.attr("class",function (d) {
.attr("class", function (d) {
var startX = timeScale(d.startTime),
endX = timeScale(d.endTime),
textWidth = this.getBBox().width;
// Check id text width > width of rectangle
if(textWidth>(endX-startX)) {
if (endX + textWidth > w){
return 'taskTextOutsideLeft';
}else {
return 'taskTextOutsideRight';
var secNum = 0;
for (var i = 0; i < categories.length; i++) {
if (d.type === categories[i]) {
secNum = (i % conf.numberSectionStyles);
}
}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)
.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';
});
}
@ -271,9 +299,9 @@ module.exports.draw = function (text, id) {
function getCounts(arr) {
var i = arr.length, // var to loop over
obj = {}; // obj to store results
while (i){
while (i) {
obj[arr[--i]] = (obj[arr[i]] || 0) + 1; // count occurrences
}
}
return obj;
}

6
src/main.js
View File

@ -71,7 +71,7 @@ var parse = function(text){
var init = function (sequenceConfig) {
var arr = document.querySelectorAll('.mermaid');
var i;
if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
if(typeof sequenceConfig === 'object'){
seq.setConf(sequenceConfig);
@ -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;

205
test/gantt.html
View File

@ -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;
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 {
fill:white;
text-anchor:middle;
font-size:11px;
}
.taskText0, .taskText3 {
fill:black;
}
.taskText1, .taskText2 {
fill:white;
}
.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>