react-pert v1.0.2

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

Pert

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

usePert

Options:

PertOptions

• 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

TaskInput

Represents a task with input data for PERT calculation.

Task

Represents a task with PERT calculation results.

PertStyles

Styles configuration for the PERT chart.

FontSize

LevelType

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

LinkType

Represents a link between two tasks in the PERT diagram.

CriticalPath

Represents a critical path in the PERT diagram.

PathItem

: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: