Array

Data collection.

Optional

Object

Configuration related to the task list table on the left.

Optional

The specific type definitions are as follows:

/** Configuration related to the left task information table */
  taskListTable?: {
    /** The width occupied by the left task list information. If set to 'auto', all columns will be fully displayed */
    tableWidth?: 'auto' | number;
    /** Minimum width of the left task list */
    minTableWidth?: number;
    /** Maximum width of the left task list */
    maxTableWidth?: number;
  } & Omit<      // Configurable properties of the ListTable
    ListTableConstructorOptions,
    | 'container'
    | 'records'
    | 'defaultHeaderRowHeight'
    | 'defaultRowHeight'
    | 'overscrollBehavior'
    | 'rowSeriesNumber'
    | 'scrollStyle'
    | 'pixelRatio'
    | 'title'
  >;

The content configured here corresponds to the left task information table, which is a complete instance of ListTable. Therefore, in addition to the configuration items for table width, the configurations are basically consistent with those in ListTable except for the items omitted. For details, please refer to ListTable

The items specified by Omit that do not need to be defined here in taskListTable (defined in the outer option) are:

['container', 'records', 'rowSeriesNumber', 'overscrollBehavior', 'pixelRatio'];

Also, note the configuration of the outer border in the theme.frameStyle of ListTable, because the frame has already been defined in the Gantt chart configuration, so there is an override logic here:

left_listTable_options.theme.frameStyle = Object.assign({}, this.ganttOptions.outerFrameStyle, {
          cornerRadius: [
            this.ganttOptions.outerFrameStyle?.cornerRadius ?? 0,
            0,
            0,
            this.ganttOptions.outerFrameStyle?.cornerRadius ?? 0
          ],
          borderLineWidth: [
            this.ganttOptions.outerFrameStyle?.borderLineWidth ?? 0,
            0,
            this.ganttOptions.outerFrameStyle?.borderLineWidth ?? 0,
            this.ganttOptions.outerFrameStyle?.borderLineWidth ?? 0
          ]
        });

In addition, the configuration of the scrollbar in the theme.scrollStyle of ListTable will also have an override logic based on the Gantt chart configuration items:

left_listTable_options.theme.scrollStyle = Object.assign(
  {}, 
  this.options.taskListTable.theme.scrollStyle, 
  this.ganttOptions.scrollStyle, 
  {
    verticalVisible: 'none'
  })

Object

Time scale configuration.

  {
    backgroundColor?: string;
    colWidth?: number;
    /** Vertical line style */
    verticalLine?: ILineStyle;
    /** Horizontal line style */
    horizontalLine?: ILineStyle;
    scales: ITimelineScale[];
  }

Object

Set task bar style.

Optional

TaskShowMode

Task bar display mode. It is configured using the enumeration type TaskShowMode.

Optional

• TaskShowMode.Tasks_Separate: Each task node is displayed in a separate row, with the parent task occupying one row and child tasks occupying one row each. This is the default display effect!
• TaskShowMode.Sub_Tasks_Separate: The parent task node is omitted and not displayed, and all child task nodes are displayed in separate rows.
• TaskShowMode.Sub_Tasks_Inline: The parent task node is omitted and not displayed, and all child task nodes are placed in the same row for display.
• TaskShowMode.Sub_Tasks_Arrange: The parent task node is omitted and not displayed, and all child tasks will maintain the data order in the records and ensure that the nodes are displayed without overlapping.
• TaskShowMode.Sub_Tasks_Compact: The parent task node is omitted and not displayed, and all child tasks will be arranged according to the date attribute and ensure a compact display without overlapping nodes.

string

The field name that uniquely identifies the data entry, default is 'id'

Not required

Object

Set dependency line relationship and style

Not required

Specific definition:

{
links: ITaskLink[];
linkLineStyle?: ILineStyle;
linkCreatable?: boolean;
linkSelectable?: boolean;
linkSelectedLineStyle?: ITaskLinkSelectedStyle;
/** Create an operation point for the association line */
linkCreatePointStyle?: IPointStyle;
/** Create the operating point response status effect of the association line */
linkCreatingPointStyle?: IPointStyle;
/** Create an operation line style for the association line */
linkCreatingLineStyle?: ILineStyle;
}

IGrid

Grid style.

Optional

The IGrid definition is as follows:

export interface IGrid {
  backgroundColor?: string;
  verticalLine?: ILineStyle | ((args: GridVerticalLineStyleArgumentType) => ILineStyle);
  horizontalLine?: ILineStyle | ((args: GridHorizontalLineStyleArgumentType) => ILineStyle);
}

export type GridVerticalLineStyleArgumentType = {
  /** 竖线是第几条线*/
  index: number;
  /** 当期日期属于该日期刻度的第几位。如季度日期中第四季度 返回4。 */
  dateIndex: number;
  /** 如果是竖线，date代表分割线指向的具体时间点 */
  date?: Date;
  ganttInstance: Gantt;
};

*

Mark line configuration. If set to true, today will be automatically marked.

Optional

IMarkLine specific definition:

export interface IMarkLine {
  date: string;
  style?: ILineStyle;
  /** The position where the mark line is displayed under the date column. Default is 'left' */
  position?: 'left' | 'right' | 'middle';
  /** Automatically include the mark line within the date range */
  scrollToMarkLine?: boolean;
}

Object

Configuration of the entire outer frame and horizontal and vertical dividing lines.

Optional

string

Specify the minimum date for the entire Gantt chart.

Optional

string

Specify the maximum date for the entire Gantt chart. If not set, the default rule is used.

Optional

number

Default row height for the top header section. If you want to configure according to the header level, please configure it in timelineHeader.scale.

Optional

number

Default row height for data.

Optional

IRowSeriesNumber

Row number configuration.

Optional

*

Scroll behavior configuration.

• 'auto': Consistent with browser scroll behavior, triggers the browser's default behavior when the table scrolls to the top/bottom.
• 'none': When the table scrolls to the top/bottom, it no longer triggers the parent container to scroll.

Optional

IScrollStyle

Scrollbar style.

Optional

For specific reference, see the configuration in ListTable: Specific configuration

number

Pixel ratio.

Optional

string

The date format of the new schedule. The date data will be added to the date field value in the data record. The default value is 'yyyy-mm-dd'.

Not required

dateFormat?:
| 'yyyy-mm-dd'
| 'dd-mm-yyyy'
| 'mm/dd/yyyy'
| 'yyyy/mm/dd'
| 'dd/mm/yyyy'
| 'yyyy.mm.dd'
| 'dd.mm.yyyy'
| 'mm.dd.yyyy';

string

The fill color of the canvas outside the drawing range is '#fff' by default, and it also matches the background color of the table on the left.

Not required