Vue Gantt Project

A high-performance Gantt chart component for Vue.js 2.x.

Features

• 📊 Interactive Gantt chart visualization
• ⚡ High performance with virtual scrolling
• 🔄 Task dependencies support
• 📱 Responsive design
• 🎨 Customizable styles
• 🌐 Internationalization support
• 📅 Multiple time scales (day/week/month)
• 🎯 Milestone support

Installation

npm install @rpui/vue-gantt-project

Usage

Global Registration

import Vue from "vue";
import GanttChart from "@rpui/vue-gantt-project";
import "@rpui/vue-gantt-project/dist/style.css";

Vue.use(GanttChart);

Local Registration

import { GanttChart } from "@rpui/vue-gantt-project";
import "@rpui/vue-gantt-project/dist/style.css";

export default {
  components: {
    GanttChart,
  },
};

Basic Example

<template>
  <gantt-chart
    :tasks="tasks"
    :options="options"
    @task-click="handleTaskClick"
    @dependency-click="handleDependencyClick"
  />
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        {
          id: 1,
          name: "Task 1",
          start: "2024-01-01",
          end: "2024-01-05",
          progress: 60,
          dependencies: ["2"],
        },
        {
          id: 2,
          name: "Task 2",
          start: "2024-01-06",
          end: "2024-01-10",
          progress: 30,
        },
      ],
      options: {
        viewMode: "day",
        dateFormat: "YYYY-MM-DD",
        locale: "en",
        editable: true,
      },
    };
  },
  methods: {
    handleTaskClick(task) {
      console.log("Task clicked:", task);
    },
    handleDependencyClick(dependency) {
      console.log("Dependency clicked:", dependency);
    },
  },
};
</script>

API Reference

Props

| Name | Type | Default | Description | | ------- | ------ | ------- | --------------------------- | | tasks | Array | [] | Array of task objects | | options | Object | {} | Chart configuration options |

Events

| Name | Parameters | Description | | ---------------- | ---------- | ----------------------------------------- | | task-click | task | Emitted when a task is clicked | | dependency-click | dependency | Emitted when a dependency line is clicked | | task-update | task | Emitted when a task is updated |

Task Object Structure

{
  id: 1,                    // Unique identifier
  name: 'Task name',        // Task name
  start: '2024-01-01',     // Start date
  end: '2024-01-05',       // End date
  progress: 60,            // Progress percentage (0-100)
  dependencies: ['2'],     // Array of dependent task IDs
  type: 'task',           // 'task' or 'milestone'
  style: {},              // Custom styles
  children: []            // Subtasks
}

License

MIT