SplunkでD3.jsを動かす

17783 ワード
d3.js Splunk d3.js テキストリンク

SplunkでD3.jsを動作させる例として、Appの「Splunk Web Framework Toolkit」を使ってバブルチャートを表示させる手順を紹介します。

ちなみに、D3をご存じない方には以下のチュートリアルが参考になると思います。

D3　入門｜スコット・マレイ
http://ja.d3js.info/alignedleft/tutorials/d3/

ダッシュボードにバブルチャートを表示させる

「Splunk Web Framework Toolkit」のインストール

以下からダウンロードして、Splunkにインストールしてください。
https://splunkbase.splunk.com/app/1613/#/overview

Appの作成

App作成画面から「Try_D3」を作成します(フォルダ名は「try_d3」とします)。

Dashboardの作成

作成したApp「Try_D3」のDashboardで「Bubblechart」の名前で作成します。

サーチ文の作成

「Bubglechart」のDashboardで「Add Panel」から「Statistics Table」を選択し、以下のサーチ文を入力します。

index=_internal | stats count by sourcetype

すると以下のような画面になります。

HTMLへ変換

Dashboardsの画面に戻り、「Edit」から「Conver to HTML」を選択します。

D3.jsライブラリの配置

try_d3配下に"appserver/static"ディレクトリを作成し、その配下に"splunk_wftoolkit/appserver/static/components"をコピーします。

$ mkdir -p /Applications/Splunk/etc/apps/try_d3/appserver/static
$ cp -r /Applications/Splunk/etc/apps/splunk_wftoolkit/appserver/static/components /Applications/Splunk/etc/apps/try_d3/appserver/static/

ライブラリへのパスを通す

以下の記述を見つけ、

// <![CDATA[

その下に以下を追記します。

require.config({
    baseUrl: "{{SPLUNKWEB_URL_PREFIX}}/static/js",
    waitSeconds: 0,
    paths:
    {
        "app": "../app"
    }
});

requireの最下に以下を追加します。

"app/try_d3/components/bubblechart/bubblechart"

functionの最下に以下を追加します。

BubbleChartView

バブルチャートのviewを定義

以下の記述を見つけ

// VIEWS: VISUALIZATION ELEMENTS

その下に以下を追記します。

var bubblechart = new BubbleChartView({
    id: "bubblechart",
    managerid: "search1",
    labelField:"sourcetype",
    valueField: "count",
    categoryField: "sourcetype",
    el: $("#bubblechart")
}).render();

ここで、各属性は以下の通りです。

  • id,el : DOMエレメントとして、ダッシュボードに表示させる際に使用
  • managerid : サーチ文との紐付け."SEARCH MANAGERS"のidを使用
  • labelField : 各々のバブルに表示させるラベル
  • valueField : 各々のバブルの大きさの指標
  • categoryField : 色をつけるためのグルーピング

ダッシュボードへの表示

以下の記述を見つけ

<div id="element1" class="dashboard-element table" style="width: 100%">

以下に書き換えます(ここで上記elを使用します）。

<div id="bubblechart" class="dashboard-element table" style="width: 100%">

描画してみます。

これでは小さすぎるので、サイズを調整します。

<div id="bubblechart" class="dashboard-element table" style="width:400px;height:300px">

いい感じになりました。

インタラクティブ（ドリルダウン）動作を定義する

バブルチャートを表示させただけではちょっとつまらないので、バブルをクリックした際の動作（ドリルダウン）を定義します。バブルをクリックすると該当のデータの詳細を統計テーブルに表示させるという動きにします。

表示領域の作成

まず以下をバブルチャートの下に追記して、表示領域を作成します。

<div id="row2" class="dashboard-row dashboard-row2">
    <div id="panel2" class="dashboard-cell" style="width: 100%;">
        <div class="dashboard-panel clearfix">

            <div class="panel-element-row">
                <div id="statisticstable" class="dashboard-element table" style="width: 100%">
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>

// VIEWS: VISUALIZATION ELEMENTSに以下を追記します。

        var statisticstable = new TableElement({
            "id": "statisticstable",
            "drilldown": "none",
            "managerid": "search2",
            "el": $('#statisticstable')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

サーチ文の定義

以下の記述を見つけ、

// SEARCH MANAGERS

以下を追記します。

var search2 = new SearchManager({
            "id": "search2",
            "cancelOnUnload": true,
            "search": "index=_internal sourcetype=$select_sourcetype$ | table _time source",
            "latest_time": "now",
            "status_buckets": 0,
            "earliest_time": "-24h@h",
            "sample_ratio": null,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

イベントハンドラの定義

バブルクリック時の動作を記述します。
上記で作成した、

var bubblechart = new BubbleChartView({
    id: "bubblechart",
    managerid: "search1",
    labelField:"sourcetype",
    valueField: "count",
    categoryField: "sourcetype",
    el: $("#bubblechart")
}).render();

の下に以下を追記します。

bubblechart.on("click", function(e) {
   if (e !== undefined) {
        setToken("select_sourcetype", e.name);
   }
});

ここで、バブルチャートの場合、eは以下のような構成になっています（上記ではname属性を利用しました）。

{
  name: labelFieldの値,
  category: categoryFieldの値,
  value: valueFieldの値
}

以上で完成です。下図のようにバブルをクリックすると、下の統計テーブルに詳細が表示されます。

なお、完成形の構成をgithubに置いておきましたので、ご興味がある方はご覧ください。
https://github.com/myogada/Splunk_Try_D3