Summary
A feature displaying a summary bar in the grid footer.
Summaries in the locked grid
For regular columns in the locked section - specify type of summary on columns, available types are:
| Type | Description |
|---|---|
sum |
Sum of all values in the column |
add |
Alias for sum |
count |
Number of rows |
countNotEmpty |
Number of rows containing a value |
average |
Average of all values in the column |
function |
A custom function, used with store.reduce. Should take arguments (sum, record) |
Columns can also specify a summaryRenderer to format the calculated sum.
Summaries in the time axis grid
To output summaries in the ticks of the time axis summary bar, either provide a renderer or use
summaries. The renderer method provides the current tick startDate and endDate which you
can use to output the data you want to present in each summary cell.
features : {
summary : {
// Find all intersecting task and render the count in each cell
renderer: ({ taskStore, startDate, endDate }) => {
const intersectingTasks = taskStore.query(task =>
// Gantt by default renders tasks as early as possible, if loaded with un-normalized data there
// might not be any start and end dates calculated yet
task.isScheduled &&
// Find tasks that intersect the current tick
DateHelper.intersectSpans(task.startDate, task.endDate, startDate, endDate)
);
return intersectingTasks.length;
}
}
}
//<code-header>
fiddle.title = 'Summary';
//</code-header>
const gantt = new Gantt({
appendTo : targetElement,
height : 350,
startDate : '2019-07-07',
endDate : '2019-07-29',
tickSize : 50,
columns : [
{ type : 'name', width : 250, sum : 'count', summaryRenderer : ({ sum }) => 'Summary' }
],
features : {
projectLines : false,
summary : {
renderer : ({ taskStore, startDate, endDate }) => {
// Find all intersecting task and render the count in each cell
const intersectingTasks = taskStore.query(task =>
task.isScheduled &&
DateHelper.intersectSpans(task.startDate, task.endDate, startDate, endDate)
);
return intersectingTasks.length;
}
}
},
project : new ProjectModel({
startDate : '2019-07-07',
duration : 30,
events : [
{
id : 1,
name : 'Project A',
duration : 30,
expanded : true,
children : [
{
id : 11,
name : 'Plan project',
duration : 2,
leaf : true,
cls : 'child1'
},
{
id : 12,
name : 'Execute',
duration : 5,
leaf : true,
cls : 'child1'
},
{
id : 13,
name : 'Summarize project',
duration : 1,
leaf : true,
cls : 'child1'
}
]
}
],
dependencies : [
{
id : 1,
lag : 1,
fromEvent : 11,
toEvent : 12
},
{
id : 2,
lag : 1,
fromEvent : 12,
toEvent : 13
}
]
})
});This feature is disabled by default.
Configs
14
Configs
14Other
Renderer function for a single time axis tick. Should calculate a sum and return HTML as a result.
new Gantt({
features : {
summary : {
renderer : ({ startDate, endDate, taskStore }) => {
// return display value
returns '<div>Renderer output</div>';
}
}
}
});
| Parameter | Type | Description |
|---|---|---|
context | Object | Rendering context object |
context.startDate | Date | Tick start date |
context.endDate | Date | Tick end date |
context.taskStore | TaskStore | Task store |
context.store | TaskStore | Display store, for when Gantt is configured to display tasks from another store than its task store (for example when using the TreeGroup feature) |
Html content
Array of summary configs which consists of a label and a renderer function
new Gantt({
features : {
summary : {
summaries : [
{
label : 'Label',
renderer : ({ startDate, endDate, taskStore }) => {
// return display value
returns '<div>Renderer output</div>';
}
}
]
}
}
});
Misc
Properties
18
Properties
18Common
Class hierarchy
Functions
29
Functions
29Configuration
Events
Misc
Other
Events
5
Events
5Event handlers
5
Event handlers
5Typedefs
3
Typedefs
3Describes a summary level for the time axis in Gantt
| Parameter | Type | Description |
|---|---|---|
label | String | Label for the summary |
renderer | function | Function to calculate the and render the summary value |
startDate | Date | Tick start date |
endDate | Date | Tick end date |
taskStore | TaskStore | Task store |
store | TaskStore | Display store, for when Gantt is configured to display tasks from another store than its task store (for example when using the TreeGroup feature) |