マークアップページの要素（値）

値によって見た目（色・記号・長さ）が決まる要素。

すべての要素に共通するルール（構造の表記、配置の属性、デザイントークン）は、要素一覧を参照してください。

Delta

増減を、向きの記号（↑↓→）と色で表示します。見た目は、KPI チャートの比較（前期間比）と同じです。前月比や前年比のように、符号で良し悪しが分かる値に使います。

構造

項目	内容
区分	inline
親	Text | Span
子	なし（/> で閉じる）
SqlView の子孫	可

使い方

• 大きさは親に従います。大きな値の横に小さく表示するときは、<Span size="…"> で包みます
• 良し悪しの境目は 0 で固定です。目標などと比べるときは、差（実績 − 目標）を SQL で求めて渡します

属性

属性	値	内容
value（必須）	数値 式：単一式	増減の値。正の値は ↑ と +、負の値は ↓、0 は → を薄い色で表示します。NULL や実行時エラーのときは ― と表示されます
format	d3-format の書式	値の書式（".1%"・"{,d}円" など）。未指定時は、閲覧者の言語設定の既定の書式です。書式で符号を指定しなくても、正の値には + が付きます
downIsGood	真偽値 式：単一式	減少を良い（success）、増加を悪い（danger）として表示します。解約率のような指標に使います

例

<Text size="sm">前月比 <Delta value="0.082" format=".1%" /></Text>
<Text size="sm">解約率 <Delta value="0.004" format=".1%" downIsGood /></Text>

Progress

値と上限の比を横棒で表示します。目標に対する進み具合と、表のセルの棒（データバー）に使います。

構造

項目	内容
区分	block
親	子に block を取る要素
子	なし（/> で閉じる）
SqlView の子孫	可

使い方

• 列の最大値は式では求められません。データバーにするときは、SQL で MAX(sales) OVER () AS max_sales のように列の最大値を足し、max に渡します
• 負の値の棒には対応していません。増減は <Delta> で表示します

属性

属性	値	内容
value（必須）	数値 式：単一式	値。0 より小さい値は 0、max より大きい値は満たした棒で表示します。NULL や実行時エラーのときは、空の棒と ― が表示されます
max（必須）	数値 式：単一式	棒を満たす値。目標（max="1000000"）や、列の最大値（max="{{ r.max_sales }}"）を書きます
format	d3-format の書式	値の書式（".1%"・"{,d}円" など）。未指定時は、閲覧者の言語設定の既定の書式です。fraction では value と max の両方、percent では比（未指定時は ".0%"）に適用します
variant	default / compact 既定：default	見た目。default は棒の右に文字を表示します。compact は文字に細い棒を添える形で、表のセルに使います
textType	fraction / value / percent / none	棒と一緒に表示する文字。fraction（15 / 50）、value（15）、percent（30%）、none（なし）。未指定時は、variant が default のときは fraction、compact のときは value です
color	default / muted / danger / warning / success 既定：default 式：単一式	棒の色。文字の色は変わりません

例

<Text>今月の売上目標</Text>
<Progress value="650000" max="1000000" format="{,d}円" />

<SqlView id="…" page="…" sql="…">
  <Table>
    <For as="r" limit="10">
      <TableRow>
        <TableCell><Text>{{ r.region }}</Text></TableCell>
        <TableCell>
          <Progress
            value="{{ r.sales }}"
            max="{{ r.max_sales }}"
            variant="compact"
            format=",d"
            color="{{ r.sales < r.target ? 'warning' : 'default' }}"
          />
        </TableCell>
      </TableRow>
    </For>
  </Table>
</SqlView>