Add Custom Date Range to Gantt Charts Part 2

cypress/integration/rendering/gantt.spec.js

@@ -523,6 +523,108 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render when there is a dateRange', () => {
+    imgSnapshotTest(
+      `
+      ---
+      displayMode: compact
+      ---
+      gantt
+        title GANTT compact
+        dateFormat  HH:mm:ss
+        dateRange   12:30:00,13:30:00
+        axisFormat  %Hh%M
+        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
+    `,
+      {}
+    );
+  });
+
+  it('should render with a start-only dateRange', () => {
+    imgSnapshotTest(
+      `
+      ---
+      displayMode: compact
+      ---
+      gantt
+        title GANTT compact
+        dateFormat  HH:mm:ss
+        dateRange   12:30:00
+        axisFormat  %Hh%M
+        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
+    `,
+      {}
+    );
+  });
+
+  it('should render with an end-only dateRange', () => {
+    imgSnapshotTest(
+      `
+      ---
+      displayMode: compact
+      ---
+      gantt
+        title GANTT compact
+        dateFormat  HH:mm:ss
+        dateRange   ,13:30:00
+        axisFormat  %Hh%M
+        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
+    `,
+      {}
+    );
+  });
+
   // TODO: fix it
   //
   // This test is skipped deliberately

docs/community/contributing.md

