[웹포넌트 차트] webPonent Visual Gauge Chart

[웹포넌트 차트] webPonent Visual Gauge Chart

webponent CHART 2.0.6 버전이 릴리즈 되었습니다. (짝짝짝)

2.0.6버전에 맞추어 새롭게 추가된 Gauge Chart에 대해 작성해보려 합니다.

gauge chart는 크게는 원형 게이지(angular), 선형 게이지(Linear), 실린더(cylinder), 온도계(thermometer) 이렇게 크게는 4가지, 세부적으로는 8가지 타입으로 구성되어져 있습니다.

디자인 테마로는 기본 디자인(Basic), 블랙 디자인, 라이트 그레이 디자인 3가지 종류가 있습니다.

여기에 option과 style을 주어 원하는 색상의, 모양의 게이지를 만드실 수 있습니다.

예를 들면, 하나의 실린더도 필요에 맞게, 나만의 스타일로 변경 가능합니다.

사이즈 조절!  색상 조절!  위치 조절! 

사용자가 어떠한 용도로, 어떠한 형태로 만들어서 사용할지 모르기 때문에 최대한 많은 부분을 변수로 

두고 필요에 맞게 변경할 수 있도록 노력했습니다. 

( 웹포넌트 퍼블리셔 를 통해 테스트하실 수 있습니다. )

---

- 라파엘.js를 사용하여 그리기 

Raphael JS는 벡터 그래픽을 웹에 그려주는 가벼운 자바스크립트 프레임워크입니다. 

처음 접해본 라파엘.js는 비쥬얼적으로 결과가 바로바로 보여지니 뿌듯하고 재밌었습니다.  사실, 처음에 

각도에 대한 계산이 제일 큰 복병이었습니다. ㅠ_ㅠ 

( 다른 오픈소스들을 찾아보고 참조해보았지만... 아..... 수학...... 수학과 어디계시죠 )

하지만, 무수한 수의 대입과 그에 따라 그려지는 차트들을 보면서 점점 코드에 대해 이해가 되었습니다.

사실, 수학적 원리보다는 다양한 수를 넣고 실행해보면서 어느 방향으로 간다던지, 시작 지점이 어디인지

 등을 파악하고 이를 응용했습니다. 그렇게 탄생한 원형게이지 차트와 실린더 차트는 더 많은 손이 가고 

신경이 쓰였던 type입니다.

<원형 게이지 차트> normal(좌), multi, dual(우)

<선형 게이지 차트> Solid(좌), Pointer, LED(우)



<실린더 차트 & 온도계 차트>

- 스크립트 분산의 필요성 

초기 개발때, 하나의 자바스크립트에 타입별로 나누어 코드를 작성하였더니, 공통으로 사용하지만 위치

나 스타일이 타입에 따라 다른 것들이 많았습니다. 이러한 차이점을 구분에 있어 가정문도 늘어나고 많

은 반복문들이 들어가게 되면서 코드의 복잡도가 증가하고 비효율적인 코드들이 하나둘씩 생기기 시작

했습니다. 

모든 차트들이 제기능을 시작 할때 쯤 , '더 늦기전에 나눠야겠다!' 라고 생각하여 타입별 스크립트 분산

작업을 시작하였습니다.

스크립트를  나누고 난 후 작동원리나 부가적인 옵션들은 동일하므로 한곳을 수정하면 나머지 스크립트

들도 수정해야했으며 그럴때마다 왔다 갔다 하면서 헷갈리기도 하고, 타입별로 조금씩 다른 차이점에 대

해서도 고려해야 했습니다.

BUT, 만약 한개의 스크립트에 있었다면 더더더 복잡한 코드가 되지 않았을까? 하는 생각이듭니다.

                                

사실 처음부터 정리를 잘했다면 번거로운 작업이 줄었을지도 모릅니다. 생각해보면 Naming에 있어서도

오픈소스로 공개 된 Gauge Chart를 참조했다면 더 쉬웠을지도 모르죠. 하지만 누가봐도 딱 그걸말하는

구나! 하고 생각할 수 있는 Naming을 찾으며 주변에 물어보고, 검색엔진에 쳐보며 노력했습니다. 

이렇게 탄생한 Webponent Gauge CHART! 유용하게 사용되었으면 좋겠습니다. 감사합니다.

"A mistake is a signal that
it is time to learn something new, something you didn't know before"
                                                                                                           - Robert Kiyosaki

---

더 많은 gauge chart에 대한 자세한 기능과 샘플을 확인하고 싶으시다면 아래 관련 사이트 목록에 있는 사이트들을 방문해주시길 바랍니다. 감사합니다. ^_^

웹포넌트 관련 사이트 목록

사이트명	설명
웹포넌트 공식 사이트	웹포넌트 공식 사이트로 제품에 대한 상세 설명 보기, 트라이얼 다운로드가 가능합니다.
웹포넌트 퍼블리셔	웹포넌트 차트, 그리드에 관련한 예제 코드를 보거나 편집할 수 있습니다.
기술지원 사이트	제품에 대한 질문을 게시할 수 있으며, 구매하신 고객의 경우 제품문의를 할 수 있습니다. FAQ, 버전 이력, 공지사항을 확인할 수 있습니다.
웹포넌트 샘플 사이트	웹포넌트 차트, 그리드에 관련한 예제를 확인할 수 있습니다.