gantt-task-react-v 1.0.47 → 1.0.49

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

@@ -14,6 +14,26 @@ 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;

package/dist/components/gantt-today/index.d.ts

@@ -11,5 +11,10 @@ export type GanttTodayProps = {
     showTodayLine?: boolean;
     showDataDateLine?: boolean;
     dataDate?: Date | null;
+    dataDateX?: number;
+    todayColor?: string | null;
+    dataDateColor?: string | null;
+    todayLabel?: string;
+    dataDateLabel?: string;
 };
 export declare const GanttToday: React.NamedExoticComponent<GanttTodayProps>;

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

@@ -14,6 +14,23 @@ 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;
 };
 export declare const BarDisplay: React.FC<BarDisplayProps>;
 export {};

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

@@ -15,6 +15,23 @@ 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;
 };
 export declare const ProjectDisplay: React.FC<ProjectDisplayProps>;
 export {};

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

@@ -13,6 +13,23 @@ 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;

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

@@ -10912,12 +10912,16 @@ const GanttTodayInner = ({
   distances: { columnWidth },
   ganttFullHeight,
   isUnknownDates,
-  rtl,
   startDate,
   viewMode,
   showTodayLine = true,
   showDataDateLine = false,
-  dataDate = null
+  dataDate = null,
+  dataDateX,
+  todayColor = null,
+  dataDateColor = null,
+  todayLabel = "Today",
+  dataDateLabel = "Data Date"
 }) => {
   const todayElement = useMemo(() => {
     if (isUnknownDates || !showTodayLine) {
@@ -10941,125 +10945,147 @@ const GanttTodayInner = ({
           return 1 + percent * 0.5;
         }
         case ViewMode.Year: {
-          const percent = today.getMonth() / 12;
+          const todayOfYear = Math.floor(
+            (today.getTime() - new Date(today.getFullYear(), 0, 0).getTime()) / (1e3 * 60 * 60 * 24)
+          );
+          const totalDaysInYear = new Date(today.getFullYear(), 11, 31).getDate() === 31 ? 366 : 365;
+          const percent = todayOfYear / totalDaysInYear;
           return 1 + percent * 0.5;
         }
         default:
           return 1;
       }
     };
-    const tickX = todayIndex * columnWidth * extraMultiplier();
-    const x = rtl ? tickX + columnWidth : tickX;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
+    const x = additionalLeftSpace + todayIndex * columnWidth * extraMultiplier();
+    return /* @__PURE__ */ jsxs("g", { className: "today-line", children: [
       /* @__PURE__ */ jsx(
-        "rect",
+        "line",
         {
-          x: additionalLeftSpace + x,
-          y: 0,
-          width: 2,
-          height: ganttFullHeight,
-          fill: "var(--gantt-calendar-today-color)"
+          x1: x,
+          y1: 0,
+          x2: x,
+          y2: ganttFullHeight,
+          className: styles$c.todayLine,
+          stroke: todayColor || void 0
         }
       ),
       /* @__PURE__ */ jsx(
-        "circle",
+        "polygon",
         {
-          className: styles$c.ganttTodayCircle,
-          cx: x + 1,
-          cy: 6,
-          r: 6,
-          fill: "var(--gantt-calendar-today-color)"
+          className: styles$c.todayTriangle,
+          fill: todayColor || void 0,
+          points: `${x},0 ${x - 5},8 ${x + 5},8`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x,
+          y: 15,
+          className: styles$c.todayLabel,
+          fill: todayColor || void 0,
+          textAnchor: "middle",
+          children: todayLabel
         }
       )
-    ] });
+    ] }, "today-line");
   }, [
-    additionalLeftSpace,
-    columnWidth,
-    ganttFullHeight,
     isUnknownDates,
-    rtl,
+    showTodayLine,
     startDate,
     viewMode,
-    showTodayLine
+    additionalLeftSpace,
+    columnWidth,
+    ganttFullHeight,
+    todayColor,
+    todayLabel
   ]);
   const dataDateElement = useMemo(() => {
-    if (!showDataDateLine || !dataDate) {
+    if (isUnknownDates || !showDataDateLine || !dataDate) {
       return null;
     }
-    const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
-    const extraMultiplier = () => {
-      switch (viewMode) {
-        case ViewMode.Week: {
-          const percent = dataDate.getDay() / 7;
-          return 1 + percent * 0.2;
-        }
-        case ViewMode.Month: {
-          const dayInMonth = dataDate.getDate();
-          const maxDaysInMonth = getDaysInMonth(
-            dataDate.getMonth(),
-            dataDate.getFullYear()
-          );
-          const percent = dayInMonth / maxDaysInMonth;
-          return 1 + percent * 0.5;
-        }
-        case ViewMode.Year: {
-          const percent = dataDate.getMonth() / 12;
-          return 1 + percent * 0.5;
+    let x;
+    if (dataDateX !== void 0) {
+      x = dataDateX;
+    } else {
+      const dataDateIndex = getDatesDiff(dataDate, startDate, viewMode);
+      const extraMultiplier = () => {
+        switch (viewMode) {
+          case ViewMode.Week: {
+            const percent = dataDate.getDay() / 7;
+            return 1 + percent * 0.2;
+          }
+          case ViewMode.Month: {
+            const dayInMonth = dataDate.getDate();
+            const maxDaysInMonth = getDaysInMonth(
+              dataDate.getMonth(),
+              dataDate.getFullYear()
+            );
+            const percent = dayInMonth / maxDaysInMonth;
+            return 1 + percent * 0.5;
+          }
+          case ViewMode.Year: {
+            const dataDateOfYear = Math.floor(
+              (dataDate.getTime() - new Date(dataDate.getFullYear(), 0, 0).getTime()) / (1e3 * 60 * 60 * 24)
+            );
+            const totalDaysInYear = new Date(dataDate.getFullYear(), 11, 31).getDate() === 31 ? 366 : 365;
+            const percent = dataDateOfYear / totalDaysInYear;
+            return 1 + percent * 0.5;
+          }
+          default:
+            return 1;
         }
-        default:
-          return 1;
-      }
-    };
-    const tickX = dataIndex * columnWidth * extraMultiplier();
-    const x = rtl ? tickX + columnWidth : tickX;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      };
+      x = additionalLeftSpace + dataDateIndex * columnWidth * extraMultiplier();
+    }
+    return /* @__PURE__ */ jsxs("g", { className: "data-date-line", children: [
       /* @__PURE__ */ jsx(
-        "rect",
+        "line",
         {
-          x: additionalLeftSpace + x,
-          y: 0,
-          width: 2,
-          height: ganttFullHeight,
-          fill: "var(--gantt-calendar-today-color)",
-          opacity: 0.9
+          x1: x,
+          y1: 0,
+          x2: x,
+          y2: ganttFullHeight,
+          className: styles$c.dataDateLine,
+          stroke: dataDateColor || void 0
         }
       ),
       /* @__PURE__ */ jsx(
-        "circle",
+        "polygon",
         {
-          className: styles$c.ganttTodayCircle,
-          cx: x + 1,
-          cy: 6,
-          r: 6,
-          fill: "var(--gantt-calendar-today-color)"
+          className: styles$c.dataDateTriangle,
+          fill: dataDateColor || void 0,
+          points: `${x},0 ${x - 5},8 ${x + 5},8`
         }
       ),
       /* @__PURE__ */ jsx(
         "text",
         {
-          x: additionalLeftSpace + x + 8,
-          y: 6,
-          dy: 2,
-          fill: "var(--gantt-calendar-today-color)",
-          fontSize: 12,
-          fontWeight: 600,
-          children: "Data Date"
+          x,
+          y: 30,
+          className: styles$c.dataDateLabel,
+          fill: dataDateColor || void 0,
+          textAnchor: "middle",
+          children: dataDateLabel
         }
       )
-    ] });
+    ] }, "data-date-line");
   }, [
+    isUnknownDates,
+    showDataDateLine,
+    dataDate,
+    dataDateX,
+    startDate,
+    viewMode,
     additionalLeftSpace,
     columnWidth,
     ganttFullHeight,
-    rtl,
-    startDate,
-    viewMode,
-    showDataDateLine,
-    dataDate
+    dataDateColor,
+    dataDateLabel
   ]);
