gantt-task-react-powern 0.6.43 → 0.6.45

package/dist/index.modern.js

@@ -268,6 +268,9 @@ var getMonday = function getMonday(date) {
   var diff = date.getDate() - day + (day === 0 ? -6 : 1);
   return new Date(date.setDate(diff));
 };
+var viewShowsOffDays = function viewShowsOffDays(viewMode) {
+  return viewMode !== ViewMode.Month && viewMode !== ViewMode.Quarter;
+};
 
 var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderResizeHandle":"_ddPJg","ganttTable_HeaderItem":"_WuQ0f","ganttTable_HeaderItemText":"_2X3fk"};
 
@@ -401,7 +404,7 @@ function isHoliday(date, cal) {
 }
 function isOffDay(date, cal) {
   if (cal.off_days && cal.off_days.length > 0) {
-    return cal.off_days.includes(date.getUTCDay()) || isHoliday(date, cal);
+    return cal.off_days.includes(date.getDay()) || isHoliday(date, cal);
   } else {
     return false;
   }
@@ -1473,7 +1476,7 @@ var GridBody = function GridBody(_ref) {
       }));
     }
 
-    if (viewMode !== ViewMode.Month && viewMode !== ViewMode.Quarter) {
+    if (viewShowsOffDays(viewMode)) {
       var _dates;
 
       var pEnd = (_dates = dates[i + 1]) != null ? _dates : addToDate(dates[i], 1, "day");
@@ -1540,7 +1543,7 @@ var GridBody = function GridBody(_ref) {
     y2: visibleStartY,
     className: styles$5.gridRowLine
   }));
-  var showPerRowOffDays = viewMode !== ViewMode.Month && viewMode !== ViewMode.Quarter;
+  var showPerRowOffDays = viewShowsOffDays(viewMode);
 
   for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
     var vi = _step.value;
@@ -1676,6 +1679,7 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
   }, value));
 };
 
+var MONTH_LABEL_HALF_WIDTH = 32;
 var Calendar = function Calendar(_ref) {
   var dateSetup = _ref.dateSetup,
       locale = _ref.locale,
@@ -1937,6 +1941,8 @@ var Calendar = function Calendar(_ref) {
     var topDefaultHeight = headerHeight * 0.5;
     var dates = dateSetup.dates;
     var weekStartDay = (_projectCalendar$week = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) != null ? _projectCalendar$week : 1;
+    var chartWidth = columnWidth * dates.length;
+    var monthStartIndex = 0;
 
     for (var i = 0; i < dates.length; i++) {
       var date = dates[i];
@@ -1968,32 +1974,23 @@ var Calendar = function Calendar(_ref) {
         x: columnWidth * i + columnWidth * 0.5,
         className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
       }, bottomValue));
+      var isMonthEnd = i + 1 === dates.length || date.getMonth() !== dates[i + 1].getMonth();
 
-      if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
+      if (isMonthEnd) {
         var topValue = shortMonth(date) + " " + date.getFullYear();
+        var segmentStart = columnWidth * monthStartIndex;
+        var segmentEnd = columnWidth * (i + 1);
+        var xText = Math.min(Math.max((segmentStart + segmentEnd) / 2, MONTH_LABEL_HALF_WIDTH), chartWidth - MONTH_LABEL_HALF_WIDTH);
         topValues.push(React.createElement(TopPartOfCalendar, {
           key: topValue + i,
           value: topValue,
-          x1Line: columnWidth * (i + 1),
+          x1Line: segmentEnd,
           y1Line: 0,
           y2Line: topDefaultHeight,
-          xText: topValues.length === 0 ? columnWidth * (i + 1) * 0.5 : columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5,
-          yText: topDefaultHeight * 0.9
-        }));
-      }
-
-      if (i + 1 === dates.length) {
-        var _topValue = shortMonth(date) + " " + date.getFullYear();
-
-        topValues.push(React.createElement(TopPartOfCalendar, {
-          key: _topValue + "last",
-          value: _topValue,
-          x1Line: columnWidth * (i + 1),
-          y1Line: 0,
-          y2Line: topDefaultHeight,
-          xText: columnWidth * (i + 1) - date.getDate() * columnWidth * 0.5,
+          xText: xText,
           yText: topDefaultHeight * 0.9
         }));
+        monthStartIndex = i + 1;
       }
     }
 
@@ -2294,9 +2291,13 @@ var drawPathAndTriangle = function drawPathAndTriangle(taskFrom, taskTo, rowHeig
   return [path, trianglePoints];
 };
 
