위젯 관리

대시보드 캔버스에 위젯을 추가하고 배치하여 원하는 레이아웃을 구성하는 방법을 설명합니다.

위젯 추가하기

1. 왼쪽 위젯 라이브러리 패널을 엽니다.
2. 원하는 위젯 유형을 선택합니다.
3. 위젯을 드래그하여 캔버스 위로 이동하거나 클릭하여 추가합니다. 드래그 중에는 캔버스 grid에 배치 미리보기가 표시되어 정확한 위치를 잡을 수 있습니다.

위젯 유형

위젯은 5개 카테고리(통계 카드, 시각화, 테이블, 컨트롤, 콘텐츠)로 분류됩니다. 차트 계열과 지도는 모두 시각화 카테고리에 묶입니다 — Map(지도)은 차트가 아닌 지리 시각화이지만 같은 카테고리에 포함됩니다.

통계 카드

통계 카드 (Statistic Card)

핵심 지표(KPI)를 강조하여 표시하는 위젯입니다.

• 용도: 총 매출, 활성 사용자 수, 전환율 등 단일 수치 강조
• 설정 옵션:
  • 접두사 (예: $, ₩)
  • 접미사 (예: %, 건)
  • 값 폰트 크기 컨트롤: 카드 안 큰 숫자의 크기를 단계별로 조정 가능 (위젯 크기에 맞춰 시각 균형을 잡을 때 유용).

KPI 게이지 (Gauge)

목표 대비 현재 값의 달성률을 시각화합니다.

• 용도: 목표 달성률, 서버 사용률, 진행 상황
• 설정 옵션: 최소/최대 값, 목표 값(Target)

시각화

바 차트 (Bar Chart)

범주별 데이터를 비교하는 데 적합한 차트입니다. 스택(Stacked) 모드 지원.

라인 차트 (Line Chart)

시계열 데이터의 추세를 시각화합니다. 데이터 포인트 표시(Show Points) 옵션 제공.

산점도 (Scatter Chart)

두 수치형 변수 간의 분포·상관관계를 보여줍니다.

• 용도: 두 지표 간 관계 시각화, 이상치 식별
• 설정 옵션: X축·Y축 필드, 색상 분류 필드

파이/도넛 차트 (Pie Chart)

전체 대비 비율을 시각화합니다. 파이/도넛 토글, 범례·퍼센트 표시 옵션.

히트맵 (Heatmap)

두 차원의 교차점에서 값의 강도를 색상으로 표현. 색상 스케일은 Sequential / Diverging 선택.

지도 (Map)

위치 기반 데이터를 지도 위에 시각화합니다.

테이블

데이터 테이블 (Data Table)

상세 데이터를 표 형태로 표시합니다. 페이지당 행 수, 정렬, 검색 필터 옵션.

콘텐츠

텍스트 박스 (Text Box)

설명·헤더·주석 등을 마크다운으로 작성하는 위젯입니다. 대시보드의 섹션 구분이나 가이드 문구에 사용합니다.

• 마크다운 GFM 지원(표, 체크박스, 코드 블록).
• 데이터 소스·쿼리 설정 없음 — 콘텐츠 위젯입니다.

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

http(s) URL을 iframe으로 임베드하는 위젯입니다.

• 용도: 사내 위키, BI 대시보드, 외부 모니터링 페이지 등을 한 화면에 통합.
• 설정 옵션: URL, 스크롤 허용, 마우스 휠 우선 전달.
• 새 탭에서 열기 액션: 위젯 헤더 메뉴에서 임베드된 URL을 새 탭으로 엽니다.
• 보안 주의: 임베드 대상 사이트의 X-Frame-Options / CSP frame-ancestors 정책이 iframe 임베드를 거부하면 표시되지 않을 수 있습니다.

컨트롤

날짜 범위 선택기 (Date Range Selector, DRS)

대시보드 위젯들의 조회 기간을 제어하는 컨트롤 위젯이자 캔버스 상단의 전역 컨트롤입니다.

• 용도: 대시보드 전체 또는 연결된 위젯의 날짜 범위를 동적으로 변경.
• 자동 적용: 위젯이 명시적 시간 컬럼/기간을 설정하지 않은 경우 DRS 범위가 자동으로 위젯 쿼리에 주입됩니다.
• 사용자 지정 범위 잠금: DRS를 사용자 지정 고정 범위로 잠그면 자동 새로고침이 비활성화됩니다.
• 설정 옵션: 기본 범위(최근 7일·30일·사용자 지정), 사용자 지정 허용 여부, 날짜 표시 형식.

위젯 배치 및 크기 조절

• 이동: 위젯의 헤더 부분을 드래그하여 원하는 위치로 이동합니다. 드래그 중 grid에 배치 미리보기.
• 크기 조절: 위젯 우측 하단의 핸들을 드래그하여 크기를 조절합니다.
• 레이아웃 자동 조정: 위젯을 이동하면 다른 위젯들이 자동으로 재배치되어 빈 공간을 최소화합니다.

위젯별 액션 메뉴

각 위젯 우상단의 ⋯ 메뉴에서 다음 작업이 가능합니다.

• 복제(Duplicate): 원본 설정을 보존한 새 위젯을 아래쪽에 추가합니다.
• 삭제(Delete): 위젯을 제거합니다. 캔버스에서 위젯을 선택한 상태에서 Delete 키로도 삭제할 수 있습니다 (단, 입력 필드에 포커스가 있을 때는 키 삭제가 동작하지 않습니다).
• 잠금 / 잠금 해제(Lock / Unlock): 잠금 상태의 위젯은 이동·리사이즈가 차단됩니다. 선택과 설정 변경은 계속 가능합니다. 잠금 상태는 저장 시 함께 영속화됩니다.
• Download ▸ (다운로드 서브메뉴): 위젯이 실제 실행하는 쿼리(DRS 시간 범위가 합성된 결과) 결과를 외부 파일로 내보냅니다.
  • CSV: 위젯 데이터의 raw row를 UTF-8 (BOM 포함)로 직렬화합니다. Excel에서 한글이 깨지지 않습니다.
  • Excel (.xlsx): 동일한 raw row를 Excel 워크북으로 저장합니다. 첫 클릭 시점에 모듈을 지연 로드합니다.
  • PNG: 위젯 본문 DOM을 이미지로 캡처합니다. 드래그 핸들·⋯ 메뉴·잠금 배지는 캡처 영역에서 제외됩니다.
  • 데이터가 없는 위젯(Markdown Text Box, External Site Embed, Date Range Selector)은 CSV/Excel 항목이 노출되지 않고 PNG만 사용할 수 있습니다.
  • 파일명 규칙: {제목 또는 위젯타입}_YYYYMMDD_HHMMSS.{csv|xlsx|png}
• 새 탭에서 열기: External Site Embed 위젯 전용. 임베드된 URL을 새 탭으로 엽니다.

빌더 데이터 탭

빌더 헤더의 별칭 옆에는 위젯 ┃ 데이터 토글이 있습니다. 데이터 탭으로 전환하면 위젯 라이브러리와 구성 패널이 숨겨지고, 메인 영역이 데이터 탐색 surface로 바뀝니다.

• 좌측 트리: 대시보드의 위젯들이 사용 중인 데이터셋이 자동 집계됩니다. 각 데이터셋 아래에는 그 데이터셋을 사용하는 위젯들이 펼쳐지고, 위젯 라인 hover 시 우측 ↗ 아이콘으로 위젯 모드 + 해당 위젯 선택까지 한 번에 점프할 수 있습니다.
• 우측 영역:
  • 데이터셋 선택 시: SELECT * FROM ... LIMIT N의 raw 미리보기 (LIMIT을 10 / 100 / 500 / 1000 중 선택).
  • 위젯 선택 시: 위젯이 실제 실행하는 쿼리(DRS 시간 범위 합성 후)의 결과 미리보기.
• 결과 / 스키마 탭: 두 케이스 모두 SQL 블록 → [결과 ┃ 스키마] 탭 → 테이블 순서로 표시되며, 결과 컬럼 헤더와 스키마 탭에는 컬럼 타입 아이콘(# 수치 / Aa 텍스트 / 📅 날짜 / ☑ 불리언 / {} 객체 / ? 불명)이 표시됩니다.
• 캔버스에서 위젯을 선택한 채로 데이터 모드에 진입하면 그 위젯의 쿼리 미리보기로 자동 선택되어 컨텍스트가 끊기지 않습니다.
• 데이터 탭은 읽기 전용 surface입니다. 여기서 SQL을 직접 편집하거나 실행할 수는 없으며, 저장되지 않은 변경 가드와도 무관합니다.

위젯 설정

위젯을 선택하면 오른쪽 구성 패널이 활성화됩니다. 패널 좌측 가장자리를 드래그해 폭을 조절할 수 있습니다.

1. 기본 정보 (General)

• 제목: 위젯 상단에 표시될 제목을 입력합니다.
• 설명: 위젯에 대한 부가 설명을 입력합니다.

2. 데이터 설정 (Data)

• 데이터 모드: 간단 모드 또는 SQL 모드 선택. SQL 모드에서는 SQL 에디터와 AI 어시스턴트를 사용합니다.
• 데이터 소스: 연결할 데이터셋 선택
• 필드 매핑: X축, Y축, 값 필드 지정

자세한 내용은 데이터 설정 문서를 참조합니다.

3. 표시 옵션 (Style)

• 차트 종류에 따라 색상, 범례 표시 여부, 축(Axis) 설정 등 시각적 요소를 조정할 수 있습니다.