Figures & graphs / Parts of a whole
Meter
Show proportions faithfully, including the part that remains unresolved.
Basic usage
- Resolved35 statementsFully determined SQL
- Unresolved809 statementsDependencies, analysis limits, or unexamined calls
HTML
<div class="meter meter-lg" aria-hidden="true">
<span class="meter-part tone-ok" style="--dd-part:4.15%"></span>
<span class="meter-part is-open" style="--dd-part:95.85%"></span>
</div>
<ul class="legend">
<li><span class="chip tone-ok">Resolved</span><span class="meter-legend-count">35 statements</span><span class="meter-legend-description">Fully determined SQL</span></li>
<li><span class="chip chip-ghost">Unresolved</span><span class="meter-legend-count">809 statements</span><span class="meter-legend-description">Dependencies, analysis limits, or unexamined calls</span></li>
</ul>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.meter / .meter-lg | The standard bar, or a taller version. |
.meter-part | Set the percentage with --dd-part. Parts should total 100%. |
.is-open | Hatching distinguishes an unresolved part. |
.legend | The name, count, and explanation of every part. |
Usage notes
The legend must contain all the information. Do not enlarge small categories to make them clickable. Print hides the bar and retains the legend.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.