Home

프로젝트 요구 조건

Axis(축)

• x축(현재시간을 기준으로 최근 XX분), 기본 y축 (0~5000).
• y축 범위는 방향 키보드(↑,↓)로 재설정 가능해야함.
• 점의 y값이 y축의 max값보다 높다면 max값과 동일한 기준으로 그린다.

컨텐츠(점)

• x 값으로 트랜잭션의 endTime 을 사용한다.
• y 값으로 트랜잭션의 responseTime 을 사용한다.

특수조건

• 점은 20만개까지 쌓인다.
• 20만개를 기준으로 x축의 시작시간은 가변적이다. x축의 종료시간은 항상 현재시간이다.
• 초기 차트를 로딩시에 2를 기준으로 데이터를 얻어와서 x축의 시작시간을 정한다.
• 조회하는 시점의 트랜잭션의 개수에 따라 x축의 시작시간은 가변적이다.
• 만약 최근 30분 동안의 트랜잭션의 수가 20만개라면 x축의 시작시간은 30분전이다.
• 차트의 크기는 윈도우의 풀사이즈, 윈도우의 Resize로 차트 크기도 가변적이어야 한다.

추가 조건

• 라이브러리의 확장성, UX, 웹접근성, SEO 등은 고려하지 않는다.
• 브라우저 타겟은 최신 크롬 버전이다.
• 20만건의 데이터를 다 받은 후에 렌더링을 시작하는 것이 아니라 받은 데이터가 적게 라도 있다면 최대한 표현한다.
• 20만개가 채워진이후에는 최근 데이터를 받는 대신에 과거 데이터가 삭제되고 렌더링에서도 빠져야 한다.
• API 제한 요건안에서 다양한 방법을 시도하여 구현한다.

프로젝트 설계

• Tech Stack
• Performance

프로젝트 성능

테스트 조건

• CPU: i7-6700HQ
• GPU: Intel HD 530
• OS: Windows 10 x64
• Browser: Chrome 61
• Window viewport: 2560*1440px (1280x720px @2x)
• API server: HTTP/1.1 100~400ms

테스트 결과

• 최초 접속시에는 API 응답속도에 의존적임. 현재 약 1분 내외로 로딩이 완료됨.
• 로컬 캐싱이 충분히 된 경우에는 초기 로딩에 약 5초 미만이 소요됨.
• 20만 개 로딩이 완료된 이후에 갱신은 100ms 미만으로 실시간으로 렌더링 됨.