open-consul/ui/packages/consul-ui/app/components/consul/tomography/graph/index.hbs
2020-11-30 17:02:54 +00:00

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>