차트 레퍼런스
D.Hub 대시보드에서 제공하는 위젯 유형의 상세 설정 가이드입니다. 각 위젯의 특성과 설정 항목을 파악하여 목적에 맞는 시각화를 구성할 수 있습니다.
Statistic Card (통계 카드)
단일 숫자 KPI를 강조하여 표시합니다. 대시보드 상단에 배치하여 핵심 지표를 한눈에 파악할 수 있습니다.
- 단일 숫자 KPI: 하나의 집계 값을 크게 표시 (예: 총 매출, 활성 사용자 수)
- 접두사/접미사: 단위 표시 (예: $, ₩, %, 건)
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 값 필드 | ✅ | 수치 필드 및 집계 함수 |
| 접두사 (Prefix) | 값 앞에 표시할 텍스트 (예: $, ₩) | |
| 접미사 (Suffix) | 값 뒤에 표시할 텍스트 (예: %, 건) |
Gauge (게이지)
목표 대비 현재 값의 달성률을 시각화합니다. 반원형 게이지로 현재 위치를 직관적으로 표현합니다.
- 달성률 표시: 최소~최대 범위 내에서 현재 값의 위치를 시각적으로 표현
- 목표 값: 목표선을 설정하여 달성 여부를 확인
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 값 필드 | ✅ | 수치 필드 및 집계 함수 |
| 최소 값 (Min) | 게이지 최소 값 (기본값: 0) | |
| 최대 값 (Max) | 게이지 최대 값 (기본값: 100) | |
| 목표 값 (Target) | 목표선 표시 값 |
BarChart (막대 차트)
범주별 수치를 비교하는 데 가장 효과적인 차트입니다.
- 범주별 비교: X축에 범주, Y축에 수치를 배치하여 항목 간 차이를 시각적으로 비교
- 스택 모드: 여러 시리즈를 누적하여 전체 대비 각 항목의 기여도를 표현
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| X축 필드 | ✅ | 범주 축에 매핑할 필드 |
| Y축 필드 | ✅ | 값 축에 매핑할 필드 및 집계 함수 |
| 시리즈 구분 | 그룹화할 필드 (다중 시리즈 생성) | |
| Stacked 모드 | 스택 차트 활성화 여부 |
LineChart (선 차트)
시계열 데이터의 추세와 변화를 시각화합니다. 다중 라인을 통해 여러 시리즈를 동시에 비교할 수 있습니다.
- 시계열 추세: X축에 날짜/시간 필드를 배치하여 시간 흐름에 따른 변화를 표현
- 다중 라인: 여러 메트릭 또는 그룹을 별도의 라인으로 표시
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| X축 필드 | ✅ | 시간 또는 연속형 필드 |
| Y축 필드 | ✅ | 수치 필드 및 집계 함수 |
| 시리즈 구분 | 그룹화할 필드 (다중 라인 생성) | |
| Show Points | 데이터 포인트 마커 표시 여부 |
PieChart (파이 차트)
전체 대비 각 항목의 비율을 시각화합니다. 구성비를 직관적으로 파악하는 데 유용합니다.
- 비율 표시: 각 슬라이스에 퍼센트 값을 라벨로 표시
- 도넛 모드: 중앙을 비워 도넛 형태로 표시 가능
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 항목 필드 | ✅ | 범주를 나타내는 필드 |
| 값 필드 | ✅ | 수치 필드 및 집계 함수 |
| 차트 유형 (Variant) | Pie 또는 Donut | |
| 범례 표시 (Show Legend) | 범례 표시 여부 | |
| 퍼센트 표시 (Show Percentage) | 슬라이스에 퍼센트 값 표시 여부 |
Heatmap (히트맵)
두 차원의 교차점에서 값의 강도를 색상으로 표현합니다. 패턴과 밀집도를 시각적으로 파악하는 데 적합합니다.
- 2차원 매트릭스: X축과 Y축 범주의 교차점에 값을 색상 강도로 표현
- 색상 스케일: 순차(Sequential) 또는 발산(Diverging) 색상 스케일 선택
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| X축 필드 | ✅ | 가로축 범주 필드 |
| Y축 필드 | ✅ | 세로축 범주 필드 |
| 값 필드 | ✅ | 색상 강도에 매핑할 수치 필드 |
| 색상 스케일 (Color Scale) | Sequential 또는 Diverging |
Map (지도)
위치 기반 데이터를 지도 위에 시각화합니다. 위도/경도 좌표를 기반으로 데이터 포인트를 마커로 표시합니다.
- 좌표 기반: 위도(Latitude)와 경도(Longitude) 필드를 매핑하여 지도 위에 포인트 표시
- 용도: 지역별 매출, 매장/센서 위치, 이동 경로 시각화
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 위도 필드 | ✅ | Latitude 값이 담긴 수치 필드 |
| 경도 필드 | ✅ | Longitude 값이 담긴 수치 필드 |
| 라벨 필드 | 마커에 표시할 라벨 필드 | |
| 값 필드 | 마커 크기/색상에 매핑할 수치 필드 |
DataTable (데이터 테이블)
데이터를 행과 열의 테이블 형태로 표시합니다. 상세 데이터를 조회하거나 정렬이 필요한 경우에 사용합니다.
- 정렬: 컬럼 헤더 클릭으로 오름차순/내림차순 정렬
- 페이지네이션: 대량 데이터 조회 시 페이지 단위로 분할
- 검색: 테이블 내 검색 필터로 데이터 필터링
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 데이터 소스 | ✅ | 조회할 데이터셋 또는 SQL 쿼리 |
| 페이지 크기 (Page Size) | 한 페이지당 표시할 행 수 (5, 10, 20, 50) | |
| 정렬 (Sortable) | 컬럼 정렬 활성화 여부 | |
| 검색 (Searchable) | 검색 필터 활성화 여부 |
DateRangeSelector (날짜 범위 선택기)
대시보드의 글로벌 날짜 필터 역할을 합니다. 이 위젯에서 선택한 날짜 범위가 연결된 위젯에 자동으로 전파됩니다.
- 날짜 범위 필터: 날짜 범위 변경 시 연동된 모든 위젯이 해당 기간으로 필터링
- 프리셋: 최근 7일, 최근 30일 등 빠른 선택 옵션
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 기본 범위 (Default Range) | 초기 선택될 범위: 최근 7일, 최근 30일, 사용자 지정 | |
| 사용자 지정 허용 (Allow Custom Range) | 사용자가 직접 날짜를 선택할 수 있는지 여부 | |
| 날짜 형식 (Display Format) | YYYY-MM-DD, MM/DD/YYYY, DD.MM.YYYY |
정보
DateRangeSelector는 대시보드당 하나만 배치하는 것을 권장합니다. 쿼리 모드에서는 $from과 $to 변수를 사용하여 날짜 필터를 적용합니다. 자세한 내용은 데이터 설정 문서를 참조하세요.
추가 예정 위젯
추가 예정 기능
위젯 유형 요약
| 위젯 | 카테고리 | 주요 용도 | 권장 데이터 |
|---|---|---|---|
| Statistic Card | Statistics | KPI 강조 | 단일 집계 값 |
| Gauge | Statistics | 달성률 표시 | 단일 집계 값 + 목표 |
| BarChart | Charts | 범주별 비교 | 범주형 + 수치형 |
| LineChart | Charts | 시계열 추세 | 시간형 + 수치형 |
| PieChart | Charts | 구성비 표시 | 범주형 + 수치형 (5개 이하 항목 권장) |
| Heatmap | Charts | 밀집도/패턴 | 범주형 × 범주형 + 수치형 |
| Map | Charts | 위치 기반 시각화 | 위도 + 경도 + 수치형 |
| DataTable | Tables | 상세 데이터 조회 | 다중 필드 원본 데이터 |
| DateRangeSelector | Controls | 글로벌 날짜 필터 | 없음 (필터 전용) |