prop: trend 최근 N초를 굴려 보여 준다 · 과거 값은 서버에서 받아 채운다설명
값이 지금 얼마인지가 아니라 어디로 가고 있는지를 보여 줍니다. 올라가는 중인지 내려가는 중인지, 방금 튀었는지는 숫자 하나로는 알 수 없습니다.
다른 prop 과 달리 요소의 무엇을 바꾸는 것이 아니라 요소 위에 그래프를 덮어 그립니다. 그래서 대상이 사각형이든 심볼이든 상관없고, 자리만 잡아 두면 됩니다. 덮은 그래프는 클릭을 가로채지 않으므로 아래에 버튼이 있어도 그대로 눌립니다.
화면을 열면 서버에서 과거 값을 받아 먼저 채웁니다. 그래서 방금 연 화면도 빈 그래프가 아니라 지난 흐름을 담고 있습니다. 그 뒤로는 값이 올 때마다 오른쪽에 붙습니다.
trend 입니다 — 차트 요소가 아니라 아무 도형 위에 시계열을 얹습니다. 축도 범례도 없이 선만 그립니다.설정 항목
| 이름 | 값 | 기본 | 설명 |
|---|---|---|---|
| 태그 | tagId | — | 읽을 게이트웨이 태그. 숫자가 아닌 값은 무시합니다. |
| 구간(초) | number | 60 | 보여 줄 최근 시간. 이보다 오래된 점은 버립니다. |
| 선 색 | color | 하늘색 | 추이선과 채움의 색. |
| 최소 / 최대 | number | (자동) | 세로 눈금을 고정합니다. 비워 두면 보이는 값에 맞춰 자동으로 늘고 줄어듭니다. |
| 과거 값 | number | 200 | 화면을 열 때 서버에서 받아 채울 점의 수. 0 이면 받지 않고 빈 그래프에서 시작합니다. |
| 집계 | avg | min | max | (원본) | 구간을 잘게 나눠 대푯값 하나로 줄입니다. 값이 촘촘한 태그에. |
| 버킷(ms) | number | (자동) | 집계를 켰을 때 한 칸의 크기. 비우면 구간÷과거 값 수로 정합니다(최소 1초). |
| 단위 | string | (없음) | 현재값 라벨에 붙습니다. |
동작
1초마다 다시 그립니다. 값이 안 와도 시간은 흐르므로 그래프가 왼쪽으로 밀려나고, 구간을 벗어난 점은 버려집니다.
세로 눈금을 비워 두면 보이는 값에 맞춰 자동으로 늘고 줄어듭니다. 위아래로 8%쯤 여유를 두고, 값이 전부 같으면 ±1 범위를 잡습니다. 편하지만 눈금이 계속 바뀌므로 진폭을 눈으로 비교할 수 없습니다 — 여러 추이를 나란히 놓고 견주는 화면이라면 최소·최대를 고정하세요.
과거 값을 못 받아도 조용히 넘어갑니다. 서버가 이력을 안 갖고 있거나 권한이 없으면 백필 없이 라이브만으로 시작합니다 — 오류가 뜨지 않으므로 "이 태그는 원래 이력이 없나 보다"와 구분되지 않습니다. 열자마자 그래프가 비어 있다면 이력 조회 쪽을 확인하세요.
집계를 켜면 과거와 현재가 같은 해상도로 이어집니다. 받아 온 과거 값과 실시간으로 들어오는 값에 같은 버킷을 적용하기 때문입니다. 안 그러면 왼쪽 절반은 뭉개져 있고 오른쪽 절반만 촘촘한 그래프가 됩니다.
구간을 길게 잡을수록 점이 쌓입니다. 값이 빠른 태그를 한 시간 구간으로 두면 점이 수만 개가 되어 화면이 무거워집니다. 그럴 때는 집계를 켜서 한 칸에 하나씩으로 줄이세요.