Skip to content

Commit

Permalink
Merge pull request #24 from pegasystems/15-gantt-chart-component
Browse files Browse the repository at this point in the history
Adds GanttChart component.
  • Loading branch information
ricmars authored Feb 15, 2024
2 parents 0483444 + 044eb01 commit 7bda6c0
Show file tree
Hide file tree
Showing 13 changed files with 1,598 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -133,3 +133,4 @@ dist
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
.DS_Store
Binary file added .storybook/static/Gantt_Configuration.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .storybook/static/Gantt_Demo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added .storybook/static/Gantt_DetailsCard.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions cspell.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
"camelcase",
"daygrid",
"fullcalendar",
"Gantt",
"IBAN",
"imask",
"isday",
Expand Down
18 changes: 18 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,10 @@
"@pega/cosmos-react-core": "^4.1.2",
"@pega/cosmos-react-social": "^4.1.2",
"dagre": "^0.8.5",
"gantt-task-react": "^0.3.9",
"imask": "^7.3.0",
"jsbarcode": "^3.11.6",
"polished": "^4.3.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"reactflow": "^11.10.1",
Expand Down
52 changes: 52 additions & 0 deletions src/components/Pega_Extensions_GanttChart/Docs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { Meta, Primary, Controls, Story } from '@storybook/blocks';
import * as DemoStories from './demo.stories';

<Meta of={DemoStories} />

# Overview

A **Gantt Chart** is a type of bar chart that represents a project schedule. It displays the start and finish dates of various elements of a project, typically tasks and milestones, along a horizontal timeline. Each task is represented by a horizontal bar, with its length indicating the duration of the task, and its position on the timeline showing when it starts and ends.
Additionally, tasks/milestones can also have dependencies on other tasks or projects.

The component support the following features:

- Supports 3 item types, `PROJECT`, `TASK` and `MILESTONE`. Where tasks and milestones belong to a project and can have dependencies to other tasks/milestones.
- A toggle to hide basic details columns (Name, From and To) in table to allow full timeline taking 100% of container width. This can be controlled via a prop `showDetailsColumns`.
- 5 types of timeline viewmodes are supported: `Hourly, Daily, Weekly, Monthly and Yearly`. You can also configure the default mode by setting `defaultViewMode` property on the component.
- Components uses the design system's prescribed combination of colors for each item type (Project, Task and Milestone)
- **Today or Current day** is highlighted in blue to give a visual reference on the timeline.
- A tooltip on hover showing Start, End and Progress precision data.
- Click on any item to see a DetailsCard view. This view can be configured via a combination of props `detailsDataPage` and `detailsViewName`.
- Ability to edit an item from timeline, just click the item and open the details card popup. It has a Edit button in header (pencil icon).
- Double click on any item enables the drag mode editing. Items can be dragged with multiple drag behaviors, each for distinct purpose

- Drag complete item. This changes the Start and End date for the items without changing the relative duration. All three types of items implements this behavior
- Two Drag handles are available on item edges, each for modifying the Start or End date respectively. This changes the duration of the task. Only Tasks has this behavior. Project and Milestones doesn't support this.
- An arrow like handle appears on the item to drag and update the completion progress of the item. Only Task item type supports this.

The implementation of this component relies on the library [gantt-task-react](https://github.com/MaTeMaTuK/gantt-task-react). However there are some overrides in CSS to make it compatible with constellation design system.

<Primary />

## Props

<Controls />

## Limitations

The limitations of the components are:

- Tasklist (first three columns of table) are not configurable, they cannot be reordered, formatted or individually hidden.
- The timeline is not keyboard accessible.

## Example

![Demo](Gantt_Demo.png)
In this example a project is shown with multiple tasks, milestones and dependencies. This also demonstrate the Details Card for milestone on click. You need to create a new details view that will be used to render the card. The view can use conditions on pyStatusWork to hide / show certain fields.
We also leverage the 'Case reference' Constellation DX component to show the case ID using a previewable link.

Here is the details card configuration.
![DetailsCardView](Gantt_DetailsCard.png)

Given below is a demo configuration for this widget in AppStudio.
![WidgetConfig](Gantt_Configuration.png)
149 changes: 149 additions & 0 deletions src/components/Pega_Extensions_GanttChart/config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
{
"name": "Pega_Extensions_GanttChart",
"label": "Gantt Chart",
"description": "Gantt Chart",
"organization": "Pega",
"version": "1.0.0",
"library": "Extensions",
"allowedApplications": [],
"componentKey": "Pega_Extensions_GanttChart",
"type": "Widget",
"subtype": ["PAGE", "CASE"],
"icon": "OneColumnPage.svg",
"properties": [
{
"name": "heading",
"label": "Heading",
"format": "TEXT"
},
{
"name": "createClassname",
"label": "Create case className",
"format": "TEXT"
},
{
"label": "Data page configuration",
"format": "GROUP",
"properties": [
{
"name": "dataPage",
"label": "Data Page name",
"format": "TEXT",
"required": true
},
{
"name": "categoryFieldName",
"label": "Category field name",
"format": "TEXT",
"helperText": "Possible categories: 'PROJECT', 'TASK', 'MILESTONE'. 'PROJECT' can be parent of 'TASK' and/or 'MILESTONE'"
},
{
"name": "parentFieldName",
"label": "Parent field name",
"format": "TEXT",
"helperText": "Field type: Text (ID)"
},
{
"name": "dependenciesFieldName",
"label": "Dependencies field name",
"format": "TEXT",
"helperText": "Field type: Text (Comma-separated IDs)"
},
{
"name": "startDateFieldName",
"label": "Start date field name",
"format": "TEXT",
"helperText": "Field type: DateTime",
"required": true
},
{
"name": "endDateFieldName",
"label": "End date field name",
"format": "TEXT",
"helperText": "Field type: DateTime"
},
{
"name": "progressFieldName",
"label": "Progress field name",
"format": "TEXT",
"helperText": "Field type: Percentage",
"required": true
}
]
},
{
"label": "Timeline table configuration",
"format": "GROUP",
"properties": [
{
"name": "showDetailsColumns",
"label": "Show item details columns",
"format": "BOOLEAN",
"defaultValue": true
},
{
"name": "defaultViewMode",
"label": "Default view",
"format": "SELECT",
"defaultValue": "Daily",
"source": [
{
"key": "Hourly",
"value": "Hourly"
},
{
"key": "Daily",
"value": "Daily"
},
{
"key": "Weekly",
"value": "Weekly"
},
{
"key": "Monthly",
"value": "Monthly"
},
{
"key": "Yearly",
"value": "Yearly"
}
]
}
]
},
{
"label": "Details view configuration",
"format": "GROUP",
"properties": [
{
"name": "detailsDataPage",
"label": "Data Page used to retrieve case details (pyID as param)",
"format": "TEXT",
"required": true,
"helperText": "Data page used to fetch DetailsView for each item"
},
{
"name": "detailsViewName",
"label": "Name of the view used to retrieve case details",
"format": "TEXT",
"required": true
}
]
}
],
"defaultConfig": {
"heading": "Gantt Chart",
"createClassname": "",
"dataPage": "",
"categoryFieldName": "",
"parentFieldName": "",
"dependenciesFieldName": "",
"startDateFieldName": "",
"endDateFieldName": "",
"progressFieldName": "",
"showDetailsColumns": "true",
"defaultViewMode": "Daily",
"detailsDataPage": "",
"detailsViewName": ""
}
}
Loading

0 comments on commit 7bda6c0

Please sign in to comment.