ISIH's Archive

이제 홈 화면 작업 들어가자

툴팁 생성을 위해데이터 구조를 한 번 더 수정했다. 작업 결과물 :  포트폴리오 전체 수익률 계산 기능(Evaluation)은현재 데이터 구조에서 가능할 듯

어제 수정 작업한 MongoDB Document에서 데이터를 받아온 후이를 어떻게 가공하여차트를 만들고, 툴팁을 생성하고, 수익률을 계산할지 고민하다문득 그런 생각이 들었다.  ' 내가 지금 MongoDB를 RDBMS처럼 접근하고 있는 것은 아닐까? '   그래서 몽고DB Document 구조를 재수정했다.그리고 코드도 다시 수정했다. 이번에 작업한 코드는 이렇고 실행은잘 된다.

1) 차트에 Mouseover 했을 때, "종목명-가격-수량" 보여주는 툴팁 생성2) 포트폴리오의 전체 수익률을 계산해주는 Evaluation 기능 추가를 위해 Portfolio Document의 구조를 바꿔야했고그에 따른 프론트/백 코드 수정을 진행하려 한다. 오늘은 "신규 포트폴리오 추가 기능"에 대한 코드 수정을 했다.

1. (D3.js) .on("end", ~)이슈 : 화면 좌측의 도넛 차트(연두색 네모 박스로 표시)가 그려지는 중에,          차트 위에 마우스를 올리면 차트가 깨짐(제대로 안그려짐) 원인 : 비동기 속성 - transition에서 정의한 콜백이 실행되는 동안에도 이벤트 리스너에서 정의한 콜백이 실행됨 해결 : " .on("end", ~ ) " 를 활용하여transition이 완료된 이후에 마우스 이벤트 리스너가 실행되도록 함. 2. (Vue.js) watch이슈 : watch에서 정의한 함수가 작동하지 않음 & 함수가 실행되는 시기(컴포넌트가 렌더링 되기 전에 함수가 먼저 실행됨)원인 : 생략해결 : 1) deep watch"addAssetsData"에 watch를 걸어둠근데 "addAsset..

요즘 D3.js 활용해서 캔들차트 구현하느라 많이 애먹고 있다.차트 구현에만 매달려있다보니 작업의 진도가 나아가질 않는데,차트 구현은 일단 뒤로 미루고 다른 작업들부터 해야겠다. 1 - 1)모든 종목의 정보를 화면에 노출시킬 수는 없다. 만약 그런다면 굉장히 무거워지고, 성능도 떨어지겠지.그래서 홈 화면에 노출되는 종목은,     (1) 보유 종목     (2) 검색 종목으로 한정한다.보유 종목은 DB내 정보로 구분하고검색 종목은 검색 내역을 vuex-persistedstate로 저장하여 가져온다.만약, 보유종목과 검색종목이 둘 다 없을 시해당 상태를 알리는 화면을 따로 띄운다. 1 - 2) 홈 화면에서의 종목별 캔들차트는 별도의 기능(확대/축소, 이동, 십자선,  툴팁 등)을 요구하지 않기에현재 구현된..

수정 전 수정 후 결론

결과물 미국 주식 중국 주식(홍콩, 상해) 싱가포르 주식 가상 화폐 한국 주식 앞으로 할 일1) Zoom & Pan 기능 구현2) Zoom에 반응하여 x-axis, y-axis의 tickCnt와 범위 변경3) Pan(또는 하단 스크롤바 움직임)에 반응하여 x-axis, y-axis의 tickCnt와 범위 변경4) 날짜 형식 수정5) 하단 스크롤바가 왼쪽 끝에 닿았을 때, 추가적인 데이터 불러오기6) 전반적인 규격, 사이즈 수정

일단 구상한 내용은 아래와 같고 오늘은 간단히 프론트/백 구성하고, 기능이 정상 실행되는지만 봤다.