図とグラフ / 全体の内訳
Meter
未解決の部分も含め、割合を忠実に示します。
基本的な使い方
- 解決済み35文完全に特定できたSQL
- 未解決809文依存関係、解析限界、未調査の呼び出し
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">解決済み</span><span class="meter-legend-count">35文</span><span class="meter-legend-description">完全に特定できたSQL</span></li>
<li><span class="chip chip-ghost">未解決</span><span class="meter-legend-count">809文</span><span class="meter-legend-description">依存関係、解析限界、未調査の呼び出し</span></li>
</ul>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.meter / .meter-lg | 標準のバー、または高さのあるバー。 |
.meter-part | 割合を--dd-partで指定します。各部分の合計を100%にします。 |
.is-open | 斜線で未解決の部分を区別します。 |
.legend | 各部分の名前・件数・説明。 |
使い方の注意
すべての情報を凡例に含めます。クリックしやすくするために小さなカテゴリを拡大しないでください。印刷ではバーを隠し、凡例を残します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。