155 lines
4.9 KiB
HTML
155 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<script src="../dist/mermaid.js"></script>
|
|
<link rel="stylesheet" href="../dist/mermaid.forest.css"/>
|
|
<script>
|
|
mermaid.initialize({
|
|
gantt: {
|
|
titleTopMargin:25,
|
|
barHeight:20,
|
|
barGap:4,
|
|
topPadding:50,
|
|
sidePadding:75,
|
|
gridLineStartPadding:5,
|
|
fontSize:11,
|
|
numberSectionStyles:3,
|
|
axisFormatter: [
|
|
// Within a day
|
|
["X%I:%M", function (d) {
|
|
return d.getHours();
|
|
}],
|
|
// Monday a week
|
|
["w. %U", function (d) {
|
|
return d.getDay() == 1;
|
|
}],
|
|
// Day within a week (not monday)
|
|
["%a %d", function (d) {
|
|
return d.getDay() && d.getDate() != 1;
|
|
}],
|
|
// within a month
|
|
["%b %d", function (d) {
|
|
return d.getDate() != 1;
|
|
}],
|
|
// Month
|
|
["%m-%y", function (d) {
|
|
return d.getMonth();
|
|
}]
|
|
]
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<h1>scale tests</h1>
|
|
<h2>less then a day</h2>
|
|
<div class="mermaid">
|
|
gantt
|
|
dateFormat YYYY-MM-DD H:mm
|
|
title Adding GANTT diagram functionality to mermaid
|
|
|
|
section Design
|
|
Design jison grammar :done, crit, des1, 2014-01-06 1:30,4h
|
|
Create example text :done, after des1,6h
|
|
</div>
|
|
<h2>less then a week</h2>
|
|
<div class="mermaid">
|
|
gantt
|
|
dateFormat YYYY-MM-DD
|
|
title Adding GANTT diagram functionality to mermaid2
|
|
section Design
|
|
Design jison grammar :done, crit, des1, 2014-01-06,2d
|
|
Create example text :done, after des1,3d
|
|
</div>
|
|
<h2>less then a month</h2>
|
|
<div class="mermaid">
|
|
gantt
|
|
dateFormat YYYY-MM-DD
|
|
title Adding GANTT diagram functionality to mermaid
|
|
|
|
section Design
|
|
Design jison grammar :done, crit, des1, 2015-01-05,2d
|
|
Create example text :done, after des1, 2w
|
|
</div>
|
|
<h2>less then a year</h2>
|
|
<div class="mermaid">
|
|
gantt
|
|
dateFormat YYYY-MM-DD
|
|
title Adding GANTT diagram functionality to mermaid
|
|
|
|
section Design
|
|
Design1:done, crit, des1, 2014-01-22,4w
|
|
Design2:after des1, 3w
|
|
Design3:3w
|
|
Design4:3w
|
|
Design5:18d
|
|
Design6:2w
|
|
Implementation1:3w
|
|
Implementation2:3w
|
|
</div>
|
|
<h1>Other tests</h1>
|
|
<div class="mermaid">
|
|
gantt
|
|
dateFormat YYYY-MM-DD
|
|
title Adding GANTT diagram functionality to mermaid
|
|
|
|
section Design
|
|
Design jison grammar :done, crit, des1, 2014-01-06, 2014-01-09
|
|
Create example text :done, des2, 2014-01-06, 3d
|
|
Bounce gantt example with users :active, crit, des3, after des2, 5d
|
|
|
|
section Implementation
|
|
update build script :2014-01-06,24h
|
|
Implement parser and jison :after des1, 2d
|
|
Create tests for parser :active, 3d
|
|
Future task in critical line :crit, 5d
|
|
Create tests for renderer :2d
|
|
Add to mermaid core bore tore gore bore lore :1d
|
|
|
|
section Documentation
|
|
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
|
|
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>
|