gantt-task-react-v 1.0.48 → 1.0.50

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

@@ -14,26 +14,6 @@ export interface TaskGanttContentProps extends GanttTaskBarActions {
     distances: Distances;
     endColumnIndex: number;
     fullRowHeight: number;
-    /**
-     * Absolute X coordinate of data date in the main SVG (including additionalLeftSpace), or undefined
-     */
-    dataDateX?: number | null;
-    splitbarColors?: {
-        task?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        project?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        comparison?: {
-            onTime?: string;
-            delayed?: string;
-        };
-    } | null;
-    showProgressBar?: boolean;
-    progressBarColor?: string;
     ganttRelationEvent: GanttRelationEvent | null;
     getDate: (index: number) => Date;
     getTaskCoordinates: (task: Task) => TaskCoordinates;
@@ -61,5 +41,7 @@ export interface TaskGanttContentProps extends GanttTaskBarActions {
     isRelationChangeable?: (task: Task) => boolean;
     taskBarMovingAction: (task: RenderTask) => TaskBarMoveAction | null;
     viewMode: ViewMode;
+    showProgress?: boolean;
+    progressColor?: string;
 }
 export declare const TaskGanttContent: React.NamedExoticComponent<TaskGanttContentProps>;

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

@@ -14,23 +14,8 @@ type BarDisplayProps = {
     x: number;
     y: number;
     customStyle?: CSSProperties;
-    dataDateX?: number | null;
-    splitbarColors?: {
-        task?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        project?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        comparison?: {
-            onTime?: string;
-            delayed?: string;
-        };
-    } | null;
-    showProgressBar?: boolean;
-    progressBarColor?: string;
+    showProgress?: boolean;
+    progressColor?: string;
 };
 export declare const BarDisplay: React.FC<BarDisplayProps>;
 export {};

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

@@ -15,23 +15,8 @@ type ProjectDisplayProps = {
     x1: number;
     x2: number;
     customStyle?: CSSProperties;
-    dataDateX?: number | null;
-    splitbarColors?: {
-        task?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        project?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        comparison?: {
-            onTime?: string;
-            delayed?: string;
-        };
-    } | null;
-    showProgressBar?: boolean;
-    progressBarColor?: string;
+    showProgress?: boolean;
+    progressColor?: string;
 };
 export declare const ProjectDisplay: React.FC<ProjectDisplayProps>;
 export {};

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

@@ -13,23 +13,6 @@ export interface TaskItemProps extends Omit<GanttTaskBarActions, "taskBarMovingA
     distances: Distances;
     taskHeight: number;
     taskHalfHeight: number;
-    dataDateX?: number | null;
-    splitbarColors?: {
-        task?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        project?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        comparison?: {
-            onTime?: string;
-            delayed?: string;
-        };
-    } | null;
-    showProgressBar?: boolean;
-    progressBarColor?: string;
     authorizedRelations: RelationKind[];
     ganttRelationEvent: GanttRelationEvent;
     canDelete: boolean;
@@ -49,5 +32,7 @@ export interface TaskItemProps extends Omit<GanttTaskBarActions, "taskBarMovingA
     onTooltipTask: (task: Task | null, element: Element | null) => void;
     renderCustomLabel?: RenderCustomLabel;
     viewMode: ViewMode;
+    showProgress?: boolean;
+    progressColor?: string;
 }
 export declare const TaskItem: React.NamedExoticComponent<TaskItemProps>;

package/dist/gantt-task-react.es.js

