gantt-task-react-powern 0.4.78 → 0.4.80

package/dist/components/gantt/gantt.d.ts

@@ -5,4 +5,4 @@ export declare function topologicalOrderingHelper(taskID: string, taskMap: {}, s
 export declare function getCriticalPaths(leafTasks: Task[]): any[][];
 export declare function computeCriticalPath(taskID: string, taskMap: {}): void;
 export declare function uncolorAll(tasks: Task[]): void;
-export declare function colorPath(path: Task[], color: string, tasks: Task[]): void;
+export declare function colorPath(path: Task[], color: string, tasks: Task[], criticalPathType: string): void;

package/dist/index.js

@@ -1151,7 +1151,7 @@ var Calendar = function Calendar(_ref) {
 
     for (var i = 0; i < dates.length; i++) {
       var date = dates[i];
-      var bottomValue = columnWidth > 55 ? getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString() : getLocalDayOfWeek(date, locale, "narrow") + " " + date.getDate().toString() + " " + (i < dates.length - 1 ? "," : "");
+      var bottomValue = columnWidth > 55 ? getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString() : getLocalDayOfWeek(date, locale, "narrow") + "," + date.getDate().toString();
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
@@ -2519,44 +2519,51 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     }
   };
 
-  return React__default.createElement("g", {
-    className: "content"
-  }, React__default.createElement("g", {
-    className: "arrows"
-  }, tasks.map(function (_task) {
-    var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+  var getArrows = function getArrows(isCritical, criticalPathType) {
+    return tasks.flatMap(function (_task) {
+      var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
-    if (!task) {
-      return React__default.createElement("g", {
-        key: _task.id,
-        style: {
-          height: taskHeight
-        }
-      });
-    }
+      if (!task) {
+        return [React__default.createElement("g", {
+          key: _task.id + (isCritical ? "-critical" : "-normal"),
+          style: {
+            height: taskHeight
+          }
+        })];
+      }
 
-    return task.barChildren.map(function (child) {
-      var _task$criticalPathArr, _task$criticalPathArr2;
-
-      if (task.x2 > task.x1 || task.actualx2 > task.actualx1) return React__default.createElement(Arrow, {
-        key: "Arrow from " + task.id + " to " + tasks[child.index].id,
-        taskFrom: task,
-        taskTo: tasks[child.index],
-        rowHeight: rowHeight,
-        taskHeight: taskHeight,
-        arrowIndent: arrowIndent,
-        rtl: rtl,
-        arrowColor: ((_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : (_task$criticalPathArr2 = _task$criticalPathArr.find(function (arrow) {
-          return arrow.taskId == tasks[child.index].id;
-        })) === null || _task$criticalPathArr2 === void 0 ? void 0 : _task$criticalPathArr2.arrowColor) || "#808080"
-      });else return React__default.createElement("g", {
-        key: _task.id,
-        style: {
-          height: taskHeight
+      return task.barChildren.map(function (child) {
+        if (task.x2 > task.x1 || task.actualx2 > task.actualx1) {
+          var _task$criticalPathArr;
+
+          var criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(function (arrow) {
+            return arrow.taskId === tasks[child.index].id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
+          });
+
+          if (!!criticalTask === isCritical) {
+            return React__default.createElement(Arrow, {
+              key: "Arrow from " + task.id + " to " + tasks[child.index].id + (isCritical ? "-critical" : ""),
+              taskFrom: task,
+              taskTo: tasks[child.index],
+              rowHeight: rowHeight,
+              taskHeight: taskHeight,
+              arrowIndent: arrowIndent,
+              rtl: rtl,
+              arrowColor: (criticalTask === null || criticalTask === void 0 ? void 0 : criticalTask.arrowColor) || "#808080"
+            });
+          }
         }
-      });
+
+        return null;
+      }).filter(Boolean);
     });
-  })), React__default.createElement("g", {
+  };
+
+  return React__default.createElement("g", {
+    className: "content"
+  }, React__default.createElement("g", {
+    className: "arrows"
+  }, getArrows(false), getArrows(true, "secondary"), getArrows(true, "primary")), React__default.createElement("g", {
     className: "bar",
     fontFamily: fontFamily,
     fontSize: fontSize
@@ -2816,7 +2823,7 @@ var Gantt = function Gantt(_ref) {
       failedTask = _useState9[0],
       setFailedTask = _useState9[1];
 
-  var svgWidth = dateSetup.dates.length * columnWidth;
+  var svgWidth = columnWidth < 55 ? (dateSetup.dates.length + 0.5) * columnWidth : dateSetup.dates.length * columnWidth;
   var ganttFullHeight = barTasks.length * rowHeight;
 
   var _useState10 = React.useState(0),
@@ -2882,8 +2889,8 @@ var Gantt = function Gantt(_ref) {
     uncolorAll(tasks);
 
     if (scheduleType !== "lookAhead") {
-      colorPath(secondaryPath, "#00ff00", tasks);
-      colorPath(primaryPath, "#ff0000", tasks);
+      colorPath(secondaryPath, "#00ff00", tasks, "secondary");
+      colorPath(primaryPath, "#ff0000", tasks, "primary");
     }
 
     setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
@@ -3326,7 +3333,7 @@ function uncolorAll(tasks) {
     delete task.criticalPathArrows;
   });
 }
-function colorPath(path, color, tasks) {
+function colorPath(path, color, tasks, criticalPathType) {
   for (var i = 0; i < path.length; i++) {
     var longestIDLength = 0;
     var longestTask = void 0;
@@ -3369,10 +3376,16 @@ function colorPath(path, color, tasks) {
       var arrow = arrows.find(function (arrow) {
         return arrow.taskId === path[_i7 + 1].id;
       });
-      if (arrow) arrow.arrowColor = color;else arrows.push({
+
+      if (arrow) {
+        arrow.arrowColor = color;
+        arrow.criticalPathType = criticalPathType;
+      } else arrows.push({
         taskId: path[_i7 + 1].id,
-        arrowColor: color
+        arrowColor: color,
+        criticalPathType: criticalPathType
       });
+
       taskFromTasks.criticalPathArrows = arrows;
     }
   };