![Build status](https://travis-ci.org/tynopet/vue-gantt.svg?branch=master)

# vue-gantt

> Vue component for display Gantt Diagramm

## Build Setup

``` bash
npm install vue-gantt
```
[Live demo](https://tynopet.github.io/vue-gantt/)

Usage:

```
import Gantt from 'vue-gantt';

const vm = new Vue({
  ...
  tepmplate: '<gantt :data="data"></gantt>',
  components: { 'gantt': Gantt },
  ...
 });
```

Props structure:
```
{
  "rows": [],
  "legendHelp": 'Help'
}
```
Rows is a array of objects:
```
{
  "name": "task Name",
  "link": "#0",
  "values": []
}
```
Values is a array of objects:
```
{
  "desc": "Description",
  "from": start date in ms,
  "to": end date in ms,
  "color": "hex value"
}
```

Example:
```
{
  "rows": [
    {
      "name": "Step 1",
      "link": "#0",
      "values": [
        {
          "desc": "Step 1",
          "from": 1334837045000,
          "to": 1334837183000,
          "color": "#D0E4FD"
        }
      ]
    },
    {
      "name": "Step 2",
      "link": "#0",
      "values": [
        {
          "desc": "Step 2 is overdue",
          "from": 1334923578000,
          "to": 1334929209000,
          "color": "#F9C4E1"
        },
        {
          "desc": "Step 2",
          "from": 1334837183000,
          "to": 1334923578000,
          "color": "#D0E4FD"
        }
      ]
    }
  ],
  "legendHelp": "Help"
}
```