【Tableau】選択式のパラメータに応じて表示するグラフを切り替える

## 概要
ダッシュボードにおいて、選択式のパラメータに応じて表示するグラフを切り替える方法を記載します。

事例として、棒グラフとツリーマップを実装した以下ダッシュボードで、パラメータによって棒グラフのみ ⇔ ツリーマップのみ の2通りに、見せ方を切り替える方法を記載します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/8d07d1be-9e61-939b-8657-febb201188da.png)


| 項目             | 内容                                                                                                               |
| ---------------- | ------------------------------------------------------------------------------------------------------------------ |
| **取り扱う内容** | • パラメータ値に応じてグラフの表示を切り替える方法（1枚のワークシートで実現する方法と、複数枚のワークシートを切り替えて実現する方法）                                          |
| **想定読者**     | • Tableau Desktopの基本操作が分かる人
| **ゴール** | • 限りあるダッシュボードのスペースを有効活用できる<br> • 同じグラフでも表示する内訳に用いる情報を切り替えられる |

記事中のスクショに用いるデータは、Tableau向けサンプルとしておなじみの、サンプル - スーパーストアです。

## グラフ表示を切り替えるためのパラメータを作成する
これは、後述するいずれの実装方法でも利用します。処理速度を考慮して、データ型は文字列ではなく整数のリストとしておきます。ダッシュボード上のパラメータでは、`表示名`に記載の値で選択肢が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/d3bfc48e-d9b9-6d70-a7bf-a7e137c9c44f.png)

## パラメータによる表示切替の実装を3通りから選択する
3通りと言いながら、実質2択です。動的ゾーン表示を使わない方法は、同機能が実装されていないTableau v2022.3より前のバージョンでのみ採用を検討します。

| 実装方法             | メリット                                                                                                               | デメリット |
| -- | --- | -- |
| 1枚のワークシート内で切り替える | • 実装が簡単                                          |  • 異なるグラフ方式や列・行構成の異なるシートの切替が不可 |
| 2枚以上のワークシートを切り替える<br>動的ゾーン表示使用 | • 異なるグラフ方式や列・行構成の異なるシートの切替が可能 |  • 計算フィールドの数が増えがち
| 2枚以上のワークシートを切り替える<br>動的ゾーン表示不使用 | • Tableau v2022.3より古いバージョンで使える | • ワークシート毎の作業手順が増える<br> • ワークシートをレイアウトコンテナーに入れたり入れなかったりの試行錯誤が必要<br> • 非表示になっている領域も、完全には消えずに白いスペースが残る<br> • タイトルを非表示にするので、タイトルにあたる情報が必要な場合は、そのためのワークシートを作成・配置する必要がある |

## 1枚のワークシート内で切り替える方法
グラフの表現が同一で、表示するディメンションやメジャーを切り替えたいだけであれば、1枚のワークシートで実現できます。パラメータに応じて返す値が切り替わる計算フィールドを列・行や色に配置すればOK。

### 事前準備：ワークシートと計算フィールドを作成する
#### 計算フィールドを作成する
まずは計算フィールドを作成します。（フィールド名を`表示切替ディメンション`とします）

計算フィールド名：表示切替ディメンション
```csharp
// パラメータの値に応じて、返すデータ列を切り替える
CASE [表示切替]
    WHEN 1 THEN [カテゴリ]
    WHEN 2 THEN [地域]
END
```

#### ワークシートを作成する
定義した計算フィールドを、ワークシート上の列や行、色などパラメータに応じて切り替えたいところに配置します。今回は棒グラフの内訳にあたる列のディメンションにこれを配置しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/62afcc5c-0480-86b4-0458-e8efef719aab.png)

### ワークシートとパラメータをダッシュボードへ配置する
ワークシートとパラメータをダッシュボードに配置します。パラメータの選択値に応じて、ディメンションの内訳が変わるようになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/98a513c6-d075-9cbd-e25a-73e0707676ba.png)

計算フィールドを色に配置すれば円グラフの色分けで表現される内訳を切り替えられます。また、メジャーに配置すれば表示される数値を、売上 or 注文数など複数の値で切り替えることもできますね。

## 2枚以上のワークシートを切り替える方法
グラフの種類や使っている行・列が異なる複数のワークシートを切り替える方法です。複数作ったワークシートそれぞれに1:1で対応するboolean型の計算フィールドを作成して、ダッシュボードのレイアウト設定にて有効・無効を切り替えます。

ここでは、棒グラフとツリーマップを表示するワークシートを、パラメータによっていずれか片方だけ表示するよう実装します。動的ゾーン表示を使って実現する方法と、動的ゾーン表示を使わない方法の2通りを記載します。

### 事前準備：ワークシートを作成し、ダッシュボードへ配置する
#### ワークシートを作成する
棒グラフとツリーマップのワークシートを1枚ずつ用意します。棒グラフの表示内訳だけを変更すればよかった前述の例と異なり、棒/ツリーの計2種類のグラフ表現を実現する必要があります。したがって単一のワークシートでは実現できなません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/87991170-2772-4e85-fa77-d68228ea51eb.png)

