Need help with vue-pipeline?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jinfang134
155 Stars 21 Forks MIT License 101 Commits 1 Opened issues

Description

A pipeline component like jenkins blue ocean plugin.

Services available

!
?

Need anything else?

Contributors list

# 91,203
CSS
hexo-th...
Vue.js
HTML
16 commits

vue-pipeline

npm npm GitHub stars GitHub forks license Build Status

One easy-to-use component to show beautiful responsive timeline like jenkins blue ocean plugin.

中文

sample

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.