Skip to content

Commit b648880

Browse files
committed
Add Gantt support for 'today'
Feature request: #2853
1 parent 4bb75e5 commit b648880

File tree

5 files changed

+105
-1
lines changed

5 files changed

+105
-1
lines changed

docs/syntax/gantt.md

+65
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,71 @@ gantt
338338

339339
> **Warning** > `millisecond` and `second` support was added in v10.3.0
340340
341+
### Changing Today
342+
343+
By default, the today marker uses the current date. Use `today` to set a custom date, using the `dateFormat`.
344+
345+
```mermaid-example
346+
gantt
347+
title A Gantt Diagram With Custom Today
348+
dateFormat YYYY-MM-DD
349+
today 2024-01-20
350+
section Section
351+
A task :a1, 2024-01-01, 30d
352+
Another task :after a1, 20d
353+
```
354+
355+
```mermaid
356+
gantt
357+
title A Gantt Diagram With Custom Today
358+
dateFormat YYYY-MM-DD
359+
today 2024-01-20
360+
section Section
361+
A task :a1, 2024-01-01, 30d
362+
Another task :after a1, 20d
363+
```
364+
365+
You can also use a duration:
366+
367+
```mermaid-example
368+
---
369+
displayMode: compact
370+
---
371+
gantt
372+
title A Gantt Diagram With Custom Today (Duration)
373+
dateFormat x
374+
axisFormat %L ms
375+
today 18ms
376+
todayMarker stroke-width:2px,stroke:#FF0,opacity:0.5
377+
378+
section Graphics
379+
Draw 1: a1, 0, 28ms
380+
Draw 2: after a1, 20ms
381+
382+
section Compute
383+
Kernel: b1, 20, 12ms
384+
```
385+
386+
```mermaid
387+
---
388+
displayMode: compact
389+
---
390+
gantt
391+
title A Gantt Diagram With Custom Today (Duration)
392+
dateFormat x
393+
axisFormat %L ms
394+
today 18ms
395+
todayMarker stroke-width:2px,stroke:#FF0,opacity:0.5
396+
397+
section Graphics
398+
Draw 1: a1, 0, 28ms
399+
Draw 2: after a1, 20ms
400+
401+
section Compute
402+
Kernel: b1, 20, 12ms
403+
```
404+
405+
341406
## Output in compact mode
342407

343408
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.

packages/mermaid/src/diagrams/gantt/ganttDb.js

+12
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ let dateFormat = '';
2626
let axisFormat = '';
2727
let tickInterval = undefined;
2828
let todayMarker = '';
29+
let today = '';
2930
let includes = [];
3031
let excludes = [];
3132
let links = new Map();
@@ -57,6 +58,7 @@ export const clear = function () {
5758
displayMode = '';
5859
tickInterval = undefined;
5960
todayMarker = '';
61+
today = '';
6062
includes = [];
6163
excludes = [];
6264
inclusiveEndDates = false;
@@ -92,6 +94,14 @@ export const getTodayMarker = function () {
9294
return todayMarker;
9395
};
9496

97+
export const setToday = function (txt) {
98+
today = txt;
99+
};
100+
101+
export const getToday = function () {
102+
return today;
103+
};
104+
95105
export const setDateFormat = function (txt) {
96106
dateFormat = txt;
97107
};
@@ -766,6 +776,8 @@ export default {
766776
getTickInterval,
767777
setTodayMarker,
768778
getTodayMarker,
779+
setToday,
780+
getToday,
769781
setAccTitle,
770782
getAccTitle,
771783
setDiagramTitle,

packages/mermaid/src/diagrams/gantt/ganttRenderer.js

+18-1
Original file line numberDiff line numberDiff line change
@@ -756,7 +756,24 @@ export const draw = function (text, id, version, diagObj) {
756756
}
757757

758758
const todayG = svg.append('g').attr('class', 'today');
759-
const today = new Date();
759+
760+
let today = new Date();
761+
const dateFormat = diagObj.db.getDateFormat();
762+
const dbToday = diagObj.db.getToday();
763+
let customToday = dayjs(dbToday, dateFormat.trim(), true);
764+
if (customToday.isValid()) {
765+
today = customToday.toDate();
766+
} else {
767+
const [durationValue, durationUnit] = diagObj.db.parseDuration(dbToday);
768+
if (!Number.isNaN(durationValue)) {
769+
// let dayjs do the math to support 'ms' and such
770+
customToday = dayjs(0).add(durationValue, durationUnit);
771+
if (customToday.isValid()) {
772+
today = customToday;
773+
}
774+
}
775+
}
776+
760777
const todayLine = todayG.append('line');
761778

762779
todayLine

packages/mermaid/src/diagrams/gantt/parser/gantt.jison

+2
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ that id.
7777
"includes"\s[^#\n;]+ return 'includes';
7878
"excludes"\s[^#\n;]+ return 'excludes';
7979
"todayMarker"\s[^\n;]+ return 'todayMarker';
80+
"today"\s[^\n;]+ return 'today';
8081
weekday\s+monday return 'weekday_monday'
8182
weekday\s+tuesday return 'weekday_tuesday'
8283
weekday\s+wednesday return 'weekday_wednesday'
@@ -144,6 +145,7 @@ statement
144145
| excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
145146
| includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
146147
| todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
148+
| today {yy.setToday($1.substr(6));$$=$1.substr(6);}
147149
| weekday
148150
| weekend
149151
| title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}

packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js

+8
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,14 @@ describe('when parsing a gantt diagram it', function () {
4949
expect(parserFnConstructor(str)).not.toThrow();
5050
expect(ganttDb.setTodayMarker).toHaveBeenCalledWith('off');
5151
});
52+
it('should handle a today definition', function () {
53+
spyOn(ganttDb, 'setToday');
54+
const str =
55+
'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\nexcludes weekdays 2019-02-01\ntoday 2019-02-04';
56+
57+
expect(parserFnConstructor(str)).not.toThrow();
58+
expect(ganttDb.setToday).toHaveBeenCalledWith('2019-02-04');
59+
});
5260
it('should handle a section definition', function () {
5361
const str =
5462
'gantt\n' +

0 commit comments

Comments
 (0)