Swimlane and swimlane cell properties
note
While specifying color values of the item, you can use the following formats: HEX, RGBA, RGB, HSL, or HSLA.
Properties of a swimlane
Usage
const data = [
// swimlane object
{
type: "$swimlane",
id?: string | number,
width: number,
height: number,
x?: number,
y?: number,
layout: array,
fixed?: boolean,
open?: boolean, // true by default
style?: {
strokeWidth?: number, // 1 by default
stroke?: string,
fill?: string
},
header?: {
height?: number, // 40 by default
fill?: string,
text?: string,
fontSize?: number, // 14 by default
lineHeight?: number, // 14 by default
textAlign?: "left" | "center" | "right", // "center" by default
textVerticalAlign?: "top" | "center" | "bottom", // "center" by default
fontStyle?: "normal" | "italic" | "oblique", // "normal" by default
fontColor?: string, // "#4C4C4C" by default
fontWeight?: string, // "500" by default
iconColor?: string, // "#808080" by default
position?: "top" | "bottom" | "left" | "right",
editable?: boolean, // true by default
closable?: boolean, // false by default
enable?: boolean // true by default
},
subHeaderRows?: {
height?: number | string, // 40 by default
position?: "left" | "right",
enable?: boolean, // true by default
fill?: string,
fontSize?: number, // 14 by default
lineHeight?: number, // 14 by default
textAlign?: "left" | "center" | "right", // "center" by default
textVerticalAlign?: "top" | "center" | "bottom", // "center" by default
fontStyle?: "normal" | "italic" | "oblique", // "normal" by default
fontColor?: string, // "#4C4C4C" by default
fontWeight?: string, // "500" by default
iconColor?: string, // "#808080" by default
editable?: boolean, // true by default
headers?: [
// header object
{
id?: string,
text: string,
fill?: string,
fontSize?: number, // 14 by default
lineHeight?: number, // 14 by default
textAlign?: "left" | "center" | "right", // "center" by default
textVerticalAlign?: "top" | "center" | "bottom", // "center" by default
fontStyle?: "normal" | "italic" | "oblique", // "normal" by default
fontColor?: string, // "#4C4C4C" by default
fontWeight?: string, // "500" by default
iconColor?: string, // "#808080" by default
editable?: boolean // true by default
},
// more header objects
]
},
subHeaderCols?: {
position?: "top" | "bottom",
... // the other attributes are the same as the attributes of subHeaderRows
},
[key: string]?: any
}
// more swimlane objects
];
Description
Each swimlane object can include the following configuration properties:
type- (required) the type of an element, set it to "$swimlane"id- (optional) the unique id of a swimlanewidth- (required) the width of the swimlane, including its header (position: left/right)height- (required) the height of the swimlane, including its header (position: top/bottom)x- (optional) the x coordinate of the swimlane positiony- (optional) the y coordinate of the swimlane positionlayout- (required) an array with matrix representation of the cells of the swimlanefixed- (optional) enables/disables the ability to move and resize the swimlane; false by defaultopen- (optional) defines whether the swimlane is initialized in the expanded (true, default) or collapsed(false) state;tipThe open property works when a header is initialized with the closable attribute
style- (optional) an object with the style settings of the swimlane. The object can contain the following attributes:strokeWidth- (optional) the width of the swimlane border, 1 by defaultstroke- (optional) the color of the border of the swimlane, "#DEDEDE" by defaultfill- (optional) the background color for all cells of the swimlane
header- (optional) an object with configuration attributes of the header of the swimlane. The attributes are:height- (optional) the height of the header, 40 by defaultfill- (optional) the background color of the headertext- (optional) the text to be rendered in the headerfontSize- (optional) the size of the font in pixels, 14 by defaultlineHeight- (optional) the height of a line, 14 by defaulttextAlign- (optional) the alignment of text in the header: "left", "center"(default), "right"textVerticalAlign- (optional) the vertical alignment of text in the header: "top", "center"(default), "bottom"fontStyle- (optional) the style of the text font: "normal" (default), "italic", "oblique"fontColor- (optional) the color of the text font, "#4C4C4C" by defaultfontWeight- (optional) the text font weight, possible values are: "normal", "bold", "bolder", "lighter", values "100"-"900", where "400" is the same as normal, and "600"+ is the boldest font; "500" by defaulticonColor- (optional) the color of the icon of the header, "#808080" by defaultposition- (optional) the positioning of the group header: "top" (default) | "bottom" | "left" | "right"editable- (optional) enables/disables the ability to edit the text of the header by double-clicking on it; true by defaultclosable- (optional) shows/hides an icon intended to expand/collapse a swimlane; false by defaultenable- (optional) shows/hides the header of the group; true by default
subHeaderRows- (optional) an object with configuration settings of the left/right subheaders of the swimlane. The object have the following attributes:height- (optional) the height of the subheaders, 40 by defaultposition- (optional) the positioning of the subheaders: "left" | "right"enable- (optional) shows/hides the subheaders of the group; true by defaultfill- (optional) the background color of the subheadersfontSize- (optional) the size of the font in pixels, 14 by defaultlineHeight- (optional) the height of a line, 14 by defaulttextAlign- (optional) the alignment of text in the subheaders: "left", "center"(default), "right"textVerticalAlign- (optional) the vertical alignment of text in the subheaders: "top", "center"(default), "bottom"fontStyle- (optional) the style of the text font: "normal" (default), "italic", "oblique"fontColor- (optional) the color of the text font, "#4C4C4C" by defaultfontWeight- (optional) the text font weight, possible values are: "normal", "bold", "bolder", "lighter", values "100"-"900", where "400" is the same as normal, and "600"+ is the boldest font; "500" by defaulticonColor- (optional) the color of the icon of the subheaders, "#808080" by defaulteditable- (optional) enables/disables the ability to edit the text of the subheaders by double-clicking; true by defaultheaders- (optional) an array of subheaders objects. Each object may contain the following properties:id- (optional) the id of the subheadertext- (required) the text to be rendered in the subheaderfill- (optional) the background color of the subheaderfontSize- (optional) the size of the font in pixels, 14 by defaultlineHeight- (optional) the height of a line, 14 by defaulttextAlign- (optional) the alignment of text in the subheader: "left", "center"(default), "right"textVerticalAlign- (optional) the vertical alignment of text in the subheader: "top", "center"(default), "bottom"fontStyle- (optional) the style of the text font: "normal" (default), "italic", "oblique"fontColor- (optional) the color of the text font, "#4C4C4C" by defaultfontWeight- (optional) the text font weight, possible values are: "normal", "bold", "bolder", "lighter", values "100"-"900", where "400" is the same as normal, and "600"+ is the boldest font; "500" by defaulticonColor- (optional) the color of the icon of the subheader, "#808080" by defaulteditable- (optional) enables/disables the ability to edit the text of the subheader by double-clicking on it; true by default
subHeaderCols- (optional) an object with configuration settings of the top/bottom subheaders of the swimlane. The object have the following attribute:position- (optional) the positioning of the subheaders: "top" | "bottom"- the other attributes of subHeaderCols are the same as the attributes of subHeaderRows (check the details above)
key- (optional) your own property with your own logic to be implemented under the hood
Example
const data = [
{
"id": "main",
"type": "$swimlane",
"height": 730,
"width": 1195,
"header": {
"closable": true,
"text": "Waterfall diagram template"
},
"layout": [
[1, 2, 3, 4]
],
"subHeaderCols": {
"headers": [
{ "text": "September", "fill": "rgba(243, 92, 79, 0.4)" },
{ "text": "October", "fill": "rgba(155, 96, 248, 0.4)" },
{ "text": "November", "fill": "rgba(255, 174, 18, 0.4)" },
{ "text": "December", "fill": "rgba(60, 201, 122, 0.4)" }
]
}
},
];
Properties of a swimlane cell
Usage
const data = [
// swimlane cell object
{
type: "$sgroup",
id?: string | number,
groupChildren?: array,
style?: {
fill?: string,
overFill?: string,
partiallyFill?: string
},
exitArea?: {
groupBehavior?: "unbound" | "boundNoBorderExtension", // "unbound" by default
padding?: number
}
},
// more objects of swimlane cells
];
Description
The configuration properties of a swimlane cell are given below:
type- (required) the type of a swimlane cell, set it to "$sgroup"id- (optional) the unique id of a swimlane cellgroupChildren- (optional) an array with ids of the first-level child items of a cellstyle- (optional) an object with the style settings of the cell. The object can contain the following properties:fill- (optional) the background color of the celloverFill- (optional) the background color of the cell when the user is holding the item and moving it into/outside the cell providing that no less than 75% of the item's area is inside the cellpartiallyFill- (optional) the background color of the cell when the user is holding the item and moving it into/outside the cell providing that 75% of the item's area or more is out of the cell and other settings are not defined via the exitArea attribute
exitArea- (optional) an object with the settings which will be applied to the item when the user is dragging it out of the cell (is applied only to the first-level children of the cell). The object can contain the following attributes:groupBehavior- (optional) the behavior of the child item of the cell when the user is moving it out of the cell:- "unbound" (by default) - the user can move an item into or outside the cell
- "boundNoBorderExtension" - the user can move an item into the cell but cannot drag the item outside the cell if the item has been dropped inside the cell. The item won't expand the borders of the cell when trying to drag the item outside the cell
padding- (optional) defines the padding between the cell and the edge of the item when moving the item inside the cell.
tipThe padding attribute is available if groupBehavior: "boundNoBorderExtension"
Example
const data = [
// configuring a swimlane
{
"id": "main",
"type": "$swimlane",
"height": 730,
"width": 1195,
"layout": [
[1, 2, 3, 4]
],
},
// configuring a cell of the swimlane
{
"id": 1,
"type": "$sgroup",
"groupChildren": ["s1"],
"style": {
"fill": "rgba(243, 92, 79, 0.05)"
},
"x": 0,
"y": 80
},
// configuring a shape to put into the cell
{
"id": "s1", "type": "end", "text": "Step 1", "x": 20, "y": 110
},
];
Related articles: Configuring swimlanes
Related samples: