통계 차트 Chart.js
ID: ee2747e9-f754-405c-80e8-3a1538f0e8db
## 목표
묵상/기도/통독 통계를 Chart.js 차트로 시각화
## 구현 내용
1. **Chart.js 설치**
- Importmap으로 Chart.js CDN 추가
- chart_controller Stimulus 컨트롤러 생성
2. **차트 종류**
- 묵상 통계: 주간/월간 완료율 라인 차트
- 기도 통계: 카테고리별 파이 차트, 응답률 바 차트
- 통독 현황: 66권 진행률 프로그레스 바 (기존) + 월별 트렌드
3. **데이터 API**
- 기존 stats 컨트롤러에서 JSON 데이터 제공
- 또는 data-* 속성으로 직접 전달
## 완료 기준
- [ ] Chart.js importmap 설정
- [ ] chart_controller Stimulus 컨트롤러
- [ ] 묵상 통계 차트 (라인)
- [ ] 기도 통계 차트 (파이 + 바)
- [ ] 통독 월별 트렌드 차트
- [ ] 다크모드 대응 (차트 색상)
- [ ] 모바일 반응형
## 관련 파일
- app/views/qt/stats/
- app/views/prayers/stats.html.erb
- app/views/tongtok/
- config/importmap.rb
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 팀 작업 완료 - 통계 차트 Chart.js
2026년 03월 03일 02:32:03
상세 보기
## 수정된 기능
- **Chart.js 기반 설정**: importmap.rb에 Chart.js 4.4.7 CDN pin + chart_controller.js Stimulus 컨트롤러 (line/bar/pie/doughnut 지원, 다크모드, 반응형)
- **묵상 통계 라인 차트**: stats/index.html.erb - HTML 막대 그래프 → Chart.js 라인 차트 교체 (월별 묵상 추이)
- **기도 통계 도넛 차트**: prayers/stats.html.erb - 응답 현황 도넛 차트 추가 (계속 기도/대기/응답yes/응답no)
- **통독 월별 트렌드**: tongtok_controller.rb에 @monthly_reading 추가 + tongtok/index.html.erb에 바 차트 추가## 수정/생성 파일 (5개)
- `config/importmap.rb` - Chart.js CDN pin 추가
- `app/javascript/controllers/chart_controller.js` - 신규 생성
- `app/views/stats/index.html.erb` - 라인 차트 교체
- `app/views/prayers/stats.html.erb` - 도넛 차트 추가
- `app/controllers/tongtok_controller.rb` - @monthly_reading 추가
- `app/views/tongtok/index.html.erb` - 바 차트 추가## 테스트 결과
- 492 runs, 1175 assertions, 0 failures, 0 errors## 팀 구성
- chart-foundation: 기반 설정 (importmap + Stimulus)
- chart-meditation: 묵상 라인 차트
- chart-prayer-tongtok: 기도 도넛 + 통독 바 차트## 남은 이슈
- 없음 -
팀팀리드 상태 변경: 진행 중 → 완료
2026년 03월 03일 02:31:49
-
팀팀리드 위임: chart-prayer-tongtok에게 '기도 통계 차트 + 통독 월별 트렌드 차트' 작업 배정
2026년 03월 03일 02:25:54
-
팀팀리드 위임: chart-meditation에게 '묵상 통계 라인 차트 구현' 작업 배정
2026년 03월 03일 02:25:37
-
팀팀리드 위임: chart-foundation에게 'Chart.js 설정 + chart_controller Stimulus 컨트롤러' 작업 배정
2026년 03월 03일 02:25:25
-
팀팀리드 작업 시작 - 통계 차트 Chart.js
2026년 03월 03일 02:25:04
상세 보기
## 작업 계획
- 목표: 묵상/기도/통독 통계를 Chart.js 차트로 시각화
- 접근 방식: 3단계 분해 (기반 설정 → 묵상 차트 + 기도/통독 차트 병렬)## 분석 결과
- 현재 통계 3개 페이지: stats/index (묵상), prayers/stats (기도), tongtok/index (통독)
- 컨트롤러에서 이미 통계 데이터 준비 중 (monthly_data, prayer_stats, books_data)
- 묵상 통계에 순수 HTML 막대 그래프 존재 → Chart.js 라인 차트로 교체
- 기도/통독은 텍스트 기반 → 차트 추가## 서브 티켓 계획
1. Chart.js 설정 + chart_controller Stimulus (기반)
2. 묵상 통계 라인 차트 (기반 의존)
3. 기도 파이/바 차트 + 통독 트렌드 차트 (기반 의존)## 현재 상태
- 보드 현황: backlog 0 / todo 18 / in_progress 4 / review 7 / done 86 -
팀팀리드 티켓 클레임 완료
2026년 03월 03일 02:23:18
-
팀팀리드 기능 계획 수립 - 통계 차트 Chart.js (Phase 2)
2026년 03월 02일 12:01:00
상세 보기
## 기능 개요
- 묵상/기도/통독 통계 Chart.js 시각화## 분석 결과
- 영향 범위: views/qt/stats/, views/prayers/, views/tongtok/, config/importmap.rb
- 기존 패턴: Importmap 기반 JS 의존성, Stimulus 컨트롤러## Phase 정보
- **Phase 2** - 기도 AI와 병렬 가능
- 복잡도: moderate (~5 파일)