Codatum CLI

Appearance

ビッグナンバー ​

概要 ​

ビッグナンバー（template_type: 'BIG_NUMBER_V2'）では、主要指標のテキスト表示や、ゲージチャートの表示が可能です。

指定可能な描画タイプは次の通りです。

render_type描画タイプ備考
TEXTテキスト主要指標と補助指標(任意)をテキスト形式で表示
GAUGEゲージ主要指標を分子・補助指標を分母としたゲージチャートを表示
(補助指標は必須)

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

設定例 ​

売上の表示 ​

テキストの設定例 ​

売上(sales)を主要指標としてテキスト形式で表示する場合、次のように設定します。

md
:::sql-block
```sql
SELECT
  sales,
  sales_target
FROM
  sales_data
```

```yaml {.chart}
chartSettings:
  template_type: BIG_NUMBER_V2
  component_settings:
    render_type: TEXT
    primary_values:
      - field: sales
        aggregator: SUM
    secondary_values: []
  display_settings:
    primary:
      prefix: 'Sales: '
      suffix: ' USD'
```
:::
  • データソースのSQLの実行結果として出力されるカラムを、チャート設定内で参照します
    • 以降の設定例では、データソースの定義は省略し、chartSettings の中身のみを記述しますが、チャート設定からは必ずデータソースのカラムを参照する必要があります
  • render_type: TEXT を指定
  • primary_values に主要指標として sales の合計値を指定
  • 補助指標を表示しない場合は、secondary_values には空配列([])を指定
  • display_settings.primary で、主要指標の表示前後に prefix / suffix を付与可能

売上目標の達成率 ​

ゲージの設定例 ​

売上(sales)を主要指標、売上目標(sales_target)を補助指標として、達成率をゲージチャートで表示する場合、次のように設定します。

yaml
template_type: BIG_NUMBER_V2
component_settings:
  render_type: GAUGE
  primary_values:
    - field: sales
      aggregator: SUM
  secondary_values:
    - field: sales_target
      aggregator: SUM
display_settings:
  primary:
    prefix: 'Sales: '
    suffix: ' USD'
  secondary:
    prefix: 'Target: '
    suffix: ' USD'
  • render_type: GAUGE を指定すると、主要指標を分子・補助指標を分母としたゲージが描画されます
    • ゲージの場合、補助指標は必須です
  • 主要指標と補助指標のテキストはゲージと併せて表示されます
    • 補助指標のテキストを非表示にしたい場合は、display_settings.secondary.hide: true を指定します

表示のカスタマイズ ​

主要指標・補助指標のテキスト ​

主要指標は display_settings.primary、補助指標は display_settings.secondary で、それぞれテキスト表示をカスタマイズできます。設定可能な項目は以下の通りです。

ts
type ValueDisplaySettings = {
  font_size?: number;  // 12〜72(px) で指定。デフォルトは primary: 40, secondary: 16
  prefix?: string;  // ex: 'Total sales: '
  suffix?: string;  // ex: ' USD'
  vertical_prefix_suffix?: boolean;  // prefix,suffix を上下に表示する場合は true を指定
  formatter?: FormatterSettings;
  conditional_styles?: ConditionalStyles<'FONT_SUCCSS' | 'FONT_WARNING' | 'FONT_DANGER'>;
};
  • prefix / suffix は、デフォルトでは値と同じ行に表示されますが、vertical_prefix_suffix: true を指定すると、上下に分けて表示できます
  • formatter で値の書式を指定できます。詳細はフォーマッター設定を参照してください
  • conditional_styles で値に応じて色を変えられます。詳細は条件付きスタイルを参照してください

ゲージのカスタマイズ ​

render_type: GAUGE の場合、display_settings.gauge で、ゲージの軸ラベル・弧幅・ポインタ・条件付きスタイルをカスタマイズできます。

ts
type BigNumberGaugeSettings = {
  hide_label?: boolean;  // ゲージの軸ラベルを非表示にする場合は true を指定
  label_formatter?: FormatterSettings;
  label_count?: number;  // ゲージの軸ラベルの数を 2〜11 の範囲で指定。デフォルトは 5
  arc_width?: number;  // ゲージの弧幅を 6〜32(px) で指定。デフォルトは 12
  hide_pointer?: boolean;  // ゲージのポインタを非表示にする場合は true を指定
  conditional_styles?: ConditionalStyles<'GAUGE_SUCCESS' | 'GAUGE_WARNING' | 'GAUGE_DANGER'>;
};
  • 達成率の値に応じて色を変える場合は、gauge.conditional_styles で GAUGE_SUCCESS / GAUGE_WARNING / GAUGE_DANGER の条件付きスタイルを指定できます
    • 比較対象の値は達成率(0.0 ~ 100.0)です
  • label_formatter で軸ラベルの書式を指定できます。詳細はフォーマッター設定を参照してください

型定義 ​

描画タイプ：テキスト ​

ts
type ChartSettings = {
  template_type: 'BIG_NUMBER_V2';
  component_settings: ComponentSettingsCommon & {
    render_type: 'TEXT';
    primary_values: [MetricsField];
    secondary_values: [MetricsField] | [];
  };
  display_settings?: {
    primary?: ValueDisplaySettings;
    secondary?: ValueDisplaySettings;
  };
}

描画タイプ：ゲージ ​

ts
type ChartSettings = {
  template_type: 'BIG_NUMBER_V2';
  component_settings: ComponentSettingsCommon & {
    render_type: 'GAUGE';
    primary_values: [MetricsField];
    secondary_values: [MetricsField];  // ゲージの場合は必須
  };
  display_settings?: {
    primary?: ValueDisplaySettings;
    secondary?: ValueDisplaySettings & {
      hide?: boolean;  // 補助指標を非表示にする場合に指定
    };
    gauge?: BigNumberGaugeSettings;
  };
}