Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/2853 gantt today #5717

Closed
wants to merge 1 commit into from
Closed

Feature/2853 gantt today #5717

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions cypress/integration/rendering/gantt.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,36 @@ describe('Gantt diagram', () => {
);
});

it('should position a dateFormat-based today marker', () => {
imgSnapshotTest(
`
gantt
title Reposition a today marker (using dateFormat)
dateFormat YYYY-MM-DD
today 2024-01-18
section Project
A task :a1, 2024-01-01, 30d
Another task :after a1, 20d
`,
{}
);
});

it('should position a duration-based today marker', () => {
imgSnapshotTest(
`
gantt
title Reposition a today marker (using duration)
dateFormat x
axisFormat %L ms
today 19ms
section Section1
A task: Draw 1: a1, 0, 28ms
`,
{}
);
});

it('should handle milliseconds', () => {
imgSnapshotTest(
`
Expand Down
60 changes: 60 additions & 0 deletions docs/syntax/gantt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,66 @@ gantt

> **Warning** > `millisecond` and `second` support was added in v10.3.0

### Changing Today (v\<MERMAID_RELEASE_VERSION>+)

By default, the today marker uses the current date. Use `today` to set a custom date, using the `dateFormat`.

```mermaid-example
gantt
title A Gantt Diagram With Custom Today
dateFormat YYYY-MM-DD
today 2024-01-20
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1, 20d
```

```mermaid
gantt
title A Gantt Diagram With Custom Today
dateFormat YYYY-MM-DD
today 2024-01-20
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1, 20d
```

You can also use a duration:

```mermaid-example
---
displayMode: compact
---
gantt
title A Gantt Diagram With Custom Today (Duration)
dateFormat x
axisFormat %L ms
today 18ms
todayMarker stroke-width:2px,stroke:#FF0,opacity:0.5
section Graphics
Draw 1: a1, 0, 28ms
Draw 2: after a1, 20ms
section Compute
Kernel: b1, 20, 12ms
```

```mermaid
---
displayMode: compact
---
gantt
title A Gantt Diagram With Custom Today (Duration)
dateFormat x
axisFormat %L ms
today 18ms
todayMarker stroke-width:2px,stroke:#FF0,opacity:0.5
section Graphics
Draw 1: a1, 0, 28ms
Draw 2: after a1, 20ms
section Compute
Kernel: b1, 20, 12ms
```

## Output in compact mode

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.
Expand Down
12 changes: 12 additions & 0 deletions packages/mermaid/src/diagrams/gantt/ganttDb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ let dateFormat = '';
let axisFormat = '';
let tickInterval = undefined;
let todayMarker = '';
let today = '';
let includes = [];
let excludes = [];
let links = new Map();
Expand Down Expand Up @@ -57,6 +58,7 @@ export const clear = function () {
displayMode = '';
tickInterval = undefined;
todayMarker = '';
today = '';
includes = [];
excludes = [];
inclusiveEndDates = false;
Expand Down Expand Up @@ -92,6 +94,14 @@ export const getTodayMarker = function () {
return todayMarker;
};

export const setToday = function (txt) {
today = txt;
};

export const getToday = function () {
return today;
};

export const setDateFormat = function (txt) {
dateFormat = txt;
};
Expand Down Expand Up @@ -766,6 +776,8 @@ export default {
getTickInterval,
setTodayMarker,
getTodayMarker,
setToday,
getToday,
setAccTitle,
getAccTitle,
setDiagramTitle,
Expand Down
19 changes: 18 additions & 1 deletion packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -756,7 +756,24 @@ export const draw = function (text, id, version, diagObj) {
}

const todayG = svg.append('g').attr('class', 'today');
const today = new Date();

let today = new Date();
const dateFormat = diagObj.db.getDateFormat();
const dbToday = diagObj.db.getToday();
let customToday = dayjs(dbToday, dateFormat.trim(), true);
if (customToday.isValid()) {
today = customToday.toDate();
} else {
const [durationValue, durationUnit] = diagObj.db.parseDuration(dbToday);
if (!Number.isNaN(durationValue)) {
// let dayjs do the math to support 'ms' and such
customToday = dayjs(0).add(durationValue, durationUnit);
if (customToday.isValid()) {
today = customToday;
}
}
}

const todayLine = todayG.append('line');

todayLine
Expand Down
2 changes: 2 additions & 0 deletions packages/mermaid/src/diagrams/gantt/parser/gantt.jison
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ that id.
"includes"\s[^#\n;]+ return 'includes';
"excludes"\s[^#\n;]+ return 'excludes';
"todayMarker"\s[^\n;]+ return 'todayMarker';
"today"\s[^\n;]+ return 'today';
weekday\s+monday return 'weekday_monday'
weekday\s+tuesday return 'weekday_tuesday'
weekday\s+wednesday return 'weekday_wednesday'
Expand Down Expand Up @@ -144,6 +145,7 @@ statement
| excludes {yy.setExcludes($1.substr(9));$$=$1.substr(9);}
| includes {yy.setIncludes($1.substr(9));$$=$1.substr(9);}
| todayMarker {yy.setTodayMarker($1.substr(12));$$=$1.substr(12);}
| today {yy.setToday($1.substr(6));$$=$1.substr(6);}
| weekday
| weekend
| title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
Expand Down
8 changes: 8 additions & 0 deletions packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,14 @@ describe('when parsing a gantt diagram it', function () {
expect(parserFnConstructor(str)).not.toThrow();
expect(ganttDb.setTodayMarker).toHaveBeenCalledWith('off');
});
it('should handle a today definition', function () {
spyOn(ganttDb, 'setToday');
const str =
'gantt\ndateFormat yyyy-mm-dd\ntitle Adding gantt diagram functionality to mermaid\nexcludes weekdays 2019-02-01\ntoday 2019-02-04';

expect(parserFnConstructor(str)).not.toThrow();
expect(ganttDb.setToday).toHaveBeenCalledWith('2019-02-04');
});
it('should handle a section definition', function () {
const str =
'gantt\n' +
Expand Down
33 changes: 33 additions & 0 deletions packages/mermaid/src/docs/syntax/gantt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,39 @@ gantt
`millisecond` and `second` support was added in v10.3.0
```

### Changing Today (v\<MERMAID_RELEASE_VERSION>+)

By default, the today marker uses the current date. Use `today` to set a custom date, using the `dateFormat`.

```mermaid-example
gantt
title A Gantt Diagram With Custom Today
dateFormat YYYY-MM-DD
today 2024-01-20
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1, 20d
```

You can also use a duration:

```mermaid-example
---
displayMode: compact
---
gantt
title A Gantt Diagram With Custom Today (Duration)
dateFormat x
axisFormat %L ms
today 18ms
todayMarker stroke-width:2px,stroke:#FF0,opacity:0.5
section Graphics
Draw 1: a1, 0, 28ms
Draw 2: after a1, 20ms
section Compute
Kernel: b1, 20, 12ms
```

## Output in compact mode

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.
Expand Down
Loading