marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-23 17:29:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'itprdev-issue-552' into develop

Browse Source
This commit is contained in:
Knut Sveidqvist
2019-12-11 21:31:33 +01:00
parent 1811318dea 52d84a99ac
commit c441d04e8a
4 changed files with 63 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
cypress/integration/rendering/gantt.spec.js
View File

@@ -38,4 +38,20 @@ describe('Sequencediagram', () => {
{} {}
); );
}); });
it('Multiple dependencies syntax', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
`,
{}
);
});
}); });

23
cypress/platform/current.html
View File

@@ -5,7 +5,7 @@
rel="stylesheet" rel="stylesheet"
/> />
<style> <style>
body {background: black} body {background: white}
h1 { color: white;} h1 { color: white;}
.arrowheadPath {fill: red;} .arrowheadPath {fill: red;}
@@ -16,22 +16,29 @@
</head> </head>
<body> <body>
<h1>info below</h1> <h1>info below</h1>
<div style="display: flex;"> <div style="display: flex;width: 100%; height: 100%">
<div class="mermaid">graph TD <div class="mermaid" style="width: 100%; height: 100%">gantt
A ==> B dateFormat YYYY-MM-DD
A --> C axisFormat %d/%m
A -.-> D title Adding GANTT diagram to mermaid
excludes weekdays 2014-01-10
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
</div> </div>
</div> </div>
<script src="./mermaid.js"></script> <script src="./mermaid.js"></script>
<script> <script>
mermaid.initialize({ mermaid.initialize({
theme: 'dark', // theme: 'dark',
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 3, logLevel: 3,
flowchart: { curve: 'linear', "htmlLabels": false }, flowchart: { curve: 'linear', "htmlLabels": false },
gantt: { axisFormat: '%m/%d/%Y' }, // gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50 }, sequence: { actorMargin: 50 },
// sequenceDiagram: { actorMargin: 300 } // deprecated // sequenceDiagram: { actorMargin: 300 } // deprecated
}); });

14
docs/gantt.md
View File

@@ -87,6 +87,20 @@ gantt
Add another diagram to demo page :48h Add another diagram to demo page :48h
``` ```
It is possible to set multiple depenendenies separated by space:
```
gantt
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```
```
gantt
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
```
### Title ### Title
Tbd Tbd

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

@@ -134,18 +134,32 @@ const getStartDate = function(prevTime, dateFormat, str) {
str = str.trim(); str = str.trim();
// Test for after // Test for after
const re = /^after\s+([\d\w-]+)/; const re = /^after\s+([\d\w- ]+)/;
const afterStatement = re.exec(str.trim()); const afterStatement = re.exec(str.trim());
if (afterStatement !== null) { if (afterStatement !== null) {
const task = findTaskById(afterStatement[1]); // check all after ids and take the latest
let latestEndingTask = null;
afterStatement[1].split(' ').forEach(function(id) {
let task = findTaskById(id);
if (typeof task !== 'undefined') {
if (!latestEndingTask) {
latestEndingTask = task;
} else {
if (task.endTime > latestEndingTask.endTime) {
latestEndingTask = task;
}
}
}
});
if (typeof task === 'undefined') { if (!latestEndingTask) {
const dt = new Date(); const dt = new Date();
dt.setHours(0, 0, 0, 0); dt.setHours(0, 0, 0, 0);
return dt; return dt;
} else {
return latestEndingTask.endTime;
} }
return task.endTime;
} }
// Check for actual date set // Check for actual date set