@@ -11983,9 +11983,9 @@ const styles$8 = {
 const BarDisplay = ({
   taskId,
   barCornerRadius,
-  // isCritical,
-  // isSelected,
-  // hasChildren,
+  isCritical,
+  isSelected,
+  hasChildren,
   height,
   progressWidth,
   progressX,
@@ -11994,11 +11994,60 @@ const BarDisplay = ({
   x,
   y,
   customStyle,
-  dataDateX,
-  splitbarColors,
-  showProgressBar = true,
-  progressBarColor
+  showProgress = true,
+  progressColor
 }) => {
+  const processColor = useMemo(() => {
+    if (progressColor) {
+      return progressColor;
+    }
+    if (isCritical) {
+      if (hasChildren) {
+        if (isSelected) {
+          return "var(--gantt-group-progress-selected-critical-color)";
+        }
+        return "var(--gantt-group-progress-critical-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-bar-progress-selected-critical-color)";
+      }
+      return "var(--gantt-bar-progress-critical-color)";
+    }
+    if (hasChildren) {
+      if (isSelected) {
+        return "var(--gantt-group-progress-selected-color)";
+      }
+      return "var(--gantt-group-progress-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-bar-progress-selected-color)";
+    }
+    return "var(--gantt-bar-progress-color)";
+  }, [isSelected, isCritical, hasChildren, progressColor]);
+  const barColor = useMemo(() => {
+    if (isCritical) {
+      if (hasChildren) {
+        if (isSelected) {
+          return "var(--gantt-group-background-selected-critical-color)";
+        }
+        return "var(--gantt-group-background-critical-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-bar-background-selected-critical-color)";
+      }
+      return "var(--gantt-bar-background-critical-color)";
+    }
+    if (hasChildren) {
+      if (isSelected) {
+        return "var(--gantt-group-background-selected-color)";
+      }
+      return "var(--gantt-group-background-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-bar-background-selected-color)";
+    }
+    return "var(--gantt-bar-background-color)";
+  }, [isSelected, isCritical, hasChildren]);
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -12016,40 +12065,7 @@ const BarDisplay = ({
         }
       },
       children: [
-        typeof dataDateX === "number" ? (() => {
-          var _a, _b;
-          const localSplit = Math.max(0, Math.min(width, dataDateX - x));
-          const leftFill = ((_a = splitbarColors == null ? void 0 : splitbarColors.task) == null ? void 0 : _a.onTime) || "var(--gantt-bar-background-color)";
-          const rightFill = ((_b = splitbarColors == null ? void 0 : splitbarColors.task) == null ? void 0 : _b.delayed) || "var(--gantt-bar-background-color)";
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x,
-                width: localSplit,
-                y,
-                height,
-                ry: barCornerRadius,
-                rx: barCornerRadius,
-                fill: leftFill,
-                className: styles$8.barBackground
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x + localSplit,
-                width: Math.max(0, width - localSplit),
-                y,
-                height,
-                ry: barCornerRadius,
-                rx: barCornerRadius,
-                fill: rightFill,
-                className: styles$8.barBackground
-              }
-            )
-          ] });
-        })() : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "rect",
           {
             x,
@@ -12058,11 +12074,11 @@ const BarDisplay = ({
             height,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: "unset",
+            fill: barColor,
             className: styles$8.barBackground
           }
         ),
-        showProgressBar && /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -12071,7 +12087,7 @@ const BarDisplay = ({
             height,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: progressBarColor || "var(--gantt-bar-progress-color)"
+            fill: processColor
           }
         )
       ]
