고급 데이터 키 설정

데이터 키 구성은 위젯에서 키 하나를 가져오고, 처리하고, 표시하는 방식을 정합니다. 탭은 두 가지입니다. 일반은 데이터 소스 설정, 고급은 열이나 시리즈의 모양 설정입니다.

데이터 키 구성을 열려면 위젯 데이터 소스 구성에서 키 옆의 연필 아이콘을 클릭합니다.

모든 위젯 유형에서 쓸 수 있습니다. 원시 데이터 값을 가져오고 준비하는 방식을 정합니다.

• 키 — 엔티티에서 읽을 텔레메트리나 속성 키.
• 라벨 — 위젯에 표시되는 이름(기본값은 키 이름).

값 옆에 표시되는 단위 접미사를 정합니다. 필드를 클릭하면 미터법, 야드파운드법, 하이브리드 단위계 사이를 자동 변환하는 단위 설정 대화상자가 열립니다.

값을 표시할 때 쓰는 소수 자릿수.

차트 위젯에서 쓸 수 있습니다. 데이터 시리즈의 색상을 정합니다.

시간 창 안의 여러 데이터 포인트를 값 하나로 줄이는 방식을 정합니다.

켜면 선택한 시간 창과 상관없이 가장 최근 값을 읽습니다.

집합을 없음 이외의 값으로 정했을 때 일부 차트 위젯에서 쓸 수 있습니다. 집계 값이 기준 기간에 비해 얼마나 바뀌었는지 계산합니다.

증분 계산 활성화를 켜고 다음을 설정합니다.

비교 기간 — 기준 시간 구간:

• 이전 구간 (기본)
• 1일 전
• 1주 전
• 1개월 전
• 1년 전
• 사용자 지정 구간

증분 계산 결과 — 표시할 값:

• 이전 값 — 비교 기간의 원래 값.
• 증분 (절대값) — 현재 값과 기준 값의 절대 차이.
• 증분 (퍼센트) — 차이를 백분율로 나타낸 값.

서버에서 받은 데이터 포인트마다 적용하는 JavaScript 함수입니다. 표시하기 전에 값을 변환하거나, 배율을 조정하거나, 형식을 바꿀 때 씁니다.

데이터 후처리 기능 사용을 켜고 함수 본문을 작성합니다.

시그니처: function(time, value, prevValue, timePrev, prevOrigValue): any

기본형 값(숫자, 문자열, 불리언)을 돌려줍니다.

예:

모든 값에 10 곱하기:

return value * 10;

정수로 반올림:

return Math.round(value);

연속한 데이터 포인트 사이의 상대 변화:

if (prevOrigValue) {
  return (value - prevOrigValue) / prevOrigValue;
} else {
  return 0;
}

날짜/시간 형식으로 표시:

if (value) {
  return moment(value).format('DD/MM/YYYY HH:mm:ss');
}
return '';

Alarms table 위젯과 Tables, Entity widgets 번들의 위젯에 적용됩니다.

열 머리글 글자를 바꿉니다. 기본적으로 머리글에는 키 라벨이 표시됩니다.

열 너비를 픽셀(예: 200px)이나 백분율(예: 20%)로 정합니다. 비워 두면 너비가 자동으로 정해집니다.

열의 처음 표시 상태를 정합니다.

• 표시 — 기본으로 열을 보여 줍니다.
• 숨김 — 기본으로 열을 숨깁니다.
• 모바일 모드에서 숨김 — 데스크톱에서는 보이고 모바일에서는 숨깁니다.

사용자가 위젯의 열 메뉴에서 이 열을 보이거나 숨길 수 있는지 정합니다.

• 활성화 — 표시 메뉴에 열이 나타납니다.
• 비활성화 — 표시 메뉴에서 열이 빠집니다.

켜면 사용자가 이 열로 표를 정렬할 수 없습니다.

값에 따라 셀에 사용자 지정 CSS 스타일을 적용합니다. 설정을 켜고 JavaScript 함수를 작성합니다.

시그니처: function(value, entity, ctx): {[key: string]: string}

CSS 키/값 객체를 돌려줍니다.

예:

글꼴 굵기와 색상 지정:

return {
  color: 'rgb(0, 112, 214)',
  fontWeight: 600
};

