8. Banana Dashboard
8.2 Dashboardの構成
Dashboardは、図12のように、Navigation Bar、Row、Panelの3つの要素で構成されています。Rowの中に複数のPanelを配置することができます。Dashboardには複数のRowを配置することができます。
| 項目 | 説明 |
|---|---|
| Navigation Bar | Dashboardの設定を行うためのメニューなどが置かれています。 |
| Row | 複数のPanelを配置することのできるコンテナです。 |
| Panel | 取得したデータをテーブルやグラフなどで可視化することができるボックスです。 |
8.3 Navigation Barの基本操作
8.3.1 Navigation Barの構成
Navigation BarとはDashboardの上部にある、図13のような黒いメニューバーを指します。ここからDashboardの設定を行うことが可能です。各アイコンの説明は表7に記載します。
| 項目 | 説明 |
|---|---|
 （Home） |
ブラウザーのデフォルトに設定しているDashboardを表示します。 |
 （New） |
新しいDashboardの設定を作成します。 |
 （Open） |
保存しているDashboardの設定を読み込みます。 |
 （Save） |
現在表示しているDashboardの設定を保存します。 |
 （Config） |
Dashboardの設定をします。 |
8.3.2 新規Dashboardの作成
Dashboardの新規作成は（新規アイコン）をクリックします。メニュー（図14）からテンプレートとして使うダッシュボードを選択すると、新しいダッシュボードが表示されます。メニューの項目は表8に記載します。
| 項目 | 説明 |
|---|---|
| Time-series dashboard | デフォルトのDashboard設定です。 |
| Non time-series dashboard | Time-series dashboardよりもPanelの少ないシンプルなDashboardです。 |
Time-series dashboardを選択すると、図15のNew Dashboard Settingsの画面が表示されます。表9に項目の説明を記載します。
| 項目 | 説明 |
|---|---|
| Solr Server | 接続先Solrのホスト名とコンテキストパス、またはコンテキストパスを指定します。 デフォルトは /solr/ です。 |
| Collection | データを格納しているSolrコレクション名を指定します。 |
| Time Field | データのタイムスタンプ情報が格納されているSolrフィールド名を指定します。 |
Non time-series dashboardを選択すると、図16のNew Dashboard Settingsの画面が表示されます。表10に項目の説明を記載します。
| 項目 | 説明 |
|---|---|
| Solr Server | 接続先Solrのホスト名とコンテキストパス、またはコンテキストパスを指定します。 デフォルトは /solr/ です。 |
| Collection | データを格納しているSolrコレクション名を指定します。 |
8.3.3 Dashboard設定の読み込み
すでに保存しているDashboardの設定を読み込む時は、（開くアイコン）をクリックし、開くメニューを（図17）を表示します。メニューの各項目の説明は表11のようになります。メニューからDashboard設定を選択すると、Dashboardが表示されます。
| 項目 | 説明 |
|---|---|
| Local File | ローカルディスクに保存しているDashboardの設定を読み込みます。 |
| Gist | GistにアップロードしているDashboardの設定を読み込みます。 |
| Solr | Solr stored dashboardsのリストを名前で絞り込みます。 |
| Solr stored dashboards | Solrに保存されているDashboardのリストをクリックすることで設定を読み込みます。 |
8.3.4 Dashboard設定の保存
現在表示しているDashboardの設定を保存したい時は、（保存アイコン）をクリックし、保存メニュー（図18）を表示します。メニューから保存先を選択することで、Dashboardの設定を保存することができます。メニューの各項目の説明は表12のようになります。
| 項目 | 説明 | |
|---|---|---|
| Locally | Export to File | Dashboardの設定をブラウザー上に表示します。この設定情報をファイルに保存できます。 |
| Set as Browser Default | Dashboardの設定をブラウザーのCookieに保存します。 | |
| Clear Browser Default | Dashboardの設定をブラウザーのCookieから削除します。 | |
| Gist | Dashboardの設定をGistに保存します。 | |
| Solr | Dashboardの設定をSolrに保存します。 | |
8.3.5 Dashboardの設定
現在表示しているDashboardの設定を変更したい時は、Navigation Barの（設定アイコン）をクリックします。すると、Dashboard Settingsという画面が表示されます。
Generalタブ
Generalタブ（図19）では、Dashboard全般の設定（Dashboard名やスタイルなど）を行えます。各項目の説明は表13に示します。
| 項目 | 説明 |
|---|---|
| Title | Dashboardのタイトルを設定します。 |
| Editable | Dashboardの設定が行えるか否かのチェックボックスです。チェックを外すと設定変更が行えなくなります。 |
| Hints | Rowの空いているスペースにAdd Panelボタンを表示するか否かのチェックボックスです。チェックを外すとAdd Panelボタンは表示されません。 |
| Style | Dashboardの基調色（ベースカラー）を選択できます。lightまたはdarkが選択可能です。 |
| Version | 現在利用しているBananaのバージョンが表示されます。 |
Rowsタブ
Rowsタブ（図20）では、Dashboardに表示しているRowを管理することができます。Rowの追加・削除の他にRowの並び順を変更できます。各項目の説明は表14に示します。
| 項目 | 説明 | |
|---|---|---|
| テーブル | Title | Dashboardに格納されているRowの名前が表示されます。 |
| Delete |
 （削除アイコン）をクリックすると、Rowが削除されます。 |
