Data

Data prop requires an array of data objects. A data object must contain an id, fields and activities keys. Data object can also provide a parentId value that will trigger the expand/collapse functionality.

export type DataRow = {
  id: string;
  parentId?: string;
  activities: {
    id: string;
    renderElement: RenderElement;
    from: Date;
    to: Date;
  }[];
  fields: {
    [key: string]: RenderElement;
  };
};

id is used internally to refer to a specific data line.

fields object is for specifying elements for the table section of the chart. A key in fields object must match an id of a column and requires a callback in the form of a renderElement

activities array must contain 0 or more non-overlapping objects that will result in activity elements being created on the chart timeline section.

Activity

Activity objects contain an id, from, to and renderElement.

from and to fields are dates. These dates get converted to UTC and the time part is dropped, both ends of the activity are inclusive.

To create a single day activity, you must specify the same date in from and to.

{
  id: "123",
  from: new Date(2024, 1, 1),
  to: new Date(2024, 1, 1),
  renderElement: () => <>One day activity</>
}