54 lines
2.1 KiB
Handlebars
54 lines
2.1 KiB
Handlebars
<div
|
|
class="tomography-graph"
|
|
...attributes
|
|
>
|
|
<svg width={{this.size}} height={{this.size}}>
|
|
<g transform="translate({{div this.size 2}}, {{div this.size 2}})">
|
|
<g>
|
|
<circle class="background" r={{this.circle.[0]}} />
|
|
<circle class="axis" r={{this.circle.[1]}} />
|
|
<circle class="axis" r={{this.circle.[2]}} />
|
|
<circle class="axis" r={{this.circle.[3]}} />
|
|
<circle class="border" r={{this.circle.[4]}} />
|
|
</g>
|
|
<g class="lines">
|
|
{{#each this.distances as |item|}}
|
|
<rect
|
|
{{tooltip
|
|
(concat item.node ' - ' (format-number item.distance maximumFractionDigits=2) 'ms'
|
|
(if item.segment (concat '<br />(Segment: ' item.segment ')'))
|
|
)
|
|
options=(hash
|
|
followCursor=true
|
|
allowHTML=true
|
|
)
|
|
}}
|
|
transform="rotate({{item.rotate}})"
|
|
width={{item.y2}}
|
|
height="1"
|
|
/>
|
|
{{/each}}
|
|
</g>
|
|
<g class="labels">
|
|
<circle class="point" r="5" />
|
|
<g class="tick" transform="translate(0, {{this.labels.[0]}})">
|
|
<line x2="70" />
|
|
<text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[0] maximumFractionDigits=2}}ms</text>
|
|
</g>
|
|
<g class="tick" transform="translate(0, {{this.labels.[1]}})">
|
|
<line x2="70" />
|
|
<text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[1] maximumFractionDigits=2}}ms</text>
|
|
</g>
|
|
<g class="tick" transform="translate(0, {{this.labels.[2]}})">
|
|
<line x2="70" />
|
|
<text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[2] maximumFractionDigits=2}}ms</text>
|
|
</g>
|
|
<g class="tick" transform="translate(0, {{this.labels.[3]}})">
|
|
<line x2="70" />
|
|
<text x="75" y="0" dy=".32em">{{format-number this.milliseconds.[3] maximumFractionDigits=2}}ms</text>
|
|
</g>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|