-var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
+var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, segmentBars) {
+  if (segmentBars === void 0) {
+    segmentBars = true;
+  }
+
   var barTasks = tasks.map(function (t, i) {
-    return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
+    return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, segmentBars);
   });
   var indexById = new Map();
 
@@ -2324,7 +2325,7 @@ var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, ro
   return barTasks;
 };
 
-var convertToBarTask = function convertToBarTask(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
+var convertToBarTask = function convertToBarTask(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, segmentBars) {
   var barTask;
 
   switch (task.type) {
@@ -2333,18 +2334,18 @@ var convertToBarTask = function convertToBarTask(task, index, dates, columnWidth
       break;
 
     case "project":
-      barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor);
+      barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, segmentBars);
       break;
 
     default:
-      barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor);
+      barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, segmentBars);
       break;
   }
 
   return barTask;
 };
 
-var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
+var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, segmentBars) {
   var x1;
   var x2;
   var actualx1;
@@ -2377,35 +2378,12 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
   var plannedSegments;
   var actualSegments;
 
-  if (task.calendar && task.start && task.end && task.start.getTime() > 0) {
-    var planEnd = addToDate(startOfDate(task.end, "day"), 1, "day");
-    var intervals = getWorkingIntervals(task.start, planEnd, task.calendar);
-    var segs = intervals.map(function (iv) {
-      return {
-        x1: taskXCoordinate(iv.start, dates, columnWidth),
-        x2: taskXCoordinate(iv.end, dates, columnWidth)
-      };
-    }).filter(function (s) {
-      return s.x2 > s.x1;
-    });
-    if (segs.length > 0) plannedSegments = segs;
+  if (segmentBars && task.calendar && task.start && task.end && task.start.getTime() > 0) {
+    plannedSegments = getWorkingSegments(task.start, task.end, task.calendar, dates, columnWidth);
   }
 
-  if (task.calendar && task.actualStart && task.actualEnd && task.actualStart.getTime() > 0) {
-    var actEnd = addToDate(startOfDate(task.actualEnd, "day"), 1, "day");
-
-    var _intervals = getWorkingIntervals(task.actualStart, actEnd, task.calendar);
-
-    var _segs = _intervals.map(function (iv) {
-      return {
-        x1: taskXCoordinate(iv.start, dates, columnWidth),
-        x2: taskXCoordinate(iv.end, dates, columnWidth)
-      };
-    }).filter(function (s) {
-      return s.x2 > s.x1;
-    });
-
-    if (_segs.length > 0) actualSegments = _segs;
+  if (segmentBars && task.calendar && task.actualStart && task.actualEnd && task.actualStart.getTime() > 0) {
+    actualSegments = getWorkingSegments(task.actualStart, task.actualEnd, task.calendar, dates, columnWidth);
   }
 
   var styles = _extends({
@@ -2438,6 +2416,18 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
   });
 };
 
+var getWorkingSegments = function getWorkingSegments(start, end, calendar, dates, columnWidth) {
+  var segs = getWorkingIntervals(start, addToDate(startOfDate(end, "day"), 1, "day"), calendar).map(function (iv) {
+    return {
+      x1: taskXCoordinate(iv.start, dates, columnWidth),
+      x2: taskXCoordinate(iv.end, dates, columnWidth)
+    };
+  }).filter(function (s) {
+    return s.x2 > s.x1;
+  });
+  return segs.length > 0 ? segs : undefined;
+};
+
 var convertToMilestone = function convertToMilestone(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
   var x = task.start && task.end ? taskXCoordinate(task.end, dates, columnWidth) : 0;
   var y = taskYCoordinate(index, rowHeight, taskHeight);
@@ -3331,6 +3321,7 @@ var TaskItem = function TaskItem(props) {
   }, taskItem[1]));
 };
 
+var HIDDEN_ACTUAL_COLOR = "rgba(0, 0, 0, 0)";
 var TaskGanttContent = function TaskGanttContent(_ref) {
   var _svg$current;
 
@@ -3362,7 +3353,12 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       projectCalendar = _ref.projectCalendar,
       visibleStartY = _ref.visibleStartY,
       visibleEndY = _ref.visibleEndY,
-      sliderTime = _ref.sliderTime;
+      sliderTime = _ref.sliderTime,
+      _ref$hideActualBefore = _ref.hideActualBeforeSlider,
+      hideActualBeforeSlider = _ref$hideActualBefore === void 0 ? false : _ref$hideActualBefore,
+      plannedInProgressColor = _ref.plannedInProgressColor,
+      _ref$segmentBars = _ref.segmentBars,
+      segmentBars = _ref$segmentBars === void 0 ? true : _ref$segmentBars;
   var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
 
   var _useState = useState(0),
@@ -3429,17 +3425,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                 finalTask.actualx2 = taskXCoordinate(finalTask.actualEnd, dates, columnWidth);
               }
 
