KPI 다이얼 위젯(테마 적용 가능)
다이얼, 가로 막대 또는 세로 열과 같은 여러 레이아웃 중 하나를 사용하여 KPI(핵심 성과 지표) 값을 표시합니다. 상태 서식 적용을 사용하면 하나 또는 여러 KPI 목표 값을 강조 표시할 수 있습니다.
 |
이 위젯을 ThingWorx Web Component SDK 라이브러리에서 웹 구성 요소로 사용할 수도 있습니다.
|
구조
1. 위젯 레이블
2. 상태 서식 적용 트래커
3. KPI 값
4. 측정 단위 레이블
5. 값 트래커
위젯 레이아웃
다이얼 레이아웃 외에도 다음 레이아웃 중 하나를 사용하여 KPI 값을 표시하도록 위젯을 구성할 수 있습니다.
가로 막대
세로 열
상태 서식 적용
위젯에 상태 서식을 적용하여 호의 목표 값을 표시할 수 있습니다. 호는 여러 세그먼트로 나뉘며, 각 세그먼트는 KPI 값의 다양한 상태 또는 범위를 나타냅니다. 상태 서식 적용 규칙을 적용하여 현재 KPI 값을 기반으로 위젯의 스타일을 지정할 수 있습니다. 상태 서식을 적용하려면 다음 단계를 수행하십시오.
1. Composer에서 숫자 값 범위를 기반으로 스타일 정의를 적용하는 상태 정의 엔티티를 만듭니다.
2. Mashup Builder에서 위젯을 선택한 다음 속성 패널을 엽니다.
3. 상태 서식 적용을 클릭하여 TargetFormat 속성을 구성합니다.
4. 상태 서식 적용 대화 상자에서 상태 기반 스타일 정의를 선택합니다.
5. 종속 필드에서 Value를 선택합니다.
6. 1단계에서 만든 상태 정의를 선택한 다음 완료를 클릭합니다.
7. 매쉬업을 저장한 다음 봅니다.
런타임 시 상태 서식 적용 규칙은 적용된 스타일 정의 및 현재 값을 기반으로 위젯에 적용됩니다. 다음 예에서는 위젯에 상태 서식이 적용된 다이얼을 보여줍니다. 상태 서식 적용 호가 세 개의 KPI 값 범위로 분할됩니다.
필요에 따라 상태 정의 내에 정의된 각 상태에 대한 상태 아이콘을 표시할 수도 있습니다. 아이콘은 기본적으로 위젯의 오른쪽에 표시됩니다. IconPosition 속성을 사용하여 아이콘 위치를 왼쪽으로 설정할 수 있습니다. 아이콘의 최대 크기를 설정하려면 MaxIconSize 속성을 사용합니다.
위젯에 상태 서식 적용에 대한 자세한 내용은 위젯에 상태 서식 적용을 참조하십시오.
다이얼 시작 및 끝 각도 설정
StartAngle 및 EndAngle 속성을 사용하여 다이얼 호의 시작 각도와 끝 각도를 구성할 수 있습니다. StartAngle 속성은 트래커 호의 시작점을 지정합니다. 두 속성은 0도에서 360도 사이의 값을 지원합니다. 호는 기본적으로 45도에서 315도 사이의 시계 방향으로 6시 위치에서 계산됩니다. 위젯의 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을 기준으로 설정합니다. 0에서 360 사이의 양수 각도를 입력할 수 있습니다. 각도 방향을 설정하려면 Direction 속성을 사용합니다.
|
NUMBER
|
45
|
N
|
N
|
|
EndAngle
|
다이얼의 값과 목표 트래커의 끝 각도를 6시 위치에서 시작하여 0을 기준으로 설정합니다. 0에서 360 사이의 양수 각도를 입력할 수 있습니다. 각도 방향을 설정하려면 방향 속성을 사용합니다.
|
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
|