56.4. コンポーネント

ページには、さまざまなコンポーネントが含まれます。Components パネルを使用すると、ページで以下のコンポーネントタイプを使用できます。

  • コアコンポーネント
  • ナビゲーションコンポーネント
  • レポーティングコンポーネント
  • Heatmap コンポーネント

56.4.1. コアコンポーネント

Core コンポーネントを使用して、カスタムの HTML 情報を指定、または既存ページを表示します。コアコンポーネントは 3 種類があります。

注記

コアコンポーネントは必須ではありません。

表56.1 Core コンポーネントのサブタイプ

Core コンポーネントのサブタイプ説明

HTML

このコンポーネントは、テキスト、イメージ、テーブル、リンク、色での HTML ページの作成に使用する HTML エディターウィジェットを開きます。必要に応じて、HTML ページをカスタマイズすることもできます。

Page

このコンポーネントを使用すると、新しいダッシュボードに以前作成した HTML ページを追加できます。このコンポーネントを使用して、ダッシュボードに作成してあるカスタムページをネストできます。

ロゴ

このコンポーネントを使用すると、ページにイメージを追加できます。ページ上にイメージを追加するには、イメージの URL を指定し、要件に応じてイメージの幅および高さを設定します。デフォルトのイメージは Dashbuilder のロゴです。Logo URL フィールドは必須です。

56.4.2. ナビゲーションコンポーネント

ナビゲーションコンポーネント は、ページ間の移動に使用されます。ナビゲーションコンポーネントの種類は 6 つあります。

表56.2 ナビゲーションコンポーネントのサブタイプ

ナビゲーションコンポーネントのサブタイプ説明

Target Div

このコンポーネントは、タブリスト、メニューバー、ナビゲーションツリーのエントリーを表示します。また、最後にクリックしたアイテムを追跡します。

Menu Bar

このコンポーネントは、メニューバーの形でナビゲーションツリーのエントリーを表示します。Business Central でサポートされるレベルの数には制限がありません。

Tile Navigator

このコンポーネントは、タイルの形でナビゲーショングループを表示します。グループはフォルダーとして表示されますが、エントリーが 1 つしかない場合は選択するとそのコンテンツが表示されます。

Tree

このコンポーネントは、垂直のツリー構造形式でエントリーを表示します。

Carousel

コンポーネントは、円形やスライドショーなどで選択したページを表示します。

Tab List

このコンポーネントは、コンポーネントの上部に、選択したメニューページをタブとして表示します。

注記

ターゲットの Div 設定は、円形、タイルナビゲーターなどの非ターゲット Div コンポーネントには必要 ありません

56.4.3. レポーティングコンポーネント

Reporting コンポーネントは、グラフ、テーブル、マップの形式でデータセットからデータを表示します。レポーティングコンポーネントのタイプは 11 種類あります。データセットの詳細は、データセットのオーサリング を参照してください。

レポーティングコンポーネントは New Displayer ウィジェットを使用して設定できますが、ウィジェットには以下のタブが含まれます。

  • Type: カスタムデータをグラフィカルに表示する方法を選択できます。
  • Data: Settings メニューで利用可能な Data Sets セクションから作成したカスタムのデータセットの一覧から、データセットを選択します。
  • Display: タイトルを追加し、色、サイズを変更することでコンテンツを表示する方法を選択してカスタマイズします。
注記

時系列グラフ コンポーネントの場合には、New Displayer ウィジェットには、DataDisplayおよび Component Editor タブが含まれます。

表56.3 レポーティングコンポーネントのサブタイプ

レポーティングコンポーネントのサブタイプ説明

バー

このコンポーネントは、データセットからのデータを棒グラフ形式で表示するために使用されます。

円 (パイ)

このコンポーネントは、円グラフ形式でデータセットからデータを表示するために使用されます。円グラフでは、各スライスの弧の長さは対応の数量と比例します。

このコンポーネントは、2 つの軸をもとに一連のデータポイントとして、データ (データセット) 間を直線でつないで表示します。

エリア

このコンポーネントは、折れ線グラフと棒グラフを組み合わせ、データセットからのデータを表示します。

バブル

このコンポーネントは、二次元の図に複数の円 (バブル) を表示します。点をバブルに置き換えた散布図を一般化したものです。

メーター

このコンポーネントは、データセットからデータをメーター形式で表示するために使用されます。

マップ

このコンポーネントを使用すると、異なるレイヤーを使用して、コンテキスト内のデータを地理的に配置できます。データの値はマップのマーカーとして表示されます。データの値は座標またはアドレスとして機能します。

メトリック

このコンポーネントは、データセットからデータをメトリクス形式で表示するために使用されます。PreviewHTML、または Javascript タブを使用してデータを編集できます。

テーブル

このコンポーネントは、データセットからデータを表形式で表示するために使用されます。必要に応じて列を非表示にしたり、表示したりすることができます。

フィルター

このコンポーネントでは、データセットからデータをフィルターできます。

時系列グラフ

このコンポーネントは、時系列形式でデータセットからデータを表示するために使用されます。

56.4.4. コンポーネントのプロパティー

ページに使用されるコンポーネントには、コンポーネントに関連するさまざまなプロパティーが含まれます。Properties パネルで以下のプロパティーを編集して、コンポーネントをカスタマイズできます。

  • Panel プロパティー: WidthHeightBackground Color など、コンポーネントパネルプロパティーをカスタマイズするのに使用します。
  • Margin プロパティー: TopBottomLeftRight など、コンポーネントのマージンプロパティーをカスタマイズするのに使用します。
  • Padding プロパティー: TopBottomLeftRight などのコンポーネントパディングプロパティーをカスタマイズするのに使用します。

56.4.5. ページエディターにコンポーネントを配置してページの作成

ページを作成するには、Pages パースペクティブの Editor キャンバスにコンポーネントをドラッグする必要があります。ページに必要なコンポーネントをすべて配置したら、Save をクリックします。

56.4.6. Preview タブを使用してページのプレビュー

ページの作成時または編集時に、Page EditorPreview タブをクリックして、保存する前にページをプレビューします。

56.4.7. ページ上での時系列グラフのコンポーネントの追加

Time Series Chart コンポーネントを使用して、時系列データを表すことができます。時系列データセットに接続可能な、独自のダッシュボードを作成できます。

時系列コンポーネントを Dashbuilder Runtime にエクスポートして、KIE Server または Prometheus のデータセットから情報を取得できます。時系列コンポーネントを使用してダッシュボードを作成、編集、およびビルドすることも可能です。

前提条件

  • KIE Server がデプロイされて Business Central に接続されている。

手順

  1. 以下の手順を使用して、新規の KIE Server データセットを作成します。

    1. Business Central で、AdminData Sets に移動します。

      Data Set Explorer ページが開きます。

    2. New Data Set をクリックして、要件に応じてプロバイダータイプを選択します。

      Data Set Creation Wizard ページが開きます。

    3. 選択したプロバイダータイプの Data Set Creation Wizard で必要な情報を入力し、Test をクリックします。
    4. Save をクリックします。
  2. Business Central で、MenuDesignPages に移動します。
  3. Pages パネルで、New をクリックします。
  4. OK をクリックします。
  5. New Page ダイアログボックスで Name フィールドに名前を入力し、必要なスタイルを選択します。

    Page Editor に新しいページが開きます。

  6. Components パネルで、Reporting コンポーネントを展開し、Time Series ChartPage Editor にドラッグします。
  7. Displayer エディター ウィザードで Data タブをクリックして、作成したデータセットを選択します。
  8. Data タブで、要件に応じて Columns フィールドの値を選択します。
  9. Display タブをクリックし、必要に合わせて ChartMarginsFilterRefresh、および Columns の値を編集します。
  10. Component Editor タブをクリックし、以下のコンポーネントプロパティーを Component Properties フィールドに入力して更新します。

    表56.4 時系列コンポーネントのプロパティー

    コンポーネントのプロパティー説明

    転置行列データセット

    指定のデータセットが時系列を個別の列として使用するか、行として使用するかを定義します。

    エリアの表示

    チェックボックスを選択して、タイプを折れ線グラフまたはエリアチャートとして設定します。

    日付カテゴリー

    ドロップダウンリストから categorydatetime、または numeric オプションを選択します。

    ラベル

    チェックボックスを選択して、データポイントでデータラベルを有効または無効にします。

    ズームタイプ

    ドロップダウンリストから xy、または xy オプションを選択します。

    ズームの有効化

    チェックボックスを選択して、軸グラフで拡大/縮小を有効にします。デフォルトでは、チェックボックスにチェックが入っています。

    Y 軸の自動調整ズーム

    チェックボックスを選択して、表示可能な領域に合わせて、縮小または拡大します。

    ツールバー自動選択

    ドロップダウンリストから、zoomselection、または pan オプションを選択します。

    タイトルテキスト

    時系列グラフコンポーネントのタイトルを編集します。

    タイトルの位置調整

    ドロップダウンリストから leftcenterright オプションを選択し、タイトルの位置調整設定を変更します。

    ツールバーの表示

    チャートの右上隅にあるツールバーを有効または無効にするチェックボックスです。デフォルトでは、このチェックボックスにチェックが入っています。このコンポーネントプロパティーが有効な場合は、時系列グラフコンポーネントの拡大、縮小、選択ズーム、およびパニング機能を使用できます。

    グラフ名

    要件に応じてグラフ名を設定します。デフォルトで、グラフ名は Newchart に設定されています。

  11. 必要に応じて、グラフの右上隅にあるサンドイッチメニューアイコンをクリックし、CSV、PNG、または SVG 形式でデータセットをダウンロードします。
  12. OK をクリックします。

    図56.2 時系列コンポーネントの例

    時系列コンポーネント