blob: c813a3cf0d113139cc832b24bc2ec5e59ebc0bb5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<div style="overflow:auto; height:450px; padding: 0 1em; border: 1px solid #d9d9d9;">
<svg id="diagram" #diagram align="center" #svgContainer [attr.height.px]="(list.length * 45) + 50">
<svg width="100%" height="2000px" preserveAspectRatio="xMaxYMin meet" *ngFor="let item of list; let i = index" align="center">
<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]="40 * (i+1)" r="5" />
<line [attr.x1]="maxLengthLeft * 8" [attr.y1]="40 * (i+1)" [attr.x2]="maxWidth - maxLengthRight * 8 - 60" [attr.y2]="40 * (i+1)"
stroke-width="2" stroke="black" stroke-dasharray="5, 5" stroke="#8BC34A" fill="#8BC34A" class="line" />
<circle [attr.cx]="maxWidth - maxLengthRight * 8 - 60" [attr.cy]="40 * (i+1)" r="5" stroke="#8BC34A" fill="#8BC34A" />
<text text-anchor="start" [attr.x]="maxWidth - maxLengthRight * 8" [attr.y]="40 * (i+1)" font-size="12" dy="0">
<tspan [attr.x]="maxWidth - maxLengthRight * 11" dy=".6em" font-weight="bold">
{{item.name2}}
</tspan>
<tspan [attr.x]="maxWidth - maxLengthRight * 11" dy="1.2em">
{{item.p2}}
</tspan>
</text>
</svg>
</svg>
</div>
|