Skip to main content

Loading 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: "action",
    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: "MMMM yyy" },
    { unit: "day", step: 1, format: "d", css: dayStyle },
];

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

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const GanttComponent = () => {
  const data = getData();

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

export default GanttComponent;

Loading data from a local source​

You can load predefined data from a separate file at the initialization stage.

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

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

Second, define components during Gantt initialization:

import { getData } from "./common/data";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import React from 'react';

const App = () => {
  const data = getData();

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

export default App;

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 React, { useEffect, useRef, useState } from "react";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

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

const GanttComponent = () => {
  const apiRef = useRef();
  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 apiRef={apiRef} tasks={tasks} links={links} />;
};

export default GanttComponent;
  • 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 React, { useEffect, useState, useRef } from "react";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";
import { RestDataProvider } from "wx-gantt-data-provider";

const GanttComponent = () => {
  const server = new RestDataProvider("https://some_backend_url");
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);
  const apiRef = useRef();

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

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.setNext(server);
    }
  }, [apiRef.current]);

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

export default GanttComponent;

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 React, { useEffect, useRef, useState } from "react";
import { Gantt } from "wx-react-gantt";
import "wx-react-gantt/dist/gantt.css";

const App = () => {
  const [tasks, setTasks] = useState([]);
  const [links, setLinks] = useState([]);
  const apiRef = useRef(null);
  const server = "https://some-backend-url";

  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) => {
    apiRef.current = 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(([tasks, links]) => {
        api.exec("provide-data", {
          id: ev.id,
          data: {
            tasks,
            links,
          },
        });
      });
    });
  };

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

export default App;