Untitled
unknown
plain_text
5 months ago
2.6 kB
3
Indexable
import React, { useState, useEffect } from "react"; import { Pie } from "react-chartjs-2"; import { Chart as chartjs, ArcElement, Tooltip, Legend,} from "chart.js"; import { useAuth } from "../../hooks/useAuth"; import axios from "axios"; chartjs.register(ArcElement, Tooltip, Legend); interface JournalAnalyticsModalProps { isOpen: boolean; onClose: () => void; } const JournalAnalyticsModal: React.FC<JournalAnalyticsModalProps> = ({ isOpen, onClose, }) => { const { user } = useAuth(); const [moodData, setMoodData] = useState<Record<string, number>>({}); const [loading, setLoading] = useState(false); useEffect(() => { if (isOpen && user?.id) { fetchMoodData(); } }, [isOpen, user?.id]); const fetchMoodData = async () => { setLoading(true); try { const response = await axios.get(`/api/journals/user/${user?.id}`, { headers: { Authorization: `Bearer ${localStorage.getItem("jwt")}`, }, }); // Count moods const moodCounts = response.data.journals.reduce( (acc: Record<string, number>, journal: { mood: string }) => { acc[journal.mood] = (acc[journal.mood] || 0) + 1; return acc; }, {} ); setMoodData(moodCounts); } catch (error) { console.error("Failed to fetch journal data:", error); } finally { setLoading(false); } }; const data = { labels: Object.keys(moodData), datasets: [ { data: Object.values(moodData), backgroundColor: ["#FFD700", "#87CEFA", "#D3D3D3", "#FF6347", "#6495ED"], hoverBackgroundColor: ["#FFC700", "#76BEEA", "#C3C3C3", "#FF5247", "#5485D5"], }, ], }; if (!isOpen) return null; return ( <div className="fixed inset-0 bg-gray-800 bg-opacity-50 flex justify-center items-center"> <div className="bg-white rounded-lg shadow-lg w-4/5 h-4/5 max-w-lg max-h-[90vh] p-6"> <div className="flex justify-between items-center mb-4"> <h2 className="text-xl font-bold text-[#5E9ED9]">Mood Analytics</h2> <button className="text-red-500 font-bold text-xl" onClick={onClose}> X </button> </div> {loading ? <p>Loading...</p> : <Pie data={data} />} </div> </div> ); }; export default JournalAnalyticsModal;
Editor is loading...
Leave a Comment