목표화면 |
|---|
|
매장별 월별 실적 Template 실습 Template 다운로드 위 실습 예제를 학습하기 위한 실습 Template는 아래의 보고서를 다른 이름으로 저장하여 사용합니다.
|
Step 1. Excel 화면 생성하기
실습용 Excel파일을 다운로드 하여 오픈합니다.
화면으로 전환될 V1, V2,V3 시트를 확인합니다. 
1.1 V1시트 주요지표 생성
V1 시트에서는 주요 지표를 나타내고, 해당 지표들의 데이터 시트인 T1 시트와 연결합니다.
이후 조건부 서식과 이미지 함수를 활용하여 시각화를 진행합니다.
1. V1시트의 지표들을 데이터 시트인 T1 시트로 이동하여 각 셀에 해당 지표 값과 연결
(참고) 데이터 시트 - T1 시트
1.2 V2시트 시간대별 매출 추이 생성
- V2 시트에서는 시간대별 매출 추이를 생성하고,
SUMIFS집계함수와 시간대 파생공법을 사용하여 데이터를 집계합니다 - V2시트의 데이터 시트인 T2시트로 이동하여 SUMIF함수를 이용하여 집계할 수 있도록 시간대 항목을 파생합니다.
시간대 파생 함수 =LEFT(C2,2)&"시"
- V2시트에 SUMIFS 이용 T2의 데이터 시트와 연결
- 시간대별 매출액 시각화 차트 생성을 위해 _D_예약어 지정 _D_예약어 ☜ 상세 가이드 참조하기
- 상품별 매출액 정보에 시각 정보를 더하기 위해 조건부 서식 지정하여 큰 값일 수록 진한 색이 표시되게 설정합니다.
- 셀 값을 기준으로 서식을 지정 > 2가지 색조 선택 > 색상 선택 후 확인
1.3 V3시트 상품별 매출 실적 생성
- V3 시트에서는 상품별 매출 실적을 표시하고, 조건부 서식을 이용해 달성률에 따라 아이콘을 표시합니다.
- 달성율 영역 지정 후 조건부 서식 → 아이콘 집합 → 평점5 아이콘 지정
Step 2. 웹 화면 전환
- 완성된 Excel 파일을 Template 편집 화면에 배치하여 웹으로 전환합니다.
Step 3. 데이터 연결
MX-Grid의 데이터 시트인 T1 시트와 T2 시트에 DB봇을 활용하여 실 데이터를 연결합니다.
MX-Grid> 우 클릭> 디자인 모드로 이동합니다.
3.1 T1시트 데이터 연결
1. T1으로 이동하여 [A1] 셀 클릭 후 [i-MATRIX]도구 [DB Bot]을 클릭합니다.
2. PPDM > Sample > 3. i-META >매출분석 클릭
조회항목: 년월, 매출원가, 매출목표, 매출금액
조회조건: 년월 :VS_YM 입력
3. [예] 버튼 클릭
3.2 T2시트 데이터 연결
- T2로 이동하여 [A1] 셀 클릭 후 [i-MATRIX]도구 [DB Bot]을 클릭합니다.
- PPDM > Sample > 3. i-META >매출분석 클릭
조회항목: 상품대분류, 상품중분류, 고객매출시간대, 매출목표, 매출금액
조회조건: 년월 :VS_YM 입력
- [예] 버튼 클릭
Step 4. MX-Grid 예약어 활용
_EXPAND_?__?? : 특정 행/열에 대한 확장/축소 기능 (확장 상태)
_EXPAND_?__?? : 상품대분류별로 확장/축소하여 매출목표, 매출금액, 달성율을 확인할 수 있습니다. MX-Grid 예약어 ☜ 상세 가이드 참조하기
- V3 시트 상품대분류 이름 정의
- A2 → _EXPAND_3__6
- A7 → _EXPAND_8__11
- A12 → _EXPAND_13__16
- A17 → _EXPAND_18__22
- A23 → _EXPAND_24__27
[i-MATRIX] 리본메뉴 Save 버튼으로 저장 후 MX-Grid 디자인 화면은 닫습니다.
Step 5. ActiveSheet 활용 MX-Grid 화면 배치
MX-Grid 내 V1, V2,V3 시트를 분할하여 원하는 영역에 배치 합니다.
- V1 시트의 주요지표 영역이 표시되도록 상단 매출 실적 요약 부분에 배치 합니다.
- V2시트와 V3시트도 화면에 배치되도록 MX-Grid 컨트롤 클릭 후 [i-MATRIX]에 주소를 복사합니다.
- V2 시트를 배치하기 위해서 UI Bot >MX-Grid 컴포넌트를 생성합니다.
- 복사한 [i-Matrix] 주소를 새로운 MX-Grid 속성창에 붙여넣기 하고 ActiveSheet 에 V2로 입력합니다.
- 동일한 방법으로 V3도 신규 MX-Grid를 이용하여 배치합니다.
- MX-Grid Background 색상 제거 : 속성창 Style탭 Background A값을 0 으로 표기
- MX-Grid 파량색 Line색 제거 : 속성창 Style 탭에서 Border영역에 Line Type을 none으로 선택
Step 6. Chart 생성
시간대별 데이터를 Chart로 시각화 합니다.
- UI Bot> Chart> Chart 클릭합니다.
- 생성된 차트 속성에 NAME은 TIME 으로 기입하고 , Event에 AutoRefresh 를 활성화합니다.
- 해당 차트는 V2시트에 _D_예약어를 활용한 데이터 소스가 바인딩 되어 차트에 나타납니다.
_D_컨트롤 이름 예약어는 MX-GRID에서 내 데이터를 i-AUD컨트롤에 출력할 수 있습니다. _D_예약어 활용하기 ☜ 상세 가이드 참조하기
Step 7. Process Bot 활용 이벤트 지정
- 조회 버튼을 클릭할 때 MXGrid, MXGrid2, MXGrid3, TIME 컨트롤을 Refresh 합니다.
Process Bot 사용하기 ☜ 상세 가이드 참조하기
- TIME차트에 MAX값에 대해 별도 색상을 표기 합니다.
기본 색상값 HEX : #2797FA
MAX 색상값 HEX : #EA5A40
- 설정 완료 화면 입니다.
Step 8. 차트 속성 설정하기
차트 단위를 '천원'으로 수정합니다.
- 차트 우클릭 > 디자인 선택합니다.
- 차트 속성 계열> 단위 영역에 1000을 입력 합니다.
