Merge branch 'develop' into convert-cypress-util-to-ts

cypress/integration/rendering/flowchart-v2.spec.js

@@ -695,6 +695,15 @@ A ~~~ B
       {}
     );
   });
+
+  it('4439: Should render the graph even if some images are missing', () => {
+    imgSnapshotTest(
+      `flowchart TD
+    B[<img>]
+    B-->C[<img>]`,
+      {}
+    );
+  });
   describe('Markdown strings flowchart (#4220)', () => {
     describe('html labels', () => {
       it('With styling and classes', () => {

cypress/integration/rendering/gantt.spec.js

@@ -414,6 +414,28 @@ describe('Gantt diagram', () => {
     );
   });
 
+  it('should render a gantt diagram with tick is 1 week, with the day starting on monday', () => {
+    imgSnapshotTest(
+      `
+      gantt
+        title A Gantt Diagram
+        dateFormat   YYYY-MM-DD
+        axisFormat   %m-%d
+        tickInterval 1week
+        weekday      monday
+        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(
       `

docs/syntax/gantt.md

@@ -257,6 +257,20 @@ The pattern is:
 
 More info in: <https://github.com/d3/d3-time#interval_every>
 
+Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
+
+```mermaid-example
+gantt
+  tickInterval 1week
+  weekday monday
+```
+
+```mermaid
+gantt
+  tickInterval 1week
+  weekday monday
+```
+
 ## 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/config.type.ts

@@ -1063,6 +1063,11 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
    *
    */
   displayMode?: string | "compact";
+  /**
+   * On which day a week-based interval should start
+   *
+   */
+  weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
 }
 /**
  * The object containing configurations specific for sequence diagrams

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -66,8 +66,11 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
       await Promise.all(
         [...images].map(
           (img) =>
-            new Promise((res) =>
+            new Promise((res) => {
-              img.addEventListener('load', function () {
+              /**
+               *
+               */
+              function setupImage() {
                 img.style.display = 'flex';
                 img.style.flexDirection = 'column';
 
@@ -82,8 +85,15 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
                   img.style.width = '100%';
                 }
                 res(img);
-              })
+              }
-            )
+              setTimeout(() => {
+                if (img.complete) {
+                  setupImage();
+                }
+              });
+              img.addEventListener('error', setupImage);
+              img.addEventListener('load', setupImage);
+            })
         )
       );
     }

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

@@ -37,6 +37,7 @@ const tags = ['active', 'done', 'crit', 'milestone'];
 let funs = [];
 let inclusiveEndDates = false;
 let topAxis = false;
+let weekday = 'sunday';
 
 // The serial order of the task in the script
 let lastOrder = 0;
