小技シリーズ第7弾 ダッシュボード上で特定のレポートを拡大表示

### はじめに

ダッシュボードに必要な情報をまとめて可視化することで、分析業務はグッと効率的になります。しかし、ついつい細かな文字で情報を詰め込みすぎてしまった結果、「本当に世の中の文字は小さすぎて読めない！」 (松岡修造) なんていう状況も生まれがちです。「でもハズキルーペをかけると世界は変わる！大きく見えちゃうんです！」 (出所：ハズキルーペ公式サイト https://www.hazuki-l.co.jp/) ハズキルーペを使うことも解決策の1つですが、それ以外にもレポートの表示を拡大する方法はいくつか存在します。

今回は、Yellowfin のダッシュボードに配置するボタンから CSS を操作して、特定のチャートだけを拡大表示させる小技を紹介します。

### ダッシュボード作成
ダッシュボードを新規で作成し、2つのレポートと2つのボタンを配置します。例えば以下のような感じで配置をします。
レポートは左ナビゲーションの [レポート] から、ボタンは左ナビゲーションの [ウィジェット] > [ボタン] からそれぞれ選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/5a76bd01-3fe0-c93b-f56e-be634e3e2325.png)
ダッシュボード：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293823

ダッシュボードの編集画面から、配置した各レポートに任意の名前を設定します。下記の例では、棒グラフに「bar」、ツリーマップに「tree」と名前を設定しています。ここで設定する名前を、後述の JavaScript や CSS の中で指定するため、名前には半角英数の文字を用いてください。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/deff9755-c5d0-d82e-4db9-74944faa15de.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/76ea0486-2017-f9ff-81a3-44d8d7086392.png)

1つ目のボタンの [名前] に 「zoom」、[ボタンのテキスト] に 「拡大」 と入力します。同様に、2つ目のボタンの [名前] に 「back」、[ボタンのテキスト] に 「戻る」 と入力します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/9fd7c5f6-9f23-5a25-cbb4-d00c76737641.png)

### コードモード
ここで画面をコードモードに切り替えて、HTML の記述内容を確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/ea579e73-b824-ed33-da14-c3379dd5895b.png)

先の手順でレポートやボタンに設定した name の値が、HMTL に反映されているのが分かります (赤枠)。
レポートを配置した場所が、上 (top) および 左 (left) から何ピクセルの場所であるかが把握できます (緑枠)。この数値を後の手順で指定するため、数値を控えておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/6845337e-a89a-5d6b-722a-f2a5595c58c9.png)

JS モードに切り替えて、雛形のコードを全て削除し、以下を貼り付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/0f3463d7-6bb1-d31c-846a-3ddc86092e51.png)
```javascript:JS
$("[name='zoom']").click(function(){
    $("[name='bar']").css({'scale':'2'});
    $("[name='bar']").css({'left':'200px'});
    $("[name='bar']").css({'top':'250px'});
    $("[name='tree']").hide();
});
$("[name='back']").click(function(){
    $("[name='bar']").css({'scale':'1'});
    $("[name='bar']").css({'left':'0px'});
    $("[name='bar']").css({'top':'50px'});
    $("[name='tree']").show();
});
```

上記は jQuery という JavaScript ライブラリーを利用するコードの例です。Yellowfin は画面描画に jQuery を使っているため、既定で jQuery がインストールされてきます。特に追加でライブラリーを配置する必要などはありません。

コードの記述内容を簡単に説明します。最初の6行で「拡大 (zoom)」ボタンの動作を定義しています。ボタンを押下すると、4つの定義を CSS に追加して、画面のスタイルを変更する処理です。
&nbsp;&nbsp;`$("[name='bar']").css({'scale':'2'});` 棒グラフを2倍に拡大
&nbsp;&nbsp;`$("[name='bar']").css({'left':'200px'});` 棒グラフの配置は左から 200px
&nbsp;&nbsp;`$("[name='bar']").css({'top':'250px'});` 棒グラフの配置は上から 250px
&nbsp;&nbsp;`$("[name='tree']").hide();` ツリーマップは非表示
scale の値を変えることで、拡大率を調整することができます。拡大率に応じて、レポートの上部や左部が見切れてしまわないように、left や top の値を調整してください。今回の例では、元の位置から右に 200px 、下に 200px 移動させています。

後半の6行で「戻る (back)」ボタンの動作を定義しています。ボタンを押下すると、4つの定義を CSS に追加して、画面のスタイルを元に戻す処理です。
&nbsp;&nbsp;`$("[name='bar']").css({'scale':'1'});`   棒グラフを元の大きさに戻す
&nbsp;&nbsp;`$("[name='bar']").css({'left':'0px'});`  棒グラフの配置を左から 0px に戻す
&nbsp;&nbsp;`$("[name='bar']").css({'top':'50px'});`  棒グラフの配置は上から 50px に戻す
&nbsp;&nbsp;`$("[name='tree']").show();`  ツリーマップを再表示
scale = 1 は、元の大きさに戻すことを意味しています。left と top の値は、HTML で確認した値を入れるようにしてください。それによって、元々の配置場所に戻すことができます。

プレビューモードに移動して、動作を確認します。
[拡大] ボタンを押下すると、小さかった棒グラフの文字が2倍に拡大されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/f75343a1-e22e-a52e-057b-a1addbd52d7c.png)

[戻る] ボタンを押下すると、元の状態に戻りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/6a49bf1e-ae61-fa0d-bbaa-3b6748dccc6a.png)

同様の手順で、ツリーマップを拡大するボタンも配置します (詳細は割愛)。[拡大] ボタンを押下すると、ツリーマップが拡大表示されたのが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2128512/d0900d23-bc5a-b716-868c-a15b0de2a074.png)

### 最後に
どうでしたか？ちょっとした工夫でハズキルーペ要らずのダッシュボードが出来上がりましたね。

今後も小ネタを挟みながら、色々な小技を紹介していこうと思います。
では皆様、良いデータ分析を! À bientôt!