줌차트-1. 라인 차트 팝업 확대(줌차트) 및 줌차트에 시리즈 영역 포함.

[gunlee01]

줌차트-1. 라인 차트 팝업 확대 및 확대 차트에 시리즈 영역 포함.

[mindplates]

라인 차트의 상단 옵션을 클릭하여, 해당 라인차트를 전체 팝업으로 보이도록 하고, 이때 차트 시리즈 정보를 추가적으로 보여주는 기능을 의미합니다.

먼저 페이퍼의 모든 차트는 <Paper>에서 차트 설정 목록을 <DIV>로 래핑하고, 이후 <Box>에서 실제 그래프를 위한 컴포넌트들을 렌더링합니다. 이때 차트의 버튼 영역은 <DIV>로 래핑한 부분에서 처리되므로, 만약 라인 차트 팝업 확대 부분의 이벤트 처리를 박스 상단의 버튼을 통해 처리하려고 한다면, 해당 부분의 코드를 살펴보아야합니다. 필터 버튼이 type의 xlog인 경우에만 하드 코딩되어 있으므로, 만약 라인 차트 부분에서만 어떤 버튼을 추가하려고 한다면, 마찬가지로 type을 통해 추가할 수 있습니다.

이 후 해당 이벤트 처리를 통해서, 하나의 차트가 전체 화면을 덮는 형태로 랜더링하기 위해서는 다양한 방법이 있겠지만, 간단하게 처리할 수 있는 부분은, 현재 차트를 그리는 부분과 별도의 부분으로 처리하는 것이 구현하기 간단하다고 생각됩니다. 즉 예를 들어서, 사용자가 클릭한 차트의 정보 (<Paper>의 this.props.boxes 중 하나)를 특정 상태값으로 저장해두고 (전체 영역 차트는 하나만 될 것이므로), 해당 값이 있는 경우, 전체 영역을 차지하는 컴포넌트를 만들고, 해당 컴포넌트에서 <LineChart> 컴포넌트와 this.props.objects 정보를 활용하여 시리즈 정보를 출력하도록 만드는 것입니다.