marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-11-18 03:34:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

Gantt: Configurable format for dates on x-axis

Browse Source 
Flowchart: Default styles for links as discussed in issue #31
This commit is contained in:
knsv
2015-02-28 23:50:23 +01:00
parent 8598a7d712
commit 3c5a19e5a7
15 changed files with 674 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
test/gantt.html
View File

@@ -18,7 +18,29 @@
sidePadding:75,
gridLineStartPadding:35,
fontSize:11,
numberSectionStyles:3
numberSectionStyles:3,
axisFormatter: [
// Within a day
["%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>
<script>
@@ -160,10 +182,47 @@
</style>
</head>
<body>
<filter id="blur-effect-1">
<feGaussianBlur stdDeviation="2" />
</filter>
<h1>Gantt tests</h1>
<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
Design jison grammar :done, crit, des1, 2014-01-06,8w
Create example text :done, after des1, 16w
</div>
<h1>Other tests</h1>
<div class="mermaid">
gantt
dateFormat YYYY-MM-DD

19
test/web.html
View File

@@ -3,11 +3,11 @@
<head>
<meta charset="UTF-8">
<script src="mermaid.full.js"></script>
<script src="../dist/mermaid.full.js"></script>
<script>
var mermaid_config = {
startOnLoad:true,
htmlLabels:false
htmlLabels:true
}
mermaid.startOnLoad=true;
</script>
@@ -26,6 +26,17 @@
<link rel="stylesheet" href="seq.css"/>
</head>
<body>
<div class="mermaid">
graph LR;
A[Now with default style on links]-->B{a = '1,2'}
B-->|True|C[test = 1]
B-- ... default style on links -->Z[My default thing this]
C-->D{condition};
linkStyle 0 stroke-width:2px,fill:none,stroke:blue;
linkStyle default stroke-width:2px,fill:none,stroke:red;
</div>
<h1>Issue 2</h1>
<div class="mermaid">
graph LR
@@ -45,12 +56,12 @@
<h1>Shapes</h1>
<div class="mermaid">
graph TD;
A-->B;
A[Default style on nodes]-->B;
A-->C;
A-->D;
B-->D;
A-->|Link text|B
classDef default fill:#696,stroke:#333,stroke-width:2px;
classDef default fill:#f96,stroke:#333,stroke-width:2px;
classDef green fill:#9f6,stroke:#333,stroke-width:2px;
class B green;
</div>