diff --git a/astro.config.mjs b/astro.config.mjs index 51bd4da..1b9c04c 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -139,6 +139,27 @@ export default defineConfig({ label: "Scheduling action items", link: "/task-tracking/scheduling-action-items/", }, + { + label: "Gantt chart", + collapsed: true, + items: [ + { label: "Overview", link: "/tracker/gantt/" }, + { label: "Bar coloring and overlays", link: "/tracker/gantt/bar-coloring/" }, + { label: "Dependencies", link: "/tracker/gantt/dependencies/" }, + { label: "Cascade scheduling", link: "/tracker/gantt/cascade/" }, + { label: "Critical path", link: "/tracker/gantt/critical-path/" }, + { label: "Working days", link: "/tracker/gantt/working-days/" }, + { label: "Filtering and grouping", link: "/tracker/gantt/filter-group/" }, + { label: "Advanced search", link: "/tracker/gantt/advanced-search/" }, + { label: "No search results", link: "/tracker/gantt/empty-state/" }, + { label: "Saved views", link: "/tracker/gantt/saved-views/" }, + { label: "Bulk operations", link: "/tracker/gantt/bulk-operations/" }, + { label: "Auto vs manual scheduling", link: "/tracker/gantt/auto-manual/" }, + { label: "Keyboard shortcuts", link: "/tracker/gantt/shortcuts/" }, + { label: "Exporting", link: "/tracker/gantt/export/" }, + { label: "Mobile and tablet", link: "/tracker/gantt/mobile/" }, + ], + }, ], }, { diff --git a/src/assets/gantt/auto-manual-toggle-light.png b/src/assets/gantt/auto-manual-toggle-light.png new file mode 100644 index 0000000..0e59b2b Binary files /dev/null and b/src/assets/gantt/auto-manual-toggle-light.png differ diff --git a/src/assets/gantt/bulk-selected-bars-light.png b/src/assets/gantt/bulk-selected-bars-light.png new file mode 100644 index 0000000..5b82d97 Binary files /dev/null and b/src/assets/gantt/bulk-selected-bars-light.png differ diff --git a/src/assets/gantt/cascade-before-light.png b/src/assets/gantt/cascade-before-light.png new file mode 100644 index 0000000..820f9f1 Binary files /dev/null and b/src/assets/gantt/cascade-before-light.png differ diff --git a/src/assets/gantt/color-by-assignee-light.png b/src/assets/gantt/color-by-assignee-light.png new file mode 100644 index 0000000..1583f4e Binary files /dev/null and b/src/assets/gantt/color-by-assignee-light.png differ diff --git a/src/assets/gantt/color-by-component-light.png b/src/assets/gantt/color-by-component-light.png new file mode 100644 index 0000000..5b58e99 Binary files /dev/null and b/src/assets/gantt/color-by-component-light.png differ diff --git a/src/assets/gantt/color-by-milestone-light.png b/src/assets/gantt/color-by-milestone-light.png new file mode 100644 index 0000000..0de7155 Binary files /dev/null and b/src/assets/gantt/color-by-milestone-light.png differ diff --git a/src/assets/gantt/color-by-priority-light.png b/src/assets/gantt/color-by-priority-light.png new file mode 100644 index 0000000..9c59250 Binary files /dev/null and b/src/assets/gantt/color-by-priority-light.png differ diff --git a/src/assets/gantt/color-by-status-light.png b/src/assets/gantt/color-by-status-light.png new file mode 100644 index 0000000..778bec4 Binary files /dev/null and b/src/assets/gantt/color-by-status-light.png differ diff --git a/src/assets/gantt/colors-popup-light.png b/src/assets/gantt/colors-popup-light.png new file mode 100644 index 0000000..ec868fe Binary files /dev/null and b/src/assets/gantt/colors-popup-light.png differ diff --git a/src/assets/gantt/customize-view-plan2-toggles-light.png b/src/assets/gantt/customize-view-plan2-toggles-light.png new file mode 100644 index 0000000..311456c Binary files /dev/null and b/src/assets/gantt/customize-view-plan2-toggles-light.png differ diff --git a/src/assets/gantt/dependencies-editor-light.png b/src/assets/gantt/dependencies-editor-light.png new file mode 100644 index 0000000..fbc4fb7 Binary files /dev/null and b/src/assets/gantt/dependencies-editor-light.png differ diff --git a/src/assets/gantt/dependencies-fs-arrow-light.png b/src/assets/gantt/dependencies-fs-arrow-light.png new file mode 100644 index 0000000..3248468 Binary files /dev/null and b/src/assets/gantt/dependencies-fs-arrow-light.png differ diff --git a/src/assets/gantt/edit-component-swatch-light.png b/src/assets/gantt/edit-component-swatch-light.png new file mode 100644 index 0000000..7ad8d50 Binary files /dev/null and b/src/assets/gantt/edit-component-swatch-light.png differ diff --git a/src/assets/gantt/export-fullscreen-light.png b/src/assets/gantt/export-fullscreen-light.png new file mode 100644 index 0000000..d0ff52b Binary files /dev/null and b/src/assets/gantt/export-fullscreen-light.png differ diff --git a/src/assets/gantt/export-hamburger-menu-light.png b/src/assets/gantt/export-hamburger-menu-light.png new file mode 100644 index 0000000..f4e4e21 Binary files /dev/null and b/src/assets/gantt/export-hamburger-menu-light.png differ diff --git a/src/assets/gantt/filter-bar-active-light.png b/src/assets/gantt/filter-bar-active-light.png new file mode 100644 index 0000000..6c8d94b Binary files /dev/null and b/src/assets/gantt/filter-bar-active-light.png differ diff --git a/src/assets/gantt/filter-chip-overflow-badge-light.png b/src/assets/gantt/filter-chip-overflow-badge-light.png new file mode 100644 index 0000000..022388f Binary files /dev/null and b/src/assets/gantt/filter-chip-overflow-badge-light.png differ diff --git a/src/assets/gantt/filter-hidden-filters-popover-light.png b/src/assets/gantt/filter-hidden-filters-popover-light.png new file mode 100644 index 0000000..0154f7f Binary files /dev/null and b/src/assets/gantt/filter-hidden-filters-popover-light.png differ diff --git a/src/assets/gantt/group-by-component-light.png b/src/assets/gantt/group-by-component-light.png new file mode 100644 index 0000000..9274c6f Binary files /dev/null and b/src/assets/gantt/group-by-component-light.png differ diff --git a/src/assets/gantt/group-by-priority-light.png b/src/assets/gantt/group-by-priority-light.png new file mode 100644 index 0000000..8ad3ddd Binary files /dev/null and b/src/assets/gantt/group-by-priority-light.png differ diff --git a/src/assets/gantt/mobile-drawer-closed-light.png b/src/assets/gantt/mobile-drawer-closed-light.png new file mode 100644 index 0000000..ca2c972 Binary files /dev/null and b/src/assets/gantt/mobile-drawer-closed-light.png differ diff --git a/src/assets/gantt/mobile-drawer-open-light.png b/src/assets/gantt/mobile-drawer-open-light.png new file mode 100644 index 0000000..6633c46 Binary files /dev/null and b/src/assets/gantt/mobile-drawer-open-light.png differ diff --git a/src/assets/gantt/mobile-pinch-zoom-light.png b/src/assets/gantt/mobile-pinch-zoom-light.png new file mode 100644 index 0000000..d7d4327 Binary files /dev/null and b/src/assets/gantt/mobile-pinch-zoom-light.png differ diff --git a/src/assets/gantt/mobile-tablet-view-light.png b/src/assets/gantt/mobile-tablet-view-light.png new file mode 100644 index 0000000..2829f16 Binary files /dev/null and b/src/assets/gantt/mobile-tablet-view-light.png differ diff --git a/src/assets/gantt/overlays-past-due-blocked-light.png b/src/assets/gantt/overlays-past-due-blocked-light.png new file mode 100644 index 0000000..5c2e7fd Binary files /dev/null and b/src/assets/gantt/overlays-past-due-blocked-light.png differ diff --git a/src/assets/gantt/overview-default-light.png b/src/assets/gantt/overview-default-light.png new file mode 100644 index 0000000..7680022 Binary files /dev/null and b/src/assets/gantt/overview-default-light.png differ diff --git a/src/assets/gantt/overview-view-switcher-light.png b/src/assets/gantt/overview-view-switcher-light.png new file mode 100644 index 0000000..f25bb25 Binary files /dev/null and b/src/assets/gantt/overview-view-switcher-light.png differ diff --git a/src/assets/gantt/overview-with-data-light.png b/src/assets/gantt/overview-with-data-light.png new file mode 100644 index 0000000..5c36d3b Binary files /dev/null and b/src/assets/gantt/overview-with-data-light.png differ diff --git a/src/assets/gantt/saved-views-hamburger-light.png b/src/assets/gantt/saved-views-hamburger-light.png new file mode 100644 index 0000000..6874e03 Binary files /dev/null and b/src/assets/gantt/saved-views-hamburger-light.png differ diff --git a/src/assets/gantt/saved-views-load-menu-light.png b/src/assets/gantt/saved-views-load-menu-light.png new file mode 100644 index 0000000..f37de2b Binary files /dev/null and b/src/assets/gantt/saved-views-load-menu-light.png differ diff --git a/src/assets/gantt/saved-views-save-dialog-light.png b/src/assets/gantt/saved-views-save-dialog-light.png new file mode 100644 index 0000000..015efe9 Binary files /dev/null and b/src/assets/gantt/saved-views-save-dialog-light.png differ diff --git a/src/assets/gantt/shortcuts-help-popup-light.png b/src/assets/gantt/shortcuts-help-popup-light.png new file mode 100644 index 0000000..7042c64 Binary files /dev/null and b/src/assets/gantt/shortcuts-help-popup-light.png differ diff --git a/src/content/docs/task-tracking/creating-issues.mdx b/src/content/docs/task-tracking/creating-issues.mdx index a2250c2..c29a43c 100644 --- a/src/content/docs/task-tracking/creating-issues.mdx +++ b/src/content/docs/task-tracking/creating-issues.mdx @@ -45,6 +45,12 @@ When creating or editing an issue, you can configure the following settings: **Due date**: Select a due date for this issue. This is also optional. +**Start date**: Select a planned start date. Combined with the due date, this defines the issue's timeline on the [Gantt chart](/tracker/gantt/). Optional. + +**Deadline**: A hard deadline that is tracked separately from the planned due date. The Gantt chart paints a marker at the deadline so you can see at a glance whether the planned schedule still respects it. Optional. + +**Scheduling mode**: Choose between automatic (the default — the issue follows cascade re-scheduling from its predecessors) and manual (the issue is pinned to its current dates and cascade leaves it untouched). See [auto vs manual scheduling](/tracker/gantt/auto-manual/) for details. + **Set parent issue**: Make this issue the sub-issue of an existing issue. If the issue already has a parent, simply click the unset icon next to the parent issue to detach it. **Attach**: Attach a file, image or other media to this issue. diff --git a/src/content/docs/task-tracking/creating-projects.mdx b/src/content/docs/task-tracking/creating-projects.mdx index 3460df8..5ca0799 100644 --- a/src/content/docs/task-tracking/creating-projects.mdx +++ b/src/content/docs/task-tracking/creating-projects.mdx @@ -50,3 +50,5 @@ When creating or editing a project, you can configure the following settings: **Members**: Select all members for this Project. **Auto join**: Toggle whether you'd like new members to be automatically added to this project. + +**Working days configuration**: Optionally define a weekday mask (which days count as working days) and a list of holidays. Projects without a working-days configuration fall back to a seven-day-a-week calendar. When the configuration is set, the [Gantt chart](/tracker/gantt/) cascade scheduler skips non-working days, the critical-path computation uses working-day arithmetic, and weekends/holidays are painted as a tint on the chart. See [working days](/tracker/gantt/working-days/) for details. diff --git a/src/content/docs/task-tracking/related-issues.mdx b/src/content/docs/task-tracking/related-issues.mdx index 82a0795..7fb0ae3 100644 --- a/src/content/docs/task-tracking/related-issues.mdx +++ b/src/content/docs/task-tracking/related-issues.mdx @@ -44,6 +44,18 @@ Open the dropdown menu on any issue detail page and select `Relations`, then cho > **Note:** The current implementation does not actually prevent a blocked issue from being marked as complete before the blocking issue, but future versions of Huly will include a more complete development of this feature. In the meantime, you can use this feature as a visual indicator of dependencies between issues. Just like any other issue property, blocking can also be used when sorting issues in your tracker (see below). +## Typed scheduling dependencies + +In addition to the simple "blocked by" marker above, issues can have typed scheduling dependencies that drive the [Gantt chart](/tracker/gantt/) cascade scheduler. Each dependency carries a kind and an optional lag (in working days): + +- **FS (Finish-to-Start)** — successor starts after the predecessor finishes. Default. *"Build can start after design is done."* +- **SS (Start-to-Start)** — successor starts when the predecessor starts. *"QA can start as soon as development starts."* +- **FF (Finish-to-Finish)** — successor finishes when the predecessor finishes. *"Documentation should be done by the time the feature ships."* +- **SF (Start-to-Finish)** — successor finishes when the predecessor starts. *Rare, used for handover constraints.* +- **Lag** — number of working days between the linked anchors. Positive lag adds a gap, negative lag overlaps. *"FS +2d" means a two-working-day pause between predecessor end and successor start.* + +Add a typed dependency from the issue side panel: open the **Dependencies** section, pick a predecessor, then click the dependency kind chip to open the visual editor (a 2×2 grid that shows the four kinds graphically) and adjust lag. See [dependencies](/tracker/gantt/dependencies/) for the full picker. + ## Viewing related and blocked issues In your tracker, you can filter issues by their related or blocking status by opening the `Filter` menu and selecting either "Related to" or "Blocked by". This will display only the issues that are related to or blocked by the selected issue. For example, below I've filtered all issues in the tracker by those related to an issue for checking color contrast: diff --git a/src/content/docs/team-resources/team-planner.mdx b/src/content/docs/team-resources/team-planner.mdx index 88e47c3..cfea326 100644 --- a/src/content/docs/team-resources/team-planner.mdx +++ b/src/content/docs/team-resources/team-planner.mdx @@ -40,6 +40,6 @@ Just like action items, if the visibility is set to "Only visible to you", the e ## Visualizing workload and capacity -Huly does not currently offer a Gantt Chart feature or other visualization of workload and capacity. The team planner does provide a way to see how many hours each team member has scheduled for the day, which can be used in combination with time tracking and due dates to understand project allocations and capacity planning. +For project-level scheduling and timeline visualization, see the [Gantt chart](/tracker/gantt/) view in the tracker. The team planner complements that by showing how many hours each team member has scheduled for the day, which can be used in combination with time tracking and due dates to understand project allocations and capacity planning. If you're interested in finding out more about how you can work with Huly's current implementation to manage your specific workflows, you can chat with other users in our [Slack Community](https://huly.link/slack) to ask questions and exchange ideas. \ No newline at end of file diff --git a/src/content/docs/tracker/gantt/advanced-search.mdx b/src/content/docs/tracker/gantt/advanced-search.mdx new file mode 100644 index 0000000..34a27c2 --- /dev/null +++ b/src/content/docs/tracker/gantt/advanced-search.mdx @@ -0,0 +1,58 @@ +--- +title: Advanced Search +description: Prefix operators, search scopes, and match highlighting for the Tracker search bar. +--- + +import { Image } from 'astro:assets'; +import customizeViewPlan2Toggles from '../../../../assets/gantt/customize-view-plan2-toggles-light.png'; + +## Overview + +The Tracker search bar in every Issue viewlet (List, Kanban, Gantt) supports more than plain substring search. You can target specific fields via short prefix operators, decide whether bare terms search the title only or also the description and comments, and toggle visual highlighting of matched substrings. + +## Prefix operators + +Type `field:value` to restrict the search to a specific field. The Tracker recognises three friendly shorthands: + +| Prefix | Routes to | Example | +|---|---|---| +| `title:foo` | issue title (`searchTitle`) | `title:loader` | +| `id:foo` | issue identifier (`identifier`) | `id:HULY-` | +| `comments:foo` | issue comments (`comments.message`) | `comments:fixed` | + +Power users can also type the underlying Elasticsearch field names directly — `searchTitle:`, `identifier:`, `description.plain:`, `comments.message:`, `fulltextSummary:` and `searchShortTitle:` all pass through verbatim. + +Anything else with a colon (URLs, times of day, `POC: design review`, `C++ developer`) is treated as plain text. The search bar is smart enough not to confuse a stray `:` for a field-targeted query, so the search engine never sees a malformed clause. + +## Search scope + +The **Customize View** popover (cog icon, next to the viewlet selector) carries a **Search in…** dropdown that decides how bare-text searches (no prefix) are interpreted: + +- **Only Title** — bare terms are constrained to issue titles. Fastest, lowest noise. +- **Title + Description** — also matches the issue body. +- **Title + Description + Comments** (default) — also matches comment messages and the fulltext summary. + +Switching the scope re-runs the current search immediately — you don't need to retype. + +Customize View popover showing the toggles for Quick filter, Search in, and Highlight search matches + +The same popover also exposes two more search-related toggles: + +- **Quick filter: All / Active / Backlog** — show or hide the All/Active/Backlog mode selector on the toolbar. Hide it if your team only uses chip filters. +- **Highlight search matches** — visually highlight the matched substring inside issue identifiers (in the sidebar) and issue titles. Turn off if you find the highlight distracting. + +## Clearing the search + +The search input has a **×** button on the right end (visible when there is text). Clicking it clears the input and re-runs the now-empty query, restoring the full result set. The **Escape** key inside the focused input does the same. + +## Empty results + +When a search returns zero issues, the Tracker shows a dedicated empty-state card explaining the situation and offering two actions ("Suche ohne Filter" / "In allen Projekten suchen"). See [No search results](./empty-state) for details. + +## Tips + +- Prefix-targeted searches always win over the scope dropdown. If you type `title:foo`, the **Search in…** setting is ignored — your prefix is explicit. +- Combining multiple prefix-targeted clauses works: `title:loader id:HULY-` matches issues that have "loader" in the title **and** an identifier starting with HULY-. +- The Lucene-style boolean operators (`AND`, `OR`, `NOT`) are accepted in prefix-targeted clauses. +- Special characters work transparently — `title:C++`, `comments:foo/bar`, `title:POC:123`, `title:list[0]` and similar inputs are auto-escaped so the Elasticsearch query_string parser reads them as literal text. Wildcards (`*`, `?`) and hyphens stay un-escaped because they are intentional syntax. +- Quoted phrases (`title:"release notes"`) are passed through as phrase literals, even when they contain whitespace or otherwise reserved characters. diff --git a/src/content/docs/tracker/gantt/auto-manual.mdx b/src/content/docs/tracker/gantt/auto-manual.mdx new file mode 100644 index 0000000..225dc22 --- /dev/null +++ b/src/content/docs/tracker/gantt/auto-manual.mdx @@ -0,0 +1,52 @@ +--- +title: Auto vs Manual Scheduling +description: Control whether an issue participates in cascade scheduling or is pinned to its current dates. +--- + +import { Image } from 'astro:assets'; +import ganttSchedulingToggleLight from '../../../../assets/gantt/auto-manual-toggle-light.png'; + +## Overview + +Every issue in Huly's Gantt chart has a **scheduling mode**: **Auto** or **Manual**. In Auto mode, the issue participates in cascade scheduling and will be shifted when a predecessor is dragged. In Manual mode, the issue is pinned to its current dates and acts as a hard constraint — the cascade stops at it. + +## Auto Mode (Default) + +- The issue can be shifted by cascade when a predecessor's dates change. +- The issue is not pinned; its dates are considered flexible. +- No visual indicator in the bar. + +## Manual Mode + +- The issue is pinned to its current `startDate` and `dueDate`. +- Cascade shifts stop at this issue — successors of a manual issue are not affected when predecessors are dragged. +- A **pin icon** is shown inside the bar as a visual indicator. + +A small pin icon appears inside the bar near its left edge when the issue is in Manual mode. The pin is not shown for Auto-mode issues, so its presence makes manually-pinned bars immediately distinguishable in the timeline. + +## How to Switch Scheduling Mode + +**From the issue editor:** +1. Open an issue by clicking it in the Gantt sidebar or double-clicking the bar. +2. Find the **Scheduling** field in the issue detail panel. +3. Toggle between **Auto** and **Manual**. + +Issue editor panel showing the Scheduling toggle set to Manual + +**From the bar context menu:** +1. Right-click a bar in the Gantt chart. +2. Select **Pin (Manual mode)** or **Unpin (Auto mode)**. + +## When to Use Manual Mode + +- **Milestone issues** — milestones have fixed dates and should not drift with cascade. +- **External dependencies** — issues blocked by an external delivery date (e.g., a vendor's deadline). +- **Fixed-date deliverables** — contractual commitments where the date cannot change. +- **Review / sign-off gates** — tasks that must happen on a specific calendar date regardless of upstream delays. + +## Tips + +- Use Manual mode sparingly — if too many issues are pinned, cascade scheduling loses its value. +- Manual mode does not prevent you from manually dragging the bar — you can still reposition it by hand. +- When a cascade hits a Manual issue, Huly shows a warning in the confirm dialog: "X issues could not be shifted due to Manual constraints." +- You can bulk-set multiple issues to Manual mode by selecting them and using the right-click context menu. diff --git a/src/content/docs/tracker/gantt/bar-coloring.mdx b/src/content/docs/tracker/gantt/bar-coloring.mdx new file mode 100644 index 0000000..549d7b7 --- /dev/null +++ b/src/content/docs/tracker/gantt/bar-coloring.mdx @@ -0,0 +1,115 @@ +--- +title: Bar coloring and overlays +description: Switch what the Gantt bar colors mean — Status, Priority, Assignee, Component, Milestone, or Uniform — and read past-due / blocked / sub-issue progress at a glance. +--- + +import { Image } from 'astro:assets'; +import colorByStatus from '../../../../assets/gantt/color-by-status-light.png'; +import colorByPriority from '../../../../assets/gantt/color-by-priority-light.png'; +import colorByAssignee from '../../../../assets/gantt/color-by-assignee-light.png'; +import colorByComponent from '../../../../assets/gantt/color-by-component-light.png'; +import colorByMilestone from '../../../../assets/gantt/color-by-milestone-light.png'; +import overlays from '../../../../assets/gantt/overlays-past-due-blocked-light.png'; +import editComponentSwatch from '../../../../assets/gantt/edit-component-swatch-light.png'; +import colorsPopup from '../../../../assets/gantt/colors-popup-light.png'; + +## Overview + +The Gantt toolbar has a **Color by** dropdown that decides what each bar's fill color means. Switch between six modes whenever the question you're asking the chart changes — _where is work blocked?_ uses Status, _what's the team's load?_ uses Assignee, _which release does this belong to?_ uses Milestone. + +Independent of the color mode, two **overlays** mark bars with derived warnings (past-due deadlines, blocked predecessors) so they're visible regardless of the color encoding. An optional **sub-issue progress fill** shows completion as a darker section inside the bar. + +## The six Color-by modes + +The dropdown lives in the second toolbar row, next to **Group by**. Each option re-paints the canvas reactively; no reload required. + +### Status (default) + +Bar fill maps to the issue's status category — Backlog grey, Todo blue, In-Progress orange, Done green, Cancelled muted-grey. This is the most common view because it answers _where is work right now?_ on a glance. + +Gantt with Color by Status — orange Todo bars, grey Backlog bars + +### Priority + +Bar fill maps to the issue's priority: Urgent orange, High sunshine-yellow, Medium ocean-blue, Low cloud-grey, No-priority blueberry. Use this when you need to triage attention rather than track flow. + +Gantt with Color by Priority — Urgent bars in orange, Medium bars in ocean blue + +### Assignee + +Bar fill maps to the issue's assignee. The most-loaded eight team members each get a distinct palette slot (computed from the visible issue set); everyone beyond the top-8 shares a "rest of team" color. Unassigned issues render in neutral grey. + +Gantt with Color by Assignee — every team member's issues share one color + +The palette is recomputed when filters or grouping change, so the top-N classification stays meaningful in any view. + +### Component + +Bar fill maps to each issue's Component, using the color set on the Component itself (see [Picking a Component or Milestone color](#picking-a-component-or-milestone-color) below). Issues without a component render in neutral grey. + +Gantt with Color by Component — each component's issues share one custom color + +### Milestone + +Same as Component but per Milestone. Useful for "what's our release plan?" reviews where you want to see Sprint 4 vs Sprint 5 work without filtering. + +Gantt with Color by Milestone — bars colored per release/milestone + +### Uniform + +Every bar fills in the same neutral grey, regardless of any data attribute. Use this when chart noise from color coding distracts from a structural review (cascade chains, dependency arrows, working-days bands). + +## Overlays: past-due, blocked, critical + +Three overlay layers paint on top of the bar fill — regardless of which Color-by mode is active — so derived warnings stay visible even when the color encodes something else. + +Gantt with both overlays visible — red left stripe for past-due, diagonal hatch for blocked + +| Overlay | Visual | Trigger | +|---|---|---| +| **Past-due** | 3 px red stripe on the left edge of the bar | `dueDate < today AND status category != Done` | +| **Blocked** | diagonal hatch at 15 % opacity over the bar surface | at least one finish-to-start predecessor is not yet Done | +| **Critical path** | red 2 px border on the whole bar | computed by the critical-path overlay (see [Critical path](./critical-path)) | + +The overlays use distinct visual channels (left stripe vs surface texture vs border) so a single bar can be past-due **and** blocked **and** critical without one signal masking another. + +Toggle each overlay independently via the Customize-View popover (cog icon). Past-due and Blocked are on by default; Critical path is on whenever you also enable the critical-path computation. + +## Sub-issue progress fill + +When **Show sub-issue progress** is enabled in Customize-View and you're in `Color by = Status` mode, each parent bar shows a darker inner section covering `done_subissues / total_subissues` of its width. + +Scope is intentionally **global** — both the numerator and denominator come from all sub-issues of the parent regardless of the active Gantt filter. The fraction means the same thing in any saved view, not "percentage of this filter." + +The fill is suppressed on: + +- Issues without sub-issues (no data, no fake bar). +- Non-Status color modes (a darker section inside a categorical color would imply progress _within_ the category — confusing). +- Summary bars in grouped views (those already aggregate across their children). + +## Picking a Component or Milestone color + +Open any **Component** or **Milestone** from the sidebar. The top of the Edit dialog has a color swatch next to the title. + +EditComponent dialog with the color-swatch button highlighted + +Click the swatch to open the color picker: + +Color picker popup showing the 24-color Huly palette + +The picker offers Huly's full 24-color platform palette (Firework, Watermelon, Pink, Fuchsia, Lavander, Mauve, Heather, Orchid, Blueberry, Arctic, Sky, Cerulean, Waterway, Ocean, Turquoise, Houseplant, Crocodile, Grass, Sunshine, Orange, Pumpkin, Cloud, Coin, Porpoise). Pick a color and the swatch + every bar painted with this Component / Milestone updates immediately. + +**Fallback when no color is set:** newly created Components / Milestones don't have an explicit color. The Gantt resolver derives one deterministically from the record's identifier, so the swatch is never blank and the same Component always shows the same color until you change it. + +## Persistence and saved views + +Every Color-by selection, overlay toggle, and the sub-issue-progress toggle are persisted as part of [Saved Views](./saved-views). Switch to a saved view and the toolbar restores its Color-by mode + overlay states; the `Modified` indicator lights up when any of the four fields drifts from the saved snapshot. + +When you switch to a fresh view (or the synthetic _Default_ view), the four fields snap back to their spec defaults — Status / past-due on / blocked on / progress off — regardless of what the previous saved view had configured. This is intentional: a fresh view should never leak the prior view's color encoding. + +## Related + +- [Filtering and grouping](./filter-group) — what's in the chart at all +- [Saved views](./saved-views) — persisting the bar-coloring choices alongside zoom & pan +- [Critical path](./critical-path) — the third overlay layer +- [Dependencies](./dependencies) — the source of the "blocked" overlay diff --git a/src/content/docs/tracker/gantt/bulk-operations.mdx b/src/content/docs/tracker/gantt/bulk-operations.mdx new file mode 100644 index 0000000..3ade07f --- /dev/null +++ b/src/content/docs/tracker/gantt/bulk-operations.mdx @@ -0,0 +1,52 @@ +--- +title: Bulk Operations +description: Select multiple issues at once and drag them together or apply the same date shift to all selected bars. +--- + +import { Image } from 'astro:assets'; +import ganttBulkSelectedLight from '../../../../assets/gantt/bulk-selected-bars-light.png'; + +## Overview + +Bulk operations let you select multiple issue bars in the Gantt chart and move them together with a shared date delta. This is useful when an entire set of issues needs to shift by the same amount — for example, rescheduling a sprint block by one week — without manually dragging each bar individually. + +## Selecting Multiple Issues + +| Action | Result | +|--------|--------| +| **Click** a bar | Selects that bar, deselects others | +| **Cmd+Click** (Mac) / **Ctrl+Click** (Win) a bar | Adds bar to selection, or removes it if already selected | +| **Shift+Click** a bar | Selects all bars between the last-clicked bar and this one | +| **Cmd+A** / **Ctrl+A** | Selects all visible bars | +| **Escape** | Clears the selection | + +Selected bars are highlighted with a distinct outline and a selection indicator. + +Gantt chart showing three selected issue bars with highlight outlines + +## Dragging Multiple Bars + +1. Select 2 or more bars. +2. Drag any one of the selected bars. +3. All selected bars move together — they maintain their relative positions (the **delta** is shared). +4. While dragging, a preview shows where all selected bars will land. + +During the drag, all selected bars move in unison — each bar shifts by the same number of days as the one you are actively dragging. A semi-transparent preview shows each bar's projected landing position before you release. + +## Confirm Dialog + +When you release the drag, Huly shows a confirmation dialog: + +- Lists all **directly selected issues** with their new dates. +- Lists any **cascade-affected successor issues** (if cascade is enabled). +- **Apply** — commits all changes atomically. +- **Cancel** — discards the entire operation. + +The confirm dialog lists each selected issue with its new start and due dates, followed by any cascade-shifted successors. Clicking **Apply** commits all changes atomically; **Cancel** discards everything. + +## Tips + +- Bulk drag respects **Manual mode** — pinned issues in the selection move with the drag, but their successors are not cascade-shifted. +- Use **Shift+Click** on the first and last bar of a sprint block to quickly select all issues in that range. +- If you accidentally include an issue in the selection, **Cmd+Click** it to deselect before dragging. +- Bulk operations work across **group-by swim lanes** — you can select bars from different components or priorities. diff --git a/src/content/docs/tracker/gantt/cascade.mdx b/src/content/docs/tracker/gantt/cascade.mdx new file mode 100644 index 0000000..15c8046 --- /dev/null +++ b/src/content/docs/tracker/gantt/cascade.mdx @@ -0,0 +1,52 @@ +--- +title: Cascade Scheduling +description: Understand how Huly automatically shifts dependent issues when you drag a predecessor bar in the Gantt chart. +--- + +import { Image } from 'astro:assets'; +import ganttCascadeBeforeLight from '../../../../assets/gantt/cascade-before-light.png'; + +## Overview + +Cascade scheduling automatically propagates date shifts through your dependency graph. When you drag an issue bar in the Gantt chart, Huly calculates how all downstream (successor) issues are affected and presents a confirmation dialog before applying any changes. Issues in **Manual** scheduling mode are pinned and excluded from cascade shifts. + +## How Cascade Works + +1. You drag a bar left or right. +2. Huly runs the cascade simulation across the full dependency graph. +3. A **Confirm Cascade** popup appears, listing all issues that would shift and their new dates. +4. You review the list and click **Apply** to commit, or **Cancel** to discard. + +Only **Auto** mode issues in the successor chain are included in the cascade. Manual-pinned issues act as hard boundaries — the cascade stops at them. + +Gantt chart before drag — three issues with FS dependencies shown + +## Drag and Preview + +While dragging, a semi-transparent **preview bar** shows where the issue will land. Successor bars also shift in preview mode to give you a live sense of the ripple effect before you release. + +While dragging, the bar being moved shows at its projected position as a semi-transparent preview. Successor bars simultaneously shift to their projected new positions, giving a live preview of the cascade ripple effect before you release. + +## Confirm Popup + +When you release the drag, the Confirm Cascade dialog appears: + +- **Primary issue** — the issue you dragged, with its new start and due date. +- **Affected issues list** — all successor issues that will be shifted, with their old and new dates. +- **Apply / Cancel** — confirm or discard all changes atomically. No partial commits. + +The confirm popup shows the primary issue at the top with its new start and due dates, followed by each cascade-affected successor in order. Each entry shows the before and after dates. **Apply** commits all at once; **Cancel** restores the original state. + +## How to Skip Cascade for One Issue + +If you want to drag an issue without shifting its successors: + +1. Hold **Alt** while dragging — cascade is suppressed for that drag operation. +2. Alternatively, set the issue to **Manual** mode before dragging (see [Auto vs Manual Scheduling](./auto-manual)). + +## Tips + +- The cascade respects **lag**: if a dependency has a 2-day lag, the successor shifts to `predecessor.dueDate + 2 working days`. +- Cascade is transitive: if A → B → C, dragging A shifts both B and C. +- Circular dependencies are detected and highlighted in red before you can apply them. +- If a cascade would push an issue past a Milestone deadline, the milestone row is highlighted in the confirm popup. diff --git a/src/content/docs/tracker/gantt/critical-path.mdx b/src/content/docs/tracker/gantt/critical-path.mdx new file mode 100644 index 0000000..db7157e --- /dev/null +++ b/src/content/docs/tracker/gantt/critical-path.mdx @@ -0,0 +1,48 @@ +--- +title: Critical Path +description: Identify the longest path through your project dependency graph to understand which tasks drive your project end date. +--- + + +## What is the Critical Path? + +The **Critical Path Method (CPM)** identifies the longest sequence of dependent tasks in your project. The total duration of the critical path determines the earliest possible project completion date. Any delay on a critical path task directly delays the project end date. + +Tasks on the critical path have zero **slack** (also called float) — there is no room to delay them without pushing back the project deadline. + +## Visual Indicators + +When Critical Path highlighting is enabled, Huly displays: + +- **Orange bars** — issues on the critical path +- **Orange arrows** — dependency arrows that are part of the critical path +- **Slack column** in the sidebar — shows the number of working days each issue can slip before it becomes critical + +When enabled, bars on the critical path turn orange and the dependency arrows connecting them also highlight in orange, making the longest path through the project immediately visible. + +## How to Enable Critical Path View + +1. Open the Gantt chart for your project. +2. Click the **Critical Path** toggle in the toolbar (diamond icon). +3. The critical path is calculated instantly and highlighted in orange. + +Toggle it off to return to the standard color-coding. + +## Understanding Slack + +**Slack** (or float) is the amount of time an issue can be delayed without affecting the project end date. Issues with zero slack are on the critical path. Issues with positive slack have scheduling flexibility. + +The **Slack** column in the Gantt sidebar shows: + +- `0 d` — critical path (no flexibility) +- `3 d` — issue can slip 3 working days before becoming critical +- `-2 d` — issue is already 2 working days behind schedule + +The Slack column appears between the issue title and the timeline area. Each row shows a numeric value such as `0 d`, `3 d`, or `-2 d` indicating how many working days that issue can slip before becoming critical. + +## Tips + +- Focus your risk management on zero-slack tasks — they are the ones that will delay your milestone if they slip. +- When you add a new dependency, the critical path is recalculated automatically. +- Critical path calculation respects **working days** configuration — weekends and holidays are excluded from slack calculations. +- Use the **Group by Component** grouping together with critical path to quickly identify which component contains the most critical tasks. diff --git a/src/content/docs/tracker/gantt/dependencies.mdx b/src/content/docs/tracker/gantt/dependencies.mdx new file mode 100644 index 0000000..861c8b9 --- /dev/null +++ b/src/content/docs/tracker/gantt/dependencies.mdx @@ -0,0 +1,62 @@ +--- +title: Dependencies +description: Model Finish-to-Start, Start-to-Start, Finish-to-Finish, and Start-to-Finish relationships with optional lag between issues. +--- + +import { Image } from 'astro:assets'; +import ganttDepArrowLight from '../../../../assets/gantt/dependencies-fs-arrow-light.png'; +import ganttDepEditorLight from '../../../../assets/gantt/dependencies-editor-light.png'; + +## Overview + +Huly supports four standard dependency types between issues. Dependencies are rendered as directional arrows in the Gantt chart and drive the [cascade scheduler](./cascade) when you drag a predecessor bar. A positive **lag** value adds a waiting period between the end of one constraint and the start of the next. + +## Dependency Types + +| Type | Abbreviation | Meaning | +|------|-------------|---------| +| **Finish-to-Start** | FS | Successor cannot start until predecessor finishes | +| **Start-to-Start** | SS | Successor cannot start until predecessor starts | +| **Finish-to-Finish** | FF | Successor cannot finish until predecessor finishes | +| **Start-to-Finish** | SF | Successor cannot finish until predecessor starts | + +**FS** is the most common type and represents a simple "A must be done before B can begin" relationship. **SS** is useful for parallel tasks that must start together. **FF** ensures two tasks complete at the same time. **SF** is rare and models reverse dependency scenarios. + +Gantt chart showing Finish-to-Start dependency arrows between issue bars + +## Lag + +Lag is a duration (in working days) added to the dependency. Positive lag adds a gap, negative lag overlaps the two tasks. For example, an FS dependency with a lag of 2 days means the successor starts 2 working days *after* the predecessor finishes; an FS dependency with a lag of −1 lets the successor start one working day *before* the predecessor finishes. + +Lag is configured in the **Visual Dependency Editor** and displayed as a small badge on the dependency arrow. + +The arrow style varies by type: FS arrows run from the right edge of the predecessor to the left edge of the successor; SS arrows connect left edges; FF arrows connect right edges; SF arrows run from the left edge of the predecessor to the right edge of the successor. + +## How to Add a Dependency + +**Method 1 — Hover connector:** +1. Hover over a bar in the Gantt chart. +2. Small connector circles appear on the left and right edges. +3. Drag from one connector to another bar to create an FS dependency. +4. Release to confirm. + +**Method 2 — Visual Dependency Editor:** +1. Click the **Dependencies** button in the Gantt toolbar (chain-link icon). +2. The Visual Dependency Editor opens as an overlay panel. +3. Select the **type** (FS / SS / FF / SF) from the 2×2 grid. +4. Adjust the **lag** using the slider or numeric input. +5. Click **Apply**. + +**Method 3 — Issue detail:** +1. Open an issue. +2. In the **Relations** section, add a "blocks" or "is blocked by" relation. +3. Switch to Gantt view — Huly automatically renders the relation as a dependency arrow. + +Visual Dependency Editor panel showing type grid and lag slider + +## Tips + +- Dependency arrows are color-coded: **orange** arrows indicate the dependency is on the **critical path**. +- You can remove a dependency by right-clicking its arrow and selecting **Remove**. +- Lag can be 0 (immediate start/finish constraint), any positive integer (gap), or any negative integer (overlap). +- SS and FF dependencies are especially useful for parallel workstreams that share a hard start or end constraint. diff --git a/src/content/docs/tracker/gantt/empty-state.mdx b/src/content/docs/tracker/gantt/empty-state.mdx new file mode 100644 index 0000000..662b4f8 --- /dev/null +++ b/src/content/docs/tracker/gantt/empty-state.mdx @@ -0,0 +1,43 @@ +--- +title: No Search Results +description: What the Tracker shows when a search returns zero issues, and how to recover quickly. +--- + +## Overview + +When a search returns zero issues in the active viewlet (List, Kanban, or Gantt), the Tracker replaces the empty result area with a dedicated **empty-state card** instead of leaving an empty grid. The card tells you what you searched for, lists which filters are active, and offers two quick recovery actions. + +## What the card shows + +- **🔍 Heading** — `No issues found for ""`. +- **Active filters line** — if filters are also set, the card lists them so you can see whether the empty result is caused by the search text, the filters, or both. +- **"Clear filters" button** — removes every filter chip while keeping the search text. Tap this if you suspect a filter (rather than the search text) is masking results. +- **"Search all projects" button** — re-runs the same search across **All Issues** (every project in the workspace), in case the issue you're looking for lives outside the current project. + +The viewlet behind the card stays mounted: its background query keeps running, so the card disappears the moment the next query returns at least one match — no manual reload required. + +## When does the card appear? + +The card appears only when **both** conditions are true: + +1. The search input is non-empty (you typed something). +2. The active viewlet's query has returned and the result count is exactly zero. + +During the initial page load, before the first query response arrives, the count stays at the sentinel value `-1` so the card does not flash briefly. Likewise, on every search-text or filter change the count resets to `-1` until the new query resolves — so a stale "no results" card can never linger from the previous query. + +## Workflow + +1. You typed something into the Lupe (search) and the issue list emptied. +2. The empty-state card appears in the viewlet area. +3. If you suspect the filter set is the culprit: + - Read the **Active filters** line below the heading. + - Click **Clear filters** to keep the search text but drop every filter chip. +4. If the issue might be in another project: + - Click **Search all projects** to jump to the **All Issues** special view with the same query. +5. If the search text itself is too narrow: + - Edit the search bar — the card disappears as soon as the new query returns hits. + +## Related + +- [Advanced Search](./advanced-search) — prefix operators, search scope, match highlighting. +- [Filtering and Grouping](./filter-group) — filter UI, chip overflow popover, ModeSelector conflict resolution. diff --git a/src/content/docs/tracker/gantt/export.mdx b/src/content/docs/tracker/gantt/export.mdx new file mode 100644 index 0000000..a850fa1 --- /dev/null +++ b/src/content/docs/tracker/gantt/export.mdx @@ -0,0 +1,59 @@ +--- +title: Exporting the Gantt Chart +description: Export the Gantt chart as a PNG image or PDF document for reporting and stakeholder communication. +--- + +import { Image } from 'astro:assets'; +import ganttExportMenuLight from '../../../../assets/gantt/export-hamburger-menu-light.png'; +import ganttExportFullscreenLight from '../../../../assets/gantt/export-fullscreen-light.png'; + +## Overview + +The Gantt chart can be exported as a **PNG** image or a **PDF** document via the hamburger menu. Both formats render the full chart — including the sidebar with issue names and the complete timeline — regardless of how much is currently visible in the browser viewport. + +## How to Export + +1. Click the **hamburger menu** (three horizontal lines) in the top-right of the Gantt toolbar. +2. Choose **Export as PNG** or **Export as PDF**. +3. The browser downloads the file automatically. + +Gantt toolbar hamburger menu open showing Export as PNG and Export as PDF options + +## PNG Export + +The PNG export renders the Gantt chart as a high-resolution data-driven SVG converted to PNG: + +- **Full width** — includes all issue bars from earliest to latest date, not just the current viewport +- **Sidebar included** — issue identifiers and titles appear in the left sidebar column +- **Resolution** — optimized for screen and presentation use at 1× device pixel ratio +- **File name** — automatically named `gantt-YYYY-MM-DD.png` using the current date + +The exported PNG includes the full timeline from the earliest to the latest issue date, with issue titles in the left sidebar column, rendered at screen resolution. + +## PDF Export + +The PDF export uses jsPDF to generate a custom-size document: + +- **Page size** — automatically sized to fit the full chart width and height +- **Landscape orientation** — Gantt charts are rendered in landscape by default +- **File name** — automatically named `gantt-YYYY-MM-DD.pdf` + +The exported PDF opens as a landscape-oriented document sized to fit the full chart. The file is named `gantt-YYYY-MM-DD.pdf` and downloads automatically. + +## Fullscreen Mode + +For presenting the Gantt chart in a meeting or on a projector, use **Fullscreen** mode: + +1. Click the **hamburger menu**. +2. Select **Fullscreen** (or press the fullscreen icon button in the toolbar). +3. The Gantt chart expands to fill the entire browser window. +4. Press **Escape** or click the exit button to leave fullscreen. + +Gantt chart in fullscreen mode filling the entire browser window + +## Tips + +- Apply your desired **filters**, **grouping**, and **zoom level** before exporting — these settings are included in the export. +- For the cleanest export, use **Light theme** and zoom to **Week** or **Month** before exporting. +- PNG is best for presentations and Slack/email sharing; PDF is better for printing or formal reports. +- If the exported chart is too wide to read, zoom in to a shorter time range before exporting — the export will reflect the currently visible time window. diff --git a/src/content/docs/tracker/gantt/filter-group.mdx b/src/content/docs/tracker/gantt/filter-group.mdx new file mode 100644 index 0000000..29b1226 --- /dev/null +++ b/src/content/docs/tracker/gantt/filter-group.mdx @@ -0,0 +1,80 @@ +--- +title: Filtering and Grouping +description: Use the filter bar and group-by options to focus on specific subsets of issues in the Gantt chart. +--- + +import { Image } from 'astro:assets'; +import ganttFilterBarLight from '../../../../assets/gantt/filter-bar-active-light.png'; +import ganttGroupByComponentLight from '../../../../assets/gantt/group-by-component-light.png'; +import ganttGroupByPriorityLight from '../../../../assets/gantt/group-by-priority-light.png'; +import ganttFilterOverflowLight from '../../../../assets/gantt/filter-chip-overflow-badge-light.png'; +import ganttHiddenFiltersPopoverLight from '../../../../assets/gantt/filter-hidden-filters-popover-light.png'; + +## Overview + +The Gantt chart inherits the full Huly filter system, allowing you to narrow down visible issues by any combination of attributes. The **Group by** option organizes issues into swim lanes, making it easy to see work distribution across components, assignees, priorities, or milestones. + +## Using the Filter Bar + +The filter bar appears at the top of the Gantt view. Click **Filter** to open the filter picker: + +1. Select a **filter category** (Assignee, Component, Priority, Milestone, Status, Label, etc.). +2. Choose one or more **values** for that category. +3. The filter chip appears in the bar. Active filters are shown as colored chips. +4. Add multiple filters — they are combined with AND logic. +5. Click the **X** on a chip to remove that filter. + +Gantt chart filter bar with two active filter chips (Component: Art, Priority: Urgent) + +### Adding more filters once filters are active + +When at least one filter is set, the **Filter** button switches to **+ Add filter**. Clicking it always opens the filter-type picker so a second, third, … filter can be added without first clearing the existing ones. The trailing **Clear filters** button (next to the chip row) wipes the whole set in one click. + +### Chip overflow — the +N badge + +If many filters are active or the toolbar is narrow, chips collapse into an orange **+N badge** that keeps the toolbar's trailing controls (Group-by, date-nav, zoom, undo/redo, fullscreen) visible: + +Filter bar with one collapsed chip shown as an orange +1 badge, the Add filter button and Clear filters control remain visible + +Click the badge to open the **Hidden filters** popover, which lists every collapsed chip and lets you remove or edit them inline: + +Hidden filters popover above the filter bar, listing the chip Priority is + +The popover sits on an opaque card so the Gantt grid behind it stays readable. + +## Group By Options + +Click the **Group by** dropdown in the toolbar to organize issues into swim lanes: + +| Group by | Description | +|----------|-------------| +| **None** | All issues in a flat list (default) | +| **Component** | Swim lane per component | +| **Priority** | Swim lane per priority level (Urgent, High, Medium, Low, No priority) | +| **Assignee** | Swim lane per team member | +| **Milestone** | Swim lane per milestone | +| **Status** | Swim lane per issue status | + +Swim lane headers are collapsible — click the chevron to hide a lane and reduce visual noise. + +Gantt chart grouped by Component showing Art, Design, and Engineering swim lanes + +## Combining Filters and Groups + +Filters and grouping work together. For example: + +- **Filter**: Milestone = v1.0, **Group by**: Component → shows only v1.0 issues, organized by component +- **Filter**: Assignee = Alice, **Group by**: Priority → shows Alice's issues by priority + +Gantt chart grouped by Priority with Urgent and High lanes visible + +## ModeSelector conflict resolution + +The **All / Active / Backlog** mode selector and a **Status** filter both control which issues are visible. When you add an explicit Status filter, the mode selector greys out with a tooltip explaining why — the chip is now the source of truth, the All/Active/Backlog shortcut is no longer applied. Removing the Status filter re-enables the mode selector. + +## Tips + +- Filters persist when you switch between Gantt, List, and Board views within the same project. +- Save frequently-used filter + group combinations as **Saved Views** (see [Saved Views](./saved-views)). +- Use **Group by Milestone** to quickly review which issues are scheduled before vs. after your key milestones. +- The **Customize View** popover (cog icon) hides the All/Active/Backlog mode selector entirely if you don't use it — see [Advanced Search](./advanced-search) for that toggle and other search-related options. diff --git a/src/content/docs/tracker/gantt/index.mdx b/src/content/docs/tracker/gantt/index.mdx new file mode 100644 index 0000000..6e2143a --- /dev/null +++ b/src/content/docs/tracker/gantt/index.mdx @@ -0,0 +1,62 @@ +--- +title: Gantt Chart Overview +description: Visualize project timelines and task dependencies with the Huly Gantt chart view. +--- + +import { Image } from 'astro:assets'; +import ganttOverviewLight from '../../../../assets/gantt/overview-default-light.png'; +import ganttOverviewDataLight from '../../../../assets/gantt/overview-with-data-light.png'; +import ganttViewSwitcherLight from '../../../../assets/gantt/overview-view-switcher-light.png'; + +## What is the Gantt Chart? + +The Gantt chart view in Huly transforms your project issues into a visual timeline. Each issue is represented as a horizontal bar spanning from its **start date** to its **due date**, arranged on a time axis so you can instantly see scheduling conflicts, parallel work, and critical dependencies. + +Use the Gantt view when you need to plan sprints across multiple weeks, coordinate team capacity across components, or identify whether your milestone deadlines are at risk. + +## Key Features + +- **Visual timeline** — bars rendered from `startDate` to `dueDate` at configurable zoom levels (Day, Week, Month, Quarter) +- **Bar coloring** — choose what each bar's color means via the toolbar **Color by** dropdown: Status (default) / Priority / Assignee / Component / Milestone / Uniform. See [Bar coloring and overlays](./bar-coloring) +- **Overlays** — past-due bars get a red left stripe; blocked bars get a diagonal hatch; critical-path bars get a red border — all readable on top of any color mode +- **Dependency arrows** — directional arrows between bars for Finish-to-Start, Start-to-Start, Finish-to-Finish, and Start-to-Finish relations +- **Cascade scheduling** — drag one bar and dependent bars automatically shift forward +- **Critical Path highlighting** — the longest path through your dependency graph is highlighted in red +- **Working-days awareness** — weekends and custom holidays are visually tinted and optionally skipped in scheduling calculations +- **Saved views** — save your current filter, grouping, time window AND bar-coloring choices as a named view and share it with teammates +- **Bulk operations** — select multiple issues with Cmd+Click or Shift+Click and drag them together +- **Export** — render the full Gantt chart as PNG or PDF via the hamburger menu + +## How to Open the Gantt View + +1. Open **Tracker** from the left sidebar. +2. Select your project under **Your projects**. +3. Click **Issues**. +4. In the top-right toolbar, click the **Gantt** view icon (the third radio button in the view switcher, after List and Board). + +View switcher showing List, Board, and Gantt options + +## Understanding Issue Bars + +Once in Gantt view, each issue appears as a color-coded bar: + +- **Bar position** = `startDate` (left edge) to `dueDate` (right edge) +- **Bar color** = whatever **Color by** in the toolbar currently maps to — Status (default), Priority, Assignee, Component, Milestone, or Uniform. See [Bar coloring and overlays](./bar-coloring) for the full reference +- **Bar label** = issue identifier and title, shown inside or alongside the bar depending on zoom level +- **Pin icon** on a bar = issue is in **Manual** scheduling mode (will not be cascade-shifted) +- **Red left stripe** = past-due (dueDate has passed and the issue is not Done) +- **Diagonal hatch** = blocked (at least one finish-to-start predecessor is not Done) + +Gantt chart with Game Design project issues showing bars and dependencies + +## Zoom and Navigation + +Use the zoom selector in the toolbar to switch between **Day**, **Week**, **Month**, and **Quarter** granularity. Press **T** to jump to today's date. Use **Ctrl+Mouse wheel** for stepless zoom adjustment. + +Gantt chart default state with zoom controls visible + +## Tips + +- Set `startDate` and `dueDate` on your issues before switching to Gantt view; issues without dates appear in a collapsed row at the top. +- Use **Week** zoom for sprint planning and **Month** or **Quarter** zoom for roadmap reviews. +- Press **?** to open the full keyboard shortcut reference at any time. diff --git a/src/content/docs/tracker/gantt/mobile.mdx b/src/content/docs/tracker/gantt/mobile.mdx new file mode 100644 index 0000000..f23c8b5 --- /dev/null +++ b/src/content/docs/tracker/gantt/mobile.mdx @@ -0,0 +1,58 @@ +--- +title: Mobile and Tablet Access +description: Use the Huly Gantt chart on phones and tablets with touch-optimized controls and a slide-out drawer for the issue sidebar. +--- + +import { Image } from 'astro:assets'; +import ganttMobileDrawerOpenLight from '../../../../assets/gantt/mobile-drawer-open-light.png'; +import ganttMobileDrawerClosedLight from '../../../../assets/gantt/mobile-drawer-closed-light.png'; +import ganttTabletViewLight from '../../../../assets/gantt/mobile-tablet-view-light.png'; +import ganttMobilePinchZoomLight from '../../../../assets/gantt/mobile-pinch-zoom-light.png'; + +## Overview + +The Huly Gantt chart adapts to mobile and tablet screen sizes with a responsive layout. On phones, the sidebar is hidden by default and accessible via a slide-out drawer. On tablets, the full two-column layout is available with touch-optimized drag controls. Pinch-to-zoom adjusts the time scale on both form factors. + +## Phone Layout (below 640px) + +On small phone screens: + +- The **issue sidebar** (left column with issue names) is hidden to maximize timeline space. +- A **drawer toggle button** appears at the bottom of the screen. +- Tap the toggle to slide open the sidebar drawer from the left. +- The Gantt timeline is **read-only** on phones below 640px — bars cannot be dragged on very small screens to prevent accidental edits. +- Tap a bar to open the issue detail view. + +Phone screen showing Gantt chart with sidebar drawer open from the left + +Phone screen showing Gantt chart with sidebar drawer closed and bars visible + +## Tablet Layout (641px – 1024px) + +On tablet screens: + +- The **full two-column layout** is shown (sidebar + timeline). +- **Drag editing is enabled** — use a long-press (approximately 500ms) to initiate a bar drag. +- **Pinch-to-zoom** on the timeline adjusts the zoom level (equivalent to Ctrl+Mouse Wheel on desktop). +- The hamburger menu and filter bar are accessible via the top toolbar. + +Tablet screen showing the full Gantt chart with sidebar and timeline in two columns + +## Pinch-to-Zoom + +On touch-enabled devices, use a two-finger pinch gesture on the timeline area to zoom in or out: + +- **Pinch in** (fingers together) → zoom in to finer detail (e.g., Day view) +- **Pinch out** (fingers apart) → zoom out to broader overview (e.g., Month view) + +The zoom level snaps to the nearest standard level (Day, Week, Month, Quarter) when you release. + +Tablet screen showing pinch-to-zoom gesture on the Gantt timeline + +## Tips + +- On phones, use the **drawer** to quickly check issue names and priorities before navigating to the issue detail. +- On tablets in landscape orientation, the sidebar and timeline both have more space — landscape is recommended for sprint planning sessions. +- Tablet drag uses **long-press** to distinguish from scrolling. Hold the bar for about half a second before dragging. +- Export (PNG/PDF) is available on mobile via the hamburger menu — useful for sharing a snapshot during a meeting. +- The Huly mobile app provides the same Gantt chart experience as the mobile web with native touch handling. diff --git a/src/content/docs/tracker/gantt/saved-views.mdx b/src/content/docs/tracker/gantt/saved-views.mdx new file mode 100644 index 0000000..057d0e7 --- /dev/null +++ b/src/content/docs/tracker/gantt/saved-views.mdx @@ -0,0 +1,55 @@ +--- +title: Saved Views +description: Save your current Gantt filter, grouping, and time window as a named view and share it with teammates. +--- + +import { Image } from 'astro:assets'; +import ganttSavedViewsHamburgerLight from '../../../../assets/gantt/saved-views-hamburger-light.png'; +import ganttSavedViewsSaveDialogLight from '../../../../assets/gantt/saved-views-save-dialog-light.png'; +import ganttSavedViewsLoadMenuLight from '../../../../assets/gantt/saved-views-load-menu-light.png'; + +## Overview + +Saved Views capture the current state of your Gantt chart — including active filters, group-by selection, zoom level, and optional time-window pin — as a named preset. Once saved, a view can be loaded in one click and optionally shared with other project members. Shared views appear in their Gantt dropdown automatically. + +## Key Features + +- **Filter + Group snapshot** — saves the exact combination of active filters and group-by setting +- **Bar-coloring snapshot** — the **Color by** dropdown state plus the past-due / blocked / sub-issue-progress toggles are saved along with the view. See [Bar coloring and overlays](./bar-coloring) +- **Time-window pin** — optionally pins the visible date range so the view always opens at the same time position +- **Sharing** — views can be scoped to just you (personal) or shared with all project members +- **Instant load** — switch between views from a dropdown without re-applying filters manually +- **Modified indicator** — once any of the captured fields drifts from the saved snapshot the toolbar shows a `Modified` marker; pick the same view again to revert +- **Active-default reset** — switching to a different view (or the synthetic _Default_) resets the bar-color toolbar to its spec defaults (Status / past-due on / blocked on / progress off) so the prior view's encoding never leaks across switches + +## How to Save a View + +1. Configure your Gantt chart filters, grouping, and zoom to the desired state. +2. Click the **hamburger menu** (three horizontal lines) in the top-right of the Gantt toolbar. +3. Select **Save current view**. + +Gantt toolbar hamburger menu open showing Save current view option + +4. In the **Save View** dialog: + - Enter a **name** for the view. + - Toggle **Fix time window** if you want the view to always open at the current date range. + - Toggle **Share with members** to make the view visible to all project members. +5. Click **Save**. + +Save View dialog with name field, Fix time window toggle, and Share with members toggle + +## How to Load a Saved View + +1. Click the **hamburger menu** in the Gantt toolbar. +2. Hover over **Load view** — a submenu appears with all available views. +3. Views are grouped as **Personal** (only visible to you) and **Shared** (visible to all members). +4. Click a view name to apply it instantly. + +Hamburger menu Load view submenu showing Personal and Shared view groups + +## Tips + +- Use descriptive names like "Sprint 4 — Art Team" or "Q3 Milestone Review" to make views findable. +- Shared views are great for recurring planning meetings — create a "Weekly Sync" view that always opens at the current week. +- You can delete a saved view from the hamburger menu → **Manage views**. +- Personal views are not visible to other team members even if they load the same project. diff --git a/src/content/docs/tracker/gantt/shortcuts.mdx b/src/content/docs/tracker/gantt/shortcuts.mdx new file mode 100644 index 0000000..bd49d08 --- /dev/null +++ b/src/content/docs/tracker/gantt/shortcuts.mdx @@ -0,0 +1,63 @@ +--- +title: Keyboard Shortcuts +description: Master the Gantt chart keyboard shortcuts to navigate timelines, change zoom, and undo changes quickly. +--- + +import { Image } from 'astro:assets'; +import ganttShortcutsHelpLight from '../../../../assets/gantt/shortcuts-help-popup-light.png'; + +## Overview + +The Huly Gantt chart supports a set of keyboard shortcuts for fast navigation and operation. Press **?** at any time while the Gantt chart is focused to open the built-in shortcut reference. + +## Navigation Shortcuts + +| Key | Action | +|-----|--------| +| **T** | Jump to today — centers the viewport on the current date | +| **Arrow Left / Right** | Scroll the timeline left / right by one zoom unit | +| **Home** | Scroll to the earliest issue bar | +| **End** | Scroll to the latest issue bar | + +## Zoom Shortcuts + +| Key | Action | +|-----|--------| +| **D** | Switch to **Day** zoom level | +| **W** | Switch to **Week** zoom level | +| **M** | Switch to **Month** zoom level | +| **Q** | Switch to **Quarter** zoom level | +| **Ctrl + Mouse Wheel** | Stepless zoom in / out (interpolates between zoom levels) | + +## Editing Shortcuts + +| Key | Action | +|-----|--------| +| **Cmd+Z** (Mac) / **Ctrl+Z** (Win) | Undo the last drag or cascade commit | +| **Cmd+Shift+Z** (Mac) / **Ctrl+Y** (Win) | Redo | +| **Escape** | Cancel the current drag operation or clear selection | +| **Cmd+A** (Mac) / **Ctrl+A** (Win) | Select all visible bars | + +## Selection Shortcuts + +| Key | Action | +|-----|--------| +| **Click** | Select single bar | +| **Cmd+Click** (Mac) / **Ctrl+Click** (Win) | Toggle bar in/out of multi-selection | +| **Shift+Click** | Range select from last-clicked bar to this bar | +| **Escape** | Clear current selection | + +## Help + +| Key | Action | +|-----|--------| +| **?** | Open the keyboard shortcut reference popup | + +Gantt chart keyboard shortcut help popup showing all available shortcuts + +## Tips + +- The **Ctrl+Mouse Wheel** stepless zoom is particularly useful for zooming in on a specific sprint period while keeping the context of surrounding weeks visible. +- **T** is the fastest way to reorient yourself after scrolling far into the future or past. +- **Cmd+Z** undoes the entire last cascade operation atomically — it is not possible to undo individual sub-shifts within a cascade. +- Shortcuts only work when the Gantt chart area is focused. Click on the timeline area first if shortcuts are not responding. diff --git a/src/content/docs/tracker/gantt/working-days.mdx b/src/content/docs/tracker/gantt/working-days.mdx new file mode 100644 index 0000000..d5914e7 --- /dev/null +++ b/src/content/docs/tracker/gantt/working-days.mdx @@ -0,0 +1,50 @@ +--- +title: Working Days +description: Configure which days count as working days to make scheduling, lag calculations, and cascade shifts respect your team's calendar. +--- + + +## Overview + +By default, Huly treats all 7 days of the week as working days when calculating durations, lag, and cascade shifts. You can configure a **Working Days** profile per project to exclude weekends and custom holidays. Once configured, the Gantt chart visually tints non-working days and all scheduling math uses only working days. + +## Key Concepts + +- **Working days** — days counted in scheduling calculations (default: Mon–Sun) +- **Non-working days** — days excluded from scheduling (e.g., Saturday, Sunday, public holidays) +- **Weekend tint** — light gray shading on non-working day columns in the Gantt timeline +- **Calendar-day mode** — scheduling ignores working-day config and counts all 7 days (used for hard deadline tracking) + +## How to Configure Working Days + +1. Open your project settings (click the project name in the sidebar → **Settings**). +2. Scroll to the **Scheduling** section. +3. Click **Working Days Configuration**. +4. Toggle which days of the week are working days (Mon–Fri selected by default once configured). +5. Optionally add **Custom holidays** as specific dates. +6. Click **Save**. + +The Working Days configuration panel shows a grid of the seven weekdays with toggle buttons. Enabled days are highlighted; disabled days are grayed out. A separate section lists custom holiday dates with an add-date control. + +## Weekend Tint in the Gantt Chart + +After configuring working days, non-working day columns in the Gantt timeline are shaded with a subtle gray tint. This provides a visual cue that no work is scheduled on those days. + +The tint does not affect bar rendering — bars still span their full date range including non-working days. The tint is purely informational. + +In the Gantt timeline, Saturday and Sunday columns (or whichever days are marked as non-working) appear with a light gray background band that spans the full height of the chart, making it easy to spot weekends at a glance. + +## Effect on Scheduling + +When working days are configured: + +- **Lag values** in dependencies are counted in working days (2-day lag = 2 working days, not 2 calendar days) +- **Cascade shifts** skip non-working days — a bar dragged to end on Friday will push its successor to start on Monday, not Saturday +- **Slack calculations** in the Critical Path view use working days +- **Duration display** in the sidebar shows working-day duration alongside calendar-day duration + +## Tips + +- Configure working days before adding dependencies — lag values are re-evaluated when the configuration changes. +- If your team is distributed across multiple time zones with different public holidays, create separate projects per region and configure working days independently. +- The **Calendar-day** toggle (available per issue) overrides the project working-days config for deadline-tracking purposes.