display order has been added

example/src/helper.tsx

@@ -10,8 +10,8 @@ export function initTasks() {
       id: "ProjectSample",
       progress: 25,
       type: "project",
-
       hideChildren: false,
+      displayOrder: 1,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 1),
@@ -27,6 +27,7 @@ export function initTasks() {
       progress: 45,
       type: "task",
       project: "ProjectSample",
+      displayOrder: 2,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 2),
@@ -37,6 +38,7 @@ export function initTasks() {
       dependencies: ["Task 0"],
       type: "task",
       project: "ProjectSample",
+      displayOrder: 3,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 4),
@@ -47,6 +49,7 @@ export function initTasks() {
       dependencies: ["Task 1"],
       type: "task",
       project: "ProjectSample",
+      displayOrder: 4,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
@@ -57,6 +60,7 @@ export function initTasks() {
       dependencies: ["Task 2"],
       type: "task",
       project: "ProjectSample",
+      displayOrder: 5,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 8),
@@ -67,6 +71,7 @@ export function initTasks() {
       progress: 70,
       dependencies: ["Task 2"],
       project: "ProjectSample",
+      displayOrder: 6,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 15),
@@ -77,6 +82,7 @@ export function initTasks() {
       type: "milestone",
       dependencies: ["Task 4"],
       project: "ProjectSample",
+      displayOrder: 7,
     },
     {
       start: new Date(currentDate.getFullYear(), currentDate.getMonth(), 18),

src/components/gantt/gantt.tsx

@@ -1,4 +1,10 @@
-import React, { useState, SyntheticEvent, useRef, useEffect } from "react";
+import React, {
+  useState,
+  SyntheticEvent,
+  useRef,
+  useEffect,
+  useMemo,
+} from "react";
 import { ViewMode, GanttProps, Task } from "../../types/public-types";
 import { GridProps } from "../grid/grid";
 import { ganttDateRange, seedDates } from "../../helpers/date-helper";
@@ -16,7 +22,7 @@ import { GanttEvent } from "../../types/gantt-task-actions";
 import { DateSetup } from "../../types/date-setup";
 import styles from "./gantt.module.css";
 import { HorizontalScroll } from "../other/horizontal-scroll";
-import { removeHiddenTasks } from "../../helpers/other-helper";
+import { removeHiddenTasks, sortTasks } from "../../helpers/other-helper";
 
 export const Gantt: React.FunctionComponent<GanttProps> = ({
   tasks,
@@ -68,7 +74,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     undefined
   );
 
-  const [taskHeight, setTaskHeight] = useState((rowHeight * barFill) / 100);
   const [taskListWidth, setTaskListWidth] = useState(0);
   const [svgContainerWidth, setSvgContainerWidth] = useState(0);
   const [svgContainerHeight, setSvgContainerHeight] = useState(ganttHeight);
@@ -76,6 +81,10 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
   const [ganttEvent, setGanttEvent] = useState<GanttEvent>({
     action: "",
   });
+  const taskHeight = useMemo(
+    () => (rowHeight * barFill) / 100,
+    [rowHeight, barFill]
+  );
 
   const [selectedTask, setSelectedTask] = useState<BarTask>();
   const [failedTask, setFailedTask] = useState<BarTask | null>(null);
@@ -95,6 +104,7 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     } else {
       filteredTasks = tasks;
     }
+    filteredTasks = filteredTasks.sort(sortTasks);
     const [startDate, endDate] = ganttDateRange(filteredTasks, viewMode);
     let newDates = seedDates(startDate, endDate, viewMode);
     if (rtl) {
@@ -213,13 +223,6 @@ export const Gantt: React.FunctionComponent<GanttProps> = ({
     }
   }, [failedTask, barTasks]);
 
-  useEffect(() => {
-    const newTaskHeight = (rowHeight * barFill) / 100;
-    if (newTaskHeight !== taskHeight) {
-      setTaskHeight(newTaskHeight);
-    }
-  }, [rowHeight, barFill, taskHeight]);
-
   useEffect(() => {
     if (!listCellWidth) {
       setTaskListWidth(0);

src/helpers/other-helper.ts

@@ -48,3 +48,15 @@ function getChildren(taskList: Task[], task: Task) {
   tasks = tasks.concat(tasks, taskChildren);
   return tasks;
 }
+
+export const sortTasks = (taskA: Task, taskB: Task) => {
+  const orderA = taskA.displayOrder || Number.MAX_VALUE;
+  const orderB = taskB.displayOrder || Number.MAX_VALUE;
+  if (orderA > orderB) {
+    return 1;
+  } else if (orderA < orderB) {
+    return -1;
+  } else {
+    return 0;
+  }
+};

src/types/public-types.ts

@@ -28,6 +28,7 @@ export interface Task {
   project?: string;
   dependencies?: string[];
   hideChildren?: boolean;
+  displayOrder?: number;
 }
 
 export interface EventOption {