pipeline-graph-webcomponent

Webcomponent pipeline-graph following open-wc recommendations

Usage no npm install needed!

<script type="module">
  import pipelineGraphWebcomponent from 'https://cdn.skypack.dev/pipeline-graph-webcomponent';
</script>

README

pipeline-graph-webcomponent

pipeline-graph for web-component without framework.

image-20210114142514993

Installation

npm i pipeline-graph-webcomponent

Local Demo

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

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"
}

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

Storybook

view storybook