summaryrefslogtreecommitdiffstats
path: root/public/src/app/diagram/diagram.component.html
blob: b3cb28a62d77ab4867d453d7a4ff20ef87d4ef63 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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">

    <svg width="80px">
      <text x="0" [attr.y]="45 * (i+1)">
        {{item.source}}
      </text>
    </svg>

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

    <text [attr.x]="maxWidth - 130" [attr.y]="45 * (i+1)">
      {{item.target}}
    </text>
  </svg>
</svg>