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.

Sign up for GitHub

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

Jump to bottom

Chart > zoom in, out 기능 #1242

Closed
Mun94 opened this issue Jul 18, 2022 · 0 comments
Closed

Chart > zoom in, out 기능 #1242

Mun94 opened this issue Jul 18, 2022 · 0 comments

Comments

@Mun94
Copy link
Collaborator

Mun94 commented Jul 18, 2022

click up : https://app.clickup.com/t/2tteg29
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
df8cf2e 
######################################
## 1차 개발 ##
  [기능]
    1. Drag Zoom
      - ev-chart-zoom 컴포넌트로 줌을 사용할 차트 컴포넌트를 감싸면 됨
      - Zoom 활성화
        a. point 하나만 drag 했을 경우 x축 drag 좌우 영역 계산 후 가까운 날로 줌 실행
        b. 줌 영역 이동
           i. 마우스 wheel을 이용한 줌 영역 이동
        c. 이전, 최근 줌 영역으로 이동
           i. 우측 상단 previous, latest 아이콘을 이용하여 이동 (크롬 이전, 다음 페이지로 이동 기능 참고)
        d. 줌 에니메이션 (AMChart 줌 에니메이션 참고)
      - Zoom 비활성화
        a. 기존 ev-chart 이벤트 사용 가능
        b. zoom reset(줌 초기화) 기능만 사용 가능 (drag zoom / previous, latest, wheel 줌 영역 이동 사용 불가)

    2. 우측 상단 아이콘
      - 줌 초기화, 이전 / 최근 줌 영역으로 이동, 드래그 줌 활성화
      - chartZoomOption에 따라 ev-icon 변경 가능(아이콘 모양, 사이즈, 색상, hover 색상)

  [확인경로]
   - Chart > LineChart > Zoom
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
47623f5 
######################################
사용하지 않는 chartZoom > plugins.interaction 파일 제거
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
1b0b4f5 
######################################
merge 3.0
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
8093781 
######################################
lint 에러 수정
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
4aad267 
######################################
lint 에러 수정
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
77ebb07 
######################################
lint 에러 수정
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
716a8e0 
######################################
lint 에러 수정
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
784f660 
######################################
lint 에러 수정
Mun94 added a commit that referenced this issue Aug 11, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
64cf53b 
######################################
lint 에러 수정
Mun94 added a commit that referenced this issue Aug 15, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
c7fb8cf 
######################################
 - 사용 가능한 아이콘 enable, disable 스타일 처리
 - this.zoomAreaMemory 버퍼 메모리 100으로 제한
 - 데이터 업데이트 버튼 생성 (데이터 조회 후 반응 확인용)
Mun94 added a commit that referenced this issue Aug 16, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
304b441 
######################################
 - 사용 가능한 아이콘 enable, disable 스타일 처리
 - this.zoomAreaMemory 버퍼 메모리 100으로 제한
 - 데이터 업데이트 버튼 생성 (데이터 조회 후 반응 확인용)
Mun94 added a commit that referenced this issue Aug 16, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
b94c7a3 
######################################
 - 사용 가능한 아이콘 enable, disable 스타일 처리
 - this.zoomAreaMemory 버퍼 메모리 100으로 제한
 - 데이터 업데이트 버튼 생성 (데이터 조회 후 반응 확인용)
Mun94 added a commit that referenced this issue Aug 16, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
564a084 
######################################
 - zoom 모드에서 새로고침 버튼은 항상 켜지도록 수정
 - zoom 모드 해제시 아이콘 사용 불가하도록 수정
 - zoomAreaMemory buffer memory 값 사용자가 조절할 수 있도록 수정
Mun94 added a commit that referenced this issue Aug 17, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
3329c35 
######################################
 - zoom 모드에서 새로고침 버튼은 항상 켜지도록 수정
 - zoom 모드 해제시 아이콘(reset, previous, latest), wheel 줌 이동 사용 불가 하도록 수정
 - chartZoomOptions에 zoomAreaMemory buffer memory(bufferMemoryCnt) 옵션 추가하여 값 사용자가 조절할 수 있도록 수ì 
Mun94 added a commit that referenced this issue Aug 17, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
aab04f3 
######################################
 - zoom 모드에서 새로고침 버튼은 항상 켜지도록 수정
 - zoom 모드 해제시 아이콘(reset, previous, latest), wheel 줌 이동 사용 불가 하도록 수정
 - chartZoomOptions에 zoomAreaMemory buffer memory(bufferMemoryCnt) 옵션 추가하여 값 사용자가 조절할 수 있도록 수정
Mun94 added a commit that referenced this issue Aug 17, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
21c79b4 
######################################
 - zoom 모드에서 새로고침 버튼은 항상 켜지도록 수정
 - zoom 모드 해제시 아이콘(reset, previous, latest), wheel 줌 이동 사용 불가 하도록 수정
 - chartZoomOptions에 zoomAreaMemory buffer memory(bufferMemoryCnt) 옵션 추가하여 값 사용자가 조절할 수 있도록 수정
