Codatum CLI

Appearance

ワードクラウド ​

概要 ​

ワードクラウド（template_type: 'WORD_CLOUD'）では、ワード(word)とその大きさを決定する値(value)を指定して、値の大きさに応じてフォントサイズを変えてワードを並べて表示できます。ワードの出現頻度や重要度などを直感的に把握できます。

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

設定例 ​

キーワードの出現頻度の可視化 ​

問い合わせ内容に含まれるキーワード(keyword)の出現回数(count)をワードクラウドで表示する場合、次のように設定します。

md
:::sql-block
```sql
SELECT
  keyword,
  count
FROM
  inquiry_keyword_stats
```

```yaml {.chart}
chartSettings:
  template_type: WORD_CLOUD
  component_settings:
    word:
      - field: keyword
    value:
      - field: count
        aggregator: SUM
```
:::
  • データソースのSQLの実行結果として出力されるカラムを、チャート設定内で参照します
    • 以降の設定例では、データソースの定義は省略し、chartSettings の中身のみを記述しますが、チャート設定からは必ずデータソースのカラムを参照する必要があります
  • word にワードとなるディメンション（1つのみ・必須）を指定
  • value にワードのフォントサイズを決定するメトリクス（1つのみ・必須）を指定
  • ワードは value の降順で順次配置されます。表示領域に収まらないワードは自動的に非表示になります
    • display_settings.word.shrink_to_fit: true を指定すると、表示領域に収まらないワードを size_range を超えて縮小して表示できます
    • shrink_to_fit を有効化すると、描画処理が非常に重たくなるため、有効にする場合は limit でワード数の制限を設けることを推奨します

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

sql
SELECT
  keyword AS keyword___,
  SUM(IFNULL(count, 0)) AS count___sum
FROM
  /* データソースのSQL */
GROUP BY
  keyword___
ORDER BY
  count___sum DESC
LIMIT
  1001

データ加工オプション ​

描画対象の件数制限 ​

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

フレーム機能の利用 ​

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

表示のカスタマイズ ​

ワードの設定 ​

display_settings.word で、ワードのフォントサイズや配置をカスタマイズできます。

ts
type WordDisplaySettings = {
  size_calc_type?: 'LINEAR' | 'SQRT' | 'LOG';  // フォントサイズのスケーリング方法
                                               // デフォルトは 'LINEAR'
  size_range?: {
    start: number;   // 最小フォントサイズ(px) 8〜128 で指定。デフォルトは 12
    end: number;     // 最大フォントサイズ(px) 8〜128 で指定。デフォルトは 64
  };
  word_spacing?: 'TIGHT' | 'NORMAL' | 'LOOSE';  // ワード間の間隔。デフォルトは 'NORMAL'
  shrink_to_fit?: boolean;   // 表示領域に収まらないワードを size_range を超えて
                             // 縮小して表示する場合は true
                             // (ワード数が多い場合に描画処理が重くなるため非推奨)
  color_by_value?: boolean;  // ワードの色を value と連動させる場合は true を指定
                             // (size_calc_type と同じスケーリング方法が適用されます)
};
  • フォントサイズは value の値を size_calc_type に基づいてスケーリングし、 size_range の範囲に収めて算出されます

その他の設定 ​

  • フレーム表示時の設定(display_settings.frame)についてはフレーム機能を参照してください

型定義 ​

ts
type ChartSettings = {
  template_type: 'WORD_CLOUD';
  component_settings: ComponentSettingsCommon & {
    word: [DimensionField];
    value: [MetricsField];
    frame?: [DimensionField];
    frame_layout?: FrameLayout;
    limit?: number;
  };
  display_settings?: {
    frame?: FrameSettings;
    word?: WordDisplaySettings;
  };
};