Merge pull request #2423 from qdechochen/develop

feat: added includes; added excludes date background

dist/index.html

@@ -21,6 +21,22 @@
 
   <hr />
 
+  <div class="mermaid">
+    gantt
+      title Airworks roadmap
+      dateFormat YYYY-MM-DD
+      axisFormat %m-%d %a
+      excludes	weekends, 2021-10-01,2021-10-04,2021-10-05,2021-10-06,2021-10-07
+      includes 2021-10-09
+        
+      section Airworks 3.4.1
+      开发	:b, 2021-10-07, 5d
+      测试	:after b, 4d
+      OK  :milestore
+      section Airworks 3.4.2
+      开发	:a, 2021-10-09, 4d
+      测试	:after a, 4d
+  </div>
   <div class="mermaid">
     gantt
     title Exclusive end dates (Manual date should end on 3d)

dist/mermaid.esm.min.mjs.LICENSE.txt

@@ -0,0 +1,32 @@
+/*!
+   * Wait for document loaded before starting the execution
+   */
+
+/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
+
+/*! Check if previously processed */
+
+/*! sequence config was passed as #1 */
+
+/**
+ * @license
+ * Copyright (c) 2012-2013 Chris Pettitt
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */

dist/mermaid.min.js.LICENSE.txt

@@ -0,0 +1,32 @@
+/*!
+   * Wait for document loaded before starting the execution
+   */
+
+/*! @license DOMPurify 2.3.3 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/2.3.3/LICENSE */
+
+/*! Check if previously processed */
+
+/*! sequence config was passed as #1 */
+
+/**
+ * @license
+ * Copyright (c) 2012-2013 Chris Pettitt
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */

src/diagrams/gantt/ganttDb.js

@@ -8,6 +8,7 @@ import mermaidAPI from '../../mermaidAPI';
 let dateFormat = '';
 let axisFormat = '';
 let todayMarker = '';
+let includes = [];
 let excludes = [];
 let title = '';
 let sections = [];