@@ -357,6 +357,12 @@ it('should render forks and joins', () => {
 });
 ```
 
+**Verifying Snapshots**
+
+```sh
+pnpm e2e open cypress/snapshots
+```
+
 <!-- **_[TODO - running the tests against what is expected in development. ]_** -->
 
 <!-- **_[TODO - how to generate new screenshots]_** -->

docs/syntax/gantt.md

@@ -273,6 +273,36 @@ gantt
 
 > **Warning** > `millisecond` and `second` support was added in vMERMAID_RELEASE_VERSION
 
+### Date Ranges (v\<MERMAID_RELEASE_VERSION>+)
+
+The default behavior is to set the x range to include all of the data in the chart. You can override
+the range by specifying `dateRange`. Any tasks falling outside the specified range will be removed
+from the plot, and tasks overlapping with the boundaries will be truncated. The `dateRange` command
+should follow the `dateFormat` and use the same format.
+
+```mermaid-example
+gantt
+    dateFormat HH:mm
+    dateRange  13:00, 14:00
+    axisFormat %H:%M
+    Task A  : 13:24, 13:39
+    Task B  : 13:50, 14:35
+    Dropped : 14:01, 14:20
+```
+
+```mermaid
+gantt
+    dateFormat HH:mm
+    dateRange  13:00, 14:00
+    axisFormat %H:%M
+    Task A  : 13:24, 13:39
+    Task B  : 13:50, 14:35
+    Dropped : 14:01, 14:20
+```
+
+It is also possible to specify only a lower bound using `dateRange <date>` or only an upper bound
+using `dateRange ,<date>`.
+
 ## 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 preceeding YAML settings.

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

@@ -22,6 +22,9 @@
 dayjs.extend(dayjsAdvancedFormat);
 
 let dateFormat = '';
+let dateRange = '';
+let startDateRange = '';
+let endDateRange = '';
 let axisFormat = '';
 let tickInterval = undefined;
 let todayMarker = '';
@@ -51,6 +54,9 @@
   lastTaskID = undefined;
   rawTasks = [];
   dateFormat = '';
+  dateRange = '';
+  startDateRange = '';
+  endDateRange = '';
   axisFormat = '';
   displayMode = '';
   tickInterval = undefined;
@@ -101,6 +107,22 @@
   return inclusiveEndDates;
 };
 
+export const setDateRange = function (txt) {
+  dateRange = txt;
+
+  if (!dateRange) {
+    return;
+  }
+  const [startStr, endStr] = dateRange.split(',');
+
+  if (startStr) {
+    startDateRange = getStartDate(undefined, dateFormat, startStr);
+  }
+  if (endStr) {
+    endDateRange = getEndDate(undefined, dateFormat, endStr);
+  }
+};
+
 export const enableTopAxis = function () {
   topAxis = true;
 };
@@ -121,6 +143,34 @@
   return dateFormat;
 };
 
+export const getDateRange = function () {
+  return dateRange;
+};
+
+export const getStartRange = function () {
+  if (startDateRange) {
+    return startDateRange;
+  }
+  if (getTasks().length > 0) {
+    return getTasks().reduce((min, task) => {
+      return task.startTime < min ? task.startTime : min;
+    }, Infinity);
+  }
+  return '';
+};
+
+export const getEndRange = function () {
+  if (endDateRange) {
+    return endDateRange;
+  }
+  if (getTasks().length > 0) {
+    return getTasks().reduce((max, task) => {
+      return task.endTime > max ? task.endTime : max;
+    }, -Infinity);
+  }
+  return '';
+};
+
 export const setIncludes = function (txt) {
   includes = txt.toLowerCase().split(/[\s,]+/);
 };
@@ -158,7 +208,27 @@
     iterationCount++;
   }
 
-  tasks = rawTasks;
+  if (dateRange === '') {
+    tasks = rawTasks;
+
+    return tasks;
+  }
+
+  const filteredTasks = rawTasks.filter(function (task) {
+    if (
+      (startDateRange && task.endTime <= startDateRange) ||
+      (endDateRange && task.startTime >= endDateRange)
+    ) {
+      return false;
+    }
+    return true;
+  });
+
+  tasks = filteredTasks.map((task) => ({
+    ...task,
+    startTime: startDateRange && task.startTime < startDateRange ? startDateRange : task.startTime,
+    endTime: endDateRange && task.endTime > endDateRange ? endDateRange : task.endTime,
+  }));
 
   return tasks;
 };
@@ -284,6 +354,12 @@
     }
   }
 
+  if (str === '') {
+    // If only an end-only dateRange is provided, we determine the start date
+    // by comparing the start times of the tasks.
+    return getStartRange();
+  }
+
   // Check for actual date set
   let mDate = dayjs(str, dateFormat.trim(), true);
   if (mDate.isValid()) {
@@ -303,7 +379,7 @@
       d.getFullYear() < -10000 ||
       d.getFullYear() > 10000
     ) {
-      throw new Error('Invalid date:' + str);
+      throw new Error(`Invalid date: '${str}' with date format: '${dateFormat}'`);
     }
     return d;
   }
@@ -730,6 +806,10 @@
   setDateFormat,
   getDateFormat,
   enableInclusiveEndDates,
+  setDateRange,
+  getDateRange,
+  getStartRange,
+  getEndRange,
   endDatesAreInclusive,
   enableTopAxis,
   topAxisEnabled,

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.setDateRange('2019-02-01, 2019-03-01');
       ganttDb.setDisplayMode('compact');
       ganttDb.setTodayMarker('off');
       ganttDb.setExcludes('weekends 2019-02-06,friday');
@@ -50,6 +51,9 @@ describe('when using the ganttDb', function () {
       ${'getAccDescription'}    | ${''}
       ${'getDateFormat'}        | ${''}
       ${'getAxisFormat'}        | ${''}
+      ${'getDateRange'}         | ${''}
+      ${'getStartRange'}        | ${''}
+      ${'getEndRange'}          | ${''}
       ${'getTodayMarker'}       | ${''}
       ${'getExcludes'}          | ${[]}
       ${'getSections'}          | ${[]}
@@ -158,6 +162,42 @@ describe('when using the ganttDb', function () {
     expect(tasks[2].startTime).toEqual(new Date(2013, 0, 15));
     expect(tasks[2].endTime).toEqual(new Date(2013, 0, 17));
   });
+  it('should handle fixed date ranges', function () {
+    const DATE_FORMAT = 'YYYY-MM-DD';
+    ganttDb.setDateFormat(DATE_FORMAT);
+    ganttDb.setDateRange('2023-07-01, 2023-07-30');
+    ganttDb.addSection('testa1');
+    ganttDb.addTask('test1', 'id1,2013-07-01,2w');
+    ganttDb.addTask('test2', 'id2,2023-07-02,2w');
+    ganttDb.addSection('testa2');
+    ganttDb.addTask('test3', 'id3,after id2,2d');
+    ganttDb.addSection('testa3');
+    ganttDb.addTask('test4', 'id4,2023-06-25,2w');
+    ganttDb.addTask('test5', 'id5,2023-07-25,2w');
+
+    const tasks = ganttDb.getTasks();
+
+    expect(tasks.length).toEqual(4);
+    expect(tasks[0].id).toEqual('id2');
+    expect(tasks[0].task).toEqual('test2');
+    expect(tasks[0].startTime).toEqual(dayjs('2023-07-02', DATE_FORMAT, true).toDate());
+    expect(tasks[0].endTime).toEqual(dayjs('2023-07-16', DATE_FORMAT, true).toDate());
+
+    expect(tasks[1].id).toEqual('id3');
+    expect(tasks[1].task).toEqual('test3');
+    expect(tasks[1].startTime).toEqual(dayjs('2023-07-16', DATE_FORMAT, true).toDate());
+    expect(tasks[1].endTime).toEqual(dayjs('2023-07-18', DATE_FORMAT, true).toDate());
+
+    expect(tasks[2].id).toEqual('id4');
+    expect(tasks[2].task).toEqual('test4');
+    expect(tasks[2].startTime).toEqual(dayjs('2023-07-01', DATE_FORMAT, true).toDate());
+    expect(tasks[2].endTime).toEqual(dayjs('2023-07-09', DATE_FORMAT, true).toDate());
+
+    expect(tasks[3].id).toEqual('id5');
+    expect(tasks[3].task).toEqual('test5');
+    expect(tasks[3].startTime).toEqual(dayjs('2023-07-25', DATE_FORMAT, true).toDate());
+    expect(tasks[3].endTime).toEqual(dayjs('2023-07-30', DATE_FORMAT, true).toDate());
+  });
   it('should ignore weekends', function () {
     ganttDb.setDateFormat('YYYY-MM-DD');
     ganttDb.setExcludes('weekends 2019-02-06,friday');
@@ -436,6 +476,30 @@ describe('when using the ganttDb', function () {
   it('should reject dates with ridiculous years', function () {
     ganttDb.setDateFormat('YYYYMMDD');
     ganttDb.addTask('test1', 'id1,202304,1d');
-    expect(() => ganttDb.getTasks()).toThrowError('Invalid date:202304');
+    expect(() => ganttDb.getTasks()).toThrowError(
+      "Invalid date: '202304' with date format: 'YYYYMMDD'"
+    );
+  });
+
+  it.each(convert`
+    testName                   | dateRange                   | expStartRange   | expEndRange     | expTasksLength
+    ${'No dateRange'}          | ${''}                       | ${'2023-06-01'} | ${'2023-07-07'} | ${2}
+    ${'Wide dateRange'}        | ${'2023-01-01, 2023-12-31'} | ${'2023-01-01'} | ${'2023-12-31'} | ${2}
+    ${'Narrow dateRange'}      | ${'2023-06-29, 2023-06-30'} | ${'2023-06-29'} | ${'2023-06-30'} | ${0}
+    ${'Overlapping dateRange'} | ${'2023-06-06, 2023-07-03'} | ${'2023-06-06'} | ${'2023-07-03'} | ${2}
+    ${'Starting dateRange'}    | ${'2023-06-06'}             | ${'2023-06-06'} | ${'2023-07-07'} | ${2}
+    ${'Ending dateRange'}      | ${',2023-06-06'}            | ${'2023-06-01'} | ${'2023-06-06'} | ${1}
+  `)('$testName', ({ dateFormat, dateRange, expStartRange, expEndRange, expTasksLength }) => {
+    ganttDb.setDateFormat('YYYY-MM-DD');
+    expect('').toEqual(ganttDb.getDateRange());
+    ganttDb.setDateRange(dateRange);
+    ganttDb.addTask('task1', 't1, 2023-06-01, 2023-06-07');
+    ganttDb.addTask('task2', 't2, 2023-07-02, 2023-07-07');
+    const tasks = ganttDb.getTasks();
+    const startRange = ganttDb.getStartRange();
+    const endRange = ganttDb.getEndRange();
+    expect(expTasksLength).toEqual(tasks.length);
+    expect(dayjs(expStartRange, 'YYYY-MM-DD').toDate()).toEqual(startRange);
+    expect(dayjs(expEndRange, 'YYYY-MM-DD').toDate()).toEqual(endRange);
   });
 });