Merge pull request #4778 from vertxxyz/feature/4771_tickInterval-support-for-sec-and-ms

Added support for millisecond and second to gantt tickInterval

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(
       `

docs/syntax/gantt.md

@@ -241,7 +241,7 @@ The following formatting strings are supported:
 
 More info in: <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`.
 
@@ -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: <https://github.com/d3/d3-time#interval_every>
@@ -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
 

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)$/
    * ```
    *
    */

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;

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`.
 
@@ -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)
@@ -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
 

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