-              var actEnd = addToDate(startOfDate(finalTask.actualEnd, "day"), 1, "day");
-              var actIntervals = getWorkingIntervals(finalTask.actualStart, actEnd, cal);
-              var actSegs = actIntervals.map(function (iv) {
-                return {
-                  x1: taskXCoordinate(iv.start, dates, columnWidth),
-                  x2: taskXCoordinate(iv.end, dates, columnWidth)
-                };
-              }).filter(function (s) {
-                return s.x2 > s.x1;
-              });
-              finalTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
+              finalTask.actualSegments = segmentBars ? getWorkingSegments(finalTask.actualStart, finalTask.actualEnd, cal, dates, columnWidth) : undefined;
               var offTimeDays = finalTask.calendar ? getOffDays(finalTask.calendar, finalTask.actualStart, finalTask.actualEnd) : [];
               var actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)) - offTimeDays.length);
               finalTask.actualDuration = actDays;
@@ -3465,17 +3451,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                 finalTask.x2 = taskXCoordinate(finalTask.end, dates, columnWidth);
               }
 
-              var planEnd = addToDate(startOfDate(finalTask.end, "day"), 1, "day");
-              var planIntervals = getWorkingIntervals(finalTask.start, planEnd, cal);
-              var planSegs = planIntervals.map(function (iv) {
-                return {
-                  x1: taskXCoordinate(iv.start, dates, columnWidth),
-                  x2: taskXCoordinate(iv.end, dates, columnWidth)
-                };
-              }).filter(function (s) {
-                return s.x2 > s.x1;
-              });
-              finalTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
+              finalTask.plannedSegments = segmentBars ? getWorkingSegments(finalTask.start, finalTask.end, cal, dates, columnWidth) : undefined;
 
               var _offTimeDays = finalTask.calendar ? getOffDays(finalTask.calendar, finalTask.start, finalTask.end) : [];
 
@@ -3567,17 +3543,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
               newChangedTask.actualx2 = taskXCoordinate(newChangedTask.actualEnd, dates, columnWidth);
             }
 
-            var actEnd = addToDate(startOfDate(newChangedTask.actualEnd, "day"), 1, "day");
-            var actIntervals = getWorkingIntervals(newChangedTask.actualStart, actEnd, cal);
-            var actSegs = actIntervals.map(function (iv) {
-              return {
-                x1: taskXCoordinate(iv.start, dates, columnWidth),
-                x2: taskXCoordinate(iv.end, dates, columnWidth)
-              };
-            }).filter(function (s) {
-              return s.x2 > s.x1;
-            });
-            newChangedTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
+            newChangedTask.actualSegments = segmentBars ? getWorkingSegments(newChangedTask.actualStart, newChangedTask.actualEnd, cal, dates, columnWidth) : undefined;
             var offTimeDays = newChangedTask.calendar ? getOffDays(newChangedTask.calendar, newChangedTask.actualStart, newChangedTask.actualEnd) : [];
             var actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)) - offTimeDays.length);
             newChangedTask.actualDuration = actDays;
@@ -3615,17 +3581,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
               newChangedTask.x2 = taskXCoordinate(newChangedTask.end, dates, columnWidth);
             }
 
-            var planEnd = addToDate(startOfDate(newChangedTask.end, "day"), 1, "day");
-            var planIntervals = getWorkingIntervals(newChangedTask.start, planEnd, cal);
-            var planSegs = planIntervals.map(function (iv) {
-              return {
-                x1: taskXCoordinate(iv.start, dates, columnWidth),
-                x2: taskXCoordinate(iv.end, dates, columnWidth)
-              };
-            }).filter(function (s) {
-              return s.x2 > s.x1;
-            });
-            newChangedTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
+            newChangedTask.plannedSegments = segmentBars ? getWorkingSegments(newChangedTask.start, newChangedTask.end, cal, dates, columnWidth) : undefined;
 
             var _offTimeDays2 = newChangedTask.calendar ? getOffDays(newChangedTask.calendar, newChangedTask.start, newChangedTask.end) : [];
 
@@ -3702,7 +3658,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       svg.current.addEventListener("mouseup", handleMouseUp);
       setIsMoving(true);
     }
