Hyper Vue Gantt

A powerful and flexible Gantt chart component for Vue 3 applications. This component is an evolution of the vue-ganttastic package, completely redesigned with TypeScript and enhanced features for modern web applications.

📚 Documentation & Demo

• Complete Documentation - Comprehensive guides and API reference
• Live Demo - Interactive examples and features showcase
• Getting Started - Step-by-step tutorial

🚀 Quick Start

Installation

# npm
npm install hy-vue-gantt

# yarn
yarn add hy-vue-gantt

# pnpm
pnpm add hy-vue-gantt

Setup

// main.ts
import { createApp } from "vue"
import App from "./App.vue"
import hyvuegantt from "hy-vue-gantt"

const app = createApp(App)
app.use(hyvuegantt)
app.mount("#app")

Basic Usage

<template>
  <g-gantt-chart
    :chart-start="chartStart"
    :chart-end="chartEnd"
    :precision="precision"
    :bar-start="barStart"
    :bar-end="barEnd"
    color-scheme="vue"
    grid
    commands
  >
    <g-gantt-row
      v-for="row in rows"
      :key="row.id"
      :label="row.label"
      :bars="row.bars"
    />
  </g-gantt-chart>
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { ChartRow } from "hy-vue-gantt"

const chartStart = ref("2024-01-01")
const chartEnd = ref("2024-12-31")
const precision = ref("day")
const barStart = ref("start")
const barEnd = ref("end")

const rows = ref<ChartRow[]>([
  {
    id: 1,
    label: "Design Phase",
    bars: [
      {
        start: "2024-01-05",
        end: "2024-01-20",
        ganttBarConfig: {
          id: "1",
          label: "UI Design",
          style: { background: "#42b883" }
        }
      }
    ]
  }
])
</script>

✨ Key Features

🎯 Core Capabilities

• 📅 Advanced Time Management: Multi-precision support (hours, days, weeks, months) with auto-scaling
• 🔗 Task Dependencies: Visual connections with multiple styles (straight, bezier, squared) and animations
• 📊 Progress Tracking: Interactive progress bars with drag-to-update functionality
• 🏗️ Hierarchical Structure: Nested groups with expand/collapse functionality
• 📱 Touch & Mobile: Full touch support with responsive design

🎨 Rich Customization

• 🎨 11 Built-in Themes: From professional to dark mode
• 📋 Multi-Column Labels: Sortable columns with custom content
• 🏷️ Milestone Support: Visual milestones with constraints and tooltips
• 🎭 Custom Styling: Complete slot-based customization system
• 🌍 Internationalization: Holiday highlighting and locale support

💾 Data Management

• 📤 Export Options: PDF, PNG, SVG, Excel with customizable settings
• 📥 Import Support: CSV and Jira JSON formats
• ⏪ History Management: Built-in undo/redo functionality
• 🔄 Real-time Updates: Live data synchronization

⌨️ User Experience

• 🖱️ Drag & Drop: Intuitive bar and row manipulation
• ⌨️ Keyboard Navigation: Full accessibility support
• 🎯 Smart Interactions: Push-on-overlap and connection behaviors
• 🔍 Zoom Controls: Dynamic scaling with precision adjustment

🔧 Advanced Examples

Task Dependencies & Connections

const projectData = ref([
  {
    id: "design",
    label: "Design Phase",
    bars: [
      {
        start: "2024-01-01",
        end: "2024-01-15",
        ganttBarConfig: {
          id: "design-1",
          label: "UI Design",
          connections: [
            {
              targetId: "dev-1",
              type: "bezier",
              animated: true,
              relation: "FS", // Finish to Start
              label: "Prerequisite",
              color: "#42b883"
            }
          ]
        }
      }
    ]
  },
  {
    id: "development",
    label: "Development Phase",
    bars: [
      {
        start: "2024-01-16",
        end: "2024-02-15",
        ganttBarConfig: {
          id: "dev-1",
          label: "Frontend Development",
          progress: 75,
          progressResizable: true
        }
      }
    ]
  }
])

Milestones & Project Tracking

<template>
  <g-gantt-chart
    :milestones="milestones"
    :timeaxis-events="events"
    show-events-axis
  >
    <template #milestone="{ milestone }">
      <div class="custom-milestone">🎯 {{ milestone.name }}</div>
    </template>
  </g-gantt-chart>
</template>

<script setup lang="ts">
const milestones = ref([
  {
    id: "v1-release",
    date: "2024-03-15",
    name: "Version 1.0 Release",
    description: "Major product release",
    color: "#e74c3c"
  }
])

const events = ref([
  {
    id: "sprint-1",
    label: "Sprint Planning",
    startDate: "2024-01-01",
    endDate: "2024-01-03",
    backgroundColor: "#3498db"
  }
])
</script>

Multi-Column Layout & Sorting

