vue-gantt
Vue component for display Gantt Diagramm
Last updated 10 months ago by tynopet .
MIT · Repository · Bugs · Original npm · Tarball
$ cnpm install vue-gantt 
SYNC missed versions from official npm registry.

Build status

vue-gantt

Vue component for display Gantt Diagramm

Build Setup

npm install vue-gantt

Live demo

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"
}
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 9
Last Day 1
Last Week 1
Last Month 8
Dependencies (3)
Dev Dependencies (65)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |