（※このトピックスは、Valence開発元（米CNX社）のブログ記事を翻訳・再編集したものとなります。原文記事は、コチラとなります。）
百聞は一見に如かずとよく言いますが、ビジネスにおいてその最も基本的な表現は、チャートとグラフという形で現れます。そのため、Valence App Builderは、あらゆるIBM iシステムからのデータと傾向を効果的に要約するために使用できる、設定可能なチャート・ウィジェットを豊富に提供します。
グラフやチャートでデータを表示する場合、「Less is more（少ない方が豊かである）」という原則がしばしば適用されることを心に留めておいてください。グラフ上に多くの数値や数字を配置すると、データの概要を分かりやすく伝えるという目的を達成できません。 そこで、ドリルダウンやツールチップを使用すると、メインディスプレイを散らかすことなく、ユーザーに追加の情報を提供することができます。
このヒントでは、最近追加されたツールチップのプロパティに焦点を当て、ツールチップウィンドウ内に複数行のデータを表示することができるようにします。Valence App Builderのチャートウィジェットでは、ツールチップ内でhtmlフォーマットを使用できないため、例えばGridのカラムのように<br>による改行を使用することができません。しかし、Valence ビルド 6.0.20211209 以上を使用している場合、カスタムツールチップ設定でこれらの特別なプロパティを利用することにより、この制限を回避することができます。
この概念を説明するために、国別の総売上高を表示する列グラフ・ウィジェットがあるとします。しかし、コンテキストを追加するために、チャートの各バーを構成する顧客数や注文数をユーザーがすばやく確認できるようにしたいとします。そのためには、必要な「背景」要素がチャートのデータソースに含まれていることを確認し、補足データをツールチップ内に配置します。
もちろん、最初のステップは、適切な国名と、それぞれの国の総売上高、総注文、総顧客を含むデータソースを作成することです。データソースの作成にまだ慣れていない方は、この1分間のビデオで、その方法を簡単にご覧ください。今回は、Valence に付属するサンプル顧客マスターファイル DEMOCMAST と、サンプル顧客注文ヘッダーファイル DEMOORD_H および DEMOORD_D から必要なデータを取得するために、以下の SQL 文を使用することにします。
SELECT
sum(f3.ordqty * f3.price) AS totalsales,
count(distinct f2.orderno) AS totalords,
count(distinct f1.cusno) AS totalcusts,
f1.ccountry AS country
FROM
DEMOCMAST AS f1
INNER JOIN "DEMOORD_H" AS f2 ON f2.cusno = f1.cusno
INNER JOIN "DEMOORD_D" AS f3 ON f2.orderno = f3.orderno
GROUP BY
f1.ccountry
ORDER BY
totalsales DESC
データソースが保存されたら、次はそれをきれいにレンダリングするためのチャートウィジェットを作成します。新しく作成したデータ・ソースに隣接する行メニュー・オプションを使用して、「ウィジェットの作成」をクリックし、「Column Chart」タイルを選択して、チャートの設定プロセスを開始します。今回は、Y軸に総売り上げ、X軸に国名を表示し、上位10カ国に限定して表示したいと思います。従って、データ設定はこのようにします。
クリーンで読みやすく、微積分の学位を持っていなくても、ここに描かれていることを理解することができます。さらに、売上高を示す各バーにコンテキストを追加するために、ツールチップの形でマウスホバーアクションを使用して、各バーの背後にある詳細、すなわち、各国の売上高合計を構成する注文の合計数と異なる顧客の合計数を表示することができます。
そのために、UIセクションを展開し、「ツールチップ」のチェックボックスをオンにし、その下の<>ボタンをクリックして、カスタムツールチップの設定を行います。
ドキュメントに記載されているように、カスタム設定でオーバーライドできるツールチップのプロパティは10個あります。
- beforeTitle:ツールチップの最初の行として表示されるテキストで、指定された “title”よりも前に表示されます。
- Title:ツールチップのタイトルとして表示されるテキストで、”beforeTitle”の下、”afterTitle”の前に指定します。 タイトル値が指定されていない場合、ウィジェットのデータ構成でラベルフィールドと関連付けられた値が優先されます。
- afterTitle:タイトル値のすぐ下に表示されるテキスト
- beforeBody：データ値フィールドの直前に表示されるテキスト（ここでは “label”プロパティと呼称）。
- Label: ツールチップの中央に表示されるテキスト。ラベルの値が指定されていない場合、ウィジェットのデータ設定にあるデータフィールドに関連付けられた値が適用されます。
- afterLabel:ラベル（データフィールド）値の直後の行に表示されるテキスト。
- afterBody: ボディ部（ラベル）の直後の行に表示されるテキストで、”afterLabel”指定に続くもの。
- beforeFooter:ツールチップの下部に表示されるテキストで、”Footer”よりも前に表示される。
- Footer: ツールチップの下部に表示されるテキストで、任意の “beforeFooter” の後、任意の “afterFooter” よりも前に表示されます。
- afterFooter: ツールチップの最下部に表示されるテキスト
ツールチップ・ウィンドウは、タイトル・セクション、ボディ/ラベル・セクション、フッター・セクションの3つの「セクション」を持っています。デフォルトでは、ツールチップはタイトルとラベルの2行で構成されていますが、これらのプロパティを使用して、デフォルト値を上書きし、最大8行まで追加することができます。タイトルとフッターのテキストはすべて太字で表示され、ボディ/ラベルセクションのテキストは通常のテキストで表示されます。
この例では、いずれかのバーにマウスを乗せると、デフォルトのタイトルとボディに、国名と正確なドル金額の合計が表示されるだけです。
もちろん、ツールチップの歯車機能を使って数値のフォーマットを変更することもできますが、それよりもさらに踏み込んで、デフォルト値以外の詳細、具体的には、売上を構成する顧客の総数と注文の総数を含めるようにしたいと思います（これは上記のデータソースにすでに含まれています）。
そこで、カスタムツールチップフォーマットウィンドウで、ツールチップを希望通りに構成するための簡単な関数を作成することにします。現在のバーのドル値には “value”変数で、対応するデータソースレコードの値には “rec”変数でアクセスできることに注意してください。このことを念頭に置いて、いくつかのプロパティをオーバーライドして、以下のように有用な補足情報をユーザに提供することができる。
return {
label: 'Total sales: ' + Ext.util.Format.usMoney(value),
beforeFooter: 'Total Customers: '+rec.get('TOTALCUSTS'),
footer: 'Total Orders: '+rec.get('TOTALORDS')
}.
この方法でツールチップをオーバーライドする場合、label プロパティは必ず指定しなければならず、他のプロパティはすべてオプションであることに注意してください。この例の構成では、次のようなツールチップになります。
このように、国ごとの補足的なサマリーデータを瞬時に表示するツールチップの仕組みを構築することで、追加情報を取得するためにサーバーを呼び出すことによる遅延をなくすことができます。
もちろん、インタラクティブな価値を高めるために、すべての顧客注文をリストする別のデータ ソースとグリッドを作成し、バーをクリックすると、対応する国によってフィルタリングされた注文グリッドがポップアップ ウィンドウに表示されるように、アプリで動作アクションを使用することもできます。このコンセプトはWarehouse Dashboardのサンプルアプリで示されており、円グラフのスライスをクリックすると、早期、遅延、または時間通りの注文のポップアップリストが表示されます。