#### ワークシートとパラメータをダッシュボードへ配置する
これらのワークシートには、以下2つの手順を施しておきます。これにより、レイアウトコンテナーに入れたワークシートが非表示の状態になったときは、その領域を同一コンテナ内のグラフが埋めるように拡張される動きになります。（やっておかないと、非表示状態になったグラフの領域が真っ白のままで残ってしまう）
1. 2つのワークシートを、ダッシュボード上で単一のレイアウトコンテナーに2つ併せて格納しておく
2. レイアウトの自動調整設定を行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/fd254cab-4695-03ba-8106-611f45285612.png)

この時点では、パラメータを切り替えても描画に変化はみられません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/f70fbe93-3fd7-9d7f-512f-0f26bad82807.png)

### 動的ゾーン表示を使った実装を行う
#### 計算フィールドを作成する
パラメータが採り得る選択肢の数だけ、各値のときにtrueとなる計算フィールドを作成します。

`計算フィールド名：棒グラフ表示`
```csharp
// パラメータが1のときにtrueになる
[表示切替] = 1
```

`計算フィールド名：ツリーマップ表示`
```csharp
// パラメータが2のときにtrueになる
[表示切替] = 2
```

#### 各ワークシートに対して動的ゾーン表示の設定を行う
ワークシート自体をクリックするか、左側サイドバーのワークシート名をクリックすることで、切替対象のワークシートいずれかを選択状態にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/70e9ae1a-4510-7d35-1ca4-1d89a7745f21.png)

左側サイドバーを`レイアウト`に切り替えて、`値を使用して表示状態を制御する`にチェックを入れます。その後、パラメータの選択肢およびワークシートに対応する計算フィールド（前項で作ったやつ）を選択します。ここでは、棒グラフのワークシートに対して、パラメータ値が`棒グラフ`選択されているときにtrueになる`棒グラフ表示`を選択しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/ad1bb174-4ae1-b83f-a72b-fab559cba83b.png)

残りのワークシートにも、対応する計算フィールドを選択して同様に設定を行います。ここでは、ツリーマップのワークシートに対して、パラメータ値が`ツリーマップ`選択されているときにtrueになる`ツリーマップ表示`を選択しています。この時点でパラメータ値は`棒グラフ`を選択されているので、ツリーマップは非表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/73284459-9d68-f1f1-bce1-d02b078db681.png)

ここまでで、棒グラフとツリーマップがパラメータ値によっていずれかだけ表示されるよう、設定できました。パラメータ値を`ツリーマップ`に変更すると、棒グラフは非表示となり、代わりにツリーマップが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/dac625df-5e66-16fe-ce0d-fcd1c884085c.png)

### 動的ゾーン表示を使わない実装を行う（旧バージョン向け。非推奨）
動的ゾーンを使わずに、グラフの種類や使っている行・列が異なる複数のワークシートを切り替える方法。動的ゾーンが実装されたTableau v2022.3より前のバージョンでは、こちらを用いて実現します。

ただし、動的ゾーン表示での実装に比して以下の点でデメリットがあるため、今となっては非推奨だと思います。
* ワークシート毎の作業手順が増える
* ワークシートをレイアウトコンテナーに入れたり入れなかったりの試行錯誤が必要
* 非表示になっている領域も、完全には消えずに白いスペースが残る
* タイトルを非表示にするので、タイトルにあたる情報が必要な場合は、そのためのワークシートを作成・配置する必要がある

#### 計算フィールドを作成する
ワークシートの作成とダッシュボードへの配置、レイアウトコンテナーへの格納は、先に記載した動的ゾーン表示を使う場合と同じ手順で、行っておきましょう。

パラメータを計算フィールドに配置して、選択されたパラメータ値をそのまま返すようにします。

`計算フィールド名：表示切替ディメンション（複数シート）`
```csharp
// データの全行が、選択されたパラメータ値を返す
[表示切替]
```

#### 各ワークシートにフィルタを設定する
各ワークシートにて、対応させたいパラメータ値が選択されているときのみtrueになるようなフィルタを設定します。各ワークシートでは、以下の手順を踏みます。

1. ワークシートの編集画面を開く（この事例では`ツリーマップ`を編集）
1. パラメータをワークシート編集画面に表示させる。
1. パラメータ値をワークシートに対応する値に変更する（`ツリーマップ`とする）
1. 計算フィールドをフィルターに配置、選択された値にチェックを入れる（ツリーマップに対応する`2`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/ee64e88c-9b97-03d4-6317-d439fa0c3cb8.png)

すべてのワークシートにて上記を設定してダッシュボードを表示すると、パラメータに応じたグラフのみが描画されます。ただしこの時点では、非表示になったグラフのタイトルが表示されたままになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/5db0f057-f164-04dc-0a43-bcc4ff6000e1.png)

この状態から、以下の手順を実施して、思い通りにグラフの表示切替されるよう試行錯誤します。

1. 各ワークシートのタイトルを非表示にする
1. 単一のレイアウトコンテナーにすべてのワークシートが載っていると、非表示グラフの領域が上手く圧縮されないことがある。いずれかのワークシートをコンテナから取り出す or 個別にレイアウトコンテナーを用意してワークシートを格納するなど、手探りが必要

ここまでで、パラメータ値に応じてグラフの表示/非表示が切り替わるようになりました。ただし、先述のデメリットが依然として残るため、タイトルワークシートの作成など必要な対応を行ってください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906608/6a20a0aa-980b-6081-e4e4-2f3bc262ae4b.png)