Skip to content

Commit

Permalink
Gantt: Configurable format for dates on x-axis
Browse files Browse the repository at this point in the history 
Flowchart: Default styles for links as discussed in issue #31
  • Loading branch information
@knsv
knsv committed Feb 28, 2015
1 parent 8598a7d commit 3c5a19e
Show file tree
Hide file tree
Showing 15 changed files with 674 additions and 429 deletions.
311 changes: 184 additions & 127 deletions dist/mermaid.full.js
View file

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions dist/mermaid.full.min.js
View file

Large diffs are not rendered by default.

311 changes: 184 additions & 127 deletions dist/mermaid.slim.js
View file

Large diffs are not rendered by default.

26 changes: 13 additions & 13 deletions dist/mermaid.slim.min.js
View file

Large diffs are not rendered by default.

15 changes: 12 additions & 3 deletions src/diagrams/flowchart/flowRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,15 @@ exports.addVertices = function (vert, g) {
exports.addEdges = function (edges, g) {
var cnt=0;
var aHead;

var defaultStyle;
if(typeof edges.defaultStyle !== 'undefined'){
defaultStyle = edges.defaultStyle.toString().replace(/,/g , ';');

console.log('edges def: '+defaultStyle);
//console.log('edges def:'+defaultStyle.replace(',' , ';','g'));
}

edges.forEach(function (edge) {
cnt++;

Expand All @@ -122,7 +131,6 @@ exports.addEdges = function (edges, g) {
var style = '';



if(typeof edge.style !== 'undefined'){
edge.style.forEach(function(s){
style = style + s +';';
Expand All @@ -132,6 +140,9 @@ exports.addEdges = function (edges, g) {
switch(edge.stroke){
case 'normal':
style = 'stroke: #333; stroke-width: 1.5px;fill:none';
if(typeof defaultStyle !== 'undefined'){
style = defaultStyle;
}
break;
case 'dotted':
style = 'stroke: #333; fill:none;stroke-width:2px;stroke-dasharray:3;';
Expand All @@ -140,8 +151,6 @@ exports.addEdges = function (edges, g) {
style = 'stroke: #333; stroke-width: 3.5px;fill:none';
break;
}


}

// Add the edge to the graph
Expand Down
7 changes: 6 additions & 1 deletion src/diagrams/flowchart/graphDb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,12 @@ exports.addLink = function (start, end, type, linktext) {
*/
exports.updateLink = function (pos, style) {
var position = pos.substr(1);
edges[pos].style = style;

if(pos === 'default'){
edges.defaultStyle = style;
}else{
edges[pos].style = style;
}
};

exports.addClass = function (id, style) {
Expand Down
13 changes: 9 additions & 4 deletions src/diagrams/flowchart/parser/flow.jison
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@

%%
"style" return 'STYLE';
"default" return 'DEFAULT';
"linkStyle" return 'LINKSTYLE';
"classDef" return 'CLASSDEF';
"class" return 'CLASS';
Expand Down Expand Up @@ -384,8 +385,10 @@ textNoTags: textNoTagsToken
;


classDefStatement:CLASSDEF SPACE alphaNum SPACE stylesOpt
classDefStatement:CLASSDEF SPACE DEFAULT SPACE stylesOpt
{$$ = $1;yy.addClass($3,$5);}
| CLASSDEF SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.addClass($3,$5);}
;

classStatement:CLASS SPACE alphaNum SPACE alphaNum
Expand All @@ -402,8 +405,10 @@ styleStatement:STYLE SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.updateLink($3,$5);}
;

linkStyleStatement:
LINKSTYLE SPACE NUM SPACE stylesOpt
linkStyleStatement
: LINKSTYLE SPACE DEFAULT SPACE stylesOpt
{$$ = $1;yy.updateLink($3,$5);}
| LINKSTYLE SPACE NUM SPACE stylesOpt
{$$ = $1;yy.updateLink($3,$5);}
;

Expand All @@ -426,7 +431,7 @@ styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT |

commentToken : textToken | graphCodeTokens ;

textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT ;
textToken : textNoTagsToken | TAGSTART | TAGEND | '==' | '--' | PCT | DEFAULT;

textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;

Expand Down
142 changes: 72 additions & 70 deletions src/diagrams/flowchart/parser/flow.js
View file

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions src/diagrams/gantt/gantt.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,25 @@ describe('when parsing a gantt diagram it',function() {
gantt.parse(str);
});
it('should handle an dateFormat definition', function () {
var str = 'gantt\ntitle Adding gantt diagram functionality to mermaid';
var str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid';

gantt.parse(str);
});
it('should handle an dateFormat definition', function () {
var str = 'gantt\ntitle Adding gantt diagram functionality to mermaid';
var str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid';

gantt.parse(str);
});
it('should handle an dateFormat definition', function () {
var str = 'gantt\nsection Documentation';
it('should handle an section definition', function () {
var str = 'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid';

gantt.parse(str);
});
it('should handle an dateFormat definition', function () {
it('should handle a task definition', function () {
var str = 'gantt\n' +
'dateFormat yyyy-mm-dd\n' +
'title Adding gantt diagram functionality to mermaid\n' +
'section Documentation\n' +
//'section Documentation2\n';
//'Design jison grammar :';
'Design jison grammar:des1, 2014-01-01, 2014-01-04';

gantt.parse(str);
Expand Down
18 changes: 11 additions & 7 deletions src/diagrams/gantt/ganttDb.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ exports.findTaskById = function(id) {
exports.getTasks=function(){
var i;
for(i=10000;i<tasks.length;i++){
tasks[i].startTime = moment(tasks[i].startTime).format('YYYY-MM-DD');
tasks[i].endTime = moment(tasks[i].endTime).format('YYYY-MM-DD');
tasks[i].startTime = moment(tasks[i].startTime).format(dateFormat);
tasks[i].endTime = moment(tasks[i].endTime).format(dateFormat);
}

return tasks;
Expand All @@ -78,11 +78,12 @@ var getStartDate = function(prevTime, dateFormat, str){
}

// Check for actual date set
if(moment(str,dateFormat,true).isValid()){
return moment(str,dateFormat).toDate();
if(moment(str,dateFormat.trim(),true).isValid()){
return moment(str,dateFormat.trim(),true).toDate();
}else{
console.log('Invalid date:'+str);
console.log('With date format:'+dateFormat);
console.log('With date format:'+dateFormat.trim());
console.log('----');
}

// Default date - now
Expand All @@ -96,12 +97,12 @@ var getEndDate = function(prevTime, dateFormat, str){
if(moment(str,dateFormat,true).isValid()){
return moment(str,dateFormat).toDate();
}

var d = moment(prevTime);
// Check for length
var re = /^([\d]+)([wdh])/;
var durationStatement = re.exec(str.trim());

if(durationStatement!== null){
switch(durationStatement[2]){
case 'h':
Expand Down Expand Up @@ -155,6 +156,8 @@ var compileData = function(prevTask, dataStr){
var task = {};
var df = exports.getDateFormat();


// Get tags like active, done cand crit
var matchFound = true;
while(matchFound){
matchFound = false;
Expand All @@ -180,6 +183,7 @@ var compileData = function(prevTask, dataStr){
data[i] = data[i].trim();
}


switch(data.length){
case 1:
task.id = parseId();
Expand Down
99 changes: 69 additions & 30 deletions src/diagrams/gantt/ganttRenderer.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
var gantt = require('./parser/gantt').parser;
gantt.yy = require('./ganttDb');
var d3 = require('./d3');
var moment = require('moment');

var daysInChart;
var conf = {
titleTopMargin: 25,
barHeight: 20,
Expand Down Expand Up @@ -42,7 +44,14 @@ module.exports.draw = function (text, id) {


var dateFormat = d3.time.format("%Y-%m-%d");


var startDate = d3.min(taskArray, function (d) {
return d.startTime;
});
var endDate = d3.max(taskArray, function (d) {
return d.endTime;
});

// Set timescale
var timeScale = d3.time.scale()
.domain([d3.min(taskArray, function (d) {
Expand All @@ -51,10 +60,15 @@ module.exports.draw = function (text, id) {
d3.max(taskArray, function (d) {
return d.endTime;
})])
.rangeRound([0, w - 150])
.nice(d3.time.monday);
.rangeRound([0, w - 150]);
//.nice(d3.time.monday);

var categories = [];

daysInChart = moment.duration(endDate-startDate).asDays();
console.log('startDate',startDate);
console.log('endDate',endDate);
console.log('daysInChart',daysInChart);

for (var i = 0; i < taskArray.length; i++) {
categories.push(taskArray[i].type);
Expand Down Expand Up @@ -230,39 +244,64 @@ module.exports.draw = function (text, id) {

function makeGrid(theSidePad, theTopPad, w, h) {

var pre = [
[".%L", function (d) {
return d.getMilliseconds();
}],
[":%S", function (d) {
return d.getSeconds();
}],
// Within a hour
["h1 %I:%M", function (d) {
return d.getMinutes();
}]];
var post = [
["%Y", function () {
return true;
}]];

var mid = [
// Within a day
["%I:%M", function (d) {
return d.getHours();
}],
// Day within a week (not monday)
["%a %d", function (d) {
//return d.getDay() ==1;
return d.getDay() && d.getDate() != 1;
}],
// within a month
["%b %d", function (d) {
return d.getDate() != 1;
}],
// Month
["%B", function (d) {
return d.getMonth();
}]
];
var formatter;
if(typeof conf.axisFormatter !== 'undefined'){
mid = [];
conf.axisFormatter.forEach(function(item){
var n = [];
n[0] = item[0];
n[1] = item[1];
mid.push(n);
});
}
formatter = pre.concat(mid).concat(post);

var xAxis = d3.svg.axis()
.scale(timeScale)
.orient('bottom')
.ticks(d3.time.weeks, 1)
.tickSize(-h + theTopPad + conf.gridLineStartPadding, 0, 0)
.tickFormat(d3.time.format.multi([
[".%L", function (d) {
return d.getMilliseconds();
}],
[":%S", function (d) {
return d.getSeconds();
}],
["%I:%M", function (d) {
return d.getMinutes();
}],
["%I %p", function (d) {
return d.getHours();
}],
["%a %d", function (d) {
return d.getDay() && d.getDate() != 2;
}],
["%b %d", function (d) {
return d.getDate() != 2;
}],
["%B", function (d) {
return d.getMonth();
}],
["%Y", function () {
return true;
}]
]))
.tickFormat(d3.time.format.multi(formatter))
;

if(daysInChart >7 && daysInChart<60){
xAxis = xAxis.ticks(d3.time.monday.range);
}

var grid = svg.append('g')
.attr('class', 'grid')
.attr('transform', 'translate(' + theSidePad + ', ' + (h - 50) + ')')
Expand Down
5 changes: 2 additions & 3 deletions src/diagrams/gantt/parser/gantt.jison
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,7 @@
\#[^\n]* /* skip comments */
\%%[^\n]* /* skip comments */
"gantt" return 'gantt';
"dateFormat" return 'dateFormat';
"yyyy"\-"mm"\-"dd" return 'dateFormatInst';
"dateFormat"\s[^#\n;]+ return 'dateFormat';
\d\d\d\d"-"\d\d"-"\d\d return 'date';
"title"\s[^#\n;]+ return 'title';
"section"\s[^#:\n;]+ return 'section';
Expand Down Expand Up @@ -54,7 +53,7 @@ line
;

statement
: 'dateFormat' dateFormatInst {yy.setDateFormat($2);$$=$2;}
: 'dateFormat' {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
| title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
| section {yy.addSection($1.substr(8));$$=$1.substr(8);}
| taskTxt taskData {yy.addTask($1,$2);$$='task';}
Expand Down
Loading

0 comments on commit 3c5a19e

Please sign in to comment.