表示部品を配置する

1. このページで伝える機能

数値、表、棒グラフ、折れ線を用途に応じて配置できます。列・行・幅・高さを指定して、関連する数値を近くへまとめられます。

2. Wagby11で実現できること

2.1 使える部品と、選び方

ダッシュボードの一つ一つの表示枠を「部品（ウィジェット）」と呼びます。typeは、その枠を数値・表・グラフのどの形式で表示するかを指定する設定です。Wagby11では、次の4種類を使えます。

例えば「今月、全体でいくら売れたか」はmetric、「どの部門が多いか」はbar、「各部門の件数と金額を正確に読みたい」はtable、「先月までと比べて増えているか」はlineが向いています。同じダッシュボードに組み合わせて配置できます。

2.2 重要な数字・比較・推移を一画面にまとめる

2列のグリッドを用い、1行目へ件数と合計、2行目へ部門別件数の棒グラフと金額の表を置きました。3行目の月別推移は2列分の幅で表示します。

売上件数には通常の一覧へ進むリンクも付けています。明細へ移動したら、必要な検索条件を指定して内容を確認できます。

棒グラフでは件数に加え、部門別の売上金額も比較できます。各部門の金額を1行で読み取りながら、棒の長さで大小を確認できます。

3. AIへの指示例

最小限の指示例

重要な数値を上、部門別の比較を中央、月別の推移を下に配置してください。

AIは画面の列数、部品の種類と大きさ、並び順を類推して補います。「合計を大きな数字で」「部門の違いを棒で比較」「月別の増減を折れ線で」のように、何を読み取りたいかを伝えると、部品を選びやすくなります。優先して読みたい情報と、横に並べたい情報を伝えます。

より詳細な指示例

ダッシュボードは2列にします。1行目に売上件数と合計をmetricで1列ずつ、2行目に部門別の件数を示すbarと、部門ごとの件数・金額を示すtableを1列ずつ、3行目は月別推移のlineを2列幅で置いてください。全体の件数・合計、部門別の件数・金額、月別の金額を求める集計データソースを用意し、月別の結果は月順にしてください。売上件数から通常の売上一覧を開けるようにします。
既存のモデル・データ・権限を保持し、Wagby11のguide・referenceを確認してください。メニューと一般利用者向け操作マニュアルを更新し、生成・ビルド後に画面と集計結果を確認してください。

4. 編集されるAppSchemaの例

以下は関連する定義の抜粋です。構文を覚えなくても、求めたい数値や表示したい画面をAIへ伝えられます。

# ui.dashboards内の抜粋
layout: { columns: 2 }
widgets:
  - id: sales-count
    type: metric
    title: 売上件数
    source: totals
    mapping: { value: { measure: count } }
    layout: { column: 1, row: 1, width: 1, height: 1 }
  - id: sales-amount
    type: metric
    title: 売上合計
    source: totals
    mapping: { value: { measure: amount } }
    layout: { column: 2, row: 1, width: 1, height: 1 }
  - id: department-chart
    type: bar
    title: 部門別売上件数
    source: departments
    mapping: { category: { dimension: department }, value: { measure: count } }
    layout: { column: 1, row: 2, width: 1, height: 1 }
  - id: department-table
    type: table
    title: 部門別の件数と売上金額
    source: departments
    mapping:
      columns:
        - { id: department, label: 部門, dimension: department }
        - { id: count, label: 件数, measure: count }
        - { id: amount, label: 売上金額, measure: amount }
    layout: { column: 2, row: 2, width: 1, height: 1 }
  - id: monthly-trend
    type: line
    title: 月別売上の推移
    source: months
    mapping: { category: { dimension: month }, value: { measure: amount } }
    layout: { column: 1, row: 3, width: 2, height: 1 }

sourceは同じダッシュボード内のデータソースIDです。この例では、全体の件数・合計を返すtotals、部門別の件数・金額を返すdepartments、月別金額を返すmonthsを定義済みとして示しています。mappingで表示する集計値や分類軸を対応付けます。

metricはmapping.value、tableはmapping.columns、barとlineはmapping.categoryとmapping.valueを使います。例えば分類軸を「部門」、数値を「売上金額」にすると、部門別の金額を表示できます。

部門別の売上金額を棒グラフで比較する場合は、上の棒グラフの対応付けをvalue: { measure: amount }へ変更し、見出しも売上金額に合わせます。

5. 参考資料

guide：ダッシュボードと初期画面

designer/docs/appschema/html/guide/07-screens/25-dashboards.html

reference：集計API

designer/docs/appschema/html/reference/09-functions.html

reference：ダッシュボードと初期画面

designer/docs/appschema/html/reference/26-dashboards.html