blob: 7585428686dce75e295e1321289715933a571b5b [file] [log] [blame]
Manor, Yanir (ym903w)22eda032018-09-20 14:18:38 +03001<div style="overflow:auto; height:450px; padding: 0 1em; border: 1px solid #d9d9d9;">
Stone, Avi (as206k)548c5a22018-06-03 13:12:12 +03002 <svg id="diagram" #diagram align="center" #svgContainer>
Manor, Yanir (ym903w)22eda032018-09-20 14:18:38 +03003 <svg width="100%" height="1300px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index" style="padding: 1em 0;"
4 align="center">
Stone, Avi (as206k)9b2ceb32018-04-12 16:36:39 +03005
Stone, Avi (as206k)548c5a22018-06-03 13:12:12 +03006 <svg [attr.width]="maxLengthLeft * 10">
7 <text text-anchor="start" x="0" [attr.y]="40 * (i+1)" font-size="12" dy="0">
8 <tspan x="0" dy=".6em" font-weight="bold">
9 {{item.name1}}
10 </tspan>
11 <tspan x="0" dy="1.2em">
12 {{item.p1}}
13 </tspan>
14 </text>
15 </svg>
16
17 <circle stroke="#8BC34A" fill="#8BC34A" [attr.cx]="maxLengthLeft * 8" [attr.cy]="44 * (i+1)" r="5" />
18
19 <line [attr.x1]="maxLengthLeft * 8" [attr.y1]="44 * (i+1)" [attr.x2]="maxWidth - maxLengthRight * 8 - 30" [attr.y2]="44 * (i+1)"
20 stroke-width="2" stroke="black" stroke-dasharray="5, 5" stroke="#8BC34A" fill="#8BC34A" class="line" />
21
22 <circle [attr.cx]="maxWidth - maxLengthRight * 8 - 30" [attr.cy]="44 * (i+1)" r="5" stroke="#8BC34A" fill="#8BC34A" />
23
24 <text text-anchor="start" [attr.x]="maxWidth - maxLengthRight * 8" [attr.y]="40 * (i+1)" font-size="12" dy="0">
25 <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy=".6em" font-weight="bold">
26 {{item.name2}}
27 </tspan>
28 <tspan [attr.x]="maxWidth - maxLengthRight * 8" dy="1.2em">
29 {{item.p2}}
30 </tspan>
Stone, Avi (as206k)9b2ceb32018-04-12 16:36:39 +030031 </text>
Stone, Avi (as206k)548c5a22018-06-03 13:12:12 +030032
Stone, Avi (as206k)9b2ceb32018-04-12 16:36:39 +030033 </svg>
Stone, Avi (as206k)9b2ceb32018-04-12 16:36:39 +030034 </svg>
Stone, Avi (as206k)548c5a22018-06-03 13:12:12 +030035</div>