:::

擴充儀表板功能!在Pentaho中使用文字雲JavaScript函式庫 / How to Create a Dashboard with JavaScript Library in Pentaho

11月 10, 2016 0 Comments Edit Post

image

我們在前兩篇的介紹中知道怎麼用Pentaho內建的各種元件製作互動式的儀表板,但Pentaho的潛力不僅如此,它還可以加入其他JavaScript函式庫來擴充儀表板的功能。這篇我就以wordcloud2.js的展示畫面為基礎,介紹如何在Pentaho裡面繪製文字雲。


如何在Pentaho的儀表板裡面使用JavaScript / How to use JavaScript in Pentaho

前一篇我們認識了Pentaho的Parameter參數的功能,讓我們知道可以將資料儲存在參數中以供各元件參考。那這個Parameter到底是什麼呢?其實它就是JavaScript的變數。

其實Pentaho的很多元件都提供了能夠以JavaScript運作的功能。如果在Property裡面看到類似「Custom Script」、「Expression」、「clickAction」等屬性,它們都可以在裡面輸入JavaScript程式碼來運作。

另一方面,在Layout裡面建立的row (列排版)的Name (名字),其實就等於是HTML標籤的ID。因此我們在這篇建立的layout_row,其實就會變成以下的HTML程式碼:

<div id="layout_row"></div>

講到這裡,其實我們就已經可以用這些概念來在Pentaho裡面任意地操弄JavaScript函式了。以下我就以文字雲wordcloud2.js這套JavaScript函式庫為例,帶大家看看怎麼在Pentaho裡面建立原本儀表板所沒有的功能。


因為前兩篇我已經很詳細地介紹怎麼設定儀表板的細節了,這一篇開始我會用比較概略的方式描述各個元件的設定。這裡開始就不是Step by Step入門導向的教學囉。這一次儀表板請從全新的檔案全新的檔案開始建立,建立完成之後請先Save儲存檔案,以方便我們之後能夠正常預覽喔。

1. 規劃排版 / Layout Design

這次儀表板稍微比較複雜一點,我們必須要在Layout排版上多花點心思:

image

這是我們希望做出來的成果。

image

如果把它拆開成Pentaho的Layout來看,這就是3個不同的Row (列排版),第一列叫做layout_textarea、第二列layout_button、第三列則是layout_wordcloud。

image

回到Layout Panel編輯畫面,我們依序建立三個Row,各別設定它們的Name為「layout_textarea」、「layout_button」、「layout_wordcloud」。

其中我們必須設定「layout_wordcluod」的Height高度為「200」。因為文字雲的設置必須要指定元素有一定的高度,而Row預設高度為0,這樣會導致畫不出文字雲。我們在設定200高度之後,後面就能夠順利繪製文字雲。

2. 在Layout Panel建立JavaScript程式碼 / Create JavaScript Snippet in Layout Panel

接下來我們要建立繪製文字雲所需要的JavaScript程式碼。這段程式碼可以從wordcloud2.js套件的原始碼取得。我把它備份一份到GitHub中,請開啟以下網址,用複製全文來取得程式碼。

image

然後在Layout Panel中,點選Add Resource。

image

Resource Type設為JavaScript,Resource Source設為Code Snippet,表示我們待會直接在這個儀表板裡面直接撰寫JavaScript程式碼。然後按下「Ok」按鈕。

image

點選剛剛建立的Resource,設定Properties,Name設定為「wordcloud2」,然後點選Resource code右邊的「…」。

image

我們在Edit對話視窗中貼上剛剛取得的wordcloud2.js原始碼。按下「Ok」按鈕,回到Layout Panel編輯畫面,這樣就把wordcloud2.js的程式碼加入到儀表板了。

3. 在Component加入元件 / Create Components

接著來到Components Panel,我們一個一個加入需要的元件。

參數 / Simple Parameter

image

請從 Generic / Simple Parameter 建立參數元件,然後在Properties中將Name設定為「component_parameter」。此外這次的預設值比較複雜,請複製以下的文字,然後在Property value欄位裡面貼上。因為原始wordcloud2.js的範例資料太大了,直接設定可能會造成系統出問題,這裡我給大家輸入的是比較少的詞頻設定。

多行文字輸入表單 / TextareaInput Component

image

我們要有個欄位來輸入文字雲的資料,請從 Selects / TextrareaInput Component建立一個多行文字的表單,在Properties進行以下設定:

  • Name: component_textareaInput
  • Parameter: component_parameter
  • HtmlObject: layout_textarea
繪製文字雲的執行按鈕 / Button Component for Drawing Word Cloud

image

最後我們要建立繪製文字雲的按鈕。請到 Others / Button Component建立新按鈕,右邊Properties進行以下設定:

  • Name: component_button
  • Label: 顯示在按鈕上的文字,在此設定為「Draw Word Cloud」
  • Expression: 按下去之後會執行的程式碼。稍後介紹。
  • HtmlObject: layout_button

Expression是按下按鈕之後會執行的JavaScript程式碼。在這裡我們必須要把程式碼包裝成一個函式物件 function () { /* 真正要執行的程式 */},我們可以在這裡取得component_parameter的資料。這段JavaScript的內容細節如下:

function () {
    // 取得來自component_parameter的資料,以斷行拆成陣列
    var lines = component_parameter.split("\n");
   
    // 準備文字雲所需要的陣列
    var data_list = [];
   
    // 一行一行處理
    for (var l in lines) {
        // 取得每一行的資料,以空格斷開前後字串
        var parts = lines[l].split(" ");
       
        // 組成文字雲所需要的陣列
        data_list.push([parts[1], parseInt(parts[0])]); 
    }
   
    // 輸入到文字雲函式中,它會在ID=layout_wordcloud繪製繪製
    WordCloud(document.getElementById('layout_wordcloud'), { list: data_list} );
}

當這個按鈕被按下去的時候,就會執行上面的程式碼。這樣子就全部設定完畢了。

4. 預覽儀表板 / Preview Dashboard

2016-11-10_041704

讓我們打開Preview功能,可以看到儀表板上有多行文字輸入表單跟按鈕。按下按鈕之後就會出現文字雲。這樣就算是大功告成囉。


結語 / Concluion

這篇跟前兩篇不同,改以JavaScript為主的方式來建構儀表板,這樣的做法可以做到原本儀表板所沒有提供的功能,像是這篇的文字雲。當然,這種做法的難度雖然比較高,但是我的目的在於展示Pentaho的更多可能性。我們可以用Pentaho內建的Component元件快速拉出一個儀表板,也可以加入JavaScript程式碼讓儀表板能做到更多事情。一個好的商業智慧平臺是讓人發揮創意來完成工作的平臺,而開放原始碼的Pentaho就能做到這件事情。

然而在撰寫這一篇的時候,其實我忽略了一個很重要的關鍵功能:要如何從Datasource中取得Parameter參數呢?像是這篇跟前一篇的下拉式選單都是使用者主動選擇、輸入的數據,那麼我們怎樣才能為Parameter輸入來自資料庫的Datasource,好讓我們能夠跟JavaScript程式碼整合呢?

image

答案是使用Protovis component,在Custom Chart Script中以下列JavaScript程式碼取得查詢結果:

function (vis, data) {
    console.log(data.resultset);
}

這樣子又能夠進一步擴大Pentaho的應用範圍了。那麼這篇就到此為止啦,竟然已經5點了,Pentaho的研究就到此告一段落!

0 意見:

留言工具: