Time Series Table
Time series table 위젯은 시간에 따른 텔레메트리 값을 표 형식으로 보여 줍니다. 추세를 그래프로 보여 주는 차트 위젯과 달리 타임스탬프와 함께 정확한 숫자 값을 보여 주므로, 과거·실시간 데이터 분석, 여러 매개변수 비교, 이상 탐지, 보고용 시간 기록 내보내기에 알맞습니다.
위젯 추가
섹션 제목: “위젯 추가”- 대시보드를 수정 모드로 엽니다. 위쪽 툴바의 위젯 추가를 클릭하거나, 빈 대시보드 가운데의 위젯 추가 아이콘을 클릭합니다.
- 위젯 번들 선택 대화상자에서 Tables를 찾아 클릭합니다.
- Time series table 위젯을 선택합니다.
- 시간 창, 데이터 소스, 열, 모양을 설정한 다음 추가를 클릭합니다.
위젯 설정 대화상자에는 기본 탭과 고급 탭이 있습니다. 기본 탭은 설정을 타임윈도우, 데이터 소스, 열, 카드 모양, 액션으로 나눕니다.
시간 창
섹션 제목: “시간 창”텔레메트리 데이터를 표시할 기간을 정합니다. 옵션:
- 실시간 — 새 데이터가 들어오면 계속 갱신됩니다.
- 과거 N — 과거 24시간, 과거 7일 같은 상대 범위.
- 사용자 정의 — 절대 날짜·시간 범위.
데이터 집계를 켜면 고른 간격(예: 1시간, 1일)으로 묶은 요약 값을 표시합니다. 집계 함수: 평균, 합계, 최소, 최대, 숫자.
전체 설정 방법은 시간 창을 참고하세요.
데이터 소스
섹션 제목: “데이터 소스”Time series table은 데이터 소스를 하나 이상 지원합니다. 데이터 소스마다 다음 중 하나를 선택합니다.
- 장치 — 특정 HMI 장치 하나의 데이터.
- 개체 별명 — 엔티티 별칭에 맞는 모든 엔티티의 데이터. HMI 장치 그룹의 텔레메트리를 한꺼번에 표시할 때 씁니다.
열마다 텔레메트리 값을 나타내는 데이터 키 하나를 연결합니다. 열 행마다 다음을 설정합니다.
| 필드 | 설명 |
|---|---|
| 소스 | 데이터 유형: 시계열 — 시간 정보가 있는 텔레메트리 이력, 최신 — 가장 최근 값만. |
| 키 | 텔레메트리 키 이름(예: temperature, humidity). |
| 라벨 | 열 머리글 글자. 기본값은 키 이름입니다. |
| 단위 | 값 뒤에 표시하는 단위 접미사(선택 사항, 예: °C, %). |
| 소수점 | 숫자 값의 소수 자릿수. |
열 추가를 클릭해 열을 추가합니다. 열 행 오른쪽의 핸들을 끌어 순서를 바꿉니다.
열 설정
섹션 제목: “열 설정”열 행의 연필 아이콘을 클릭하면 데이터 키 구성 대화상자가 열립니다. 탭은 일반과 고급 두 가지입니다.
일반 탭
| 설정 | 설명 |
|---|---|
| 키 | 텔레메트리 키 이름. |
| 라벨 | 열 머리글 글자. |
| 단위 | 값 뒤에 표시하는 단위 접미사. |
| 소수점 | 소수 자릿수. |
| 데이터 후처리 기능 사용 | 표시 전에 값마다 적용하는 JavaScript 함수. 시그니처: f(value, ctx). |
고급 탭(열 설정)
| 설정 | 설명 |
|---|---|
| 기본 열 표시 여부 | 열을 기본으로 보일지 정합니다. 표시 — 항상 보입니다. 숨김 — 기본으로 표시하지 않습니다. 모바일 모드에서 숨김 — 데스크톱에서는 보이고 모바일에서는 숨깁니다. |
| ‘표시할 열’에서 열 선택 | 사용자가 표시할 열 패널에서 이 열을 켜고 끌 수 있는지 정합니다. 활성화 — 사용자가 보이거나 숨길 수 있습니다. 비활성화 — 켜고 끌 수 없습니다. |
| Include column in export | 데이터를 내보낼 때 이 열을 포함할지 정합니다. Always — 항상 내보냅니다. Only if column visible — 열이 보일 때만 내보냅니다. Never — 내보내지 않습니다. |
| 정렬 비활성화 | 이 열로 정렬하지 못하게 합니다. 내용이 복잡하거나 숫자가 아닌 열에 유용합니다. |
| 셀 스타일 함수 사용 | 셀마다 스타일을 정하는 JavaScript 함수. 시그니처: f(value, rowData, ctx). CSS 스타일 객체(예: { color: 'red', fontWeight: 'bold' })를 돌려줘야 합니다. |
| 셀 내용 함수 사용 | 셀 내용을 직접 그리는 JavaScript 함수. 시그니처: f(value, rowData, ctx). 형식화한 값이나 HTML 문자열을 돌려줍니다. 데이터를 내보낼 때도 같은 로직을 적용하려면 Use cell content function on export를 켭니다. |
페이지네이션
섹션 제목: “페이지네이션”페이지네이션 설정은 위젯 설정 대화상자의 고급 탭에 있습니다.
| 설정 | 설명 |
|---|---|
| 페이지네이션 표시 | 표 아래에 페이지 이동 컨트롤을 표시합니다. 기본으로 켜져 있습니다. |
| 페이지 단계 설정 | 페이지 크기 드롭다운에서 고를 수 있는 페이지 크기(예: 10, 25, 50). |
| 기본 페이지 크기 | 처음 불러올 때 페이지마다 보이는 행 수. |
카드 모양
섹션 제목: “카드 모양”| 설정 | 설명 |
|---|---|
| Card 제목 | 위젯 헤더에 표시되는 제목 글자. |
| 카드 아이콘 | 제목 옆에 표시하는 아이콘(선택 사항). |
| 카드 버튼 표시 | 툴바 버튼: 검색 — 전체 텍스트 필터, 표시할 열 — 열을 켜고 끄는 패널, Data export — 표 데이터 내려받기, 전체화면 — 전체 화면 보기. |
| 글자 색 | 위젯 안의 모든 글자에 적용하는 색. |
| 배경 색 | 위젯 카드 배경색. |
Time series table 위젯에서 쓸 수 있는 액션 소스는 다음과 같습니다.
| 액션 소스 | 실행 시점 |
|---|---|
| 동작 셀 버튼 | 행마다 끝에 붙는 버튼. |
| 행 클릭 시 | 사용자가 행의 아무 곳이나 클릭할 때. |
| 위젯 헤더 버튼 | 위젯 헤더의 버튼. 전체 작업에 씁니다. |
동작 유형과 설정 옵션 전체 목록은 위젯 동작을 참고하세요.
예: 24시간 동안의 온도와 습도
섹션 제목: “예: 24시간 동안의 온도와 습도”목표: 지난 24시간 동안 모든 HMI 장치의 온도·습도 텔레메트리를 시간 순서대로 표에 표시합니다.
사전 준비
temperature와 humidity를 텔레메트리 키로 MX On Cloud에 보내는 HMI 장치를 몇 개 준비합니다.
1단계. 위젯 추가
대시보드를 수정 모드로 엽니다. 위젯 추가를 클릭하고 Tables 번들을 선택한 다음 Time series table을 고릅니다.
2단계. 시간 창 설정
타임윈도우 영역에서 다음을 정합니다.
- 기간: 실시간, 과거 1일
- 집합: 없음
3단계. 데이터 소스 설정
데이터 소스 유형으로 개체 별명을 선택한 다음 별칭을 고르거나 만듭니다.
- 별칭 유형: 필터 기반
- 필터 유형: 개체 유형 → 장치
그러면 테넌트의 모든 HMI 장치로 결정됩니다.
4단계. 열 설정
다음 열마다 열 추가를 클릭합니다.
| 키 | 라벨 | 단위 | 소수점 |
|---|---|---|---|
temperature | Temperature | °C | 1 |
humidity | Humidity | % | 0 |
5단계. 카드 제목 설정
카드 모양 영역에서 Card 제목을 켜고 다음을 입력합니다.
Temperature and Humidity (24h)글꼴 크기를 18 px로 정합니다.
6단계. 저장
추가를 클릭해 위젯을 대시보드에 놓습니다. 필요하면 크기와 위치를 조정한 다음 대시보드 툴바의 저장을 클릭합니다.
결과
Time series table에 HMI 장치마다 텔레메트리 측정값이 시간 순서대로 표시됩니다. 사용자는 다음을 할 수 있습니다.
- 엔티티마다 타임스탬프와 함께 정확한 값을 봅니다.
- 어느 열로든 결과를 정렬합니다.
- 오프라인에서 쓰도록 데이터를 내보냅니다.
문제 해결
섹션 제목: “문제 해결”위젯에 데이터가 표시되지 않음
| 원인 | 해결 방법 |
|---|---|
| 데이터 소스나 엔티티 별칭이 틀림 | 데이터 소스 구성에서 올바른 장치나 개체 별명을 선택했는지 확인합니다. |
| 데이터 키 이름이 틀림 | 키 이름이 HMI 장치가 보내는 텔레메트리 키와 같은지 확인합니다. 키 이름은 대소문자를 구분합니다. |
| HMI 장치가 데이터를 보내지 않음 | 장치 → 최근 데이터를 열고 최근 값이 있는지 확인합니다. 비어 있으면 HMI 장치의 전송 설정과 토큰을 확인합니다. |
| 선택한 시간 창에 텔레메트리가 없음 | 시간 범위를 늘리거나 더 긴 과거 N 기간으로 바꿉니다. |
| 룰 체인 설정 오류 | 룰 체인에 HMI 장치 텔레메트리를 데이터베이스로 보내는 Save time series 노드가 있는지 확인합니다. |
시간 창이 틀리거나 없음
| 원인 | 해결 방법 |
|---|---|
| 시간 창 유형이 틀림 | 상황에 맞게 실시간과 과거 N 사이를 바꿉니다. |
| 집계 간격이 너무 큼 | 더 세밀하게 보려면 그룹 간격을 줄이거나, 원시 값을 보려면 집합을 없음으로 정합니다. 없음이면 위젯이 키마다 저장된 모든 포인트를 받으므로 시간 창은 좁게, 최대 값은 낮게 두고 페이지네이션을 켭니다. |
열이 없거나 틀림
| 원인 | 해결 방법 |
|---|---|
| 데이터 키를 추가하지 않음 | 열 영역을 열고 텔레메트리 키마다 열로 추가했는지 확인합니다. |
| 열이 기본으로 숨겨짐 | 열 설정을 열고 기본 열 표시 여부를 표시로 정합니다. |
| ‘표시할 열’에서 숨겨진 열 | 해당 열의 ‘표시할 열’에서 열 선택이 활성화인지 확인합니다. |
| 내보내기에서 빠진 열 | 열 설정을 열고 Include column in export를 Always나 Only if column visible로 정합니다. |
위젯이 느리거나 브라우저가 응답하지 않음
| 원인 | 해결 방법 |
|---|---|
| 페이지네이션 표시가 꺼져 있음 | 고급 탭에서 페이지네이션 표시를 다시 켭니다. 꺼져 있으면 위젯이 한 페이지 대신 시간 창의 모든 행을 상한 없이 한꺼번에 만듭니다. |
| 시간 창이 너무 넓음 | 시간 창을 줄입니다. 표는 서로 다른 타임스탬프마다 행을 하나씩 더하므로, 자주 보고하는 HMI 장치의 30일 원시 데이터는 행이 수천 개가 됩니다. |
| 집합이 없음으로 설정됨 | 원시 모드는 키마다 저장된 모든 포인트를 돌려줍니다. 그룹 간격과 함께 집계 함수를 정해 행 수를 줄입니다. |
| 최대 값이 너무 큼 | 최대 값은 위젯 전체가 아니라 데이터 키마다 적용되므로, 위젯 전체로는 대략 열 수 × 최대 값이 됩니다. 표가 실제로 표시할 수 있는 수준으로 낮춥니다. |
| 열이 너무 많음 | 열이 하나 늘 때마다 모든 행에 셀이 하나씩 늘어납니다. 넓은 표를 좁은 표 여러 개로 나누거나, 처음에 필요 없는 열은 기본 열 표시 여부를 숨김으로 정합니다. |