묵상 통계 라인 차트 구현
ID: 0b01be45-756c-4a43-bc4c-46e5938ecac7
## 목표
stats/index.html.erb의 기존 HTML 막대 그래프를 Chart.js 라인 차트로 교체
## 의존성
- chart-foundation 에이전트가 chart_controller.js를 먼저 완성해야 함
## 구현 내용
### 1. app/views/stats/index.html.erb 수정
현재 "월별 묵상 추이" 섹션에 순수 HTML로 만든 막대 그래프가 있음 → Chart.js 라인 차트로 교체
```erb
<%# 기존 HTML 막대 그래프 영역을 아래로 교체 %>
```
### 2. 추가 고려사항
- 기존 핵심 지표 4개 카드 (총 묵상, 완료율, 스트릭 등)는 그대로 유지
- 월별 추이 섹션만 차트로 교체
- 차트 아래 "묵상 기록 보기" 버튼 유지
- 기존 shared/_card 파셜 안에 차트 배치
## 현재 stats/index.html.erb 구조
1. 핵심 지표 2x2 그리드 (총 묵상, 완료율, 현재 스트릭, 최대 스트릭)
2. 평균 기분 카드 (이모지 표시)
3. 월별 묵상 추이 (HTML 막대 그래프) ← 여기를 Chart.js로 교체
4. "묵상 기록 보기" 버튼
## 완료 기준
- [ ] 월별 묵상 추이가 Chart.js 라인 차트로 표시
- [ ] 다크모드에서 차트 가독성 확인
- [ ] 모바일에서 차트 크기 적절
- [ ] 기존 테스트 전체 통과 (bin/rails test)
## 담당 파일
- app/views/stats/index.html.erb (수정)
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 03일 02:31:48
-
Cchart-meditation 상태 변경: 진행 중 → 리뷰
2026년 03월 03일 02:30:46
-
Cchart-meditation 묵상 통계 라인 차트 구현 완료
2026년 03월 03일 02:30:45
상세 보기
## 변경 사항\n- `app/views/stats/index.html.erb` 수정\n - 기존 HTML 막대 그래프 (lines 58-74) → Chart.js 라인 차트로 교체\n - `data-controller="chart"`, `data-chart-type-value="line"` 사용\n - 라인 차트 스타일: indigo (#4f46e5), fill area, tension 0.4, point radius 4\n - 데이터 없을 때 빈 상태 메시지 표시\n - `data-testid="monthly-chart"` 유지 (기존 테스트 호환)\n\n## 유지한 항목\n- 핵심 지표 카드 4개 (총 묵상, 완료율, 현재 스트릭, 최대 스트릭)\n- 평균 기분 카드\n- "묵상 기록 보기" 버튼\n\n## 차트 데이터 구조\n- labels: @monthly_data의 label 키 (03월 형식)\n- datasets: 묵상 횟수 데이터 (count 키)\n\n## 테스트 결과\n- `bin/rails test test/controllers/stats_controller_test.rb`: 8 runs, 17 assertions, 0 failures, 0 errors
-
Cchart-meditation 묵상 통계 라인 차트 구현 시작
2026년 03월 03일 02:29:17
상세 보기
## 작업 시작\n- 티켓 claim 완료\n- stats/index.html.erb 분석 후 월별 묵상 추이 섹션을 Chart.js 라인 차트로 교체 예정
-
Cchart-meditation 티켓 클레임 완료
2026년 03월 03일 02:29:12