Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#1268] Chart > Brush 기능 #1282

Merged
merged 11 commits into from
Oct 11, 2022
Merged

[#1268] Chart > Brush 기능 #1282

merged 11 commits into from
Oct 11, 2022

Conversation

Mun94
Copy link
Collaborator

@Mun94 Mun94 commented Sep 15, 2022

[기능]
 1. Chart의 zoom영역 Brush에 표시
 2. Brush에 표시 된 줌 영역 좌우측 테두리(두껍게 표시된 부분) 클릭하여 mousemove로 넓히거나 좁히는 기능(throttle, 5ms)
 3. Wheel, Mouse Drag, Teleport(Brush 영역 외 영역 클릭 시)을 이용하여 Brush에 표시 된 줌 영역 움직이는 기능
 4. Brush 컴포넌트의 height 옵션을 이용하여 Brush 높이 조절
 5. Brush 컴포넌트의 show 옵션을 이용하여 Brush 생성 유무 조절
 6. useDebounce 옵션을 이용하여 true(Default)이면 조절 된 Brush 영역의 마지막을 가지고 차트가 업데이트 되고(true에서 wheel을 이용한 Brush 영역 이동 시 마지막 wheel 이벤트 발생 후 100ms에 후에 차트가 업데이트 됨) false이면 Brush 영역 조절과 동시에 차트가 업데이트 됨.
 7. ev-chart와 ev-chart-brush 컴포넌트를 ev-chart-group로 맵핑 하여 사용 가능
 8. Brush 컴포넌트의 chartIdx 옵션을 이용하여 ev-chart-group으로 맵핑 된 차트 중 몇 번째의 차트를 Brush에 보여줄지 선택하여 표시 가능 (Default는 0)
 9. Zoom 모드와 상관없이 Brush 별도로 사용 가능
 10. 기존 차트 레전드 영역 시리즈 선택 시 brush 차트에도 선택 된 시리즈만 보이도록 수정
 11. 브러시 마우스 커서 모양 변경 ( 내부에 있을 경우 grab, 리사이즈 버튼 영역에 있을 경우 ew-resize, 외부에 있을 경우 poniter)   
 12. 브러시 영역 selection 옵션으로 fillColor (브러쉬 색상 설정), opacity (브러쉬 투명도 설정) 설정 가능하도록 수정

[기존 evChart와 Brush의 차이]
1. brush 차트에는 기본 차트 모양만 그려지도록 수정 (overlayCanvas 를 사용하지 않고, Tooltip, Interaction, Tip, Legend, Title 를 사용하지 않음)
[확인경로]
 - Chart > BrushChart

######################################
 - ev-chart-brush 컴포넌트 생성
 - ev-chart-brush의 show option으로 브러쉬 추가/제거
 - brushIdx를 이용하여 변경되는 zoomStartIdx와 zoomEndIdx를 브러쉬에 표시
######################################
 - brush로 zoom 영역을 넓히거나 좁히는 기능
######################################
 - zoom 영역을 고정하여 움직이는 기능
######################################
 - BrushChart 메뉴 생성 및 예시 추가
######################################
 - 파일 이름 변경
@Mun94 Mun94 self-assigned this Sep 15, 2022
######################################
 - Zoom 모드와 상관없이 Brush 사용 가능하도록 수정
 - 설명란 이벤트 버튼들을 ev-toggle로 수정
 - evChart resize 함수의 parameter 타입 및 용도 정의
@Mun94 Mun94 force-pushed the 1268_chart_brush branch 5 times, most recently from ec1b069 to 9e0fb63 Compare September 21, 2022 04:44
######################################
1. useDebounce 옵션 추가
 - useDebounce 옵션을 이용하여 true(Default)이면 조절 된 Brush 영역의 마지막을 가지고 차트가 업데이트 되고(true에서 wheel을 이용한 Brush 영역 이동 시 마지막 wheel 이벤트 발생 후 100ms에 후에 차트가 업데이트 됨)
 - false이면 Brush 영역 조절과 동시에 차트가 업데이트 되도록 수정.

2. brush 영역 이동 이벤트 추가
 - wheel 뿐만 아니라 mouse drag 를 이용한 Brush 영역 이동
 - Brush 영역 외 영역을 클릭 시 해당 영역으로 순간 이동이 가능하도록 추가.

3. 기타
 - brush 차트에는 기본 차트 모양만 그려지도록 수정. (overlayCanvas를 사용하지 않고, Tooltip, Interaction, Tip, Legend, Title를 사용하지 않음)
 - brush에서는 series point 보여지지 않도록 수정 (좁은 영역에 point 까지 있으면 흐름 확인에 어려움이 있음)
 - JSDocs 추가.
######################################
1. 레전드 영역 시리즈 선택 시 brush 차트에도 선택 된 시리즈만 보이도록 수정
######################################
1. 브러시 차트에서의 마우스 커서 모양 변경 (
  내부에 있을 경우 grab,
  버튼 영역에 있을 경우 ew-resize,
  외부에 있을 경우 pointer
)
######################################
 - 브러시 영역 selection 옵션으로 fillColor (브러쉬 색상 설정), opacity (브러쉬 투명도 설정) 설정 가능하도록 수정
######################################
 - merge 3.0
@jhee564 jhee564 merged commit 98c65fb into 3.0 Oct 11, 2022
@jhee564 jhee564 deleted the 1268_chart_brush branch October 11, 2022 02:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants