gantt-task-react-powern 0.6.43 → 0.6.45

package/README.md

@@ -72,6 +72,8 @@ npm start
 | endDate                         | Date                  | Project-level end date used for calendar/critical-path bounds.                    |
 | projectCalendar                 | CalendarDefinition    | Working calendar (shifts, off days, holidays) applied to scheduling.              |
 | sliderTime                      | number                | Vertical slider time marker (ms) drawn on the chart.                              |
+| hideActualBeforeSlider          | boolean               | Draws actual bars transparent until `sliderTime` reaches their actual start day.  |
+| plannedInProgressColor          | string                | Planned bar fill while `sliderTime` is inside the task's `inProgressWindow`.      |
 | [EventOption](#EventOption)     | interface             | Specifies gantt events.                                                           |
 | [DisplayOption](#DisplayOption) | interface             | Specifies view type and display timeline language.                                |
 | [StylingOption](#StylingOption) | interface             | Specifies chart and global tasks styles                                           |
@@ -159,6 +161,7 @@ npm start
 | optionalId          | string           | Optional secondary id (e.g. external system id).                                                      |
 | dependencies        | DependencyType[] | Parent dependencies. Each entry is `{ id: string; type: "SS" \| "SF" \| "FS" \| "FF" }`.              |
 | criticalPathArrows  | object[]         | Arrows on the critical path: `{ taskId: string; arrowColor: string; criticalPathType: string }`.      |
+| inProgressWindow    | object           | `{ start: Date; end?: Date }`: days the planned bar takes `plannedInProgressColor` (open-ended without `end`). |
 | styles              | object           | Specifies the taskbar styling settings locally. Object is passed with the following attributes:       |
 |                     |                  | - **backgroundColor**: String. Specifies the taskbar background fill color locally.                   |
 |                     |                  | - **backgroundSelectedColor**: String. Specifies the taskbar background fill color locally on select. |

package/dist/components/gantt/task-gantt-content.d.ts

@@ -28,5 +28,11 @@ export declare type TaskGanttContentProps = {
     setSelectedTask: (taskId: string) => void;
     onBarTasksUpdate?: (task: BarTask) => void;
     sliderTime?: number;
+    /** Draw actual bars transparent until sliderTime reaches their actual start day. */
+    hideActualBeforeSlider?: boolean;
+    /** Planned bar fill while sliderTime is inside the task's `inProgressWindow`. */
+    plannedInProgressColor?: string;
+    /** Split calendar bars around off days; false in Month/Quarter views. */
+    segmentBars?: boolean;
 } & EventOption;
 export declare const TaskGanttContent: React.FC<TaskGanttContentProps>;

package/dist/helpers/bar-helper.d.ts

@@ -1,7 +1,15 @@
-import { Task } from "../types/public-types";
+import { CalendarDefinition, Task } from "../types/public-types";
 import { BarTask } from "../types/bar-task";
 import { BarMoveAction } from "../types/gantt-task-actions";
-export declare const convertToBarTasks: (tasks: Task[], dates: Date[], columnWidth: number, rowHeight: number, taskHeight: number, barCornerRadius: number, handleWidth: number, rtl: boolean, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string, projectProgressColor: string, projectProgressSelectedColor: string, projectBackgroundColor: string, projectBackgroundSelectedColor: string, milestoneBackgroundColor: string, milestoneBackgroundSelectedColor: string) => BarTask[];
+export declare const convertToBarTasks: (tasks: Task[], dates: Date[], columnWidth: number, rowHeight: number, taskHeight: number, barCornerRadius: number, handleWidth: number, rtl: boolean, barProgressColor: string, barProgressSelectedColor: string, barBackgroundColor: string, barBackgroundSelectedColor: string, projectProgressColor: string, projectProgressSelectedColor: string, projectBackgroundColor: string, projectBackgroundSelectedColor: string, milestoneBackgroundColor: string, milestoneBackgroundSelectedColor: string, segmentBars?: boolean) => BarTask[];
+/**
+ * x-ranges of the working intervals from `start` through the end of `end`'s
+ * day, or undefined when none fall inside the chart.
+ */
+export declare const getWorkingSegments: (start: Date, end: Date, calendar: CalendarDefinition, dates: Date[], columnWidth: number) => {
+    x1: number;
+    x2: number;
+}[] | undefined;
 export declare const taskXCoordinate: (xDate: Date, dates: Date[], columnWidth: number) => number;
 export declare const progressWithByParams: (taskX1: number, taskX2: number, progress: number, rtl: boolean) => number[];
 export declare const progressByProgressWidth: (progressWidth: number, barTask: BarTask) => number;

package/dist/helpers/calendar-helper.d.ts

@@ -3,7 +3,10 @@ import { CalendarDefinition } from "../types/public-types";
 export declare function parseTimeToMinutes(t: string): number;
 /** True if the date falls on a calendar holiday. */
 export declare function isHoliday(date: Date, cal: CalendarDefinition): boolean;
-/** True if the date's weekday is in off_days or is a holiday. */
+/**
+ * True if the date's weekday is in off_days or is a holiday. Local weekday, to
+ * match the local-midnight dates and day loops used everywhere else.
+ */
 export declare function isOffDay(date: Date, cal: CalendarDefinition): boolean;
 /** Gets the timestamps (Milliseconds - UTC) of all off-days for a calendar between a start and end date*/
 export declare function getOffDays(calendar: CalendarDefinition, start: Date, end: Date): number[];

package/dist/helpers/date-helper.d.ts

@@ -27,4 +27,9 @@ export declare const getLocaleMonth: (date: Date, locale: string) => string;
 export declare const getLocalDayOfWeek: (date: Date, locale: string, format?: "long" | "short" | "narrow" | undefined) => string;
 export declare const getWeekNumberISO8601: (date: Date) => string;
 export declare const getDaysInMonth: (month: number, year: number) => number;
+/**
+ * Day-resolution views shade calendar off days and split task bars around
+ * them; Month and Quarter columns are too coarse, so they do neither.
+ */
+export declare const viewShowsOffDays: (viewMode?: ViewMode | undefined) => boolean;
 export {};

package/dist/index.js

@@ -269,6 +269,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 !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter;
+};
 
 var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderResizeHandle":"_ddPJg","ganttTable_HeaderItem":"_WuQ0f","ganttTable_HeaderItemText":"_2X3fk"};
 
@@ -402,7 +405,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;
   }
@@ -1474,7 +1477,7 @@ var GridBody = function GridBody(_ref) {
       }));
     }
 
