FrontEnd7 데이터 시각화 라이브러리 D3.js로 네트워크 차트 만들기 (2) 안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The Chart Generator)입니다. 이번 포스팅에서는 저번 포스팅에 이어서 D3.js 라이브러리로 네트워크 차트 만들어 보겠습니다! 저번 포스팅 보러가기 [FrontEnd] - 데이터 시각화 라이브러리 D3.js로 네트워크 차트 만들기 (1) 04. 차트에 zoom 기능 적용하기 function handleZoom(e) { d3.select(selector + " g").attr("transform", e.transform); } const zoom = d3.zoom().on("zoom", handleZoom); d3.selectAll(selector + .. 2023. 8. 24. MAD - Header Layout MAD Frontend 개발 시 규약 MAD 는 BootStrap 기반으로 프론트를 개발합니다. 따라서, 다음의 규약을 유지해 주십시오 1. 섹션의 헤더에 h4 > span 처리 하고, inline Bold 처리를 하여 어느 섹션에서 작업중인지 구분합니다. ( 향후 자바스크립트 작업에서 해당 레이어 선택시 색상을 데이터 색상으로 변경합니다 ) 2. 위제스터를 활용하여 모든 레이아웃에 공통 적용합니다. 3. 인용구를 넣어 사용자로 하여금 workflow 를 유지할 수 있도록 돕는 말 문구를 입력 해 주세요 4. 인용구 사이에 버튼은 공통입니다. ( help ) 액션 버튼을 통해 사용자로 하여금 기능을 이해할 수 있도록 해 주세요. 5. 유틸성 버튼 그룹 입니다. 대부분 다운로드 관련이나 클라이언트로 데이터.. 2023. 7. 25. 간편하게 예쁜 Select 박스를 만들어보자 (select2) 안녕하세요, 메가존 클라우드의 코드보안관을 담당하고 있는 매드준입니다. 탕탕탕탕.. ( ﹁ ﹁ ) ~→ 웹을 개발하면서 가장 중요하게 생각하는 게 바로 "UI를 어떻게하면 이쁘게 그릴 수 있을까"인데요. 라이브러리를 사용하여 UI를 이쁘게 다듬어봅시다! 그리하여! 제가 갖고온 라이브러리는 select2입니다. select2는 MIT 라이센스이므로 자유롭게 사용할 수 있다는 장점과 이쁘다는 최고의 장점이 있어서 한번 사용해 보았는데 괜찮아서 여러분들께 소개 시켜드릴려고 합니다! 그럼 따라오세요! 탕탕! 01. 설치하기 CDN으로 JS파일 제공받기 CDN은 (Content Delivery NetWork)의 약자입니다. 즉 cdn에 등록된 js를 제공받아서 select2를 사용가능하게 하는 방법입니다. 다만,.. 2023. 6. 29. div 태그 내 이미지 적용하기 (동적 CSS 생성) MAD에 DrawFlow라는 OpenSource Library를 이용하여 구현한 아키텍처 그리기 기능이 있습니다 이 화면에서는 AWS에서 제공하는 서비스들의 아이콘을 이용하여 클라우드 내에서 서비스들이 어떻게 구성되는지를 표현할 수 있습니다 이 화면에서 각 서비스들의 아이콘을 화면에 배치할 수 있는데 하나의 문제가 발생했었습니다 화면에 배치하는 요소들을 Node로 표현하는데 Node 위에 이미지 태그가 쌓여있는 형태로 인해 아이콘을 별도로 확대를 해야 위치를 이동할 수 있는 치명적인 문제였습니다. 우선 문제 해결 전의 소스를 확인하겠습니다. 수정 전 코드 /* 상위 코드 생략 */ if (folder[0] == 'category_icons') { element = ` `; } 노드를 canvas 위에 올.. 2023. 6. 26. 데이터 시각화 라이브러리 D3.js로 네트워크 차트 만들기 (1) 안녕하세요, 메가존클라우드 Mass Migration Center의 AAT에서 프론트엔드와 백엔드 개발을 담담하고 있는 MC매드(A.K.A. The Chart Generator)입니다. 마이그레이션 전에 진단 과정을 거치며 가장 중요한 것 중 하나가 바로 "호스트의 연계 복잡도"를 알아내는 일인데요. 현재 AAT가 개발 중인 MAD는 수집 엔진을 통해 호스트 간의 네트워크 구성 데이터를 수집하고, 해당 데이터를 웹에서 차트로 보여주고 있답니다. 차트는 자바스크립트 오픈소스 라이브러리인 D3.js를 활용하여 개발됐어요. 이번 포스팅에서는 D3.js 라이브러리를 활용해서 네트워크 차트를 개발하는 과정을 소개해보겠습니다! 01. 변수 선언하기 const chartOptsList = { selector: "#n.. 2023. 6. 23. 슬라이드 메뉴(DrawerLayout Navigation) 적용하기 화면 구성에서 각 화면을 이동하거나, 기능 키들을 사이드 메뉴 영역에 표현하는 케이스가 많습니다. 메뉴 영역은 기능적으로는 간편하게 애플리케이션을 사용할 수 있도록 해주지만 보여지는 데이터 영역은 그만큼 줄어들 수 있습니다 현재 MAD 서비스에서 구현되고 있는 기능 중 OpenSource인 DrawFlow를 이용하여 TO-BE 아키텍처를 그릴 수 있는 기능을 제공하고 있는데 배치하려는 아이템을 메뉴 영역에 보여주어 실제 그릴 수 있는 영역에 제한을 받았었습니다 솔루션 아이콘을 배치할 때는 메뉴를 열고 아닐 때는 닫아 컨텐츠 영역을 넓힐 수 있는 방법으로 슬라이드 메뉴 기능을 적용하기로 했습니다 위 이미지에서와 같이 햄버거 버튼을 누르면 숨겨져있던 메뉴 바가 나오고 X 버튼을 누르면 다시 숨겨지도록 하여 .. 2023. 6. 23. Element에 리본 적용하기 화면을 구성하면서 강조를 해야 할 데이터가 발생할 수 있습니다 어떻게 표현을 할지에 대해 팀원분들과 brainStorming을 진행하여 방식을 고민하였습니다 여러 표현 방법이 있을 수 있지만 데이터를 표시할 Element에 리본을 적용하여 표현하는 것으로 정했습니다. 위 이미지인 Flutter 화면과 같이 해당 화면이 개발 화면이라는 것을 리본을 통해 강조할 수 있습니다 구현하려는 화면에선 통계 데이터가 마지막으로 취합된 시간이 언제인지를 표현하려 했고, 적용 위치는 DataTable에 적용을 하였습니다 리본에 대한 코드는 StackOverFlow에 소개되어있는 코드를 적용하였습니다 기존 화면: 적용 화면 : 적용 코드: (출처 : https://stackoverflow.com/questions/6312.. 2023. 6. 23. 이전 1 다음
