) => any) | null;
/**
* Enables the application of a user-defined filter to a specified column, allowing you to customize how data is displayed or managed within either a task column or a resource column. This feature supports more precise data sorting, searching, or visibility based on your chosen criteria.
* @param {any} columns. An object or an array of objects with the following syntax: - type - indicates the type of column to filter. Possible values are 'task' or 'resource'.
- value - the value of the column that must match the value attribute of a taskColumns/resourceColumns object(e.g. 'label', 'dateStart', etc).
.
* @param {any} filterGroup. A Smart.Utilities.FilterGroup object. Here's an example for creating a FilterGroup object: const filterGroup = new window.Smart.Utilities.FilterGroup(), filterObject = filterGroup.createFilter('string', 'Task B', 'STARTS_WITH_CASE_SENSITIVE'); filterGroup.addFilter('or', filterObject); gantt.addFilter({ type: 'task', value: 'label' }, filterGroup);
*/
addFilter(columns: any, filterGroup: any): void;
/**
* Removes all active filters from the current view, resetting any filter selections and displaying the complete, unfiltered dataset or content.
*/
clearFilters(): void;
/**
* Removes any active sorting from the columns, restoring the original or default order of the data. This action resets the column sorting state, so no columns are sorted after this operation.
*/
clearSort(): void;
/**
* Deselects all currently selected items within the GanttChart component, including both Tasks and Resources. Additionally, this action removes any visual highlights or indicators related to task-resource assignments, ensuring that no items remain selected or highlighted in the chart.
*/
clearSelection(): void;
/**
* Removes a previously stored state of the element from LocalStorage, based on the element's unique id attribute. Note: The element must have an id specified for this operation to work.
*/
clearState(): void;
/**
* Deletes all existing tasks from the list, resulting in an empty task collection. This action is irreversible and will permanently remove every task from storage.
*/
clearTasks(): void;
/**
* Deletes all resources from the system, ensuring that no data or assets remain. This operation is irreversible and will remove every resource currently managed by the application.
*/
clearResources(): void;
/**
* Establishes a logical link between two tasks, indicating that the completion or status of one task directly influences or triggers the other. This connection can be used to define dependencies, control workflow order, and ensure tasks are executed in the correct sequence.
* @param {number | string} startTaskIndex. The id of the start task or the connection string like '2-3-0'. If the complete connections string is provided as the first argument, the rest of the method arguments are not necessary
* @param {number | string} taskEndIndex?. The id of the end task.
* @param {number} connectionType?. The type of the connection. A numeric value from 0 to 3. The connection type can be: - 0 - Start-to-Start connection.
- 1 - End-to-Start connection.
- 2 - End-to-End connection.
- 3 - Start-to-End connection.
* @param {number} lag?. The connection lag in miliseconds. Used by the Auto scheduling algorithm in order allow some slack time slack time before or after the next task begins/ends. Lag is measured in miliseconds. It can be a negative (lead) or a positive (lag) number.
*/
createConnection(startTaskIndex: number | string, taskEndIndex?: number | string, connectionType?: number, lag?: number): void;
/**
* Collapses a currently expanded project section, minimizing its content to provide a streamlined view and reduce on-screen clutter. This action hides the project's detailed information while keeping the project accessible for future expansion.
* @param {string | number} id. The id of a project item that should be collapsed.
*/
collapse(id: string | number): void;
/**
* Initiates an update operation, allowing you to group and apply multiple method calls or set several properties in a single batch. This approach is ideal for making coordinated changes efficiently, minimizing redundant processing or event triggers that could occur if each update were applied individually.
*/
beginUpdate(): void;
/**
* Concludes the update operation, allowing the GanttChart to resume its rendering process. Invoking this method will trigger a refresh, ensuring that all recent changes are visually reflected on the chart.
*/
endUpdate(): void;
/**
* Refreshes the GanttChart display after resizing by recalculating and updating the scrollbars to ensure proper alignment and navigation.
* @param {boolean} fullRefresh?. If set the GanttChart will be re-rendered completely.
*/
refresh(fullRefresh?: boolean): void;
/**
* Collapses all rows.
* @returns {any}
*/
collapseAllRows(): any;
/**
* Ensures that the specified task element is brought into view within the scrollable container by automatically scrolling the page or container if necessary, so the task is fully visible to the user.
* @param {string | number} taskId. The id of the target Task.
*/
ensureVisible(taskId: string | number): void;
/**
* Expands a collapsed project to reveal its associated tasks, allowing users to view and interact with all items within the project.
* @param {string | number} id. The id of a project task that should be expanded.
*/
expand(id: string | number): void;
/**
* Exports the hierarchical tree data structure associated with the GanttChart, including all tasks, sub-tasks, and their relationships, in a serialized format suitable for data exchange or storage.
* @param {string} dataFormat. Determines the format of the exported file. Three possible values are available:
* @param {any} callback?. A callback that allows to format the exported data based on a condition. For additional details, refer ro the Smart Export Documentation.
*/
exportData(dataFormat: string, callback?: any): void;
/**
* Expands all rows.
* @returns {any}
*/
expandAllRows(): any;
/**
* Retrieves a complete list of all current connections. The returned value is an array of objects, where each object represents a single connection and includes comprehensive metadata about that connection. Each connection object contains the following properties:
- **id**: A unique identifier for the connection.
- **type**: The type or category of the connection (e.g., dependency, sequential, etc.).
- **startTaskId**: The unique identifier of the task where the connection originates.
- **endTaskId**: The unique identifier of the task where the connection terminates.
- **startIndex**: The index position within the start task from which the connection begins (useful for tasks with multiple connection points).
- **endIndex**: The index position within the end task where the connection attaches.
- **lag**: The lag time, typically in milliseconds or a project-specific unit, representing any delay between the linked tasks.
This structure provides all necessary details for understanding the relationship and timing between connected tasks.
* @returns {any}
*/
getConnections(): any;
/**
* Returns the details of the specified connection, providing information such as: the starting task (`startTask`), ending task (`endTask`), unique identifiers of the starting and ending tasks (`startTaskId`, `endTaskId`), and the connection type (`type`). For a comprehensive explanation of the available connection types, please refer to the 'connectionEnd' event documentation within this document or the dedicated topic on our website.
* @param {string} connectionId. A connection id. Each connection has a unique id that is assigned when a connection is created.
* @returns {any}
*/
getConnectionDetails(connectionId: string): any;
/**
* Provides a comprehensive JSON object containing all tasks within the specified element, including detailed information about each task's attributes, their interconnections (such as dependencies or links), and the full configuration settings associated with each task. This structured representation allows for thorough inspection, processing, or manipulation of the tasks and their relationships.
* @returns {any[]}
*/
getState(): any[];
/**
* Returns the tree path of a specified task or resource. The tree path represents the unique location of the task or resource within a hierarchical structure. If the user does not explicitly provide an ID for the task or resource, this tree path will be used as its default unique identifier.
* @param {any} item. A GattChartTask/GanttChartResource item object.
* @returns {string}
*/
getItemPath(item: any): string;
/**
* Returns the task object that matches the specified id or path. The id/path parameter can be either a unique identifier or a hierarchical location string for the task. The returned object contains detailed information and properties related to the task, such as its status, title, description, due date, and any associated metadata.
* @param {string | number} itemId. The id/path of a task.
* @returns {any}
*/
getTask(itemId: string | number): any;
/**
* Returns an array containing all task objects currently present in the GanttChart. Each task object includes details such as the task ID, name, start date, end date, dependencies, and any additional task-specific properties.
* @returns {any[]}
*/
getTasks(): any[];
/**
* Returns the zero-based index position of the specified task within a task list. If the task is not found, the method returns -1.
* @param {any} task. A GattChartTask object.
* @returns {number}
*/
getTaskIndex(task: any): number;
/**
* Returns the definitions of all connections associated with a specific task, including details about each connection's type, configuration, and related parameters.
* @param {any} taskId. A GanttChartTask object or it's id.
* @returns {any}
*/
getTaskConnections(taskId: any): any;
/**
* Returns the associated Project object for a given task. If the task is not linked to any Project, the function returns undefined.
* @param {any} task. A GantChartTask object.
* @returns {any}
*/
getTaskProject(task: any): any;
/**
* Returns the resource object that matches the specified ID or path parameter. This object contains all relevant properties and data associated with the requested resource. If no resource is found with the provided ID or path, the method returns null or an error, depending on implementation.
* @param {string | number} itemId. The id/path of a resource.
* @returns {any}
*/
getResource(itemId: string | number): any;
/**
* Returns an array containing all resource objects associated with the GanttChart. Each resource object includes detailed information about a specific resource, such as its unique identifier, name, and any additional properties defined for resources within the GanttChart. This allows developers to access and manipulate the full set of resources currently present in the chart.
* @returns {any[]}
*/
getResources(): any[];
/**
* Returns the zero-based index position of the specified resource within a collection or array. If the resource is not found, the function typically returns -1.
* @param {any} resource. A GanttChartResource object.
* @returns {number}
*/
getResourceIndex(resource: any): number;
/**
* Returns a list of tasks that have been assigned to the specified resource, including all relevant details for each task. This allows you to retrieve and review all tasks currently associated with the given resource.
* @param {any} resource. A GanttChartResource object or it's id.
* @returns {any}
*/
getResourceTasks(resource: any): any;
/**
* Returns the IDs of the currently selected tasks or resources as an array. If selection functionality is disabled or if no items are currently selected, the function returns null.
* @returns {any}
*/
getSelectedIds(): any;
/**
* Returns an array containing all tasks that are currently selected by the user. Each task object in the array includes relevant task details such as its identifier, name, status, and any other associated properties. If no tasks are selected, an empty array is returned.
* @returns {any}
*/
getSelectedTasks(): any;
/**
* Returns an array containing information about all resources currently selected by the user. Each resource object may include details such as its unique identifier, name, type, and relevant metadata. This allows developers to programmatically access and process the user's current selections within the application.
* @returns {any}
*/
getSelectedResources(): any;
/**
* Returns the working hours for a given day as an array of numerical values, where each value represents an hour within the standard working period (e.g., [9, 10, 11, 12, 13, 14, 15, 16, 17] for a 9 AM to 5 PM schedule).
* @returns {any}
*/
getWorkingHours(): any;
/**
* Conceals the tooltip element when it is currently displayed, ensuring that the tooltip is no longer visible to the user.
* @returns {any}
*/
hideTooltip(): any;
/**
* Determines whether the specified target date falls on a working day by evaluating it against the nonworkingDays property. Returns true if the target date is a working day (not listed in nonworkingDays), and false if it is a non-working day.
* @param {Date} date. A javascript Date object or a string/number which represents a valid JS Date.
*/
isWorkingDay(date: Date): void;
/**
* Enhancement:
Restores the element’s previously saved state by loading the provided state object, or, if no argument is supplied, checks the browser’s LocalStorage for any saved states associated with the element and loads them if available.
* @param {any[]} state?. An Array containing a valid structure of Gantt Chart tasks.
*/
loadState(state?: any[]): void;
/**
* Removes all existing links or dependencies between tasks, effectively disconnecting every task from one another. After this operation, no task will be linked, dependent on, or related to any other task in the project.
*/
removeAllConnections(): void;
/**
* Removes a connection between two tasks.
The function can be called in one of two ways:
1. With three arguments: the start task's index, the end task's index, and the connection type (for example, "finish-to-start" or "start-to-end").
2. With a single connection string argument that describes the connection (e.g., "1->2:FS").
This allows you to specify which task relationship to remove either by providing explicit task indices and type, or via a string representation of the connection.
* @param {number | string} startTaskIndex. The index of the start task or the connection string like '2-3-0.
* @param {number} taskEndIndex?. The index of the end task.
* @param {number} connectionType?. The type of the connection. A numeric value from 0 to 3.
* @returns {any}
*/
removeConnection(startTaskIndex: number | string, taskEndIndex?: number, connectionType?: number): any;
/**
* Deletes all connections associated with a specified task. If a second, valid task is provided as an argument, only the connections between the two specified tasks are removed.
* @param {any} taskStart. The start task object or it's id.
* @param {any} taskEnd?. The end task object or it's id.
*/
removeTaskConnection(taskStart: any, taskEnd?: any): void;
/**
* Displays a tooltip for a designated element, providing additional contextual information or guidance when the user hovers over, focuses on, or interacts with that element.
* @param {HTMLElement} target. The HTMLElement that will be the target of the tooltip.
* @param {string} content?. Allows to set a custom content for the Tooltip.
*/
showTooltip(target: HTMLElement, content?: string): void;
/**
* Scrolls the view to a specific date within a calendar or timeline component, bringing the selected date into focus for the user.
* @param {Date} date. The date to scroll to.
*/
scrollToDate(date: Date): void;
/**
* Stores the current configuration of the element in the browser's LocalStorage, allowing the settings to persist across page reloads or browser sessions. Note: The element must have a unique id attribute assigned for this functionality to work properly.
* @param {any[]} state?. An Array containing a valid structure of Gantt Chart tasks.
*/
saveState(state?: any[]): void;
/**
* Inserts a new task into the timeline. You can specify the task’s placement by providing a project ID: if a valid project ID is supplied, the new task will be created as a subtask under that project; if no project ID is given, the task will be added as a root-level item in the timeline. This allows for flexible organization, supporting both standalone tasks and tasks nested within projects.
* @param {any} taskObject. An object describing a Gantt Chart task.
* @param {any} project?. A number or string that represents the id of a project (e.g. '0') or a project object definition present in the GanttChart. This parameter determines the parent project of the task that will be inserted. If null is passed as an arguemnt the new task will be inserted at root level without a parent project.
* @param {number} index?. The index where the new item should be inserted(e.g. 2). This index will determine the position of the newly inserted task.
* @returns {string | number | undefined}
*/
insertTask(taskObject: any, project?: any, index?: number): string | number | undefined;
/**
* Updates the details of an existing task, project, or milestone, such as its title, description, status, deadline, or assigned users. This operation allows you to modify key attributes to reflect changes in progress, requirements, or scheduling.
* @param {any} taskId. A number or string that represents the id of a task/project(e.g. '0') or the object definition of the task/project.
* @param {any} taskObject. An object describing a Gantt Chart task. The properties of this object will be applied to the desired task.
*/
updateTask(taskId: any, taskObject: any): void;
/**
* Removes the specified task from the timeline, effectively deleting it from the list of scheduled events. This operation updates the timeline to ensure the removed task no longer appears or affects the scheduling of other tasks.
* @param {any} taskId. A number or string that represents the id of a task or the actual item object.
*/
removeTask(taskId: any): void;
/**
* Adds a new resource to the collection by creating and storing the provided data. Returns details of the created resource upon successful insertion.
* @param {string | number} resourceId. A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following SmartTree syntax), or a number that represents the index of a resource.
* @param {any} resourceObject?. An object describing a Gantt Chart resource.
*/
insertResource(resourceId: string | number, resourceObject?: any): void;
/**
* Updates the specified resource with new data or modifications. This operation applies changes to the current state of the resource identified by its unique identifier, ensuring that only the provided fields are altered while preserving any unspecified properties.
* @param {any} resourceId. A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following SmartTree syntax), or a number that represents the index of a resource.
* @param {any} taskObject. An object describing a Gantt Chart resource. The properties of this object will be applied to the target resource.
*/
updateResource(resourceId: any, taskObject: any): void;
/**
* Deletes a specified resource from the system, permanently removing it and its associated data. This action cannot be undone.
* @param {any} resourceId. A string that represents the id of a resource or it's hierarchical position, e.g. '0' ( following SmartTree syntax), or a number that represents the index of a resource.
*/
removeResource(resourceId: any): void;
/**
* Opens a popup window that allows the user to either edit or delete a connection when a specific connection string is provided. This popup provides relevant options and fields based on the selected task (edit or delete), streamlining the process of managing connection configurations.
* @param {any} taskId. A string or number that represents the id of a task or the task object that is going to be edited or a connection string(e.g. '2-0-0').
*/
openWindow(taskId: any): void;
/**
* Closes any active popup window that was opened within the specified element. This method searches for and terminates all open popup windows that are currently displayed inside the targeted element, ensuring that no popups remain visible or interactive.
*/
closeWindow(): void;
/**
* Configures the GanttChart for optimal print layout and formatting, then automatically launches the browser's Print Preview dialog, allowing users to review and print the current chart view.
*/
print(): void;
/**
* Enables users to define the standard working days and hours for the entire schedule in a single action. This ensures consistency by applying the specified days and time ranges across the relevant calendar or system settings.
* @param settings. An object definition that contains the days and hours that should be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.
*/
setWorkTime(settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): void;
/**
* Enables users to retrieve and select a specific task by providing its unique task ID. This functionality ensures precise identification and access to individual tasks within the system.
* @param {string | number} id. The id of the task to select.
*/
selectTask(id: string | number): void;
/**
* Enables the selection of a specific resource by specifying its unique identifier (ID). This functionality ensures that only the resource matching the provided ID is retrieved or manipulated.
* @param {string | number} id. The id of the resource to select.
*/
selectResource(id: string | number): void;
/**
* Enables the deselection of a specific task by specifying its unique task ID. This operation removes the selected state from the corresponding task if it is currently selected.
* @param {string | number} id. The id of the task to unselect.
*/
unselectTask(id: string | number): void;
/**
* Enables the deselection of a specific resource by providing its unique identifier (ID). This function removes the selected state from the resource corresponding to the given ID, if it is currently selected.
* @param {string | number} id. The id of the resource to unselect.
*/
unselectResource(id: string | number): void;
/**
* Removes any previously defined working hours for the user or resource. This method serves as the counterpart to setWorkingTime, effectively clearing or resetting the working time settings that were established earlier.
* @param settings. An object definition that contains the days and hours that should not be working. The days and hours can be defined as an array of numbers where each number is a day/hour, strings where each string represents a range of days/hours (e.g. '1-5' or '2:00-8:00') or nested array of numbers (e.g. [[1,5]] or [[2, 8]]) which means from 1 to 5 or 2 to 8.
*/
unsetWorkTime(settings: { days: (number | string | number[])[], hours: (number | string | number[])[] }): void;
/**
* Automatically sorts the tasks and resources in the GanttChart when the sortable option is enabled, allowing users to organize items by specified criteria such as start date, name, or priority.
* @param {any} columns. An Array of objects which determine which columns to be sorted, the sort order and the type of item to sort: task or resource. If no arguments are provided sorting will be removed.
An object should have the following properties: - value - a string that represents the value of a taskColumn to sort.
- sortOrder - a string that represents the sorting order for the column: 'asc' (asscending sorting) or 'desc' (descending) are possible values.
- type - a string that represents the type of item to sort. This property determines which panel will be sorted. Two possible values: 'task', 'resource'.
*/
sort(columns: any): void;
/**
* Sets the locale of a component.
* @param {string} locale. The locale abbreviation. For example: 'de'.
* @param {any} messages?. Object containing the locale messages.
*/
setLocale(locale: string, messages?: any): void;
}
/**Configures the data export settings for the GanttChart, allowing customization of how chart data is exported (e.g., format, included fields, file name, and export behavior). */
export interface GanttChartDataExport {
/**
* Specifies whether items that have been filtered out should be included in the export. By default, only unfiltered data is exported; filtered (excluded) items are not included in the export unless this option is enabled.
* Default value: false
*/
exportFiltered?: boolean;
/**
* Specifies the name of the file that will be generated and saved when the export operation is completed.
* Default value: "jqxGanttChart"
*/
fileName?: string;
/**
* Specifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content.
* Default value: task
*/
itemType?: GanttChartDataExportItemType | string;
}
export interface GanttChartDateMarker {
/**
* Determines the marker label.
* Default value:
*/
label?: string | null;
/**
* Determines the date for the marker. The date can include time as well.
* Default value: null
*/
date?: string | Date | number;
/**
* Allows to add a custom class name to the marker.
* Default value: "null"
*/
className?: string;
}
export interface GanttChartResource {
/**
* Resource class. Used to style the resource Timeline.
* Default value: ""
*/
class?: string;
/**
* The capacity of a resource. By default it is used to determine the working capacity ( in hours ) of the resource.
* Default value: 8
*/
capacity?: number;
/**
* Resource visibility.
* Default value: false
*/
hidden?: boolean | undefined;
/**
* Resource id. The unique id of the resource.
* Default value: ""
*/
id?: string;
/**
* Resource label.
* Default value: 0
*/
label?: string | null;
/**
* Resource min capacity
* Default value: 0
*/
minCapacity?: number;
/**
* Resource max capacity. By default this property is used for the resource timeline histogram where maxCapacity is the maximum working capacity in hours of the resource.
* Default value: 0
*/
maxCapacity?: number;
/**
* Resource progress. Progress is the total progress of the resource based on the tasks it is assigned to. This property is automatically calculated.
* Default value: 0
*/
progress?: number;
/**
* Resource type.
* Default value:
*/
type?: any;
/**
* Resource value.
* Default value:
*/
value?: any;
/**
* Resource workload. Workload is the total working time in hours of a resource based on the tasks it is assigned to. This property is automatically calculated.
* Default value: 0
*/
workload?: string | number;
}
export interface GanttChartResourceColumn {
/**
* Column's label.
* Default value:
*/
label?: string | null;
/**
* Column's value. The value shold reference an actual resoruce attribute.
* Default value:
*/
value?: string | null;
/**
* Column's min size.
* Default value: 0
*/
min?: string | number | null;
/**
* Column's size.
* Default value: 0
*/
size?: string | number | null;
/**
* Column's format function. You can use it to customize the column label's rendering.
* Default value: null
*/
formatFunction?: any;
}
export interface GanttChartTask {
/**
* Tasks connection.
* Default value: undefined
*/
connections?: any;
/**
* Project, Task or Milestone CSS class.
* Default value: ""
*/
class?: string;
/**
* Project, Task or Milestone start date.
* Default value:
*/
dateStart?: string | Date;
/**
* Project, Task or Milestone end date.
* Default value:
*/
dateEnd?: string | Date;
/**
* Determines the deadline for the Project, Task or Milestone.
* Default value:
*/
deadline?: string | Date;
/**
* Project, Task or Milestone with disabled resources.
* Default value: false
*/
disableResources?: boolean;
/**
* Project, Task or Milestone dragging is disabled.
* Default value: false
*/
disableDrag?: boolean;
/**
* Project, Task or Milestone resizing is disabled.
* Default value: false
*/
disableResize?: boolean;
/**
* Project, Task or Milestone drag enabled in the view.
* Default value: true
*/
dragProject?: boolean;
/**
* The duration of the tasks in miliseconds. The duration unit can be changed via the durationUnit property.
* Default value: 0
*/
duration?: number | undefined;
/**
* Project, Task or Milestone expanded state in the view.
* Default value: false
*/
expanded?: boolean;
/**
* Task visibility.
* Default value: false
*/
hidden?: boolean | undefined;
/**
* Project, Task or Milestone id.
* Default value:
*/
id?: string | null;
/**
* Determines the indicators for the task. Task indicators represent special dates that are displayed inside the task's row.
* Default value: null
*/
indicators?: GanttChartTaskIndicator[];
/**
* Project, Task or Milestone label.
* Default value:
*/
label?: string | null;
/**
* Project, Task or Milestone format function.
* Default value: null
*/
formatFunction?: any;
/**
* Project, Task or Milestone format function. The function gets passed the following arguments: task, segment, taskElement, segmentElement, labelElement. task - the task object.segment - the task current segment object. If the task has only one segment, the task object is passed again.taskElement - the task's html element.segmentElement - the task's segment html element.labelElement - the task's segment label html element.
* Default value: null
*/
onRender?: any;
/**
* Project, Task or Milestone max start date.
* Default value:
*/
maxDateStart?: string | Date;
/**
* Project, Task or Milestone min start date.
* Default value:
*/
minDateStart?: string | Date;
/**
* Project, Task or Milestone max end date.
* Default value:
*/
maxDateEnd?: string | Date;
/**
* Project, Task or Milestone min end date.
* Default value:
*/
minDateEnd?: string | Date;
/**
* The minimum duration of the Project, Task or Milestone in miliseconds. The units can be changed via the durationUnit property.
* Default value: 0
*/
minDuration?: number | undefined;
/**
* The maximum duration of the Project, Task or Milestone in miliseconds. The unit can be changed via the durationUnit property.
* Default value: 0
*/
maxDuration?: number | undefined;
/**
* Determines whether the task is overdue it's deadline date or not. The property acts only as a getter. By default it's false, unless there's a deadline defined for the task and the dateEnd has surpassed the deadline date.
* Default value: false
*/
overdue?: boolean;
/**
* Determines the planned dateStart/dateEnd for as the baseline for the task.
* Default value: undefined
*/
planned?: GanttChartTaskPlanned;
/**
* Project, Task or Milestone progress.
* Default value: 0
*/
progress?: number;
/**
* Project, Task or Milestone resources.
* Default value:
*/
resources?: any;
/**
* Determines the segments of a task. GanttChart items of type 'task' can be segmented into smaller pieces. This property stores the segment definitions. At least two segments need to be defined in order to segment a task. The first segment should start on the same date as the task. The Last segment should end on the same date as the task.
* Default value: null
*/
segments?: GanttChartTaskSegment[];
/**
* Project, Task or Milestone synchronized in the view.
* Default value: false
*/
synchronized?: boolean;
/**
* Project's tasks. Only projects can have tasks.
* Default value:
*/
tasks?: any;
/**
* Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task'
* Default value: task
*/
type?: GanttChartTaskType | string;
/**
* Project, Task or Milestone value.
* Default value:
*/
value?: any;
}
export interface GanttChartTaskIndicator {
/**
* Indicator label.
* Default value: ""
*/
label?: string;
/**
* Indicator date(can include time).
* Default value:
*/
date?: string | Date;
/**
* A custom class name that can be applied to the indicator's element in order to apply some styling via CSS.
* Default value: "null"
*/
className?: string;
/**
* Represents the code for an icon that will be displayed infront of the indicator label inside the timeline.
* Default value: "null"
*/
icon?: string;
/**
* Determines the tooltip content for the indicator. By default indicators do not show tooltips when hovered.
* Default value: "null"
*/
tooltip?: string;
}
/**Determines the planned dateStart/dateEnd for as the baseline for the task. */
export interface GanttChartTaskPlanned {
/**
* Determines the planned dateStart of the task.
* Default value:
*/
dateStart?: string | Date;
/**
* Determines the planned dateEnd of the task.
* Default value:
*/
dateEnd?: string | Date;
/**
* Determines the planned duration of the task.
* Default value: 0
*/
duration?: number | undefined;
}
export interface GanttChartTaskSegment {
/**
* Segment label.
* Default value:
*/
label?: string | null;
/**
* Segment start date.
* Default value:
*/
dateStart?: string | Date;
/**
* Segment end date.
* Default value:
*/
dateEnd?: string | Date;
/**
* Determines whether segment dragging is disabled.
* Default value: false
*/
disableDrag?: boolean;
/**
* Determines whether segment resizing is disabled.
* Default value: false
*/
disableResize?: boolean;
/**
* The duration of a segment in miliseconds(unit). The duration unit can be changed via the durationUnit property.
* Default value: 0
*/
duration?: number | undefined;
/**
* Segment label format function.
* Default value: null
*/
formatFunction?: any;
}
export interface GanttChartTaskColumn {
/**
* Determines whether the task propery determined by column can be edited from the Window editor or not. By default editing is enabled.
* Default value: false
*/
disableEdit?: boolean;
/**
* Applies only to column's that display dates (e.g. dateStart/dateEnd, etc). This property allows to define a JS Intl.DateTimeFormat object in order to format the dates of the column. Here is an example value of the property: dateFormat: { year: '2-digit', month: 'long', day: 'numeric' }. Another option is to use a date format string. Built-in Date formats:// short date pattern'd' - 'M/d/yyyy',// long date pattern'D' - 'dddd, MMMM dd, yyyy',// short time pattern't' - 'h:mm tt',// long time pattern'T' - 'h:mm:ss tt',// long date, short time pattern'f' - 'dddd, MMMM dd, yyyy h:mm tt',// long date, long time pattern'F' - 'dddd, MMMM dd, yyyy h:mm:ss tt',// month/day pattern'M' - 'MMMM dd',// month/year pattern'Y' - 'yyyy MMMM',// S is a sortable format that does not vary by culture'S' - 'yyyy'-'MM'-'dd'T'HH':'mm':'ss'Date format strings:'d'-the day of the month;'dd'-the day of the month'ddd'-the abbreviated name of the day of the week'dddd'- the full name of the day of the week'h'-the hour, using a 12-hour clock from 1 to 12'hh'-the hour, using a 12-hour clock from 01 to 12'H'-the hour, using a 24-hour clock from 0 to 23'HH'- the hour, using a 24-hour clock from 00 to 23'm'-the minute, from 0 through 59'mm'-the minutes,from 00 though59'M'- the month, from 1 through 12'MM'- the month, from 01 through 12'MMM'-the abbreviated name of the month'MMMM'-the full name of the month's'-the second, from 0 through 59'ss'-the second, from 00 through 59't'- the first character of the AM/PM designator'tt'-the AM/PM designator'y'- the year, from 0 to 99'yy'- the year, from 00 to 99'yyy'-the year, with a minimum of three digits'yyyy'-the year as a four-digit number;'yyyyy'-the year as a four-digit number.
* Default value: null
*/
dateFormat?: any;
/**
* Applies only to column's that display numbers. This property allows to define a JS Intl.NumberFormat object in order to format the numbers of the column. Another option is to use a number format string. Number format strings: 'd' - decimal numbers.'f' - floating-point numbers.'n' - integer numbers.'c' - currency numbers.'p' - percentage numbers.For adding decimal places to the numbers, add a number after the formatting striFor example: 'c3' displays a number in this format $25.256
* Default value: null
*/
numberFormat?: any;
/**
* Column's label.
* Default value:
*/
label?: string | null;
/**
* Column's value.
* Default value:
*/
value?: string | null;
/**
* Column's size.
* Default value: 0
*/
size?: string | number | null;
/**
* Column's min width.
* Default value: 0
*/
minWidth?: string | number | null;
/**
* Column's format function. You can use it to customize the column label's rendering.
* Default value: null
*/
formatFunction?: any;
/**
* A function that allows to set a custom editor for the column's value in the Editor Window. The function must return an HTMLElement. The function has two arguments: name - the name of the task property that is going to be edited.value - the value of the task property that is going to be edited. It's also important to define a getCustomEditorValue to return the value from the custom editor.
* Default value: null
*/
customEditor?: any;
/**
* A function that is used in conjunction with customEditor allows to return the value of the custom editor. Since the editor is unknown by the element, this function allows to return the expected result from the editor. It has one argument - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.
* Default value: null
*/
getCustomEditorValue?: any;
/**
* A function that is used in conjunction with customEditor allows to set the value of the custom editor. Since the editor is unknown by the element, this function allows to set the expected value to the editor. It has three arguments - editor - an HTMLElement that contains the custom editor that was previously defined by the customEditor function.columnValue - the value property of the column.value - the value of the task property that the column displays(the editor value).
* Default value: null
*/
setCustomEditorValue?: any;
}
/**Controls the visibility of tooltips throughout the application. When enabled, informative tooltips will appear for timeline tasks, resources, connections, indicators, and segments, providing users with additional context and details about each element. Disabling this option will hide all tooltips in these areas. */
export interface GanttChartTooltip {
/**
* Specifies whether an arrow should be displayed on the tooltip, indicating its point of attachment to the target element. If set to true, the tooltip will render an arrow; if false, the tooltip will appear without an arrow.
* Default value: false
*/
arrow?: boolean;
/**
* Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a triggering event (such as mouse hover or focus).
* Default value: 50
*/
delay?: number;
/**
* Determines whether tooltips are displayed. When enabled, informative tooltips will appear to provide additional context or guidance to users; when disabled, tooltips will not be shown.
* Default value: false
*/
enabled?: boolean;
/**
* Specifies the offset values, in pixels, to adjust the tooltip's position when it is displayed. The array follows the format [horizontalOffset, verticalOffset], where 'horizontalOffset' shifts the tooltip left or right, and 'verticalOffset' shifts it up or down relative to its default position.
* Default value:
*/
offset?: number[];
}
declare global {
interface Document {
createElement(tagName: "smart-gantt-chart"): GanttChart;
querySelector(selectors: "smart-gantt-chart"): GanttChart | null;
querySelectorAll(selectors: "smart-gantt-chart"): NodeListOf;
getElementsByTagName(qualifiedName: "smart-gantt-chart"): HTMLCollectionOf;
getElementsByName(elementName: "smart-gantt-chart"): NodeListOf;
}
}
/**Specifies the category or format of items to be exported. This property defines what kind of data or objects will be included in the export process, helping to ensure the correct handling and organization of exported content. */
export declare type GanttChartDataExportItemType = 'task' | 'resource';
/**Specifies the display format for dates in the timeline header when the timeline is showing individual days. This setting controls how each day's date is presented (e.g., "MM/DD/YYYY", "Monday, Jan 1", etc.), ensuring that day labels in the header are clear and consistent with your application's requirements. */
export declare type GanttDayFormat = '2-digit' | 'numeric' | 'long' | 'short' | 'narrow';
/**Specifies the unit of measurement (such as seconds, minutes, hours, or days) used for the task's duration property. This defines how the duration value should be interpreted and ensures consistent handling of time-related data across the application. */
export declare type Duration = 'day' | 'hour' | 'minute' | 'second' | 'milisecond';
/**Specifies whether the horizontal scrollbar is visible, allowing users to scroll content horizontally when it exceeds the container’s width. */
export declare type HorizontalScrollBarVisibility = 'auto' | 'disabled' | 'hidden' | 'visible';
/**Specifies the display format for dates shown as hours within the timeline header, controlling how hour values (e.g., "14:00", "2 PM", "14h") are presented to users. This setting ensures that the hour labels in the timeline header are formatted consistently according to your application's requirements. */
export declare type HourFormat = 'default' | '2-digit' | 'numeric';
/**Specifies the date format used for displaying months in the timeline header. This setting defines how month values appear, such as "Jan 2024" or "01/2024", ensuring consistent and customizable presentation of months within the timeline. */
export declare type MonthFormat = '2-digit' | 'numeric' | 'long' | 'short' | 'narrow';
/**Specifies the time interval granularity displayed in the Month view, such as whether events are shown by week, day, or custom periods. This setting adjusts how dates and events are grouped and visualized within the Month view of the calendar. */
export declare type MonthScale = 'day' | 'week';
/**Specifies the date format used to display quarter representations (e.g., "Q1 2024") in the timeline header. This setting controls how quarter periods are labeled, ensuring consistency and clarity in the timeline’s visual presentation. */
export declare type QuarterFormat = 'numeric' | 'long' | 'short';
/**Specifies the method used to display the resource's capacity within the resource timeline. By default, the capacity is shown in hours, but this may vary depending on the value of the element’s view property. This setting controls how capacity data is visually represented for each resource, ensuring that users see capacity information in a format appropriate to the current timeline view (such as hours, days, or custom intervals). */
export declare type GanttChartResourceTimelineMode = 'diagram' | 'histogram' | 'custom';
/**Specifies the layout and presentation of resources within the resource Timeline, controlling how individual resources are visually arranged, organized, and grouped for optimal clarity and user experience. */
export declare type GanttChartResourceTimelineView = 'hours' | 'tasks' | 'custom';
/**Defines or retrieves the selection mode for the component. This property is relevant only when the selection feature is enabled. It determines how users can select items (e.g., single, multiple), and has no effect if selection is disabled. */
export declare type GanttChartSelectionMode = 'one' | 'many' | 'extended';
/**Specifies whether the GanttChart allows sorting by a single column, multiple columns, or disallows column sorting entirely. This setting controls the user's ability to organize tasks in the chart by clicking on one or more column headers. */
export declare type GanttChartSortMode = 'none' | 'one' | 'many';
/**Project, Task or Milestone type. Possible values are 'project', 'milestone' and 'task' */
export declare type GanttChartTaskType = 'project' | 'milestone' | 'task';
/**Specifies whether the vertical scrollbar is displayed, allowing the user to scroll content vertically when necessary. */
export declare type VerticalScrollBarVisibility = 'auto' | 'disabled' | 'hidden' | 'visible';
/**Specifies the date range displayed on the timeline. Accepted values include:
day: The timeline displays all hours within a single day, allowing for detailed, intraday scheduling and review.
week: The timeline presents each day within a single week, providing a broader weekly overview.
month: The timeline shows individual days across an entire month, making it easy to view and manage monthly schedules.
year: The timeline displays each month of the year, providing a high-level annual perspective.
resource: The timeline groups and displays current tasks by the resources assigned to them. Tasks without an assigned resource are grouped under a special "Unassigned" category for easy identification.
The timeline features a header section that labels each cell according to its corresponding date or resource. This header is divided into two tiers (for example, months and days, or days and hours) to provide both summary and detailed information, enhancing clarity and context for users navigating the timeline. */
export declare type GanttChartView = 'day' | 'week' | 'month' | 'quarter' | 'year';
/**Specifies the display format for dates in the timeline header when they represent years. This setting controls how years are presented (e.g., "2024", "’24", or "Year 2024") to ensure consistency and clarity in the timeline header’s date representation. */
export declare type YearFormat = '2-digit' | 'numeric';
/**Specifies the display format for dates in the timeline header when the timeline view is set to show weeks. This setting controls how each week's date range or label appears, allowing customization of the week header’s date representation. */
export declare type WeekFormat = 'long' | 'numeric';