Seven-33 / gantt-chart

Simple, interactive and highly customizable Gantt chart component for Vue 3

Vue Ganttastic

Vue Ganttastic is a simple, interactive and highly customizable Gantt chart component for Vue 3.

Features

• Vue 3 support
• TypeScript support (ships with out of the box type declarations)
• Interactivity (dynamic, moveable, pushable bars with various event handlers)
• Reactivity / Responsiveness (bars will be properly repositioned on width resize)
• Customization options (chart and bar styling, changes in behavior, slots, event handlers etc.)
• Day.js support (uses Day.js under the hood for date-time manipulation)

Using Vue 2? Check out Vue-Ganttastic v1.

Quickstart

Install using

npm install @infectoone/vue-ganttastic

Then, initalize the plugin in the starting point of your app (most likely src/main.js):

import { createApp } from "vue"
import App from "./App.vue"
...
import ganttastic from '@infectoone/vue-ganttastic'
...
createApp(App)
  .use(ganttastic)
  .mount('#app')

This will globally register the components g-gantt-chart and g-gantt-row and you will be able to use those two components right away.

<template>
  <g-gantt-chart
    chart-start="2021-07-12 12:00"
    chart-end="2021-07-14 12:00"
    precision="hour"
    bar-start="myBeginDate"
    bar-end="myEndDate"
  >
    <g-gantt-row
      label="My row 1"
      :bars="row1BarList"
    />
    <g-gantt-row
      label="My row 2"
      :bars="row2BarList"
    />
  </g-gantt-chart>
</template>

<script setup>

import { ref } from "vue"

const row1BarList = ref([
  {
    myBeginDate: "2021-07-13 13:00",
    myEndDate: "2021-07-13 19:00",
    ganttBarConfig: {    // each bar must have a nested ganttBarConfig object ...
      id: "unique-id-1", // ... and a unique "id" property
      label: "Lorem ipsum dolor"
    }
  }
])
const row2BarList = ref([
  {
    myBeginDate: "2021-07-13 00:00",
    myEndDate: "2021-07-14 02:00",
    ganttBarConfig: {
      id: "another-unique-id-2",
      hasHandles: true,
      label: "Hey, look at me",
      style: {     // arbitrary CSS styling for your bar
        background: "#e09b69",
        borderRadius: "20px",
        color: "black"
      }
    }
  }
])
</script>

Contributing

Clone the project, make some changes, test your changes out, create a pull request with a short summary of what changes you made. Contributing is warmly welcomed!

To test your changes out before creating a pull request, create a build:

npm run build

To test out the build, you should create a tarball using:

npm pack

Then, place the tarball in some other test project and install the package from the tarball by using:

npm install <name_of_the_package>.tgz

Guide and Docs

For further guides and references, check out the official docs.

About

License MIT
Author: Robinsondev428

Screenshots