|
| Move |
 （上アイコン）をクリックすると、Rowが1つ上へ移動し、 （下アイコン）をクリックすると、Rowが1つ下に移動します。 |
|
| Title | Rowを追加するときの新規Rowのタイトルを設定します。 | |
| Height | Rowを追加するときの新規Rowの高さを設定します。 | |
| Editable | Rowを追加するときの新規Rowの設定を行えるか否かのチェックボックスです。チェックを外すと設定変更が行えません。 | |
Controlsタブ
Controlsタブ（図21）では、Dashboardのコントロールの設定を行うことができます。設定の保存先、読み込み先などの変更が行えます。各項目の説明は表15に示します。
| 項目 | 説明 | |
|---|---|---|
| Show Collections Picker | Navigation BarにSolrコレクションを選択するためのドロップダウンリストを表示するか否かのチェックボックスになります。チェックを入れるとNavigation BarにCollection Pickerが表示されます。 | |
| Allow saving to | File | Dashboardの設定をファイルへ保存するためのJSONを表示することを許可するか否かを指定します。 |
| Browser | Dashboardの設定をブラウザーのCookieへ保存することを許可するか否かを指定します。 | |
| Gist | Dashboardの設定をGistへ保存することを許可するか否かを指定します。 | |
| Solr | Dashboardの設定をSolrへ保存することを許可するか否かを指定します。 | |
| Allow loading from | Local file | ローカルファイルからDashboard設定を読み込むことを許可するか否かを指定します。 |
| Gist | GistからDashboard設定を読み込むことを許可するか否かを指定します。 | |
| Solr | SolrからDashboard設定を読み込むことを許可するか否かを指定します。 | |
| Solr list size | Solr stored dashboardsのリスト件数を指定します。 | |
Solrタブ
Solrタブ（図22）では、Dashboardが接続するSolrの設定を行うことができます。
| 項目 | 説明 | |
|---|---|---|
| Solr Settings | Solr Server | Solrのホスト名、またはパスを設定します。 |
| Collection | データの保存されているSolrコレクションを設定します。 | |
| Global Query Parameters | Solrに対して問い合わせる際に付けるHTTPリクエストパラメータを設定します。 | |
8.4 Rowの基本操作
8.4.1 Rowの構成
Rowとはデータ可視化するためのPanelを複数格納するためのコンテナを指します（図23）。Rowの左側に配置されているRow Controlを使用して、Rowの設定などを行うことが可能です。Row Controlの項目を表17に示します。
| 項目 | 説明 |
|---|---|
 （Collapse） |
