백로그
0할 일
0진행 중
0리뷰
0완료 (15일)
3Chart.js 설정 + chart_controller Stimulus 컨트롤러
## 목표 Chart.js를 Importmap으로 설치하고, 범용 chart_controller Stimulus 컨트롤러를 생성 ## 구현 내용 ### 1. config/importmap.rb에 Chart.js 추가 ```ruby pin "chart.js", to: "https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js" ``` ### 2. app/javascript/controllers/chart_controller.js 생성 - Stimulus 컨트롤러로 범용 차트 렌더링 - data-chart-type-value: "line" | "bar" | "pie" | "doughnut" - data-chart-data-value: JSON 문자열 (labels + datasets) - data-chart-options-value: JSON 문자열 (선택적 옵션 오버라이드) - 다크모드 대응: prefers-color-scheme 감지하여 텍스트/그리드 색상 자동 전환 - 모바일 반응형: aspectRatio 조절, 범례 위치 조정 - canvas target으로 차트 렌더링 - disconnect() 시 차트 인스턴스 destroy() ### 3. 다크모드 색상 매핑 ```javascript // 라이트모드 gridColor: 'rgba(0, 0, 0, 0.1)' textColor: '#374151' // 다크모드 gridColor: 'rgba(255, 255, 255, 0.1)' textColor: '#d1d5db' ``` ### 4. 차트 색상 팔레트 (디자인 시스템 연동) ```javascript const CHART_COLORS = { primary: '#4f46e5', // brand-primary secondary: '#f59e0b', // brand-secondary success: '#10b981', // status-success warning: '#f59e0b', // status-warning error: '#ef4444', // status-error info: '#3b82f6', // status-info } ``` ## 완료 기준 - [ ] importmap.rb에 Chart.js pin 추가 - [ ] chart_controller.js 생성 (line/bar/pie/doughnut 지원) - [ ] 다크모드 자동 감지 + 색상 전환 - [ ] 모바일 반응형 (aspectRatio) - [ ] disconnect 시 메모리 정리 - [ ] 기존 테스트 전체 통과 (bin/rails test) ## 담당 파일 - config/importmap.rb (수정) - app/javascript/controllers/chart_controller.js (신규)
묵상 통계 라인 차트 구현
## 목표 stats/index.html.erb의 기존 HTML 막대 그래프를 Chart.js 라인 차트로 교체 ## 의존성 - chart-foundation 에이전트가 chart_controller.js를 먼저 완성해야 함 ## 구현 내용 ### 1. app/views/stats/index.html.erb 수정 현재 "월별 묵상 추이" 섹션에 순수 HTML로 만든 막대 그래프가 있음 → Chart.js 라인 차트로 교체 ```erb <%# 기존 HTML 막대 그래프 영역을 아래로 교체 %> <div data-controller="chart" data-chart-type-value="line" data-chart-data-value='<%= { labels: @monthly_data.map { |d| d[:month] }, datasets: [{ label: "묵상 횟수", data: @monthly_data.map { |d| d[:count] }, borderColor: "#4f46e5", backgroundColor: "rgba(79, 70, 229, 0.1)", fill: true, tension: 0.4 }] }.to_json %>'> <canvas data-chart-target="canvas"></canvas> </div> ``` ### 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 (수정)
기도 통계 차트 + 통독 월별 트렌드 차트
## 목표 기도 통계에 도넛/바 차트 추가 + 통독에 월별 트렌드 바 차트 추가 ## 의존성 - chart-foundation 에이전트가 chart_controller.js를 먼저 완성해야 함 ## 구현 내용 ### 1. 기도 통계 차트 (app/views/prayers/stats.html.erb) #### A. 응답 현황 도넛 차트 현재 텍스트로만 표시되는 응답 현황(keep_praying/waiting/yes/no)을 도넛 차트로 시각화 ```erb <div data-controller="chart" data-chart-type-value="doughnut" data-chart-data-value='<%= { labels: ["계속 기도 중", "응답 대기", "응답 받음", "응답 없음"], datasets: [{ data: [ @prayer_stats[:by_response][:keep_praying], @prayer_stats[:by_response][:waiting], @prayer_stats[:by_response][:yes], @prayer_stats[:by_response][:no] ], backgroundColor: ["#4f46e5", "#f59e0b", "#10b981", "#ef4444"] }] }.to_json %>'> <canvas data-chart-target="canvas"></canvas> </div> ``` #### B. 기존 텍스트 통계 카드는 유지 (차트와 함께 표시) ### 2. 통독 월별 트렌드 차트 #### A. app/controllers/tongtok_controller.rb 수정 index 액션에 월별 통독 데이터 추가: ```ruby @monthly_reading = current_user.bible_reading_logs .where(read_date: 6.months.ago.beginning_of_month..Date.current.end_of_month) .group("strftime('%Y-%m', read_date)") .count # → {"2025-09" => 15, "2025-10" => 22, ...} 형태 ``` #### B. app/views/tongtok/index.html.erb 수정 전체 진행률 카드 아래에 월별 트렌드 바 차트 추가: ```erb <div data-controller="chart" data-chart-type-value="bar" data-chart-data-value='<%= { labels: @monthly_reading.keys.map { |k| Date.parse("#{k}-01").strftime("%m월") }, datasets: [{ label: "읽은 장 수", data: @monthly_reading.values, backgroundColor: "rgba(79, 70, 229, 0.7)", borderRadius: 6 }] }.to_json %>'> <canvas data-chart-target="canvas"></canvas> </div> ``` ## 현재 파일 구조 ### prayers/stats.html.erb 구조 1. 헤더 (뒤로가기 + 제목) 2. 전체 통계 카드 (총 기도, 활성, 응답률) 3. 응답 현황 카드 ← 여기에 도넛 차트 추가 4. 카테고리별 카드 5. 기도 실천 카드 ### tongtok/index.html.erb 구조 1. 헤더 (제목, 모드 버튼) 2. 전체 진행률 카드 ← 이 아래에 월별 트렌드 추가 3. 구약/신약 탭 + 책 카드 그리드 ## 완료 기준 - [ ] 기도 통계에 응답 현황 도넛 차트 표시 - [ ] 통독에 월별 트렌드 바 차트 표시 - [ ] tongtok_controller.rb에 @monthly_reading 데이터 추가 - [ ] 다크모드 대응 - [ ] 모바일 반응형 - [ ] 기존 테스트 전체 통과 (bin/rails test) ## 담당 파일 - app/views/prayers/stats.html.erb (수정) - app/controllers/tongtok_controller.rb (수정) - app/views/tongtok/index.html.erb (수정)