Codatum CLI

Appearance

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

要素どうしの関係を図で表示する要素。位置や線は自動で決まるため、コードには入れ子と順番だけを書きます。

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

Tree ​

指標を分解した木（KPI ツリー）を描画します。親と子のノードを線で結びます。

構造 ​

項目内容
区分block
親子に block を取る要素
子TreeNode
SqlView の子孫可

使い方 ​

  • ノードはすべて同じ幅で、木の幅を等分します。最小の幅（<TreeNode> の minWidth）に収まらなければ、図の中で横にスクロールします
    • ノードを小さくしたいときは、<Columns> で木ごと狭めます
  • モバイル表示では、direction によらず、子を親の下にインデントして並べます

属性 ​

属性値内容
directionright / down
既定：right		木を伸ばす向き
gapnone / xs / sm / md / lg / xl
既定：md		兄弟のノードの間隔。親と子の段のあいだは、少なくとも 24px + gap × 2 空けます
heightpx（例：320px）高さ

例 ​

html
<Tree>
  <TreeNode>
    <Card title="売上"><Text size="xl" weight="bold">1.2億</Text></Card>
    <TreeNode>
      <Card title="客数"><Text size="xl" weight="bold">3.4万</Text></Card>
    </TreeNode>
    <TreeNode>
      <TreeEdge>×</TreeEdge>
      <Card title="客単価"><Text size="xl" weight="bold">3,500円</Text></Card>
    </TreeNode>
  </TreeNode>
</Tree>

TreeNode ​

<Tree> の 1 つのノードです。先頭に <TreeEdge> を書くと、親からの線にラベルを付けられます。根のノードには、<TreeEdge> を書けません。続く要素がノードの本体で、その後の <TreeNode> が子のノードになります。

構造 ​

項目内容
区分―
親Tree | TreeNode
子TreeEdge? block TreeNode*
SqlView の子孫可

使い方 ​

  • 本体に複数の要素を置くときは、<Card> や <Rows> で包みます

属性 ​

属性値内容
minWidthpx（例：320px）
既定：160px		ノードの最小の幅。<Tree> の direction が right のときは、段の位置をそろえるため、同じ深さのノードには、そのうち最も大きい値が使われます。モバイル表示では適用されません

TreeEdge ​

親のノードからの線に付けるラベルです。演算子（×・+）や区分（新規・既存）など、親と子の関係を示します。

構造 ​

項目内容
区分―
親TreeNode
子(text | expr)*
SqlView の子孫可

使い方 ​

  • 文字数に上限はありません
    • <Tree> の direction が right のときは、いちばん長いラベルに合わせて線を伸ばし、8 文字を超える分は折り返します
    • <Tree> の direction が down のときは、1 行のまま、ノードの幅を超える分を省略します
    • モバイル表示では、どのラベルも 3 文字以下なら線に重ね、それより長いラベルがあれば、すべてのラベルを子のノードの上に表示します

属性 ​

属性はありません。

Flow ​

段階を矢印でつなぎます。ファネルや、業務・データの流れを示すときに使います。

構造 ​

項目内容
区分block
親子に block を取る要素
子FlowStep+
SqlView の子孫可

使い方 ​

  • direction が right のときは各段階で幅を等分し、down のときは幅いっぱいに広げます
    • right のとき、最小の幅（<FlowStep> の minWidth）に収まらなければ、図の中で横にスクロールします
    • 段階を小さくしたいときは、<Columns> で図ごと狭めます
  • モバイル表示では、right でも縦に並びます

属性 ​

属性値内容
directiondown / right
既定：down		段階を並べる向き
gapnone / xs / sm / md / lg / xl
既定：xs		段階と矢印のあいだの間隔
heightpx（例：320px）高さ

例 ​

html
<Flow direction="right">
  <FlowStep><Card title="訪問"><Text>12,000</Text></Card></FlowStep>
  <FlowStep>
    <FlowEdge>8.0%</FlowEdge>
    <Card title="登録"><Text>960</Text></Card>
  </FlowStep>
  <FlowStep>
    <FlowEdge>25%</FlowEdge>
    <Card title="契約"><Text>240</Text></Card>
  </FlowStep>
</Flow>

FlowStep ​

<Flow> の 1 つの段階です。先頭に <FlowEdge> を書くと、前の段階からの矢印にラベルを付けられます。最初の段階には、<FlowEdge> を書けません。

構造 ​

項目内容
区分―
親Flow
子FlowEdge? block*
SqlView の子孫可

属性 ​

属性値内容
gapnone / xs / sm / md / lg / xl
既定：md		子の間隔
minWidthpx（例：320px）
既定：160px		段階の最小の幅。<Flow> の direction が right のときだけ適用されます

FlowEdge ​

前の段階からの矢印に付けるラベルです。転換率など、段階のあいだの変化を示します。

構造 ​

項目内容
区分―
親FlowStep
子(text | expr)*
SqlView の子孫可

属性 ​

属性はありません。

Timeline ​

日付の付いた出来事を、縦の線に並べます。施策のリリースや障害を、数値の動きと並べて説明するときに使います。

構造 ​

項目内容
区分block
親子に block を取る要素
子(TimelineItem | control)+
SqlView の子孫可

使い方 ​

  • 書いた順に並べます（<For> なら SQL の結果の順）。when による並べ替えはしません
  • モバイル表示では、when をタイトルの上に表示します

属性 ​

属性値内容
gapnone / xs / sm / md / lg / xl
既定：md		子の間隔
heightpx（例：320px）高さ

例 ​

html
<Timeline>
  <TimelineItem when="4/1" title="新料金プランを公開" color="success">
    <Text>月額の上位プランを追加。初月は MRR が +8%。</Text>
  </TimelineItem>
  <TimelineItem when="4/18" title="決済の障害（3 時間）" color="danger" />
</Timeline>
html
<SqlView id="…" page="…" sql="…">
  <Timeline>
    <For as="r">
      <TimelineItem when="{{ formatDate(r.day, 'dayjs', 'M/D') }}" title="{{ r.title }}">
        <Text color="muted">{{ r.note }}</Text>
      </TimelineItem>
    </For>
  </Timeline>
</SqlView>

TimelineItem ​

<Timeline> の 1 つの出来事です。子は、タイトルの下に説明として縦に並びます。

構造 ​

項目内容
区分―
親Timeline
子block*
SqlView の子孫可

属性 ​

属性値内容
when（必須）文字列
式：文字＋式		出来事の時期（"4/1"・"Q3" など）。線の左に表示します。文字列として扱い、日付として解釈しません。日付の列は formatDate で整えます
title文字列
式：文字＋式		出来事のタイトル。太字で表示します
colordefault / muted / danger / warning / success
既定：default
式：単一式		点の色
gapnone / xs / sm / md / lg / xl
既定：xs		タイトルと子のあいだの間隔

Matrix ​

2 つの軸で分けたマトリクスです。施策の優先度（効果×工数）や、9 マス（市場の魅力×事業の強さ）の整理に使います。

構造 ​

項目内容
区分block
親子に block を取る要素
子MatrixCell*
SqlView の子孫可

使い方 ​

  • <MatrixCell> を、左上から行ごとに cols × rows 個書きます（2×2 なら左上・右上・左下・右下）
  • マスは列で幅を等分します。最小の幅（cellMinWidth）に収まらなければ、図の中で横にスクロールします
  • 軸のラベルは、x は右へ、y は上へ大きくなる向きで書きます
  • モバイル表示でも、列の数を保ちます

属性 ​

属性値内容
cols整数（2〜4）
既定：2		列の数
rows整数（2〜4）
既定：2		行の数
xStart文字列
式：文字＋式		横軸の左端のラベル
xEnd文字列
式：文字＋式		横軸の右端のラベル
yStart文字列
式：文字＋式		縦軸の下端のラベル
yEnd文字列
式：文字＋式		縦軸の上端のラベル
cellMinWidthpx（例：320px）マスの最小の幅。未指定時は 160px（モバイル表示では 120px）です。指定すると、モバイル表示でもこの幅になります
heightpx（例：320px）高さ

例 ​

html
<Matrix xStart="工数 小" xEnd="工数 大" yStart="効果 小" yEnd="効果 大">
  <MatrixCell title="すぐやる" background="success"><Text>オンボーディングのメール</Text></MatrixCell>
  <MatrixCell title="計画してやる"><Text>料金ページの刷新</Text></MatrixCell>
  <MatrixCell title="手が空いたら"><Text>ヘルプの整理</Text></MatrixCell>
  <MatrixCell title="やらない" background="muted"><Text>独自の CRM</Text></MatrixCell>
</Matrix>

MatrixCell ​

<Matrix> の 1 マスです。

構造 ​

項目内容
区分―
親Matrix
子block*
SqlView の子孫可

使い方 ​

  • <SqlView> の子孫で行を各マスに振り分けるときは、マスごとに <For where="…"> を書きます

属性 ​

属性値内容
title文字列
式：文字＋式		マスのタイトル。上に太字で表示します
backgrounddefault / none / muted / success / warning / danger
既定：default
式：単一式		背景色
gapnone / xs / sm / md / lg / xl
既定：md		子の間隔

例 ​

html
<SqlView id="…" page="…" sql="…">
  <Matrix xStart="工数 小" xEnd="工数 大" yStart="効果 小" yEnd="効果 大">
    <MatrixCell title="すぐやる">
      <For as="r" where="{{ r.quadrant == 'quick' }}"><Text>{{ r.name }}</Text></For>
    </MatrixCell>
    <MatrixCell title="計画してやる">
      <For as="r" where="{{ r.quadrant == 'plan' }}"><Text>{{ r.name }}</Text></For>
    </MatrixCell>
    <MatrixCell title="手が空いたら">
      <For as="r" where="{{ r.quadrant == 'later' }}"><Text>{{ r.name }}</Text></For>
    </MatrixCell>
    <MatrixCell title="やらない">
      <For as="r" where="{{ r.quadrant == 'skip' }}"><Text>{{ r.name }}</Text></For>
    </MatrixCell>
  </Matrix>
</SqlView>

Codatum CLI AIエージェントのための分析環境

© Codatum Inc.