@@ -12126,8 +12142,8 @@ const ProjectDisplay = ({
   taskName: taskName2,
   taskHalfHeight,
   taskHeight,
-  // isSelected,
-  // isCritical,
+  isSelected,
+  isCritical,
   progressWidth,
   progressX,
   taskYOffset,
@@ -12136,11 +12152,36 @@ const ProjectDisplay = ({
   x2,
   startMoveFullTask,
   customStyle,
-  dataDateX,
-  splitbarColors,
-  showProgressBar = true,
-  progressBarColor
+  showProgress = true,
+  progressColor
 }) => {
+  const barColor = useMemo(() => {
+    if (isCritical) {
+      if (isSelected) {
+        return "var(--gantt-project-background-selected-critical-color)";
+      }
+      return "var(--gantt-project-background-critical-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-project-background-selected-color)";
+    }
+    return "var(--gantt-project-background-color)";
+  }, [isSelected, isCritical]);
+  const processColor = useMemo(() => {
+    if (progressColor) {
+      return progressColor;
+    }
+    if (isCritical) {
+      if (isSelected) {
+        return "var(--gantt-project-progress-selected-critical-color)";
+      }
+      return "var(--gantt-project-progress-critical-color)";
+    }
+    if (isSelected) {
+      return "var(--gantt-project-progress-selected-color)";
+    }
+    return "var(--gantt-project-progress-color)";
+  }, [isSelected, isCritical, progressColor]);
   const projectLeftTriangle = [
     x1,
     taskYOffset + taskHeight / 2 - 1,
@@ -12174,53 +12215,20 @@ const ProjectDisplay = ({
       },
       className: styles$7.projectWrapper,
       children: [
-        typeof dataDateX === "number" ? (() => {
-          var _a, _b;
-          const localSplit = Math.max(0, Math.min(width, dataDateX - x1));
-          const leftFill = ((_a = splitbarColors == null ? void 0 : splitbarColors.project) == null ? void 0 : _a.onTime) || "var(--gantt-project-background-color)";
-          const rightFill = ((_b = splitbarColors == null ? void 0 : splitbarColors.project) == null ? void 0 : _b.delayed) || "var(--gantt-project-background-color)";
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x1,
-                width: localSplit,
-                y: taskYOffset,
-                height: taskHeight,
-                rx: barCornerRadius,
-                ry: barCornerRadius,
-                className: styles$7.projectBackground,
-                fill: leftFill
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "rect",
-              {
-                x: x1 + localSplit,
-                width: Math.max(0, width - localSplit),
-                y: taskYOffset,
-                height: taskHeight,
-                rx: barCornerRadius,
-                ry: barCornerRadius,
-                className: styles$7.projectBackground,
-                fill: rightFill
-              }
-            )
-          ] });
-        })() : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "rect",
           {
+            fill: barColor,
             x: x1,
             width,
             y: taskYOffset,
             height: taskHeight,
             rx: barCornerRadius,
             ry: barCornerRadius,
-            className: styles$7.projectBackground,
-            fill: "unset"
+            className: styles$7.projectBackground
           }
         ),
-        showProgressBar && /* @__PURE__ */ jsx(
+        showProgress && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -12229,13 +12237,13 @@ const ProjectDisplay = ({
             height: taskHeight,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: progressBarColor || "var(--gantt-bar-progress-color)"
+            fill: processColor
           }
         ),
         /* @__PURE__ */ jsx(
           "rect",
           {
-            fill: "unset",
+            fill: barColor,
             x: x1,
             width,
             y: taskYOffset,
@@ -12250,7 +12258,7 @@ const ProjectDisplay = ({
           {
             className: styles$7.projectTop,
             points: projectLeftTriangle,
-            fill: "unset"
+            fill: barColor
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12258,7 +12266,7 @@ const ProjectDisplay = ({
           {
             className: styles$7.projectTop,
             points: projectRightTriangle,
-            fill: "unset"
+            fill: barColor
           }
         )
       ]
@@ -12329,10 +12337,8 @@ const Bar = (props) => {
     x2,
     movingAction,
     ganttRelationEvent,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   useMemo(() => width < 30, [width]);
   const handleHeight = useMemo(() => taskHeight - 2, [taskHeight]);
@@ -12394,10 +12400,8 @@ const Bar = (props) => {
           isCritical,
           hasChildren,
           startMoveFullTask,
-          dataDateX,
-          splitbarColors,
-          showProgressBar,
-          progressBarColor
+          showProgress,
+          progressColor
         }
       );
     } else {
@@ -12417,10 +12421,8 @@ const Bar = (props) => {
           isCritical,
           hasChildren,
           startMoveFullTask,
-          dataDateX,
-          splitbarColors,
-          showProgressBar,
-          progressBarColor
+          showProgress,
+          progressColor
         }
       );
     }
@@ -12979,10 +12981,8 @@ const TaskGanttContentInner = (props) => {
     taskBarMovingAction,
     waitCommitTasks,
     viewMode,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   const renderedHolidays = useMemo(() => {
     const { columnWidth } = distances;
@@ -13069,11 +13069,6 @@ const TaskGanttContentInner = (props) => {
         x2: taskX2,
         comparisonDates
       } = getTaskCoordinates2(task);
-      const containerXAbs = Math.max(
-        containerX + (additionalLeftSpace || 0),
-        0
-      );
-      const dataDateXLocal = typeof dataDateX === "number" ? dataDateX - containerXAbs : void 0;
       tasksRes.push(
         /* @__PURE__ */ jsx(
           "svg",
@@ -13118,10 +13113,8 @@ const TaskGanttContentInner = (props) => {
                 onDeleteTask,
                 renderCustomLabel,
                 viewMode,
-                dataDateX: dataDateXLocal,
-                splitbarColors,
-                showProgressBar,
-                progressBarColor
+                showProgress,
+                progressColor
               }
             )
           },
@@ -13331,10 +13324,6 @@ const TaskGanttContentInner = (props) => {
     isDateChangeable,
     isRelationChangeable,
     visibleTasksMirror,
-    dataDateX,
-    splitbarColors,
-    showProgressBar,
-    progressBarColor,
     onArrowDoubleClick
   ]);
   return /* @__PURE__ */ jsxs("g", { className: "content", children: [
@@ -18780,9 +18769,8 @@ const Gantt = (props) => {
     dataDateColor,
     todayLabel = "Today",
     dataDateLabel = "Data Date",
-    splitbarColors,
-    showProgressBar = true,
-    progressBarColor
+    showProgress = true,
+    progressColor
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19945,21 +19933,6 @@ const Gantt = (props) => {
       dataDateLabel
     ]
   );
-  const dataDateX = useMemo(() => {
-    if (!dataDate)
-      return void 0;
-    try {
-      const x = taskXCoordinate(
-        dataDate,
-        startDate,
-        viewMode,
-        distances.columnWidth
-      );
-      return additionalLeftSpace + x;
-    } catch {
-      return void 0;
-    }
-  }, [dataDate, startDate, viewMode, distances, additionalLeftSpace]);
   const calendarProps = useMemo(
     () => ({
       additionalLeftSpace,
@@ -19993,11 +19966,6 @@ const Gantt = (props) => {
   const renderTaskBarProps = useMemo(
     () => ({
       ...taskBar,
-      splitbarColors,
-      dataDate,
-      dataDateX,
-      showProgressBar,
-      progressBarColor,
       taskBarMovingAction: (task) => {
         var _a2;
         return task.id === ((_a2 = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _a2.id) ? changeInProgress.action : null;
@@ -20033,16 +20001,13 @@ const Gantt = (props) => {
       taskHeight,
       taskYOffset,
       visibleTasksMirror,
-      viewMode
+      viewMode,
+      showProgress,
+      progressColor
     }),
     [
       viewMode,
       taskBar,
-      splitbarColors,
-      dataDate,
-      dataDateX,
-      showProgressBar,
-      progressBarColor,
       authorizedRelations,
       additionalLeftSpace,
       additionalRightSpace,
@@ -20075,7 +20040,9 @@ const Gantt = (props) => {
       visibleTasksMirror,
       (_b = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _b.id,
       changeInProgress == null ? void 0 : changeInProgress.action,
-      handleDeleteTasks
+      handleDeleteTasks,
+      showProgress,
+      progressColor
     ]
   );
   const renderTaskListProps = useMemo(

package/dist/gantt-task-react.umd.js

@@ -12000,9 +12000,9 @@
   const BarDisplay = ({
     taskId,
     barCornerRadius,
-    // isCritical,
-    // isSelected,
-    // hasChildren,
+    isCritical,
+    isSelected,
+    hasChildren,
     height,
     progressWidth,
     progressX,
@@ -12011,11 +12011,60 @@
     x,
     y,
     customStyle,
-    dataDateX,
-    splitbarColors,
-    showProgressBar = true,
-    progressBarColor
+    showProgress = true,
+    progressColor
   }) => {
+    const processColor = React.useMemo(() => {
+      if (progressColor) {
+        return progressColor;
+      }
+      if (isCritical) {
+        if (hasChildren) {
+          if (isSelected) {
+            return "var(--gantt-group-progress-selected-critical-color)";
+          }
+          return "var(--gantt-group-progress-critical-color)";
+        }
+        if (isSelected) {
+          return "var(--gantt-bar-progress-selected-critical-color)";
+        }
+        return "var(--gantt-bar-progress-critical-color)";
+      }
+      if (hasChildren) {
+        if (isSelected) {
+          return "var(--gantt-group-progress-selected-color)";
+        }
+        return "var(--gantt-group-progress-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-bar-progress-selected-color)";
+      }
+      return "var(--gantt-bar-progress-color)";
+    }, [isSelected, isCritical, hasChildren, progressColor]);
+    const barColor = React.useMemo(() => {
+      if (isCritical) {
+        if (hasChildren) {
+          if (isSelected) {
+            return "var(--gantt-group-background-selected-critical-color)";
+          }
+          return "var(--gantt-group-background-critical-color)";
+        }
+        if (isSelected) {
+          return "var(--gantt-bar-background-selected-critical-color)";
+        }
+        return "var(--gantt-bar-background-critical-color)";
+      }
+      if (hasChildren) {
+        if (isSelected) {
+          return "var(--gantt-group-background-selected-color)";
+        }
+        return "var(--gantt-group-background-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-bar-background-selected-color)";
+      }
+      return "var(--gantt-bar-background-color)";
+    }, [isSelected, isCritical, hasChildren]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
@@ -12033,40 +12082,7 @@
           }
         },
         children: [
-          typeof dataDateX === "number" ? (() => {
-            var _a, _b;
-            const localSplit = Math.max(0, Math.min(width, dataDateX - x));
-            const leftFill = ((_a = splitbarColors == null ? void 0 : splitbarColors.task) == null ? void 0 : _a.onTime) || "var(--gantt-bar-background-color)";
-            const rightFill = ((_b = splitbarColors == null ? void 0 : splitbarColors.task) == null ? void 0 : _b.delayed) || "var(--gantt-bar-background-color)";
-            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x,
-                  width: localSplit,
-                  y,
-                  height,
-                  ry: barCornerRadius,
-                  rx: barCornerRadius,
-                  fill: leftFill,
-                  className: styles$8.barBackground
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: x + localSplit,
-                  width: Math.max(0, width - localSplit),
-                  y,
-                  height,
-                  ry: barCornerRadius,
-                  rx: barCornerRadius,
-                  fill: rightFill,
-                  className: styles$8.barBackground
-                }
-              )
-            ] });
-          })() : /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x,
@@ -12075,11 +12091,11 @@
               height,
               ry: barCornerRadius,
               rx: barCornerRadius,
-              fill: "unset",
+              fill: barColor,
               className: styles$8.barBackground
             }
           ),
-          showProgressBar && /* @__PURE__ */ jsxRuntime.jsx(
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: progressX,
@@ -12088,7 +12104,7 @@
               height,
               ry: barCornerRadius,
               rx: barCornerRadius,
-              fill: progressBarColor || "var(--gantt-bar-progress-color)"
+              fill: processColor
             }
           )
         ]
@@ -12143,8 +12159,8 @@
     taskName: taskName2,
     taskHalfHeight,
     taskHeight,
-    // isSelected,
-    // isCritical,
+    isSelected,
+    isCritical,
     progressWidth,
     progressX,
     taskYOffset,
@@ -12153,11 +12169,36 @@
     x2,
     startMoveFullTask,
     customStyle,
-    dataDateX,
-    splitbarColors,
-    showProgressBar = true,
-    progressBarColor
+    showProgress = true,
+    progressColor
   }) => {
+    const barColor = React.useMemo(() => {
+      if (isCritical) {
+        if (isSelected) {
+          return "var(--gantt-project-background-selected-critical-color)";
+        }
+        return "var(--gantt-project-background-critical-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-project-background-selected-color)";
+      }
+      return "var(--gantt-project-background-color)";
+    }, [isSelected, isCritical]);
+    const processColor = React.useMemo(() => {
+      if (progressColor) {
+        return progressColor;
+      }
+      if (isCritical) {
+        if (isSelected) {
+          return "var(--gantt-project-progress-selected-critical-color)";
+        }
+        return "var(--gantt-project-progress-critical-color)";
+      }
+      if (isSelected) {
+        return "var(--gantt-project-progress-selected-color)";
+      }
+      return "var(--gantt-project-progress-color)";
+    }, [isSelected, isCritical, progressColor]);
     const projectLeftTriangle = [
       x1,
       taskYOffset + taskHeight / 2 - 1,
@@ -12191,53 +12232,20 @@
         },
         className: styles$7.projectWrapper,
         children: [
-          typeof dataDateX === "number" ? (() => {
-            var _a, _b;
-            const localSplit = Math.max(0, Math.min(width, dataDateX - x1));
-            const leftFill = ((_a = splitbarColors == null ? void 0 : splitbarColors.project) == null ? void 0 : _a.onTime) || "var(--gantt-project-background-color)";
-            const rightFill = ((_b = splitbarColors == null ? void 0 : splitbarColors.project) == null ? void 0 : _b.delayed) || "var(--gantt-project-background-color)";
-            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: x1,
-                  width: localSplit,
-                  y: taskYOffset,
-                  height: taskHeight,
-                  rx: barCornerRadius,
-                  ry: barCornerRadius,
-                  className: styles$7.projectBackground,
-                  fill: leftFill
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "rect",
-                {
-                  x: x1 + localSplit,
-                  width: Math.max(0, width - localSplit),
-                  y: taskYOffset,
-                  height: taskHeight,
-                  rx: barCornerRadius,
-                  ry: barCornerRadius,
-                  className: styles$7.projectBackground,
-                  fill: rightFill
-                }
-              )
-            ] });
-          })() : /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
+              fill: barColor,
               x: x1,
               width,
               y: taskYOffset,
               height: taskHeight,
               rx: barCornerRadius,
               ry: barCornerRadius,
-              className: styles$7.projectBackground,
-              fill: "unset"
+              className: styles$7.projectBackground
             }
           ),
-          showProgressBar && /* @__PURE__ */ jsxRuntime.jsx(
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: progressX,
@@ -12246,13 +12254,13 @@
               height: taskHeight,
               ry: barCornerRadius,
               rx: barCornerRadius,
-              fill: progressBarColor || "var(--gantt-bar-progress-color)"
+              fill: processColor
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
-              fill: "unset",
+              fill: barColor,
               x: x1,
               width,
               y: taskYOffset,
@@ -12267,7 +12275,7 @@
             {
               className: styles$7.projectTop,
               points: projectLeftTriangle,
-              fill: "unset"
+              fill: barColor
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -12275,7 +12283,7 @@
             {
               className: styles$7.projectTop,
               points: projectRightTriangle,
-              fill: "unset"
+              fill: barColor
             }
           )
         ]
@@ -12346,10 +12354,8 @@
       x2,
       movingAction,
       ganttRelationEvent,
-      dataDateX,
-      splitbarColors,
-      showProgressBar,
-      progressBarColor
+      showProgress = true,
+      progressColor
     } = props;
     React.useMemo(() => width < 30, [width]);
     const handleHeight = React.useMemo(() => taskHeight - 2, [taskHeight]);
@@ -12411,10 +12417,8 @@
             isCritical,
             hasChildren,
             startMoveFullTask,
-            dataDateX,
-            splitbarColors,
-            showProgressBar,
-            progressBarColor
+            showProgress,
+            progressColor
           }
         );
       } else {
@@ -12434,10 +12438,8 @@
             isCritical,
             hasChildren,
             startMoveFullTask,
-            dataDateX,
-            splitbarColors,
-            showProgressBar,
-            progressBarColor
+            showProgress,
+            progressColor
           }
         );
       }