<template>
  <g-gantt-chart
    label-column-title="Project Management"
    :multi-column-label="columns"
    sortable
    label-resizable
  >
    <template #label-column-priority="{ value, row }">
      <span :class="getPriorityClass(value)">
        {{ value }}
      </span>
    </template>
  </g-gantt-chart>
</template>

<script setup lang="ts">
const columns = ref([
  { field: "Label", sortable: true },
  { field: "StartDate", sortable: true },
  { field: "Duration", sortable: true },
  { field: "Progress", sortable: true },
  {
    field: "Priority",
    valueGetter: (row) => row.priority || "Normal",
    sortFn: (a, b) => prioritySort(a, b)
  }
])
</script>

Import/Export Integration

<template>
  <g-gantt-chart
    export-enabled
    :export-options="exportConfig"
    show-importer
    :importer-allowed-formats="['csv', 'jira']"
    @export-success="handleExportSuccess"
    @import-data="handleImportData"
  >
    <template #commands="{ export: triggerExport }">
      <button @click="triggerExport" class="export-btn">
        📊 Export Project
      </button>
    </template>
  </g-gantt-chart>
</template>

<script setup lang="ts">
const exportConfig = ref({
  format: "pdf",
  paperSize: "a4",
  orientation: "landscape",
  exportColumnLabel: true,
  scale: 1.5
})

const handleExportSuccess = (result) => {
  console.log("Export completed:", result.filename)
}

const handleImportData = (result) => {
  if (result.success) {
    // Update chart data with imported rows
    updateChartData(result.data.rows)
  }
}
</script>

🎨 Theming & Customization

Built-in Color Schemes

<template>
  <!-- Choose from 11 professional themes -->
  <g-gantt-chart color-scheme="vue" />
  <!-- Vue.js inspired -->
  <g-gantt-chart color-scheme="dark" />
  <!-- Dark mode -->
  <g-gantt-chart color-scheme="material-blue" />
  <!-- Material Design -->
</template>

Available themes: default, vue, dark, material-blue, creamy, crimson, flare, fuchsia, grove, sky, slumber

Custom Styling

const customTheme = {
  primary: "#1e40af",
  secondary: "#3b82f6",
  text: "#1f2937",
  background: "#ffffff",
  hoverHighlight: "rgba(59, 130, 246, 0.1)"
}

📱 Mobile & Touch Support

HyVue Gantt provides comprehensive mobile support:

• Touch Gestures: Drag, resize, and navigate with touch
• Responsive Layout: Adapts to different screen sizes
• Mobile Optimized: Touch-friendly controls and interactions
• Gesture Recognition: Pinch-to-zoom, swipe navigation

🔌 Event System

<template>
  <g-gantt-chart
    @click-bar="onBarClick"
    @dragend-bar="onBarMoved"
    @progress-change="onProgressUpdate"
    @connection-complete="onConnectionCreated"
    @row-drop="onRowReordered"
    @sort="onDataSorted"
    @label-edit="onLabelEdited"
  />
</template>

<script setup lang="ts">
const onBarClick = ({ bar, datetime }) => {
  console.log(`Clicked ${bar.ganttBarConfig.label} at ${datetime}`)
}

const onBarMoved = ({ bar, movedBars }) => {
  // Handle bar position changes
  updateBackendData(bar)
}

const onProgressUpdate = ({ bar }) => {
  // Sync progress changes
  saveProgress(bar.ganttBarConfig.id, bar.ganttBarConfig.progress)
}
</script>

🛠️ TypeScript Support

Full TypeScript integration with comprehensive type definitions:

import type {
  GanttBarObject,
  ChartRow,
  ConnectionType,
  GanttMilestone,
  TimeaxisEvent,
  ExportOptions,
  ImportResult
} from "hy-vue-gantt"

// Extend base types for your specific needs
interface ProjectTask extends GanttBarObject {
  assignee: string
  priority: "low" | "medium" | "high"
  tags: string[]
}

interface ProjectRow extends ChartRow {
  department: string
  budget: number
  bars: ProjectTask[]
}

🚀 Performance Features

• Virtual Scrolling: Handles large datasets efficiently
• Smart Rendering: Only renders visible elements
• Optimized Updates: Minimal re-renders with Vue 3 reactivity
• Memory Management: Automatic cleanup and garbage collection
• Lazy Loading: Progressive data loading for better performance

📋 Browser Support

• Chrome: 88+
• Firefox: 85+
• Safari: 14+
• Edge: 88+
• Mobile Browsers: Full support

🔧 Development & Contributing

Setup Development Environment

# Clone repository
git clone https://github.com/Xeyos88/HyVueGantt.git
cd HyVueGantt

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm run test

# Build library
npm run build

Contributing Guidelines

We welcome contributions! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

See our Contributing Guide for detailed information.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Based on vue-ganttastic - Special thanks to the original authors
• Inspired by modern project management tools
• Built with love for the Vue.js community

☕ Support the Project

If HyVue Gantt helps your project, consider supporting its development:

📸 Screenshots

Modern Interface

Dark Theme

Multi-Column Layout

Connection Management