https://github.com/jinfang134/vue-pipeline
A pipeline component like jenkins blue ocean plugin.
https://github.com/jinfang134/vue-pipeline
Last synced: 4 months ago
JSON representation
A pipeline component like jenkins blue ocean plugin.
- Host: GitHub
- URL: https://github.com/jinfang134/vue-pipeline
- Owner: jinfang134
- License: mit
- Created: 2019-11-26T11:37:21.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T14:54:57.000Z (almost 3 years ago)
- Last Synced: 2024-11-14T19:11:35.870Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://jinfang134.github.io/vue-pipeline/
- Size: 5.47 MB
- Stars: 331
- Watchers: 11
- Forks: 71
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-pipeline - A pipeline component like jenkins blue ocean plugin. (UI Components [π](#readme))
- awesome-vue - vue-pipeline - A easy-to-use component to show beautiful responsive pipeline like jenkins blue ocean plugin. (Components & Libraries / UI Components)
README
# vue-pipeline
[](https://www.npmjs.com/package/vue-pipeline)
[](https://www.npmjs.com/package/vue-pipeline)
[](https://github.com/jinfang134/vue-pipeline/stargazers)
[](https://github.com/jinfang134/vue-pipeline/network)
[](https://github.com/jinfang134/vue-pipeline/blob/master/LICENSE)
[](https://travis-ci.com/jinfang134/vue-pipeline)
One easy-to-use component to show beautiful responsive timeline like jenkins blue ocean plugin.
[δΈζ](https://github.com/jinfang134/vue-pipeline/blob/master/docs/cn.md)
To get started, check out:
- [Demo](https://jinfang134.github.io/vue-pipeline/)
## LICENSE
**NOTE:** Vue Pipeline is licensed under [The MIT License](https://github.com/jinfang134/vue-pipeline/blob/master/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:**
```javascript
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
```