추가 개발 메모

기존 차트에 기능 추가

사이트 4가지 테마 선택 기능 개발. 참고 링크 (https://material.angular.io/guide/theming)
비중 차트들에 평가금액도 마우스 오버시 나오도록 추가. 현재 비중 퍼센트만 나오는데 평가금 금액도 확인 가능하게 추가
- 비중과 수익률 버블 차트누적수익률
- 포트폴리오 비중 도넛 차트
- 포트폴리오 비중 트리맵
- 업종별 비중 원형 차트
기간 조회 차트들 모두 연간 통계 가능하게 기능 모두 추가.
- 올해 배당금 차트(전체기간) - x축: 년도, y축: 배당금, 범례: 종목 - 추가로 범례 갯수 제한 고려.
- 누적 배당금 차트 - 연도별 기간 - x축: 년도
- 수익률,매수금액,평가금액,누적수익금 차트 - 연도별 기간 - x축: 년도
- 내수익률과 지수수익률 비교 차트 - 연도별 기간 - x축: 년도
- 월별 수입금, 누적수입금 차트 - 연도별 기간 - x축: 년도
- 수익률과 누적수입금 차트 - 연도별 기간 - x축: 년도
[완료]수익률과 누적수입금 차트 → 누적수입금 차트 로 변경
- x축: 월, y축: 누적수입금
- 차트 유형: 바 차트 (Bar Chart) - 스택바
- 범례: 매수금액, 실현손익, 환차익, 누적배당금 → 모두 합계가 평가금액. 마우스 오버로 총 평가금액 표시

신규 추가.

차트설정 추가
1. 차트 활성화, 비활성화 기능.
  - 기능: 불필요한 안보는 차트는 제거해서 안 볼 수 있다.
2. 차트 순서 변경 기능.
  - 기능: 사용자가 원하는 순서대로 차트를 배치할 수 있다.
[완료]월별 환차익 차트
- 기능: 월별 환차익을 차트로 표시하여, 환율 변동에 따른 이익 변화를 확인할 수 있음
- 차트 유형:
  1. 바 차트 (Bar Chart) - 환차익
  2. 선 차트 (Line Chart) - 환율
- 데이터: 월간이력 (환차익)
- 기간 선택 기능 추가(콤보박스) - 6개월, 올해, 1년, 2년, 3년, 전체기간
- x축: 월, y축: 환차익(y-a), 환율(y-b)
- 색상:
  - 바 차트 (Bar Chart) - 환차익:
```
{
      borderColor: 'rgba(55, 188, 155, 1)',
      backgroundColor: 'rgba(55, 188, 155, 0.8)',
    }
```
  - 선 차트 (Line Chart) - 환율:
```
{
      borderColor: 'rgba(255, 195, 0, 1)',
      backgroundColor: 'rgba(255, 195, 0, 0.9)',
    }
```

차트 추가

[완료]월별수익금, 월별수익률 차트

기능: 각 월별 수익금과 수익률 변동을 차트로 표시하여, 수익금의 변동과 수익률의 변동을 파악할 수 있음.
차트 유형:
1. 선 차트 (Line Chart) - 수익률
2. 누적 막대 차트 (Stacked Bar Chart) - 수익금(월별수익률, 월별배당수익, 월별실현손익, 월별미실현손익)
데이터: 월간이력 (년월, 수익금계산, 수익률계산)
기간 선택 기능 추가(콤보박스) - 6개월, 올해, 1년, 2년, 3년, 전체기간
x축: 월, y축: 수익금(y-a), 수익률(y-b), 범례: 월별수익률, 월별배당수익, 월별실현손익, 월별미실현손익

색상:

선 차트 (Line Chart) - 수익률:

{
      borderColor: 'rgba(255, 195, 0, 1)',
      backgroundColor: 'rgba(255, 195, 0, 0.9)',
    }

누적 막대 차트 (Stacked Bar Chart):

{
      borderColor: 'rgba(237, 85, 101, 1)',
      backgroundColor: 'rgba(237, 85, 101, 0.8)',
    },
    {
      borderColor: 'rgba(252, 110, 81, 1)',
      backgroundColor: 'rgba(252, 110, 81, 0.8)',
    },
    {
      borderColor: 'rgba(255, 206, 84, 1)',
      backgroundColor: 'rgba(255, 206, 84, 0.8)',
    },
    {
      borderColor: 'rgba(160, 212, 104, 1)',
      backgroundColor: 'rgba(160, 212, 104, 0.8)',
    },
    {
      borderColor: 'rgba(72, 207, 173, 1)',
      backgroundColor: 'rgba(72, 207, 173, 0.8)',
    },
    {
      borderColor: 'rgba(79, 193, 233, 1)',
      backgroundColor: 'rgba(79, 193, 233, 0.8)',
    },
    {
      borderColor: 'rgba(93, 156, 236, 1)',
      backgroundColor: 'rgba(93, 156, 236, 0.8)',
    },
    {
      borderColor: 'rgba(172, 146, 236, 1)',
      backgroundColor: 'rgba(172, 146, 236, 0.8)',
    },
    {
      borderColor: 'rgba(215, 112, 173, 1)',
      backgroundColor: 'rgba(215, 112, 173, 0.8)',
    },
    {
      borderColor: 'rgba(218, 68, 83, 1)',
      backgroundColor: 'rgba(218, 68, 83, 0.8)',
    }

종목별 누적배당금 차트 - 현재 년 단위 선택해 검색

기능: 포트폴리오 내 종목별 누적배당금을 차트로 표시하여, 각 종목의 배당 성과를 비교할 수 있음.
콤보박스 2019,2020,2021,2022,2023년 등 선택시 1번 차트, 콤보박스 ‘연도별’ 선택시 2번 차트.

종목별 누적배당금 차트 - 1년간
- 기능: 선택한 년도 1년동안의 종목별 누적 배당금 성과를 비교할 수 있음.
- 차트 유형:
  1. 바 차트 (Bar Chart)
- 데이터: 배당금내역(배당일, 티커, 배당금, 통화, 원화)
- 기간 선택 기능 추가(콤보박스) - 년도 선택 기능. 2019,2020,2021,2022,2023년 등 선택으로 연도별 종목별 배당금 확인 가능.
- x축: 종목, y축: 배당금, 범례: 누적배당금
- 색상:
  - 바 차트 (Bar Chart)
```
{
      borderColor: 'rgba(72, 207, 173, 1)',
        backgroundColor: 'rgba(72, 207, 173, 0.8)',
    }   
```

종목별 누적배당금 차트 - 전체기간

기능: 전체기간 동안의 종목별 누적 배당금을 누적 막대 차트 (Stacked Bar Chart)로 누적배당금(2019,2021,2022,2023년 등)
차트 유형:
1. 누적 막대 차트 (Stacked Bar Chart) - 누적배당금(2019,2021,2022,2023년 등)
데이터: 배당금내역(배당일, 티커, 배당금, 통화, 원화)
기간 선택 기능 추가(콤보박스) - ‘연도별’ 선택 기능. 전체기간 동안의 종목별 누적배당금을 누적 막대 차트 (Stacked Bar Chart)로 범례(2019,2021,2022,2023년 등)로 확인 가능.
x축: 종목, y축: 배당금, 범례: 2019,2020,2021,2022,2023년 등

색상:

누적 막대 차트 (Stacked Bar Chart):

{
      borderColor: 'rgba(237, 85, 101, 1)',
      backgroundColor: 'rgba(237, 85, 101, 0.8)',
    },
    {
      borderColor: 'rgba(252, 110, 81, 1)',
      backgroundColor: 'rgba(252, 110, 81, 0.8)',
    },
    {
      borderColor: 'rgba(255, 206, 84, 1)',
      backgroundColor: 'rgba(255, 206, 84, 0.8)',
    },
    {
      borderColor: 'rgba(160, 212, 104, 1)',
      backgroundColor: 'rgba(160, 212, 104, 0.8)',
    },
    {
      borderColor: 'rgba(72, 207, 173, 1)',
      backgroundColor: 'rgba(72, 207, 173, 0.8)',
    },
    {
      borderColor: 'rgba(79, 193, 233, 1)',
      backgroundColor: 'rgba(79, 193, 233, 0.8)',
    },
    {
      borderColor: 'rgba(93, 156, 236, 1)',
      backgroundColor: 'rgba(93, 156, 236, 0.8)',
    },
    {
      borderColor: 'rgba(172, 146, 236, 1)',
      backgroundColor: 'rgba(172, 146, 236, 0.8)',
    },
    {
      borderColor: 'rgba(215, 112, 173, 1)',
      backgroundColor: 'rgba(215, 112, 173, 0.8)',
    },
    {
      borderColor: 'rgba(218, 68, 83, 1)',
      backgroundColor: 'rgba(218, 68, 83, 0.8)',
    }

색상:

누적 막대 차트 (Stacked Bar Chart):

{
      borderColor: 'rgba(237, 85, 101, 1)',
      backgroundColor: 'rgba(237, 85, 101, 0.8)',
    },
    {
      borderColor: 'rgba(252, 110, 81, 1)',
      backgroundColor: 'rgba(252, 110, 81, 0.8)',
    },
    {
      borderColor: 'rgba(255, 206, 84, 1)',
      backgroundColor: 'rgba(255, 206, 84, 0.8)',
    },
    {
      borderColor: 'rgba(160, 212, 104, 1)',
      backgroundColor: 'rgba(160, 212, 104, 0.8)',
    },
    {
      borderColor: 'rgba(72, 207, 173, 1)',
      backgroundColor: 'rgba(72, 207, 173, 0.8)',
    },
    {
      borderColor: 'rgba(79, 193, 233, 1)',
      backgroundColor: 'rgba(79, 193, 233, 0.8)',
    },
    {
      borderColor: 'rgba(93, 156, 236, 1)',
      backgroundColor: 'rgba(93, 156, 236, 0.8)',
    },
    {
      borderColor: 'rgba(172, 146, 236, 1)',
      backgroundColor: 'rgba(172, 146, 236, 0.8)',
    },
    {
      borderColor: 'rgba(215, 112, 173, 1)',
      backgroundColor: 'rgba(215, 112, 173, 0.8)',
    },
    {
      borderColor: 'rgba(218, 68, 83, 1)',
      backgroundColor: 'rgba(218, 68, 83, 0.8)',
    }

고민 중인 것

[완료]환율 변동에 따른 수익률 차트
- 기능: 환율 변동에 따른 수익률 변화를 시각화하여 환율 변동이 수익률에 미치는 영향을 파악
- 차트 유형:
  1. 선 차트 (Line Chart) - 환율
  2. 선 차트 (Line Chart) - 수익률
- 데이터: 환전내역 (환전일, 환율) 및 수익률 데이터
- 기간 선택 기능 추가(콤보박스) - 6개월, 올해, 1년, 2년, 3년, 전체기간
- x축: 월, y축: 환율(y-a), 수익률(y-b), 범례: 환율, 수익률
- 색상:
  - 선 차트 (Line Chart) - 환율:
```
{
      borderColor: 'rgba(255, 195, 0, 1)',
      backgroundColor: 'rgba(255, 195, 0, 0.9)',
    }
```
  - 선 차트 (Line Chart) - 수익률:
```
{
      borderColor: 'rgba(237, 85, 101, 1)',
                backgroundColor: 'rgba(237, 85, 101, 0.8)',
    }
```
월별 환전 이력 차트
- 기능: 월별 환전 이력을 시각화하여 환전 패턴과 금액의 변화를 파악
- 차트 유형:
  1. 선 차트 (Line Chart) - 환율
  2. 바 차트 (Bar Chart) - 환전 원화
- 데이터: 환전내역 (환전일, 환율, 달러, 원화)
- 기간 선택 기능 추가(콤보박스) - 6개월, 올해, 1년, 2년, 3년, 전체기간
- x축: 월, y축: 환율(y-a), 환전 원화(y-b), 범례: 환율, 환전 원화
- 색상:
  - 선 차트 (Line Chart) - 환율:
```
{
      borderColor: 'rgba(255, 195, 0, 1)',
      backgroundColor: 'rgba(255, 195, 0, 0.9)',
    }
```
  - 바 차트 (Bar Chart) - 환전 원화:
```
{
      borderColor: 'rgba(72, 207, 173, 1)',
        backgroundColor: 'rgba(72, 207, 173, 0.8)',
    }  
```
종목별 수익률 차트
- 탭으로 여러개 차트 구성.
1. 포트폴리오 종목별 수익률 순위 차트(TOP 5)
  - 기능: 포트폴리오 내 종목별 수익률 순위를 시각화하여, 가장 높은 수익률을 기록한 종목부터 낮은 순으로 정렬
  - 차트 유형: 수평 막대 차트 (Horizontal Bar Chart)
  - 데이터: 투자현황 (티커, 수익률)
  - x축: 수익률, y축: 종목
  - 색상:수평 막대 차트 (Horizontal Bar Chart):
```
{
      borderColor: 'rgba(72, 207, 173, 1)',
        backgroundColor: 'rgba(72, 207, 173, 0.8)',
    }  
```
2. 종목별 수익률 차트
  - 기능: 포트폴리오 내의 각 종목별 수익률을 막대 차트로 보여줍니다. 이를 통해 사용자는 자신의 투자 성과에 큰 영향을 미친 종목들을 쉽게 파악할 수 있습니다.
  - 차트 유형: 바 차트 (Bar Chart)
  - 데이터: 투자현황 (티커, 수익률)
  - x축: 종목, y축: 수익률
  - 색상:바 차트 (Bar Chart):
3. 섹터별 수익률 차트