Step 1. Excel 화면 생성하기

         실습용 Excel파일을 다운로드 하여 오픈합니다.

         화면으로 전환될  V1, V2,V3 시트를 확인합니다. 

1.1 V1시트 주요지표 생성

• V1 시트에서는 주요 지표를 나타내고, 해당 지표들의 데이터 시트인  T1 시트와 연결합니다.

• 이후 조건부 서식과 이미지 함수를 활용하여 시각화를 진행합니다.

1.  V1시트의 지표들을 데이터 시트인 T1 시트로 이동하여 각 셀에 해당 지표 값과 연결

(참고) 데이터 시트 - T1, T2 시트 

1.2 V2시트 시간대별 매출 추이 생성

1. V2 시트에서는 시간대별 매출 추이를 생성하고, SUMIFS 집계함수와 시간대 파생공법을 사용하여 데이터를 집계합니다
2. V2시트의 데이터 시트인 T3시트로 이동하여 SUMIF함수를 이용하여 집계할 수 있도록 시간대 항목을 파생합니다. 
   시간대 파생 함수  =LEFT(C2,2)&"시"
   
   
   
3. V2시트에 SUMIFS 이용 T3의 데이터 시트와 연결 
   
   
   
4. 시간대별 매출액 시각화 차트 생성을 위해 _D_예약어 지정  _D_예약어 ☜ 상세 가이드 참조하기
   
   
   
5. 상품별 매출액 정보에 시각 정보를 더하기 위해 조건부 서식 지정하여 큰 값일 수록 진한 색이 표시되게 설정합니다.
   
   
   
6. 셀 값을 기준으로 서식을 지정 > 2가지 색조 선택 > 색상 선택 후 확인

 1.3 V3시트 상품별 매출 실적 생성

1. V3 시트에서는 상품별 매출 실적을 표시하고, 조건부 서식을 이용해 평균 단가에 따라 데이터 막대를 표시합니다.
2. 평균 단가 영역 지정 후 조건부 서식 → 새 규칙 → 셀 값을 기준으로 모든 셀의 서식 지정 → 서식 스타일 : 데이터 막대 → 채우기 색상 지정
   

Step 2. 웹 화면 전환

• 완성된 Excel 파일을 Template 편집 화면에 배치하여 웹으로 전환합니다.

Step 3. 데이터 연결

          MX-Grid의 데이터 시트인 T1, T2, T3 시트에 DB봇을 활용하여 실 데이터를 연결합니다. 

         MX-Grid> 우 클릭> 디자인 모드로 이동합니다.

3.1 T1시트 데이터 연결

     1. 데이터 연결 시 지정한 조회 조건에 따라 데이터를 불러오기 위해 T1으로 이동하여 [G1] 셀 클릭 후, VS_YM으로 이름 정의합니다.

     2.  [i-MATRIX] 도구 [DB Bot]을 클릭합니다.

   2. PPDM > Sample > 3. i-META >매출분석 클릭

        조회항목: 년월, 매출금액

        조회조건: 년월 :VS_YM 입력

   3. [예] 버튼 클릭 
         

3.2 T2시트 데이터 연결

1. T2로 이동하여 [A1] 셀 클릭 후  [i-MATRIX]도구 [DB Bot]을 클릭합니다. 
   
   
   
2. PPDM > Sample > 3. i-META >매출분석 클릭
    조회항목: 기준년월, 매출목표
    조회조건: 기준년월 :VS_YM 입력
   
   
   
   
3. [예] 버튼 클릭 
   

3.3 T3시트 데이터 연결

1. T3로 이동하여 [A1] 셀 클릭 후  [i-MATRIX]도구 [DB Bot]을 클릭합니다. 
   
   
   
2. PPDM > Sample > 3. i-META >매출분석 클릭
   조회항목: 상품대분류, 상품중분류, 고객매출시간대, 매출수량, 매출금액
   조회조건: 년월 :VS_YM 입력
   
   
   
3. [예] 버튼 클릭
   

Step 4. MX-Grid 예약어 활용

_EXPAND_?__?? : 특정 행/열에 대한 확장/축소 기능 (확장 상태)