@@ -12996,10 +12998,8 @@
       taskBarMovingAction,
       waitCommitTasks,
       viewMode,
-      dataDateX,
-      splitbarColors,
-      showProgressBar,
-      progressBarColor
+      showProgress = true,
+      progressColor
     } = props;
     const renderedHolidays = React.useMemo(() => {
       const { columnWidth } = distances;
@@ -13086,11 +13086,6 @@
           x2: taskX2,
           comparisonDates
         } = getTaskCoordinates2(task);
-        const containerXAbs = Math.max(
-          containerX + (additionalLeftSpace || 0),
-          0
-        );
-        const dataDateXLocal = typeof dataDateX === "number" ? dataDateX - containerXAbs : void 0;
         tasksRes.push(
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
@@ -13135,10 +13130,8 @@
                   onDeleteTask,
                   renderCustomLabel,
                   viewMode,
-                  dataDateX: dataDateXLocal,
-                  splitbarColors,
-                  showProgressBar,
-                  progressBarColor
+                  showProgress,
+                  progressColor
                 }
               )
             },
@@ -13348,10 +13341,6 @@
       isDateChangeable,
       isRelationChangeable,
       visibleTasksMirror,
-      dataDateX,
-      splitbarColors,
-      showProgressBar,
-      progressBarColor,
       onArrowDoubleClick
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "content", children: [
@@ -18797,9 +18786,8 @@
       dataDateColor,
       todayLabel = "Today",
       dataDateLabel = "Data Date",
-      splitbarColors,
-      showProgressBar = true,
-      progressBarColor
+      showProgress = true,
+      progressColor
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -19962,21 +19950,6 @@
         dataDateLabel
       ]
     );
