engine
engine copied to clipboard
Add new gantt chart component
Gantt Chart:
This pull request introduces a new Gantt chart component to the playground admin.
- Playground Update:
- Created new Gantt page and added it to navigation. Added mock entities and load them with data. Added new
@dnd-kit/modifierspackage.json.
- Created new Gantt page and added it to navigation. Added mock entities and load them with data. Added new
- UI Lib Update:
- Added yesterday and today to dict.
- Gantt Chart Components:
- Introduced new DataView-based
GanttChartset of components including toolbar, custom filters and the gantt table itself. Main features:- Drag n Drop activity manipulation
- On click editing and activity creation
- New dataview filter for single date
- Current time indicator
- View and edit mode toolbar switch
- GanttChartTable props description:
- Introduced new DataView-based
| Prop | Type | Description |
|---|---|---|
discriminationEntity |
string |
Name of entity discriminating the activities |
discriminationField |
string |
Name of field where discriminating entity is connected |
discriminationLabel |
ReactNode |
Label for discriminators shown in left sidebar |
activityLabel |
ReactNode |
Label for activity. |
startTimeField |
string |
Name of field where startTime value is stored |
endTimeField |
string |
Name of field where endTime value is stored |
startTime? |
HoursMinString |
(Optional) Specifies the start time of the chart in "HH:MM" format |
endTime? |
HoursMinString |
(Optional) Specifies the end time of the chart in "HH:MM" format |
blockSize? |
{width: number, height: number} |
(Optional) Determines the size of each time slot in px |
slotsLength? |
15 | 20 | 30 | 60 |
(Optional) Defines time length of one slot |
showCurrentTime? |
boolean |
(Optional) If set to true, displays an indicator representing the current time |
createActivityForm? |
ReactNode |
(Optional) Custom form for creating new activities |
editActivityForm? |
ReactNode |
(Optional) Custom form for editing existing activities |