More than 3 years have passed since last update.

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

yellowfin

Last updated at 2022-03-16Posted at 2022-03-16

はじめに

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

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

ダッシュボード作成

ダッシュボードを新規で作成し、2つのレポートと2つのボタンを配置します。例えば以下のような感じで配置をします。
レポートは左ナビゲーションの [レポート] から、ボタンは左ナビゲーションの [ウィジェット] > [ボタン] からそれぞれ選択します。

ダッシュボード：https://wiki.yellowfin.co.jp/pages/viewpage.action?pageId=2293823

ダッシュボードの編集画面から、配置した各レポートに任意の名前を設定します。下記の例では、棒グラフに「bar」、ツリーマップに「tree」と名前を設定しています。ここで設定する名前を、後述の JavaScript や CSS の中で指定するため、名前には半角英数の文字を用いてください。

1つ目のボタンの [名前] に「zoom」、[ボタンのテキスト] に「拡大」と入力します。同様に、2つ目のボタンの [名前] に「back」、[ボタンのテキスト] に「戻る」と入力します

コードモード

ここで画面をコードモードに切り替えて、HTML の記述内容を確認します。

先の手順でレポートやボタンに設定した name の値が、HMTL に反映されているのが分かります (赤枠)。
レポートを配置した場所が、上 (top) および左 (left) から何ピクセルの場所であるかが把握できます (緑枠)。この数値を後の手順で指定するため、数値を控えておいてください。

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 に追加して、画面のスタイルを変更する処理です。
  $("[name='bar']").css({'scale':'2'}); 棒グラフを2倍に拡大
  $("[name='bar']").css({'left':'200px'}); 棒グラフの配置は左から 200px
  $("[name='bar']").css({'top':'250px'}); 棒グラフの配置は上から 250px
  $("[name='tree']").hide(); ツリーマップは非表示
scale の値を変えることで、拡大率を調整することができます。拡大率に応じて、レポートの上部や左部が見切れてしまわないように、left や top の値を調整してください。今回の例では、元の位置から右に 200px 、下に 200px 移動させています。

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

プレビューモードに移動して、動作を確認します。
[拡大] ボタンを押下すると、小さかった棒グラフの文字が2倍に拡大されました。