-    const dataDateX = React.useMemo(() => {
-      if (!dataDate)
-        return void 0;
-      try {
-        const x = taskXCoordinate(
-          dataDate,
-          startDate,
-          viewMode,
-          distances.columnWidth
-        );
-        return additionalLeftSpace + x;
-      } catch {
-        return void 0;
-      }
-    }, [dataDate, startDate, viewMode, distances, additionalLeftSpace]);
     const calendarProps = React.useMemo(
       () => ({
         additionalLeftSpace,
@@ -20010,11 +19983,6 @@
     const renderTaskBarProps = React.useMemo(
       () => ({
         ...taskBar,
-        splitbarColors,
-        dataDate,
-        dataDateX,
-        showProgressBar,
-        progressBarColor,
         taskBarMovingAction: (task) => {
           var _a2;
           return task.id === ((_a2 = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _a2.id) ? changeInProgress.action : null;
@@ -20050,16 +20018,13 @@
         taskHeight,
         taskYOffset,
         visibleTasksMirror,
-        viewMode
+        viewMode,
+        showProgress,
+        progressColor
       }),
       [
         viewMode,
         taskBar,
-        splitbarColors,
-        dataDate,
-        dataDateX,
-        showProgressBar,
-        progressBarColor,
         authorizedRelations,
         additionalLeftSpace,
         additionalRightSpace,
@@ -20092,7 +20057,9 @@
         visibleTasksMirror,
         (_b = changeInProgress == null ? void 0 : changeInProgress.changedTask) == null ? void 0 : _b.id,
         changeInProgress == null ? void 0 : changeInProgress.action,
-        handleDeleteTasks
+        handleDeleteTasks,
+        showProgress,
+        progressColor
       ]
     );
     const renderTaskListProps = React.useMemo(

package/dist/types/public-types.d.ts

@@ -353,31 +353,13 @@ export interface GanttProps {
      */
     dataDateLabel?: string;
     /**
-     * Colors to use when splitting bars at the data date line.
-     * Structure: { task?: { onTime?: string; delayed?: string }, project?: { onTime?: string; delayed?: string }, comparison?: { onTime?: string; delayed?: string } }
-     */
-    splitbarColors?: {
-        task?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        project?: {
-            onTime?: string;
-            delayed?: string;
-        };
-        comparison?: {
-            onTime?: string;
-            delayed?: string;
-        };
-    };
-    /**
-     * Show or hide the progress bar overlay on tasks. Defaults to true.
+     * Show/hide progress bar on task bars. Defaults to true.
      */
-    showProgressBar?: boolean;
+    showProgress?: boolean;
     /**
-     * Color for the progress bar overlay. If not provided, theme progress color is used.
+     * Custom color for progress bars. If not provided, theme progress colors are used.
      */
-    progressBarColor?: string;
+    progressColor?: string;
 }
 export interface GanttTaskBarActions {
     allowMoveTaskBar?: (action: TaskBarMoveAction, task: RenderTask) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",