Codatum CLI

Appearance

ウォーターフォールチャート ​

概要 ​

ウォーターフォールチャート（template_type: 'WATERFALL_CHART'）では、値の増減の累積を棒グラフで可視化できます。ラベル(x)をディメンション、増減値(y)をメトリクスとして、ラベルごとに増減値を集計して描画します。

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

設定例 ​

月次の利益増減の可視化 ​

各月(change_month)ごとの利益の増減額(change_amount)を、ウォーターフォールチャートで表示する場合、次のように設定します。

md
:::sql-block
```sql
SELECT
  change_month,
  change_amount
FROM
  monthly_profit_change
```

```yaml {.chart}
chartSettings:
  template_type: WATERFALL_CHART
  component_settings:
    x:
      - field: change_month
    y:
      - field: change_amount
        aggregator: SUM
    order_by: LABEL_ASC
```
:::
  • データソースのSQLの実行結果として出力されるカラムを、チャート設定内で参照します
    • 以降の設定例では、データソースの定義は省略し、chartSettings の中身のみを記述しますが、チャート設定からは必ずデータソースのカラムを参照する必要があります
  • x にラベルとなるディメンション（1つのみ）を指定
  • y に増減値となるメトリクス（1つのみ）を指定
  • order_by: LABEL_ASC を指定して、ラベルの昇順でソート（デフォルト）
    • ソートの詳細はデータのソートを参照してください
    • ウォーターフォールでは、x の並び順が増減の積み上げ順に対応します。増減の表示順を変更したい場合は、order_by を変更してください

上記の例では、次のようなSQLが生成され、チャート用のデータ加工が行われます。

sql
SELECT
  change_month AS change_month___,
  SUM(IFNULL(change_amount, 0)) AS change_amount___sum
FROM
  /* データソースのSQL */
GROUP BY
  change_month___
ORDER BY
  change_month___ ASC
LIMIT
  1001

データ加工オプション ​

描画対象の件数制限 ​

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

フレーム機能の利用 ​

frame にディメンションを指定することで、その値ごとにチャートを分割して並べて表示できます。詳細はフレーム機能を参照してください。

表示のカスタマイズ ​

ウォーターフォール設定 ​

display_settings.waterfall で、棒の色や合計表示の挙動をカスタマイズできます。

ts
type WaterfallSettings = {
  hide_total?: boolean;             // 合計の棒を非表示にする場合は true を指定
  positive_color?: PaletteColorName;  // 正値（増加）の棒の色
  negative_color?: PaletteColorName;  // 負値（減少）の棒の色
  total_color?: PaletteColorName;     // 合計の棒の色
};
  • PaletteColorName の指定方法は色の指定を参照してください

ラベルの設定 ​

display_settings.label で各項目のラベル表示をカスタマイズできます。

ts
type WaterfallLabelSettings = {
  hide?: boolean;                 // ラベル全体を非表示にする場合は true を指定
  show_item_label?: boolean;     // 項目名（`x` の値）を表示する場合は true を指定
  hide_item_value?: boolean;     // 項目値（`y` の値）を非表示にする場合は true を指定
  item_value_formatter?: FormatterSettings;
  position?: 'inside' | 'outside';  // ラベルの表示位置。デフォルトは 'inside'
};

軸のカスタマイズ ​

  • X軸のカスタマイズは display_settings.x_axis で設定できます（カテゴリ軸として描画）
  • Y軸のカスタマイズは display_settings.y_axis で設定できます（数値軸として描画）
  • 設定可能な項目は、軸の種類と設定を参照してください

その他の設定 ​

  • 次のカスタマイズについてはその他のチャート設定を参照してください
    • テキスト設定(display_settings.text)
  • フレーム表示時の設定(display_settings.frame)についてはフレーム機能を参照してください

型定義 ​

ts
type ChartSettings = {
  template_type: 'WATERFALL_CHART';
  component_settings: ComponentSettingsCommon & {
    x: [DimensionField];
    y: [MetricsField];
    order_by?: AxisSortType;
    order_by_custom?: SqlOrderBy[];
    limit?: number;
    frame?: [DimensionField];
    frame_layout?: FrameLayout;
  };
  display_settings?: {
    text?: TextSettings;
    frame?: FrameSettings;
    waterfall?: WaterfallSettings;
    label?: WaterfallLabelSettings;
    x_axis?: AxisSettings;
    y_axis?: AxisSettings;
  };
};