-    if (viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter) {
+    if (viewShowsOffDays(viewMode)) {
       var _dates;
 
       var pEnd = (_dates = dates[i + 1]) != null ? _dates : addToDate(dates[i], 1, "day");
@@ -1541,7 +1544,7 @@ var GridBody = function GridBody(_ref) {
     y2: visibleStartY,
     className: styles$5.gridRowLine
   }));
-  var showPerRowOffDays = viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter;
+  var showPerRowOffDays = viewShowsOffDays(viewMode);
 
   for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
     var vi = _step.value;
@@ -1677,6 +1680,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,
@@ -1938,6 +1942,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];
@@ -1969,32 +1975,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__default.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__default.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;
       }
     }
 
@@ -2295,9 +2292,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();
 
@@ -2325,7 +2326,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) {
@@ -2334,18 +2335,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;
@@ -2378,35 +2379,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({
@@ -2439,6 +2417,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);
@@ -3332,6 +3322,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;
 
@@ -3363,7 +3354,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 = React.useState(0),
@@ -3430,17 +3426,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;
@@ -3466,17 +3452,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) : [];
 
@@ -3568,17 +3544,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;
@@ -3616,17 +3582,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) : [];
 
@@ -3703,7 +3659,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 {
@@ -3858,6 +3814,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__default.createElement("g", {
     className: "content"
   }, lineX !== null && lineX > 0 && React__default.createElement("line", {
@@ -3883,6 +3850,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__default.createElement("g", {
         key: _task.id,
@@ -4035,6 +4015,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;
@@ -4129,7 +4111,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 = React.useRef(null);
   var taskListRef = React.useRef(null);
   var isDraggingTable = React.useRef(false);
@@ -4405,11 +4390,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]);
@@ -4764,7 +4749,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 = React.useMemo(function () {
     return ganttEvent.changedTask ? barTasks.map(function (t) {