2020-07-28 17:59:14 +00:00
|
|
|
<svg data-test-gauge-svg role="img" height={{this.height}} title="gauge chart">
|
2020-05-09 00:26:18 +00:00
|
|
|
<defs>
|
2020-07-09 20:19:07 +00:00
|
|
|
<linearGradient x1="0" x2="1" y1="0" y2="0" class="{{this.chartClass}}" id="{{this.fillId}}">
|
2020-05-09 00:26:18 +00:00
|
|
|
<stop class="start" offset="0%" />
|
|
|
|
|
<stop class="end" offset="100%" />
|
|
|
|
|
</linearGradient>
|
2020-07-09 20:19:07 +00:00
|
|
|
<clipPath id="{{this.maskId}}">
|
|
|
|
|
<path class="fill" d="{{this.valueArc}}" />
|
2020-05-09 00:26:18 +00:00
|
|
|
</clipPath>
|
|
|
|
|
</defs>
|
2020-07-09 20:19:07 +00:00
|
|
|
<g class="canvas {{this.chartClass}}">
|
|
|
|
|
<path class="background" d="{{this.backgroundArc}}" />
|
|
|
|
|
<rect class="area" x="0" y="0" width="100%" height="100%" fill="url(#{{this.fillId}})" clip-path="url(#{{this.maskId}})" />
|
2020-05-09 00:26:18 +00:00
|
|
|
</g>
|
|
|
|
|
</svg>
|
|
|
|
|
<div class="metric">
|
2020-07-09 20:19:07 +00:00
|
|
|
<h3 data-test-label class="label">{{this.label}}</h3>
|
|
|
|
|
<p data-test-percentage class="value">{{format-percentage this.value total=this.total complement=this.complement}}</p>
|
2020-05-09 00:26:18 +00:00
|
|
|
</div>
|
