gantt-task-react-v 1.0.48 → 1.0.49

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

@@ -11,6 +11,7 @@ export type GanttTodayProps = {
     showTodayLine?: boolean;
     showDataDateLine?: boolean;
     dataDate?: Date | null;
+    dataDateX?: number;
     todayColor?: string | null;
     dataDateColor?: string | null;
     todayLabel?: string;

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

@@ -10912,12 +10912,12 @@ const GanttTodayInner = ({
   distances: { columnWidth },
   ganttFullHeight,
   isUnknownDates,
-  rtl,
   startDate,
   viewMode,
   showTodayLine = true,
   showDataDateLine = false,
   dataDate = null,
+  dataDateX,
   todayColor = null,
   dataDateColor = null,
   todayLabel = "Today",
@@ -10945,141 +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;
-    const color = todayColor || "var(--gantt-calendar-today-color)";
-    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: 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: color
+          className: styles$c.todayTriangle,
+          fill: todayColor || void 0,
+          points: `${x},0 ${x - 5},8 ${x + 5},8`
         }
       ),
       /* @__PURE__ */ jsx(
         "text",
         {
-          x: additionalLeftSpace + x + 8,
-          y: 10,
-          fill: color,
-          fontSize: 12,
-          fontWeight: 600,
+          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;
-    const color = dataDateColor || "var(--gantt-calendar-today-color)";
-    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: 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: 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: 10,
-          fill: color,
-          fontSize: 12,
-          fontWeight: 600,
-          children: dataDateLabel || "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);
@@ -19911,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,
@@ -19923,6 +19952,7 @@ const Gantt = (props) => {
       showTodayLine,
       showDataDateLine,
       dataDate,
+      dataDateX,
       todayColor,
       dataDateColor,
       todayLabel,
@@ -19939,27 +19969,13 @@ const Gantt = (props) => {
       showTodayLine,
       showDataDateLine,
       dataDate,
+      dataDateX,
       todayColor,
       dataDateColor,
       todayLabel,
       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,

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

@@ -10929,12 +10929,12 @@
     distances: { columnWidth },
     ganttFullHeight,
     isUnknownDates,
-    rtl,
     startDate,
     viewMode,
     showTodayLine = true,
     showDataDateLine = false,
     dataDate = null,
+    dataDateX,
     todayColor = null,
     dataDateColor = null,
     todayLabel = "Today",
@@ -10962,141 +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;
-      const color = todayColor || "var(--gantt-calendar-today-color)";
-      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: 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: color
+            className: styles$c.todayTriangle,
+            fill: todayColor || void 0,
+            points: `${x},0 ${x - 5},8 ${x + 5},8`
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "text",
           {
-            x: additionalLeftSpace + x + 8,
-            y: 10,
-            fill: color,
-            fontSize: 12,
-            fontWeight: 600,
+            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;
-      const color = dataDateColor || "var(--gantt-calendar-today-color)";
-      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: 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: 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: 10,
-            fill: color,
-            fontSize: 12,
-            fontWeight: 600,
-            children: dataDateLabel || "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);
@@ -19928,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,
@@ -19940,6 +19969,7 @@
         showTodayLine,
         showDataDateLine,
         dataDate,
+        dataDateX,
         todayColor,
         dataDateColor,
         todayLabel,
@@ -19956,27 +19986,13 @@
         showTodayLine,
         showDataDateLine,
         dataDate,
+        dataDateX,
         todayColor,
         dataDateColor,
         todayLabel,
         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,

package/package.json

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