# pipeline-graph-webcomponent

> Webcomponent pipeline-graph following open-wc recommendations

Latest version **0.1.0** (published 2021-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install pipeline-graph-webcomponent
pnpm add pipeline-graph-webcomponent
yarn add pipeline-graph-webcomponent
bun add pipeline-graph-webcomponent
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2021-01-14 |
| First published | 2021-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 3.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Taeuk Kang |
| Maintainers | taeuk-gang |

## Links

- npm: https://www.npmjs.com/package/pipeline-graph-webcomponent
- Repository: https://github.com/taeuk-gang/pipeline-graph-webcomponent
- Issues: https://github.com/taeuk-gang/pipeline-graph-webcomponent/issues
- npm.io page: https://npm.io/package/pipeline-graph-webcomponent

## Dependencies (3)

- [lit-html](https://npm.io/package/lit-html.md) ^1.1.2
- [lit-element](https://npm.io/package/lit-element.md) ^2.2.1
- [@open-wc/lit-helpers](https://npm.io/package/@open-wc/lit-helpers.md) ^0.3.12

## Recent versions

- 0.1.0 (latest) — 2021-01-14

## README

# pipeline-graph-webcomponent

> [pipeline-graph](https://github.com/jenkinsci/ux-widget-framework/tree/master/packages/pipeline-graph) for web-component without framework.

![image-20210114142514993](https://i.loli.net/2021/01/14/3f62nTbYP8J1iQS.png)

## Installation

```bash
npm i pipeline-graph-webcomponent
```

## Local Demo

```bash
git clone https://github.com/taeuk-gang/pipeline-graph-webcomponent.git

npm i

npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`

## Usage

```typescript
import 'pipeline-graph-webcomponent';

const stage = [
  {
    "name": "Stage-1",
    "children": [],
    "state": "SUCCESS",
    "completePercent": 100,
    "id": 1,
    "type": "STAGE"
  }
];
const layout = {
  nodeSpacingH: 120,
  parallelSpacingH: 120,
  nodeSpacingV: 70,
  nodeRadius: 12,
  terminalRadius: 7,
  curveRadius: 12,
  connectorStrokeWidth: 2,
  labelOffsetV: 20,
  smallLabelOffsetV: 15,
  ypStart: 55,
};
const selectedNode = {
  "name": "Stage-1",
  "children": [],
  "state": "SUCCESS",
  "completePercent": 100,
  "id": 1,
  "type": "STAGE"
}
```

```html
<pipeline-graph
  .stage=${stage}
  .layout=${layout}
  .selectNode=${selectNode}
  @click-node=${(event) => alert(event.detail.name)}
></pipeline-graph>
```

## Storybook

[view storybook](https://taeuk-gang.github.io/pipeline-graph-webcomponent/?path=/story/pipeline--example)

---
_Source: https://npm.io/package/pipeline-graph-webcomponent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._