-  return /* @__PURE__ */ jsxs("g", { className: "today", children: [
-    dataDateElement,
-    todayElement
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    todayElement,
+    dataDateElement
   ] });
 };
 const GanttToday = memo(GanttTodayInner);
@@ -11973,7 +11999,11 @@ const BarDisplay = ({
   width,
   x,
   y,
-  customStyle
+  customStyle,
+  dataDateX,
+  splitbarColors,
+  showProgressBar = true,
+  progressBarColor
 }) => {
   return /* @__PURE__ */ jsxs(
     "g",
@@ -11992,7 +12022,40 @@ const BarDisplay = ({
         }
       },
       children: [
-        /* @__PURE__ */ jsx(
+        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(
           "rect",
           {
             x,
@@ -12005,7 +12068,7 @@ const BarDisplay = ({
             className: styles$8.barBackground
           }
         ),
-        /* @__PURE__ */ jsx(
+        showProgressBar && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -12014,7 +12077,7 @@ const BarDisplay = ({
             height,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: "unset"
+            fill: progressBarColor || "var(--gantt-bar-progress-color)"
           }
         )
       ]
@@ -12078,7 +12141,11 @@ const ProjectDisplay = ({
   x1,
   x2,
   startMoveFullTask,
-  customStyle
+  customStyle,
+  dataDateX,
+  splitbarColors,
+  showProgressBar = true,
+  progressBarColor
 }) => {
   const projectLeftTriangle = [
     x1,
@@ -12113,7 +12180,40 @@ const ProjectDisplay = ({
       },
       className: styles$7.projectWrapper,
       children: [
-        /* @__PURE__ */ jsx(
+        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(
           "rect",
           {
             x: x1,
@@ -12126,7 +12226,7 @@ const ProjectDisplay = ({
             fill: "unset"
           }
         ),
-        /* @__PURE__ */ jsx(
+        showProgressBar && /* @__PURE__ */ jsx(
           "rect",
           {
             x: progressX,
@@ -12135,7 +12235,7 @@ const ProjectDisplay = ({
             height: taskHeight,
             ry: barCornerRadius,
             rx: barCornerRadius,
-            fill: "unset"
+            fill: progressBarColor || "var(--gantt-bar-progress-color)"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -12234,7 +12334,11 @@ const Bar = (props) => {
     x1,
     x2,
     movingAction,
-    ganttRelationEvent
+    ganttRelationEvent,
+    dataDateX,
+    splitbarColors,
+    showProgressBar,
+    progressBarColor
   } = props;
   useMemo(() => width < 30, [width]);
   const handleHeight = useMemo(() => taskHeight - 2, [taskHeight]);
@@ -12295,7 +12399,11 @@ const Bar = (props) => {
           isSelected,
           isCritical,
           hasChildren,
-          startMoveFullTask
+          startMoveFullTask,
+          dataDateX,
+          splitbarColors,
+          showProgressBar,
+          progressBarColor
         }
       );
     } else {
@@ -12314,7 +12422,11 @@ const Bar = (props) => {
           isSelected,
           isCritical,
           hasChildren,
-          startMoveFullTask
+          startMoveFullTask,
+          dataDateX,
+          splitbarColors,
+          showProgressBar,
+          progressBarColor
         }
       );
     }
@@ -12687,10 +12799,13 @@ const TaskItemInner = (props) => {
     },
     [onTooltipTask, task]
   );
-  const onMouseLeave = useCallback((event) => {
-    event.stopPropagation();
-    onTooltipTask(null, null);
-  }, [onTooltipTask]);
+  const onMouseLeave = useCallback(
+    (event) => {
+      event.stopPropagation();
+      onTooltipTask(null, null);
+    },
+    [onTooltipTask]
+  );
   return /* @__PURE__ */ jsxs(
     "g",
     {
@@ -12869,7 +12984,11 @@ const TaskGanttContentInner = (props) => {
     renderCustomLabel,
     taskBarMovingAction,
     waitCommitTasks,
-    viewMode
+    viewMode,
+    dataDateX,
+    splitbarColors,
+    showProgressBar,
+    progressBarColor
   } = props;
   const renderedHolidays = useMemo(() => {
     const { columnWidth } = distances;
@@ -12956,6 +13075,11 @@ 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",
@@ -12999,7 +13123,11 @@ const TaskGanttContentInner = (props) => {
                 rtl,
                 onDeleteTask,
                 renderCustomLabel,
-                viewMode
+                viewMode,
+                dataDateX: dataDateXLocal,
+                splitbarColors,
+                showProgressBar,
+                progressBarColor
               }
             )
           },
@@ -13209,6 +13337,10 @@ const TaskGanttContentInner = (props) => {
     isDateChangeable,
     isRelationChangeable,
     visibleTasksMirror,
+    dataDateX,
+    splitbarColors,
+    showProgressBar,
+    progressBarColor,
     onArrowDoubleClick
   ]);
   return /* @__PURE__ */ jsxs("g", { className: "content", children: [
@@ -18649,7 +18781,14 @@ const Gantt = (props) => {
     rowHeight,
     showTodayLine = true,
     showDataDateLine = false,
-    dataDate = null
+    dataDate = null,
+    todayColor,
+    dataDateColor,
+    todayLabel = "Today",
+    dataDateLabel = "Data Date",
+    splitbarColors,
+    showProgressBar = true,
+    progressBarColor
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -19778,6 +19917,29 @@ const Gantt = (props) => {
     () => svgWidth + additionalLeftSpace + additionalRightSpace,
     [additionalLeftSpace, additionalRightSpace, svgWidth]
   );
+  const dataDateX = useMemo(() => {
+    if (!dataDate)
+      return void 0;
+    try {
+      const roundedDataDate = roundStartDate(dataDate);
+      const x = taskXCoordinate(
+        roundedDataDate,
+        startDate,
+        viewMode,
+        distances.columnWidth
+      );
+      return additionalLeftSpace + x;
+    } catch {
+      return void 0;
+    }
+  }, [
+    dataDate,
+    startDate,
+    viewMode,
+    distances,
+    additionalLeftSpace,
+    roundStartDate
+  ]);
   const gridProps = useMemo(
     () => ({
       additionalLeftSpace,
@@ -19789,7 +19951,12 @@ const Gantt = (props) => {
       viewMode,
       showTodayLine,
       showDataDateLine,
-      dataDate
+      dataDate,
+      dataDateX,
+      todayColor,
+      dataDateColor,
+      todayLabel,
+      dataDateLabel
     }),
     [
       additionalLeftSpace,
@@ -19801,7 +19968,12 @@ const Gantt = (props) => {
       viewMode,
       showTodayLine,
       showDataDateLine,
-      dataDate
+      dataDate,
+      dataDateX,
+      todayColor,
+      dataDateColor,
+      todayLabel,
+      dataDateLabel
     ]
   );
   const calendarProps = useMemo(
@@ -19837,6 +20009,11 @@ 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;
@@ -19877,6 +20054,11 @@ const Gantt = (props) => {
     [
       viewMode,
       taskBar,
+      splitbarColors,
+      dataDate,
+      dataDateX,
+      showProgressBar,
+      progressBarColor,
       authorizedRelations,
       additionalLeftSpace,
       additionalRightSpace,

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

@@ -10929,12 +10929,16 @@
     distances: { columnWidth },
     ganttFullHeight,
     isUnknownDates,
-    rtl,
     startDate,
     viewMode,
     showTodayLine = true,
     showDataDateLine = false,
-    dataDate = null
+    dataDate = null,
+    dataDateX,
+    todayColor = null,
+    dataDateColor = null,
+    todayLabel = "Today",
+    dataDateLabel = "Data Date"
   }) => {
     const todayElement = React.useMemo(() => {
       if (isUnknownDates || !showTodayLine) {
@@ -10958,125 +10962,147 @@
             return 1 + percent * 0.5;
           }
           case ViewMode.Year: {
-            const percent = today.getMonth() / 12;
+            const todayOfYear = Math.floor(
+              (today.getTime() - new Date(today.getFullYear(), 0, 0).getTime()) / (1e3 * 60 * 60 * 24)
+            );
+            const totalDaysInYear = new Date(today.getFullYear(), 11, 31).getDate() === 31 ? 366 : 365;
+            const percent = todayOfYear / totalDaysInYear;
             return 1 + percent * 0.5;
           }
           default:
             return 1;
         }
       };
-      const tickX = todayIndex * columnWidth * extraMultiplier();
-      const x = rtl ? tickX + columnWidth : tickX;
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      const x = additionalLeftSpace + todayIndex * columnWidth * extraMultiplier();
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today-line", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
+          "line",
           {
-            x: additionalLeftSpace + x,
-            y: 0,
-            width: 2,
-            height: ganttFullHeight,
-            fill: "var(--gantt-calendar-today-color)"
+            x1: x,
+            y1: 0,
+            x2: x,
+            y2: ganttFullHeight,
+            className: styles$c.todayLine,
+            stroke: todayColor || void 0
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
+          "polygon",
           {
-            className: styles$c.ganttTodayCircle,
-            cx: x + 1,
-            cy: 6,
-            r: 6,
-            fill: "var(--gantt-calendar-today-color)"
+            className: styles$c.todayTriangle,
+            fill: todayColor || void 0,
+            points: `${x},0 ${x - 5},8 ${x + 5},8`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x,
+            y: 15,
+            className: styles$c.todayLabel,
+            fill: todayColor || void 0,
+            textAnchor: "middle",
+            children: todayLabel
           }
         )
-      ] });
+      ] }, "today-line");
     }, [
-      additionalLeftSpace,
-      columnWidth,
-      ganttFullHeight,
       isUnknownDates,
-      rtl,
+      showTodayLine,
       startDate,
       viewMode,
-      showTodayLine
+      additionalLeftSpace,
+      columnWidth,
+      ganttFullHeight,
+      todayColor,
+      todayLabel
     ]);
     const dataDateElement = React.useMemo(() => {
-      if (!showDataDateLine || !dataDate) {
+      if (isUnknownDates || !showDataDateLine || !dataDate) {
         return null;
       }
-      const dataIndex = getDatesDiff(dataDate, startDate, viewMode);
-      const extraMultiplier = () => {
-        switch (viewMode) {
-          case ViewMode.Week: {
-            const percent = dataDate.getDay() / 7;
-            return 1 + percent * 0.2;
-          }
-          case ViewMode.Month: {
-            const dayInMonth = dataDate.getDate();
-            const maxDaysInMonth = getDaysInMonth(
-              dataDate.getMonth(),
-              dataDate.getFullYear()
-            );
-            const percent = dayInMonth / maxDaysInMonth;
-            return 1 + percent * 0.5;
-          }
-          case ViewMode.Year: {
-            const percent = dataDate.getMonth() / 12;
-            return 1 + percent * 0.5;
+      let x;
+      if (dataDateX !== void 0) {
+        x = dataDateX;
+      } else {
+        const dataDateIndex = getDatesDiff(dataDate, startDate, viewMode);
+        const extraMultiplier = () => {
+          switch (viewMode) {
+            case ViewMode.Week: {
+              const percent = dataDate.getDay() / 7;
+              return 1 + percent * 0.2;
+            }
+            case ViewMode.Month: {
+              const dayInMonth = dataDate.getDate();
+              const maxDaysInMonth = getDaysInMonth(
+                dataDate.getMonth(),
+                dataDate.getFullYear()
+              );
+              const percent = dayInMonth / maxDaysInMonth;
+              return 1 + percent * 0.5;
+            }
+            case ViewMode.Year: {
+              const dataDateOfYear = Math.floor(
+                (dataDate.getTime() - new Date(dataDate.getFullYear(), 0, 0).getTime()) / (1e3 * 60 * 60 * 24)
+              );
+              const totalDaysInYear = new Date(dataDate.getFullYear(), 11, 31).getDate() === 31 ? 366 : 365;
+              const percent = dataDateOfYear / totalDaysInYear;
+              return 1 + percent * 0.5;
+            }
+            default:
+              return 1;
           }
-          default:
-            return 1;
-        }
-      };
-      const tickX = dataIndex * columnWidth * extraMultiplier();
-      const x = rtl ? tickX + columnWidth : tickX;
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        };
+        x = additionalLeftSpace + dataDateIndex * columnWidth * extraMultiplier();
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "data-date-line", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "rect",
+          "line",
           {
-            x: additionalLeftSpace + x,
-            y: 0,
-            width: 2,
-            height: ganttFullHeight,
-            fill: "var(--gantt-calendar-today-color)",
-            opacity: 0.9
+            x1: x,
+            y1: 0,
+            x2: x,
+            y2: ganttFullHeight,
+            className: styles$c.dataDateLine,
+            stroke: dataDateColor || void 0
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          "circle",
+          "polygon",
           {
-            className: styles$c.ganttTodayCircle,
-            cx: x + 1,
-            cy: 6,
-            r: 6,
-            fill: "var(--gantt-calendar-today-color)"
+            className: styles$c.dataDateTriangle,
+            fill: dataDateColor || void 0,
+            points: `${x},0 ${x - 5},8 ${x + 5},8`
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
-            x: additionalLeftSpace + x + 8,
-            y: 6,
-            dy: 2,
-            fill: "var(--gantt-calendar-today-color)",
-            fontSize: 12,
-            fontWeight: 600,
-            children: "Data Date"
+            x,
+            y: 30,
+            className: styles$c.dataDateLabel,
+            fill: dataDateColor || void 0,
+            textAnchor: "middle",
+            children: dataDateLabel
           }
         )
-      ] });
+      ] }, "data-date-line");
     }, [
+      isUnknownDates,
+      showDataDateLine,
+      dataDate,
+      dataDateX,
+      startDate,
+      viewMode,
       additionalLeftSpace,
       columnWidth,
       ganttFullHeight,
-      rtl,
-      startDate,
-      viewMode,
-      showDataDateLine,
-      dataDate
+      dataDateColor,
+      dataDateLabel
     ]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
-      dataDateElement,
-      todayElement
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      todayElement,
+      dataDateElement
     ] });
   };
   const GanttToday = React.memo(GanttTodayInner);
@@ -11990,7 +12016,11 @@
     width,
     x,
     y,
-    customStyle
+    customStyle,
+    dataDateX,
+    splitbarColors,
+    showProgressBar = true,
+    progressBarColor
   }) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
@@ -12009,7 +12039,40 @@
           }
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          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(
             "rect",
             {
               x,
@@ -12022,7 +12085,7 @@
               className: styles$8.barBackground
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          showProgressBar && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: progressX,
@@ -12031,7 +12094,7 @@
               height,
               ry: barCornerRadius,
               rx: barCornerRadius,
-              fill: "unset"
+              fill: progressBarColor || "var(--gantt-bar-progress-color)"
             }
           )
         ]
@@ -12095,7 +12158,11 @@
     x1,
     x2,
     startMoveFullTask,
-    customStyle
+    customStyle,
+    dataDateX,
+    splitbarColors,
+    showProgressBar = true,
+    progressBarColor
   }) => {
     const projectLeftTriangle = [
       x1,
@@ -12130,7 +12197,40 @@
         },
         className: styles$7.projectWrapper,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          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(
             "rect",
             {
               x: x1,
@@ -12143,7 +12243,7 @@
               fill: "unset"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          showProgressBar && /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
             {
               x: progressX,
@@ -12152,7 +12252,7 @@
               height: taskHeight,
               ry: barCornerRadius,
               rx: barCornerRadius,
-              fill: "unset"
+              fill: progressBarColor || "var(--gantt-bar-progress-color)"
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -12251,7 +12351,11 @@
       x1,
       x2,
       movingAction,
-      ganttRelationEvent
+      ganttRelationEvent,
+      dataDateX,
+      splitbarColors,
+      showProgressBar,
+      progressBarColor
     } = props;
     React.useMemo(() => width < 30, [width]);
     const handleHeight = React.useMemo(() => taskHeight - 2, [taskHeight]);
@@ -12312,7 +12416,11 @@
             isSelected,
             isCritical,
             hasChildren,
-            startMoveFullTask
+            startMoveFullTask,
+            dataDateX,
+            splitbarColors,
+            showProgressBar,
+            progressBarColor
           }
         );
       } else {
@@ -12331,7 +12439,11 @@
             isSelected,
             isCritical,
             hasChildren,
-            startMoveFullTask
+            startMoveFullTask,
+            dataDateX,
+            splitbarColors,
+            showProgressBar,
+            progressBarColor
           }
         );
       }
@@ -12704,10 +12816,13 @@
       },
       [onTooltipTask, task]
     );
