Introduction

One subject that draws attention among many users involved in projects is integration with additional data for construction phasing.

With our platform, we can take advantage of the data from our elements, which enables us to create a chart connected with our design.

To make it simple, in this blog post, you'll find a sample extension capable of generating a Gantt chart connected with the elements of the model.

The information about the phases is obtained from a CSV that controls how the tasks are created. This way we can easily experiment without having to manage connections with additional APIs and Databases.

Input, Libraries, and Configuration

We'll need a library to generate the chart and a way to implement additional information related to the tasks that each element will be part of.

The logic to add the Gantt chart will be similar to what we do in our Dashboard tutorial.

We'll basically have our chart available inside a Viewer panel accessible through an extension.

For the library, we choose Frappe Gantt and to handle the dialog box for importing CSV, we'll use sweetalert2.

Building the Gantt chart

We'll use two classes to achieve our goal: PhasingExtension and PhasingPanel:

PhasingExtension is based on BaseExtension from our tutorial. Through it, we'll handle the creation of the button, the panel, and the loading of the required libraries.

PhasingPanel will create a panel that's gonna host our Gantt chart (the library we choose requires an SVG element to place the chart).

Connecting the chart with the model

In PhasingPanel we also have the configuration, that defines how our extension will read the CSV file, arrange and connect data with our model.

const phasing_config = {
  "tasks": [],
  "objects": {},
  "propFilter": "Type Name",
  "requiredProps": {
    "id": "ID",
    "taskName": "NAME",
    "startDate": "START",
    "endDate": "END",
    "taskProgress": "PROGRESS",
    "dependencies": "DEPENDENCIES"
  },
  "mapTaksNProps": {},
  "viewModes": [
    // "Quarter Day",
    // "Half Day",
    "Day",
    "Week",
    "Month"
  ],
  "statusColors": {
    "finished": "31,246,14",
    "inProgress": "235,246,14",
    "late": "246,55,14",
    "notYetStarted": "",
    "advanced": "14,28,246"
  }
}

In the case of our sample, the matching between CSV and model is done through the Type Name property.

With the values defined by this configuration, we'll control the color override of the objects and map dbIds with tasks from the chart, so when we double-click a task, the proper elements get isolated.

color override and filter

Improving UI & UX

To make this Gantt chart friendly for the user and more useful, we added control of its scale (days, months, and weeks), the orientation of the panel, and an option to input a different CSV file.

improving UI & UX