|
<div class="card is-centered pie-chart-card"> |
|
<span class="badge mantis">Good</span> |
|
<div class="pie-chart"> |
|
<div class="pie-chart-svg"> |
|
<svg width="100%" height="100%" viewBox="0 0 42 42" class="donut"> |
|
<circle class="donut-hole" cx="21" cy="21" r="15.91549430918954" fill="#fff"></circle> |
|
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#9e9e9e" stroke-width="2"></circle> |
|
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#18c96e" stroke-width="2" stroke-dasharray="60 40" stroke-dashoffset="0"></circle> |
|
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#b71c1c" stroke-width="2" stroke-dasharray="20 80" stroke-dashoffset="45"></circle> |
|
<circle class="donut-segment" cx="21" cy="21" r="15.91549430918954" fill="transparent" stroke="#9e9e9e" stroke-width="2" stroke-dasharray="25 75" stroke-dashoffset="25"></circle> |
|
</svg> |
|
<span class="pie-chart-number is-size-h2">64%</span> |
|
</div> |
|
<ul class="pie-chart-legend"> |
|
<li> |
|
<span class="label label-delivered">45% passed</span> |
|
</li> |
|
<li> |
|
<span class="label label-error">12% failed</span> |
|
</li> |
|
<li> |
|
<span class="label label-draft">6% not received</span> |
|
</li> |
|
</ul> |
|
</div> |
|
<span class="has-underline is-size-h2" data-tooltip="Tooltip down!" data-tooltip-pos="down">Overall Deliverability</span> |
|
</div> |