react-pert

react-pert

:star2: Overview

This package provides tools to calculate and visualize a PERT (Program Evaluation and Review Technique) diagram. It includes the following components and utilities:

• Pert: A component to render the PERT diagram.
• usePert: A custom hook to retrieve PERT results.
• Chart Interaction: Allows interaction with the diagram, enabling the selection of tasks and displaying only the path related to the selected task.

:rocket: Progress

• :white_check_mark: PERT Calculator: Fully functional.
• :white_check_mark: PERT Diagram: Fully functional.

:computer: Demo

Check out the live demo here.

:clipboard: Installation

Install the package via npm:

npm install react-pert

:book: Usage

Using Pert Component

import { Pert, type TaskInput } from "react-pert";

const App = () => {
  const tasks: TaskInput[] = [
    { key: "1", duration: 5, text: "A" },
    { key: "2", duration: 4, text: "B" },
    { key: "3", duration: 2, text: "C", dependsOn: ["1"] },
    { key: "4", duration: 3, text: "D", dependsOn: ["2"] },
    //...
  ];

  return <Pert tasks={tasks} />;
};

Using usePert Hook

You need to wrap your application with PertProvider to use the usePert hook. Here is an example of how you can use it:

• Note: You should put the Pert component and usePert hook in the same PertProvider to ensure that the PERT data is available to both.

import { PertProvider, usePert, type TaskInput } from "react-pert";

const App = () => {
  const tasks: TaskInput[] = [
    { key: "1", duration: 5, text: "A" },
    { key: "2", duration: 4, text: "B" },
    { key: "3", duration: 2, text: "C", dependsOn: ["1"] },
    { key: "4", duration: 3, text: "D", dependsOn: ["2"] },
    //...
  ];
  return (
    <PertProvider>
      <Pert tasks={tasks} />
      <PertDetails />
    </PertProvider>
  );
};

import { usePert } from "react-pert";

