| 6dd74de | | | 1 | <!doctype html> |
| 6dd74de | | | 2 | <html lang="en"> |
| 6dd74de | | | 3 | <head> |
| 6dd74de | | | 4 | <meta charset="utf-8" /> |
| 6dd74de | | | 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
| 6dd74de | | | 6 | <title>Gantt | Mermaid Quick Test Page</title> |
| 6dd74de | | | 7 | <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" /> |
| 6dd74de | | | 8 | <style> |
| 6dd74de | | | 9 | div.mermaid { |
| 6dd74de | | | 10 | font-family: 'Courier New', Courier, monospace !important; |
| 6dd74de | | | 11 | } |
| 6dd74de | | | 12 | </style> |
| 6dd74de | | | 13 | </head> |
| 6dd74de | | | 14 | |
| 6dd74de | | | 15 | <body> |
| 6dd74de | | | 16 | <h1>Gantt chart diagram demos</h1> |
| 6dd74de | | | 17 | <!-- accDescription Tasks for Q4 --> |
| 6dd74de | | | 18 | <pre class="mermaid"> |
| 6dd74de | | | 19 | gantt |
| 6dd74de | | | 20 | title A Gantt Diagram |
| 6dd74de | | | 21 | accTitle: A simple sample gantt diagram |
| 6dd74de | | | 22 | accDescr: 2 sections with 2 tasks each, from 2014 |
| 6dd74de | | | 23 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 24 | section Section |
| 6dd74de | | | 25 | A task :a1, 2014-01-01, 30d |
| 6dd74de | | | 26 | Another task :after a1 , 20d |
| 6dd74de | | | 27 | section Another |
| 6dd74de | | | 28 | Task in sec :2014-01-12 , 12d |
| 6dd74de | | | 29 | another task : 24d |
| 6dd74de | | | 30 | </pre> |
| 6dd74de | | | 31 | <hr /> |
| 6dd74de | | | 32 | |
| 6dd74de | | | 33 | <pre class="mermaid"> |
| 6dd74de | | | 34 | gantt |
| 6dd74de | | | 35 | title #; Gantt Diagrams Allow Semicolons and Hashtags #;! |
| 6dd74de | | | 36 | accTitle: A simple sample gantt diagram |
| 6dd74de | | | 37 | accDescr: 2 sections with 2 tasks each, from 2014 |
| 6dd74de | | | 38 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 39 | section #;Section |
| 6dd74de | | | 40 | #;A task :a1, 2014-01-01, 30d |
| 6dd74de | | | 41 | #;Another task :after a1 , 20d |
| 6dd74de | | | 42 | section #;Another |
| 6dd74de | | | 43 | Task in sec :2014-01-12 , 12d |
| 6dd74de | | | 44 | another task : 24d |
| 6dd74de | | | 45 | </pre> |
| 6dd74de | | | 46 | <hr /> |
| 6dd74de | | | 47 | |
| 6dd74de | | | 48 | <pre class="mermaid"> |
| 6dd74de | | | 49 | gantt |
| 6dd74de | | | 50 | title Airworks roadmap |
| 6dd74de | | | 51 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 52 | axisFormat %m-%d %a |
| 6dd74de | | | 53 | excludes weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07 |
| 6dd74de | | | 54 | includes 2021-10-09 |
| 6dd74de | | | 55 | |
| 6dd74de | | | 56 | section Airworks 3.4.1 |
| 6dd74de | | | 57 | 开发 :b, 2021-10-07, 5d |
| 6dd74de | | | 58 | 测试 :after b, 4d |
| 6dd74de | | | 59 | OK :milestore |
| 6dd74de | | | 60 | section Airworks 3.4.2 |
| 6dd74de | | | 61 | 开发 :a, 2021-10-09, 4d |
| 6dd74de | | | 62 | 测试 :after a, 4d |
| 6dd74de | | | 63 | </pre> |
| 6dd74de | | | 64 | <hr /> |
| 6dd74de | | | 65 | |
| 6dd74de | | | 66 | <pre class="mermaid"> |
| 6dd74de | | | 67 | gantt |
| 6dd74de | | | 68 | title Exclusive end dates (Manual date should end on 3d) |
| 6dd74de | | | 69 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 70 | axisFormat %d |
| 6dd74de | | | 71 | section Section1 |
| 6dd74de | | | 72 | 2 Days: 1, 2019-01-01,2d |
| 6dd74de | | | 73 | Manual Date: 2, 2019-01-01,2019-01-03 |
| 6dd74de | | | 74 | </pre> |
| 6dd74de | | | 75 | <hr /> |
| 6dd74de | | | 76 | |
| 6dd74de | | | 77 | <pre class="mermaid"> |
| 6dd74de | | | 78 | gantt |
| 6dd74de | | | 79 | title Inclusive end dates (Manual date should end on 4th) |
| 6dd74de | | | 80 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 81 | axisFormat %d |
| 6dd74de | | | 82 | inclusiveEndDates |
| 6dd74de | | | 83 | section Section1 |
| 6dd74de | | | 84 | 2 Days: 1, 2019-01-01,2d |
| 6dd74de | | | 85 | Manual Date: 2, 2019-01-01,2019-01-03 |
| 6dd74de | | | 86 | </pre> |
| 6dd74de | | | 87 | <hr /> |
| 6dd74de | | | 88 | |
| 6dd74de | | | 89 | <pre class="mermaid"> |
| 6dd74de | | | 90 | gantt |
| 6dd74de | | | 91 | title Hide today marker (vertical line should not be visible) |
| 6dd74de | | | 92 | dateFormat Z |
| 6dd74de | | | 93 | axisFormat %d/%m |
| 6dd74de | | | 94 | todayMarker off |
| 6dd74de | | | 95 | section Section1 |
| 6dd74de | | | 96 | Today: 1, 08-08-09-01:00, 5min |
| 6dd74de | | | 97 | </pre> |
| 6dd74de | | | 98 | <hr /> |
| 6dd74de | | | 99 | |
| 6dd74de | | | 100 | <pre class="mermaid"> |
| 6dd74de | | | 101 | gantt |
| 6dd74de | | | 102 | title Style today marker (vertical line should be 5px wide and half-transparent blue) |
| 6dd74de | | | 103 | dateFormat Z |
| 6dd74de | | | 104 | axisFormat %d/%m |
| 6dd74de | | | 105 | todayMarker stroke-width:5px,stroke:#00f,opacity:0.5 |
| 6dd74de | | | 106 | section Section1 |
| 6dd74de | | | 107 | Today: 1, 08-08-09-01:00, 5min |
| 6dd74de | | | 108 | </pre> |
| 6dd74de | | | 109 | <hr /> |
| 6dd74de | | | 110 | |
| 6dd74de | | | 111 | <pre class="mermaid"> |
| 6dd74de | | | 112 | gantt |
| 6dd74de | | | 113 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 114 | axisFormat %d/%m |
| 6dd74de | | | 115 | title Adding GANTT diagram to mermaid |
| 6dd74de | | | 116 | excludes weekdays 2014-01-10 |
| 6dd74de | | | 117 | |
| 6dd74de | | | 118 | section A section |
| 6dd74de | | | 119 | Completed task :done, des1, 2014-01-06,2014-01-08 |
| 6dd74de | | | 120 | Active task :active, des2, 2014-01-09, 3d |
| 6dd74de | | | 121 | Future task : des3, after des2, 5d |
| 6dd74de | | | 122 | Future task2 : des4, after des3, 5d |
| 6dd74de | | | 123 | |
| 6dd74de | | | 124 | section Critical tasks |
| 6dd74de | | | 125 | Completed task in the critical line :crit, done, 2014-01-06,24h |
| 6dd74de | | | 126 | Implement parser and jison :crit, done, after des1, 2d |
| 6dd74de | | | 127 | Create tests for parser :crit, active, 3d |
| 6dd74de | | | 128 | Future task in critical line :crit, 5d |
| 6dd74de | | | 129 | Create tests for renderer :2d |
| 6dd74de | | | 130 | Add to mermaid :1d |
| 6dd74de | | | 131 | |
| 6dd74de | | | 132 | section Documentation |
| 6dd74de | | | 133 | Describe gantt syntax :active, a1, after des1, 3d |
| 6dd74de | | | 134 | Add gantt diagram to demo page :after a1 , 20h |
| 6dd74de | | | 135 | Add another diagram to demo page :doc1, after a1 , 48h |
| 6dd74de | | | 136 | |
| 6dd74de | | | 137 | section Clickable |
| 6dd74de | | | 138 | Visit mermaidjs :active, cl1, 2014-01-07,2014-01-10 |
| 6dd74de | | | 139 | Calling a Callback (look at the console log) :cl2, after cl1, 3d |
| 6dd74de | | | 140 | |
| 6dd74de | | | 141 | click cl1 href "https://mermaidjs.github.io/" |
| 6dd74de | | | 142 | click cl2 call ganttTestClick("test", test, test) |
| 6dd74de | | | 143 | |
| 6dd74de | | | 144 | section Last section |
| 6dd74de | | | 145 | Describe gantt syntax :after doc1, 3d |
| 6dd74de | | | 146 | Add gantt diagram to demo page : 20h |
| 6dd74de | | | 147 | Add another diagram to demo page : 48h |
| 6dd74de | | | 148 | </pre> |
| 6dd74de | | | 149 | <hr /> |
| 6dd74de | | | 150 | |
| 6dd74de | | | 151 | <pre class="mermaid"> |
| 6dd74de | | | 152 | gantt |
| 6dd74de | | | 153 | dateFormat YYYY-MM-DD |
| 6dd74de | | | 154 | axisFormat %d/%m |
| 6dd74de | | | 155 | title GANTT diagram with multiline section titles |
| 6dd74de | | | 156 | excludes weekdays 2014-01-10 |
| 6dd74de | | | 157 | |
| 6dd74de | | | 158 | section A section<br>multiline |
| 6dd74de | | | 159 | Completed task : done, des1, 2014-01-06,2014-01-08 |
| 6dd74de | | | 160 | Active task : active, des2, 2014-01-09, 3d |
| 6dd74de | | | 161 | Future task : des3, after des2, 5d |
| 6dd74de | | | 162 | Future task2 : des4, after des3, 5d |
| 6dd74de | | | 163 | |
| 6dd74de | | | 164 | section Critical tasks<br />multiline |
| 6dd74de | | | 165 | Completed task in the critical line : crit, done, 2014-01-06, 24h |
| 6dd74de | | | 166 | Implement parser and jison : crit, done, after des1, 2d |
| 6dd74de | | | 167 | Create tests for parser : crit, active, 3d |
| 6dd74de | | | 168 | Future task in critical line : crit, 5d |
| 6dd74de | | | 169 | Create tests for renderer : 2d |
| 6dd74de | | | 170 | Add to mermaid : 1d |
| 6dd74de | | | 171 | |
| 6dd74de | | | 172 | section Documentation<br />multiline |
| 6dd74de | | | 173 | Describe gantt syntax : active, a1, after des1, 3d |
| 6dd74de | | | 174 | Add gantt diagram to demo page : after a1, 20h |
| 6dd74de | | | 175 | Add another diagram to demo page : doc1, after a1, 48h |
| 6dd74de | | | 176 | |
| 6dd74de | | | 177 | section Last section<br />multiline |
| 6dd74de | | | 178 | Describe gantt syntax : after doc1, 3d |
| 6dd74de | | | 179 | Add gantt diagram to demo page : 20h |
| 6dd74de | | | 180 | Add another diagram to demo page : 48h |
| 6dd74de | | | 181 | </pre> |
| 6dd74de | | | 182 | <hr /> |
| 6dd74de | | | 183 | |
| 6dd74de | | | 184 | <pre class="mermaid"> |
| 6dd74de | | | 185 | --- |
| 6dd74de | | | 186 | displayMode: compact |
| 6dd74de | | | 187 | --- |
| 6dd74de | | | 188 | gantt |
| 6dd74de | | | 189 | title GANTT compact |
| 6dd74de | | | 190 | dateFormat HH:mm:ss |
| 6dd74de | | | 191 | axisFormat %Hh%M |
| 6dd74de | | | 192 | |
| 6dd74de | | | 193 | section DB Clean |
| 6dd74de | | | 194 | Clean: 12:00:00, 10m |
| 6dd74de | | | 195 | Clean: 12:30:00, 12m |
| 6dd74de | | | 196 | Clean: 13:00:00, 8m |
| 6dd74de | | | 197 | Clean: 13:30:00, 9m |
| 6dd74de | | | 198 | Clean: 14:00:00, 13m |
| 6dd74de | | | 199 | Clean: 14:30:00, 10m |
| 6dd74de | | | 200 | Clean: 15:00:00, 11m |
| 6dd74de | | | 201 | |
| 6dd74de | | | 202 | section Sessions |
| 6dd74de | | | 203 | A: 12:00:00, 63m |
| 6dd74de | | | 204 | B: 12:30:00, 12m |
| 6dd74de | | | 205 | C: 13:05:00, 12m |
| 6dd74de | | | 206 | D: 13:06:00, 33m |
| 6dd74de | | | 207 | E: 13:15:00, 55m |
| 6dd74de | | | 208 | F: 13:20:00, 12m |
| 6dd74de | | | 209 | G: 13:32:00, 18m |
| 6dd74de | | | 210 | H: 13:50:00, 20m |
| 6dd74de | | | 211 | I: 14:10:00, 10m |
| 6dd74de | | | 212 | </pre> |
| 6dd74de | | | 213 | <hr /> |
| 6dd74de | | | 214 | |
| 6dd74de | | | 215 | <script> |
| 6dd74de | | | 216 | function ganttTestClick(a, b, c) { |
| 6dd74de | | | 217 | console.log('a:', a); |
| 6dd74de | | | 218 | console.log('b:', b); |
| 6dd74de | | | 219 | console.log('c:', c); |
| 6dd74de | | | 220 | } |
| 6dd74de | | | 221 | function testClick(nodeId) { |
| 6dd74de | | | 222 | console.log('clicked', nodeId); |
| 6dd74de | | | 223 | let originalBgColor = document.querySelector('body').style.backgroundColor; |
| 6dd74de | | | 224 | document.querySelector('body').style.backgroundColor = 'yellow'; |
| 6dd74de | | | 225 | setTimeout(function () { |
| 6dd74de | | | 226 | document.querySelector('body').style.backgroundColor = originalBgColor; |
| 6dd74de | | | 227 | }, 100); |
| 6dd74de | | | 228 | } |
| 6dd74de | | | 229 | </script> |
| 6dd74de | | | 230 | |
| 6dd74de | | | 231 | <script type="module"> |
| 6dd74de | | | 232 | import mermaid from './mermaid.esm.mjs'; |
| 6dd74de | | | 233 | mermaid.initialize({ |
| 6dd74de | | | 234 | logLevel: 3, |
| 6dd74de | | | 235 | securityLevel: 'loose', |
| 6dd74de | | | 236 | gantt: { axisFormat: '%m/%d/%Y' }, |
| 6dd74de | | | 237 | }); |
| 6dd74de | | | 238 | </script> |
| 6dd74de | | | 239 | </body> |
| 6dd74de | | | 240 | </html> |