Appearance
グリッドページ
概要
- ノートブックファイル内のグリッドページでは、ドキュメントページで定義したSQLブロックの実行結果やチャートを、ダッシュボードとしてレイアウトできます
- グリッドページは以下の構造により記述します
yaml {.page}によるページ属性:::grid-itemによるグリッド内に配置する要素の定義yaml {.grid-layout}によるグリッドのレイアウト定義
ページ属性
- ページ属性は
yaml {.page}のコードブロックとして次のオブジェクト型で表現しますidはノートブックファイル内でユニークな値を指定します- 未指定の場合、
format実行時に自動付与されます
- 未指定の場合、
widthにはページ幅を指定します- デフォルトは
{ width_type: 'AUTO' }で、画面幅に合わせて伸縮します
- デフォルトは
- パラメータに関する説明は パラメータ を参照してください
ts
type GridPageAttrs = {
type: 'GRID_PAGE';
id: ObjectId;
width?:
| { width_type: 'AUTO' }
| { width_type: 'FIXED'; fixed_width: 640 | 800 | 1024 | 1280 | 1366 | 1600 }
| {
width_type: 'RANGE';
min_width?: 640 | 800 | 1024 | 1280 | 1366 | 1600;
max_width?: 640 | 800 | 1024 | 1280 | 1366 | 1600;
};
// パラメータの説明を参照
notebook_param_widget_values?: ParamWidgetValue[];
page_param_widgets?: ParamWidget[];
page_param_widget_values?: ParamWidgetValue[];
};グリッド要素
- グリッドに配置する要素をコンテナディレクティブ
:::grid-itemにより記述します:::grid-itemはグリッド内に配置する要素の数だけ記述します- 要素の属性を
yaml {.attrs}のコードブロックとして記述しますidにはページ内でユニークな値を指定します（未指定の場合は自動生成されます）- 互換性のため、
ObjectIdの他にUuidも指定可能ですが、ObjectIdの使用を推奨します
- 互換性のため、
typeにより、要素の種類を指定し、残りの属性はtypeにより異なりますdescriptionを指定すると、グリッド内に ? アイコンが表示され、マウスオーバーで指定した説明が表示されます
- 要素の本文を属性に続けてマークダウンで記述します
typeによって要素の本文が必要な場合と不要な場合があります
見出し
- 見出しは次の属性定義を持ちます
- 要素の本文には
h2,h3,h4のいずれかの見出しを指定します
ts
type HeadingAttrs = {
type: "HEADING";
id: ObjectId | Uuid;
description?: string;
};例
md
:::grid-item
```yaml {.attrs}
type: HEADING
id: 69dac8455174dcb50b75eec1
description: Tooltip text here
```
## Example heading
:::チャート
- チャートは次の属性定義を持ち、ドキュメントページで定義したチャートを参照します
pageIdでドキュメントページのidを、chartIdで対象のチャートのidを指定しますoverwriteParamsを指定することで、パラメータの値を上書きできます- 詳細については、SQLブロックのパラメータ値の展開 を参照してください
crossFilterについては、クロスフィルタを参照してください
- 要素の本文は不要です
jobIdにはチャートのデータソースとして指定されたSQLブロックの、chartJobIdにはチャート用のデータ加工に利用されたSQLのジョブリソースIDが付与されますjobId,status等の情報は、cdm notebook runの実行時に自動更新されます- コマンド経由で更新されるため、手動で書き換えないでください
statusの詳細は以下の通りですERROR: 実行時にエラーが発生。errorMessageにエラーメッセージが付与されますREMOVED: SQLが未実行、もしくはcdm notebook stripで実行状態が削除されたDISPATCHED: 上記以外の、実行中もしくは実行完了を意味します
ts
type ChartAttrs = {
type: "CHART";
id: ObjectId | Uuid;
pageId: ObjectId;
chartId: ObjectId;
name?: string; // チャート名を指定
description?: string;
crossFilter?: CrossFilter;
overwriteParams?: OverwriteParam;
hideFrame?: boolean; // グリッドの枠線を非表示にするか否か
hideName?: boolean; // チャート名を非表示にするか否か
// 以下はノートブックの実行時に自動更新
jobId?: JobResourceId;
state?: "DISPATCHED" | "ERROR" | "REMOVED";
errorMessage?: string;
chartJobId?: JobResourceId;
chartJobQueryHash?: string;
};例
md
:::grid-item
```yaml {.attrs}
type: CHART
id: 69dac8455174dcb50b75eec3
pageId: 69dac8455174dcb50b75eec1
chartId: 69dac8455174dcb50b75eec2
```
:::SQLブロックの実行結果
- SQLブロックの実行結果は次の属性定義を持ち、ドキュメントページで定義したSQLブロックの実行結果を参照します
pageIdでドキュメントページのidを、sqlIdで対象のSQLブロックのidを指定しますoverwriteParamsを指定することで、パラメータの値を上書きできます- 詳細については、SQLブロックのパラメータ値の展開 を参照してください
crossFilterについては、クロスフィルタを参照してください
- 要素の本文は不要です
jobIdにはsqlIdで指定されたSQLブロックのジョブのジョブリソースIDが付与されます- 詳細についてはチャート を参照してください
ts
type SqlBlockResultAttrs = {
type: "SQL_BLOCK_RESULT";
id: ObjectId | Uuid;
pageId: ObjectId;
sqlId: ObjectId;
name?: string; // テーブル名を指定
description?: string;
crossFilter?: CrossFilter;
overwriteParams?: OverwriteParam[];
hideFrame?: boolean; // グリッドの枠線を非表示にするか否か
hideName?: boolean; // テーブル名を非表示にするか否か
// 以下はノートブックの実行時に自動更新
jobId?: JobResourceId;
state?: "DISPATCHED" | "ERROR" | "REMOVED";
errorMessage?: string;
};例
md
:::grid-item
```yaml {.attrs}
type: SQL_BLOCK_RESULT
id: 69dac8455174dcb50b75eec4
pageId: 69dac8455174dcb50b75eec1
sqlId: 69dac8455174dcb50b75eec2
```
:::リッチテキスト
- リッチテキストは次の属性定義を持ちます
- 要素の本文には以下のマークダウン要素のみ指定できます（ドキュメントページの本文とは利用可能な要素が異なります）
- パラグラフ
- リスト（箇条書き）(
-,1.) - 引用(
>)
ts
type RichTextAttrs = {
type: "RICH_TEXT";
id: ObjectId | Uuid;
name?: string; // ブロック名を指定
hideFrame?: boolean; // グリッドの枠線を非表示にするか否か
hideName?: boolean; // ブロック名を非表示にするか否か
};例
md
:::grid-item
```yaml {.attrs}
type: RICH_TEXT
id: 69dac8455174dcb50b75eec5
name: 補足事項
```
- 売上には発送後のキャンセル分は未反映
- 配送料は含まない
:::スペーサー
- スペーサーはレイアウトの調整を行うための空要素で、次の属性定義を持ちます
- 要素の本文は不要です
ts
type SpacerAttrs = {
type: "SPACER";
id: ObjectId | Uuid;
showOnMobileLayout?: boolean;
};例
md
:::grid-item
```yaml {.attrs}
type: SPACER
id: 69dac8455174dcb50b75eec6
```
:::グリッドレイアウト
- グリッドレイアウトは次の
GridLayout型で表現される配列をyaml {.grid-layout}のコードブロックとして記述しますrefはグリッド要素のidを指定しますheightはグリッド要素の高さを整数(n >= 1)で指定します- 実際の高さは
{n * 60 - 20}pxになります - 要素ごとの初期値は次の通りです
- 見出し、スペーサー:
1 - リッチテキスト:
3 - チャート等のその他要素:
6
- 見出し、スペーサー:
- 実際の高さは
widthは 12 分割グリッド上の列数（整数1-12）で、columnsの直接の子（leaf/rows）にのみ指定しますrowsはcolumnsの子としてのみ使用できます（ルート直下には置けません）
:::grid-itemにより定義されたグリッド要素で、レイアウトから未参照のものはformatを実行するとレイアウトの末尾に自動追加されます
ts
type LeafNode = {
type: 'leaf';
ref: ObjectId | Uuid;
height?: number; // 未指定時は 6
};
type RowsNode = {
type: 'rows';
children: (LeafNode | ColumnsNode)[];
};
type ColumnsNode = {
type: 'columns';
children: ((LeafNode | RowsNode) & { width: number })[];
};
type GridLayout = (LeafNode | ColumnsNode)[];例
yaml
- type: columns
children:
- type: leaf
ref: 69dac8455174dcb50b75eec1
height: 2
width: 8
- type: leaf
ref: 69dac8455174dcb50b75eec2
height: 2
width: 4
- type: columns
children:
- type: leaf
ref: 69dac8455174dcb50b75eec3
height: 4
width: 4
- type: leaf
ref: 69dac8455174dcb50b75eec4
height: 4
width: 4
- type: leaf
ref: 69dac8455174dcb50b75eec5
height: 4
width: 4
- type: columns
children:
- type: rows
width: 4
children:
- type: leaf
ref: 69dac8455174dcb50b75eec6
height: 5
- type: leaf
ref: 69dac8455174dcb50b75eec7
height: 5
- type: leaf
ref: 69dac8455174dcb50b75eec8
height: 10
width: 8
- type: leaf
ref: 69dac8455174dcb50b75eec9
height: 8