gantt-task-react-v 1.0.45 → 1.0.47

package/README.md

@@ -6,6 +6,8 @@
 
 - Flexible Gantt height now adapts to its parent container, now we always see the horizontal scrolls for both task list and gantt.
 - Fixed sticky gantt header on drag
+- Fixed Tooltip should show only on gantt section current view boundaries
+- Added Tooltip for comparison bars
 
 ## [Live Demo In Storybook](https://661071b076b50cb537c16c19-yrsukdfefs.chromatic.com/)
 

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

@@ -8,5 +8,8 @@ export type GanttTodayProps = {
     startDate: Date;
     rtl: boolean;
     viewMode: ViewMode;
+    showTodayLine?: boolean;
+    showDataDateLine?: boolean;
+    dataDate?: Date | null;
 };
 export declare const GanttToday: React.NamedExoticComponent<GanttTodayProps>;

package/dist/components/task-item/bar-comparison/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { TaskComparisonDatesCoordinates } from "../../../types";
+import { TaskComparisonDatesCoordinates, Task } from "../../../types";
 interface Props extends Omit<TaskComparisonDatesCoordinates, "x" | "y"> {
     barCornerRadius: number;
     borderHeight: number;
@@ -8,6 +8,8 @@ interface Props extends Omit<TaskComparisonDatesCoordinates, "x" | "y"> {
     isPlan?: boolean;
     isCritical?: boolean;
     inProgress?: boolean;
+    task?: Task;
+    onTooltipTask?: (task: Task | null, element: Element | null) => void;
 }
 export declare const BarComparison: React.FC<Props>;
 export {};

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

@@ -10914,31 +10914,34 @@ const GanttTodayInner = ({
   isUnknownDates,
   rtl,
   startDate,
-  viewMode
+  viewMode,
+  showTodayLine = true,
+  showDataDateLine = false,
+  dataDate = null
 }) => {
-  const today = useMemo(() => {
-    if (isUnknownDates) {
+  const todayElement = useMemo(() => {
+    if (isUnknownDates || !showTodayLine) {
       return null;
     }
-    const today2 = /* @__PURE__ */ new Date();
-    const todayIndex = getDatesDiff(today2, startDate, viewMode);
+    const today = /* @__PURE__ */ new Date();
+    const todayIndex = getDatesDiff(today, startDate, viewMode);
     const extraMultiplier = () => {
       switch (viewMode) {
         case ViewMode.Week: {
-          const percent = today2.getDay() / 7;
+          const percent = today.getDay() / 7;
           return 1 + percent * 0.2;
         }
         case ViewMode.Month: {
-          const dayInMonth = today2.getDate();
+          const dayInMonth = today.getDate();
           const maxDaysInMonth = getDaysInMonth(
-            today2.getMonth(),
-            today2.getFullYear()
+            today.getMonth(),
+            today.getFullYear()
           );
           const percent = dayInMonth / maxDaysInMonth;
           return 1 + percent * 0.5;
         }
         case ViewMode.Year: {
-          const percent = today2.getMonth() / 12;
+          const percent = today.getMonth() / 12;
           return 1 + percent * 0.5;
         }
         default:
@@ -10976,9 +10979,88 @@ const GanttTodayInner = ({
     isUnknownDates,
     rtl,
     startDate,
-    viewMode
+    viewMode,
+    showTodayLine
+  ]);
+  const dataDateElement = useMemo(() => {
+    if (!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;
+        }
+        default:
+          return 1;
+      }
+    };
+    const tickX = dataIndex * columnWidth * extraMultiplier();
+    const x = rtl ? tickX + columnWidth : tickX;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: additionalLeftSpace + x,
+          y: 0,
+          width: 2,
+          height: ganttFullHeight,
+          fill: "var(--gantt-calendar-today-color)",
+          opacity: 0.9
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: styles$c.ganttTodayCircle,
+          cx: x + 1,
+          cy: 6,
+          r: 6,
+          fill: "var(--gantt-calendar-today-color)"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: additionalLeftSpace + x + 8,
+          y: 6,
+          dy: 2,
+          fill: "var(--gantt-calendar-today-color)",
+          fontSize: 12,
+          fontWeight: 600,
+          children: "Data Date"
+        }
+      )
+    ] });
+  }, [
+    additionalLeftSpace,
+    columnWidth,
+    ganttFullHeight,
+    rtl,
+    startDate,
+    viewMode,
+    showDataDateLine,
+    dataDate
   ]);
-  return /* @__PURE__ */ jsx("g", { className: "today", children: today });
+  return /* @__PURE__ */ jsxs("g", { className: "today", children: [
+    dataDateElement,
+    todayElement
+  ] });
 };
 const GanttToday = memo(GanttTodayInner);
 const calendarBottomText = "_calendarBottomText_15t8b_1";
@@ -12668,7 +12750,19 @@ const styles$3 = {
   barComparison
 };
 const BarComparison = (props) => {
-  const { yOffset, borderHeight, barCornerRadius, isWarning, isPlan, isCritical, width, height, inProgress } = props;
+  const {
+    yOffset,
+    borderHeight,
+    barCornerRadius,
+    isWarning,
+    isPlan,
+    isCritical,
+    width,
+    height,
+    inProgress,
+    task,
+    onTooltipTask
+  } = props;
   const lineHeight = useMemo(() => Math.max(height, 4), [height]);
   const barColor = useMemo(() => {
     if (inProgress) {
@@ -12685,41 +12779,54 @@ const BarComparison = (props) => {
     }
     return "var(--gantt-bar-comparison-default-color)";
   }, [inProgress, isCritical, isPlan, isWarning]);
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: 0,
-        width,
-        y: borderHeight + yOffset,
-        height: lineHeight,
-        ry: barCornerRadius,
-        rx: barCornerRadius,
-        fill: barColor,
-        className: styles$3.barComparison
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: 0,
-        fill: barColor,
-        y: yOffset,
-        width: height,
-        height: borderHeight + lineHeight - yOffset
-      }
-    ),
-    !inProgress && /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: width - height,
-        fill: barColor,
-        y: yOffset,
-        width: height,
-        height: borderHeight + lineHeight - yOffset
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      onMouseEnter: (e) => {
+        e.stopPropagation();
+        onTooltipTask && onTooltipTask(task || null, e.currentTarget);
+      },
+      onMouseLeave: (e) => {
+        e.stopPropagation();
+        onTooltipTask && onTooltipTask(null, null);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            width,
+            y: borderHeight + yOffset,
+            height: lineHeight,
+            ry: barCornerRadius,
+            rx: barCornerRadius,
+            fill: barColor,
+            className: styles$3.barComparison
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            fill: barColor,
+            y: yOffset,
+            width: height,
+            height: borderHeight + lineHeight - yOffset
+          }
+        ),
+        !inProgress && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: width - height,
+            fill: barColor,
+            y: yOffset,
+            width: height,
+            height: borderHeight + lineHeight - yOffset
+          }
+        )
+      ]
+    }
+  );
 };
 const DELTA_RELATION_WIDTH = 100;
 const TaskGanttContentInner = (props) => {
@@ -12914,14 +13021,16 @@ const TaskGanttContentInner = (props) => {
                 BarComparison,
                 {
                   inProgress: !task.comparisonDates.end,
-                  isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && (!!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime()) || task.comparisonDates.start.getTime() <= task.start.getTime() && (!!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime()),
+                  isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime() || task.comparisonDates.start.getTime() <= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime(),
                   isWarning: !!task.comparisonDates.end && task.comparisonDates.end.getTime() >= task.end.getTime(),
                   isCritical: task.comparisonDates.start.getTime() > task.start.getTime(),
                   barCornerRadius: distances.barCornerRadius,
                   height: comparisonDates.height,
                   width: comparisonDates.width,
                   borderHeight: distances.barComparisonTaskBorderHeight,
-                  yOffset: distances.barComparisonTaskYOffset
+                  yOffset: distances.barComparisonTaskYOffset,
+                  task,
+                  onTooltipTask
                 }
               )
             },
