Merge branch 'mermaid-js-develop' into develop
This commit is contained in:
chris moran
commit
fed142dad2
|
|
@ -5,4 +5,5 @@
|
|||
1. [How to bind an event?](https://github.com/knsv/mermaid/issues/372)
|
||||
1. [How to add newline in the text?](https://github.com/knsv/mermaid/issues/384#issuecomment-281339381)
|
||||
1. [How to have special characters in link text?](https://github.com/knsv/mermaid/issues/407#issuecomment-329944735)
|
||||
1. [How to change flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
|
||||
1. [How to change Flowchart curve style?](https://github.com/knsv/mermaid/issues/580#issuecomment-373929046)
|
||||
1. [How to create a Flowchart end-Node that says "End"](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897)
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
|
||||
## Graph
|
||||
|
||||
This statement declares a new graph and the direction of the graph layout.
|
||||
This statement declares the direction of the Flowchart.
|
||||
|
||||
This declares a graph oriented from top to bottom (`TD` or `TB`).
|
||||
This declares the graph is oriented from top to bottom (`TD` or `TB`).
|
||||
|
||||
```
|
||||
graph TD
|
||||
|
|
@ -15,7 +15,7 @@ graph TD
|
|||
Start --> Stop
|
||||
```
|
||||
|
||||
This declares a graph oriented from left to right (`LR`).
|
||||
This declares the graph is oriented from left to right (`LR`).
|
||||
|
||||
```
|
||||
graph LR
|
||||
|
|
@ -26,18 +26,26 @@ graph LR
|
|||
Start --> Stop
|
||||
```
|
||||
|
||||
Possible directions are:
|
||||
## Flowchart Orientation
|
||||
|
||||
* TB - top bottom
|
||||
* BT - bottom top
|
||||
* RL - right left
|
||||
* LR - left right
|
||||
Possible FlowChart orientations are:
|
||||
|
||||
* TD - same as TB
|
||||
* TB - top to bottom
|
||||
* TD - top-down/ same as top to bottom
|
||||
* BT - bottom to top
|
||||
* RL - right to left
|
||||
* LR - left to right
|
||||
|
||||
## flowchart
|
||||
|
||||
This renders a flowchart in the same way as a graph but with a new rendering method opening up for long requested features such as: more arrow types, multi directional arrows, and linking to and from subgraphs. Apart from the graph type, flowchart/graph, the syntax is the same. This is currently experimental but when the beta period is over both the graph and flowchart keywords will render in the new way. This means it is ok to start beta testing flowcharts.
|
||||
|
||||
## Flowcharts
|
||||
|
||||
This renders a flowchart that allows for features such as: more arrow types, multi directional arrows, and linking to and from subgraphs.
|
||||
|
||||
Apart from the graph type, the syntax is the same. This is currently experimental but when the beta period is over, both the graph and flowchart keywords will render in the new way. This means it is ok to start beta testing flowcharts.
|
||||
|
||||
|
||||
## An important note on Flowchart nodes, do not type the word "end" as a Flowchart node. Capitalize all or any one the letters to keep the flowchart from breaking, i.e, "End" or "END". Or you can apply this [workaround](https://github.com/mermaid-js/mermaid/issues/1444#issuecomment-639528897).
|
||||
|
||||
## Nodes & shapes
|
||||
|
||||
|
|
@ -52,7 +60,7 @@ graph LR
|
|||
graph LR
|
||||
id
|
||||
```
|
||||
Note that the id is what is displayed in the box.
|
||||
# Note that the id is what is displayed in the box.
|
||||
|
||||
### A node with text
|
||||
|
||||
|
|
@ -69,6 +77,7 @@ graph LR
|
|||
id1[This is the text in the box]
|
||||
```
|
||||
|
||||
## Node Shapes
|
||||
|
||||
### A node with round edges
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,9 @@ const tags = ['active', 'done', 'crit', 'milestone'];
|
|||
let funs = [];
|
||||
let inclusiveEndDates = false;
|
||||
|
||||
// The serial order of the task in the script
|
||||
let lastOrder = 0;
|
||||
|
||||
export const clear = function() {
|
||||
sections = [];
|
||||
tasks = [];
|
||||
|
|
@ -32,6 +35,7 @@ export const clear = function() {
|
|||
todayMarker = '';
|
||||
excludes = [];
|
||||
inclusiveEndDates = false;
|
||||
lastOrder = 0;
|
||||
};
|
||||
|
||||
export const setAxisFormat = function(txt) {
|
||||
|
|
@ -374,6 +378,9 @@ export const addTask = function(descr, data) {
|
|||
rawTask.done = taskInfo.done;
|
||||
rawTask.crit = taskInfo.crit;
|
||||
rawTask.milestone = taskInfo.milestone;
|
||||
rawTask.order = lastOrder;
|
||||
|
||||
lastOrder++;
|
||||
|
||||
const pos = rawTasks.push(rawTask);
|
||||
|
||||
|
|
|
|||
|
|
@ -176,6 +176,137 @@ describe('when using the ganttDb', function() {
|
|||
expect(tasks[6].task).toEqual('test7');
|
||||
});
|
||||
|
||||
it('should maintain the order in which tasks are created', function() {
|
||||
ganttDb.setTitle('Project Execution');
|
||||
ganttDb.setDateFormat('YYYY-MM-DD');
|
||||
ganttDb.addSection('section A section');
|
||||
ganttDb.addTask('Completed task', 'done, des1, 2014-01-06,2014-01-08');
|
||||
ganttDb.addTask('Active task', 'active, des2, 2014-01-09, 3d');
|
||||
ganttDb.addTask('Future task', 'des3, after des2, 5d');
|
||||
ganttDb.addTask('Future task2', 'des4, after des3, 5d');
|
||||
|
||||
ganttDb.addSection('section Critical tasks');
|
||||
ganttDb.addTask('Completed task in the critical line', 'crit, done, 2014-01-06,24h');
|
||||
ganttDb.addTask('Implement parser and jison', 'crit, done, after des1, 2d');
|
||||
ganttDb.addTask('Create tests for parser', 'crit, active, 3d');
|
||||
ganttDb.addTask('Future task in critical line', 'crit, 5d');
|
||||
ganttDb.addTask('Create tests for renderer', '2d');
|
||||
ganttDb.addTask('Add to mermaid', '1d');
|
||||
|
||||
ganttDb.addSection('section Documentation');
|
||||
ganttDb.addTask('Describe gantt syntax', 'active, a1, after des1, 3d');
|
||||
ganttDb.addTask('Add gantt diagram to demo page', 'after a1 , 20h');
|
||||
ganttDb.addTask('Add another diagram to demo page', 'doc1, after a1 , 48h');
|
||||
|
||||
ganttDb.addSection('section Last section');
|
||||
ganttDb.addTask('Describe gantt syntax', 'after doc1, 3d');
|
||||
ganttDb.addTask('Add gantt diagram to demo page', '20h');
|
||||
ganttDb.addTask('Add another diagram to demo page', '48h');
|
||||
|
||||
const tasks = ganttDb.getTasks();
|
||||
|
||||
// Section - A section
|
||||
expect(tasks[0].startTime).toEqual(moment('2014-01-06', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[0].endTime).toEqual(moment('2014-01-08', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[0].order).toEqual(0);
|
||||
expect(tasks[0].id).toEqual('des1');
|
||||
expect(tasks[0].task).toEqual('Completed task');
|
||||
|
||||
expect(tasks[1].startTime).toEqual(moment('2014-01-09', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[1].endTime).toEqual(moment('2014-01-12', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[1].order).toEqual(1);
|
||||
expect(tasks[1].id).toEqual('des2');
|
||||
expect(tasks[1].task).toEqual('Active task');
|
||||
|
||||
expect(tasks[2].startTime).toEqual(moment('2014-01-12', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[2].endTime).toEqual(moment('2014-01-17', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[2].order).toEqual(2);
|
||||
expect(tasks[2].id).toEqual('des3');
|
||||
expect(tasks[2].task).toEqual('Future task');
|
||||
|
||||
expect(tasks[3].startTime).toEqual(moment('2014-01-17', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[3].endTime).toEqual(moment('2014-01-22', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[3].order).toEqual(3);
|
||||
expect(tasks[3].id).toEqual('des4');
|
||||
expect(tasks[3].task).toEqual('Future task2');
|
||||
|
||||
// Section - Critical tasks
|
||||
expect(tasks[4].startTime).toEqual(moment('2014-01-06', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[4].endTime).toEqual(moment('2014-01-07', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[4].order).toEqual(4);
|
||||
expect(tasks[4].id).toEqual('task1');
|
||||
expect(tasks[4].task).toEqual('Completed task in the critical line');
|
||||
|
||||
expect(tasks[5].startTime).toEqual(moment('2014-01-08', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[5].endTime).toEqual(moment('2014-01-10', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[5].order).toEqual(5);
|
||||
expect(tasks[5].id).toEqual('task2');
|
||||
expect(tasks[5].task).toEqual('Implement parser and jison');
|
||||
|
||||
expect(tasks[6].startTime).toEqual(moment('2014-01-10', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[6].endTime).toEqual(moment('2014-01-13', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[6].order).toEqual(6);
|
||||
expect(tasks[6].id).toEqual('task3');
|
||||
expect(tasks[6].task).toEqual('Create tests for parser');
|
||||
|
||||
expect(tasks[7].startTime).toEqual(moment('2014-01-13', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[7].endTime).toEqual(moment('2014-01-18', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[7].order).toEqual(7);
|
||||
expect(tasks[7].id).toEqual('task4');
|
||||
expect(tasks[7].task).toEqual('Future task in critical line');
|
||||
|
||||
expect(tasks[8].startTime).toEqual(moment('2014-01-18', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[8].endTime).toEqual(moment('2014-01-20', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[8].order).toEqual(8);
|
||||
expect(tasks[8].id).toEqual('task5');
|
||||
expect(tasks[8].task).toEqual('Create tests for renderer');
|
||||
|
||||
expect(tasks[9].startTime).toEqual(moment('2014-01-20', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[9].endTime).toEqual(moment('2014-01-21', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[9].order).toEqual(9);
|
||||
expect(tasks[9].id).toEqual('task6');
|
||||
expect(tasks[9].task).toEqual('Add to mermaid');
|
||||
|
||||
// Section - Documentation
|
||||
expect(tasks[10].startTime).toEqual(moment('2014-01-08', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[10].endTime).toEqual(moment('2014-01-11', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[10].order).toEqual(10);
|
||||
expect(tasks[10].id).toEqual('a1');
|
||||
expect(tasks[10].task).toEqual('Describe gantt syntax');
|
||||
|
||||
expect(tasks[11].startTime).toEqual(moment('2014-01-11', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[11].endTime).toEqual(moment('2014-01-11 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate());
|
||||
expect(tasks[11].order).toEqual(11);
|
||||
expect(tasks[11].id).toEqual('task7');
|
||||
expect(tasks[11].task).toEqual('Add gantt diagram to demo page');
|
||||
|
||||
expect(tasks[12].startTime).toEqual(moment('2014-01-11', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[12].endTime).toEqual(moment('2014-01-13', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[12].order).toEqual(12);
|
||||
expect(tasks[12].id).toEqual('doc1');
|
||||
expect(tasks[12].task).toEqual('Add another diagram to demo page');
|
||||
|
||||
// Section - Last section
|
||||
expect(tasks[13].startTime).toEqual(moment('2014-01-13', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[13].endTime).toEqual(moment('2014-01-16', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[13].order).toEqual(13);
|
||||
expect(tasks[13].id).toEqual('task8');
|
||||
expect(tasks[13].task).toEqual('Describe gantt syntax');
|
||||
|
||||
expect(tasks[14].startTime).toEqual(moment('2014-01-16', 'YYYY-MM-DD').toDate());
|
||||
expect(tasks[14].endTime).toEqual(moment('2014-01-16 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate());
|
||||
expect(tasks[14].order).toEqual(14);
|
||||
expect(tasks[14].id).toEqual('task9');
|
||||
expect(tasks[14].task).toEqual('Add gantt diagram to demo page');
|
||||
|
||||
expect(tasks[15].startTime).toEqual(moment('2014-01-16 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate());
|
||||
expect(tasks[15].endTime).toEqual(moment('2014-01-18 20:00:00', 'YYYY-MM-DD HH:mm:ss').toDate());
|
||||
expect(tasks[15].order).toEqual(15);
|
||||
expect(tasks[15].id).toEqual('task10');
|
||||
expect(tasks[15].task).toEqual('Add another diagram to demo page');
|
||||
});
|
||||
|
||||
|
||||
it('should work when end date is the 31st', function() {
|
||||
ganttDb.setDateFormat('YYYY-MM-DD');
|
||||
ganttDb.addSection('Task endTime is on the 31st day of the month');
|
||||
|
|
|
|||
|
|
@ -80,6 +80,22 @@ export const draw = function(text, id) {
|
|||
|
||||
categories = checkUnique(categories);
|
||||
|
||||
function taskCompare(a, b) {
|
||||
const taskA = a.startTime;
|
||||
const taskB = b.startTime;
|
||||
let result = 0;
|
||||
if (taskA > taskB) {
|
||||
result = 1;
|
||||
} else if (taskA < taskB) {
|
||||
result = -1;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// Sort the task array using the above taskCompare() so that
|
||||
// tasks are created based on their order of startTime
|
||||
taskArray.sort(taskCompare);
|
||||
|
||||
makeGant(taskArray, w, h);
|
||||
if (typeof conf.useWidth !== 'undefined') {
|
||||
elem.setAttribute('width', w);
|
||||
|
|
@ -119,6 +135,8 @@ export const draw = function(text, id) {
|
|||
.append('rect')
|
||||
.attr('x', 0)
|
||||
.attr('y', function(d, i) {
|
||||
// Ignore the incoming i value and use our order instead
|
||||
i = d.order;
|
||||
return i * theGap + theTopPad - 2;
|
||||
})
|
||||
.attr('width', function() {
|
||||
|
|
@ -160,6 +178,8 @@ export const draw = function(text, id) {
|
|||
return timeScale(d.startTime) + theSidePad;
|
||||
})
|
||||
.attr('y', function(d, i) {
|
||||
// Ignore the incoming i value and use our order instead
|
||||
i = d.order;
|
||||
return i * theGap + theTopPad;
|
||||
})
|
||||
.attr('width', function(d) {
|
||||
|
|
@ -263,6 +283,8 @@ export const draw = function(text, id) {
|
|||
}
|
||||
})
|
||||
.attr('y', function(d, i) {
|
||||
// Ignore the incoming i value and use our order instead
|
||||
i = d.order;
|
||||
return i * theGap + conf.barHeight / 2 + (conf.fontSize / 2 - 2) + theTopPad;
|
||||
})
|
||||
.attr('text-height', theBarHeight)
|
||||
|
|
@ -280,6 +302,7 @@ export const draw = function(text, id) {
|
|||
}
|
||||
|
||||
let secNum = 0;
|
||||
console.log(conf);
|
||||
for (let i = 0; i < categories.length; i++) {
|
||||
if (d.type === categories[i]) {
|
||||
secNum = i % conf.numberSectionStyles;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
|
||||
/*
|
||||
* Parse following
|
||||
* gitGraph:
|
||||
* commit
|
||||
* commit
|
||||
* branch
|
||||
* branch
|
||||
*/
|
||||
%lex
|
||||
|
||||
|
|
@ -14,28 +13,28 @@
|
|||
|
||||
%%
|
||||
|
||||
(\r?\n)+ return 'NL';
|
||||
\s+ /* skip all whitespace */
|
||||
\#[^\n]* /* skip comments */
|
||||
\%%[^\n]* /* skip comments */
|
||||
"gitGraph" return 'GG';
|
||||
"commit" return 'COMMIT';
|
||||
"branch" return 'BRANCH';
|
||||
"merge" return 'MERGE';
|
||||
"reset" return 'RESET';
|
||||
"checkout" return 'CHECKOUT';
|
||||
"LR" return 'DIR';
|
||||
"BT" return 'DIR';
|
||||
":" return ':';
|
||||
"^" return 'CARET'
|
||||
"options"\r?\n this.begin("options");
|
||||
<options>"end"\r?\n this.popState();
|
||||
<options>[^\n]+\r?\n return 'OPT';
|
||||
["] this.begin("string");
|
||||
<string>["] this.popState();
|
||||
<string>[^"]* return 'STR';
|
||||
[a-zA-Z][a-zA-Z0-9_]+ return 'ID';
|
||||
<<EOF>> return 'EOF';
|
||||
(\r?\n)+ return 'NL';
|
||||
\s+ /* skip all whitespace */
|
||||
\#[^\n]* /* skip comments */
|
||||
\%%[^\n]* /* skip comments */
|
||||
"gitGraph" return 'GG';
|
||||
"commit" return 'COMMIT';
|
||||
"branch" return 'BRANCH';
|
||||
"merge" return 'MERGE';
|
||||
"reset" return 'RESET';
|
||||
"checkout" return 'CHECKOUT';
|
||||
"LR" return 'DIR';
|
||||
"BT" return 'DIR';
|
||||
":" return ':';
|
||||
"^" return 'CARET'
|
||||
"options"\r?\n this.begin("options");
|
||||
<options>"end"\r?\n this.popState();
|
||||
<options>[^\n]+\r?\n return 'OPT';
|
||||
["] this.begin("string");
|
||||
<string>["] this.popState();
|
||||
<string>[^"]* return 'STR';
|
||||
[a-zA-Z][-_\.a-zA-Z0-9]*[-_a-zA-Z0-9] return 'ID';
|
||||
<<EOF>> return 'EOF';
|
||||
|
||||
/lex
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue