UI 配置

• タイル分割
• タイル追加
• タイルの比率を調整する
• タイルのスクロール表示を有効化する
• 未設定タイルに UI を配置する

ダッシュボードは UI をグリッド状に配置します。 グリッドは矩形のタイルで構成されています。タイルは UI を入れる箱のようなものです。 1 つのタイルにマップ、チャート、XY チャート、画像タイムラインなどの UI を配置できます。

グリッド状に配置されたタイル

以下、ダッシュボードの編集モードをオンにして作業します。

ダッシュボードの編集モードをオンにする

タイル分割

ダッシュボード新規作成時のデフォルトの状態だと、タイルは 1 つだけ用意されています。

デフォルトのタイルは、編集画面の左パネルのタイルツリー上に「未設定」と表示されています。

デフォルトのタイル

タイルを 2 つのタイルに分割します。

1. ツリー上の「未設定」タイルをクリック
2. メニューの「分割」ボタンをクリック

タイル分割

タイルが「横並び」になり 2 つの「未設定」タイルが作られました。

タイル分割後

デフォルトではタイルは横並びに表示されます。 並び順の方向は「横方向」または「縦方向」を指定できます。 タイルの並び順は、横方向は左から右、縦方向は上から下です。

横方向にタイルを並べる

縦方向にタイルを並べる

タイル追加

「横並び」または「縦並び」タイルの中に、新しいタイルを追加することができます。

1. ツリー上の「横並び」または「縦並び」タイルをクリック
2. メニューの「追加」ボタンをクリック

タイル追加

新しいタイルが一番後ろに追加されます。 横方向なら一番右に、縦方向なら一番下に追加されます。

タイル追加後

このようにタイル分割と追加を繰り返して、下図のようなレイアウトを作ることも可能です。

レイアウト

タイルの比率を調整する

タイルはブラウザのウィンドウサイズに合わせて拡大縮小します。

「横並び」「縦並び」の中のタイルは、タイル同士の比率を変えることでサイズを調整できます。 デフォルトの比率は 1:1 になっているため、タイルのサイズは左右上下で均等です。

下図は左右のタイルの比率を 5:3 にした例です。

タイル比率

タイルのスクロール表示を有効化する

タイルの数が増えてブラウザの 1 画面に収まらない場合は、スクロール表示を使用します。

「横並び」「縦並び」のタイル設定で「スクロール」チェックボックスを ON にします。

スクロール表示有効

下図は右の「縦並び」タイルを「縦スクロール」タイルに変更したときの様子です。 ウィンドウ内に収まるように小さいサイズで表示されていた子タイルが、縦スクロールエリアに配置されたことで表示範囲が広くなりました。

スクロール表示有効後

スクロール表示を使用する場合、タイル同士の比率の設定は効きません。タイル設定の「最小幅」「最小高さ」でサイズが決まります。

• 縦スクロールの場合は「最小高さ」を維持します。
• 横スクロールの場合は「最小幅」を維持します。

スクロール時の最小幅と高さ

未設定タイルに UI を配置する

マップやチャートなどの UI は「未設定」タイルに配置できます。

1. ツリー上の「未設定」タイルをクリック
2. メニューの「タイルに割り当てるリソース」からマップやチャートなどを選択

リソース割当

タイルに UI を割り当てた後のダッシュボードは下図のようになります。 左タイルにマップが配置されました。

リソース割当後

同様に、もう片方の「未設定」タイルにチャートを割り当ててみます。

すべての未設定タイルに UI を割り当てる

このようにダッシュボードに UI を配置することができます。

最後に「保存」ボタンを押して設定を保存してください。