Codatum CLI

Appearance

フレーム機能 ​

概要 ​

  • いくつかのチャートでは、 component_settings.frame?: [DimensionField] を指定することで、フレーム機能を利用できます
  • フレーム機能では、component_settings.frame で指定されたカラムの値ごとにチャートを分割して表示します
  • また、次の設定でレイアウトの種類や、より細かい設定を指定できます
    • component_settings.frame_layout?: FrameLayout
    • display_settings.frame?: FrameSettings

スケール ​

フレーム機能は、時系列での変化や、カテゴリ間の比較を行いやすいように、Y軸の表示範囲・バブルサイズのスケール・ヒートマップの色スケールなどがデフォルトで全フレーム共通になっています。

この設定は display_settings.frame?.independent_scale で変更できます。

レイアウト ​

  • component_settings.frame_layout で次のいずれかのレイアウトを指定できます
    • "TIMELINE": タイムラインレイアウト（未指定の場合含む）
    • "GRID": グリッドレイアウト

タイムラインレイアウト ​

  • チャート下部にフレームコントロールが表示され、フレームの手動切替やアニメーション再生が可能になります
    • フレームはカラムの値の昇順で表示されます

グリッドレイアウト ​

  • 全フレームをチャートの描画領域内でグリッド状に表示します
    • 表示できるチャートは最大16件までに制限されます
    • 列数はデフォルトでは自動調整され、なるべく正方形に近い配置になるよう決定されます
      • 例：3件 → 2列×2行、5件 → 3列×2行

型定義 ​

ts
type FrameLayout = "TIMELINE" | "GRID";

type FrameSettings = {
  independent_scale?: boolean;  // フレーム毎のスケールを独立させる場合は true を指定

  // for TIMELINE
  reverse?: boolean;  // 末尾のフレームから表示 + 逆順に再生
  autoplay?: boolean;  // 自動再生
  play_interval?: number;  // 1フレームの表示時間（秒）

  // for GRID
  grid_cols?: number;  // 列数を固定する場合に指定
};

設定例 ​

男女別の円グラフの表示 ​

次のようなチャート設定で、カテゴリ(category_name)別の売上(sales)の円グラフを、男女(gender)で並べて表示できます。

yaml
template_type: RADIAL_CHART_V2
component_settings:
  render_type: PIE
  x:
    - field: category_name
  ys:
    - field: sales
      aggregator: SUM
  order_by: CUSTOM
  frame_layout: GRID
  frame:
    - field: gender

年ごとの売上比較 ​

次のようなチャート設定で、月次売上(sales)を、年ごとにフレーム分割して棒グラフで表示できます。

  • チャート下部にフレームコントロールが表示され、表示対象とするsales_dateの年を手動で切り替えることができます
  • display_settings.frame.reverse: true を指定すると、フレームの末尾（＝最新の年）を初期状態として表示します
yaml
template_type: XY_CHART_V2
component_settings:
  x:
    - field: sales_date
      enable_date_extract: true
      date_extract_arg: MONTH
  views:
    - view_id: 69e7e3549f1f550fc2131260
      render_type: BAR
      ys:
        - field: sales
          aggregator: SUM
  frame_layout: TIMELINE
  frame:
    - field: sales_date
      enable_date_extract: true
      date_extract_arg: YEAR
display_settings:
  frame:
    reverse: true