Feat/#40 - DashboardView Chart 구현

[mini-min]

• Closes [✨ Feat] 분석뷰에서 사용할 그래프 섹션 구현 #40

📝 Summary

DashboardView에 있는 차트 부분 기능을 구현했습니다.

🔨 What

1. Chart에 들어가는 UI 파일들을 작은 SubViews/Sections 단위로 분리했습니다.

주요 파일 부분만 설명하겠습니다. (어쩌다 보니 거의 다 설명한거군요...)

Model

• StayAddress : 상단 TOP3 체류 주소를 표현하기 위한 데이터 모델.
• CellChartData : 차트 1개 카드에 필요한 모든 데이터 구조. (series, summary, selectedWeekday 등 포함)
• HourlyVisit : 1시간 단위의 방문 데이터 모델. 차트의 "기본 단위" 데이터로 사용됨.

SubViews/Sections

• DashboardHeader : 대시보드 상단 헤더 영역 (타이틀, 요약 설명 등)
• DashboardRankSection : 상단 TOP3 체류 주소 리스트 섹션
• DashboardChartSection : Top 3 시간대별 기지국 체류 차트를 표시하는 메인 섹션

Components

• CellChartCard: 차트 + 요약 문구 + 요일 선택기가 포함된 하나의 카드 단위 컴포넌트
  • CellChartGraph: 실제 차트를 그리는 View (Swift Charts 기반)
  • CellChartLegend: “1주차 / 2주차” 등의 색상 범례 표시 View
  • WeekdayPillPicker : 요일 선택 컨트롤 (Pill 스타일의 Segment Picker)

DashboardScene
├── Models/
│   ├── CellChartData.swift
│   ├── HourlyVisit.swift
│   ├── StayAddress.swift
│   └── WeekDay.swift
│
├── SubViews/
│   ├── Sections/
│   │   ├── DashboardChartSection.swift
│   │   ├── DashboardHeader.swift
│   │   └── DashboardRankSection.swift
│   │
│   ├── CellChartCard.swift
│   ├── CellChartGraph.swift
│   ├── CellChartLegend.swift
│   ├── CellChartTitle.swift
│   ├── DashboardSectionHeader.swift
│   └── WeekdayPillPicker.swift
│
├── DashboardFeature.swift
├── DashboardPickerTab.swift
└── DashboardView.swift

---

2. SwiftChart 구현해냈습니다.

차트를 그리기 위해 Charts (Swift Chart) 프레임워크를 사용했습니다.
주요 기능들만 간략하게 소개해보죠.

시간대별 방문 빈도 시각화 : LineMark 와 ForEach 중첩 루프 조합

• LineMark
  : 각 HourlyVisit 데이터를 시간(hour) 축으로 매핑하고, 방문 횟수(count)를 y축에 표현합니다.
  interpolationMethod(.catmullRom)을 사용해 곡선이 부드럽게 이어지도록 했습니다.

• ForEach(availableWeeks)
  동일한 요일 내 여러 주차의 데이터(1~4주차)를 중첩 루프로 그려서,
  주차별 패턴 비교가 가능하도록 구성했습니다.

기존 Legend 삭제, 커스텀 Legend 사용 (피그마 디자인에 맞추기 위함)

foregroundStyle(by:)와 symbol(by:)

: 주차별로 선 색상과 심볼을 자동 구분하도록 설정했습니다.
weekStyleScale을 이용해 각 주차(1~4주차)에 고유 색상을 매핑했습니다. (3주차, 4주차는 임의의 센스있는 값으로 ^.^)

Tick 표시 최적화

0~24시 중 주요 구간(3시간 단위)만 표시하도록 stride(from:through:by:)로 x축 Tick 값을 제한했습니다.

---

3. DashboardFeature 복잡합니다.

차트를 그리기 위한 각종 계산 메서드들이 아래 Extension 부분에 정의되어 있습니다.

차트 데이터 가공 (buildCellChartData)

• 실제 위치 데이터의 기간(firstDate ~ lastDate)을 기반으로 “1주차 ~ N주차”를 자동 계산하여 시간대별 체류 패턴을 추출합니다.
• 불필요한 빈 주차(데이터가 없는 주)는 자동 제외하여 성능을 개선했습니다.

요일 변경 처리 (setChartWeekday)

• 사용자가 차트 내 요일을 변경하면, 선택된 요일에 맞는 데이터만 필터링하여 다시 차트를 갱신합니다.

요약 문구 생성 (makeHourlySummary)

• 주차별 체류 데이터 중 가장 체류 빈도가 높은 구간을 탐색해 "오전 7시–오전 8시에 주로 머물렀습니다." 형태로 자연어 문구를 생성합니다.

<내부 구조>

• topAddressStays: 상위 체류 주소를 계산 (TOP3)
• hourlySeriesForAllWeekdays: 주소별 주차×요일×시간대별 방문 횟수를 계산
• makeHourlySummary: 주차별 체류 요약 문장 생성

성능 최적화를 위해 실제 데이터가 존재하는 주차(buckets.keys)만 차트에 반영하도록 수정했습니다.
덕분에 불필요한 0 count 데이터 생성이 제거되어 렌더링 부하가 줄었습니다.

👀 Review Notes

• Swift Charts 내 중첩 ForEach 구조의 렌더링 효율
• DashboardFeature 내부의 계산 로직에서 오류가 없는지 더블 체크 해주시면 감사하겠습니다 ><

[MuchanKim]

짱짱

[YooGyeongMo]

p1 p2잇씁니다 ! 일단 어프루브할게용 치명적인건 아닌거같아서요 !

아래 무의 reduce는 동의합니다 저도 누적합 같은거 구할때 reduce를 해당 프젝에 사용하였었습니다.