はじめに

2020年も始まり今年は去年以上に頑張りたいなと思ったのでまずはWorkoutWednesdayのまとめをしていこうと思います。

WorkoutWednesday2020 week01

http://www.workout-wednesday.com/2020w01/

今回はサブカテゴリのソートを選択できるダッシュボード。見た目も機能もシンプルですが、細かい要件が設定されており、そのせいで意外と複雑な作りをしています。要件は以下の通り。

シートは２つ
ダッシュボードサイズは 700px-by-900px
1つ目のシートはヘッダ兼ソートに使うメジャーを選択するためのシート
- 高さは50px
- ソートに使われているメジャーの文字色は「#1B1B1B」
- 使われていないメジャーの文字色は「#6E6E6E」
- テキストの位置は中央揃え（縦横ともに）
- ソートに使われているメジャーの下には「▼」を表示する
2つ目のシートはメインのテーブル
- ソートコントロール機能はオフに設定
- Sales/Orderの列には右揃えで数値をテキストで表示する
- 利益率がマイナスの値のものは棒グラフの色を「ルビーレッド（#D81159）」に設定しそれ以外は灰色に設定
- 利益率のグラフだけゼロラインを設定
- フォントは「Tableau Light」、フォントサイズは「10」、文字色は「#1B1B1B」
左右に50pxのパディングを設定
高さ4pxのバーをタイトルとヘッダシートの間にいれる。色はルビーレッド。
ダッシュボードの背景色は白（#FFFFFF）
ヘッダとテーブルのシートの背景色は「#EBEBEB」
ツールチップはなし
他の書式も合わせること

では作り方をざっくり説明していきます。末尾に私の作成したworkbookへのリンクを張っているので、細かいところはそちらも見て頂ければと思います。

ソートのメジャーををどう変えるか？

まずは要件で2つ目と呼んだシートにおいてソートに使うメジャーを動的に変える方法です。基本的にはパラメータアクションを使います。例えば以下の様なパラメータと計算式を使います。

//Sorter
CASE [パラメーター].[Sorter]
WHEN 'Sales' THEN SUM([Sales])
WHEN 'Sales Order' THEN [Sales/Order]
WHEN 'Profit Ratio' THEN [Profit Ratio]
END

この計算式ではパラメータの「Sorter」で選ばれたメジャー名のメジャーのみ集計されます。この計算式「Sorter」を行に入れて以下の表計算を設定します。
- 簡易表計算→ランク
- 次を使用して計算→Sub-category

やっているのは各サブカテゴリの順序をSorterの値を元に計算しているだけです。これを不連続に変更してサブカテゴリよりも左に持って来れば選ばれたメジャー名の値によってソートされることになるのであとはSorterのヘッダを非表示にすればOKです。

ヘッダシートの作り方

求められる機能は2つです。
- メジャー名を表示し、選択するとパラメータにそのメジャー名が設定される
- 選択されているメジャー名を強調表示する（色＆▼）

メジャー名を表示するだけであればいくつかやり方はありますが、２つめの強調表示がなかなかに手強かったです。
最終的には以下の通り使うメジャーを3つとも列にいれて、それぞれテキストマークで色々と細工をしています。ここのやり方は結局思いつかず正解のWorkbookをダウンロードしてリバースエンジニアリングしました。

真ん中に寄せる

ヘッダの「ゼロを含める」を外すことで全て真ん中に寄せています

色を変える

色を変えるための計算式を作っています。Salesなら以下の通り。これの真偽で色を変えています。

[パラメーター].[Sorter] = 'Sales'

▼をつける

色を変えるとほぼ同様で、選択されているメジャーの場合のみ▼が表示される様に、以下の計算式を書いています。「ELSE ' '」は地味に重要で、これがないとテキスト表示の改行が反映されません。

IF [パラメーター].[Sorter] = 'Sales' THEN '▼' ELSE ' ' END

パラメータ「Sort」を変更する（パラメータアクション）

ある種ここが本丸なのですが、ここはわかってしまえば比較的単純です。パラメータアクションを使って以下の通り、メジャーネームをもとにパラメータ「Sort」の値を変更します。ほぼ標準機能なのであまり困らないと思います。

クリックしたメジャー名が選択されない様にする

何言ってるかわからないかもしれませんが、以下のTipsが使われています。微妙なTipsですが確実にUXは上がると思います。ぜひ試してみて違いを体感してください。

ダッシュボードレイアウト

レイアウトにおいては以下3つの機能は今回必須かなと思います。
- バックグラウンド：選択しているオブジェクトの背景色を決める
- 外部パディング：選択しているオブジェクトの外部オブジェクトとの空間を決める
- 内部パディング：選択しているオブジェクトの内側の空間を決める

外部パディングと内部パディングの違いはわかりにくいと思いますが、バックグラウンドカラーを設定したあといじってみるとよくわかると思います。外部パディングだと設定したパディングの部分は白などダッシュボードの色になりますが、内部パディングだとパディング部分にもバックグラウンドカラーがひきつがれます。

例えばヘッダシートのオブジェクトの設定は以下の通り。

これらを駆使すればルビー色の高さ4pxのバーも作成可能です。

おわりに

やっぱりまとるとなると時間がかかりますね。今回はチャレンジに約１時間半、まとめるのに40分くらいかかりました。私がpublishしたworkbookはこちら。ダウンロードしてみて頂ければ説明を省いている細かい部分も見ていただけると思います。