Skip to main content

Load JSON data

Preparing data​

The following types of information can be loaded into Gantt:

  • tasks - an array of objects with data on tasks
  const tasks = [
    {
      id: 1,
      open: true,
      start: new Date(2023, 11, 6),
      duration: 8,
      text: "React Gantt Widget",
      progress: 60,
      type: "summary"
    },
    {
      id: 2,
      parent: 1,
      start: new Date(2023, 11, 6),
      duration: 4,
      text: "Lib-Gantt",
      progress: 80
    },
    {
      id: 3,
      parent: 1,
      start: new Date(2023, 11, 11),
      duration: 4,
      text: "UI Layer",
      progress: 30
    },
    {
      id: 4,
      start: new Date(2023, 11, 12),
      duration: 8,
      text: "Documentation",
      progress: 10,
      type: "summary"
    },
    {
      id: 5,
      parent: 4,
      start: new Date(2023, 11, 10),
      duration: 1,
      text: "Overview",
      progress: 30
    },
    {
      id: 6,
      parent: 4,
      start: new Date(2023, 12, 11),
      duration: 8,
      text: "API reference",
      progress: 0
    }
];
  • columns - an array of objects with data on columns for the table part (grid area with tasks tree)
const columns = [
    { id: "text", header: "Task name", flexgrow: 2 },
    {
      id: "start",
      header: "Start date",
      flexgrow: 1,
      align: "center",
    },
    {
      id: "duration",
      header: "Duration",
      align: "center",
      flexgrow: 1,
    },
    {
      id: "add-task",
      header: "",
      width: 50,
      align: "center",
    },
  ];
  • links - an array of objects with data for links (dependencies between items)
const links = [
    { id: 1, source: 3, target: 4, type: "e2s" },
    { id: 2, source: 1, target: 2, type: "e2s" },
    { id: 21, source: 8, target: 1, type: "s2s" },
    { id: 22, source: 1, target: 6, type: "s2s" },
];
  • scales - an array of objects with data for time scales
 const scales = [
    { unit: "month", step: 1, format: "%F %Y" },
    { unit: "day", step: 1, format: "%j", css: dayStyle },
];
  • resources - an array of objects that describe resources available for assignment to tasks | PRO feature
const resources = [
    { id: 100, name: "Development Team" },
    { id: 101, name: "Laura Turner", role: "Developer", parent: 100 },
    { id: 102, name: "Robert Williams", role: "Designer", parent: 100 },
];
  • assignments - an array of objects that link resources to tasks | PRO feature
const assignments = [
    { id: 1, task: 1, resource: 101, units: 100 },
    { id: 2, task: 1, resource: 102, units: 50 },
];

To pass tasks, columns, links, scales, resources, and assignments to Gantt, import data and define components during initialization:

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

function App() {
  return (
    <Gantt
      tasks={data.tasks}
      columns={data.columns}
      links={data.links}
      scales={data.scales}
      resources={data.resources}
      assignments={data.assignments}
    />
  );
}

Loading data from a local source​

You can load predefined data from a separate file at the initialization stage. <br/>

First, include the data file to the application page and import the Gantt component:

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

Second, define components during Gantt initialization:

import { getData } from "./common/data";
import { Gantt } from "@svar-ui/react-gantt";

const data = getData();

function App() {
  return (
    <Gantt
      tasks={data.tasks}
      links={data.links}
      scales={data.scales}
    />
  );
}

Loading data from the server​

You can also load server data. You need to fetch data from the server and then pass it to Gantt with the same data tag.

To get server data, you can do one of the following:

  • send the request for data using the native fetch method (or any other way)

Example:

import { useState, useEffect } from "react";
import { Gantt } from "@svar-ui/react-gantt";

const server = "https://some-backend-url";

function App() {
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);

  useEffect(() => {
    Promise.all([
      fetch(server + "/tasks").then(res => res.json()),
      fetch(server + "/links").then(res => res.json()),
    ]).then(([t, l]) => {
      setTasks(t);
      setLinks(l);
    });
  }, []);

  return <Gantt tasks={tasks} links={links} />;
}
  • use the ready-made RestDataProvider service and connect it to the backend. First, import it and then apply the getData method. All detailed instructions you can find here: Working with server.

Example:

import { useState, useEffect } from "react";
import { Gantt } from "@svar-ui/react-gantt";
import { RestDataProvider } from "@svar-ui/gantt-data-provider";

function App() {
  const server = new RestDataProvider("https://some_backend_url");
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);

  useEffect(() => {
    server.getData().then(data => {
      setTasks(data.tasks);
      setLinks(data.links);
    });
  }, []);

  const init = api => {
    api.setNext(server);
  };

  return <Gantt tasks={tasks} links={links} init={init} />;
}

Dynamic data loading​

The widget also allows loading data dynamically. To enable it, in the tasks array you should set the lazy field to true for the tasks branches which child tasks you would like to load dynamically and tune your server so that the content of these child tasks is not loaded during the initial loading.

Example of the data array:

const tasks = [
  {
    id: 1,
    open: false,
    start: new Date(2020, 11, 6),
    duration: 8,
    text: "React Gantt Widget",
    progress: 60,
    type: "summary",
    lazy: true
  },
  {
    id: 3,
    open: false,
    start: new Date(2020, 11, 7),
    duration: 8,
    text: "React Gantt Widget",
    progress: 68,
    type: "summary",
    lazy: true
  },
];

When such tasks branches are opened in the UI, Gantt will issue the request-data action with the folder id as a parameter. We listen to this action with the api.on() method, fetch the tasks branch data from the server and parse to the component calling the provide-data action.

import { useState, useEffect } from "react";
import { Gantt } from "@svar-ui/react-gantt";

const server = "https://some-backend-url";

function App() {
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);

  useEffect(() => {
    Promise.all([
      fetch(server + "/tasks").then(res => res.json()),
      fetch(server + "/links").then(res => res.json()),
    ]).then(([t, l]) => {
      setTasks(t);
      setLinks(l);
    });
  }, []);

  const init = api => {
    api.on("request-data", ev => {
      Promise.all([
        fetch(`${server}/tasks/${ev.id}`).then(res => res.json()),
        fetch(`${server}/links/${ev.id}`).then(res => res.json()),
      ]).then(([tasksBranch, linksBranch]) => {
        api.exec("provide-data", {
          id: ev.id,
          data: {
            tasks: tasksBranch,
            links: linksBranch,
          },
        });
      });
    });
  };

  return <Gantt init={init} tasks={tasks} links={links} />;
}

Lazy loading with resources​

When the project uses resources and assignments, the handler must also fetch the assignments that belong to the newly loaded branch and pass them through provide-data. Otherwise resource columns and resource-load will not reflect the child tasks of the opened branch.

With RestDataProvider this is a single call:

api.on("request-data", ev => {
    restProvider
        .getData(ev.id, { assignments: true })
        .then(({ tasks, links, assignments }) => {
            api.exec("provide-data", {
                id: ev.id,
                data: { tasks, links, assignments },
            });
        });
});

The provider issues GET /assignments/{id} for the requested subtree; see GET /assignments for the backend contract.