vue-pipeline
One easy-to-use component to show beautiful responsive timeline like jenkins blue ocean plugin.
To get started, check out:
LICENSE
NOTE: Vue Pipeline is licensed under The MIT License. Completely free, you can arbitrarily use and modify this plugin. If this plugin is useful to you, you can Star this repo, your support is my biggest motive force, thanks.
Features
- Created Graph according your data dynamiclly
- Responsive web design
- svg component
- Fully configurable
- Via data attributes
- Show/Hide arrow
- 3 kinds of lines
- support graph and tree view
- Single node selection
- Different status for each node
- Different weight for each edge
- Different color for each node and edge
Install
npm install vue-pipeline
import Vue from 'vue'
import VuePipeline from 'vue-pipeline'
Vue.use(VuePipeline)
Props
Props of Pipeline
Name | Type | Default | Description |
---|---|---|---|
x | number | 50 | The x coordinate of the starting point of the graph |
y | number | 55 | The y coordinate of the starting point of the graph |
xstep | number | 120 | The position horizontally from a previous node. |
ystep | number | 50 | The position vertically from a previous node. |
data | Array | [] | data |
lineStyle | string | default | There are 3 types of line: ' default',' bessel','line' |
showArrow | boolean | false | whether show arrow for each line. |
Props for each node
Name | Type | Default | Description |
---|---|---|---|
name | string | null | The title of each node |
hint | string | null | The hint of each node |
status | string | null | Status of each node, There are 6 type of status: start ,succeed ,running ,failure ,paused ,unstable ,end |
next | Array | [] | The edge connected with this node |
next: index | number | null | The index of another node of this edge |
next: weight | number | null | The weight of this edge |
Sample Data:
let data = [
{
name: "Start",
hint: "1m23s",
status: "start",
next: [{ index: 1, weight: 2 }]
},
{
name: "Ammouncement Import",
hint: "1m23s",
status: "success",
next: [
{ index: 2, weight: 0 },
{ index: 4, weight: 2 }
]
},
{
name: "Employee ID to Onboarding",
hint: "2m23s",
status: "failure",
next: [{ index: 3, weight: 0 }]
},
{
name: "Personal Basic Info",
hint: "2m23s",
status: "paused",
next: [{ index: 4, weight: 0 }]
},
{ name: "End ", hint: "2m23s", status: "end", next: [] }
];
Events
Name | Params | Description |
---|---|---|
@click | node | Occurs when node is clicked |
Function
Name | params | Description |
---|---|---|
render | Node | render the whole graph again |
Contributing
If you find any bugs and/or want to contribute, feel free to create issues or submit pull requests.
Thanks!
Local Development
yarn install
// Compiles and hot-reloads for development
yarn run serve
publish a new version
npm version patch
npm version minor
npm version major
Lints and fixes files
yarn run lint