@@ -38,6 +39,7 @@ export const clear = function () {
   dateFormat = '';
   axisFormat = '';
   todayMarker = '';
+  includes = [];
   excludes = [];
   inclusiveEndDates = false;
   topAxis = false;
@@ -84,6 +86,13 @@ export const getDateFormat = function () {
   return dateFormat;
 };
 
+export const setIncludes = function (txt) {
+  includes = txt.toLowerCase().split(/[\s,]+/);
+};
+
+export const getIncludes = function () {
+  return includes;
+};
 export const setExcludes = function (txt) {
   excludes = txt.toLowerCase().split(/[\s,]+/);
 };
@@ -123,7 +132,10 @@ export const getTasks = function () {
   return tasks;
 };
 
-const isInvalidDate = function (date, dateFormat, excludes) {
+export const isInvalidDate = function (date, dateFormat, excludes, includes) {
+  if (includes.indexOf(date.format(dateFormat.trim())) >= 0) {
+    return false;
+  }
   if (date.isoWeekday() >= 6 && excludes.indexOf('weekends') >= 0) {
     return true;
   }
@@ -133,24 +145,24 @@ const isInvalidDate = function (date, dateFormat, excludes) {
   return excludes.indexOf(date.format(dateFormat.trim())) >= 0;
 };
 
-const checkTaskDates = function (task, dateFormat, excludes) {
+const checkTaskDates = function (task, dateFormat, excludes, includes) {
   if (!excludes.length || task.manualEndTime) return;
   let startTime = moment(task.startTime, dateFormat, true);
   startTime.add(1, 'd');
   let endTime = moment(task.endTime, dateFormat, true);
-  let renderEndTime = fixTaskDates(startTime, endTime, dateFormat, excludes);
+  let renderEndTime = fixTaskDates(startTime, endTime, dateFormat, excludes, includes);
   task.endTime = endTime.toDate();
   task.renderEndTime = renderEndTime;
 };
 
-const fixTaskDates = function (startTime, endTime, dateFormat, excludes) {
+const fixTaskDates = function (startTime, endTime, dateFormat, excludes, includes) {
   let invalid = false;
   let renderEndTime = null;
   while (startTime <= endTime) {
     if (!invalid) {
       renderEndTime = endTime.toDate();
     }
-    invalid = isInvalidDate(startTime, dateFormat, excludes);
+    invalid = isInvalidDate(startTime, dateFormat, excludes, includes);
     if (invalid) {
       endTime.add(1, 'd');
     }
@@ -306,7 +318,7 @@ const compileData = function (prevTask, dataStr) {
   if (endTimeData) {
     task.endTime = getEndDate(task.startTime, dateFormat, endTimeData, inclusiveEndDates);
     task.manualEndTime = moment(endTimeData, 'YYYY-MM-DD', true).isValid();
-    checkTaskDates(task, dateFormat, excludes);
+    checkTaskDates(task, dateFormat, excludes, includes);
   }
 
   return task;
@@ -460,7 +472,7 @@ const compileTasks = function () {
           'YYYY-MM-DD',
           true
         ).isValid();
-        checkTaskDates(rawTasks[pos], dateFormat, excludes);
+        checkTaskDates(rawTasks[pos], dateFormat, excludes, includes);
       }
     }
 
@@ -618,12 +630,15 @@ export default {
   addTask,
   findTaskById,
   addTaskOrg,
+  setIncludes,
+  getIncludes,
   setExcludes,
   getExcludes,
   setClickEvent,
   setLink,
   bindFunctions,
   durationToDate,
+  isInvalidDate,
 };
 
 function getTaskTags(data, task, tags) {

src/diagrams/gantt/ganttRenderer.js

@@ -1,3 +1,4 @@
+import moment from 'moment-mini';
 import {
   select,
   scaleTime,
@@ -108,6 +109,16 @@ export const draw = function (text, id) {
       .range(['#00B9FA', '#F95002'])
       .interpolate(interpolateHcl);
 
+    drawExcludeDays(
+      gap,
+      topPadding,
+      leftPadding,
+      pageWidth,
+      pageHeight,
+      tasks,
+      parser.yy.getExcludes(),
+      parser.yy.getIncludes()
+    );
     makeGrid(leftPadding, topPadding, pageWidth, pageHeight);
     drawRects(tasks, gap, topPadding, leftPadding, barHeight, colorScale, pageWidth, pageHeight);
     vertLabels(gap, topPadding, leftPadding, barHeight, colorScale);
@@ -341,6 +352,67 @@ export const draw = function (text, id) {
         }
       });
   }
+  function drawExcludeDays(theGap, theTopPad, theSidePad, w, h, tasks, excludes, includes) {
+    const minTime = tasks.reduce(
+      (min, { startTime }) => (min ? Math.min(min, startTime) : startTime),
+      0
+    );
+    const maxTime = tasks.reduce((max, { endTime }) => (max ? Math.max(max, endTime) : endTime), 0);
+    const dateFormat = parser.yy.getDateFormat();
+    if (!minTime || !maxTime) return;
+
+    const excludeRanges = [];
+    let range = null;
+    let d = moment(minTime);
+    while (d.valueOf() <= maxTime) {
+      if (parser.yy.isInvalidDate(d, dateFormat, excludes, includes)) {
+        if (!range) {
+          range = {
+            start: d.clone(),
+            end: d.clone(),
+          };
+        } else {
+          range.end = d.clone();
+        }
+      } else {
+        if (range) {
+          excludeRanges.push(range);
+          range = null;
+        }
+      }
+      d.add(1, 'd');
+    }
+
+    const rectangles = svg.append('g').selectAll('rect').data(excludeRanges).enter();
+
+    rectangles
+      .append('rect')
+      .attr('id', function (d) {
+        return 'exclude-' + d.start.format('YYYY-MM-DD');
+      })
+      .attr('x', function (d) {
+        return timeScale(d.start) + theSidePad;
+      })
+      .attr('y', conf.gridLineStartPadding)
+      .attr('width', function (d) {
+        const renderEnd = d.end.clone().add(1, 'day');
+        return timeScale(renderEnd) - timeScale(d.start);
+      })
+      .attr('height', h - theTopPad - conf.gridLineStartPadding)
+      .attr('transform-origin', function (d, i) {
+        return (
+          (
+            timeScale(d.start) +
+            theSidePad +
+            0.5 * (timeScale(d.end) - timeScale(d.start))
+          ).toString() +
+          'px ' +
+          (i * theGap + 0.5 * h).toString() +
+          'px'
+        );
+      })
+      .attr('class', 'exclude-range');
+  }
 
   function makeGrid(theSidePad, theTopPad, w, h) {
     let bottomXAxis = axisBottom(timeScale)
@@ -458,7 +530,8 @@ export const draw = function (text, id) {
     const hash = {};
     const result = [];
     for (let i = 0, l = arr.length; i < l; ++i) {
-      if (!hash.hasOwnProperty(arr[i])) { // eslint-disable-line
+      if (!Object.prototype.hasOwnProperty.call(hash, arr[i])) {
+        // eslint-disable-line
         // it works with objects! in FF, at least
         hash[arr[i]] = true;
         result.push(arr[i]);

src/diagrams/gantt/parser/gantt.jison

@@ -70,6 +70,7 @@ that id.
 "inclusiveEndDates"     return 'inclusiveEndDates';
 "topAxis"               return 'topAxis';
 "axisFormat"\s[^#\n;]+  return 'axisFormat';
+"includes"\s[^#\n;]+    return 'includes';
 "excludes"\s[^#\n;]+    return 'excludes';
 "todayMarker"\s[^\n;]+  return 'todayMarker';
 \d\d\d\d"-"\d\d"-"\d\d  return 'date';
@@ -112,6 +113,7 @@ statement
   | topAxis {yy.TopAxis();$$=$1.substr(8);}
   | axisFormat {yy.setAxisFormat($1.substr(11));$$=$1.substr(11);}
   | 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);}
   | title {yy.setTitle($1.substr(6));$$=$1.substr(6);}
   | section {yy.addSection($1.substr(8));$$=$1.substr(8);}

src/diagrams/gantt/styles.js

@@ -4,6 +4,9 @@ const getStyles = (options) =>
     font-family: "trebuchet ms", verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
   }
+  .exclude-range {
+    fill: ${options.excludeBkgColor};
+  }
 
   .section {
     stroke: none;

src/themes/theme-base.js

@@ -92,6 +92,7 @@ class Theme {
     this.altSectionBkgColor = this.altSectionBkgColor || 'white';
     this.sectionBkgColor = this.sectionBkgColor || this.secondaryColor;
     this.sectionBkgColor2 = this.sectionBkgColor2 || this.primaryColor;
+    this.excludeBkgColor = this.excludeBkgColor || '#eeeeee';
     this.taskBorderColor = this.taskBorderColor || this.primaryBorderColor;
     this.taskBkgColor = this.taskBkgColor || this.primaryColor;
     this.activeTaskBorderColor = this.activeTaskBorderColor || this.primaryColor;

src/themes/theme-default.js

@@ -67,6 +67,7 @@ class Theme {
     this.sectionBkgColor = 'calculated';
     this.altSectionBkgColor = 'calculated';
     this.sectionBkgColor2 = 'calculated';
+    this.excludeBkgColor = '#eeeeee';
     this.taskBorderColor = 'calculated';
     this.taskBkgColor = 'calculated';
     this.taskTextLightColor = 'calculated';

src/themes/theme-forest.js

@@ -59,6 +59,7 @@ class Theme {
     this.sectionBkgColor = '#6eaa49';
     this.altSectionBkgColor = 'white';
     this.sectionBkgColor2 = '#6eaa49';
+    this.excludeBkgColor = '#eeeeee';
     this.taskBorderColor = 'calculated';
     this.taskBkgColor = '#487e3a';
     this.taskTextLightColor = 'white';

src/themes/theme-neutral.js

@@ -72,6 +72,7 @@ class Theme {
     this.sectionBkgColor = 'calculated';
     this.altSectionBkgColor = 'white';
     this.sectionBkgColor2 = 'calculated';
+    this.excludeBkgColor = '#eeeeee';
     this.taskBorderColor = 'calculated';
     this.taskBkgColor = 'calculated';
     this.taskTextLightColor = 'white';