온도에 따른 색상:

var temperature = value;
var color = temperature > 25 ? 'red' : 'green';
return {
  fontWeight: 'bold',
  color: color
};

기본 셀 내용을 사용자 지정 HTML로 바꿉니다. 설정을 켜고 JavaScript 함수를 작성합니다.

시그니처: function(value, entity, ctx): string

매개변수는 셀 스타일 함수와 같습니다. 셀 안에 그려지는 HTML 문자열을 돌려줍니다.

예:

타임스탬프 형식 지정:

var createdTime = value;
return createdTime ? ctx.date.transform(createdTime, 'yyyy-MM-dd HH:mm:ss') : '';

HMI 장치 유형을 스타일 있는 배지로 표시:

var deviceType = value;
var color = '#AADdD8';
switch (deviceType) {
  case 'thermostat': color = 'orange'; break;
  case 'default': color = '#AADdD8'; break;
}
return '<div style="border: 2px solid #007F2F; border-radius: 10px; padding: 3px; ' +
  'background-color: ' + color + '; text-align: center;">' + deviceType + '</div>';

불리언을 색 있는 원으로 표시:

var active = value;
var color = active === 'true' ? '#078949' : '#B03737';
return '<span style="font-size: 18px; color: ' + color + '">&#x25CF;</span>';

Time series chart, Bar chart with labels 같은 차트 위젯에 적용됩니다.

• 범례에 표시 — 차트 범례에 시리즈 이름과 현재 값을 표시합니다.
• 기본 숨김 — 처음 불러올 때 시리즈를 숨깁니다. 사용자가 범례에서 시리즈 이름을 클릭하면 보입니다.

시리즈를 Y축에 할당합니다. 공유 축을 쓰려면 default를 고르고, 이 시리즈에 별도 눈금을 표시하려면 위젯 설정에서 만든 이름 있는 축을 고릅니다.

선과 막대 사이를 바꿔 시리즈를 그리는 방식을 정합니다.

선 모양을 정합니다. 시리즈 유형이 선이고 선 표시가 켜져 있을 때 쓸 수 있습니다.

• 선 표시 — 선을 그릴지 켜고 끕니다.
• 계단선 — 선을 계단 함수로 그립니다. 계단 정렬을 고릅니다.
  • 시작 — 구간 시작에서 계단이 바뀝니다.
  • 중간 — 중간 지점에서 계단이 바뀝니다.
  • 끝 — 구간 끝에서 계단이 바뀝니다.
• 부드러운 선 — 곧은 선분 대신 부드러운 곡선으로 그립니다.
• 선 유형 — 실선, 점선, 도트.
• 선 두께 — 선 두께(픽셀, 기본값: 2).

• 점 표시 — 선 위에 데이터 포인트 마커를 표시합니다.

켜면 다음을 설정합니다.

• 점 라벨 — 마커마다 옆에 데이터 값을 표시합니다. 위치(위, 아래), 글꼴 설정, 라벨 색상을 정합니다.
• 점 라벨 배경 — 라벨 뒤에 배경색을 넣습니다.
• 점 모양 — 마커 모양: 빈 원, 원, 사각형, 둥근 사각형, 삼각형, 다이아몬드, 핀, 화살표, 없음.
• 점 크기 — 마커 크기(픽셀, 기본값: 4).

시리즈 선과 차트 아래쪽 사이 영역을 채웁니다. 모드는 세 가지입니다.

• 없음 — 채우지 않습니다(기본값).
• 불투명도 — 불투명도를 정할 수 있는 단색 채우기(0–1, 기본값: 0.4).
• 그라데이션 — 시작과 끝 지점 값(백분율)으로 정하는 그라데이션 채우기.

이 시리즈의 차트 툴팁에서 값을 어떻게 형식화할지 정합니다. 위젯 수준에서 설정한 툴팁 형식보다 우선합니다.

시그니처: function(value, labelData): string

형식화된 문자열을 돌려줍니다.

예:

값을 섭씨로 표시:

return value + ' °C';

소수 둘째 자리와 단위를 붙여 표시:

return value.toFixed(2) + ' A';

천 단위 구분 기호를 넣은 숫자:

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
return value ? numberWithCommas((value / 1).toFixed(1)) + ' ' : '';