ng-custom-gantt-chart-v2
v1.0.10
Published
Interactive JavaScript Gantt chart/resource booking component
Downloads
73
Maintainers
Readme
svelte-gantt
A lightweight and fast interactive gantt chart/resource booking component made with Svelte. Compatible with any JS library or framework.
Dependent on Moment.js.
Features include: Large datasets, drag'n'drop, tree view, zooming in/out, dependencies, date ranges...
DEMO: Large dataset, Tree, Dependencies
Installation
npm install svelte-gantt
Use ES6 imports in your code:
import { SvelteGantt, SvelteGanttTable } from 'svelte-gantt';
or use the IIFE build:
<link rel='stylesheet' href='node_modules/svelte-gantt/css/svelteGantt.css'>
<script src='moment.js'></script>
<script src='node_modules/svelte-gantt/index.iife.js'></script>
- Initialize svelte-gantt:
var options = {
/* ... */
};
var gantt = new SvelteGantt({
// target a DOM element
target: document.getElementById('example-gantt'),
// svelte-gantt options
props: options
});
..or run the example by opening ./public/index.html
Documentation
Pass options object as props
to the SvelteGantt constructor. To update use $set
, eg.
gantt.$set({
from: moment().startOf('week'),
to: moment().endOf('week')
});
rows
{Array
} Rows to load in the gantt, see below.tasks
{Array
} Tasks that display in the gantt, see below.timeRanges
{Array
} Timeranges that display in the gantt, see below.dependencies
{Array
} Dependencies that display in the gantt, used with the SvelteGanttDependencies module, see below.from
{Moment
} Datetime timeline starts on.to
{Moment
} Datetime timeline ends on.minWidth
{Number
} Minimum width of gantt area in px.fitWidth
{Boolean
} Should timeline stretch width to fit.magnetUnit
{String
} Minimum unit of time task date values will round to.magnetOffset
{Number
} Amount of units task date values will round to.columnUnit
{String
} Duration unit of columns.columnOffset
{Number
} Duration width of column.- eg.
columnUnit: 'minute', columnOffset: 15
will create a column for every 15 minutes.
- eg.
headers
{Array
} List of headers used for main gantt area.zoomLevels
{Array
} List of zoom levels for gantt. Gantt cycles trough these parameters on ctrl+scroll.rowHeight
{Number
} Height of a single row in px.rowPadding
{Number
} Padding of a single row in px.ganttTableModules
{Array
} Modules used in gantt table area.- eg.
[SvelteGanttTable]
- eg.
ganttBodyModules
{Array
} Modules used in gantt body area.- eg.
[SvelteGanttDependencies]
- eg.
reflectOnParentRows
{Boolean
} When task is assigned to a child row display them on parent rows as well, used when rows are disabled as a tree.reflectOnChildRows
{Boolean
} When task is assigned to a parent row display them on child rows as well, used when rows are disabled as a tree.classes
{String
|Array
} Custom CSS classes to apply to gantt.resizeHandleWidth
{Number
} Width of handle for resizing tasks, in px.onTaskButtonClick
{Function
} Callback for task button clicks.- eg.
(task) => console.log('clicked on: ', task)
- eg.
taskContent
{Function
} ,task content factory function.- eg.
(task) => `<div>Task ${task.model.label}</div>`
- eg.
tableWidth
{Number
} Width of table, used with SvelteGanttTable module.tableHeaders
{Array
} Headers of table, used with SvelteGanttTable module.
Header
Represents a row of header cells that render over the gantt.
unit
{String
} Time unit used to display header cells.- eg.
'day'
will create a cell in the header for each day in the timeline.
- eg.
format
{String
} Datetime format used to label header cells.- eg.
'DD.MM.YYYY'
,'HH'
- eg.
offset
{Number
} Duration width of header cell.sticky
{Boolean
} Use sticky positioning for header labels.
Table Header
Represents a single column rendered in SvelteGanttTable.
title
{String
} Label to display in the table column header.property
{String
} Property of row to display in table column cells.width
{Number
} Width of table column, in px.
Zoom level
Represents a zoom level which cycle on ctrl+scroll.
headers
{Array
} See above.minWidth
{Number
} See above.fitWidth
{Boolean
} See above.
Row
Rows are defined as a list of objects. Rows can be rendered as a collapsible tree (rows are collapsed with SvelteGanttTable module). Row objects may have these parameters:
id
{Number
|String
} Id of row, every row needs to have a unique one.classes
{String
|Array
} Custom CSS classes to apply to row.contentHtml
{String
} Html content of row, renders as background to a row.enableDragging
{Boolean
} enable dragging of tasks to and from this row.label
{String
} Label of row, could be any other property, can be displayed with SvelteGanttTable.headerHtml
{String
} Html content of table row header, displayed in SvelteGanttTable.children
{Array
} List of children row objects, these can have their own children.
Task
Tasks are defined as a list of objects:
id
{Number
|String
} Id of task, every task needs to have a unique one.amountDone
{Number
} Task completion in percent, indicated on task.classes
{String
|Array
} Custom CSS classes to apply to task.from
{Moment
} Datetime task starts on.to
{Moment
} Datetime task ends on.label
{String
} Label of task.html
{String
} Html content of task, will override label.showButton
{Boolean
} Show button bar.buttonClasses
{String
|Array
} Button classes, useful for fontawesome icons.buttonHtml
{String
} Html content of button.enableDragging
{Boolean
} enable dragging of task.
Dependencies
Renders a dependency between two tasks. Used by SvelteGanttDependencies module:
id
{Number
|String
} Unique id of dependency.fromId
{Number
|String
} Id of dependent task.toId
{Number
|String
} Id of dependency task.stroke
{String
} Stroke color.- eg.
'red'
or'#ff0000'
- eg.
strokeWidth
{Number
} Width of stroke.arrowSize
{Number
} Size of the arrow head.
Time ranges
Renders a block of time spanning all the rows:
id
{Number
|String
} Unique id of time range.from
{Moment
} Datetime timeRange starts on.to
{Moment
} Datetime timeRange ends on.classes
{String
|Array
} Custom CSS classes.label
{String
} Display label.
Methods
selectTask(id)
Selects task by id.id
{Number
|String
} Id of task
unselectTasks()
Unselects tasks.scrollToTask(id, scrollBehavior)
Scrolls the view to a task.id
{Number
|String
} Id of taskscrollBehaviour
{String
}auto
orsmooth
.
scrollToRow(id, scrollBehavior)
Scrolls the view to a row.id
{Number
|String
} Id of rowscrollBehaviour
{String
}auto
orsmooth
.
updateTask(model)
Updates or inserts task.model
{Task
} Task object
updateTasks(models)
Updates or inserts tasks.models
{Array<Task>
} Task objects
updateRow(model)
Updates or inserts row.model
{Row
} Row object
updateRows(models)
Updates or inserts rows.models
{Array<Row>
} Row objects
getTask(id)
Get task by id.id
{Number
|String
} Id of task
getRow(id)
Get row by id.id
{Number
|String
} Id of row
getTasks(rowId)
Get tasks by row id.rowId
{Number
|String
} Id of row
Events
Synchronously run callbacks on specific events. Subscribe to these after gantt is created.
gantt.api.tasks.on.select((task) => console.log('Listener: task selected', task));
gantt.api.tasks
move
(task
) Runs while task is moving.switchRow
(task
,row
,previousRow
) Runs when user switches row of task.select
(task
) Runs when user selects task.moveEnd
(task
) Runs when user stops moving task.change
(task
) Runs after dropping a task, before it is updated.changed
(task
) Runs after dropping a task, after it is updated.
Available modules
SvelteGanttTable
Renders a table on the left side of gantt. Needed for row labels.SvelteGanttDependencies
Renders dependencies between tasks.SvelteGanttExternal
Enables external DOM elements to be draggable to svelte-gantt. Useful for creating new tasks:
new SvelteGanttExternal(
// external DOM element
document.getElementById('newTaskButton'),
// options
{
// reference to instance of svelte-gantt
gantt,
// if enabled
enabled: true,
// success callback
// row: row element was dropped on
// date: date element was dropped on
// gantt: instance of svelte-gantt
onsuccess: (row, date, gantt) => {
// here you can add a task to row, see './public/main.js'
},
// called when dragged outside main gantt area
onfail: () => { },
// factory function, creates HTMLElement that will follow the mouse
elementContent: () => {
const element = document.createElement('div');
element.innerHTML = 'New Task';
Object.assign(element.style, {
position: 'absolute',
background: '#eee',
padding: '0.5em 1em',
fontSize: '12px',
pointerEvents: 'none',
});
return element;
}
}
);
Development build
If you want to build from sources: Install the dependencies...
cd svelte-gantt
npm install
...then start Rollup:
npm run dev:docs
Navigate to localhost:5000. You should see your app running. Edit a component file in src
, save it, and reload the page to see your changes.
Build the package
To build the package yourself:
- Clone or download repository.
- Run the build:
node tools/build
- The package is built in ./dist
Issues
- Transitions on task drop sometimes do not play - issue introduced in Svelte 3
TBD
- Context-menus (click on row, task or dependency)