• _EXPAND_?__?? : 상품대분류별로 지정한 행의 칸 수 만큼 확장/축소하여 매출수량, 매출금액, 평균 단가를 확인할 수 있습니다. MX-Grid 예약어 ☜ 상세 가이드 참조하기
  
  

1.  V3 시트 상품대분류 이름 정의
   
   • A2 → _EXPAND_3__6
     
     
     
   • A7 → _EXPAND_8__11
     
     
     
   • A12 → _EXPAND_13__16
     
     
     
   • A17 → _EXPAND_18__22
     
     
     
   • A23 → _EXPAND_24__27
      
     
     

Step 5. MX-Grid 전용 함수 활용(AUD_xxx)

AUD_IMAGE : 이미지를 셀에 출력하는 기능

• AUD_IMAGE : 매출 목표와 매출 금액의 차이 값에 따라 상승/하락 이미지를 표시합니다. AUD_IMAGE ☜ 상세 가이드 참조하기
  
  

1. V_image 시트의 이미지를 참조하여 셀 값이 0보다 크거나 작은 경우에 서로 다른 이미지를 셀에 출력하는 기능을 활용합니다. (이미지 이름 정의 확인)
   
   
   
2. V1 시트의 특정 셀에 함수를 입력합니다.
   사용 수식 : =IF(L2 > 0, AUD_IMAGE(":차이상"), AUD_IMAGE(":차이하"))
   
   
   
3. [i-MATRIX] 도구 Save 버튼을 클릭하고 화면을 닫습니다.
   
   

Step 6. ActiveSheet 활용 MX-Grid 화면 배치

MX-Grid 내 V1, V2,V3 시트를 분할하여 원하는 영역에 배치 합니다. 

1. V1 시트의 주요 지표 영역이 표시되도록 상단 매출 실적 요약 부분에 배치 합니다.  
2. V2시트와 V3시트도  화면에 배치되도록 MX-Grid 컨트롤 클릭 후 [i-MATRIX]에 주소를 복사합니다. 
   
   
   
3. V2 시트를 배치하기 위해서  UI Bot >MX-Grid 컴포넌트를 생성합니다.
   
   
   
4. 복사한  [i-Matrix] 주소를 새로운 MX-Grid 속성창에 붙여넣기 하고 ActiveSheet에 V2, ParentGrid에 MXGrid를 입력합니다.
   
   
   
5. 동일한 방법으로 V3도 신규 MX-Grid를 이용하여 배치합니다.
   
   
   
6. MX-Grid Background 색상 제거 : 속성창 Style탭 Background A값을 0 으로 표기
   
   
   
7. MX-Grid 파량색 Line색 제거 : 속성창 Style 탭에서 Border영역에  Line Type을 none으로 선택
   

Step 6.  Chart 생성

      시간대별 데이터를 Chart로 시각화 합니다.

1. UI Bot> Chart> Chart 클릭합니다.
   
   
   
2. 생성된 차트 속성에 NAME은 TIME 으로 기입합니다.
   
   
   
3. 해당 차트는 V2시트에 _D_예약어를 활용한 데이터 소스가 바인딩 되어 차트에 나타납니다.
   _D_컨트롤 이름 예약어는 MX-GRID에서 내 데이터를 i-AUD컨트롤에 출력할 수 있습니다.  _D_예약어 활용하기 ☜ 상세 가이드 참조하기

Step 7. Process Bot 활용 이벤트 지정 

1. Process Bot > Activities 탭에서 필요한 모듈을 검색하고, 더블 클릭하여 배치합니다.
   
   
   
2. 조회 버튼을 클릭할 때 MXGrid를 Refresh 합니다.
   Process Bot 사용하기 ☜ 상세 가이드 참조하기
   
   
   
3. TIME차트에 MAX값에 대해 별도 색상을 표기 합니다.
   기본 색상값 HEX : #2797FA
   MAX 색상값 HEX : #EA5A40
   
   
   
4. 조회 버튼(Button)과 생성한 막대 차트(TIME) 컨트롤을 선택하여 Process Bot에 배치 후 모듈과 연결합니다.

Step 8. 차트 속성 설정하기

차트 단위를 '천원'으로 수정합니다.

1. 차트 우클릭 > 디자인 선택합니다.
   
   
   
2. 차트 속성 계열> 단위 영역에 1000을 입력 합니다.