Codatum CLI

Appearance

クロスフィルタ ​

概要 ​

グリッドページにグリッド要素として配置したチャートやSQLブロックの実行結果の間で、凡例や軸の絞り込み等の状態を同期することができます。

型定義と設定方法 ​

グリッド要素の属性として、以下の CrossFilter のオブジェクトを設定することでクロスフィルタの機能が有効になります。クロスフィルタは、キーに指定された文字列が一致するチャート・テーブル間で以下に示す操作を同期します。

ts
type CrossFilter = {
  syncLegendKey?: string;
  syncXAxisKey?: string;
  syncYAxisKey?: string;
  syncFrameKey?: string;
  syncColumns?: { syncKey: string; tableFieldKey: string }[];
};

同一フィールドでの同期 ​

syncLegendKey ​

syncXAxisKey ​

syncYAxisKey ​

  • 同じキーが設定されているチャート間でY軸の表示範囲を同期します
    • 設定可能なチャート: XYZチャート
    • 軸の種類が一致する必要があります
    • カテゴリ軸の場合、対応するインデックスの範囲で絞り込まれます

syncFrameKey ​

syncColumns ​

  • 同じ syncKey が設定されたテーブル間で絞り込みを同期します

異なるフィールドでの同期 ​

一部の操作は異なるフィールド間でも同じキーを設定することで同期することができます。

syncXAxisKey ↔ syncYAxisKey ​

  • 同じキーが設定されたチャート間でX軸とY軸の表示範囲を同期します

syncLegendKey ↔ syncXAxisKey, syncYAxisKey ​

  • 同じキーが設定されたチャート間で凡例と軸の表示範囲を同期します
    • 軸の種類がカテゴリ型の場合のみ連動します
    • 複数の凡例が選択された場合、対応する軸のインデックスの範囲により絞り込みが行われます

syncLegendKey ↔ syncFrameKey ​

  • 同じキーが設定されたチャート間で凡例とフレームを同期します
    • レイアウトがタイムラインの場合のみ有効です
    • 凡例が1つだけ選択された場合のみ連動します

syncLegendKey → syncColumns[].syncKey ​

  • 同じキーが設定されたチャート間で凡例とテーブルの絞り込みを同期します
    • 凡例の絞り込みを、テーブルの絞り込みに連動します（逆の操作は同期しません）
    • 凡例名と syncColumns[].tableFieldKey に設定されたカラムの値が一致する必要があります

syncXAxisKey, syncYAxisKey → syncColumns[].syncKey ​

  • 同じキーが設定されたチャート間で軸の表示範囲とテーブルの絞り込みを同期します
    • 軸の表示範囲を、テーブルの絞り込みに連動します（逆の操作は同期しません）
    • 軸の種類がカテゴリ型の場合のみ連動します
    • 軸の値と syncColumns[].tableFieldKey に設定されたカラムの値が一致する必要があります

syncFrameKey → syncColumns[].syncKey ​

  • 同じキーが設定されたチャート間でフレームとテーブルの絞り込みを同期します
    • フレームの値を、テーブルの絞り込みに連動します（逆の操作は同期しません）
    • フレームの値と syncColumns[].tableFieldKey に設定されたカラムの値が一致する必要があります

利用例 ​

次のノートブックでは、クロスフィルタにより州の絞り込みを、凡例や軸、テーブルの絞り込みに連動させています（キーとして sync_legend を指定）

md
---
type: CODATUM_NOTEBOOK
name: Cross Filter Sample
---

# 出産者数（米国SSA 公開）

```yaml {.page}
type: DOC_PAGE
id: 69efdb885258dbd64276df35
```

:::sql-block
```yaml {.attrs}
id: 69efdb8cd2051bee7e6e8250
name: sql
```

```sql
-- 米国社会保障局（SSA）州別・年次の乳児名簿（公開サンプル）
SELECT
  DATE(`year`, 1, 1) AS report_date,
  `state` AS state,
  SUM(`number`) AS total_births,
  COUNT(DISTINCT `name`) AS distinct_name_count,
  ROUND(
    SAFE_DIVIDE(SUM(`number`), NULLIF(COUNT(DISTINCT `name`), 0)),
    2
  ) AS avg_births_per_distinct_name
FROM
  `bigquery-public-data.usa_names.usa_1910_2013`
WHERE
  `year` BETWEEN 2000 AND 2013
  AND `state` IN (
    'CA', 'TX', 'NY', 'FL', 'IL', 'PA', 'OH', 'MI', 'GA', 'NC'
  )
GROUP BY
  1, 2
ORDER BY
  1, 2
```

```yaml {.result}
height: 300px
```

