pie_card.txt

Pie Card = 

// set the actual value
VAR _actual = 120

// set the target
VAR _max = 150

// determine the pct
VAR _pct = _actual/_max

// figure out the slice
VAR _slice = _pct * 314.159

// figure out the bar length
VAR _bar = 210 * _pct

// make the svg
VAR svg = 

"<svg height=""300"" width=""260"" viewBox=""0 0 260 300"">
  <g>
  <circle id=""Ellipse"" cx=""125"" cy=""100"" r=""85"" fill=""#FCFDFC"" stroke=""black"" stroke-width=""3""/>
  <circle r=""50"" cx=""125"" cy=""100"" fill=""transparent"" opacity=""0.5""
          stroke=""#FF7F09""
          stroke-width=""100""
          stroke-dasharray=""" & _slice &" 314.159""
       />
           <text fill=""black"" xml:space=""preserve"" style=""white-space: pre"" font-family=""Roboto"" font-size=""24"" font-weight=""600"" letter-spacing=""0em""><tspan x=""95"" y=""150"">" & FORMAT(_pct, "Percent") &"</tspan></text>
    </g>
    <g id=""Bar"">
<rect id=""max"" x=""20"" y=""225"" width=""210"" height=""40"" fill=""#D9D9D9""/>
<text id=""max_label"" fill=""black"" xml:space=""preserve"" style=""white-space: pre"" font-family=""Roboto"" font-size=""16"" font-weight=""600"" letter-spacing=""0em""><tspan x=""230"" y=""250"">" & _max & "</tspan></text>
<rect id=""actual"" x=""20"" y=""225"" width=""" & _bar &""" height=""40"" fill=""#FF7F09""/>
<text id=""actual_label"" fill=""black"" xml:space=""preserve"" style=""white-space: pre"" font-family=""Roboto"" font-size=""16"" font-weight=""600"" letter-spacing=""0em""><tspan x=""" & (_bar - 10)&""" y=""250"">" & _actual &"</tspan></text>
</g>
</svg>"

RETURN svg