Mun94 added a commit that referenced this issue Aug 17, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
57d2669 
######################################
 - zoom 모드에서 새로고침 버튼은 항상 켜지도록 수정
 - zoom 모드 해제시 아이콘(reset, previous, latest), wheel 줌 이동 사용 불가 하도록 수정
 - chartZoomOptions에 zoomAreaMemory buffer memory(bufferMemoryCnt) 옵션 추가하여 값 사용자가 조절할 수 있도록 수정
Mun94 added a commit that referenced this issue Aug 17, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
adc4ee7 
######################################
- 사용 가능한 아이콘 enable, disable 스타일 처리
  - zoomMode일 경우 아이콘 활성화 / zoomMode가 아닐 경우 아이콘 비활성화로 스타일 처리
  - zoomMode일 경우 새로고침(reset)아이콘은 항상 활성화 상태
  - zoom을 실행했던 값이 있으면 previous 아이콘이 활성화 되고 최근으로 이동할 값이 있으면 latest 아이콘 활성화

- this.zoomAreaMemory 버퍼 메모리 제한
  - 버퍼 메모리 제한 default 값으로 100으로 설정 (배열 length 100)
  - chartZoomOptions에 bufferMemoryCnt로 버퍼값 사용자가 설정할 수 있도록 추가 (테스트 가능한 줌 버퍼 메모리 InputNumber 추가)
  - ex. 버퍼 메모리 제한이 5일 경우 previous에 최근 5개 기록만 저장 됨

- 데이터 업데이트 버튼 생성
  - 새로운 데이터 조회 후 반응 확인용
  - 랜덤한 값(length 1 ~ 100개)의 차트 데이터로 업데이트 됨
  - 데이터가 1개 밖에 없는 차트일 경우 zoomMode 사용 불가
Mun94 added a commit that referenced this issue Aug 17, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
febb4dc 
######################################
 - 코드 정리 및 줌 차트 전용 메뉴 생성
Mun94 added a commit that referenced this issue Aug 18, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
9a17883 
######################################
 - 코드 정리 및 줌 차트 전용 메뉴 생성
Mun94 added a commit that referenced this issue Aug 18, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
83d6531 
######################################
 - 코드 정리 및 줌 차트 전용 메뉴 생성
Mun94 added a commit that referenced this issue Aug 19, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
5b3402e 
######################################
 - ev-chart-zoom slot으로 넘어오는 컴포넌트 중 props에 data, options이 없다면 발생하는 에러 수정
Mun94 added a commit that referenced this issue Aug 22, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
ca32acd 
######################################
 - ev-chart-zoom options 구조 변경
 - ev-chart-zoom에 사용하는 아이콘에 각각 class만 지정하고 해당 class로 사용자가 스타일을 적용할 수 있도록 수정 (기존 zoom options에 있던 icon color, hoverColor 제거)
Mun94 added a commit that referenced this issue Aug 24, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
7266ec3 
######################################
구조 변경 ã 중
Mun94 added a commit that referenced this issue Aug 27, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
8b1dc9b 
######################################
- 구ì 조 변경 중
- brush 추가 중
Mun94 added a commit that referenced this issue Aug 27, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
72ee067 
######################################
- 구ì 조 변경 중
- brush 추가 중
Mun94 added a commit that referenced this issue Aug 30, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
2c2b584 
######################################
 - ev-chart-zoom에서 ev-chart-group로 명칭 변경
   - ev-chart 단독으로 zoom을 사용하려면 ev-chart options에 zoom 옵션을 추가하면 됨
   - ev-chart-group에 ev-chart들을 추가해서 사용 할 경우 ev-chart-group options에 zoom 옵션을 추가하면 묶여있는 ev-chart에 다 같이 zoom이 동작 함.
 - zoom 모드가 아닌 상태에서 dragSeletion 옵션은 기존 ev-chart의 옵션을 따르도록 수정 (zoom 모드일경우 dragSelection은 use: true, keepDisplay: false 임.)
 - zoom > toolbar > show 옵션을 추가해서 상황에 따라 toolbar 생성/제거 가능하도록 수정
Mun94 added a commit that referenced this issue Aug 31, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
4785297 
######################################
 - 양방향으로 zoomStartIdx, zoomEndIdx 조절 가능하도록 수정
Mun94 added a commit that referenced this issue Aug 31, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
a3f020d 
######################################
 - 양방향으로 zoomStartIdx, zoomEndIdx 조절 가능하도록 수정
Mun94 added a commit that referenced this issue Aug 31, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
e5f55d2 
######################################
 - ZoomChart 메뉴 하단 설명 수정