```yaml {.chart}
id: 69efdbafc1cbfc7f919f7c66
chartSettings:
  template_type: XY_CHART_V2
  component_settings:
    x:
      - field: report_date
        enable_date_trunc: true
        date_trunc_arg: YEAR
    views:
      - view_id: 69efdb9aaa953f7cd70c2003
        render_type: LINE
        ys:
          - field: total_births
            aggregator: SUM
    group_by:
      - field: state
    group_sort: LABEL_ASC
    order_by: LABEL_ASC
    frame: []
  display_settings: {}
height: 300px
```

```yaml {.chart}
id: 69efdbb25e233d7b64d9853c
chartSettings:
  template_type: XY_CHART_V2
  component_settings:
    x:
      - field: report_date
        enable_date_trunc: true
        date_trunc_arg: YEAR
    views:
      - view_id: 69efdb9aaa953f7cd70c2003
        render_type: BAR
        ys:
          - field: distinct_name_count
            aggregator: SUM
    group_by:
      - field: state
    group_sort: LABEL_ASC
    order_by: LABEL_ASC
    frame: []
  display_settings: {}
height: 300px
```

```yaml {.chart}
id: 69efdc240026a62d369f8048
chartSettings:
  template_type: XY_CHART_V2
  component_settings:
    x:
      - field: state
    views:
      - view_id: 69efdc1e97d9bdabde3c0f43
        render_type: BAR
        ys:
          - field: total_births
            aggregator: SUM
    group_by: []
    group_sort: LABEL_ASC
    order_by: VALUE_DESC
    frame: []
  display_settings: {}
height: 300px
```

```yaml {.chart}
id: 69efea8446e2293b6885858d
chartSettings:
  template_type: TABLE_CHART_V2
  component_settings:
    source_type: AGGREGATED
    dimensions:
      - field: state
    metrics:
      - field: total_births
        aggregator: SUM
      - field: distinct_name_count
        aggregator: SUM
      - field: avg_births_per_distinct_name
        aggregator: AVG
    order_items: []
  display_settings: {}
height: 300px
```
:::

# クロスフィルタ例

```yaml {.page}
type: GRID_PAGE
id: 69efdbce9f033f24fd17e4e2
```

:::grid-item
```yaml {.attrs}
type: CHART
id: 86b1330a-3fbd-4e0e-94b7-0b0c6056ce3b
pageId: 69efdb885258dbd64276df35
chartId: 69efdbafc1cbfc7f919f7c66
crossFilter:
  syncLegendKey: sync_legend
```
:::

:::grid-item
```yaml {.attrs}
type: CHART
id: 5f13a050-7b4b-4330-a216-c84ba2e2a79d
pageId: 69efdb885258dbd64276df35
chartId: 69efdbb25e233d7b64d9853c
crossFilter:
  syncLegendKey: sync_legend
```
:::

:::grid-item
```yaml {.attrs}
type: CHART
id: 2d74eee6-cd3c-44c4-8e42-07b550001040
pageId: 69efdb885258dbd64276df35
chartId: 69efdc240026a62d369f8048
crossFilter:
  syncXAxisKey: sync_legend
```
:::

:::grid-item
```yaml {.attrs}
type: SQL_BLOCK_RESULT
id: 67ac0072-d3ac-4df2-85e5-ee2514e1687d
pageId: 69efdb885258dbd64276df35
sqlId: 69efdb8cd2051bee7e6e8250
crossFilter:
  syncColumns:
    - syncKey: sync_legend
      tableFieldKey: state
```
:::

:::grid-item
```yaml {.attrs}
type: CHART
id: 7b3e80fe-ec2f-43ed-a4b3-d20363d4f18a
pageId: 69efdb885258dbd64276df35
chartId: 69efea8446e2293b6885858d
crossFilter:
  syncColumns:
    - syncKey: sync_legend
      tableFieldKey: state___
```
:::

```yaml {.grid-layout}
- type: columns
  children:
    - type: leaf
      width: 8
      ref: 86b1330a-3fbd-4e0e-94b7-0b0c6056ce3b
      height: 7
    - type: leaf
      width: 4
      ref: 2d74eee6-cd3c-44c4-8e42-07b550001040
      height: 7
- type: columns
  children:
    - type: leaf
      width: 6
      ref: 5f13a050-7b4b-4330-a216-c84ba2e2a79d
      height: 6
    - type: leaf
      width: 6
      ref: 67ac0072-d3ac-4df2-85e5-ee2514e1687d
      height: 6
- type: leaf
  ref: 7b3e80fe-ec2f-43ed-a4b3-d20363d4f18a
  height: 7
```