Hackathon

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react",
-  "version": "0.3.9",
+  "version": "0.3.13",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "MaTeMaTuK <[email protected]>",
   "homepage": "https://github.com/MaTeMaTuK/gantt-task-react",

src/components/calendar/calendar.tsx

@@ -176,9 +176,10 @@ export const Calendar: React.FC<CalendarProps> = ({
     const dates = dateSetup.dates;
     for (let i = 0; i < dates.length; i++) {
       const date = dates[i];
-      const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date
+      const bottomValue = `${date
         .getDate()
         .toString()}`;
+      const bottomValueWeekDay = `${getLocalDayOfWeek(date, locale, "narrow")}`;
 
       bottomValues.push(
         <text
@@ -187,7 +188,7 @@ export const Calendar: React.FC<CalendarProps> = ({
           x={columnWidth * i + columnWidth * 0.5}
           className={styles.calendarBottomText}
         >
-          {bottomValue}
+          {bottomValueWeekDay} {bottomValue}
         </text>
       );
       if (
@@ -334,14 +335,14 @@ export const Calendar: React.FC<CalendarProps> = ({
   }
   return (
     <g className="calendar" fontSize={fontSize} fontFamily={fontFamily}>
-      <rect
-        x={0}
-        y={0}
-        width={columnWidth * dateSetup.dates.length}
-        height={headerHeight}
-        className={styles.calendarHeader}
-      />
-      {bottomValues} {topValues}
+        <rect
+          x={0}
+          y={0}
+          width={columnWidth * dateSetup.dates.length}
+          height={headerHeight}
+          className={styles.calendarHeader}
+        />
+        {bottomValues} {topValues}
     </g>
   );
 };

src/components/gantt/gantt.tsx

@@ -24,9 +24,18 @@ import { HorizontalScroll } from "../other/horizontal-scroll";
 import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper";
 import styles from "./gantt.module.css";
 
+const COLUMNLIST = [
+  { columnName: 'Code', headerCellClass: '', cellClass: '', isVisible: true, columnWithArrow: true, toShow: (task:Task) => {return task.id} },
+  { columnName: 'Nom', headerCellClass: '', cellClass: '',  isVisible: true, toShow: (task:Task) => {return task.name} },
+  { columnName: 'Début', headerCellClass: '', cellClass: '',  isVisible: true, isDate:true, toShow: (task:Task) => {return task.start} },
+  { columnName: 'Fin', headerCellClass: '', cellClass: '',  isVisible: true, isDate:true, toShow: (task:Task) => {return task.end} },
+  { columnName: 'Assigné à', headerCellClass: '', cellClass: '',  isVisible: true, toShow: (task:Task) => {return task.assignedUser} },
+];
+
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
   headerHeight = 50,
+  marginTop = 0,
   columnWidth = 60,
   listCellWidth = "155px",
   rowHeight = 50,
@@ -58,6 +67,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   TooltipContent = StandardTooltipContent,
   TaskListHeader = TaskListHeaderDefault,
   TaskListTable = TaskListTableDefault,
+  columnList = COLUMNLIST,
   onDateChange,
   onProgressChange,
   onDoubleClick,
@@ -139,7 +149,8 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
         projectBackgroundColor,
         projectBackgroundSelectedColor,
         milestoneBackgroundColor,
-        milestoneBackgroundSelectedColor
+        milestoneBackgroundSelectedColor,
+        marginTop,
       )
     );
   }, [
@@ -395,6 +406,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     dates: dateSetup.dates,
     todayColor,
     rtl,
+    marginTop,
   };
   const calendarProps: CalendarProps = {
     dateSetup,
@@ -421,6 +433,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     arrowIndent,
     svgWidth,
     rtl,
+    marginTop,
     setGanttEvent,
     setFailedTask,
     setSelectedTask: handleSelectedTask,
@@ -444,6 +457,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     horizontalContainerClass: styles.horizontalContainer,
     selectedTask,
     taskListRef,
+    columnList,
     setSelectedTask: handleSelectedTask,
     onExpanderClick: handleExpanderClick,
     TaskListHeader,

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

@@ -27,6 +27,7 @@ export type TaskGanttContentProps = {
   fontSize: string;
   fontFamily: string;
   rtl: boolean;
+  marginTop: number;
   setGanttEvent: (value: GanttEvent) => void;
   setFailedTask: (value: BarTask | null) => void;
   setSelectedTask: (taskId: string) => void;

src/components/gantt/task-gantt.tsx

@@ -43,14 +43,16 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
       ref={verticalGanttContainerRef}
       dir="ltr"
     >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={gridProps.svgWidth}
-        height={calendarProps.headerHeight}
-        fontFamily={barProps.fontFamily}
-      >
-        <Calendar {...calendarProps} />
-      </svg>
+      <div className="calendarWrapper">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={gridProps.svgWidth}
+          height={calendarProps.headerHeight}
+          fontFamily={barProps.fontFamily}
+        >
+          <Calendar {...calendarProps} />
+        </svg>
+      </div>
       <div
         ref={horizontalContainerRef}
         className={styles.horizontalContainer}
@@ -60,16 +62,18 @@ export const TaskGantt: React.FC<TaskGanttProps> = ({
             : { width: gridProps.svgWidth }
         }
       >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={gridProps.svgWidth}
-          height={barProps.rowHeight * barProps.tasks.length}
-          fontFamily={barProps.fontFamily}
-          ref={ganttSVGRef}
-        >
-          <Grid {...gridProps} />
-          <TaskGanttContent {...newBarProps} />
-        </svg>
+        <div className="contentGridWrapper">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={gridProps.svgWidth}
+            height={barProps.rowHeight * barProps.tasks.length + 2 * barProps.marginTop}
+            fontFamily={barProps.fontFamily}
+            ref={ganttSVGRef}
+          >
+            <Grid {...gridProps} />
+            <TaskGanttContent {...newBarProps} />
+          </svg>
+        </div>
       </div>
     </div>
   );

src/components/grid/grid-body.tsx

@@ -11,6 +11,7 @@ export type GridBodyProps = {
   columnWidth: number;
   todayColor: string;
   rtl: boolean;
+  marginTop: number;
 };
 export const GridBody: React.FC<GridBodyProps> = ({
   tasks,
@@ -20,8 +21,9 @@ export const GridBody: React.FC<GridBodyProps> = ({
   columnWidth,
   todayColor,
   rtl,
+  marginTop,
 }) => {
-  let y = 0;
+  let y = marginTop;
   const gridRows: ReactChild[] = [];
   const rowLines: ReactChild[] = [
     <line
@@ -33,14 +35,28 @@ export const GridBody: React.FC<GridBodyProps> = ({
       className={styles.gridRowLine}
     />,
   ];
+  let i = 0;
+  let tasksLength = tasks.length;
   for (const task of tasks) {
+    let yTmp = y;
+    let tmpHeight = rowHeight;
+    if (i === 0) {
+      //set first row rectangle y to 0 to fill first row completely including marginTop
+      yTmp = 0;
+      tmpHeight = rowHeight + marginTop;
+    }
+    // set last row to fill margin
+    if (i === (tasksLength - 1)) {
+      tmpHeight = rowHeight + marginTop;
+    }
+    i++;
     gridRows.push(
       <rect
         key={"Row" + task.id}
         x="0"
-        y={y}
+        y={yTmp}
         width={svgWidth}
-        height={rowHeight}
+        height={tmpHeight}
         className={styles.gridRow}
       />
     );

src/components/grid/grid.module.css

@@ -2,10 +2,6 @@
   fill: #fff;
 }
 
-.gridRow:nth-child(even) {
-  fill: #f5f5f5;
-}
-
 .gridRowLine {
   stroke: #ebeff2;
 }

src/components/other/tooltip.tsx

@@ -140,6 +140,9 @@ export const StandardTooltipContent: React.FC<{
       <p className={styles.tooltipDefaultContainerParagraph}>
         {!!task.progress && `Progress: ${task.progress} %`}
       </p>
+      <p className={styles.tooltipDefaultContainerParagraph}>
+        {`Description: ${task.description}`}
+      </p>
     </div>
   );
 };

src/components/task-item/bar/bar-display.tsx

@@ -18,6 +18,7 @@ type BarDisplayProps = {
     progressSelectedColor: string;
   };
   onMouseDown: (event: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void;
+  assignedUser?: string;
 };
 export const BarDisplay: React.FC<BarDisplayProps> = ({
   x,
@@ -30,6 +31,7 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
   barCornerRadius,
   styles,
   onMouseDown,
+  assignedUser,
 }) => {
   const getProcessColor = () => {
     return isSelected ? styles.progressSelectedColor : styles.progressColor;
@@ -38,7 +40,20 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
   const getBarColor = () => {
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
-
+  let showAvatar = false;
+  if (assignedUser !== undefined) {
+    showAvatar = true;
+  }
+  let avatarX = x + 30;
+  let avatarY = y + height / 2 - 10;
+  let progressCornerRadius = barCornerRadius;
+  let progressHeight = height;
+  let progressY = y
+  if (progressWidth < 20) {
+    progressCornerRadius = 50;
+    progressHeight = height / 3;
+    progressY = progressY + progressHeight
+  }
   return (
     <g onMouseDown={onMouseDown}>
       <rect
@@ -54,12 +69,13 @@ export const BarDisplay: React.FC<BarDisplayProps> = ({
       <rect
         x={progressX}
         width={progressWidth}
-        y={y}
-        height={height}
-        ry={barCornerRadius}
-        rx={barCornerRadius}
+        y={progressY}
+        height={progressHeight}
+        ry={progressCornerRadius}
+        rx={progressCornerRadius}
         fill={getProcessColor()}
       />
+      {showAvatar && <image x={avatarX} y={avatarY} href="https://www.nps.gov/maps/tools/symbol-library/assets/img/volleyball-black-22.svg" height="22px" width="22px" preserveAspectRatio="none"/>}
     </g>
   );
 };

src/components/task-item/bar/bar-small.tsx

@@ -32,6 +32,7 @@ export const BarSmall: React.FC<TaskItemProps> = ({
         onMouseDown={e => {
           isDateChangeable && onEventStart("move", task, e);
         }}
+        assignedUser={task.assignedUser}
       />
       <g className="handleGroup">
         {isProgressChangeable && (

src/components/task-item/bar/bar.tsx

@@ -35,6 +35,7 @@ export const Bar: React.FC<TaskItemProps> = ({
         onMouseDown={e => {
           isDateChangeable && onEventStart("move", task, e);
         }}
+        assignedUser={task.assignedUser}
       />
       <g className="handleGroup">
         {isDateChangeable && (

src/components/task-item/project/project.tsx

@@ -27,7 +27,13 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
     task.x2 - 15,
     task.y + task.height / 2 - 1,
   ].join(",");
-
+  let showTriangles = task.barCornerRadius < 6;
+  let showAvatar = false;
+  if (task.assignedUser !== undefined) {
+    showAvatar = true;
+  }
+  let avatarX = task.x1 + 30;
+  let avatarY = task.y + task.height / 2 - 10;
   return (
     <g tabIndex={0} className={styles.projectWrapper}>
       <rect
@@ -49,26 +55,17 @@ export const Project: React.FC<TaskItemProps> = ({ task, isSelected }) => {
         rx={task.barCornerRadius}
         fill={processColor}
       />
-      <rect
-        fill={barColor}
-        x={task.x1}
-        width={projectWith}
-        y={task.y}
-        height={task.height / 2}
-        rx={task.barCornerRadius}
-        ry={task.barCornerRadius}
-        className={styles.projectTop}
-      />
-      <polygon
+      {showTriangles && <polygon
         className={styles.projectTop}
         points={projectLeftTriangle}
         fill={barColor}
-      />
-      <polygon
+      />}
+      {showTriangles && <polygon
         className={styles.projectTop}
         points={projectRightTriangle}
         fill={barColor}
-      />
+        />}
+      {showAvatar && <image x={avatarX} y={avatarY} href="https://www.nps.gov/maps/tools/symbol-library/assets/img/volleyball-black-22.svg" height="22px" width="22px" preserveAspectRatio="none"/>}
     </g>
   );
 };