-    const onMouseLeave = React.useCallback((event) => {
-      event.stopPropagation();
-      onTooltipTask(null, null);
-    }, [onTooltipTask]);
+    const onMouseLeave = React.useCallback(
+      (event) => {
+        event.stopPropagation();
+        onTooltipTask(null, null);
+      },
+      [onTooltipTask]
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
@@ -12886,7 +13001,11 @@
       renderCustomLabel,
       taskBarMovingAction,
       waitCommitTasks,
-      viewMode
+      viewMode,
+      dataDateX,
+      splitbarColors,
+      showProgressBar,
+      progressBarColor
     } = props;
     const renderedHolidays = React.useMemo(() => {
       const { columnWidth } = distances;
@@ -12973,6 +13092,11 @@
           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",
@@ -13016,7 +13140,11 @@
                   rtl,
                   onDeleteTask,
                   renderCustomLabel,
-                  viewMode
+                  viewMode,
+                  dataDateX: dataDateXLocal,
+                  splitbarColors,
+                  showProgressBar,
+                  progressBarColor
                 }
               )
             },
@@ -13226,6 +13354,10 @@
       isDateChangeable,
       isRelationChangeable,
       visibleTasksMirror,
+      dataDateX,
+      splitbarColors,
+      showProgressBar,
+      progressBarColor,
       onArrowDoubleClick
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "content", children: [
@@ -18666,7 +18798,14 @@
       rowHeight,
       showTodayLine = true,
       showDataDateLine = false,
-      dataDate = null
+      dataDate = null,
+      todayColor,
+      dataDateColor,
+      todayLabel = "Today",
+      dataDateLabel = "Data Date",
+      splitbarColors,
+      showProgressBar = true,
+      progressBarColor
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -19795,6 +19934,29 @@
       () => svgWidth + additionalLeftSpace + additionalRightSpace,
       [additionalLeftSpace, additionalRightSpace, svgWidth]
     );
