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

feat(gantt): Add option 'tickInterval' for custom tick interval #3729

Merged
merged 1 commit into from
Nov 1, 2022
Merged

feat(gantt): Add option 'tickInterval' for custom tick interval #3729

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
126 changes: 126 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 @@ -341,4 +341,130 @@ describe('Gantt diagram', () => {
expect(descriptionEl.textContent).to.equal(expectedAccDescription);
});
});

it('should render a gantt diagram with tick is 15 minutes', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %H:%M
tickInterval 15minute
excludes weekends

section Section
A task : a1, 2022-10-03, 6h
Another task : after a1, 6h
section Another
Task in sec : 2022-10-03, 3h
another task : 3h
`,
{}
);
});

it('should render a gantt diagram with tick is 6 hours', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %d %H:%M
tickInterval 6hour
excludes weekends

section Section
A task : a1, 2022-10-03, 1d
Another task : after a1, 2d
section Another
Task in sec : 2022-10-04, 2d
another task : 2d
`,
{}
);
});

it('should render a gantt diagram with tick is 1 day', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1day
excludes weekends

section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{}
);
});

it('should render a gantt diagram with tick is 1 week', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1week
excludes weekends

section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{}
);
});

it('should render a gantt diagram with tick is 1 month', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1month
excludes weekends

section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{}
);
});

it('should render a gantt diagram with tick is 1 day and topAxis is true', () => {
imgSnapshotTest(
`
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
axisFormat %m-%d
tickInterval 1day
excludes weekends

section Section
A task : a1, 2022-10-01, 30d
Another task : after a1, 20d
section Another
Task in sec : 2022-10-20, 12d
another task : 24d
`,
{ gantt: { topAxis: true } }
);
});
});
12 changes: 12 additions & 0 deletions docs/gantt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,6 +230,18 @@ The following formatting strings are supported:

More info in: https://github.com/mbostock/d3/wiki/Time-Formatting

### Axis ticks

The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.

tickInterval 1day

The pattern is:

/^([1-9][0-9]*)(minute|hour|day|week|month)$/

More info in: <https://github.com/d3/d3-time#interval_every>

## Comments

Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
Expand Down
1 change: 1 addition & 0 deletions packages/mermaid/src/config.type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
sectionFontSize?: string | number;
numberSectionStyles?: number;
axisFormat?: string;
tickInterval?: string;
topAxis?: boolean;
}

Expand Down
13 changes: 13 additions & 0 deletions packages/mermaid/src/defaultConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -661,6 +661,19 @@ const config: Partial<MermaidConfig> = {
*/
axisFormat: '%Y-%m-%d',

/**
* | Parameter | Description | Type | Required | Values |
* | ------------ | ------------| ------ | -------- | ------- |
* | tickInterval | axis ticks | string | Optional | string |
*
* **Notes:**
*
* Pattern is /^([1-9][0-9]*)(minute|hour|day|week|month)$/
*
* Default value: undefined
*/
tickInterval: undefined,

/**
* | Parameter | Description | Type | Required | Values |
* | ----------- | ----------- | ------- | -------- | ----------- |
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 @@ -17,6 +17,7 @@ import {

let dateFormat = '';
let axisFormat = '';
let tickInterval = undefined;
let todayMarker = '';
let includes = [];
let excludes = [];
Expand Down Expand Up @@ -47,6 +48,7 @@ export const clear = function () {
rawTasks = [];
dateFormat = '';
axisFormat = '';
tickInterval = undefined;
todayMarker = '';
includes = [];
excludes = [];
Expand All @@ -65,6 +67,14 @@ export const getAxisFormat = function () {
return axisFormat;
};

export const setTickInterval = function (txt) {
tickInterval = txt;
};

export const getTickInterval = function () {
return tickInterval;
};

export const setTodayMarker = function (txt) {
todayMarker = txt;
};
Expand Down Expand Up @@ -647,6 +657,8 @@ export default {
topAxisEnabled,
setAxisFormat,
getAxisFormat,
setTickInterval,
getTickInterval,
setTodayMarker,
getTodayMarker,
setAccTitle,
Expand Down
54 changes: 54 additions & 0 deletions packages/mermaid/src/diagrams/gantt/ganttRenderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ import {
axisBottom,
axisTop,
timeFormat,
timeMinute,
timeHour,
timeDay,
timeWeek,
timeMonth,
} from 'd3';
import common from '../common/common';
import { getConfig } from '../../config';
Expand Down Expand Up @@ -495,6 +500,33 @@ export const draw = function (text, id, version, diagObj) {
.tickSize(-h + theTopPad + conf.gridLineStartPadding)
.tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));

const reTickInterval = /^([1-9][0-9]*)(minute|hour|day|week|month)$/;
const resultTickInterval = reTickInterval.exec(
diagObj.db.getTickInterval() || conf.tickInterval
);

if (resultTickInterval !== null) {
const every = resultTickInterval[1];
const interval = resultTickInterval[2];
switch (interval) {
case 'minute':
bottomXAxis.ticks(timeMinute.every(every));
break;
case 'hour':
bottomXAxis.ticks(timeHour.every(every));
break;
case 'day':
bottomXAxis.ticks(timeDay.every(every));
break;
case 'week':
bottomXAxis.ticks(timeWeek.every(every));
break;
case 'month':
bottomXAxis.ticks(timeMonth.every(every));
break;
}
}

svg
.append('g')
.attr('class', 'grid')
Expand All @@ -512,6 +544,28 @@ export const draw = function (text, id, version, diagObj) {
.tickSize(-h + theTopPad + conf.gridLineStartPadding)
.tickFormat(timeFormat(diagObj.db.getAxisFormat() || conf.axisFormat || '%Y-%m-%d'));

if (resultTickInterval !== null) {
const every = resultTickInterval[1];
const interval = resultTickInterval[2];
switch (interval) {
case 'minute':
topXAxis.ticks(timeMinute.every(every));
break;
case 'hour':
topXAxis.ticks(timeHour.every(every));
break;
case 'day':
topXAxis.ticks(timeDay.every(every));
break;
case 'week':
topXAxis.ticks(timeWeek.every(every));
break;
case 'month':
topXAxis.ticks(timeMonth.every(every));
break;
}
}

svg
.append('g')
.attr('class', 'grid')
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 @@ -82,6 +82,7 @@ that id.
"inclusiveEndDates" return 'inclusiveEndDates';
"topAxis" return 'topAxis';
"axisFormat"\s[^#\n;]+ return 'axisFormat';
"tickInterval"\s[^#\n;]+ return 'tickInterval';
"includes"\s[^#\n;]+ return 'includes';
"excludes"\s[^#\n;]+ return 'excludes';
"todayMarker"\s[^\n;]+ return 'todayMarker';
Expand Down Expand Up @@ -125,6 +126,7 @@ statement
| inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
| topAxis {yy.TopAxis();$$=$1.substr(8);}
| axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
| tickInterval {yy.setTickInterval($1.substr(13));$$=$1.substr(13);}
| 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);}
Expand Down
16 changes: 16 additions & 0 deletions packages/mermaid/src/docs/gantt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,22 @@ The following formatting strings are supported:

More info in: https://github.com/mbostock/d3/wiki/Time-Formatting

### Axis ticks

The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`.

```
tickInterval 1day
```

The pattern is:

```
/^([1-9][0-9]*)(minute|hour|day|week|month)$/
```

More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)

## Comments

Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
Expand Down