Statistic View 일반화

BEOKS commented 2 years ago

Problem

현재 메타데이터에서 특정한 속성만 시각화하도록 하드코딩되어있는데 이를 일반화할 작업이 필요하다.

속성을 선택해서 시각화 할 수 있는 기능을 추가
1. 메타데이터에서 모든 속성을 가져와서
2. button group에 각 속성을 표시하고 선택할 수 있도록하는 기능 추가
  1. → setSelectedGroup → selectedGroup에 포함된 속성만 표시
해당 속성의 데이터가 모두 number인 경우 히스토그램으로 표시
1. → const str=’123s’ metadata[’Age’].some(it → parseInt(it) ==None) → histogram 사용
2. 하나라도 number가 아닌 경우에는 string으로 간주, 파이차트로 표시한다.

doheez commented 2 years ago

차트에 legend를 추가해서 발생한 문제점

legend의 길이에 따라 파이 차트의 크기가 달라져서, 여러 차트를 동시에 확인할 때 통일성이 깨진다.
legend가 너무 길면 해당 파이 차트가 작아지다 못해 잘린다.
legend가 너무 많아서 스크롤이 길어지는 경우 다른 차트와 뷰가 겹친다.

BEOKS commented 2 years ago

여기있는 코드처럼 Legend를 아래에 배치해서 왼쪽에서 오른쪽으로 정렬하도록 하면 1번 문제는 해결될 것 같아. 그리고 2번처럼 ID의 경우에는 legend가 엄청나게 많아 질 수 밖에 없는데 현재로서는 코드상에서 해결하기 보단 사용자가 적절한 속성을 선택하는게 맞는 것같아서 이건 그대로 나둬야 할 것 같아. 3번의 경우는 legend를 옮긴 후에 다시 돌려보고 문제가 있으면 해결해보자

Reference

1., https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPieChart/Series_Types/PieSeries/

doheez commented 2 years ago

선배가 참조한 링크는 devextreme 모듈을 사용하는데, 내가 구현한 차트는 devexpress 모듈을 사용했기 때문에 서로 다른 모듈에서 import한 Legend 컴포넌트는 각각 가지고 있는 속성이 달라. 그래서 예시 코드처럼 <Legend /> 컴포넌트에

orientation="horizontal"
itemTextPosition="right"
horizontalAlignment="center"
verticalAlignment="bottom"

이런 props를 주는 것이 불가능해. 대신 devexpress 모듈의 Legend Plugin Reference[1]를 참고해서 position 속성으로 Legend의 위치를 바꿔놨어.

이걸로 파이 차트의 크기가 달라져서 통일성을 해치는 1번 문제는 해결했지만, 3번 문제는 그대로야. 차트 생성 모듈 자체를 devextreme으로 갈아타지 않는 이상 지금이 최선인 것 같은데 어떻게 할까? (모듈을 변경하면 차트에 전달하는 데이터 형식도 갈아엎어야 할 것 같아.)

Reference

[1] https://devexpress.github.io/devextreme-reactive/react/chart/docs/reference/legend/

BEOKS commented 2 years ago

시각화 기능을 확인해봤는데 차트를 만드는데 통일성이 깨지는것 같은데? 각 그래프의 높이가 고정되어 있는 것 같아. 내 생각에는 아쉽지만 devextreme으로 갈아타야 할 것 같은데 어려우려나?

doheez commented 2 years ago

어라... 내가 업로드한 메타 데이터로 차트 띄워서 확인해봤을 땐 통일성이 안 깨지는데 선배가 쓴 메타 데이터 좀 보내줄 수 있어? 좀 더 수정해보고 안 고쳐지면 devextreme으로 갈아타볼게

doheez commented 2 years ago

삽질의 기록

아래 방법들을 모두 시도해봤지만 차트 크기를 통일할 수 없었다.

devextreme으로 차트 생성 모듈을 변경했다. 그리고 데모 차트를 참고하여 Legend를 차트 아래에 배치해서 좌측에서 우측으로 정렬했다. 하지만 차트의 통일성이 여전히 깨졌다.
차트에서 Label을 없애고 Size 컴포넌트를 import해서 width, height props에 다양한 값을 넣어봤다.
1. width="100%": 변화 없음
2. height="100%": 변화 없음
3. height={1000}: 하드코딩으로 특정 값을 지정하니 차트의 크기는 통일되었으나, Legend 개수가 많지 않은 차트는 차트와 Legend 사이에 큰 여백이 생겼다. 또한, 지정한 height를 초과할 만큼 Legend가 많은 메타 데이터를 넣으면 결국 차트의 크기가 작아져서 통일성이 깨졌다.
모든 차트의 height가 고정되는 것이 MUI Grid 시스템 때문인가 싶어서 Grid를 없애봤다. 별다른 레이아웃 컴포넌트 없이 차트를 곧바로 배치해보기도 하고, Stack을 사용해보기도 했다. 하지만 달라지는 것이 없었다.
차트의 부모 컴포넌트 width만 지정한 채로 모든 차트 컴포넌트 자체를 하드코딩 해봤다. 그래도 width에 맞춰 차트의 height가 고정되었다.

해결 방법

허무하게도 차트들이 모두 같은 크기를 갖도록 만들어주는 sizeGroup 속성이 있었다. 이를 뒤늦게 발견해서 차트에 적용했다. 참고한 문서는 아래에 기록한다.

Reference

[1] https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/PiesWithEqualSize/React/Light/ [2] https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxPieChart/Configuration/#sizeGroup

BEOKS / Web-DICOM-Management