C3 AI Documentation Home

Building the data model for UiSdlGanttChart

Data Model for UiSdlGanttChart

UiSdlGanttChart relies on 4 different data specs to build the data that will be passed to Bryntum Scheduler Pro to be rendered in the UI:

  • eventDataSpec (UiSdlGanttChartEventDataSpec)
  • resourceDataSpec (UiSdlGanttChartResourceDataSpec)
  • calendarDataSpec (UiSdlGanttChartCalendarDataSpec)
  • timeRangeDataSpec (UiSdlGanttChartTimeRangeDataSpec)

Each data spec defines a specific model to be used in the component and mapped to the Bryntum props object.

Event Data Spec

eventDataSpec represents the data definition for a group of events in the Gantt Chart. An event represents an entry in the chart, it has a start time and and end time. This spec has a defined set of fields that are used as Bryntum properties. You can review the UiSdlGanttChartEventDataSpec type to check which fields are expected from your data. Some of the data Spec properties come from the Bryntum EventModel specification, you can review more of the properties and its behavior here

As an example: Bryntum expects the following object in their component config:

Text
[
    {
        id         : 1,
        resourceId : 'r1',
        startDate  : new Date(2017, 0, 1, 10),
        endDate    : new Date(2017, 0, 1, 12),
        name       : 'Click me',
        iconCls    : 'b-fa b-fa-mouse-pointer'
    },
    {
        id         : 2,
        resourceId : 'r2',
        startDate  : new Date(2017, 0, 1, 12),
        endDate    : new Date(2017, 0, 1, 13, 30),
        name       : 'Drag me',
        iconCls    : 'b-fa b-fa-arrows-alt'
    },
]

This will be processed by UiSdlGanttChart to parse the information from your data to this object. In order to pass the correct data to our component you need to first define a type like this:

Text
entity type SDLDemoGanttChartEvent mixes SeedData, Identified, Named {
  id: string
  resourceId: SDLDemoGanttChartResource
  startDate: datetime
  endDate: datetime
  icon: string
}

So that, when you create your JSON configuration for the component, you map those fields to the data spec, like this:

Text
    "eventDataSpec" : {
      "dataType": "SDLDemoGanttChartEvent",
      "id" : {
        "type" : "UiSdlFieldBasedDataSpecSetting",
        "fieldName" : "id"
      },
      "label" : {
        "type" : "UiSdlFieldBasedDataSpecSetting",
        "fieldName" : "name"
      },
      "icon" : {
        "type" : "UiSdlFieldBasedDataSpecSetting",
        "fieldName" : "iconCls"
      },
      "resourceId" : {
        "type" : "UiSdlFieldBasedDataSpecSetting",
        "fieldName" : "resourceId"
      },
      "startDate" : {
        "type" : "UiSdlFieldBasedDataSpecSetting",
        "fieldName" : "startDate"
      },
      "endDate" : {
        "type" : "UiSdlFieldBasedDataSpecSetting",
        "fieldName" : "endDate"
      },
    }

This business logic is replicated across the other data specs like resources, time ranges and calendars.

Resource Data Spec

resourceDataSpec represents the data definition for a group of resources in the Gantt Chart. A Resource represents a row in the chart, it is a line or row that can receive one or more events. This spec has a defined set of fields that are used as Bryntum properties. You can review the UiSdlGanttChartResourceDataSpec type to check which fields are expected from your data. Some of the data Spec properties come from the Bryntum ResourceModel specification, you can review more of the properties and its behavior here

Calendar Data Spec

calendarDataSpec represents the data definition for a group of calendars in the Gantt Chart. A "calendar" is a concept used by Bryntum that represent a time span that can be recurrent and that defines "working" time. A calendar can be assigned individually to an event, a resource, or the whole project (chart). UiSdlGanttChartCalendarDataSpec defines the shape of this spec.

Each calendar has an ID, a name and a set of one or more "intervals" where each interval defines a start time and an end time that can also be recurrent. If the interval is recurrent, you need to define it in a "human readable" format, this format is described by later library.

You can review more details about calendars in the official Bryntum docs for calendars

Time Range Data Spec

timeRangeDataSpec is an spec where you can define time spans in the Gantt Chart, these time spans will not affect the scheduling of events, they will only appear as visual indications of the span, they will show a header (with a title) and, depending on the configuration, you will be able to move them throughout the chart.

Time ranges are not recurrent, meaning they can only be used once and the start time and end time fields need to be static dates.

Refer to UiSdlGanttChartTimeRangeDataSpec for details about the spec and also check the Bryntum official documentation and reference

Was this page helpful?