[feat] Dashboard 포트폴리오 파이차트, 총 자산현황 라인차트 구현

[bakhacode]

구현한 것

• 포트폴리오 파이차트
  • recharts 사용
• 총 자산현황 추이 라인차트
  • lightweight charts와 lightweight-charts-react-wrapper 사용

[Kakamotobi]

isProfit 자체가 이익을 의미하기 때문에 isProfitUp말고 isProfit라고 해도 좋을 것 같습니다 👍

[bakhacode]

아 isProfit가 true false로 이익이냐 아니냐로 해석되는군요 감사합니다 🤣

[bakhacode]

그러고보니 이 부분도 어차피 양수 음수로 받으면 되는 부분이라서 삭제했습니다

[Kakamotobi]

이 컴포넌트는 어디서 사용하고 있나요? 얘는 dummy component일거 같은데 props를 먼저 정의하고 받아도 될것 같습니다

[bakhacode]

Dashboard의 Main 영역에서 현재 가치들을 표기하는 영역 컴포넌트입니다. 총 자산 금액 등 현재 평가되고 있는 값들이 Dashboard에서 관리될 필요는 없어보여서 컴포넌트로 분리해줬습니다. 그 편이 가독성 측면에서도 좋아보입니다. 이름을 조금 수정해줘야할 것 같은데 추천해주실 수 있나요?

[Kakamotobi]

PortfolioOverview 정도 괜찮을것 같아요

[bakhacode]

반영했습니다~

[Kakamotobi]

Convention을 따라주세요!😂 함수 위에 Props type을 정해주시면 좋을 것 같아요

[bakhacode]

아 ㅋㅋㅋㅋ 라이브러리와 씨름하다가 완전히 생각도 못했습니다 수정하겠습니다 😂

[Kakamotobi]

MSW를 활용해주시면 좋을 것 같습니다 👍

[bakhacode]

msw 기능 추가해서 리퀘스트 하겠습니다

[Kakamotobi]

개인적으로 파일의 주체인 PortfolioPieChart 함수가 위로 올라가있는게 좋을것 같아요

[bakhacode]

✅

[Kakamotobi]

DataType만 봐서는 무슨 데이터를 의미하는지 모르겠어서 type 이름을 더 descriptive하게 작성하면 이해가 빠를 것 같습니다

[bakhacode]

LineChart를 그리기위한 날짜와 그 날의 값들이 들어있는 데이터인데 뭐라고하는게 좋을까요? 총 자산 현황 추이니까 TotalAssetTrendData...?

[Kakamotobi]

아래처럼 하는게 좀 더 나을 것 같아요. 그리고 Portfolio에서는 PortfolioValuation 등으로 하면 될것 같습니다

type HistoricalValuation = {
  date: string;
  valuation: number;
}

type Props = {
  data: HistoricalValuation[];
  currentRangeIndex: number;
}

[bakhacode]

수정완료했습니다

[Kakamotobi]

Fragment는 불필요해보입니다.

컴포넌트 이름이 TotalValueLineChart이기 때문에 StyledTotalValueLineChartㅇ로 하시면 일관성이 있을것 같습니다

[bakhacode]

아래와같이 수정하겠습니다 ✅

[altmit]

저희 임시 디자인에서는 dashboard, portfolio page에서 pie chart를 사용할 예정인데
두 곳 모두에서 사용할 수 있는 공용 컴포넌트이면 좋을 것 같습니다.

ex) pie chart의 크기가 다를 수 있고, legend의 위치도 달라질 수 있음

[bakhacode]

width와 height를 prop으로 받게 수정하겠습니다. legend도 사용처에서 유연하게 사용할 수 있게 포트폴리오차트에서 분리해야겠네요.

[altmit]

pie chart가 어떻게 그려지냐에 따라서 꼭 prop으로 안받고 width : 100% 같이 부모의 크기 따라가서 사용처에서 그냥 element 한 겹을 더 두는 방법도 괜찮을 것 같네요

[bakhacode]

wrapper 쓰는 방법 좋은 거 같네요 디자인 구성 예시가 좀 나온 후에 자세하게 수정해야할 것 같아요

[altmit]

any 말고 정확한 타입 지정하면 좋을 것 같습니다.

[bakhacode]

index는 number인데 _는 라이브러리내부에서 전달하는 값인 것 같은데 공식문서에도 정해놓은 타입이 따로 없는 것 같습니다. console.log 찍어서 나오는 값을 간단하게 타입 지정해놓긴 해놨습니다.

type PieEntry = {
  percent: number;
  cornerRadius?: number;
  name: string;
  tooltipPayload: any[];
  midAngle: number;
  cx: number;
  cy: number;
  endAngle: number;
  fill: string;
  innerRadius: number;
  maxRadius: number;
  outerRadius: number;
  paddingAngle: number;
  startAngle: number;
  stroke: string;
  tooltipPosition: {
    x: number;
    y: number;
  };
  value: number;
};

[altmit]

self close로 해도 될 것 같네요

[bakhacode]

✅

[altmit]

rechartsd에서 activeIndex가 어떻게 활용되고 있는지 잘 이해가 안되고 있어서 설명 조금 부탁 드립니다.

어떤 상호 작용 때문에 activeIndex에 따라서 총 자산 현황이 사라졌다 나타나는 건지 궁금하네요

[bakhacode]

 const onPieEnter = useCallback(
    (_: PieEntry, index: number) => {
      setActiveIndex(index);
    },
    [setActiveIndex]
  );

기본적으로 onPieEnter함수가 라이브러리에서 제공하는 Pie컴포넌트의 onMouseEnter에서 동작할 때 해당 파이의 인덱스에 맞는 정보가 나오게 됩니다. 그리고 호버한 마우스 커서를 빼도 set되어있는 Index는 고정으로 남아서 가장 마지막으로 호버한 파이의 정보가 가운데에 나와있게 되는데요. onMouseLeave에

const onPieLeave = useCallback(() => {
    setActiveIndex(-1);
  }, [setActiveIndex]);

  console.log(activeIndex);

함수를 전달해줘서 마우스가 파이를 떠날 때 Index를 -1로 만들어버립니다. 첫번째 파이의 index가 0이여서 총 자산 현황을 보여줄 때의 index를 -1로 사용했는데 매직넘버가 되서 헷갈리게 된 것 같네요.

const TOTAL_INDEX = -1 

const [activeIndex, setActiveIndex] = useState(TOTAL_INDEX);

const onPieLeave = useCallback(() => {
    setActiveIndex(TOTAL_INDEX);
  }, [setActiveIndex]);

{activeIndex === TOTAL_INDEX ? (
        <TotalValue>
          <p>총 자산 현황</p>
          <div>{addComma(total)}</div>
        </TotalValue>
      ) : null}

초기값과 onPieLeave 함수 및 플래그에서의 조건을 수정해줬습니다

[Kakamotobi]

PortfolioOverview 정도 괜찮을것 같아요

[Kakamotobi]

아래처럼 하는게 좀 더 나을 것 같아요. 그리고 Portfolio에서는 PortfolioValuation 등으로 하면 될것 같습니다

type HistoricalValuation = {
  date: string;
  valuation: number;
}

type Props = {
  data: HistoricalValuation[];
  currentRangeIndex: number;
}