21 lines
1.1 KiB
HTML
21 lines
1.1 KiB
HTML
|
<svg [attr.viewBox]="viewBox" xmlns="http://www.w3.org/2000/svg"
|
||
|
|
style="border: solid thin black; margin: 1rem; padding: 5px">
|
||
|
|
@for (point of points; track $index; let index=$index) {
|
||
|
|
@let color = getRandomColor(index);
|
||
|
|
@for (line of lineCountNumber(point.count); track line) {
|
||
|
|
@let start = line % 2 === 1 ? point.start : point.end;
|
||
|
|
@let end = line % 2 === 1 ? point.end : point.start;
|
||
|
|
@let offset = (start > end ? 0.5 : -0.5) * strokeWidth;
|
||
|
|
|
||
|
|
<line [attr.x1]="start + offset" [attr.y1]="getLineNumber(index, line) * lineGap + 0.5 * strokeWidth"
|
||
|
|
[attr.x2]="end + offset" [attr.y2]="getLineNumber(index, line) * lineGap + 0.5 * strokeWidth"
|
||
|
|
[attr.stroke]="color" [attr.stroke-width]="strokeWidth" />
|
||
|
|
@if (index
|
||
|
|
< points.length - 1 || (index===points.length && line < point.count)) { <line [attr.x1]="end"
|
||
|
|
[attr.y1]="getLineNumber(index, line) * lineGap" [attr.x2]="end"
|
||
|
|
[attr.y2]="(getLineNumber(index, line)+1) * lineGap + strokeWidth" [attr.stroke]="color"
|
||
|
|
[attr.stroke-width]="strokeWidth" />
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</svg>
|