Codatum CLI

Appearance

テーブルチャート ​

概要 ​

テーブルチャート（template_type: 'TABLE_CHART_V2'）では、データを表形式で表示できます。source_type により、生データをそのまま表示する ローデータテーブル と、ディメンションでグループ化して値を集計する 集計テーブル を切り替えられます。

source_type種類備考
RAWローデータテーブルデータソースの結果をそのまま表示
AGGREGATED集計テーブルdimensions でグループ化した metrics の値を表示

事前にチャート設定についても確認してください。

設定例 ​

売上明細データの表示（ローデータテーブル） ​

注文明細(order_id, order_date, customer_name, sales_amount)をそのままテーブルで表示する場合、次のように設定します。

md
:::sql-block
```sql
SELECT
  order_id,
  order_date,
  customer_name,
  sales_amount
FROM
  order_details
```

```yaml {.chart}
chartSettings:
  template_type: TABLE_CHART_V2
  component_settings:
    source_type: RAW
    raw_fields:
      - field: order_id
      - field: order_date
      - field: customer_name
      - field: sales_amount
    order_items:
      - expr:
          type: FIELD
          key: order_date
        dir: DESC
```
:::
  • データソースのSQLの実行結果として出力されるカラムを、チャート設定内で参照します
    • 以降の設定例では、データソースの定義は省略し、chartSettings の中身のみを記述しますが、チャート設定からは必ずデータソースのカラムを参照する必要があります
  • source_type: RAW を指定
  • raw_fields に表示するカラムを指定
    • 空配列 [] を指定すると、データソースの 全カラム を表示します
  • order_items でソート順を指定（任意・複数可）

上記の例では、次のようなSQLが生成されます。

sql
SELECT
  order_id AS order_id,
  order_date AS order_date,
  customer_name AS customer_name,
  sales_amount AS sales_amount
FROM
  /* データソースのSQL */
ORDER BY
  order_date DESC
LIMIT
  1001

地域別売上集計の表示（集計テーブル） ​

地域(region)別に売上(sales_amount)と注文件数(order_count)を集計してテーブル表示する場合、次のように設定します。

yaml
template_type: TABLE_CHART_V2
component_settings:
  source_type: AGGREGATED
  dimensions:
    - field: region
  metrics:
    - field: sales_amount
      aggregator: SUM
    - field: order_count
      aggregator: SUM
  order_items:
    - expr:
        type: FIELD
        key: sales_amount___sum
      dir: DESC
  • source_type: AGGREGATED を指定
  • dimensions にグループ化するディメンション（最低1つ必須・複数可）を指定
  • metrics に集計するメトリクス（任意・複数可）を指定
  • order_items でソート順を指定（任意・複数可）

上記の例では、次のようなSQLが生成されます。

sql
SELECT
  region AS region___,
  SUM(IFNULL(sales_amount, 0)) AS sales_amount___sum,
  SUM(IFNULL(order_count, 0)) AS order_count___sum
FROM
  /* データソースのSQL */
GROUP BY
  region___
ORDER BY
  sales_amount___sum DESC
LIMIT
  1001

データ加工オプション ​

描画対象の件数制限 ​

limit により、描画対象のデータの件数を制限できます。詳細はデータの件数制限を参照してください。

表示のカスタマイズ ​

テーブル全体の設定 ​

display_settings.table_common で、テーブル全体のフォントサイズや行の高さをカスタマイズできます。

ts
type TableCommonSettings = {
  base_font_size?: BaseFontSize;     // 基準フォントサイズ
  header_row_height?: number;         // ヘッダ行の高さ(px)
  data_row_height?: number;           // データ行の高さ(px)
};

フィールドごとの設定 ​

display_settings.each_fields で、フィールド単位の表示をカスタマイズできます。カラムを特定するキーを使ってフィールドと紐づけます。

ts
type EachFieldSettings = {
  display_name?: string;          // 表示名（カラムヘッダのラベル）
  width?: number;                 // カラムの幅(px)
  enable_link_url?: boolean;      // 値がURLの場合にリンクとして描画する場合は true を指定
  image_preview?: {               // 値がURLの場合に画像として表示する場合の設定
    enabled?: boolean;
    object_fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
    height?: number;              // 画像の高さ(px)
    margin?: number;              // 画像周囲の余白(px)
  };
  formatter?: FormatterSettings;  // 値の書式設定
  conditional_styles?: ConditionalStyle[];  // 条件付き書式
  disableInlineBarChart?: boolean;  // 数値カラムのインラインバーチャートを無効にする場合は true を指定
};
  • formatter で値の書式を指定できます。詳細はフォーマッター設定を参照してください
  • conditional_styles で値に応じた背景色・文字色を設定できます。詳細は条件付き書式を参照してください
  • image_preview.enabled: true を指定すると、値に指定されたURLの画像をテーブル内にプレビュー表示できます
  • 集計テーブルの数値カラムでは、デフォルトでセル内にインラインバーチャートが表示されます。非表示にする場合は disableInlineBarChart: true を指定してください

型定義 ​

種類：ローデータテーブル ​

ts
type ChartSettings = {
  template_type: 'TABLE_CHART_V2';
  component_settings: ComponentSettingsCommon & {
    source_type: 'RAW';
    raw_fields: RawField[];   // 空配列の場合は全カラムを表示
    order_items: SqlOrderBy[];
    limit?: number;
  };
  display_settings?: {
    table_common?: TableCommonSettings;
    each_fields?: Record<RawFieldInternalKey, EachFieldSettings>;
  };
};

種類：集計テーブル ​

ts
type ChartSettings = {
  template_type: 'TABLE_CHART_V2';
  component_settings: ComponentSettingsCommon & {
    source_type: 'AGGREGATED';
    dimensions: DimensionField[];   // 最低1つ必須
    metrics?: MetricsField[];
    order_items: SqlOrderBy[];
    limit?: number;
  };
  display_settings?: {
    table_common?: TableCommonSettings;
    each_fields?: Record<DimensionFieldInternalKey | MetricsFieldInternalKey, EachFieldSettings>;
  };
};