gantt-task-react-powern 0.4.19 → 0.4.21

package/dist/components/task-item/bar/bar-display.d.ts

@@ -11,6 +11,10 @@ declare type BarDisplayProps = {
     progressX: number;
     progressWidth: number;
     barCornerRadius: number;
+    criticalPathArrows?: Array<{
+        taskId: string;
+        arrowColor: string;
+    }>;
     styles: {
         taskProgressColor?: string;
         backgroundColor: string;

package/dist/index.js

@@ -575,7 +575,8 @@ var VerticalScroll = function VerticalScroll(_ref) {
     style: {
       height: ganttHeight,
       marginTop: headerHeight,
-      marginLeft: rtl ? "" : "-1rem"
+      marginLeft: rtl ? "" : "-1rem",
+      marginRight: "1rem"
     },
     className: styles$3.scroll,
     onScroll: onScroll,
@@ -2227,6 +2228,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     className: "arrows"
   }, tasks.map(function (task) {
     return task.barChildren.map(function (child) {
+      var _task$criticalPathArr, _task$criticalPathArr2;
+
       return React__default.createElement(Arrow, {
         key: "Arrow from " + task.id + " to " + tasks[child.index].id,
         taskFrom: task,
@@ -2235,7 +2238,9 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
         taskHeight: taskHeight,
         arrowIndent: arrowIndent,
         rtl: rtl,
-        arrowColor: task.styles.criticalPathColor || "#808080"
+        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"
       });
     });
   })), React__default.createElement("g", {
@@ -2344,6 +2349,8 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 
 var Gantt = function Gantt(_ref) {
   var tasks = _ref.tasks,
+      _ref$leafNodes = _ref.leafNodes,
+      leafNodes = _ref$leafNodes === void 0 ? [] : _ref$leafNodes,
       _ref$headerHeight = _ref.headerHeight,
       headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
       _ref$columnWidth = _ref.columnWidth,
@@ -2513,6 +2520,13 @@ var Gantt = function Gantt(_ref) {
       dates: newDates,
       viewMode: viewMode
     });
+
+    var _getCriticalPaths = getCriticalPaths(leafNodes),
+        primaryPath = _getCriticalPaths[0],
+        secondaryPath = _getCriticalPaths[1];
+
+    colorPath(secondaryPath, "#00ff00", tasks);
+    colorPath(primaryPath, "#ff0000", tasks);
     setBarTasks(convertToBarTasks(filteredTasks, newDates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
   }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, columnWidth, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, scrollX, onExpanderClick]);
   React.useEffect(function () {
@@ -2727,6 +2741,99 @@ var Gantt = function Gantt(_ref) {
     }
   };
 
+  function getCriticalPaths(leafTasks) {
+    var _leafTasks$reduce = leafTasks.reduce(function (_ref2, leafTask) {
+      var primaryPath = _ref2[0],
+          secondaryPath = _ref2[1],
+          primaryDuration = _ref2[2],
+          secondaryDuration = _ref2[3];
+      var newPath = criticalPath(leafTask, leafTasks);
+      var newDuration = computeDuration(newPath);
+      if (newDuration <= secondaryDuration) return [primaryPath, secondaryPath, primaryDuration, secondaryDuration];
+
+      if (newDuration > primaryDuration) {
+        var _primaryPath$;
+
+        if (((_primaryPath$ = primaryPath[0]) === null || _primaryPath$ === void 0 ? void 0 : _primaryPath$.id) !== newPath[0].id) return [newPath, primaryPath, newDuration, primaryDuration];else return [newPath, secondaryPath, newDuration, secondaryDuration];
+      } else {
+        var _primaryPath$2;
+
+        if (((_primaryPath$2 = primaryPath[0]) === null || _primaryPath$2 === void 0 ? void 0 : _primaryPath$2.id) !== newPath[0].id) return [primaryPath, newPath, primaryDuration, newDuration];else return [primaryPath, secondaryPath, primaryDuration, secondaryDuration];
+      }
+    }, [[], [], 0, 0]),
+        primaryPath = _leafTasks$reduce[0],
+        secondaryPath = _leafTasks$reduce[1];
+
+    return [primaryPath, secondaryPath];
+  }
+
+  function computeDuration(path) {
+    return path.length ? path[path.length - 1].end.getTime() - path[0].start.getTime() : 0;
+  }
+
+  function criticalPath(task, tasks) {
+    var _task$dependencies;
+
+    if (!task) {
+      return [];
+    }
+
+    if (!task.dependencies) return [task];
+
+    var _task$dependencies$re = (_task$dependencies = task.dependencies) === null || _task$dependencies === void 0 ? void 0 : _task$dependencies.reduce(function (_ref3, dependencyTaskId) {
+      var longestPath = _ref3[0],
+          longestDuration = _ref3[1];
+      var dependencyTask = tasks.find(function (otherTask) {
+        return otherTask.id === dependencyTaskId;
+      });
+      var dependencyPath = criticalPath(dependencyTask, tasks);
+      var dependencyDuration = computeDuration(dependencyPath);
+      if (dependencyDuration > longestDuration) return [dependencyPath, dependencyDuration];else return [longestPath, longestDuration];
+    }, [[], 0]),
+        longestPath = _task$dependencies$re[0];
+
+    return [].concat(longestPath, [task]);
+  }
+
+  function colorPath(path, color, tasks) {
+    var _loop = function _loop(i) {
+      var task = tasks.find(function (otherTask) {
+        return path[i].id === otherTask.id;
+      });
+
+      while (task) {
+        if (!task.styles) task.styles = {};
+        task.styles.criticalPathColor = color;
+        task = tasks.find(function (otherTask) {
+          var _task;
+
+          return (_task = task) === null || _task === void 0 ? void 0 : _task.id.startsWith(otherTask.id + ".");
+        });
+      }
+    };
+
+    for (var i = 0; i < path.length; i++) {
+      _loop(i);
+    }
+
+    var _loop2 = function _loop2(_i) {
+      var arrows = path[_i].criticalPathArrows;
+      if (!arrows) arrows = [];
+      var arrow = arrows.find(function (arrow) {
+        return arrow.taskId === path[_i + 1].id;
+      });
+      if (arrow) arrow.arrowColor = color;else arrows.push({
+        taskId: path[_i + 1].id,
+        arrowColor: color
+      });
+      path[_i].criticalPathArrows = arrows;
+    };
+
+    for (var _i = 0; _i + 1 < path.length; _i++) {
+      _loop2(_i);
+    }
+  }
+
   var gridProps = {
     columnWidth: columnWidth,
     svgWidth: svgWidth,