차트 레퍼런스
D.Hub 대시보드에서 제공하는 위젯 유형의 상세 설정 가이드입니다. 각 위젯의 특성과 설정 항목을 파악하여 목적에 맞는 시각화를 구성할 수 있습니다. 위젯은 위젯 라이브러리에서 통계 카드 / 시각화 / 테이블 / 콘텐츠 / 컨트롤 카테고리로 묶여 있습니다.
통계 카드 (Statistic Card)
단일 숫자 KPI를 강조하여 표시합니다. 대시보드 상단에 배치하여 핵심 지표를 한눈에 파악할 수 있습니다.
- 단일 숫자 KPI: 하나의 집계 값을 크게 표시 (예: 총 매출, 활성 사용자 수)
- 접두사/접미사: 단위 표시 (예: $, ₩, %, 건)
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 값 필드 | ✅ | 수치 필드 및 집계 함수 |
| 접두사 (Prefix) | 값 앞에 표시할 텍스트 (예: $, ₩) | |
| 접미사 (Suffix) | 값 뒤에 표시할 텍스트 (예: %, 건) | |
| 값 폰트 크기 | 3개 프리셋(작게 20px / 보통 28px / 크게 40px) 또는 자유 입력(1–120px). 풀폭·풀높이 KPI 카드에서도 여백을 침범하지 않도록 120px 상한을 적용 |
KPI 게이지 (Gauge)
목표 대비 현재 값의 달성률을 시각화합니다. 반원형 게이지로 현재 위치를 직관적으로 표현합니다.
- 달성률 표시: 최소~최대 범위 내에서 현재 값의 위치를 시각적으로 표현
- 목표 값: 목표선을 설정하여 달성 여부를 확인
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 값 필드 | ✅ | 수치 필드 및 집계 함수 |
| 최소 값 (Min) | 게이지 최소 값 (기본값: 0) | |
| 최대 값 (Max) | 게이지 최대 값 (기본값: 100) | |
| 목표 값 (Target) | 목표선 표시 값 |
바 차트 (Bar Chart)
범주별 수치를 비교하는 데 가장 효과적인 차트입니다.
- 범주별 비교: X축에 범주, Y축에 수치를 배치하여 항목 간 차이를 시각적으로 비교
- 누적 모드: 여러 시리즈를 누적하여 전체 대비 각 항목의 기여도를 표현
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| X축 필드 | ✅ | 범주 축에 매핑할 필드 |
| Y축 필드 | ✅ | 값 축에 매핑할 필드 및 집계 함수 |
| 시리즈 구분 | 그룹화할 필드 (다중 시리즈 생성) | |
| 누적 (Stacked) 모드 | 스택 차트 활성화 여부 |
라인 차트 (Line Chart)
시계열 데이터의 추세와 변화를 시각화합니다. 다중 라인을 통해 여러 시리즈를 동시에 비교할 수 있습니다.
- 시계열 추세: X축에 날짜/시간 필드를 배치하여 시간 흐름에 따른 변화를 표현
- 다중 라인: 여러 지표 또는 그룹을 별도의 라인으로 표시
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| X축 필드 | ✅ | 시간 또는 연속형 필드 |
| Y축 필드 | ✅ | 수치 필드 및 집계 함수 |
| 시리즈 구분 | 그룹화할 필드 (다중 라인 생성) | |
| 포인트 표시 (Show Points) | 데이터 포인트 마커 표시 여부 |
파이/도넛 차트 (Pie Chart)
전체 대비 각 항목의 비율을 시각화합니다. 구성비를 직관적으로 파악하는 데 유용합니다.
- 비율 표시: 각 슬라이스에 퍼센트 값을 라벨로 표시
- 도넛 모드: 중앙을 비워 도넛 형태로 표시 가능
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 항목 필드 | ✅ | 범주를 나타내는 필드 |
| 값 필드 | ✅ | 수치 필드 및 집계 함수 |
| 차트 유형 (Variant) | 파이(Pie) 또는 도넛(Donut) | |
| 범례 표시 (Show Legend) | 범례 표시 여부 | |
| 퍼센트 표시 (Show Percentage) | 슬라이스에 퍼센트 값 표시 여부 |
히트맵 (Heatmap)
두 차원의 교차점에서 값의 강도를 색상으로 표현합니다. 패턴과 밀집도를 시각적으로 파악하는 데 적합합니다.
- 2차원 매트릭스: X축과 Y축 범주의 교차점에 값을 색상 강도로 표현
- 색상 스케일: 순차(Sequential) 또는 발산(Diverging) 색상 스케일 선택
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| X축 필드 | ✅ | 가로축 범주 필드 |
| Y축 필드 | ✅ | 세로축 범주 필드 |
| 값 필드 | ✅ | 색상 강도에 매핑할 수치 필드 |
| 색상 스케일 (Color Scale) | 순차(Sequential) 또는 발산(Diverging) |
지도 (Map)
위치 기반 데이터를 지도 위에 시각화합니다. 위도/경도 좌표를 기반으로 데이터 포인트를 마커로 표시합니다.
- 좌표 기반: 위도(Latitude)와 경도(Longitude) 필드를 매핑하여 지도 위에 포인트 표시
- 용도: 지역별 매출, 매장/센서 위치, 이동 경로 시각화
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 위도 필드 | ✅ | 위도(Latitude) 값이 담긴 수치 필드 |
| 경도 필드 | ✅ | 경도(Longitude) 값이 담긴 수치 필드 |
| 라벨 필드 | 마커에 표시할 라벨 필드 | |
| 값 필드 | 마커 크기/색상에 매핑할 수치 필드 |
산점도 (Scatter Chart)
두 수치 변수 간의 관계와 분포를 2차원 평면에 점으로 표현합니다. 상관관계와 이상치를 파악하는 데 적합합니다.
X축·Y축에는 숫자형 컬럼만 선택할 수 있습니다. 두 축은 점의 좌표를 결정합니다.
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| X축 필드 | ✅ | 가로축 — 숫자형 컬럼 |
| Y축 필드 | ✅ | 세로축 — 숫자형 컬럼 |
| 크기 필드 (Size) | 세 번째 숫자형 변수를 점 크기로 정규화하여 표현 | |
| 색상 필드 (Color) | 숫자 값이면 색상 스케일로, 범주 값이면 그룹별 색상 + 범례로 표현 | |
| 레이블 필드 (Label) | 점 호버 툴팁의 식별명으로 사용. 선택하지 않으면 위젯 제목을 툴팁 제목으로 사용 |
데이터 테이블 (Data Table)
데이터를 행과 열의 테이블 형태로 표시합니다. 상세 데이터를 조회하거나 정렬이 필요한 경우에 사용합니다.
- 정렬: 컬럼 헤더 클릭으로 오름차순/내림차순 정렬
- 페이지네이션: 대량 데이터 조회 시 페이지 단위로 분할
- 검색: 테이블 내 검색 필터로 데이터 필터링
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 데이터 소스 | ✅ | 조회할 데이터셋 또는 SQL 쿼리 |
| 페이지 크기 (Page Size) | 한 페이지당 표시할 행 수 (5, 10, 20, 50) | |
| 정렬 (Sortable) | 컬럼 정렬 활성화 여부 | |
| 검색 (Searchable) | 검색 필터 활성화 여부 |
텍스트 박스 (Markdown Text Box)
자유 텍스트나 마크다운(GFM)으로 대시보드에 설명·제목·구분선을 추가합니다. 데이터 소스 설정이 없는 콘텐츠 위젯입니다.
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 마크다운 본문 | ✅ | GFM 마크다운(표·체크박스·코드 블록 지원) |
외부 사이트 임베드 (External Site Embed)
http(s) URL을 iframe으로 임베드합니다. 데이터 소스 설정 없이 URL만 지정하며, 임베드된 페이지는 고정 sandbox(폼·팝업·스크립트·동일 출처 허용)로 실행되고 전체 화면을 허용합니다.
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| URL | ✅ | 임베드할 페이지의 절대 URL (http/https) |
대상 사이트의 X-Frame-Options / CSP frame-ancestors 헤더가 iframe 임베드를 거부할 수 있습니다. 임베드되지 않는 경우 위젯 액션 메뉴의 새 탭에서 열기 로 외부 페이지를 띄울 수 있습니다.
날짜 범위 선택기 (Date Range Selector)
대시보드 캔버스에 두는 위젯 형태의 DRS(Dashboard Range Selector)입니다. 상단의 전역 DRS와 동일한 동작을 하며, 별도 컨트롤이 필요한 패널형 레이아웃에 유용합니다.
| 설정 항목 | 필수 | 설명 |
|---|---|---|
| 선택 형식 (Selection Type) | 범위(시작·끝 두 날짜) 또는 단일 날짜(선택한 날짜 이하 <= date as-of 시맨틱) | |
| 기본 범위 (Default Range) | 초기 선택될 범위: 최근 7일, 최근 30일, 사용자 지정 (범위 형식일 때만 노출) | |
| 사용자 지정 허용 (Allow Custom Range) | 사용자가 직접 날짜를 선택할 수 있는지 여부 (범위 형식일 때만 노출) | |
| 날짜 형식 (Display Format) | YYYY-MM-DD, MM/DD/YYYY, DD.MM.YYYY |
위젯에 명시적 시간 컬럼/범위가 없으면 상단 DRS의 값이 자동 적용됩니다. 쿼리 모드(SQL 직접 작성)에서는 자동 추론이 비활성화되므로, 위젯의 날짜 필터 기준 컬럼(Date Filter Column)을 지정해 DRS 범위를 적용합니다. 자세한 내용은 데이터 설정 문서를 참조하세요.
위젯 유형 요약
| 위젯 | 카테고리 | 주요 용도 | 권장 데이터 |
|---|---|---|---|
| 통계 카드 | 통계 카드 | KPI 강조 | 단일 집계 값 |
| KPI 게이지 | 통계 카드 | 달성률 표시 | 단일 집계 값 + 목표 |
| 바 차트 | 시각화 | 범주별 비교 | 범주형 + 수치형 |
| 라인 차트 | 시각화 | 시계열 추세 | 시간형 + 수치형 |
| 파이/도넛 차트 | 시각화 | 구성비 표시 | 범주형 + 수치형 (5개 이하 항목 권장) |
| 히트맵 | 시각화 | 밀집도/패턴 | 범주형 × 범주형 + 수치형 |
| 지도 | 시각화 | 위치 기반 시각화 | 위도 + 경도 + 수치형 |
| 산점도 | 시각화 | 상관/이상치 분석 | 수치형 × 수치형 (+ 색상 분류) |
| 데이터 테이블 | 테이블 | 상세 데이터 조회 | 다중 필드 원본 데이터 |
| 텍스트 박스 | 콘텐츠 | 설명·섹션 헤더 | 없음 (콘텐츠 전용) |
| 외부 사이트 임베드 | 콘텐츠 | 외부 사이트 통합 | 없음 (URL) |
| 날짜 범위 선택기 | 컨트롤 | 전역 날짜 필터 | 없음 (필터 전용) |