擴充儀表板功能！在Pentaho中使用文字雲JavaScript函式庫 / How to Create a Dashboard with JavaScript Library in Pentaho
我們在前兩篇的介紹中知道怎麼用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排版上多花點心思：
這是我們希望做出來的成果。
如果把它拆開成Pentaho的Layout來看，這就是3個不同的Row (列排版)，第一列叫做layout_textarea、第二列layout_button、第三列則是layout_wordcloud。
回到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中，請開啟以下網址，用複製全文來取得程式碼。
- wordcloud2.js (布丁的備份)
然後在Layout Panel中，點選Add Resource。
Resource Type設為JavaScript，Resource Source設為Code Snippet，表示我們待會直接在這個儀表板裡面直接撰寫JavaScript程式碼。然後按下「Ok」按鈕。
點選剛剛建立的Resource，設定Properties，Name設定為「wordcloud2」，然後點選Resource code右邊的「…」。
我們在Edit對話視窗中貼上剛剛取得的wordcloud2.js原始碼。按下「Ok」按鈕，回到Layout Panel編輯畫面，這樣就把wordcloud2.js的程式碼加入到儀表板了。
3. 在Component加入元件 / Create Components
接著來到Components Panel，我們一個一個加入需要的元件。
參數 / Simple Parameter
請從 Generic / Simple Parameter 建立參數元件，然後在Properties中將Name設定為「component_parameter」。此外這次的預設值比較複雜，請複製以下的文字，然後在Property value欄位裡面貼上。因為原始wordcloud2.js的範例資料太大了，直接設定可能會造成系統出問題，這裡我給大家輸入的是比較少的詞頻設定。
多行文字輸入表單 / TextareaInput Component
我們要有個欄位來輸入文字雲的資料，請從 Selects / TextrareaInput Component建立一個多行文字的表單，在Properties進行以下設定：
- Name: component_textareaInput
- Parameter: component_parameter
- HtmlObject: layout_textarea
繪製文字雲的執行按鈕 / Button Component for Drawing Word Cloud
最後我們要建立繪製文字雲的按鈕。請到 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
讓我們打開Preview功能，可以看到儀表板上有多行文字輸入表單跟按鈕。按下按鈕之後就會出現文字雲。這樣就算是大功告成囉。
結語 / Concluion
這篇跟前兩篇不同，改以JavaScript為主的方式來建構儀表板，這樣的做法可以做到原本儀表板所沒有提供的功能，像是這篇的文字雲。當然，這種做法的難度雖然比較高，但是我的目的在於展示Pentaho的更多可能性。我們可以用Pentaho內建的Component元件快速拉出一個儀表板，也可以加入JavaScript程式碼讓儀表板能做到更多事情。一個好的商業智慧平臺是讓人發揮創意來完成工作的平臺，而開放原始碼的Pentaho就能做到這件事情。
然而在撰寫這一篇的時候，其實我忽略了一個很重要的關鍵功能：要如何從Datasource中取得Parameter參數呢？像是這篇跟前一篇的下拉式選單都是使用者主動選擇、輸入的數據，那麼我們怎樣才能為Parameter輸入來自資料庫的Datasource，好讓我們能夠跟JavaScript程式碼整合呢？
答案是使用Protovis component，在Custom Chart Script中以下列JavaScript程式碼取得查詢結果：
function (vis, data) {
console.log(data.resultset);
}這樣子又能夠進一步擴大Pentaho的應用範圍了。那麼這篇就到此為止啦，竟然已經5點了，Pentaho的研究就到此告一段落！
