gauge-chart.hbs

<svg data-test-gauge-svg role="img" height={{height}}>
  <defs>
    <linearGradient x1="0" x2="1" y1="0" y2="0" class="{{chartClass}}" id="{{fillId}}">
      <stop class="start" offset="0%" />
      <stop class="end" offset="100%" />
    </linearGradient>
    <clipPath id="{{maskId}}">
      <path class="fill" d="{{valueArc}}" />
    </clipPath>
  </defs>
  <g class="canvas {{chartClass}}">
    <path class="background" d="{{backgroundArc}}" />
    <rect class="area" x="0" y="0" width="100%" height="100%" fill="url(#{{fillId}})" clip-path="url(#{{maskId}})" />
  </g>
</svg>
<div class="metric">
  <h3 data-test-label class="label">{{label}}</h3>
  <p data-test-percentage class="value">{{format-percentage value total=total complement=complement}}</p>
</div>