Gantt Chart Comparison
Three implementations evaluated side-by-side. Which one ships in the package, which stays as a power tool, and which gets retired?
The Three Contenders
Each takes a different approach to project timeline visualization
Frappe Gantt
Lightweight SVG-based Gantt. 50KB bundle. Native drag, dependency arrows, custom popups.
- + MIT license — safe for package
- + Tiny bundle (50KB)
- + Native drag-to-reschedule
- + Native dependency arrows
- - No tree grid / left panel
- - No swimlanes
DHTMLX Gantt
Professional-grade Gantt with tree grid, drag-to-create-links, undo/redo. 217KB bundle.
- + Most feature-rich
- + Tree grid with columns
- + Drag-to-create-links
- + Undo/redo (Ctrl+Z)
- - GPL v2 — cannot ship in package
- - Cannot list on AppExchange
CSS Grid Timeline
Custom-built with CSS Grid. No dependencies but every feature is manual work.
- + Zero external dependencies
- + Entity grouping works well
- - Every feature manually built
- - Will always lag behind libraries
- - Not worth maintaining
Feature Comparison
Side-by-side capability matrix across all three implementations
| Feature | Frappe | DHTMLX | CSS Grid |
|---|---|---|---|
| License | MIT | GPL v2 | BSL/Our code |
| Bundle Size | 50 KB | 217 KB | 0 KB |
| Drag to Reschedule | Yes | Yes | Partial |
| Drag to Resize | Yes | Yes | No |
| Dependency Arrows | Yes | Yes | Partial |
| Drag to Create Links | No | Yes | No |
| Entity Grouping | Partial | Yes | Yes |
| Tree Grid (left panel) | No | Yes | No |
| Progress Bars | Yes | Yes | Yes |
| Zoom Levels | Yes | Yes | Yes |
| Quick-Edit Modal | Yes | Yes | Yes |
| Rich Tooltips/Popups | Yes | Yes | Partial |
| My Work Filter | Yes | Yes | Yes |
| Show Completed Toggle | Yes | Yes | No |
| Summary Stats Bar | Yes | Yes | Yes |
| Today Marker | Yes | Yes | Yes |
| Milestone Markers | Yes | Partial | No |
| Undo/Redo | No | Yes | No |
| localStorage Persistence | Yes | Yes | No |
Demo Data
What's loaded in the scratch org for testing
Scratch Org Setup
How to launch the demo from scratch
Switch to branch
git checkout feature/gb-gantt-comparisonCheck review org
cci org info reviewDeploy (strip namespace tokens first)
sf project deploy start --target-org "Delivery Hub__review" --source-dir /tmp/deploy --ignore-conflictsLoad demo data
sf apex run --file scripts/load-gantt-demo-data-v2.apex --target-org "Delivery Hub__review"Open the 3 tabs
Delivery_Timeline | Delivery_Frappe_Timeline | Delivery_DHTMLX_TimelineKnown Issues
What needs fixing before these are production-ready
Linter/Hook Revert Problem
A git hook keeps reverting DeliveryGanttController.cls to its original version, removing the getGanttData() and getGanttDependencies() methods. This breaks the Frappe and DHTMLX implementations since they import these methods.
ParentWorkItemId__c Not Deployed
The review scratch org doesn't have this field, so DHTMLX tree hierarchy only shows entity grouping, not parent-child nesting within entities.
Windows Source Tracking Errors
Every deploy shows a MetadataTransferError at the source tracking step. The actual metadata deploy succeeds (check “Components: X/X 100%”). This is a Windows file limit issue, not a deploy failure.
Features That May Not Work Yet
- Quick-edit modal — depends on
deliveryGanttQuickEditbeing deployed - Dependency arrows — depends on Apex method not being reverted
- DHTMLX drag-to-create-links — depends on board controller access
- Shared toolbar — depends on
deliveryGanttToolbarbeing deployed
Verdict
The recommendation based on license, features, and maintenance burden
Ship Frappe Gantt in the Package
MIT license, 50KB, covers 80% of use cases. It has native drag-to-reschedule, dependency arrows, custom popups, and zoom controls. It can go on AppExchange and be open-sourced. The shared toolbar and quick-edit modal bring it close to the deliveryHubBoard quality level.
Keep DHTMLX as Power Mode
For internal Cloud Nimbus use or clients who don't care about GPL. It's the most capable Gantt chart in any Salesforce app — tree grid, drag-to-create-links, undo/redo. Could offer as a premium internal tool or for consulting engagements where GPL is acceptable.
Retire CSS Grid Timeline
It served its purpose as a stepping stone and proof-of-concept. Libraries do everything it does but better, with less code and less maintenance. Delete the component and tab.
Next Steps
What to do when returning to this work
Review all 3 in the scratch org
Dedicate 30 min to click around each one. Try drag, click bars, toggle dependencies.
Decide: Frappe only? Frappe + DHTMLX? All 3?
License is the deciding factor. Frappe can ship, DHTMLX can't.
Fix the linter/hook revert issue
DeliveryGanttController.cls keeps getting reverted. Need to investigate the git hook.
Deploy ParentWorkItemId__c to review org
Enables tree hierarchy in DHTMLX (parent-child nesting within entities).
Debug what's broken
Quick-edit modal, dependency arrows, shared toolbar — test each feature.
Polish the winner
Match deliveryHubBoard quality — animations, mobile responsiveness, keyboard shortcuts.
Add Gantt to Workspace
Put the Gantt tab inside deliveryHubWorkspace alongside the Board tab.
Shared Infrastructure
Components that work with any Gantt implementation
| Component | Purpose |
|---|---|
| deliveryGanttQuickEdit | Edit modal with lightning-record-edit-form, advanced fields toggle, escape to close |
| deliveryGanttToolbar | Configurable toolbar with zoom buttons, entity filter, toggle icons |
| getGanttData() | Rich DTO — hours, developer, entity, progress, dates with fallback chain |
| getGanttDependencies() | Flat dependency list from WorkItemDependency__c for arrow rendering |
| updateWorkItemDates() | Save drag-to-reschedule date changes |
| updateWorkItemSortOrder() | Save vertical reorder position |
Delivery Hub Gantt Comparison — Generated 2026-03-26
Branch: feature/gb-gantt-comparison — Cloud Nimbus LLC