통계 차트 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

담당자: 팀리드
생성일: 2026년 03월 02일 12:00

활동 로그

  • 팀리드 팀 작업 완료 - 통계 차트 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 파일)