小技シリーズ第 10 弾 ダイナミックな動きのダッシュボード 関連チャートの強調表示

はじめに

このシリーズでは、Yellowfin のコンテンツをより魅力的なものに作成するための小技集を紹介したいと思います。第 10 弾は関連チャートの強調表示です。

ダッシュボードに配置されたコンテンツの関連性を分かりやすくする方法は幾つか考えられます。見出しや背景色を活用してグループ化することや、色を統一して視覚的にグループ単位を分かりやすくすることも取り得る選択肢です。
今回は、少しダイナミックな動きを伴って、コンテンツの関連性を把握できるようにする方法を紹介します。

ダッシュボードの設定

例えば、以下のようなダッシュボードがあるとします。地域ごとに色分けされていないので、ぱっと見でどのチャートがどの地域のものかが把握しきれない部分もあるかと思います。
そこで、アジアのチャートにマウスをホバーするとアジアのチャートだけが、同様に欧州のチャートにマウスをホバーすると欧州のチャートだけが目立って表示されるようにしてみたいと思います。

アジアに関わるオブジェクトやチャートは、赤の四角で囲んだ個所です。これらに対して、共通で「asia」という名前を付けます。

ダッシュボードの編集モードに入り、該当レポートを選択して、プロパティ設定画面から任意の名前を入力します。

アジア関連のオブジェクトに対しては、全て同じ名前「asia」を付与します。
同様に、欧州関連のオブジェクトに関しては「europe」、北米関連のオブジェクトに関しては「na」を付与します。

コードモードに入って HTML を確認すると、名前に付与した文字列が、HMTL タグの中で、name="asia"、name="europe"、name="na" と定義されているのが確認できます。

コーモードの JS (JavaScript) 画面に切り替えます。規定で入っている行を全て削除し、以下に置き換えます。

JS

//asia にホバーした時の動作
$("[name='asia']").hover(function(){
    $("[name='asia']").css({'opacity':'1'}),
    $("[name='europe']").css({'opacity':'0.1'}),
    $("[name='na']").css({'opacity':'0.1'})
}, function(){
    $("[name='asia']").css({'opacity':'1'}),
    $("[name='europe']").css({'opacity':'1'}),
    $("[name='na']").css({'opacity':'1'})
})

//europe にホバーした時の動作
$("[name='europe']").hover(function(){
    $("[name='asia']").css({'opacity':'0.1'}),
    $("[name='europe']").css({'opacity':'1'}),
    $("[name='na']").css({'opacity':'0.1'})
}, function(){
    $("[name='asia']").css({'opacity':'1'}),
    $("[name='europe']").css({'opacity':'1'}),
    $("[name='na']").css({'opacity':'1'})
})

//na にホバーした時の動作
$("[name='na']").hover(function(){
    $("[name='asia']").css({'opacity':'0.1'}),
    $("[name='europe']").css({'opacity':'0.1'}),
    $("[name='na']").css({'opacity':'1'})
}, function(){
    $("[name='asia']").css({'opacity':'1'}),
    $("[name='europe']").css({'opacity':'1'}),
    $("[name='na']").css({'opacity':'1'})
})

Yellowfin 内部で使用されている jQuery のライブラリーを活用して、name='asia'、name='europe'、name='na' が定義されている HTML タグに対する処理を記述しています。
例えば最初の 9 行では、asia の名前が付けられたオブジェクトにマウスをホバーした時は、asia が不透明度 100% で、europe と na は不透明度が 10% となるように指定しています。
マウスのホバーを該当オブジェクトから外すと、全て不透明度が 100% に戻ります。

アジアにマウスをホバーした時の画面は以下の通りになります。

欧州や北米にホバーした時は、それぞれ以下の感じです。

最後に

今回は、裏側の処理を説明しやすくするために、オブジェクト数が少ないダッシュボードを用いて処理を紹介しました。
本来、もっと多くのオブジェクトが配置されたダッシュボードの方が、高い利便性が感じられるかと思います。

簡単に実装できるので、一度お試しください。

それでは皆様、良いデータ分析を! Cheers!!