GanttChart Component Demo

Basic Gantt Chart

A fully-featured Gantt chart with all interactive capabilities enabled.

<template>
  <div class="gantt-demo-wrapper">
    <GanttChart v-model:viewMode="viewMode" />
  </div>
</template>

<script setup>
import { ref } from "vue";
// In your project: import GanttChart from "@/components/GanttChart/GanttChart.vue";

// View mode: 'daily', 'weekly', 'monthly' — use v-model:viewMode so changing the mode in the dropdown updates this
const viewMode = ref("weekly");
</script>

<style scoped>
.gantt-demo-wrapper {
  width: 100%;
  height: 600px;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}
</style>

Live Preview

Interactive Features

The Gantt chart includes several interactive features:

1. View Mode Selector

Click the view mode button (top-left) to switch between:

• Daily view
• Weekly view
• Monthly view

2. Zoom Controls

Use the zoom buttons (top-left area) to:

• Zoom in (+)
• Zoom out (-)
• Ctrl + Mouse Wheel for smooth zooming

3. Pan Mode

Activate pan mode to navigate:

• Click the hand icon button
• Hold Space bar and drag
• Drag to move the timeline

4. Date Navigation

Jump to specific dates:

• Click the arrow button to go to project start
• Use horizontal scroll for timeline navigation

5. Task Interactions

Interact with task bars:

• Click and drag task bars to reschedule
• Hover to see resize handles
• Drag handles to adjust task duration
• Right-click for context menu options

6. Date Picker

Precise date selection:

• Click on task start/end dates
• Select new dates from the picker
• Dates update in real-time

7. Milestone Management

Add and manage milestones:

• Click the + icon on task bars
• Position milestones on the timeline
• Drag to reposition milestones

8. Context Menu

Right-click on tasks for:

• Edit task details
• Add sub-items
• Delete tasks
• Duplicate tasks

Store Integration

The GanttChart component uses a Pinia store (ganttChart.store.js) for state management:

<script setup>
import { useGanttChart } from "@/stores/ganttChart.store";

const ganttChartStore = useGanttChart();

// Access store data
console.log(ganttChartStore.items); // Task items
console.log(ganttChartStore.phasesList); // Project phases
console.log(ganttChartStore.ganttBoundaryStartDate); // Timeline start
console.log(ganttChartStore.ganttBoundaryEndDate); // Timeline end

// Update task
ganttChartStore.updateItemTime(
  "task-id",
  "2024-01-15", // new start date
  "2024-01-20" // new end date
);

// Add new item
ganttChartStore.items.push({
  _id: "new-task",
  title: "New Task",
  startDate: new Date().toISOString(),
  dueDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000).toISOString(),
  phase: {
    _id: "phase-1",
    name: "Planning",
    colour: "#3098f2",
    textColor: "#ffffff",
  },
  ganttSeq: 0,
  predecessor: null,
  subItems: [],
  statusName: "Not Started",
});
</script>

Composables

The component uses several composables for modular functionality:

useGanttZoomPan

Handles zoom and pan interactions:

import { useGanttZoomPan } from "@/composables/useGanttZoomPan";

const {
  zoomFactor,
  isPanModeActive,
  onClickZoomControl,
  onClickPanViewButton,
  setupContainerInteractions,
  setupWindowListeners,
  cleanup,
} = useGanttZoomPan({
  containerRef: myContainerRef,
  onScroll: handleScroll,
  onZoomChange: handleZoomChange,
  shouldIgnoreKeyEvent: (e) => e.target.tagName === "INPUT",
});

useGanttDatePicker

Manages date picker functionality:

import { useGanttDatePicker } from "@/composables/useGanttDatePicker";

const {
  datePickerMenu,
  datePickerTrigger,
  openDatePicker,
  closeDatePicker,
  handleDateChange,
} = useGanttDatePicker();

useGanttContextMenu

Handles context menu operations:

import { useGanttContextMenu } from "@/composables/useGanttContextMenu";

const {
  contextMenuMenu,
  contextMenuItems,
  openContextMenu,
  closeContextMenu,
  onContextMenuSelect,
} = useGanttContextMenu();

useGanttLazyLoading

Manages lazy loading for large datasets:

import { useGanttLazyLoading } from "@/composables/useGanttLazyLoading";

const {
  isLoading,
  setupHorizontalObserver,
  observeDateIntervals,
  setInitialFetchedRange,
  cleanup,
} = useGanttLazyLoading({
  containerRef: myContainerRef,
  fetchItemsAPI: fetchTasksFromServer,
});

Keyboard Shortcuts

Shortcut	Action
Space + Drag	Pan mode (temporary)
Escape	Exit pan mode
Ctrl + Mouse Wheel	Zoom in/out
Click + Drag	Pan (when pan mode active)

Performance Tips

For optimal performance with large datasets:

1. Use Lazy Loading: Enable lazy loading for datasets with 100+ items
2. Limit Initial Range: Start with a focused date range (e.g., current month)
3. Batch Updates: Use store actions to update multiple items at once
4. Virtualization: The component automatically handles visible items
5. Debounce Interactions: Built-in debouncing for drag operations