mailinapp
Documentation menu

ゲージチャートブロック

自分で定義した良好・警告・重大のしきい値帯に対して、単一の指標をプロットするブロックです — 行データ形式のチャートではなく、針のついたダイヤル形式です。トレンドや比較ではなく、稼働率・エラー率・NPS・レイテンシーなど、「この数値は今、問題ないか」というヘルスステータス的な読み方をするために存在します。

仕組み

画像には、2つのしきい値のブレークポイントによって良好・警告・重大の3つの色分けされた帯に分かれた半円の円弧が描かれ、入力した値を指す針が添えられます。このブロック群の他のすべてのチャートと異なり、ゲージには行のリストが一切ありません。その「データ」全体は、5つのスカラー値だけです: 値、最小値/最大値のスケール、そして2つのしきい値のブレークポイントです — これは、カテゴリー・系列・ポイントの表というよりも、KPIスコアカードの手入力された単一の値に近い形です。

だからこそ、ゲージはこのブロック群全体の中で、下にデータ表を持たない唯一のチャートブロックです。データ表は、画像がピクセルの中に閉じ込めてしまう数値を運ぶために存在しますが、ゲージの値とステータスは、そもそも閉じ込められることがありません。これらは、画像のすぐ横に本物のHTMLテキストとしてレンダリングされます: 太字の値の行(数値・金額・パーセントのいずれかの形式)に続いて、色付きのステータスの単語(「良好」「警告」「重大」)が表示されます。画像の下にある小さな控えめな行には、値・ステータス・スケールの範囲が繰り返し示されます。このテキストは無条件に表示されます — 画像が読み込まれるかどうかにかかわらずレンダリングされ、このブロック群の他のすべてのチャートが<table>で果たしている、譲れないアクセシビリティの契約と同じものを満たしています。

しきい値の帯は、常に予約されたステータスパレット(緑/アンバー/赤)が使われ、自分で上書きできるフィールドはありません — これは、ウォーターフォールブロックの増加・減少の色が従っているのと同じ、「赤は常に悪いニュースを意味する」という信頼のルールです。goodMaxとwarningMaxは、min〜maxのスケールを、良好・警告・(warningMaxを超えたら)重大という順序で、3つの昇順の帯に分割します。これは、CPU負荷やエラー率のように、低いほど安全で高いほどリスクという、典型的な「スピードメーター」的な読み方です。NPSや稼働率のスコアのように、高いほど実際には良いという指標では、別の「方向」フラグを必要とするのではなく、単にgoodMaxをmaxの近くに設定するなど、しきい値を逆に入力するだけで済みます。

設定可能なフィールド:

  • ラベル — 値の上に表示される、任意の見出しテキストです。
  • 値 — 指標そのものを、テキストとして入力します(そのためマージタグを含めることもできます)。
  • 形式 — 数値・金額・パーセントのいずれかで、値がテキストとしてどのように表示されるかを制御します。
  • スケールの最小値/スケールの最大値 — ダイヤルのmin/maxの範囲です。
  • 良好ゾーンの上限 — goodMaxのブレークポイントです。
  • 警告ゾーンの上限(それを超えると重大) — warningMaxのブレークポイントです。これを超えると、重大の帯として表示されます。
  • カードの背景色、パディング、境界線、角の丸み。
  • 値の色・サイズとラベルの色・サイズ — 大きな値の行と見出しラベルのテキストスタイルです。

値が空欄である、または数値として解決できない(たとえば未解決のマージタグである)場合、ブロックは円弧の描画をスキップします。ラベルとカードの枠だけをレンダリングし、代わりに「このゲージを表示するには、数値を入力してください」という簡単な通知を表示します。min >= maxとなっている範囲や、順序が入れ替わったしきい値は、編集の途中で壊れたダイヤルが表示されるのではなく、自動的に補正されます。

例

SLAや稼働率のスナップショット — 「今月の稼働率99.94%」、99.9%以上が良好、99.5%以上が警告、それより低いと重大 — をステータスページのダイジェストに入れることで、購読者はダッシュボードへのリンクを開かなくても、ひと目でヘルスステータスを把握できます。サポートチームは、目標のSLAに対する平均応答時間をグラフ化できます(2時間未満が良好、6時間未満が警告、それを超えると重大)。顧客向けのNPSや満足度スコアのレポートでは、四半期ごとの関係性メールの見出しとなるビジュアルとしてゲージを使い、高いスコアがリスクではなく良好として読み取れるよう、しきい値を設定できます。

静的フォールバックの見え方

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Uptime this month</p>
  <p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
    99.94%  <span style="font-size:14px;font-weight:600;color:#16a34a">Good</span>
  </p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="320" height="200"
       alt="Gauge: 99.94 of 0–100 (Good)" />
  <p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Uptime this month — 99.94% (Good) — scale 0–100</p>
</div>

太字の値の行と、画像の下にある控えめなまとめの行は、どちらも本物のHTMLテキストです。値とステータスは、円弧の画像がレンダリングされることに一切依存しません — これが、ゲージがこのブロック群の中でデータ表を持たない唯一のブロックである理由です。

関連ページ