hy-vue-gantt
Version:
Evolution of vue-ganttastic package
478 lines (384 loc) • 11.9 kB
Markdown
# 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.
<img src="https://github.com/Xeyos88/HyVueGantt/blob/main/docs/.vitepress/public/logo.png?raw=true" alt="logo HyVueGantt" width="300" height="300">
[](https://badge.fury.io/js/hy-vue-gantt)
[](https://opensource.org/licenses/MIT)
[](https://vuejs.org/)
[](https://www.typescriptlang.org/)
## 📚 Documentation & Demo
- **[Complete Documentation](https://xeyos88.github.io/HyVueGantt/)** - Comprehensive guides and API reference
- **[Live Demo](https://xeyos88.github.io/HyVueGantt/live/advanced)** - Interactive examples and features showcase
- **[Getting Started](https://xeyos88.github.io/HyVueGantt/guide/quick-start)** - Step-by-step tutorial
## 🚀 Quick Start
### Installation
```bash
# npm
npm install hy-vue-gantt
# yarn
yarn add hy-vue-gantt
# pnpm
pnpm add hy-vue-gantt
```
### Setup
```typescript
// 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
```vue
<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
```typescript
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
```vue
<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
```vue
<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
```vue
<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
```vue
<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
```typescript
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
```vue
<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:
```typescript
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
```bash
# 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](CONTRIBUTING.md) for detailed information.
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Based on [vue-ganttastic](https://github.com/zunnzunn/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:
[](https://www.paypal.com/paypalme/xeyos88)
## 📸 Screenshots
### Modern Interface
<img src="https://github.com/Xeyos88/HyVueGantt/blob/main/docs/.vitepress/public/Gantt1.PNG?raw=true" alt="Modern Gantt Interface" width="800" height="200">
### Dark Theme
<img src="https://github.com/Xeyos88/HyVueGantt/blob/main/docs/.vitepress/public/Gantt2.PNG?raw=true" alt="Dark Theme Gantt" width="800" height="200">
### Multi-Column Layout
<img src="https://github.com/Xeyos88/HyVueGantt/blob/main/docs/.vitepress/public/Gantt3.PNG?raw=true" alt="Multi-Column Gantt" width="800" height="200">
### Connection Management
<img src="https://github.com/Xeyos88/HyVueGantt/blob/main/docs/.vitepress/public/Gantt4.png?raw=true" alt="Gantt Connections" width="800" height="200">
---