バーゲージを表示する

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

進捗率などの数値を、バーの長さと数値で表示できます。基準となる最大値や、値に応じた色を指定できます。

2. Wagby11で実現できること

進捗率は最大100のバーゲージにしました。35%は青、80%以上なら緑にして、一覧で進み具合を見比べられます。

詳細にもゲージを表示できます。登録・更新では通常の数値入力にし、保存した35という値を35%として表示します。

3. AIへの指示例

最小限の指示例

進捗率をバーで見せ、80%以上になったら緑色にしてください。

AIは最大値、保存値の単位、色を変える基準を類推して補います。0〜100の数値か0〜1の割合かを伝えると、ラベルと幅の食い違いを防げます。

より詳細な指示例

progressは0〜100で入力する整数とし、format.suffixを%にしてください。bar_gaugeのlistとdetailへmax100、固定色#2363AD、80以上なら#16803Dを返すcolor_expressionを指定します。35と85の表示を確認してください。
既存のモデル・項目・主キー・データ・権限を保持し、Wagby11のguide・referenceを確認してください。メニューと一般利用者向け操作マニュアルを更新し、生成・ビルド完了後に起動して画面と保存結果を確認してください。

4. 編集されるAppSchemaの例

以下は関連する定義の抜粋です。構文を覚えなくても、画面でどう見せたいかをAIへ伝えられます。

ui:
  fields:
    - name_en: progress
      format: { suffix: '%' }
      presentation:
        value:
          bar_gauge:
            list: { max: 100, color: '#2363AD', color_expression: 'progress >= 80 ? "#16803D" : ""' }
            detail: { max: 100, color: '#2363AD', color_expression: 'progress >= 80 ? "#16803D" : ""' }

一覧と詳細は独立して有効にします。未入力ではゲージを出さず、0は数値0と幅0のバーです。最大値を超える値のバー幅は100%になりますが、ラベルは元の値を表示します。

5. 参考資料

guide：バーゲージを表示する

designer/docs/appschema/html/guide/06-layout/14-bar-gauge.html

reference：uidefs画面レイアウト定義

designer/docs/appschema/html/reference/15-ui-layout.html

reference：一覧・詳細の項目スタイル

designer/docs/appschema/html/reference/18-output-style.html