project type ready & tooltip changes

src/components/gantt/gantt.tsx

@@ -31,6 +31,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   barProgressSelectedColor = "#8282f5",
   barBackgroundColor = "#b8c2cc",
   barBackgroundSelectedColor = "#aeb8c2",
+  projectProgressColor = "#f1c453",
+  projectProgressSelectedColor = "#f29e4c",
+  projectBackgroundColor = "#65c16f",
+  projectBackgroundSelectedColor = "#46ad51",
   milestoneBackgroundColor = "#f1c453",
   milestoneBackgroundSelectedColor = "#f29e4c",
   handleWidth = 8,
@@ -90,6 +94,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
         barProgressSelectedColor,
         barBackgroundColor,
         barBackgroundSelectedColor,
+        projectProgressColor,
+        projectProgressSelectedColor,
+        projectBackgroundColor,
+        projectBackgroundSelectedColor,
         milestoneBackgroundColor,
         milestoneBackgroundSelectedColor
       )
@@ -106,6 +114,12 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     barProgressSelectedColor,
     barBackgroundColor,
     barBackgroundSelectedColor,
+    projectProgressColor,
+    projectProgressSelectedColor,
+    projectBackgroundColor,
+    projectBackgroundSelectedColor,
+    milestoneBackgroundColor,
+    milestoneBackgroundSelectedColor,
   ]);
 
   useEffect(() => {

src/components/gantt/task-gantt-content.tsx

@@ -23,7 +23,10 @@ export type TaskGanttContentProps = {
   svg?: React.RefObject<SVGSVGElement>;
   svgHeight: number;
   svgWidth: number;
-  displayXEndpoint?: number;
+  displayXStartEndpoint?: {
+    start: number;
+    end: number;
+  };
   taskHeight: number;
   arrowColor: string;
   arrowIndent: number;
@@ -49,7 +52,7 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
   timeStep,
   svg,
   svgHeight,
-  displayXEndpoint,
+  displayXStartEndpoint,
   taskHeight,
   arrowColor,
   arrowIndent,
@@ -290,12 +293,12 @@ export const TaskGanttContent: React.FC<TaskGanttContentProps> = ({
         })}
       </g>
       <g className="toolTip">
-        {ganttEvent.changedTask && displayXEndpoint && (
+        {ganttEvent.changedTask && displayXStartEndpoint && (
           <Tooltip
             arrowIndent={arrowIndent}
             rowHeight={rowHeight}
             svgHeight={svgHeight}
-            displayXEndpoint={displayXEndpoint}
+            displayXStartEndpoint={displayXStartEndpoint}
             task={ganttEvent.changedTask}
             fontFamily={fontFamily}
             fontSize={fontSize}

src/components/gantt/task-gantt.tsx

@@ -25,8 +25,11 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
   const ganttSVGRef = useRef<SVGSVGElement>(null);
   const horizontalContainerRef = useRef<HTMLDivElement>(null);
   const verticalContainerRef = useRef<HTMLDivElement>(null);
-  const [displayXEndpoint, setDisplayXEndpoint] = useState(0);
+  const [displayXStartEndpoint, setDisplayXStartEndpoint] = useState({
-  const newBarProps = { ...barProps, svg: ganttSVGRef, displayXEndpoint };
+    start: 0,
+    end: 0,
+  });
+  const newBarProps = { ...barProps, svg: ganttSVGRef, displayXStartEndpoint };
 
   useEffect(() => {
     if (horizontalContainerRef.current) {
@@ -37,7 +40,10 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
   useEffect(() => {
     if (verticalContainerRef.current) {
       verticalContainerRef.current.scrollLeft = scrollX;
-      setDisplayXEndpoint(verticalContainerRef.current.clientWidth + scrollX);
+      setDisplayXStartEndpoint({
+        start: scrollX,
+        end: verticalContainerRef.current.clientWidth + scrollX,
+      });
     }
     // verticalContainerRef.current?.clientWidth need for resize window tracking
   }, [scrollX, verticalContainerRef.current?.clientWidth]);

src/components/other/tooltip.tsx

@@ -7,7 +7,10 @@ export type TooltipProps = {
   task: BarTask;
   arrowIndent: number;
   svgHeight: number;
-  displayXEndpoint: number;
+  displayXStartEndpoint: {
+    start: number;
+    end: number;
+  };
   rowHeight: number;
   fontSize: string;
   fontFamily: string;
@@ -21,7 +24,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   task,
   rowHeight,
   svgHeight,
-  displayXEndpoint,
+  displayXStartEndpoint,
   arrowIndent,
   fontSize,
   fontFamily,
@@ -29,26 +32,66 @@ export const Tooltip: React.FC<TooltipProps> = ({
 }) => {
   const tooltipRef = useRef<HTMLDivElement | null>(null);
   const [toolWidth, setToolWidth] = useState(1000);
+  const [toolHeight, setToolHeight] = useState(1000);
   const [relatedY, setRelatedY] = useState(task.index * rowHeight);
-  const [relatedX, setRelatedX] = useState(displayXEndpoint);
+  const [relatedX, setRelatedX] = useState(displayXStartEndpoint.end);
   useEffect(() => {
     if (tooltipRef.current) {
-      const tooltipHeight = tooltipRef.current.offsetHeight;
+      const tooltipHeight = tooltipRef.current.offsetHeight * 1.1;
-      const tooltipY = task.index * rowHeight;
+      let tooltipY = task.index * rowHeight;
-      if (tooltipY + tooltipHeight > svgHeight) {
-        setRelatedY(svgHeight - tooltipHeight * 1.05);
-      }
       const newWidth = tooltipRef.current.scrollWidth * 1.1;
       let newRelatedX = task.x2 + arrowIndent + arrowIndent * 0.5;
-      if (newWidth + newRelatedX > displayXEndpoint) {
+      if (newWidth + newRelatedX > displayXStartEndpoint.end) {
         newRelatedX = task.x1 - arrowIndent - arrowIndent * 0.5 - newWidth;
       }
+      const tooltipLowerPoint = tooltipHeight + tooltipY;
+
+      if (
+        newRelatedX < displayXStartEndpoint.start &&
+        tooltipLowerPoint > svgHeight
+      ) {
+        tooltipY -= tooltipHeight;
+        newRelatedX = (task.x1 + task.x2 - newWidth) * 0.5;
+        if (newRelatedX + newWidth > displayXStartEndpoint.end) {
+          newRelatedX = displayXStartEndpoint.end - newWidth;
+        }
+        if (
+          newRelatedX + newWidth > displayXStartEndpoint.end ||
+          newRelatedX - newWidth < displayXStartEndpoint.start
+        ) {
+          newRelatedX = displayXStartEndpoint.end - newWidth;
+        }
+      } else if (
+        newRelatedX < displayXStartEndpoint.start &&
+        tooltipLowerPoint < svgHeight
+      ) {
+        tooltipY += rowHeight;
+        newRelatedX = (task.x1 + task.x2 - newWidth) * 0.5;
+        if (
+          newRelatedX + newWidth > displayXStartEndpoint.end ||
+          newRelatedX - newWidth < displayXStartEndpoint.start
+        ) {
+          newRelatedX = displayXStartEndpoint.end - newWidth;
+        }
+      } else if (tooltipLowerPoint > svgHeight) {
+        tooltipY = svgHeight - tooltipHeight;
+      }
+
+      setRelatedY(tooltipY);
       setToolWidth(newWidth);
       setRelatedX(newRelatedX);
+      if (tooltipHeight !== 1000) {
+        setToolHeight(tooltipHeight);
+      }
     }
-  }, [tooltipRef, task, arrowIndent, displayXEndpoint]);
+  }, [tooltipRef, task, arrowIndent, displayXStartEndpoint]);
   return (
-    <foreignObject x={relatedX} y={relatedY} width={toolWidth} height={1000}>
+    <foreignObject
+      x={relatedX}
+      y={relatedY}
+      width={toolWidth}
+      height={toolHeight}
+    >
       <div ref={tooltipRef} className={styles.tooltipDetailsContainer}>
         <TooltipContent
           task={task}

src/helpers/bar-helper.ts

@@ -14,6 +14,10 @@ export const convertToBarTasks = (
   barProgressSelectedColor: string,
   barBackgroundColor: string,
   barBackgroundSelectedColor: string,
+  projectProgressColor: string,
+  projectProgressSelectedColor: string,
+  projectBackgroundColor: string,
+  projectBackgroundSelectedColor: string,
   milestoneBackgroundColor: string,
   milestoneBackgroundSelectedColor: string
 ) => {
@@ -37,6 +41,10 @@ export const convertToBarTasks = (
       barProgressSelectedColor,
       barBackgroundColor,
       barBackgroundSelectedColor,
+      projectProgressColor,
+      projectProgressSelectedColor,
+      projectBackgroundColor,
+      projectBackgroundSelectedColor,
       milestoneBackgroundColor,
       milestoneBackgroundSelectedColor
     );
@@ -71,6 +79,10 @@ const convertToBarTask = (
   barProgressSelectedColor: string,
   barBackgroundColor: string,
   barBackgroundSelectedColor: string,
+  projectProgressColor: string,
+  projectProgressSelectedColor: string,
+  projectBackgroundColor: string,
+  projectBackgroundSelectedColor: string,
   milestoneBackgroundColor: string,
   milestoneBackgroundSelectedColor: string
 ): BarTask => {
@@ -91,6 +103,23 @@ const convertToBarTask = (
         milestoneBackgroundSelectedColor
       );
       break;
+    case "project":
+      barTask = convertToBar(
+        task,
+        index,
+        dates,
+        dateDelta,
+        columnWidth,
+        rowHeight,
+        taskHeight,
+        barCornerRadius,
+        handleWidth,
+        projectProgressColor,
+        projectProgressSelectedColor,
+        projectBackgroundColor,
+        projectBackgroundSelectedColor
+      );
+      break;
     default:
       barTask = convertToBar(
         task,
@@ -127,6 +156,7 @@ const convertToBar = (
   barBackgroundColor: string,
   barBackgroundSelectedColor: string
 ): BarTask => {
+  debugger;
   const x1 = taskXCoordinate(task.start, dates, dateDelta, columnWidth);
   const x2 = taskXCoordinate(task.end, dates, dateDelta, columnWidth);
   const y = taskYCoordinate(index, rowHeight, taskHeight);

src/types/public-types.ts

@@ -86,6 +86,10 @@ export interface StylingOption {
   barProgressSelectedColor?: string;
   barBackgroundColor?: string;
   barBackgroundSelectedColor?: string;
+  projectProgressColor?: string;
+  projectProgressSelectedColor?: string;
+  projectBackgroundColor?: string;
+  projectBackgroundSelectedColor?: string;
   milestoneBackgroundColor?: string;
   milestoneBackgroundSelectedColor?: string;
   arrowColor?: string;