Skip to main content

ConflictReport API

The functionality is available in PRO Edition only

PRO

Description​

ConflictReport component for listing and resolving scheduling conflicts

Displays a side panel with the conflicts reported by the last scheduling run. Conflicts are reported only in the auto scheduling mode.

The panel is shown while the showConflicts state is true. It is opened and closed by the show-conflicts action, which is triggered by the Conflicts button of the Toolbar and by the close icon of the panel.

Each item of the list shows the conflict type and the tasks involved:

  • a Link violation item shows the predecessor and successor tasks of the violated link
  • a Constraint violation item shows the task and its constraint

Clicking an item selects its task and scrolls the chart to it. The buttons of an item resolve the conflict:

  • Move task - moves the task to the start date that clears the conflict
  • Remove link - deletes the violated link
  • Remove constraint - removes the constraint from the task

If there are no conflicts, the panel shows the "No conflicts found" message.

Usage​

<ConflictReport api={api} onClose={onClose} />

You can import the component from @svar/react-gantt.

api: IApi,
onClose?: () => void,

Parameters​

  • api - (required) the Gantt API object; pass the same reference used by the Gantt component
  • onClose - (optional) a callback that fires after a user closes the panel with the close icon

Example​

The panel has a fixed width and takes the full height of its container, so place it next to the Gantt in a row:

import { useState } from "react";
import { Gantt, Toolbar, ConflictReport } from "@svar/react-gantt";
import { getData } from "./data";

const { tasks, links, scales } = getData();

function App() {
  const [api, setApi] = useState();

  return (
    <>
      <Toolbar api={api} />
      <div className="row">
        <div className="gantt">
          <Gantt
            ref={setApi}
            tasks={tasks}
            links={links}
            scales={scales}
            schedule={{ auto: true }}
          />
        </div>
        <ConflictReport api={api} />
      </div>
    </>
  );
}

export default App;
.row {
  display: flex;
  height: 100%;
}
.gantt {
  flex: 1;
  min-width: 0;
}

Related sample:

Related articles: