KPI ダイヤルウィジェット (テーマ指定可能)
ダイヤル、横棒、縦棒などのいくつかのレイアウトのいずれかを使用して主要業績評価指標 (KPI) の値を表示します。状態のフォーマットを適用して、1 つまたは複数の KPI 値ターゲットをハイライトできます。
 |
このウィジェットは ThingWorx Web Component SDK ライブラリで Web コンポーネントとしても使用できます。
|
構造
1. ウィジェットラベル
2. 状態のフォーマットトラッカー
3. KPI 値
4. 測定単位ラベル
5. 値トラッカー
ウィジェットのレイアウト
ダイヤルのレイアウトに加え、以下のいずれかのレイアウトを使用して KPI 値を表示するようにウィジェットを設定できます。
横棒
縦棒
状態のフォーマットの適用
状態のフォーマットをウィジェットに適用して、ターゲット値の円弧を表示できます。円弧は、KPI 値の異なる状態または範囲を表す複数のセグメントに分割されています。状態のフォーマット規則を適用して、現在の KPI 値に基づいてウィジェットのスタイルを設定できます。状態のフォーマットを適用するには、次の手順を実行します。
1. Composer で、数値の範囲に基づいてスタイル定義を適用する状態定義エンティティを作成します。
2. Mashup Builder で、ウィジェットを選択し、「プロパティ」パネルを開きます。
3. 「状態のフォーマット」をクリックして TargetFormat プロパティを設定します。
4. 「状態のフォーマット」ダイアログで、「状態ベースのスタイル定義」を選択します。
5. 「依存フィールド」で、Value を選択します。
6. ステップ 1 で作成した状態定義を選択し、「完了」をクリックします。
7. 保存してから、マッシュアップを表示します。
ランタイムで、適用されているスタイル定義と現在の値に基づいて、状態のフォーマット規則がウィジェットに適用されます。次の例は、状態のフォーマットがウィジェットに適用されているダイヤルを示しています。状態のフォーマットの円弧は 3 つの KPI 値の範囲に分割されています。
必要に応じて、状態定義内で定義されている状態ごとにステータスアイコンを表示できます。デフォルトでは、このアイコンはウィジェットの右側に表示されます。IconPosition プロパティを使用して、アイコンの位置を左側に設定できます。アイコンの最大サイズを設定するには、MaxIconSize プロパティを使用します。
ウィジェットに状態のフォーマットを適用する方法の詳細については、ウィジェットへの状態フォーマットの適用を参照してください。
ダイヤルの開始角度と終了角度の設定
StartAngle および EndAngle プロパティを使用して、ダイヤルの円弧の開始角度と終了角度を設定できます。StartAngle プロパティは、トラッカーの円弧の開始点を指定します。これら 2 つのプロパティでは 0 度から 360 度までの値を使用できます。デフォルトでは、円弧は 6 時の位置から時計回りの方向に 45 度から 315 度までの間で計算されます。ウィジェットの Direction プロパティを使用して円弧の方向を変更できます。次の例は、開始角度が 90 度に設定され、終了角度が 270 度に設定されているダイヤルトラッカーを示しています。
KPI 値のフォーマット
複数のコンフィギュレーションプロパティを使用して KPI 値をフォーマットできます。UnitOfMeasure コンフィギュレーションを使用して KPI 値の測定単位を指定できます。この測定単位は、KPI 値にマウスポインタを合わせるとツールヒントに表示されます。ShowUOMLabel プロパティを true に設定すると、ウィジェットは KPI 値の横に測定単位 (UOM) を表示します。ValueFormat コンフィギュレーションでは、0.000 構文を使用して、KPI 数値の小数フォーマットを設定できます。
ウィジェットのプロパティ
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド
|
ローカリゼーション
|
|---|---|---|---|---|---|
|
Clicked
|
ウィジェットがクリックされたときにトリガーされるバインド可能なイベント。
|
イベント
|
Y
|
N
|
|
|
ValueFormat
|
状態定義エンティティを使用してウィジェットと KPI 値に状態のフォーマットを適用します。
|
状態定義
|
0000
|
Y
|
N
|
|
Label
|
ウィジェットラベルのテキストを指定します。
|
STRING
|
ラベル
|
Y
|
Y
|
|
Layout
|
ウィジェットでの KPI 値の表示に使用するレイアウトのタイプを制御します。オプション: 「ダイヤル」、「横棒」、「縦棒」
|
STRING
|
ダイヤル
|
N
|
N
|
|
StartAngle
|
ダイヤル上の値とターゲットトラッカーの開始角度を、6 時の位置から開始してゼロを基準に設定します。0 から 360 までの正の角度を入力できます。Direction プロパティを使用して角度方向を設定します。
|
NUMBER
|
45
|
N
|
N
|
|
EndAngle
|
ダイヤル上の値とターゲットトラッカーの終了角度を、6 時の位置から開始してゼロを基準に設定します。0 から 360 までの正の角度を入力できます。Direction プロパティを使用して角度方向を設定します。
|
NUMBER
|
315
|
N
|
N
|
|
Direction
|
ダイヤル、縦棒、または横棒で、値トラッカーの方向を指定します。
オプション
ダイヤル: 時計回り/反時計回り
水平: 左から右/右から左
垂直: 下から上/上から下
|
STRING
|
ダイヤル: 時計回り
水平: 左から右
垂直: 下から上
|
N
|
N
|
|
IconPosition
|
値ラベルを基準にした KPI ステータスアイコンの位置を指定します。状態のフォーマットを使用して表示するアイコンを指定できます。
|
STRING
|
右
|
Y
|
N
|
|
LabelAlignment
|
ウィジェットラベルの整列を制御します。オプション: 「左」、「中央」、「右」
|
STRING
|
左
|
Y
|
N
|
|
IconSize
|
KPI ステータスアイコンのサイズを設定します。オプション: 「小」、「中」、「大」、「特大」
|
STRING
|
小
|
Y
|
N
|
|
LabelType
|
ラベルタイプを設定します。オプション: 「キャプション」、「本文」、「ラベル」、「タイトル」、「大きいタイトル」、「サブヘッダー」、「ヘッダー」、「大きいヘッダー」
|
STRING
|
ラベル
|
N
|
N
|
|
MinimumValue
|
ウィジェットに表示する最小 KPI 値を設定します。
|
NUMBER
|
0
|
Y
|
N
|
|
MaximumValue
|
ウィジェットに表示する最大 KPI 値を設定します。
|
NUMBER
|
100
|
Y
|
N
|
|
UnitOfMeasure
|
KPI 値の測定単位を指定します。測定単位がツールヒントに表示されます。
|
STRING
|
空
|
Y
|
Y
|
|
ShowUOMLabel
|
KPI 値の横に測定単位が表示されます。
|
BOOLEAN
|
False
|
Y
|
N
|
|
Value
|
KPI 値を設定します。
|
NUMBER
|
空
|
Y
|
N
|
検証プロパティ
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か (Y/N)
|
ローカライズ可能か (Y/N)
|
|---|---|---|---|---|---|
|
ValidationState
|
検証状態を設定するバインド可能なプロパティ。このプロパティは Undefined、Unvalidated、Valid、または Invalid に設定できます。
|
STRING
|
Undefined
|
Y
|
N
|
|
ValidationOutput
|
ウィジェット検証の出力を取得します。戻り値は Undefined、Unvalidated、Valid、または Invalid です。
|
STRING
|
Y
|
N
|
|
|
Validate
|
ウィジェットの値が変更されたときにトリガーされるバインド可能なイベント。このイベントをサービスまたは関数にバインドして、検証のパターンまたは定義式を適用します。
|
イベント
|
Y
|
N
|
|
|
CriteriaMessage
|
検証に失敗したときに表示されるメッセージ。
|
STRING
|
空
|
Y
|
|
|
CriteriaMessageDetails
|
検証失敗のメッセージに関する詳細情報を表示するセカンダリメッセージ。
|
STRING
|
空
|
Y
|
Y
|
|
ShowValidationSuccess
|
検証に成功したときに、成功のメッセージを表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
SuccessMessage
|
検証に成功したときに表示されるメッセージ。
|
STRING
|
Y
|
Y
|
|
|
SuccessMessageDetails
|
検証成功のメッセージに関する詳細情報を表示するセカンダリメッセージ。
|
STRING
|
Y
|
Y
|
|
|
ValidationSuccessIcon
|
検証に成功したときに、ステータスメッセージ内に表示する SVG アイコンを選択します。
|
SVG アイコンのリスト
|
PTC Success
|
N
|
N
|
|
ShowValidationFailure
|
検証が失敗した場合に表示する失敗メッセージを設定します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ValidationFailureIcon
|
検証に失敗したときに、ステータスメッセージ内に表示する SVG アイコンを選択します。
|
SVG アイコンのリスト
|
PTC error
|
N
|
N
|
|
MinValueFailureMessage
|
KPI 値が MinimumValue プロパティで設定されている値より小さい場合に表示されるメッセージ。
|
テキストフィールド
|
<MinValue> is the minimum value.
|
Y
|
Y
|
|
MaxValueFailureMessage
|
KPI 値が MaximumValue プロパティで設定されている値より大きい場合に表示されるメッセージ。
|
テキストフィールド
|
<MaxValue> is the maximum value
|
Y
|
Y
|