Rowを折りたたみ、小さくします。 |
 （Config） |
Rowの設定をします。 |
 （Full） |
RowがPanelでいっぱいになると表示されます。 |
Rowは（折りたたみアイコン）をクリックすると、図24のようにRowが小さく折り畳まれます。折り畳まれたRowのRow Controlの項目を表18に示します。
| 項目 | 説明 |
|---|---|
 （Expand） |
Rowを広げて元のサイズに戻します。 |
|
（Config） |
Rowの設定をします。 |
8.4.2 Rowの設定
Row Controlの（設定アイコン）をクリックすると、Rowの設定変更を行えるRow Settings画面が表示されます。
Generalタブ
Generalタブ（図25）では、Row全般の設定を行います。項目の説明は表19に示します。
| 項目 | 説明 |
|---|---|
| Title | Rowのタイトルを設定します。 |
| Height | Rowの高さを指定します。 |
| Editable | Rowの設定が行えるか否かのチェックボックスです。チェックを外すと設定変更が行えなくなります。 |
| Collapsable | Rowが折り畳めるか否かのチェックボックスです。チェックを外すと折り畳めなくなります。 |
Panelsタブ
Panelsタブ（図26）ではRowに格納されているPanelの追加・削除・並び順変更・非表示を行うことができます。項目の説明は表20に示します。
| 項目 | 説明 | |
|---|---|---|
| テーブル | Title | Rowに格納されているPanelの名前が表示されます。 |
| Type | Rowに格納されているPanelのタイプが表示されます。 | |
| Span | Rowに格納されているPanelのカラムサイズが表示されます。1Rowは12カラム分のサイズがあり、それぞれのPanelがRowの中の何カラム分の大きさを占めるかを指定することができます。格納するすべてPanelが1カラム分のサイズであれば、1Rowに最大12Panel格納できます。 | |
| Delete |
（削除アイコン）をクリックすると、Panelが削除されます。 |
|
| Move |
（上アイコン）をクリックすると、Panelが1つ左へ移動し、（下アイコン）をクリックすると、Panelが1つ右に移動します。 |
|
| Hide | Panelを非表示にするか否かを指定します。 | |
Add Panelタブ
Add Panelタブ（図27）ではRowに新しいPanelを追加することができます。項目の説明は表21に示します。
| 項目 | 説明 |
|---|---|
| Select Panel Type | Rowに追加するPanelのタイプを指定します。 |
Select Panel Typeのドロップダウンリストから、Panelタイプを選択すると、Add Panelタブに、タイプごとにそれぞれ固有の設定項目が表示されます。 Add Panelの項目については後述のPanelの紹介で触れたいと思いますので、ここでは割愛します。
8.5 Panelの基本操作
8.5.1 Panelの構成
Panelとはデータをグラフや表などで可視化するボックスで、Rowに格納されます。図28のように、Panelの右側上部に配置されているPanel Controlを使用して、Panelの設定などを行うことが可能です。PanelのタイプによってPanel Controに表示されるアイコンの数が変わります。項目の説明は表22に示します。
| 項目 | 説明 |
|---|---|
 （Inspect） |
Panelの中で使用しているSolrへのリクエストパラメータを確認できます。 |
 （Config） |
Panelの設定画面を開くことができます。 |
 （Close） |
PanelをRowから削除します。 |
（情報アイコン）をクリックすると、図29のようなInformation画面が表示されます。ここで、Panelが発行しているSolrへのクエリパラメータを確認できます。
（設定アイコン）をクリックすると、図30のようなPanel Settingsの画面が表示されます。この設定画面は適用するPanelのタイプによって項目が変わります。Panelのタイプによりタブや、その中の項目は変わりますので、ここでは割愛します。
