데이터 바인딩

데이터 바인딩은 프로젝트 데이터베이스와 IoT 보드의 위젯 사이의 다리입니다. 위젯의 거의 모든 구성 가능한 속성(제목, 값, 색상, 차트 시리즈, 게이지 범위 등)은 프로젝트의 TimescaleDB에서 오는 실시간 데이터로 동적으로 구동될 수 있습니다. 이 페이지는 테이블 컬럼을 위젯 속성에 연결하는 방법과 필터로 데이터를 정교화하는 방법을 설명합니다.

데이터가 프로젝트 데이터베이스에 어떻게 도달하는지에 대한 넓은 그림은 데이터 처리 개요를 참조하세요.

데이터를 바인딩하는 두 가지 방법

IronFlock Board Studio는 두 가지 기본 바인딩 모드를 지원합니다:

값 참조 — 위젯 속성에 단일 스칼라 값(한 컬럼의 최신 레코드)을 바인딩합니다.
테이블 참조 — 배열을 기대하는 위젯 속성에 전체 결과 집합(여러 행)을 바인딩합니다.

두 모드 모두 필터링을 지원하며 실시간 업데이트를 제공합니다. 프로젝트 데이터베이스에 새 행이 도착하는 즉시, 바인딩된 위젯 속성은 폴링 없이 자동으로 업데이트됩니다.

값 참조

대부분의 위젯 구성 필드는 단일 값을 기대합니다 — 제목, 숫자 표시, 색상, 상태 레이블 등. 위젯 편집기에서 이러한 필드 아래에 작은 데이터 바인딩 스위치가 있습니다.

스위치를 활성화한 후 필드를 클릭하면 프로젝트 데이터베이스의 모든 가용 데이터를 나열하는 드롭다운이 열립니다. 다음을 할 수 있습니다:

프로젝트 데이터베이스에서 테이블 선택.
해당 테이블 내의 컬럼을 속성에 바인딩할 대상으로 선택.

예: 게이지 위젯의 제목 필드를 machine 테이블의 name 컬럼에 바인딩하거나, 숫자 위젯의 값 필드를 sensor_data 테이블의 최신 temperature 값에 바인딩할 수 있습니다.

필터 아이콘

컬럼을 위젯 속성에 바인딩하면 필드 아래의 데이터 스위치 옆에 작은 필터 아이콘이 나타납니다. 이를 클릭하면 값 추출 시 고려되는 행을 좁히기 위한 필터를 구성하는 대화 상자가 열립니다. 아래의 필터 구성을 참조하세요.

테이블 참조

일부 위젯은 스칼라가 아닌 값의 배열을 기대합니다. 예를 들어 차트 위젯은 선을 그리기 위해 많은 (x, y) 점이 필요하고, 테이블 위젯은 많은 행이 필요합니다.

이러한 장소에서 위젯 편집기는 필드 레이블 옆에 추가 버튼(배열 요소를 수동으로 추가하기 위해)과 데이터 바인딩 스위치를 표시합니다.

수동 모드: 추가를 클릭하여 정적 값을 가진 요소를 하나씩 추가합니다.
데이터 바인딩 모드: 스위치를 켜서 배열을 테이블에 바인딩합니다. 테이블을 선택하면 기준에 일치하는 각 행이 배열의 한 요소가 됩니다.

데이터 스위치 옆의 필터 아이콘을 사용하면 필요한 조건에 맞게 반환되는 행을 좁힐 수 있습니다 — 필터 구성을 참조하세요.

컬럼을 배열 요소 필드에 매핑

테이블 참조 데이터 바인딩이 활성화되면 연결된 테이블의 값을 사용하여 단일 배열 요소 템플릿을 구성합니다. 선 차트의 경우 요소에 x와 y 값이 필요합니다 — 바인딩된 테이블에서 각 축에 공급할 컬럼을 선택하여 둘 다 데이터 구동으로 만들 수 있습니다. 필터링된 결과 집합의 각 행은 해당 매핑을 사용하여 차트에 렌더링됩니다.

동일한 패턴은 배열을 받는 모든 위젯(막대 차트, 테이블, 목록, 히트맵 등)에 적용됩니다.

필터 구성

필터는 값 참조 또는 테이블 참조에 사용되는 행을 좁힙니다. 대화 상자의 섹션들은 표시된 순서대로 적용되며, 이는 프로젝트 데이터베이스가 적용하는 순서이기도 합니다:

1. 롤링 시간 창

레코드가 시간별로 어떻게 필터링되는지 구성합니다:

롤링 창 — 현재 시간을 기준으로 마지막 N 분, 시간, 일 등의 행만 표시합니다.
사용자 정의 시간 창 — 시작 매개변수와 종료 매개변수의 이름을 지정합니다. 이러한 매개변수 이름은 런타임에 캘린더 위젯에 의해 공급되어 최종 사용자가 보드에서 시간 범위를 선택할 수 있게 합니다.

2. 임의 컬럼 필터

다음 값 소스 중 하나를 사용하여 원하는 만큼의 컬럼 수준 필터를 추가합니다:

상수 값 — 하드코딩된 값 (예: status = 'active').
필터 매개변수 — 필터 위젯에서 URL을 통해 공급되는 값.
라우팅 경로 세그먼트 — 탐색 위젯을 통해 현재 페이지 URL에서 추출된 값.

3. 집계

기본적으로 바인딩은 원시 데이터 행을 반환합니다. 이를 시간에 따라 집계로 전환하면 프로젝트 데이터베이스가 선택된 레코드를 시간 버킷 — 또는 카테고리 — 로 묶어 그룹당 계산된 값 하나를 반환합니다: 시간별 평균, 기계별 레코드 수, 오늘의 합계 등.

필터가 이 단계보다 먼저 실행되므로, 어떤 레코드가 각 버킷에 들어갈지는 필터가 결정합니다. 집계는 별도의 페이지에서 자세히 다룹니다. 집계 및 다운샘플링을 참조하세요.

4. 행 제한

위젯에 대해 반환되는 행 수의 상한을 설정합니다. 제한은 3000을 초과할 수 없습니다 — 이 상한은 브라우저와 프로젝트 데이터베이스를 과도하게 큰 결과 집합으로부터 보호합니다.

집계된 바인딩에서는 반환되는 버킷 수가 대신 도출되며(위젯의 폭 또는 선택한 간격에서), 행 제한은 대체 안전장치로만 작동합니다.

모든 섹션은 함께 결합됩니다: 시간 창이 시간 범위를 좁히고, 컬럼 필터가 행을 더 정교화하며, 집계가 이를 버킷당 값 하나로 축약하고, 행 제한이 최종 출력을 상한합니다.

JSON 컬럼에서 필드 선택

프로젝트 데이터베이스는 구조화되지 않았거나 반구조화된 데이터(디바이스 텔레메트리 페이로드, 구성 블롭, 중첩 레코드 등)를 위한 JSON 컬럼을 지원합니다.

JSON 컬럼을 위젯 속성에 바인딩할 때 JSON 구조 내의 리프 필드 경로를 지정하기 위한 추가 입력이 나타납니다. 경로는 표준 JavaScript 객체 표기법을 사용합니다:


sensor.temperature
payload.items.0.value
metadata.location.city

위젯은 각 레코드에서 해당 경로의 값을 추출합니다. 이는 값 참조(최신 JSON 레코드에서 추출된 리프)와 테이블 참조(각 행에서 추출된 리프) 모두에서 작동합니다.

요약

스칼라 속성(제목, 값, 색상)에는 값 참조를 사용합니다 — tsp 기준 최신 값을 얻습니다.
배열 속성(차트 시리즈, 테이블, 목록)에는 테이블 참조를 사용합니다 — 컬럼을 배열 요소 필드에 매핑합니다.
시간 창, 컬럼 필터 및 행 제한(최대 3000)으로 행을 정교화하려면 필터 대화 상자를 사용합니다.
레코드 대신 계산된 값을 원할 때는 바인딩을 집계로 전환합니다 — 집계 및 다운샘플링을 참조하세요.
구조화되지 않은 JSON 컬럼을 파고들기 위해 JSON 경로 표기법을 사용합니다.