+    const dataDateX = React.useMemo(() => {
+      if (!dataDate)
+        return void 0;
+      try {
+        const roundedDataDate = roundStartDate(dataDate);
+        const x = taskXCoordinate(
+          roundedDataDate,
+          startDate,
+          viewMode,
+          distances.columnWidth
+        );
+        return additionalLeftSpace + x;
+      } catch {
+        return void 0;
+      }
+    }, [
+      dataDate,
+      startDate,
+      viewMode,
+      distances,
+      additionalLeftSpace,
+      roundStartDate
+    ]);
     const gridProps = React.useMemo(
       () => ({
         additionalLeftSpace,
@@ -19806,7 +19968,12 @@
         viewMode,
         showTodayLine,
         showDataDateLine,
-        dataDate
+        dataDate,
+        dataDateX,
+        todayColor,
+        dataDateColor,
+        todayLabel,
+        dataDateLabel
       }),
       [
         additionalLeftSpace,
@@ -19818,7 +19985,12 @@
         viewMode,
         showTodayLine,
         showDataDateLine,
-        dataDate
+        dataDate,
+        dataDateX,
+        todayColor,
+        dataDateColor,
+        todayLabel,
+        dataDateLabel
       ]
     );
     const calendarProps = React.useMemo(
@@ -19854,6 +20026,11 @@
     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;
@@ -19894,6 +20071,11 @@
       [
         viewMode,
         taskBar,
+        splitbarColors,
+        dataDate,
+        dataDateX,
+        showProgressBar,
+        progressBarColor,
         authorizedRelations,
         additionalLeftSpace,
         additionalRightSpace,

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

@@ -336,6 +336,48 @@ export interface GanttProps {
      * Custom date to render as data date line when `showDataDateLine` is true
      */
     dataDate?: Date | null;
+    /**
+     * Color used for the today line, pin and label. If not provided, theme calendarTodayColor is used.
+     */
+    todayColor?: string;
+    /**
+     * Color used for the data date line, pin and label. If not provided, theme calendarTodayColor is used.
+     */
+    dataDateColor?: string;
+    /**
+     * Label text for the today marker. Defaults to "Today".
+     */
+    todayLabel?: string;
+    /**
+     * Label text for the data date marker. Defaults to "Data Date".
+     */
+    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.
+     */
+    showProgressBar?: boolean;
+    /**
+     * Color for the progress bar overlay. If not provided, theme progress color is used.
+     */
+    progressBarColor?: 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.47",
+  "version": "1.0.49",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",