kdeun1 pushed a commit that referenced this issue Sep 7, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능 (#1261)
d0ec2f5
@Mun94 Mun94 closed this as completed Oct 25, 2022
Mun94 added a commit that referenced this issue Oct 31, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능
06c91dd 
####################################
- toolbar 클래스 네임 수정
jhee564 pushed a commit that referenced this issue Oct 31, 2022
@Mun94
[#1242] Chart > Zoom in, out 기능 (#1309)
f5c7783 
* [#1242] Chart > Zoom in, out 기능
######################################
## 1차 개발 ##
  [기능]
    1. Drag Zoom
      - ev-chart-zoom 컴포넌트로 줌을 사용할 차트 컴포넌트를 감싸면 됨
      - Zoom 활성화
        a. point 하나만 drag 했을 경우 x축 drag 좌우 영역 계산 후 가까운 날로 줌 실행
        b. 줌 영역 이동
           i. 마우스 wheel을 이용한 줌 영역 이동
        c. 이전, 최근 줌 영역으로 이동
           i. 우측 상단 previous, latest 아이콘을 이용하여 이동 (크롬 이전, 다음 페이지로 이동 기능 참고)
        d. 줌 에니메이션 (AMChart 줌 에니메이션 참고)
      - Zoom 비활성화
        a. 기존 ev-chart 이벤트 사용 가능
        b. zoom reset(줌 초기화) 기능만 사용 가능 (drag zoom / previous, latest, wheel 줌 영역 이동 사용 불가)

    2. 우측 상단 아이콘
      - 줌 초기화, 이전 / 최근 줌 영역으로 이동, 드래그 줌 활성화
      - chartZoomOption에 따라 ev-icon 변경 가능(아이콘 모양, 사이즈, 색상, hover 색상)

  [확인경로]
   - Chart > LineChart > Zoom

* [#1242] Chart > Zoom in, out 기능
######################################
사용하지 않는 chartZoom > plugins.interaction 파일 제거

* [#1242] Chart > Zoom in, out 기능
######################################
lint 에러 수정

* [#1242] Chart > Zoom in, out 기능
######################################
- 사용 가능한 아이콘 enable, disable 스타일 처리
  - zoomMode일 경우 아이콘 활성화 / zoomMode가 아닐 경우 아이콘 비활성화로 스타일 처리
  - zoomMode일 경우 새로고침(reset)아이콘은 항상 활성화 상태
  - zoom을 실행했던 값이 있으면 previous 아이콘이 활성화 되고 최근으로 이동할 값이 있으면 latest 아이콘 활성화

- this.zoomAreaMemory 버퍼 메모리 제한
  - 버퍼 메모리 제한 default 값으로 100으로 설정 (배열 length 100)
  - chartZoomOptions에 bufferMemoryCnt로 버퍼값 사용자가 설정할 수 있도록 추가 (테스트 가능한 줌 버퍼 메모리 InputNumber 추가)
  - ex. 버퍼 메모리 제한이 5일 경우 previous에 최근 5개 기록만 저장 됨

- 데이터 업데이트 버튼 생성
  - 새로운 데이터 조회 후 반응 확인용
  - 랜덤한 값(length 1 ~ 100개)의 차트 데이터로 업데이트 됨
  - 데이터가 1개 밖에 없는 차트일 경우 zoomMode 사용 불가

* [#1242] Chart > Zoom in, out 기능
######################################
 - 코드 정리 및 줌 차트 전용 메뉴 생성

* [#1242] Chart > Zoom in, out 기능
######################################
 - ev-chart-zoom slot으로 넘어오는 컴포넌트 중 props에 data, options이 없다면 발생하는 에러 수정

* [#1242] Chart > Zoom in, out 기능
######################################
 - ev-chart-zoom options 구조 변경
 - ev-chart-zoom에 사용하는 아이콘에 각각 class만 지정하고 해당 class로 사용자가 스타일을 적용할 수 있도록 수정 (기존 zoom options에 있던 icon color, hoverColor 제거)

* [#1242] Chart > Zoom in, out 기능
######################################
 - ev-chart-zoom에서 ev-chart-group로 명칭 변경
   - ev-chart 단독으로 zoom을 사용하려면 ev-chart options에 zoom 옵션을 추가하면 됨
   - ev-chart-group에 ev-chart들을 추가해서 사용 할 경우 ev-chart-group options에 zoom 옵션을 추가하면 묶여있는 ev-chart에 다 같이 zoom이 동작 함.
 - zoom 모드가 아닌 상태에서 dragSeletion 옵션은 기존 ev-chart의 옵션을 따르도록 수정 (zoom 모드일경우 dragSelection은 use: true, keepDisplay: false 임.)
 - zoom > toolbar > show 옵션을 추가해서 상황에 따라 toolbar 생성/제거 가능하도록 수정

* [#1242] Chart > Zoom in, out 기능
######################################
 - 양방향으로 zoomStartIdx, zoomEndIdx 조절 가능하도록 수정

* [#1242] Chart > Zoom in, out 기능
######################################
 - ZoomChart 메뉴 하단 설명 수정
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Mun94