54 lines
1.4 KiB
HTML
54 lines
1.4 KiB
HTML
@if (points.length === 0) {
|
|
<div class="empty">No evaluation data yet.</div>
|
|
} @else {
|
|
<div class="timeline-wrap" role="img" aria-label="Evaluation timeline">
|
|
<svg
|
|
class="timeline-svg"
|
|
[attr.viewBox]="'0 0 ' + svgWidth + ' ' + svgHeight"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<!-- Midline (balanced) -->
|
|
<line
|
|
x1="0"
|
|
[attr.y1]="svgHeight / 2"
|
|
[attr.x2]="svgWidth"
|
|
[attr.y2]="svgHeight / 2"
|
|
class="midline"
|
|
/>
|
|
|
|
<!-- White-advantage fill (clip above midline) -->
|
|
<defs>
|
|
<clipPath id="clip-white">
|
|
<rect x="0" y="0" [attr.width]="svgWidth" [attr.height]="svgHeight / 2" />
|
|
</clipPath>
|
|
<clipPath id="clip-black">
|
|
<rect
|
|
x="0"
|
|
[attr.y]="svgHeight / 2"
|
|
[attr.width]="svgWidth"
|
|
[attr.height]="svgHeight / 2"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<polygon [attr.points]="polylineWhite" class="area-white" clip-path="url(#clip-white)" />
|
|
|
|
<polygon [attr.points]="polylineBlack" class="area-black" clip-path="url(#clip-black)" />
|
|
|
|
<!-- Eval line -->
|
|
<polyline [attr.points]="evalPolyline" class="eval-line" />
|
|
|
|
<!-- Active ply marker -->
|
|
@if (activeX() !== null) {
|
|
<line
|
|
[attr.x1]="activeX()"
|
|
y1="0"
|
|
[attr.x2]="activeX()"
|
|
[attr.y2]="svgHeight"
|
|
class="active-marker"
|
|
/>
|
|
}
|
|
</svg>
|
|
</div>
|
|
}
|