feat(ledge-pipeline): add pipeline chart

re #58

projects/ledge-render/src/lib/chart/ledge-pipeline/ledge-pipeline.component.html

@@ -0,0 +1,3 @@
+<div class="pipeline" #pipeline>
+
+</div>

projects/ledge-render/src/lib/chart/ledge-pipeline/ledge-pipeline.component.scss

@@ -0,0 +1,7 @@
+.pipeline {
+  margin: 20px auto;
+
+  * {
+    box-sizing: border-box;
+  }
+}

projects/ledge-render/src/lib/chart/ledge-pipeline/ledge-pipeline.component.spec.ts

@@ -0,0 +1,68 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LedgePipelineComponent } from './ledge-pipeline.component';
+import { Stage } from './ledge-pipeline.model';
+
+describe('LedgePieComponent', () => {
+  let component: LedgePipelineComponent;
+  let fixture: ComponentFixture<LedgePipelineComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [LedgePipelineComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LedgePipelineComponent);
+    component = fixture.componentInstance;
+    component.data = [
+      {
+        label: 'Initialize',
+        jobs: [
+          { label: 'Initialize', state: 'success' }
+        ]
+      }, {
+        label: 'Build',
+        jobs: [
+          { label: 'Pull code', state: 'success' },
+          { label: 'Test', state: 'error' },
+          { label: 'Build', state: 'current' }
+        ]
+      }, {
+        label: 'Deploy',
+        jobs: [
+          { label: 'QA', state: 'pending' },
+          { label: 'UAT', state: 'processing' },
+          { label: 'STAGING', state: 'processing' },
+          { label: 'PROD', state: 'untouched' }
+        ]
+      }, {
+        label: 'Finish',
+        jobs: [
+          { label: 'Finish', state: 'untouched' }
+        ]
+      }
+    ] as Stage[];
+    component.config = {
+      connectionStrokeWidth: 4,
+      stateStrokeWidth: 4,
+      stateRadius: 16,
+      stageSpace: 60,
+      stageLabelHeight: 30,
+      stageLabelSize: '16px',
+      jobHeight: 60,
+      jobLabelSize: '12px',
+      startNodeRadius: 12,
+      startNodeSpace: 40,
+      endNodeRadius: 12,
+      endNodeSpace: 40
+    };
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});