const PertDetails = () => {
  const { projectDuration, criticalPaths } = usePert();

  return (
    <div>
      <h3>Project Duration : {projectDuration}</h3>
      <h3>Critical Paths:</h3>
      <div>
        {criticalPaths.map((cp, index) => (
          <div key={index}>
            {cp.map((p, i) => (
              <span key={i}>
                {p.text}
                {i < cp.length - 1 && " → "}
              </span>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
};

:bulb: Examples

• setSelectedTask

You can use the setSelectedTask function to select a task in the PERT diagram. This function is available when you import setSelectedTask from react-pert.

setSelectedTask: (taskKey: string | null) => void;

import { Pert, PertProvider, setSelectedTask } from "react-pert";

const App = () => {
  const tasks = [
    { key: "1", duration: 5, text: "A" },
    //...
  ];

  const handleClick = () => {
    setSelectedTask("1");
  };
  const handleClear = () => {
    setSelectedTask(null);
  };

  return (
    // PertProvider is optional if you are using only setSelectedTask
    <PertProvider>
      <Pert tasks={tasks} />
      <button onClick={handleClick}>Select Task 1</button>
      <button onClick={handleClear}>Clear Selection</button>
    </PertProvider>
  );
};

• onSelect

You can use the onSelect prop to get the selected task when a task is selected in the PERT diagram.

onSelect?: (task: Task) => void;

import { Pert } from "react-pert";

const App = () => {
  const tasks = [/*...*/];
  const handleSelect = (task) => {
    console.log("Selected Task:", task);
  };

  return <Pert tasks={tasks} onSelect={handleSelect} />;
};

• usePert with PertOptions

You can pass options to the usePert hook to customize the output data.

const results = usePert({ bounds: true });

• Default: true

The usePert hook can be customized using the bounds option to include or exclude boundary tasks (Start and Finish) in the returned tasks.

Input

const input: TaskInput[] = [
  { key: "1", duration: 5, text: "A" },
  { key: "2", duration: 4, text: "B", dependsOn: ["1"] },
  { key: "3", duration: 2, text: "C", dependsOn: ["2"] },
];

Output with bounds = true

When bounds is set to true, the Start and Finish tasks are included:

const output: Task[] = [
  { key: "Start", text: "Start", duration: 0, dependsOn: [] },
  { key: "1", text: "A", duration: 5, dependsOn: ["Start"], ...rest /* other properties */ },
  { key: "2", text: "B", duration: 4, dependsOn: ["1"], ...rest /* other properties */ },
  { key: "3", text: "C", duration: 2, dependsOn: ["2"], ...rest /* other properties */ },
  { key: "Finish", text: "Finish", duration: 0, dependsOn: ["3"] },
];

Output with bounds = false

When bounds is set to false, the Start and Finish tasks are excluded:

const output: Task[] = [
  { key: "1", text: "A", duration: 5, dependsOn: [], ...rest /* other properties */,},
  { key: "2", text: "B", duration: 4, dependsOn: ["1"], ...rest /* other properties */ },
  { key: "3", text: "C", duration: 2, dependsOn: ["2"], ...rest /* other properties */ },
];

:books: API Reference

PertProps

Attribute	Type	Description
tasks	TaskInput[]	Array of tasks to be used for the calculation and PERT diagram.
styles?	PertStyles	Optional styles configuration for the PERT chart.
onSelect?	(task: Task) => void	Optional callback invoked when a task is selected.

Pert

A visual representation of the PERT diagram (currently in development).

usePert

Options:

PertOptions

Attribute	Type	Description
bounds	boolean	Determines whether the boundary tasks (Start and Finish) should be included in the returned tasks. Default: true

• If true, the Start and Finish tasks will be included.
• If false, the Start and Finish tasks will be excluded.
• Default: true

Returns:

• PertDataType: Contains all PERT data including tasks, levels, links, critical paths, and project duration.

PertDataType

Attribute	Type	Description
tasks	Task[]	Array of tasks with PERT calculation results.
levels	LevelType	Mapping of task keys to their respective levels.
links	LinkType[]	Array of links representing the dependencies between tasks.
criticalPaths	CriticalPath[]	Array of critical paths in the project.
projectDuration	number	Total duration of the project.
error?	string | null	Current error message, if any.

TaskInput

Represents a task with input data for PERT calculation.

Attribute	Type	Description
key	string	Unique identifier for the task.
text	string	Description or name of the task.
duration	number	Duration of the task in some unit (e.g., days).
dependsOn?	string[]	Array of task keys that the current task depends on (optional).

Task

Represents a task with PERT calculation results.

Attribute	Type	Description
key	string	Unique identifier for the task.
text	string	Description or name of the task.
duration	number	Duration of the task.
dependsOn?	string[]	Array of task keys the task depends on.
earlyStart	number	The earliest start time for the task.
earlyFinish	number	The earliest finish time for the task.
lateStart	number	The latest start time for the task.
lateFinish	number	The latest finish time for the task.
level	number	The level of the task in the PERT diagram.
critical	boolean	Indicates if the task is on a critical path.
freeFloat	number	The free float time of the task.
totalFloat	number	The total float time of the task.
index	number	Index of the task in the sequence.

PertStyles

Styles configuration for the PERT chart.

Attribute	Type	Description
disableGrid?	boolean	Whether to disable grid lines in the chart.
taskSize?	number	Size of the task node in pixels.
fontFamily?	string	Font family for the text in the task nodes.
fontSize?	FontSize	Font size for the text in the task nodes.
textColor?	string	Color of the text inside the task nodes.
chartBackground?	string	Background color of the entire chart.
taskBackground?	string	Background color of the task nodes.
gridColor?	string	Color of the grid lines in the chart.
borderWidth?	number	Width of the border for task nodes.
selectedBorderWidth?	number	Width of the border for selected task nodes.
hoverBorderWidth?	number	Width of the border when hovering over task nodes.
borderColor?	string	Color of the border for task nodes.
selectedBorderColor?	string	Color of the border for selected task nodes.
criticalColor?	string	Color for critical path elements (e.g., tasks or links).
arrowColor?	string	Color of the arrows (links) between task nodes.
arrowWidth?	number	Width of the arrows (links) between task nodes.
gap?	{ x?: number; y?: number }	Gap between task nodes in the chart.

FontSize

Type	Description
"sm", "md", "lg", "xl", "2xl", "3xl", string & {}, number	Font size options for text in the task nodes.

LevelType

Represents a mapping of task keys to their respective levels in the PERT diagram.

Attribute	Type	Description
key	number	The level number in the PERT diagram.
value	string[]	Array of task keys at the specific level.

LinkType

Represents a link between two tasks in the PERT diagram.

Attribute	Type	Description
from	string	The task key from which the link originates.
to	string	The task key to which the link leads.
critical	boolean	Indicates if the link is part of a critical path.

CriticalPath

Represents a critical path in the PERT diagram.

	Type	Description
CriticalPath	PathItem[]	An array of tasks (PathItem) forming the critical path.

PathItem

Attribute	Type	Description
text	string	Description or name of the task.
key	string	Task key identifier.

:handshake: Contributing

We welcome contributions! If you encounter any bugs or have feature requests, please open an issue or submit a pull request.

:page_with_curl: License

This package is open-source and licensed under the MIT License.

Enjoy building with PERT Diagram! :relaxed: