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: "2020-11-06",
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 60,
    type: "project"
  },
  {
    id: 2,
    parent: 1,
    start: "2020-11-06",
    duration: 4,
    text: "Lib-Gantt",
    progress: 80
  },
  {
    id: 3,
    parent: 1,
    start: "2020-11-08",
    duration: 4,
    text: "UI Layer",
    progress: 30
  },
  {
    id: 4,
    start: "2020-11-07",
    duration: 8,
    text: "Documentation",
    progress: 10,
    type: "project"
  },
  {
    id: 5,
    parent: 4,
    start: "2020-11-07",
    duration: 1,
    text: "Overview",
    progress: 30
  },
  {
    id: 6,
    parent: 4,
    start: "2020-11-07",
    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:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@wx/svelte-gantt"; 
  
    const data = getData();

</script>

<Gantt
    tasks={data.tasks}
    links={data.links}
    scales={data.scales}
/>

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:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@wx/svelte-gantt";
</script>

Second, define components during Gantt initialization:

<script>
  import { getData } from "./common/data";
  import { Gantt } from "@wx/svelte-gantt";
  
  const data = getData();

</script>

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

<script>
    import { Gantt } from "@wx/svelte-gantt";

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

    let api;
    let tasks = [];
    let links = [];

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

<Gantt bind:api {tasks} {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:

<script>
    import { Gantt } from "@wx/svelte-gantt";
    import { RestDataProvider } from "@wx/gantt-data-provider"; // import RestDataProvider
   
    const server = new RestDataProvider( 
      "https://some_backend_url", // pass the server url to RestDataProvider
    );

    let api;
    let tasks = [];
    let links = [];
    server.getData().then(data => { //load data
        tasks = data.tasks;
        links = data.links;
    });
    
    $: if (api) api.setNext(server); // include RestDataProvider into the Event Bus order to perform operations with data

</script>
<Gantt
    {tasks}
    {links}
    bind:api />

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_date: "2020-11-06",
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 60,
    type: "project",
    lazy: true
  },
  {
    id: 2,
    parent: 1,
    start_date: "2020-11-06",
    duration: 4,
    text: "Lib-Gantt",
    progress: 80
  },
  {
    id: 3,
    open: false,
    start_date: "2020-11-07",
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 68,
    type: "project",
    lazy: true
  },
  {
    id: 4,
    open: false,
    start_date: "2020-11-07",
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 68,
    type: "project",
    parent: 3
  },
 ];

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.

<script>
    import { Gantt } from "@wx/svelte-gantt";

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

    let api;
    let tasks = [];
    let links = [];

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

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

<Gantt bind:api {init} {tasks} {links} />

Preparing data​

Loading data from a local source​

Loading data from the server​

Dynamic data loading​

Preparing data

Loading data from a local source

Loading data from the server

Dynamic data loading