Skip to content

Add clasical left sidebar, task group, custom config bar function and set bar text color automatically features #491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 36 commits into
base: master
Choose a base branch
from
Open

Add clasical left sidebar, task group, custom config bar function and set bar text color automatically features #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
0f5d8d7
support custom index for placing tasks in the same row
okmkey45 Jan 13, 2025
43677ca
improve comments and names
okmkey45 Jan 13, 2025
188ffac
enable side task list
okmkey45 Jan 17, 2025
770e1a1
Merge branch 'frappe:master' into master
okmkey45 Jan 17, 2025
33e1024
add end of file to css
okmkey45 Jan 17, 2025
be8bcb9
control label display of bars
okmkey45 Jan 18, 2025
f1c4408
prettier
okmkey45 Jan 18, 2025
6235322
control scroll for side task list
okmkey45 Jan 18, 2025
25bf8a8
add task group concept
okmkey45 Jan 18, 2025
42ebcf2
control title on task groups
okmkey45 Jan 18, 2025
99dac5b
align side list with task groups
okmkey45 Jan 18, 2025
1532aa3
rename to left sidebar list
okmkey45 Jan 18, 2025
6a23101
rename variable
okmkey45 Jan 18, 2025
c2a5cb7
rename sidebar list config
okmkey45 Jan 18, 2025
910cf93
add readme docs about sidebar list and task groups
okmkey45 Jan 18, 2025
09e248a
set package version
okmkey45 Jan 18, 2025
ddbbbd4
improve scroll_to with sidebar. Add custom config to bars
okmkey45 Jan 18, 2025
cc42519
pass task_group to custom_config_bar
okmkey45 Jan 19, 2025
55902e1
set bar label text properly to generate contrast automatically
okmkey45 Jan 19, 2025
98a2e13
create annotations API for tasks
okmkey45 Jan 21, 2025
a135d6d
pass type to popup options
okmkey45 Jan 22, 2025
2c6c17f
initial approach
okmkey45 Jan 25, 2025
41b065d
fix popups for holidays
okmkey45 Jan 25, 2025
7878956
fix prettier issues
okmkey45 Jan 25, 2025
5a5b49b
fix bug on recent fix for popups. Only apply for holidays
okmkey45 Jan 25, 2025
0664b37
fix prettier issues
okmkey45 Jan 25, 2025
667b0c6
config display label bars
okmkey45 Jan 27, 2025
ed02a4a
automatic: preparing to publish
okmkey45 Jan 27, 2025
2163242
clickable sidebar list items
okmkey45 Jan 27, 2025
d763724
set base z index
okmkey45 Jan 29, 2025
5ffa89c
add on click for bars
okmkey45 Jan 30, 2025
2227b84
improve bar config object
okmkey45 Jan 30, 2025
eb89e92
change task groups api and set refresh feature. Update readme
okmkey45 Feb 2, 2025
7dedf51
fix bar click action and bar width
okmkey45 Feb 2, 2025
4d5b9d7
prevent reset scroll on refresh
okmkey45 Feb 6, 2025
f785d0c
change center style
okmkey45 Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 63 additions & 31 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,47 +53,64 @@ let tasks = [
name: 'Redesign website',
start: '2016-12-28',
end: '2016-12-31',
progress: 20
progress: 20,
task_group_id: 'task-group-1',
annotations: {
'red': [
{
date: '2016-12-30',
name: 'Mom\'s birthday'
},
]
}
},
...
];
const task_groups = [
{
id: 'task-group-1',
name: 'Task Group 1',
},
...
]
let gantt = new Gantt("#gantt", tasks);
let gantt = new Gantt("#gantt", tasks, {}, task_groups);
```

### Configuration
Frappe Gantt offers a wide range of options to customize your chart.


| **Option** | **Description** | **Possible Values** | **Default** |
|---------------------------|---------------------------------------------------------------------------------|----------------------------------------------------|------------------------------------|
| `arrow_curve` | Curve radius of arrows connecting dependencies. | Any positive integer. | `5` |
| `auto_move_label` | Move task labels when user scrolls horizontally. | `true`, `false` | `false` |
| `bar_corner_radius` | Radius of the task bar corners (in pixels). | Any positive integer. | `3` |
| `bar_height` | Height of task bars (in pixels). | Any positive integer. | `30` |
| `container_height` | Height of the container. | `auto` - dynamic container height to fit all tasks - _or_ any positive integer (for pixels). | `auto` |
| `column_width` | Width of each column in the timeline. | Any positive integer. | 45 |
| `date_format` | Format for displaying dates. | Any valid JS date format string. | `YYYY-MM-DD` |
| `upper_header_height` | Height of the upper header in the timeline (in pixels). | Any positive integer. | `45` |
| `lower_header_height` | Height of the lower header in the timeline (in pixels). | Any positive integer. | `30` |
| `snap_at` | Snap tasks at particular intervel while resizing or dragging. | Any _interval_ (see below) | `1d` |
| `infinite_padding` | Whether to extend timeline infinitely when user scrolls. | `true`, `false` | `true` |
| `holidays` | Highlighted holidays on the timeline. | Object mapping CSS colors to holiday types. Types can either be a) 'weekend', or b) array of _strings_ or _date objects_ or _objects_ in the format `{date: ..., label: ...}` | `{ 'var(--g-weekend-highlight-color)': 'weekend' }` |
| `ignore` | Ignored areas in the rendering | `weekend` _or_ Array of strings or date objects (`weekend` can be present to the array also). | `[]` |
| `language` | Language for localization. | ISO 639-1 codes like `en`, `fr`, `es`. | `en` |
| `lines` | Determines which grid lines to display. | `none` for no lines, `vertical` for only vertical lines, `horizontal` for only horizontal lines, `both` for complete grid. | `both` |
| `move_dependencies` | Whether moving a task automatically moves its dependencies. | `true`, `false` | `true` |
| `padding` | Padding around task bars (in pixels). | Any positive integer. | `18` |
| `popup_on` | Event to trigger the popup display. | `click` _or_ `hover` | `click` |
| `readonly_progress` | Disables editing task progress. | `true`, `false` | `false` |
| `readonly_dates` | Disables editing task dates. | `true`, `false` | `false` |
| `readonly` | Disables all editing features. | `true`, `false` | `false` |
| `scroll_to` | Determines the starting point when chart is rendered. | `today`, `start`, `end`, or a date string. | `today` |
| `show_expected_progress` | Shows expected progress for tasks. | `true`, `false` | `false` |
| `today_button` | Adds a button to navigate to today’s date. | `true`, `false` | `true` |
| `view_mode` | The initial view mode of the Gantt chart. | `Day`, `Week`, `Month`, `Year`. | `Day` |
| `view_mode_select` | Allows selecting the view mode from a dropdown. | `true`, `false` | `false` |

Apart from these ones, two options - `popup` and `view_modes` (plural, not singular) - are available. They have "sub"-APIs, and thus are listed separately.
|----------------------------|---------------------------------------------------------------------------------|----------------------------------------------------|------------------------------------|
| `arrow_curve` | Curve radius of arrows connecting dependencies. | Any positive integer. | `5` |
| `auto_move_label` | Move task labels when user scrolls horizontally. | `true`, `false` | `false` |
| `bar_corner_radius` | Radius of the task bar corners (in pixels). | Any positive integer. | `3` |
| `bar_height` | Height of task bars (in pixels). | Any positive integer. | `30` |
| `container_height` | Height of the container. | `auto` - dynamic container height to fit all tasks - _or_ any positive integer (for pixels). | `auto` |
| `column_width` | Width of each column in the timeline. | Any positive integer. | 45 |
| `date_format` | Format for displaying dates. | Any valid JS date format string. | `YYYY-MM-DD` |
| `enable_left_sidebar_list` | Enable clasical left sidebar with tasks. | `true`, `false` | `false` |
| `holidays` | Highlighted holidays on the timeline. | Object mapping CSS colors to holiday types. Types can either be a) 'weekend', or b) array of _strings_ or _date objects_ or _objects_ in the format `{date: ..., label: ...}` | `{ 'var(--g-weekend-highlight-color)': 'weekend' }` |
| `ignore` | Ignored areas in the rendering | `weekend` _or_ Array of strings or date objects (`weekend` can be present to the array also). | `[]` |
| `infinite_padding` | Whether to extend timeline infinitely when user scrolls. | `true`, `false` | `true` |
| `language` | Language for localization. | ISO 639-1 codes like `en`, `fr`, `es`. | `en` |
| `lines` | Determines which grid lines to display. | `none` for no lines, `vertical` for only vertical lines, `horizontal` for only horizontal lines, `both` for complete grid. | `both` |
| `lower_header_height` | Height of the lower header in the timeline (in pixels). | Any positive integer. | `30` |
| `move_dependencies` | Whether moving a task automatically moves its dependencies. | `true`, `false` | `true` |
| `padding` | Padding around task bars (in pixels). | Any positive integer. | `18` |
| `popup_on` | Event to trigger the popup display. | `click` _or_ `hover` | `click` |
| `readonly` | Disables all editing features. | `true`, `false` | `false` |
| `readonly_dates` | Disables editing task dates. | `true`, `false` | `false` |
| `readonly_progress` | Disables editing task progress. | `true`, `false` | `false` |
| `scroll_to` | Determines the starting point when chart is rendered. | `today`, `start`, `end`, or a date string. | `today` |
| `show_expected_progress` | Shows expected progress for tasks. | `true`, `false` | `false` |
| `snap_at` | Snap tasks at particular intervel while resizing or dragging. | Any _interval_ (see below) | `1d` |
| `today_button` | Adds a button to navigate to today’s date. | `true`, `false` | `true` |
| `upper_header_height` | Height of the upper header in the timeline (in pixels). | Any positive integer. | `45` |
| `view_mode` | The initial view mode of the Gantt chart. | `Day`, `Week`, `Month`, `Year`. | `Day` |
| `view_mode_select` | Allows selecting the view mode from a dropdown. | `true`, `false` | `false` |

Apart from these ones, four options - `bar_config`, `left_sidebar_list_config`, `popup` and `view_modes` (plural, not singular) - are available. They have "sub"-APIs, and thus are listed separately.

#### View Mode Configuration
The `view_modes` option determines all the available view modes for the chart. It should be an array of objects.
Expand All @@ -120,12 +137,27 @@ For details, see the above table.
- a HTML string, the popup will be that string.

The function receives one object as an argument, containing:
- `type` - a string defining the type of component related: `annotation` or `task`
- `task` - the task as an object
- `task_group` - the related task group as an object. **NOTE:** it is `undefined` if task groups feature is disabled
- `chart` - the entire Gantt chart
- `get_title`, `get_subtitle`, `get_details` (functions) - get the relevant section as a HTML node.
- `set_title`, `set_subtitle`, `set_details` (functions) - take in the HTML of the relevant section
- `add_action` (function) - accepts two parameters, `html` and `func` - respectively determining the HTML of the action and the callback when the action is pressed.

#### Bar config
`bar_config` is an object to configure bars. Options from this object:

The returned object may contain:
- `get_label` (function) - the label displayed inside the bar. If it's not defined, name of task will be used. This function receives an object as an argument containing `task` and `task_group` if defined.
- `on_click` (function) - the function that will be triggered when a bar is clicked. This function receives an object as an argument containing `task` and `task_group` if defined.
- `show_label_on_offset` (boolean) - When the bar label has more width that the bar, label is relocated with an offset to the right to improve UI. This boolean defines if the label should be displayed in that scenario.

#### Left Sidebar List Configuration
`left_sidebar_list_config` is an object.
- `on_click` (function) - the function that will be triggered when an item from the list is clicked. This function receives an object as an argument containing `task` and `task_group` if defined.
- `width`, the width of the sidebar (in pixels)

### API
Frappe Gantt exposes a few helpful methods for you to interact with the chart:

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "frappe-gantt",
"version": "1.0.2",
"version": "1.1.0",
"description": "A simple, modern, interactive gantt library for the web",
"main": "src/index.js",
"type": "module",
Expand Down
Loading