Skip to main content

DashBuilder 필수파일

시작하기에 앞서 대시보드는 다양한 시각화 위젯(차트, 시트, 맵 등)을 통해 구성되기 때문에 효과적인 작동을 위해 필수적인 파일들이 존재합니다.

DashBuilder 필수파일 리스트​

  • IBSheet
  • IBChart
  • IBMap
  • DashBuilder

IBSheet - 강력한 데이터 그리드 컴포넌트​

IBSheet 8은 순수 javascript 기반의 데이터 그리드 컨트롤 컴포넌트로 사용자 PC에 어떠한 설치 없이 HTML, javascript, CSS만을 이용하여 윈도우 어플리케이션에서 볼 수 있는 데이터 그리드의 다양한 기능을 제공합니다.

주요 특징​

  • 대용량 데이터 처리 지원 (10만 행 이상의 데이터도 원활하게 처리)
  • 다양한 셀 타입 지원 (텍스트, 숫자, 날짜, 콤보, 체크박스 등)
  • 정렬, 필터링, 그룹핑, 고정 헤더/컬럼 기능
  • 다양한 테마 스타일 제공
  • 국제화(i18n) 지원

파일 구조​

├── ibsheet.js
├── locale/
│   ├── ko.js
│   ├── en.js
│   ├── jp.js
│   └── cn.js
└── css/
    ├── default/main.css
    ├── default_img/main.css
    ├── grace/main.css
    ├── gray/main.css
    ├── material/main.css
    ├── mint/main.css
    └── simple/main.css

IBChart - 다양한 차트 시각화 컴포넌트​

IBChart는 웹 개발 환경에 가장 적합하도록 설계된 차트 컴포넌트입니다. 웹 환경에서 차트를 표현할 수 있고, 웹 서버 상의 동적 데이터를 조회 가능하게 함으로써 사용자가 선택한 조건에 맞는 차트를 보여줄 수 있습니다.

주요 특징​

  • 다양한 차트 타입 지원 (라인, 바, 파이, 히스토그램, 방사형 등)
  • 실시간 데이터 업데이트 지원
  • 인터랙티브 차트 (확대/축소, 드릴다운 등)
  • Highcharts 기반의 안정적인 성능
  • 사용자 정의 스타일링 지원

파일 구조​

├── highcharts/
│   ├── highcharts.js
│   ├── highcharts-more.js
│   └── modules/
│       └── solid-gauge.js
├── ibchartinfo.js
└── ibchart.js

IBMap - 지리적 데이터 시각화 컴포넌트​

IBMap은 지리적 데이터를 시각화하기 위한 맵 차트 컴포넌트입니다.

주요 특징​

  • 다양한 맵 유형 지원 (세계, 국가, 지역별 맵)
  • 데이터 기반 색상 구분 (Choropleth) 지원
  • 동적 데이터 업데이트 기능
  • 마커 및 팝업 정보 표시 기능
  • 확대/축소 및 이동 인터랙션

파일 구조​

├── ibmap.js
└── css/
    └── ibmap.css

DashBuilder - 통합 관리 컴포넌트​

DashBuilder는 위의 모든 컴포넌트를 통합하여 BI 대시보드 위젯들을 생성하고 관리하는 개발 툴입니다.

주요 특징​

  • 드래그 앤 드롭 위젯 배치
  • Grid 방식의 레이아웃 관리 및 저장 기능 지원
  • 위젯 간 데이터 연동
  • 사용자 권한별 대시보드 구성
  • 다국어 지원
  • 다크 테마 지원

파일 구조​

├── dashbuilder.js
└── locale/
    ├── ko.js
    └── en.js
warning

DashBuilder는 IBMap, IBChart, IBSheet를 필요로 하기 때문에, DashBuilder를 로드하기 전 다음 순서로 모듈이 먼저 로드되어야 합니다:

  1. IBSheet
  2. IBChart
  3. IBMap
  4. DashBuilder

잘못된 로딩 순서는 대시보드 초기화 실패나 런타임 오류의 원인이 될 수 있습니다.