본문으로 건너뛰기
버전: v0.1.0

차트 레퍼런스

D.Hub 대시보드에서 제공하는 위젯 유형의 상세 설정 가이드입니다. 각 위젯의 특성과 설정 항목을 파악하여 목적에 맞는 시각화를 구성할 수 있습니다.

Statistic Card (통계 카드)​

단일 숫자 KPI를 강조하여 표시합니다. 대시보드 상단에 배치하여 핵심 지표를 한눈에 파악할 수 있습니다.

  • 단일 숫자 KPI: 하나의 집계 값을 크게 표시 (예: 총 매출, 활성 사용자 수)
  • 접두사/접미사: 단위 표시 (예: $, ₩, %, 건)
설정 항목필수설명
값 필드✅수치 필드 및 집계 함수
접두사 (Prefix)값 앞에 표시할 텍스트 (예: $, ₩)
접미사 (Suffix)값 뒤에 표시할 텍스트 (예: %, 건)

Gauge (게이지)​

목표 대비 현재 값의 달성률을 시각화합니다. 반원형 게이지로 현재 위치를 직관적으로 표현합니다.

  • 달성률 표시: 최소~최대 범위 내에서 현재 값의 위치를 시각적으로 표현
  • 목표 값: 목표선을 설정하여 달성 여부를 확인
설정 항목필수설명
값 필드✅수치 필드 및 집계 함수
최소 값 (Min)게이지 최소 값 (기본값: 0)
최대 값 (Max)게이지 최대 값 (기본값: 100)
목표 값 (Target)목표선 표시 값

Visualizations​

이전 Charts 카테고리는 Visualizations 로 명칭이 변경되었습니다. 동일한 차트가 동일한 설정으로 유지됩니다.

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)검색 필터 활성화 여부

ScatterChart (산점도)​

두 수치 변수 간의 관계와 분포를 2차원 평면에 점으로 표현합니다. 상관관계와 이상치를 파악하는 데 적합합니다.

설정 항목필수설명
X축 필드✅가로축 수치 필드
Y축 필드✅세로축 수치 필드
색상 분류 필드점을 그룹/색으로 나눌 필드
점 크기 필드점 크기에 매핑할 수치 필드

Markdown Text Box (마크다운 텍스트 박스)​

자유 텍스트나 마크다운(GFM)으로 대시보드에 설명·제목·구분선을 추가합니다. 데이터 소스 설정이 없는 콘텐츠 위젯입니다.

설정 항목필수설명
마크다운 본문✅GFM 마크다운(표·체크박스·코드 블록 지원)

External Site Embed (외부 사이트 임베드)​

http(s) URL을 iframe으로 임베드합니다. 데이터 소스 설정 없이 URL만 지정합니다.

설정 항목필수설명
URL✅임베드할 페이지의 절대 URL (http/https)
스크롤 허용iframe 안 스크롤 허용 여부
마우스 휠 우선 전달캔버스 휠 동작과의 우선순위
정보

대상 사이트의 X-Frame-Options / CSP frame-ancestors 헤더가 iframe 임베드를 거부할 수 있습니다. 임베드되지 않는 경우 위젯 액션 메뉴의 새 탭에서 열기 로 외부 페이지를 띄울 수 있습니다.

DateRangeSelector (날짜 범위 선택기)​

대시보드 캔버스에 두는 위젯 형태의 DRS입니다. 상단의 전역 DRS와 동일한 동작을 하며, 별도 컨트롤이 필요한 패널형 레이아웃에 유용합니다.

설정 항목필수설명
기본 범위 (Default Range)초기 선택될 범위: 최근 7일, 최근 30일, 사용자 지정
사용자 지정 허용 (Allow Custom Range)사용자가 직접 날짜를 선택할 수 있는지 여부
날짜 형식 (Display Format)YYYY-MM-DD, MM/DD/YYYY, DD.MM.YYYY
정보

위젯에 명시적 시간 컬럼/범위가 없으면 상단 DRS의 값이 자동 적용됩니다(ADR-0054). 쿼리 모드에서 명시적으로 사용하려면 $from, $to 변수를 사용합니다. 자세한 내용은 데이터 설정 문서를 참조하세요.

위젯 유형 요약​

위젯카테고리주요 용도권장 데이터
Statistic CardStatisticsKPI 강조단일 집계 값
GaugeStatistics달성률 표시단일 집계 값 + 목표
BarChartVisualizations범주별 비교범주형 + 수치형
LineChartVisualizations시계열 추세시간형 + 수치형
PieChartVisualizations구성비 표시범주형 + 수치형 (5개 이하 항목 권장)
HeatmapVisualizations밀집도/패턴범주형 × 범주형 + 수치형
MapVisualizations위치 기반 시각화위도 + 경도 + 수치형
ScatterChartVisualizations상관/이상치 분석수치형 × 수치형 (+ 색상 분류)
DataTableTables상세 데이터 조회다중 필드 원본 데이터
Markdown Text BoxContent설명·섹션 헤더없음 (콘텐츠 전용)
External Site EmbedContent외부 사이트 통합없음 (URL)
DateRangeSelectorControls글로벌 날짜 필터없음 (필터 전용)