@@ -66,6 +67,7 @@ export const clear = function () {
   lastOrder = 0;
   links = {};
   commonClear();
+  weekday = 'sunday';
 };
 
 export const setAxisFormat = function (txt) {
@@ -179,6 +181,14 @@ export const isInvalidDate = function (date, dateFormat, excludes, includes) {
   return excludes.includes(date.format(dateFormat.trim()));
 };
 
+export const setWeekday = function (txt) {
+  weekday = txt;
+};
+
+export const getWeekday = function () {
+  return weekday;
+};
+
 /**
  * TODO: fully document what this function does and what types it accepts
  *
@@ -759,6 +769,8 @@ export default {
   bindFunctions,
   parseDuration,
   isInvalidDate,
+  setWeekday,
+  getWeekday,
 };
 
 /**

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

@@ -13,7 +13,13 @@ import {
   timeMinute,
   timeHour,
   timeDay,
-  timeWeek,
+  timeMonday,
+  timeTuesday,
+  timeWednesday,
+  timeThursday,
+  timeFriday,
+  timeSaturday,
+  timeSunday,
   timeMonth,
 } from 'd3';
 import common from '../common/common.js';
@@ -24,6 +30,20 @@ export const setConf = function () {
   log.debug('Something is calling, setConf, remove the call');
 };
 
+/**
+ * This will map any day of the week that can be set in the `weekday` option to
+ * the corresponding d3-time function that is used to calculate the ticks.
+ */
+const mapWeekdayToTimeFunction = {
+  monday: timeMonday,
+  tuesday: timeTuesday,
+  wednesday: timeWednesday,
+  thursday: timeThursday,
+  friday: timeFriday,
+  saturday: timeSaturday,
+  sunday: timeSunday,
+};
+
 /**
  * For this issue:
  * https://github.com/mermaid-js/mermaid/issues/1618
@@ -561,6 +581,8 @@ export const draw = function (text, id, version, diagObj) {
     if (resultTickInterval !== null) {
       const every = resultTickInterval[1];
       const interval = resultTickInterval[2];
+      const weekday = diagObj.db.getWeekday() || conf.weekday;
+
       switch (interval) {
         case 'minute':
           bottomXAxis.ticks(timeMinute.every(every));
@@ -572,7 +594,7 @@ export const draw = function (text, id, version, diagObj) {
           bottomXAxis.ticks(timeDay.every(every));
           break;
         case 'week':
-          bottomXAxis.ticks(timeWeek.every(every));
+          bottomXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
           break;
         case 'month':
           bottomXAxis.ticks(timeMonth.every(every));
@@ -600,6 +622,8 @@ export const draw = function (text, id, version, diagObj) {
       if (resultTickInterval !== null) {
         const every = resultTickInterval[1];
         const interval = resultTickInterval[2];
+        const weekday = diagObj.db.getWeekday() || conf.weekday;
+
         switch (interval) {
           case 'minute':
             topXAxis.ticks(timeMinute.every(every));
@@ -611,7 +635,7 @@ export const draw = function (text, id, version, diagObj) {
             topXAxis.ticks(timeDay.every(every));
             break;
           case 'week':
-            topXAxis.ticks(timeWeek.every(every));
+            topXAxis.ticks(mapWeekdayToTimeFunction[weekday].every(every));
             break;
           case 'month':
             topXAxis.ticks(timeMonth.every(every));

packages/mermaid/src/diagrams/gantt/parser/gantt.jison

@@ -77,24 +77,31 @@ that id.
 <click>[\s\n]           this.popState();
 <click>[^\s\n]*         return 'click';
 
-"gantt"                     return 'gantt';
+"gantt"                         return 'gantt';
-"dateFormat"\s[^#\n;]+      return 'dateFormat';
+"dateFormat"\s[^#\n;]+          return 'dateFormat';
-"inclusiveEndDates"         return 'inclusiveEndDates';
+"inclusiveEndDates"             return 'inclusiveEndDates';
-"topAxis"                   return 'topAxis';
+"topAxis"                       return 'topAxis';
-"axisFormat"\s[^#\n;]+      return 'axisFormat';
+"axisFormat"\s[^#\n;]+          return 'axisFormat';
-"tickInterval"\s[^#\n;]+    return 'tickInterval';
+"tickInterval"\s[^#\n;]+        return 'tickInterval';
-"includes"\s[^#\n;]+        return 'includes';
+"includes"\s[^#\n;]+            return 'includes';
-"excludes"\s[^#\n;]+        return 'excludes';
+"excludes"\s[^#\n;]+            return 'excludes';
-"todayMarker"\s[^\n;]+      return 'todayMarker';
+"todayMarker"\s[^\n;]+          return 'todayMarker';
-\d\d\d\d"-"\d\d"-"\d\d      return 'date';
+weekday\s+monday                return 'weekday_monday'
-"title"\s[^#\n;]+           return 'title';
+weekday\s+tuesday               return 'weekday_tuesday'
-"accDescription"\s[^#\n;]+  return 'accDescription'
+weekday\s+wednesday             return 'weekday_wednesday'
-"section"\s[^#:\n;]+        return 'section';
+weekday\s+thursday              return 'weekday_thursday'
-[^#:\n;]+                   return 'taskTxt';
+weekday\s+friday                return 'weekday_friday'
-":"[^#\n;]+                 return 'taskData';
+weekday\s+saturday              return 'weekday_saturday'
-":"                         return ':';
+weekday\s+sunday                return 'weekday_sunday'
-<<EOF>>                     return 'EOF';
+\d\d\d\d"-"\d\d"-"\d\d          return 'date';
-.                           return 'INVALID';
+"title"\s[^#\n;]+               return 'title';
+"accDescription"\s[^#\n;]+      return 'accDescription'
+"section"\s[^#:\n;]+            return 'section';
+[^#:\n;]+                       return 'taskTxt';
+":"[^#\n;]+                     return 'taskData';
+":"                             return ':';
+<<EOF>>                         return 'EOF';
+.                               return 'INVALID';
 
 /lex
 
@@ -121,6 +128,16 @@ line
 	| EOF { $$=[];}
 	;
 
+weekday
+  : weekday_monday { yy.setWeekday("monday");}
+  | weekday_tuesday { yy.setWeekday("tuesday");}
+  | weekday_wednesday { yy.setWeekday("wednesday");}
+  | weekday_thursday { yy.setWeekday("thursday");}
+  | weekday_friday { yy.setWeekday("friday");}
+  | weekday_saturday { yy.setWeekday("saturday");}
+  | weekday_sunday { yy.setWeekday("sunday");}
+  ;
+
 statement
   : dateFormat {yy.setDateFormat($1.substr(11));$$=$1.substr(11);}
   | inclusiveEndDates {yy.enableInclusiveEndDates();$$=$1.substr(18);}
@@ -130,6 +147,7 @@ statement
   | 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);}
+  | weekday
   | title {yy.setDiagramTitle($1.substr(6));$$=$1.substr(6);}
   | acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
   | acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }

packages/mermaid/src/diagrams/gantt/parser/gantt.spec.js

@@ -180,4 +180,12 @@ row2`;
     expect(ganttDb.getAccTitle()).toBe(expectedTitle);
     expect(ganttDb.getAccDescription()).toBe(expectedAccDescription);
   });
+
+  it.each(['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'])(
+    'should allow for setting the starting weekday to %s for tick interval',
+    (day) => {
+      parser.parse(`gantt\nweekday ${day}`);
+      expect(ganttDb.getWeekday()).toBe(day);
+    }
+  );
 });

packages/mermaid/src/docs/syntax/gantt.md

@@ -189,6 +189,14 @@ The pattern is:
 
 More info in: [https://github.com/d3/d3-time#interval_every](https://github.com/d3/d3-time#interval_every)
 
+Week-based `tickInterval`s start the week on sunday by default. If you wish to specify another weekday on which the `tickInterval` should start, use the `weekday` option:
+
+```mermaid-example
+gantt
+  tickInterval 1week
+  weekday monday
+```
+
 ## 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/schemas/config.schema.yaml

@@ -1455,6 +1455,7 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
       - axisFormat
       - useMaxWidth
       - topAxis
+      - weekday
     properties:
       titleTopMargin:
         $ref: '#/$defs/GitGraphDiagramConfig/properties/titleTopMargin'
@@ -1544,6 +1545,20 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
         default: ''
         # Allow any string for typescript backwards compatibility (fix in Mermaid v10)
         tsType: 'string | "compact"'
+      weekday:
+        description: |
+          On which day a week-based interval should start
+        type: string
+        tsType: '"monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"'
+        enum:
+          - monday
+          - tuesday
+          - wednesday
+          - thursday
+          - friday
+          - saturday
+          - sunday
+        default: sunday
 
   SequenceDiagramConfig:
     title: Sequence Diagram Config