Vue.js Project Timeline

Gantt chart-like project timeline for Vue.js.

1. Installation
2. Basic usage
3. API
   1. Props
   2. Projects Array
      1. Available fields
      2. Team members
      3. Example
4. Contributing

Installation

npm install @mvsde/vue-project-timeline

Basic usage

<template>
  <project-timeline
    :start-month="startMonth"
    :end-month="endMonth"
    :projects="projects"
  />
</template>

<script>
import ProjectTimeline from '@mvsde/vue-project-timeline'

export default {
  components: {
    ProjectTimeline
  },

  data () {
    return {
      startMonth: new Date('2018-11'),
      endMonth: new Date('2019-02'),
      projects: [
        {
          name: 'Visualize vertical interfaces',
          start: new Date('2018-11-20'),
          end: new Date('2019-01-28')
        }
      ]
    }
  }
}
</script>

<style src="@mvsde/vue-project-timeline/dist/ProjectTimeline.css"></style>

More advanced demo code can be found within the demo project.

API

Props

| Name | Type | Required | Default | Description | | ----------------- | ------- |:--------:| ------- | ----------- | | startMonth | Date | ☑ | | First month displayed in the timeline. The first day of the month for the given date will be automatically calculated. | | endMonth | Date | ☑ | | Last month displayed in the timeline. The last day of the month for the given date will be calculated. | | projects | Array | ☑ | | List of projects. See Projects array for a detailed format description. | | visibleMonths | Integer | | 12 | Number of visible months. A scrollbar will be displayed if the timeline has more months than this value. | | autoScrollToday | Boolean | | false | Automatically scroll “today” into view. | | locale | String | | en-US | Set the localization with a locale string. |

Projects array

Available fields

| Name | Type | Required | Description | | -------------- | -------- |:--------:| ----------- | | name | String | ☑ | Name of the project. | | start | Date | ☑ | Start date of the project. | | end | Date | ☑ | End date of the project. | | plannedStart | Date | | Planned start date of the project. Displayed as a thin line below the project. | | plannedEnd | Date | | Planned end date of the project. Displayed as a thin line below the project. | | color | String | | Set a specific color for a project by using a valid CSS color. | | team | Array | | Team members of the project. See Team members for a detailed format description. | | onClick | Function | | Click handler for the project name. The project name will be a button if a function is provided. |

Team members

| Name | Type | Required | Description | | -------------- | -------- |:--------:| -------------------------- | | name | String | ☑ | Name of the team member. | | avatar | String | ☑ | Avatar of the team member. |

Example

The following is an example with all fields populated:

[
  {
    name: 'Visualize vertical interfaces',
    start: new Date('2018-11-20'),
    end: new Date('2019-01-28'),
    plannedStart: new Date('2018-11-10'),
    plannedEnd: new Date('2019-01-13'),
    team: [
      {
        name: 'Nellie Bender',
        avatar: 'https://source.unsplash.com/3402kvtHhOo/32x32'
      },
      {
        name: 'Alex Wilkerson',
        avatar: 'https://source.unsplash.com/das6NrjLoM0/32x32'
      }
    ],
    onClick () {
      console.log('Hello World!')
    }
  }
]

Contributing

# Start development server
npm run serve

# Run JavaScript linter
npm run lint:js

# Run unit tests
npm run test:unit