SVAR Svelte Gantt

SVAR Svelte Gantt is a customizable, interactive Gantt chart component for visualizing project timelines.

Core Features:

• Interactive drag-and-drop scheduling.
• Task and dependency visualization.
• Configurable timeline with custom time scales (sprints, stages).
• Task progress visualization on taskbars.
• Virtualization for large datasets.
• Localization and light/dark skins.
• Support for hotkeys and zooming.

PRO Edition Features: If you require advanced project management logic, the PRO edition includes:

• Resource planning and workload visualization.
• Auto-scheduling (forward mode).
• Summary task automation and task grouping.
• Critical path and Slack visualization.
• Baselines, Rollups, and Split tasks.
• Export to PDF, PNG, Excel, and MS Project import/export.

Many advanced features require a PRO license. Key PRO features include:

• Resource Management: Visualizing/assigning resources, resource load charts, and grouping tasks by resources.
• Advanced Scheduling: Basic auto scheduling, critical path calculation, and handling of invalid links.
• Task Management: Split tasks, undo/redo, baselines, and summary task auto-progress.
• Exporting: Server-side export to PNG, PDF, XLSX, and MS Project.
• Advanced Views: WBS codes, grouping tasks by any field, and calculating/visualizing slack.

If you are contributing to the repository, you can run tests using the following commands:

1. Start the test examples.
2. Run end-to-end tests using Cypress in a separate console.

# Start test examples
yarn start:tests

# Run end-to-end tests (in a separate console)
yarn test:cypress

Choose the installation command based on your Svelte version:

• For Svelte 5 (Active Maintenance): Use the @svar-ui/svelte-gantt package.
• For Svelte 4: Use the wx-svelte-gantt@1.2.0 package.

# For Svelte 5
npm install @svar-ui/svelte-gantt

# For Svelte 4
npm install wx-svelte-gantt@1.2.0

The Gantt chart relies on two primary data entities: Tasks and Links.

Tasks (ITask)

Tasks represent the work items. They include:

• id: Unique identifier (TID).
• start / end / duration: Timing information.
• type: 'task' | 'summary' | 'milestone' | string.
• parent: The TID of the parent task (for hierarchy).
• progress: Completion percentage.
• segments: Array of Partial<ITask> for split tasks.

Links (ILink)

Links represent dependencies between tasks. They include:

• type: 's2s' | 's2e' | 'e2s' | 'e2e' (Start-to-Start, Start-to-End, etc.).
• source: The TID of the preceding task.
• target: The TID of the succeeding task.
• lag: Numerical offset between tasks.

You can enhance the Grid columns with the following capabilities:

• Sorting: The columns property is extended with a sort parameter to enable column-based sorting.
• Custom Content: You can use custom HTML within column cells (available since v2.1.0).
• Multi-sorting: Supported for table columns (available since v2.2.0).

The Gantt chart uses a scale system to define how time is represented visually. Scales are composed of multiple levels (e.g., years, months, days) that determine the granularity of the timeline.

Key concepts:

• Units: Supported units are year, quarter, month, week, day, and hour.
• Scale Configuration (IScaleConfig): Defines the unit, the step (increment), and an optional format (how the date is displayed) or css (styling for the scale cells).
• Zooming: Zooming adjusts the cellWidth and the active scales set. The IZoomConfig manages different zoom levels, each with its own minCellWidth and maxCellWidth constraints.

The Gantt component uses a specific pattern for event props based on the methods defined in TMethodsConfig. Hyphens in method names are removed to create camelCase event names prefixed with on.

Example mapping:

• Method: task-click $\rightarrow$ Event Prop: ontaskclick
• Method: resource-select $\rightarrow$ Event Prop: onresourceselect