# @mvsde/vue-project-timeline

> Gantt chart-like project timeline for Vue.js

Latest version **0.5.0** (published 2019-04-01) · 0 weekly downloads

## Install

```sh
npm install @mvsde/vue-project-timeline
pnpm add @mvsde/vue-project-timeline
yarn add @mvsde/vue-project-timeline
bun add @mvsde/vue-project-timeline
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2019-04-01 |
| First published | 2019-02-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 352.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | mvsde |

## Links

- npm: https://www.npmjs.com/package/@mvsde/vue-project-timeline
- npm.io page: https://npm.io/package/@mvsde/vue-project-timeline

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.6
- [date-fns](https://npm.io/package/date-fns.md) ^2.0.0-alpha.27

## Recent versions

- 0.5.0 (latest) — 2019-04-01
- 0.4.1 — 2019-03-14
- 0.4.0 — 2019-03-14
- 0.3.2 — 2019-03-12
- 0.3.1 — 2019-03-11
- 0.3.0 — 2019-03-11
- 0.2.0 — 2019-03-11
- 0.1.2 — 2019-03-11
- 0.1.1 — 2019-03-11
- 0.1.0 — 2019-02-27

## README

# Vue.js Project Timeline

Gantt chart-like project timeline for Vue.js.

![](/docs/screenshot.png?raw=true)

1. [Installation](#installation)
2. [Basic usage](#basic-usage)
3. [API](#api)
   1. [Props](#props)
   2. [Projects Array](#projects-array)
      1. [Available fields](#available-fields)
      2. [Team members](#team-members)
      3. [Example](#example)
4. [Contributing](#contributing)


## Installation

```bash
npm install @mvsde/vue-project-timeline
```

## Basic usage

```vue
<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](/demo).


## 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](#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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation). |

### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). |
| `team`         | Array    |          | Team members of the project. See [Team members](#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:

```js
[
  {
    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

```bash
# Start development server
npm run serve

# Run JavaScript linter
npm run lint:js

# Run unit tests
npm run test:unit
```

---
_Source: https://npm.io/package/@mvsde/vue-project-timeline · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._