Enhance y sort

.github/workflows/publish.yml

@@ -1,19 +1,23 @@
 name: Publish on NPM
 on:
-  push:
-    branches: [ master ]
+    push:
+        branches: [release]
 
 jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-      - run: yarn install
-      - run: yarn prettier-check
-      - run: yarn test
-      - uses: JS-DevTools/npm-publish@v1
-        with:
-          token: ${{ secrets.NPM_TOKEN }}
+    publish:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: pnpm/action-setup@v4
+              with:
+                  version: 9
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '18'
+                  cache: 'pnpm'
+            - run: pnpm install
+            - run: pnpm prettier-check
+            - run: pnpm build
+            - uses: JS-DevTools/npm-publish@v1
+              with:
+                  token: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -21,11 +21,14 @@ coverage
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
+dist/*
 
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
+.yarn
 
 .DS_Store
 
-gh-pages
+gh-pages
+feedback*.md

.prettierignore

@@ -0,0 +1 @@
+dist

.prettierrc.json

@@ -1,4 +1,4 @@
 {
-  "tabWidth": 4,
-  "singleQuote": true
-}
+    "tabWidth": 4,
+    "singleQuote": true
+}

README.md

@@ -1,100 +1,158 @@
-<div align="center">
-    <img src="https://github.com/frappe/design/blob/master/logos/logo-2019/frappe-gantt-logo.png" height="128">
-    <h2>Frappe Gantt</h2>
-    <p align="center">
-        <p>A simple, interactive, modern gantt chart library for the web</p>
-        <a href="https://frappe.github.io/gantt">
-            <b>View the demo »</b>
-        </a>
-    </p>
+<div align="center" markdown="1">
+    <img src=".github/gantt-logo.jpg" width="80">
+    <h1>Frappe Gantt</h1>
+
+**A modern, configurable, Gantt library for the web.**
 </div>
 
-<p align="center">
-    <a href="https://frappe.github.io/gantt">
-        <img src="https://cloud.githubusercontent.com/assets/9355208/21537921/4a38b194-cdbd-11e6-8110-e0da19678a6d.png">
-    </a>
-</p>
+![Hero Image](.github/hero-image.png)
 
-### Install
-```
+## Frappe Gantt
+Gantt charts are bar charts that visually illustrate a project's tasks, schedule, and dependencies. With Frappe Gantt, you can build beautiful, customizable, Gantt charts with ease.
+
+You can use it anywhere from hobby projects to tracking the goals of your team at the worksplace.
+
+[ERPNext](https://erpnext.com/) uses Frappe Gantt.
+
+
+### Motivation
+We needed a Gantt View for ERPNext. Surprisingly, we couldn't find a visually appealing Gantt library that was open source - so we decided to build it. Initially, the design was heavily inspired by Google Gantt and DHTMLX.
+
+
+### Key Features
+- **Customizable Views**: customize the timeline based on various time periods - day, hour, or year, you have it. You can also create your own views.
+- **Ignore Periods**: exclude weekends and other holidays from your tasks' progress calculation.
+- **Configure Anything**: spacing, edit access, labels, you can control it all. Change both the style and functionality to meet your needs.
+- **Multi-lingual Support**: suitable for companies with an international base.
+
+## Usage
+
+Install with:
+```bash
 npm install frappe-gantt
 ```
 
-### Usage
 Include it in your HTML:
-```
-<script src="frappe-gantt.min.js"></script>
+
+```html
+<script src="frappe-gantt.umd.js"></script>
 <link rel="stylesheet" href="frappe-gantt.css">
 ```
 
-And start hacking:
+Or from the CDN:
+```html
+<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css">
+```
+
+Start using Gantt:
 ```js
-var tasks = [
+let tasks = [
   {
-    id: 'Task 1',
+    id: '1',
     name: 'Redesign website',
     start: '2016-12-28',
     end: '2016-12-31',
-    progress: 20,
-    dependencies: 'Task 2, Task 3',
-    custom_class: 'bar-milestone' // optional
+    progress: 20
   },
   ...
 ]
-var gantt = new Gantt("#gantt", tasks);
+let gantt = new Gantt("#gantt", tasks);
 ```
 
-You can also pass various options to the Gantt constructor:
-```js
-var gantt = new Gantt("#gantt", tasks, {
-    header_height: 50,
-    column_width: 30,
-    step: 24,
-    view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
-    bar_height: 20,
-    bar_corner_radius: 3,
-    arrow_curve: 5,
-    padding: 18,
-    view_mode: 'Day',
-    date_format: 'YYYY-MM-DD',
-    custom_popup_html: null
-});
-```
+### 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.
+
+#### View Mode Configuration
+The `view_modes` option determines all the available view modes for the chart. It should be an array of objects.
+
+Each object can have the following properties:
+- `name` (string) - the name of view mode.
+- `padding` (interval) - the time above.
+- `step` - the interval of each column
+- `lower_text` (date format string _or_ function) - the format for text in lower header. Blank string for none. The function takes in `currentDate`, `previousDate`, and `lang`, and should return a string.
+- `upper_text` (date format string _or_ function) - the format for text in upper header. Blank string for none. The function takes in `currentDate`, `previousDate`, and `lang`, and should return a string.
+- `upper_text_frequency` (number) - how often the upper text has a value. Utilized in internal calculation to improve performance.
+- `thick_line` (function) - takes in `currentDate`, returns Boolean determining whether the line for that date should be thicker than the others.
 
-### Contributing
+Three other options allow you to override general configuration for this view mode alone:
+- `date_format`
+- `column_width`
+- `snap_at`
+For details, see the above table.
+
+#### Popup Configuration
+`popup` is a function. If it returns
+- `false`, there will be no popup.
+- `undefined`, the popup will be rendered based on manipulation within the function
+- a HTML string, the popup will be that string.
+
+The function receives one object as an argument, containing:
+- `task` - the task as an object
+- `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.
+
+### API
+Frappe Gantt exposes a few helpful methods for you to interact with the chart:
+
+| **Name**               | **Description**                                                                 | **Parameters**                            |
+|---------------------------|---------------------------------------------------------------------------------|------------------------------------------|
+| `.update_options` | Re-renders the chart after updating specific options. | `new_options` - object containing new options. |
+| `.change_view_mode` | Updates the view mode. | `view_mode` - Name of view mode _or_ view mode object (see above) and `maintain_pos` - whether to go back to current scroll position after rerendering, defaults to `false`. |
+| `.scroll_current` | Scrolls to the current date | No parameters. |
+| `.update_task` | Re-renders a specific task bar alone | `task_id` - id of task and `new_details` - object containing the task properties to be updated. |
+
+## Development Setup
 If you want to contribute enhancements or fixes:
 
 1. Clone this repo.
-2. `cd` into project directory
-3. `yarn`
-4. `yarn run dev`
-5. Open `index.html` in your browser, make your code changes and test them.
-
-### Publishing
-If you have publishing rights (Frappe Team), follow these steps to publish a new version.
-
-Assuming the last commit (or a couple of commits) were enhancements or fixes,
-
-1. Run `yarn build`
-
-   This will generate files in the `dist/` folder. These files need to be committed.
-1. Run `yarn publish`
-1. Type the new version at the prompt
-
-   Depending on the type of change, you can either bump the patch version or the minor version.
-   For e.g.,
-   ```
-   0.5.0 -> 0.6.0 (minor version bump)
-   0.5.0 -> 0.5.1 (patch version bump)
-   ```
-1. Now, there will be a commit named after the version you just entered. Include the generated files in `dist/` folder as part of this commit by running the command:
-   ```
-   git add dist
-   git commit --amend
-   git push origin master
-   ```
-
-License: MIT
-
-------------------
-Project maintained by [frappe](https://github.com/frappe)
+2. `cd` into project directory.
+3. Run `pnpm i` to install dependencies.
+4. `pnpm run build` to build files - or `pnpm run build-dev` to build and watch for changes.
+5. Open `index.html` in your browser.
+6. Make your code changes and test them.
+
+<br />
+<br />
+<div align="center" style="padding-top: 0.75rem;">
+	<a href="https://frappe.io" target="_blank">
+		<picture>
+			<source media="(prefers-color-scheme: dark)" srcset="https://frappe.io/files/Frappe-white.png">
+			<img src="https://frappe.io/files/Frappe-black.png" alt="Frappe Technologies" height="28"/>
+		</picture>
+	</a>
+</div>