@@ -18536,14 +18645,25 @@ const Gantt = (props) => {
     viewDate,
     viewMode = ViewMode.Day,
     locale: clientLocale,
-    language
+    language,
+    rowHeight,
+    showTodayLine = true,
+    showDataDateLine = false,
+    dataDate = null
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
   const taskListRef = useRef(null);
   const locale = useMemo(() => clientLocale ?? GANTT_EN_LOCALE, [clientLocale]);
   const theme = useMemo(() => buildGanttTheme(clientTheme), [clientTheme]);
-  const { distances, dateFormats: dateFormats2, rtl } = theme;
+  const { dateFormats: dateFormats2, rtl } = theme;
+  const distances = useMemo(
+    () => ({
+      ...theme.distances,
+      rowHeight: rowHeight ?? theme.distances.rowHeight
+    }),
+    [theme, rowHeight]
+  );
   const [waitCommitTasks, setWaitCommitTasks] = useState(false);
   const taskBar = useMemo(() => {
     return mergeDeepObj(
@@ -18961,20 +19081,20 @@ const Gantt = (props) => {
     horizontalContainerRef
   ]);
   const handleKeyDown = (event) => {
-    const { columnWidth, rowHeight } = distances;
+    const { columnWidth, rowHeight: rowHeight2 } = distances;
     let newScrollY = scrollY;
     let newScrollX = scrollX;
     let isX = true;
     switch (event.key) {
       case "Down":
       case "ArrowDown":
-        newScrollY += rowHeight;
+        newScrollY += rowHeight2;
         isX = false;
         event.preventDefault();
         break;
       case "Up":
       case "ArrowUp":
-        newScrollY -= rowHeight;
+        newScrollY -= rowHeight2;
         isX = false;
         event.preventDefault();
         break;
@@ -19666,7 +19786,10 @@ const Gantt = (props) => {
       isUnknownDates,
       rtl,
       startDate,
-      viewMode
+      viewMode,
+      showTodayLine,
+      showDataDateLine,
+      dataDate
     }),
     [
       additionalLeftSpace,
@@ -19675,7 +19798,10 @@ const Gantt = (props) => {
       isUnknownDates,
       rtl,
       startDate,
-      viewMode
+      viewMode,
+      showTodayLine,
+      showDataDateLine,
+      dataDate
     ]
   );
   const calendarProps = useMemo(

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

@@ -10931,31 +10931,34 @@
     isUnknownDates,
     rtl,
     startDate,
-    viewMode
+    viewMode,
+    showTodayLine = true,
+    showDataDateLine = false,
+    dataDate = null
   }) => {
-    const today = React.useMemo(() => {
-      if (isUnknownDates) {
+    const todayElement = React.useMemo(() => {
+      if (isUnknownDates || !showTodayLine) {
         return null;
       }
-      const today2 = /* @__PURE__ */ new Date();
-      const todayIndex = getDatesDiff(today2, startDate, viewMode);
+      const today = /* @__PURE__ */ new Date();
+      const todayIndex = getDatesDiff(today, startDate, viewMode);
       const extraMultiplier = () => {
         switch (viewMode) {
           case ViewMode.Week: {
-            const percent = today2.getDay() / 7;
+            const percent = today.getDay() / 7;
             return 1 + percent * 0.2;
           }
           case ViewMode.Month: {
-            const dayInMonth = today2.getDate();
+            const dayInMonth = today.getDate();
             const maxDaysInMonth = getDaysInMonth(
-              today2.getMonth(),
-              today2.getFullYear()
+              today.getMonth(),
+              today.getFullYear()
             );
             const percent = dayInMonth / maxDaysInMonth;
             return 1 + percent * 0.5;
           }
           case ViewMode.Year: {
-            const percent = today2.getMonth() / 12;
+            const percent = today.getMonth() / 12;
             return 1 + percent * 0.5;
           }
           default:
@@ -10993,9 +10996,88 @@
       isUnknownDates,
       rtl,
       startDate,
-      viewMode
+      viewMode,
+      showTodayLine
+    ]);
+    const dataDateElement = React.useMemo(() => {
+      if (!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;
+          }
+          default:
+            return 1;
+        }
+      };
+      const tickX = dataIndex * columnWidth * extraMultiplier();
+      const x = rtl ? tickX + columnWidth : tickX;
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: additionalLeftSpace + x,
+            y: 0,
+            width: 2,
+            height: ganttFullHeight,
+            fill: "var(--gantt-calendar-today-color)",
+            opacity: 0.9
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            className: styles$c.ganttTodayCircle,
+            cx: x + 1,
+            cy: 6,
+            r: 6,
+            fill: "var(--gantt-calendar-today-color)"
+          }
+        ),
+        /* @__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"
+          }
+        )
+      ] });
+    }, [
+      additionalLeftSpace,
+      columnWidth,
+      ganttFullHeight,
+      rtl,
+      startDate,
+      viewMode,
+      showDataDateLine,
+      dataDate
     ]);
-    return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "today", children: today });
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "today", children: [
+      dataDateElement,
+      todayElement
+    ] });
   };
   const GanttToday = React.memo(GanttTodayInner);
   const calendarBottomText = "_calendarBottomText_15t8b_1";
@@ -12685,7 +12767,19 @@
     barComparison
   };
   const BarComparison = (props) => {
-    const { yOffset, borderHeight, barCornerRadius, isWarning, isPlan, isCritical, width, height, inProgress } = props;
+    const {
+      yOffset,
+      borderHeight,
+      barCornerRadius,
+      isWarning,
+      isPlan,
+      isCritical,
+      width,
+      height,
+      inProgress,
+      task,
+      onTooltipTask
+    } = props;
     const lineHeight = React.useMemo(() => Math.max(height, 4), [height]);
     const barColor = React.useMemo(() => {
       if (inProgress) {
@@ -12702,41 +12796,54 @@
       }
       return "var(--gantt-bar-comparison-default-color)";
     }, [inProgress, isCritical, isPlan, isWarning]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          x: 0,
-          width,
-          y: borderHeight + yOffset,
-          height: lineHeight,
-          ry: barCornerRadius,
-          rx: barCornerRadius,
-          fill: barColor,
-          className: styles$3.barComparison
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          x: 0,
-          fill: barColor,
-          y: yOffset,
-          width: height,
-          height: borderHeight + lineHeight - yOffset
-        }
-      ),
-      !inProgress && /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          x: width - height,
-          fill: barColor,
-          y: yOffset,
-          width: height,
-          height: borderHeight + lineHeight - yOffset
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "g",
+      {
+        onMouseEnter: (e) => {
+          e.stopPropagation();
+          onTooltipTask && onTooltipTask(task || null, e.currentTarget);
+        },
+        onMouseLeave: (e) => {
+          e.stopPropagation();
+          onTooltipTask && onTooltipTask(null, null);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: 0,
+              width,
+              y: borderHeight + yOffset,
+              height: lineHeight,
+              ry: barCornerRadius,
+              rx: barCornerRadius,
+              fill: barColor,
+              className: styles$3.barComparison
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: 0,
+              fill: barColor,
+              y: yOffset,
+              width: height,
+              height: borderHeight + lineHeight - yOffset
+            }
+          ),
+          !inProgress && /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: width - height,
+              fill: barColor,
+              y: yOffset,
+              width: height,
+              height: borderHeight + lineHeight - yOffset
+            }
+          )
+        ]
+      }
+    );
   };
   const DELTA_RELATION_WIDTH = 100;
   const TaskGanttContentInner = (props) => {
@@ -12931,14 +13038,16 @@
                   BarComparison,
                   {
                     inProgress: !task.comparisonDates.end,
-                    isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && (!!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime()) || task.comparisonDates.start.getTime() <= task.start.getTime() && (!!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime()),
+                    isPlan: task.comparisonDates.start.getTime() >= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.end.getTime() || task.comparisonDates.start.getTime() <= task.start.getTime() && !!task.comparisonDates.end && task.comparisonDates.end.getTime() <= task.start.getTime(),
                     isWarning: !!task.comparisonDates.end && task.comparisonDates.end.getTime() >= task.end.getTime(),
                     isCritical: task.comparisonDates.start.getTime() > task.start.getTime(),
                     barCornerRadius: distances.barCornerRadius,
                     height: comparisonDates.height,
                     width: comparisonDates.width,
                     borderHeight: distances.barComparisonTaskBorderHeight,
-                    yOffset: distances.barComparisonTaskYOffset
+                    yOffset: distances.barComparisonTaskYOffset,
+                    task,
+                    onTooltipTask
                   }
                 )
               },
@@ -18553,14 +18662,25 @@
       viewDate,
       viewMode = ViewMode.Day,
       locale: clientLocale,
-      language
+      language,
+      rowHeight,
+      showTodayLine = true,
+      showDataDateLine = false,
+      dataDate = null
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
     const taskListRef = React.useRef(null);
     const locale = React.useMemo(() => clientLocale ?? GANTT_EN_LOCALE, [clientLocale]);
     const theme = React.useMemo(() => buildGanttTheme(clientTheme), [clientTheme]);
-    const { distances, dateFormats: dateFormats2, rtl } = theme;
+    const { dateFormats: dateFormats2, rtl } = theme;
+    const distances = React.useMemo(
+      () => ({
+        ...theme.distances,
+        rowHeight: rowHeight ?? theme.distances.rowHeight
+      }),
+      [theme, rowHeight]
+    );
     const [waitCommitTasks, setWaitCommitTasks] = React.useState(false);
     const taskBar = React.useMemo(() => {
       return mergeDeepObj(
@@ -18978,20 +19098,20 @@
       horizontalContainerRef
     ]);
     const handleKeyDown = (event) => {
-      const { columnWidth, rowHeight } = distances;
+      const { columnWidth, rowHeight: rowHeight2 } = distances;
       let newScrollY = scrollY;
       let newScrollX = scrollX;
       let isX = true;
       switch (event.key) {
         case "Down":
         case "ArrowDown":
-          newScrollY += rowHeight;
+          newScrollY += rowHeight2;
           isX = false;
           event.preventDefault();
           break;
         case "Up":
         case "ArrowUp":
-          newScrollY -= rowHeight;
+          newScrollY -= rowHeight2;
           isX = false;
           event.preventDefault();
           break;
@@ -19683,7 +19803,10 @@
         isUnknownDates,
         rtl,
         startDate,
-        viewMode
+        viewMode,
+        showTodayLine,
+        showDataDateLine,
+        dataDate
       }),
       [
         additionalLeftSpace,
@@ -19692,7 +19815,10 @@
         isUnknownDates,
         rtl,
         startDate,
-        viewMode
+        viewMode,
+        showTodayLine,
+        showDataDateLine,
+        dataDate
       ]
     );
     const calendarProps = React.useMemo(

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

@@ -320,6 +320,22 @@ export interface GanttProps {
      * Move dates of tasks to working days during change
      */
     isAdjustToWorkingDates?: boolean;
+    /**
+     * Force row height (in pixels) for each single row. If not provided theme distances.rowHeight is used.
+     */
+    rowHeight?: number;
+    /**
+     * Show vertical line for current day on the chart
+     */
+    showTodayLine?: boolean;
+    /**
+     * Show vertical line for a custom 'data date' on the chart
+     */
+    showDataDateLine?: boolean;
+    /**
+     * Custom date to render as data date line when `showDataDateLine` is true
+     */
+    dataDate?: Date | null;
 }
 export interface GanttTaskBarActions {
     allowMoveTaskBar?: (action: TaskBarMoveAction, task: RenderTask) => boolean;

package/package.json

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