Implement repeating tasks

cypress/integration/rendering/gantt.spec.js

@@ -435,4 +435,37 @@ describe('Gantt diagram', () => {
       { gantt: { topAxis: true } }
     );
   });
+
+  it('should render when compact is true', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title GANTT compact
+        dateFormat  HH:mm:ss
+        axisFormat  %Hh%M
+        compact
+
+        section DB Clean
+        Clean: 12:00:00, 10m
+        Clean: 12:30:00, 12m
+        Clean: 13:00:00, 8m
+        Clean: 13:30:00, 9m
+        Clean: 14:00:00, 13m
+        Clean: 14:30:00, 10m
+        Clean: 15:00:00, 11m
+
+        section Sessions
+        A: 12:00:00, 63m
+        B: 12:30:00, 12m
+        C: 13:05:00, 12m
+        D: 13:06:00, 33m
+        E: 13:15:00, 55m
+        F: 13:20:00, 12m
+        G: 13:32:00, 18m
+        H: 13:50:00, 20m
+        I: 14:10:00, 10m
+    `,
+      {}
+    );
+  });
 });

demos/gantt.html

@@ -78,7 +78,7 @@ <h1>Gantt chart diagram demos</h1>
     axisFormat %d/%m
     todayMarker off
     section Section1
-    Today: 1, -01:00, 5min
+    Today: 1, 08-08-09-01:00, 5min
     </pre>
     <hr />
 
@@ -89,7 +89,7 @@ <h1>Gantt chart diagram demos</h1>
     axisFormat %d/%m
     todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
     section Section1
-    Today: 1, -01:00, 5min
+    Today: 1, 08-08-09-01:00, 5min
     </pre>
     <hr />
 
@@ -166,6 +166,35 @@ <h1>Gantt chart diagram demos</h1>
     </pre>
     <hr />
 
+    <pre class="mermaid">
+    gantt
+    title GANTT compact
+    dateFormat  HH:mm:ss
+    axisFormat  %Hh%M
+    compact
+
+    section DB Clean
+    Clean: 12:00:00, 10m
+    Clean: 12:30:00, 12m
+    Clean: 13:00:00, 8m
+    Clean: 13:30:00, 9m
+    Clean: 14:00:00, 13m
+    Clean: 14:30:00, 10m
+    Clean: 15:00:00, 11m
+
+    section Sessions
+    A: 12:00:00, 63m
+    B: 12:30:00, 12m
+    C: 13:05:00, 12m
+    D: 13:06:00, 33m
+    E: 13:15:00, 55m
+    F: 13:20:00, 12m
+    G: 13:32:00, 18m
+    H: 13:50:00, 20m
+    I: 14:10:00, 10m
+    </pre>
+    <hr />
+
     <script>
       function ganttTestClick(a, b, c) {
         console.log('a:', a);

docs/config/setup/modules/defaultConfig.md

@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:2093](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2093)
+[defaultConfig.ts:2107](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L2107)
 
 ---
 

docs/config/setup/modules/mermaidAPI.md

@@ -88,14 +88,15 @@ const config = {
     numberSectionStyles: 4,
     axisFormat: '%Y-%m-%d',
     topAxis: false,
+    compact: false,
   },
 };
 mermaid.initialize(config);
 ```
 
 #### Defined in
 
-[mermaidAPI.ts:659](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L659)
+[mermaidAPI.ts:660](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L660)
 
 ## Functions
 

docs/syntax/gantt.md

@@ -257,9 +257,37 @@ The pattern is:
 
 More info in: <https://github.com/d3/d3-time#interval_every>
 
+## 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 adding the compact flag to the gantt chart.
+
+```mermaid-example
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    compact
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    compact
+
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :a2, 2014-01-20, 25d
+    Another one      :a3, 2014-02-10, 20d
+```
+
 ## 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
+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.
 
 ```mermaid-example
 gantt

packages/mermaid/src/config.type.ts

@@ -335,6 +335,7 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
   axisFormat?: string;
   tickInterval?: string;
   topAxis?: boolean;
+  compact?: boolean;
 }
 
 export interface SequenceDiagramConfig extends BaseDiagramConfig {

packages/mermaid/src/defaultConfig.ts

@@ -685,6 +685,20 @@ const config: Partial<MermaidConfig> = {
      */
     tickInterval: undefined,
 
+    /**
+     * | Parameter | Description               | Type    | Required | Values      |
+     * | --------- | ------------------------- | ------- | -------- | ----------- |
+     * | compact   | displays in compact mode  | boolean | 4        | True, False |
+     *
+     * **Notes:**
+     *
+     * When this flag is set to true, it allows multiple tasks to be displayed on the same
+     * row.
+     *
+     * Default value: false
+     */
+    compact: false,
+
     /**
      * | Parameter   | Description | Type    | Required | Values      |
      * | ----------- | ----------- | ------- | -------- | ----------- |

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

@@ -36,6 +36,7 @@ const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
+let compact = false;
 
 // The serial order of the task in the script
 let lastOrder = 0;
@@ -61,6 +62,7 @@ export const clear = function () {
   excludes = [];
   inclusiveEndDates = false;
   topAxis = false;
+  compact = false;
   lastOrder = 0;
   links = {};
   commonClear();
@@ -110,6 +112,14 @@ export const topAxisEnabled = function () {
   return topAxis;
 };
 
+export const enableCompact = function () {
+  compact = true;
+};
+
+export const compactEnabled = function () {
+  return compact;
+};
+
 export const getDateFormat = function () {
   return dateFormat;
 };
@@ -143,11 +153,11 @@ export const getSections = function () {
 };
 
 export const getTasks = function () {
-  let allItemsPricessed = compileTasks();
+  let allItemsProcessed = compileTasks();
   const maxDepth = 10;
   let iterationCount = 0;
-  while (!allItemsPricessed && iterationCount < maxDepth) {
-    allItemsPricessed = compileTasks();
+  while (!allItemsProcessed && iterationCount < maxDepth) {
+    allItemsProcessed = compileTasks();
     iterationCount++;
   }
 
@@ -713,6 +723,8 @@ export default {
   getAxisFormat,
   setTickInterval,
   getTickInterval,
+  enableCompact,
+  compactEnabled,
   setTodayMarker,
   getTodayMarker,
   setAccTitle,

packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts

@@ -34,6 +34,7 @@ describe('when using the ganttDb', function () {
     beforeEach(function () {
       ganttDb.setDateFormat('YYYY-MM-DD');
       ganttDb.enableInclusiveEndDates();
+      ganttDb.enableCompact();
       ganttDb.setTodayMarker('off');
       ganttDb.setExcludes('weekends 2019-02-06,friday');
       ganttDb.addSection('weekends skip test');
@@ -53,6 +54,7 @@ describe('when using the ganttDb', function () {
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
       ${'endDatesAreInclusive'} | ${false}
+      ${'compactEnabled'}       | ${false}
     `)('should clear $fn', ({ fn, expected }) => {
       expect(ganttDb[fn]()).toEqual(expected);
     });