[Mendix] Apache E-Chart 활용하기

오늘은 Open Source 차트인 Apache E-Chart를 멘딕스에서 활용해보도록 하겠음

 

이 방법은 npm을 통해 e-chart를 다운로드 받을 수 없는 폐쇄망에서 유용할 수 있다

다만 약간의 JavaScript 능력이 필요할 수 있음

 

(필자의 Mendix 버전은 9.24.5 이니 참고)

 

우선은 필자의 참고내용 영상

(원래 소리 없으니 왜 소리 안나와 금지)

 

 

테스트 해볼 프로젝트를 먼저 생성한다

 

프로젝트가 생성 완료되었다면 마켓플레이스로 이동해서 apache를 검색했을 때 맨 위에 Apache e-charts가 나온다

해당 모듈 다운로드

 

 

다운로드 완료되면 이렇게 Marketplace modules 내에 echarts가 추가된게 보임

 

덤으로 에러도 추가가 됨

 

에러를 더블클릭하면 해당 Document Template이 나오게 되는데

빨갛게 물든 저 버튼 삭제

(어차피 안쓸거임)

 

저 빨간 버튼을 지우고나면, 만약에 프로젝트 생성할때 Language를 영어가 아닌 다른 언어로 했다면

이러한 에러들이 다시 뜨게 되는데

저 빨갛게 표시된 탭을 더블클릭해서

 

Caption 부분에 <Line chart> 라고 된 부분을 <> 를 지워 Line chart로 변경해준다

다른 탭들도 동일하게 수정

그럼 모든 에러가 지워진게 보여짐

 

 

다운로드 받은 echart 모듈의 domain model에 가보면

 

이미 이런식으로 도메인 모델이 설계되어 있다

모듈내에서 Line, Bar, Donut 등등 미리 정의한 차트들에 대해 옵션을 설정할 수 있는 Non-Persistent Entity들인데...

솔직히 너무 어렵다

 

그래서 필자는 최대한 차트 옵션을 Entity를 활용하지 않고 진행해보려고 한다

(DB에서 데이터를 가져오도록 하는 Persistent Entity, Non-Persistent Entity는 논외)

 

 

일단은 참고영상에서는 Button 을 클릭하면 차트를 나오도록 했는데

필자는 해당 페이지를 띄웠을 때 바로 차트를 띄울 수 있도록 하겠다

그러기 위해서는 Data View가 필요한데 Data View에 띄울 Object를 하나 생성하기 위해 Entity를 만들어주도록 하겠다

그리고 테스트할 페이지 (Home_Web) 으로 이동

Data View 를 화면에 끌어넣은 뒤 위와 같이 설정

(Chart를 띄우기 위해서는 Nanoflow로 진행해야한다)

 

※참고※

Nanoflow는 사용자의 브라우저에서 실행 (JavaScript 와 유사하다고 생각하면 좋음)

(나노플로우 내에서 마이크로플로우, Retrieve를 호출하지 않는 이상 서버에 요청을 넘기지 않는다)

Microflow는 서버에서 실행 (Java와 유사하다고 생각하면 좋음)

(Java ≠ JavaScript       햄 ≠ 햄스터)

 

DS_ChartHelper_Home1

일단 별도의 액션 없이 ChartHelper 생성만 해준다

 

그리고 다시 페이지에 돌아와서

데이터 뷰 내에 컨테이너 생성

Data View 내에 Container를 하나 추가 후, Appearance 부분의 Class 부분에 클래스를 정의해준다

(학습을 위해 구분을 해주기 위해서 필자는 basic-barchart-asdf 로 정의해주었다)

이 컨테이너 영역이 차트를 띄울 영역이 될것이다

 

 

그리고 다시 DS_ChartHelper_Home1로 돌아가서

variable (변수) 생성 후 Data Type은 String, 내용은 방금 페이지에 생성한 컨테이너의 클래스를 지정후 OK

 

그리고 marketplace module → echarts 에 Custom 이라는 폴더 하나 생성 (폴더명 아무렇게나 해도 괜찮)

우리는 이 폴더에 우리가 만들고 만들고 싶은 차트들의 JavaScript Action을 생성할 것이다

단, 차트를 사용하기 위한 JavaScript Action 은 해당 echarts 모듈 내에 만들어주어야 한다

 

이유로는

echart를 사용하기 위한 파일들이 해당 경로에 들어있기 때문이다

(다른 모듈에서 JavaScript 액션을 추가한 뒤 차트를 정의하고 싶다면 위에 클릭된 폴더를 복사해서 다른모듈에 넣어주면 되겠다)

 

echart → Custom 폴더에 JavaScript Action (JS_BasicBarChart) 생성

그리고 Parameters에 Add 를 클릭한 뒤 String Type으로 ClassName 생성

 

막 생성하고 나면 Code 탭으로 갔을 때

이렇게 되어있는데 일단 보류하고 사용할 차트부터 찾아봐야한다

 

Google에 apache echart 를 검색하면

echarts 홈페이지

이러한 페이지를 찾을 수 있다

상단에 Examples 를 클릭하면 예제 차트들이 많이 나와있음. 검색하기 귀찮아 하시는 분들을 위해 링크 첨부

https://echarts.apache.org/examples/en/index.html

Examples - Apache ECharts

 

그 중에 가장 기본인 Bar Chart 부터 실행해보자

https://echarts.apache.org/examples/en/editor.html?c=bar-simple

Examples - Apache ECharts

들어가면 Full Code 탭에 

이런식으로 오른쪽 차트에 대해 코드가 정의되어 있다.

왼쪽의 코드를 활용해서 JavaScript Action을 수정해주면

 

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import "mx-global";
import { Big } from "big.js";
import * as echarts from 'echarts';

// BEGIN EXTRA CODE
// END EXTRA CODE

/**
 * @param {string} className
 * @returns {Promise.<void>}
 */
export async function JS_BasicBarChart(className) {
	// BEGIN USER CODE
	// 기존에 chartDom = document.getElementById('main') 으로 되어있던것을
	var chartDom = document.getElementsByClassName(className)[0];
	// 으로 변경
	var myChart = echarts.init(chartDom);
	var option;

	option = {
	xAxis: {
		type: 'category',
		data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	},
	yAxis: {
		type: 'value'
	},
	series: [
		{
		data: [120, 200, 150, 80, 70, 110, 130],
		type: 'bar'
		}
	]
	};

	option && myChart.setOption(option);
	// END USER CODE
}

이렇게 되겠다.

해준거라고는 맨 위에 import * as echarts from 'echarts'; 추가

chartDom 변경 (코드내 설명 참고)

 

참고로 코드는 

// BEGIN USER CODE

// END USER CODE

사이에 써주어야 한다

 

 

그리고 다시 나노플로우로 돌아와서 수정한 JavaScript Action을 넣어준다

 

그리고 멘딕스 빌드를 실행해주면

 

 

아직 안나온다

 

콘솔에 이런식으로 추가가 되어있는데 차트영역 컨테이너의 width, height (넓이, 높이) 를 정의하라는것 같다

 

홈웹에 차트 영역으로 설정한 컨테이너에 스타일 추가

 

그리고 다시 멘딕스를 실행해보면

 

위와 같이 차트가 나오게 된다

 

해당 방법을 다른 차트로 적용했을때

 

 

이런 차트도 할 수 있다는 걸 확인할 수 있다

 

다음시간엔 조금더 수정해서 데이터를 받아서 차트에 적용할수 있도록 해보겠다