Vue 3 Gantt Component with Dedicated Resource View & Overload Detection (MIT)

[nelson820125]

Hi Vue community

I’d like to share a feature I recently introduced in my open-source project Jordium Gantt Vue3 — a dedicated Resource View mode for Vue 3 applications.

This component is fully MIT licensed and built natively with Vue 3 + TypeScript.

While most Gantt components are task-centric, this version supports switching between:

• Task View (traditional Gantt layout)
• Resource View (resource-oriented scheduling)

---

What Makes the Resource View Different?

Instead of rendering rows as tasks, rows represent resources.

Tasks are then rendered under each assigned resource based on allocation percentage.

Core Capabilities

1. Percentage-Based Allocation

Each task can assign multiple resources:

resources: [
  { resourceId: 'devA', percent: 50 },
  { resourceId: 'devB', percent: 30 }
]

This allows:

• Multi-resource assignment
• Partial workload distribution
• Flexible modeling of real-world scheduling

---

2. Resource Overload Detection

If overlapping tasks assigned to the same resource exceed 100% allocation:

• The UI visually highlights the overload
• Helps detect conflicts immediately
• Useful for internal scheduling dashboards

This is handled reactively without introducing a heavy scheduling engine.

---

3. Shared Rendering Core

Both Task View and Resource View share the same rendering pipeline.

The abstraction layer switches only at the row-model level:

• Task rows → grouped by task hierarchy
• Resource rows → grouped by resource

This avoids duplicating layout logic while keeping the architecture maintainable.

If anyone has suggestions on improving this row abstraction pattern in Vue 3, I’d love feedback.

---

Technical Highlights

• Vue 3 + Composition API
• Fully TypeScript
• Virtual scrolling for large datasets
• Drag / resize support
• Dependency lines & milestones
• Slot-based extensibility
• MIT licensed

---

Design Philosophy

The goal is not to build a monolithic enterprise scheduling engine.

Instead, the aim is:

• A modern Vue-native foundation
• Flexible data-driven rendering
• Resource-aware visualization without enforcing scheduling rules
• Suitable for ERP dashboards, admin tools, internal planning systems

---

Looking for Feedback On

• Resource View UX patterns
• Allocation modeling approaches
• Performance considerations for large resource sets
• API design for switching views
• Extensibility patterns

Appreciate any architectural or design feedback.