From 8f340094d9913a01637f5ccd40484cccb1bdfebc Mon Sep 17 00:00:00 2001 From: Thomas Ingram Date: Sun, 27 Aug 2023 15:57:17 +1000 Subject: [PATCH 1/2] Added support for millisecond and second to gantt tickInterval --- packages/mermaid/src/config.type.ts | 2 +- .../mermaid/src/diagrams/gantt/ganttRenderer.js | 16 +++++++++++++++- packages/mermaid/src/docs/syntax/gantt.md | 2 +- packages/mermaid/src/schemas/config.schema.yaml | 4 ++-- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index a4bf6cca8..ca55d9af4 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -1048,7 +1048,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * Pattern is: * * ```javascript - * /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + * /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/ * ``` * */ diff --git a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js index 522f59e2c..935ecc928 100644 --- a/packages/mermaid/src/diagrams/gantt/ganttRenderer.js +++ b/packages/mermaid/src/diagrams/gantt/ganttRenderer.js @@ -10,6 +10,8 @@ import { axisBottom, axisTop, timeFormat, + timeMillisecond, + timeSecond, timeMinute, timeHour, timeDay, @@ -573,7 +575,7 @@ 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]\d*)(minute|hour|day|week|month)$/; + const reTickInterval = /^([1-9]\d*)(millisecond|second|minute|hour|day|week|month)$/; const resultTickInterval = reTickInterval.exec( diagObj.db.getTickInterval() || conf.tickInterval ); @@ -584,6 +586,12 @@ export const draw = function (text, id, version, diagObj) { const weekday = diagObj.db.getWeekday() || conf.weekday; switch (interval) { + case 'millisecond': + bottomXAxis.ticks(timeMillisecond.every(every)); + break; + case 'second': + bottomXAxis.ticks(timeSecond.every(every)); + break; case 'minute': bottomXAxis.ticks(timeMinute.every(every)); break; @@ -625,6 +633,12 @@ export const draw = function (text, id, version, diagObj) { const weekday = diagObj.db.getWeekday() || conf.weekday; switch (interval) { + case 'millisecond': + topXAxis.ticks(timeMillisecond.every(every)); + break; + case 'second': + topXAxis.ticks(timeSecond.every(every)); + break; case 'minute': topXAxis.ticks(timeMinute.every(every)); break; diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 6ddd011f6..2d7af6a26 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -184,7 +184,7 @@ tickInterval 1day The pattern is: ```javascript -/^([1-9][0-9]*)(minute|hour|day|week|month)$/; +/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/; ``` More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every) diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index c0d239fb6..6f01d5715 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -1524,10 +1524,10 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file) Pattern is: ```javascript - /^([1-9][0-9]*)(minute|hour|day|week|month)$/ + /^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/ ``` type: string - pattern: ^([1-9][0-9]*)(minute|hour|day|week|month)$ + pattern: ^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$ topAxis: description: | When this flag is set, date labels will be added to the top of the chart From 4efac6721dc3660878df997811a3a3ff6064ba66 Mon Sep 17 00:00:00 2001 From: Thomas Ingram Date: Mon, 28 Aug 2023 20:17:15 +1000 Subject: [PATCH 2/2] Added missing integration tests and release version in docs. --- cypress/integration/rendering/gantt.spec.js | 42 +++++++++++++++++++++ docs/syntax/gantt.md | 6 +-- packages/mermaid/src/docs/syntax/gantt.md | 6 ++- 3 files changed, 49 insertions(+), 5 deletions(-) diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js index 33d3ac9e1..7c1690952 100644 --- a/cypress/integration/rendering/gantt.spec.js +++ b/cypress/integration/rendering/gantt.spec.js @@ -330,6 +330,48 @@ describe('Gantt diagram', () => { ); }); + it('should render a gantt diagram with tick is 2 milliseconds', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat SSS + axisFormat %Lms + tickInterval 2millisecond + excludes weekends + + section Section + A task : a1, 000, 6ms + Another task : after a1, 6ms + section Another + Task in sec : a2, 006, 3ms + another task : 3ms + `, + {} + ); + }); + + it('should render a gantt diagram with tick is 2 seconds', () => { + imgSnapshotTest( + ` + gantt + title A Gantt Diagram + dateFormat ss + axisFormat %Ss + tickInterval 2second + excludes weekends + + section Section + A task : a1, 00, 6s + Another task : after a1, 6s + section Another + Task in sec : 06, 3s + another task : 3s + `, + {} + ); + }); + it('should render a gantt diagram with tick is 15 minutes', () => { imgSnapshotTest( ` diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 8ad438fb1..33c2740e5 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -241,7 +241,7 @@ The following formatting strings are supported: More info in: -### Axis ticks +### Axis ticks (v10.3.0+) The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`. @@ -252,7 +252,7 @@ tickInterval 1day The pattern is: ```javascript -/^([1-9][0-9]*)(minute|hour|day|week|month)$/; +/^([1-9][0-9]*)(millisecond|second|minute|hour|day|week|month)$/; ``` More info in: @@ -271,7 +271,7 @@ gantt weekday monday ``` -Support: v10.3.0+ +> **Warning** > `millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION ## Output in compact mode diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 2d7af6a26..a0cebc560 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -173,7 +173,7 @@ The following formatting strings are supported: More info in: [https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format](https://github.com/d3/d3-time-format/tree/v4.0.0#locale_format) -### Axis ticks +### Axis ticks (v10.3.0+) The default output ticks are auto. You can custom your `tickInterval`, like `1day` or `1week`. @@ -197,7 +197,9 @@ gantt weekday monday ``` -Support: v10.3.0+ +```warning +`millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION +``` ## Output in compact mode