@using Opserver.Views.Shared.Guages
@model CircleModel
@{
    const double Full = 45 * 2 * Math.PI;
    string FullStr = Full.ToString(CultureInfo.InvariantCulture);
    var statuses = Model.Items.OrderBy(i => i.MonitorStatus).ToList().GroupBy(i => i.MonitorStatus).ToList();
    var worst = MonitorStatus.Good;
    var total = statuses.Sum(i => i.Count());
    double startDeg = 0;
}
<div class="circle-percent">
    <svg viewBox="0 0 100 100">
        <circle r="45" cx="50" cy="50" stroke-dasharray="@Full.ToString(CultureInfo.InvariantCulture)" stroke-dashoffset="0" />
        @foreach (var s in statuses)
        {
            if (s.Key > worst)
            {
                worst = s.Key;
            }
            var percent = s.Count()/(double) total;
            var deg = percent*360;
            <circle class="stroke-@s.Key.RawClass(true, true)@(s.Key != MonitorStatus.Good ? " filled" : null)" r="45" cx="50" cy="50"
                    stroke-dasharray="@FullStr" 
                    style="stroke-dashoffset: @((Full-percent*Full).ToString(CultureInfo.InvariantCulture)); transform: rotate(@(startDeg.ToString(CultureInfo.InvariantCulture))deg);" />
            startDeg += deg;
        }
        @if (!statuses.Any())
        {
            <circle class="stroke-@(MonitorStatus.Unknown.RawClass())" r="45" cx="50" cy="50" stroke-dasharray="@Full.ToString(CultureInfo.InvariantCulture)" stroke-dashoffset="0" />
        }
    </svg>
    <div class="circle-label"><span>@total.ToComma()</span><p>@total.Pluralize(Model.Label, false)</p></div>
</div>