GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues Projects Releases Wiki Activity

#743 handle multiline section titles in gantt diagrams

Browse Source
This commit is contained in:
Marc Faber 2020-01-08 13:50:58 +01:00
parent 37ae863443
commit 1cfd93640c
4 changed files with 93 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,42 @@ describe('Sequencediagram', () => {
{}
);
});
it('Handle multiline section titles with different line breaks', () => {
imgSnapshotTest(
`
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title GANTT diagram with multiline section titles
excludes weekdays 2014-01-10
section A section<br>multiline
Completed task : done, des1, 2014-01-06,2014-01-08
Active task : active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks<br/>multiline
Completed task in the critical line : crit, done, 2014-01-06, 24h
Implement parser and jison : crit, done, after des1, 2d
Create tests for parser : crit, active, 3d
Future task in critical line : crit, 5d
Create tests for renderer : 2d
Add to mermaid : 1d
section Documentation<br />multiline
Describe gantt syntax : active, a1, after des1, 3d
Add gantt diagram to demo page : after a1, 20h
Add another diagram to demo page : doc1, after a1, 48h
section Last section<br />multiline
Describe gantt syntax : after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
`,
{}
);
});
it('Multiple dependencies syntax', () => {
imgSnapshotTest(
`

31
dist/index.html vendored
View File

@ -430,6 +430,37 @@ Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</div>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD
axisFormat %d/%m
title GANTT diagram with multiline section titles
excludes weekdays 2014-01-10
section A section<br>multiline
Completed task : done, des1, 2014-01-06,2014-01-08
Active task : active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks<br/>multiline
Completed task in the critical line : crit, done, 2014-01-06, 24h
Implement parser and jison : crit, done, after des1, 2d
Create tests for parser : crit, active, 3d
Future task in critical line : crit, 5d
Create tests for renderer : 2d
Add to mermaid : 1d
section Documentation<br />multiline
Describe gantt syntax : active, a1, after des1, 3d
Add gantt diagram to demo page : after a1, 20h
Add another diagram to demo page : doc1, after a1, 48h
section Last section<br />multiline
Describe gantt syntax : after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
</div>
<hr/>

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

@ -357,9 +357,22 @@ export const draw = function(text, id) {
.selectAll('text')
.data(numOccurances)
.enter()
.append('text')
.text(function(d) {
return d[0];
.append(function(d) {
const rows = d[0].split(/<br\s*\/?>/gi);
const dy = -(rows.length - 1) / 2;
const svgLabel = document.createElementNS('http://www.w3.org/2000/svg', 'text');
svgLabel.setAttribute('dy', dy + 'em');
for (let j = 0; j < rows.length; j++) {
const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan.setAttribute('alignment-baseline', 'central');
tspan.setAttribute('x', '10');
if (j > 0) tspan.setAttribute('dy', '1em');
tspan.textContent = rows[j];
svgLabel.appendChild(tspan);
}
return svgLabel;
})
.attr('x', 10)
.attr('y', function(d, i) {

10
src/diagrams/gantt/parser/gantt.spec.js
View File

@ -47,6 +47,16 @@ describe('when parsing a gantt diagram it', function() {
expect(parserFnConstructor(str)).not.toThrow();
});
it('should handle multiline section titles with different line breaks', function() {
const str =
'gantt\n' +
'dateFormat yyyy-mm-dd\n' +
'title Adding gantt diagram functionality to mermaid\n' +
'excludes weekdays 2019-02-01\n' +
'section Line1<br>Line2<br/>Line3</br />Line4<br\t/>Line5';
expect(parserFnConstructor(str)).not.toThrow();
});
/**
* Beslutsflöde inligt nedan. Obs bla bla bla
* ```