engine icon indicating copy to clipboard operation
engine copied to clipboard

Add new gantt chart component

Open MalaRuze opened this issue 1 year ago • 0 comments

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/modifiers package.json.
  • UI Lib Update:
    • Added yesterday and today to dict.
  • Gantt Chart Components:
    • Introduced new DataView-based GanttChart set 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:
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

MalaRuze avatar Nov 19 '24 16:11 MalaRuze