-  }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, onCalendarError, projectCalendar, svg, isMoving, point, rtl, setFailedTask, setGanttEvent, onBarTasksUpdate, dates, columnWidth]);
+  }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, onCalendarError, projectCalendar, svg, isMoving, point, rtl, segmentBars, setFailedTask, setGanttEvent, onBarTasksUpdate, dates, columnWidth]);
 
   var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
     try {
@@ -3857,6 +3813,17 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
   var lineX = sliderTime !== undefined ? taskXCoordinate(new Date(sliderTime), dates, columnWidth) : null;
   var totalHeight = tasks.length * rowHeight;
+  var sliderDate = sliderTime != null ? new Date(sliderTime) : null;
+
+  var isActualBeforeSlider = function isActualBeforeSlider(task) {
+    return hideActualBeforeSlider && !!sliderDate && !!task.actualStart && startOfDate(task.actualStart, "day") > sliderDate;
+  };
+
+  var isInProgressAtSlider = function isInProgressAtSlider(_ref2) {
+    var w = _ref2.inProgressWindow;
+    return !!plannedInProgressColor && !!sliderDate && !!w && startOfDate(w.start, "day") <= sliderDate && (!w.end || addToDate(startOfDate(w.end, "day"), 1, "day") > sliderDate);
+  };
+
   return React.createElement("g", {
     className: "content"
   }, lineX !== null && lineX > 0 && React.createElement("line", {
@@ -3882,6 +3849,19 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       y: 0
     });
 
+    if (isActualBeforeSlider(task)) {
+      task.styles = _extends({}, task.styles, {
+        taskProgressColor: HIDDEN_ACTUAL_COLOR
+      });
+    }
+
+    if (isInProgressAtSlider(task)) {
+      task.styles = _extends({}, task.styles, {
+        backgroundColor: plannedInProgressColor,
+        backgroundSelectedColor: plannedInProgressColor
+      });
+    }
+
     if (!task && _task.typeInternal === "milestone") {
       return React.createElement("g", {
         key: _task.id,
@@ -4034,6 +4014,8 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 };
 
 var GANTT_MIN_WIDTH_RATIO = 0.4;
+var PRIMARY_PATH_COLOR = "#AA00FF";
+var SECONDARY_PATH_COLOR = "#ff82e4";
 var TABLE_GANTT_DIVIDER_WIDTH = 20;
 var Gantt = function Gantt(_ref) {
   var _ref3;
@@ -4128,7 +4110,10 @@ var Gantt = function Gantt(_ref) {
       shouldNotShowLoadingOverlay = _ref$shouldNotShowLoa === void 0 ? true : _ref$shouldNotShowLoa,
       projectCalendar = _ref.projectCalendar,
       onCalendarError = _ref.onCalendarError,
-      sliderTime = _ref.sliderTime;
+      sliderTime = _ref.sliderTime,
+      _ref$hideActualBefore = _ref.hideActualBeforeSlider,
+      hideActualBeforeSlider = _ref$hideActualBefore === void 0 ? false : _ref$hideActualBefore,
+      plannedInProgressColor = _ref.plannedInProgressColor;
   var wrapperRef = useRef(null);
   var taskListRef = useRef(null);
   var isDraggingTable = useRef(false);
@@ -4404,11 +4389,11 @@ var Gantt = function Gantt(_ref) {
       uncolorAll(tasks);
 
       if (scheduleType !== "lookAhead") {
-        colorPath(secondaryPath, "#00ff00", tasks, "secondary");
-        colorPath(primaryPath, "#ff0000", tasks, "primary");
+        colorPath(secondaryPath, SECONDARY_PATH_COLOR, tasks, "secondary");
+        colorPath(primaryPath, PRIMARY_PATH_COLOR, tasks, "primary");
       }
 
-      setBarTasks(convertToBarTasks(filteredTasks, newDates, effectiveColumnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
+      setBarTasks(convertToBarTasks(filteredTasks, newDates, effectiveColumnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, viewShowsOffDays(viewMode)));
       setIsProcessing(false);
     }, delayToRender);
   }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, shouldNotShowLoadingOverlay, effectiveColumnWidth, projectCalendar]);
@@ -4763,7 +4748,10 @@ var Gantt = function Gantt(_ref) {
     projectCalendar: projectCalendar,
     visibleStartY: visibleStartY,
     visibleEndY: visibleEndY,
-    sliderTime: sliderTime
+    sliderTime: sliderTime,
+    hideActualBeforeSlider: hideActualBeforeSlider,
+    plannedInProgressColor: plannedInProgressColor,
+    segmentBars: viewShowsOffDays(viewMode)
   };
   var tableTasks = useMemo(function () {
     return ganttEvent.changedTask ? barTasks.map(function (t) {