diff options
author | Stone, Avi (as206k) <as206k@att.com> | 2018-06-03 13:12:12 +0300 |
---|---|---|
committer | Avi Stone <as206k@att.com> | 2018-06-03 11:56:49 +0000 |
commit | 548c5a220333c7cd666b861e737bff0b45461f18 (patch) | |
tree | 13c60b67291bd8bada498ad73c02a9e35afb5c9e /public/src/app/diagram | |
parent | 193095b01daf094c78f7fafacdf1c1cc31f290fe (diff) |
Update FE project
Update FE to latest version so that fe can run on docker
Change-Id: I9c5dee756b567dbe64fac6d3d6fd89362813bdcc
Issue-ID: SDC-1359
Signed-off-by: Stone, Avi (as206k) <as206k@att.com>
Diffstat (limited to 'public/src/app/diagram')
-rw-r--r-- | public/src/app/diagram/diagram.component.html | 46 | ||||
-rw-r--r-- | public/src/app/diagram/diagram.component.scss | 7 | ||||
-rw-r--r-- | public/src/app/diagram/diagram.component.spec.ts | 76 | ||||
-rw-r--r-- | public/src/app/diagram/diagram.component.ts | 49 |
4 files changed, 154 insertions, 24 deletions
diff --git a/public/src/app/diagram/diagram.component.html b/public/src/app/diagram/diagram.component.html index b3cb28a..c12860b 100644 --- a/public/src/app/diagram/diagram.component.html +++ b/public/src/app/diagram/diagram.component.html @@ -1,19 +1,35 @@ -<svg id="diagram" #diagram> - <svg viewBox="0 0 500 500" width="100%" height="500px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index"> +<div style="overflow:hidden; height:450px; padding: 0 1em; border: 1px solid #d9d9d9;"> + <svg id="diagram" #diagram align="center" #svgContainer> + <svg width="100%" height="550px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index" + style="padding: 1em 0;" align="center"> - <svg width="80px"> - <text x="0" [attr.y]="45 * (i+1)"> - {{item.source}} - </text> - </svg> + <svg [attr.width]="maxLengthLeft * 10"> + <text text-anchor="start" x="0" [attr.y]="40 * (i+1)" font-size="12" dy="0"> + <tspan x="0" dy=".6em" font-weight="bold"> + {{item.name1}} + </tspan> + <tspan x="0" dy="1.2em"> + {{item.p1}} + </tspan> + </text> + </svg> + + <circle stroke="#8BC34A" fill="#8BC34A" [attr.cx]="maxLengthLeft * 8" [attr.cy]="44 * (i+1)" r="5" /> + + <line [attr.x1]="maxLengthLeft * 8" [attr.y1]="44 * (i+1)" [attr.x2]="maxWidth - maxLengthRight * 8 - 30" [attr.y2]="44 * (i+1)" + stroke-width="2" stroke="black" stroke-dasharray="5, 5" stroke="#8BC34A" fill="#8BC34A" class="line" /> - <circle cx="100" [attr.cy]="44 * (i+1)" r="5" /> - <line x1="100" [attr.y1]="44 * (i+1)" [attr.x2]="maxWidth - 150" [attr.y2]="44 * (i+1)" stroke-width="2" stroke="black" stroke-dasharray="5, 5" - class="line" /> - <circle [attr.cx]="maxWidth - 150" [attr.cy]="44 * (i+1)" r="5" /> + <circle [attr.cx]="maxWidth - maxLengthRight * 8 - 30" [attr.cy]="44 * (i+1)" r="5" stroke="#8BC34A" fill="#8BC34A" /> - <text [attr.x]="maxWidth - 130" [attr.y]="45 * (i+1)"> - {{item.target}} - </text> + <text text-anchor="start" [attr.x]="maxWidth - maxLengthRight * 8" [attr.y]="40 * (i+1)" font-size="12" dy="0"> + <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy=".6em" font-weight="bold"> + {{item.name2}} + </tspan> + <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy="1.2em"> + {{item.p2}} + </tspan> + </text> + + </svg> </svg> -</svg> +</div> diff --git a/public/src/app/diagram/diagram.component.scss b/public/src/app/diagram/diagram.component.scss index 57437d8..1753ea2 100644 --- a/public/src/app/diagram/diagram.component.scss +++ b/public/src/app/diagram/diagram.component.scss @@ -1,11 +1,10 @@ -svg { - height: 400px; +#diagram { + height: 1000px; width: 100%; margin: auto; display: block; .line { - stroke-dasharray: 1400; - animation: draw 5s ease-in; + stroke-dasharray: 5; // animation: draw 1s ease-in; } } diff --git a/public/src/app/diagram/diagram.component.spec.ts b/public/src/app/diagram/diagram.component.spec.ts index 535f280..e3177cc 100644 --- a/public/src/app/diagram/diagram.component.spec.ts +++ b/public/src/app/diagram/diagram.component.spec.ts @@ -1,5 +1,4 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - +import { ComponentFixture, TestBed, async } from '@angular/core/testing'; import { DiagramComponent } from './diagram.component'; describe('DiagramComponent', () => { @@ -23,4 +22,77 @@ describe('DiagramComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + it('should check on change check maxLengthLeft', () => { + component.list = [ + { + name1: 'node1dsvsdsvd', + name2: 'node2', + p1: 'Stream_publish_0', + p2: 'capability' + }, + { + name1: 'node33', + name2: 'node2555', + p1: 'requirement2', + p2: 'capability11' + }, + { + name1: 'namber4', + name2: 'namber3', + p1: 'requirement3', + p2: 'capability4' + } + ]; + component.ngOnChanges(); + expect(component.maxLengthLeft).toBe(16); + }); + it('should check on change check maxLengthRight', () => { + component.list = [ + { + name1: 'node1dsvsdsvd', + name2: 'node2', + p1: 'Stream_publish_0', + p2: 'capability' + }, + { + name1: 'node33', + name2: 'node2555', + p1: 'requirement2', + p2: 'capability11' + }, + { + name1: 'namber4', + name2: 'namber3', + p1: 'requirement3', + p2: 'capability4' + } + ]; + component.ngOnChanges(); + expect(component.maxLengthRight).toBe(12); + }); + it('should check on change check maxWidth', () => { + component.list = [ + { + name1: 'node1dsvsdsvd', + name2: 'node2', + p1: 'Stream_publish_0', + p2: 'capability' + }, + { + name1: 'node33', + name2: 'node2555', + p1: 'requirement2', + p2: 'capability11' + }, + { + name1: 'namber4', + name2: 'namber3', + p1: 'requirement3', + p2: 'capability4' + } + ]; + component.ngOnChanges(); + expect(component.maxWidth).toBe(550); + }); }); diff --git a/public/src/app/diagram/diagram.component.ts b/public/src/app/diagram/diagram.component.ts index a0ae3a1..394b0ee 100644 --- a/public/src/app/diagram/diagram.component.ts +++ b/public/src/app/diagram/diagram.component.ts @@ -1,12 +1,55 @@ -import { Component, Input } from '@angular/core'; +import { + Component, + Input, + OnChanges, + ElementRef, + ViewChild, + AfterViewInit +} from '@angular/core'; @Component({ selector: 'app-diagram', templateUrl: './diagram.component.html', styleUrls: ['./diagram.component.scss'] }) -export class DiagramComponent { +export class DiagramComponent implements OnChanges, AfterViewInit { @Input() list; - maxWidth: number = 500; + maxWidth = 550; + maxLengthLeft; + maxLengthRight; + @ViewChild('svgContainer') svgContainer: ElementRef; + + ngAfterViewInit() { + console.log( + 'svg width:', + this.svgContainer.nativeElement.getBoundingClientRect().width + ); + this.maxWidth = this.svgContainer.nativeElement.getBoundingClientRect().width; + } + constructor() {} + + ngOnChanges() { + if (this.list) { + const name1MaxLength = this.list.reduce( + (r, s) => (r > s.name1.length ? r : s.name1.length), + 0 + ); + const p1MaxLength = this.list.reduce( + (r, s) => (r > s.p1.length ? r : s.p1.length), + 0 + ); + this.maxLengthLeft = Math.max(name1MaxLength, p1MaxLength); + + const name2MaxLength = this.list.reduce( + (r, s) => (r > s.name2.length ? r : s.name2.length), + 0 + ); + const p2MaxLength = this.list.reduce( + (r, s) => (r > s.p2.length ? r : s.p2.length), + 0 + ); + this.maxLengthRight = Math.max(name2MaxLength, p2MaxLength); + } + } } |