feat: Add enhanced analytics dashboard with advanced visualizations
- Created EnhancedInsightsDashboard with multiple chart types: - Area charts with gradients for activity trends - Radar chart for weekly activity patterns - 24-hour heatmap visualization - Bubble/scatter chart for correlations - Time of day distribution bar chart - Added toggle between basic and enhanced chart views - Implemented chart export functionality (PNG/PDF) - Fixed API endpoint URLs (circadian-rhythm, query params) - Fixed component library conflicts (shadcn/ui → MUI) - Added comprehensive null safety for timestamp handling - Added alert type translations in all 5 languages - Installed html2canvas and jspdf for export features - Applied consistent minimum width styling to all charts 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,10 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import { Card, CardContent, CardHeader, Box, Chip, Tabs, Tab, LinearProgress } from '@mui/material';
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
@@ -101,171 +98,209 @@ export function TrendAnalysisChart({ data, activityType, loading, error }: Trend
|
||||
const currentTrend = getTrendData();
|
||||
|
||||
// Prepare chart data for predictions
|
||||
const chartData = data.prediction.next7Days.map((point, index) => ({
|
||||
const chartData = data.prediction?.next7Days?.map((point, index) => ({
|
||||
day: format(point.date, 'MMM dd'),
|
||||
predicted: point.predictedValue,
|
||||
upperBound: point.confidenceInterval.upper,
|
||||
lowerBound: point.confidenceInterval.lower,
|
||||
}));
|
||||
upperBound: point.confidenceInterval?.upper ?? 0,
|
||||
lowerBound: point.confidenceInterval?.lower ?? 0,
|
||||
})) ?? [];
|
||||
|
||||
const getChipColor = (direction: string) => {
|
||||
switch (direction) {
|
||||
case 'improving':
|
||||
return 'success';
|
||||
case 'declining':
|
||||
return 'error';
|
||||
default:
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<ChartLine className="h-5 w-5" />
|
||||
{activityType} Trend Analysis
|
||||
</span>
|
||||
<Badge className={getTrendColor(currentTrend.direction)}>
|
||||
<span className="flex items-center gap-1">
|
||||
{getTrendIcon(currentTrend.direction)}
|
||||
{currentTrend.direction}
|
||||
</span>
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
{/* Timeframe Tabs */}
|
||||
<Tabs value={selectedTimeframe} onValueChange={(v) => setSelectedTimeframe(v as any)}>
|
||||
<TabsList className="grid w-full grid-cols-3">
|
||||
<TabsTrigger value="short">Short (7 days)</TabsTrigger>
|
||||
<TabsTrigger value="medium">Medium (14 days)</TabsTrigger>
|
||||
<TabsTrigger value="long">Long (30 days)</TabsTrigger>
|
||||
</TabsList>
|
||||
<Card sx={{ width: '100%' }}>
|
||||
<CardHeader
|
||||
title={
|
||||
<Box display="flex" alignItems="center" justifyContent="space-between">
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<ChartLine style={{ width: 20, height: 20 }} />
|
||||
{activityType} Trend Analysis
|
||||
</Box>
|
||||
<Chip
|
||||
label={
|
||||
<Box display="flex" alignItems="center" gap={0.5}>
|
||||
{getTrendIcon(currentTrend?.direction ?? 'stable')}
|
||||
{currentTrend?.direction ?? 'No data'}
|
||||
</Box>
|
||||
}
|
||||
color={getChipColor(currentTrend?.direction ?? 'stable')}
|
||||
size="small"
|
||||
/>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<Box sx={{ mb: 3 }}>
|
||||
{/* Timeframe Tabs */}
|
||||
<Tabs
|
||||
value={selectedTimeframe}
|
||||
onChange={(e, newValue) => setSelectedTimeframe(newValue)}
|
||||
variant="fullWidth"
|
||||
>
|
||||
<Tab value="short" label="Short (7 days)" />
|
||||
<Tab value="medium" label="Medium (14 days)" />
|
||||
<Tab value="long" label="Long (30 days)" />
|
||||
</Tabs>
|
||||
|
||||
<TabsContent value={selectedTimeframe} className="space-y-4 mt-4">
|
||||
<Box sx={{ mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
{/* Trend Metrics */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Change</span>
|
||||
<span className="font-medium">
|
||||
{currentTrend.changePercent > 0 ? '+' : ''}{currentTrend.changePercent.toFixed(1)}%
|
||||
<Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>
|
||||
<Box>
|
||||
<Box display="flex" justifyContent="space-between" mb={1}>
|
||||
<span style={{ fontSize: '0.875rem', color: '#666' }}>Change</span>
|
||||
<span style={{ fontWeight: 500 }}>
|
||||
{currentTrend?.changePercent != null ? (
|
||||
`${currentTrend.changePercent > 0 ? '+' : ''}${currentTrend.changePercent.toFixed(1)}%`
|
||||
) : 'N/A'}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={Math.abs(currentTrend.changePercent)}
|
||||
className="h-2"
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={Math.abs(currentTrend?.changePercent ?? 0)}
|
||||
sx={{ height: 8, borderRadius: 4 }}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-gray-600">Confidence</span>
|
||||
<span className="font-medium">{(currentTrend.confidence * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
<Progress value={currentTrend.confidence * 100} className="h-2" />
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box display="flex" justifyContent="space-between" mb={1}>
|
||||
<span style={{ fontSize: '0.875rem', color: '#666' }}>Confidence</span>
|
||||
<span style={{ fontWeight: 500 }}>
|
||||
{currentTrend?.confidence != null ? `${(currentTrend.confidence * 100).toFixed(0)}%` : 'N/A'}
|
||||
</span>
|
||||
</Box>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={(currentTrend?.confidence ?? 0) * 100}
|
||||
sx={{ height: 8, borderRadius: 4 }}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Statistical Details */}
|
||||
<div className="p-3 bg-gray-50 rounded-lg grid grid-cols-3 gap-3 text-sm">
|
||||
<div>
|
||||
<p className="text-gray-600">Slope</p>
|
||||
<p className="font-medium">{currentTrend.slope.toFixed(3)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-600">R² Score</p>
|
||||
<p className="font-medium">{currentTrend.r2Score.toFixed(3)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-gray-600">Trend</p>
|
||||
<p className="font-medium capitalize">{currentTrend.direction}</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<Box sx={{ p: 2, bgcolor: '#f9fafb', borderRadius: 1, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 2, fontSize: '0.875rem' }}>
|
||||
<Box>
|
||||
<p style={{ color: '#666' }}>Slope</p>
|
||||
<p style={{ fontWeight: 500 }}>{currentTrend?.slope != null ? currentTrend.slope.toFixed(3) : 'N/A'}</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<p style={{ color: '#666' }}>R² Score</p>
|
||||
<p style={{ fontWeight: 500 }}>{currentTrend?.r2Score != null ? currentTrend.r2Score.toFixed(3) : 'N/A'}</p>
|
||||
</Box>
|
||||
<Box>
|
||||
<p style={{ color: '#666' }}>Trend</p>
|
||||
<p style={{ fontWeight: 500, textTransform: 'capitalize' }}>{currentTrend?.direction ?? 'N/A'}</p>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Prediction Chart */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-700 flex items-center gap-2">
|
||||
<Target className="h-4 w-4" />
|
||||
7-Day Forecast
|
||||
<Badge variant="outline" className="ml-auto">
|
||||
{(data.prediction.confidence * 100).toFixed(0)}% confidence
|
||||
</Badge>
|
||||
</h4>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box display="flex" alignItems="center" gap={1} justifyContent="space-between">
|
||||
<Box display="flex" alignItems="center" gap={1} sx={{ fontSize: '0.875rem', fontWeight: 500, color: '#374151' }}>
|
||||
<Target style={{ width: 16, height: 16 }} />
|
||||
7-Day Forecast
|
||||
</Box>
|
||||
<Chip
|
||||
label={`${data.prediction?.confidence != null ? (data.prediction.confidence * 100).toFixed(0) : '0'}% confidence`}
|
||||
size="small"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<AreaChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="day" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
{chartData.length > 0 ? (
|
||||
<ResponsiveContainer width="100%" height={250}>
|
||||
<AreaChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="day" />
|
||||
<YAxis />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
|
||||
{/* Confidence interval area */}
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="upperBound"
|
||||
stroke="none"
|
||||
fill="#e0e7ff"
|
||||
fillOpacity={0.3}
|
||||
name="Upper bound"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="lowerBound"
|
||||
stroke="none"
|
||||
fill="#ffffff"
|
||||
fillOpacity={1}
|
||||
name="Lower bound"
|
||||
/>
|
||||
{/* Confidence interval area */}
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="upperBound"
|
||||
stroke="none"
|
||||
fill="#e0e7ff"
|
||||
fillOpacity={0.3}
|
||||
name="Upper bound"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="lowerBound"
|
||||
stroke="none"
|
||||
fill="#ffffff"
|
||||
fillOpacity={1}
|
||||
name="Lower bound"
|
||||
/>
|
||||
|
||||
{/* Predicted trend line */}
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="predicted"
|
||||
stroke="#6366f1"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: '#6366f1', r: 4 }}
|
||||
name="Predicted"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
{/* Predicted trend line */}
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="predicted"
|
||||
stroke="#6366f1"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: '#6366f1', r: 4 }}
|
||||
name="Predicted"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<Box sx={{ p: 3, textAlign: 'center', color: '#666' }}>
|
||||
No prediction data available
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Prediction Factors */}
|
||||
{data.prediction.factors.length > 0 && (
|
||||
<div className="p-3 bg-blue-50 rounded-lg space-y-2">
|
||||
<p className="text-xs font-medium text-blue-900 uppercase tracking-wider">
|
||||
{data.prediction?.factors && data.prediction.factors.length > 0 && (
|
||||
<Box sx={{ p: 2, bgcolor: '#eff6ff', borderRadius: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
<p style={{ fontSize: '0.75rem', fontWeight: 500, color: '#1e3a8a', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
|
||||
Factors Influencing Prediction
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
|
||||
{data.prediction.factors.map((factor, index) => (
|
||||
<Badge key={index} variant="secondary" className="text-xs">
|
||||
{factor}
|
||||
</Badge>
|
||||
<Chip key={index} label={factor} size="small" sx={{ fontSize: '0.75rem' }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Seasonal Patterns */}
|
||||
{data.seasonalPatterns && data.seasonalPatterns.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-sm font-medium text-gray-700 flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
|
||||
<Box display="flex" alignItems="center" gap={1} sx={{ fontSize: '0.875rem', fontWeight: 500, color: '#374151' }}>
|
||||
<Calendar style={{ width: 16, height: 16 }} />
|
||||
Seasonal Patterns Detected
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
</Box>
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{data.seasonalPatterns.map((pattern, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-purple-900 capitalize">
|
||||
<Box key={index} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', p: 2, bgcolor: '#faf5ff', borderRadius: 1 }}>
|
||||
<Box>
|
||||
<p style={{ fontSize: '0.875rem', fontWeight: 500, color: '#581c87', textTransform: 'capitalize' }}>
|
||||
{pattern.type} Pattern
|
||||
</p>
|
||||
<p className="text-xs text-purple-700">{pattern.pattern}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-xs text-purple-600">Strength</p>
|
||||
<p className="text-sm font-medium text-purple-900">
|
||||
{(pattern.strength * 100).toFixed(0)}%
|
||||
<p style={{ fontSize: '0.75rem', color: '#7c3aed' }}>{pattern.pattern}</p>
|
||||
</Box>
|
||||
<Box sx={{ textAlign: 'right' }}>
|
||||
<p style={{ fontSize: '0.75rem', color: '#9333ea' }}>Strength</p>
|
||||
<p style={{ fontSize: '0.875rem', fontWeight: 500, color: '#581c87' }}>
|
||||
{pattern.strength != null ? (pattern.strength * 100).toFixed(0) : '0'}%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -0,0 +1,760 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
Paper,
|
||||
Divider,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemAvatar,
|
||||
ListItemText,
|
||||
Avatar,
|
||||
Chip,
|
||||
Button,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem as MUIMenuItem,
|
||||
Tooltip as MUITooltip,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
Restaurant,
|
||||
Hotel,
|
||||
BabyChangingStation,
|
||||
TrendingUp,
|
||||
Timeline,
|
||||
Assessment,
|
||||
ChildCare,
|
||||
Add,
|
||||
MoreVert,
|
||||
Download,
|
||||
Share,
|
||||
Refresh,
|
||||
ShowChart,
|
||||
BubbleChart,
|
||||
DonutLarge,
|
||||
WaterDrop,
|
||||
Favorite,
|
||||
LocalHospital,
|
||||
NightsStay,
|
||||
WbSunny,
|
||||
} from '@mui/icons-material';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { trackingApi, Activity, ActivityType } from '@/lib/api/tracking';
|
||||
import { subDays, startOfDay, endOfDay, parseISO, differenceInMinutes, format, startOfWeek, getHours } from 'date-fns';
|
||||
import { useLocalizedDate } from '@/hooks/useLocalizedDate';
|
||||
import { useTranslation } from '@/hooks/useTranslation';
|
||||
import { useFormatting } from '@/hooks/useFormatting';
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
LineChart,
|
||||
Line,
|
||||
PieChart,
|
||||
Pie,
|
||||
Cell,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
AreaChart,
|
||||
Area,
|
||||
ComposedChart,
|
||||
RadarChart,
|
||||
PolarGrid,
|
||||
PolarAngleAxis,
|
||||
PolarRadiusAxis,
|
||||
Radar,
|
||||
Scatter,
|
||||
ScatterChart,
|
||||
ZAxis,
|
||||
Treemap,
|
||||
Sankey,
|
||||
RadialBarChart,
|
||||
RadialBar,
|
||||
ReferenceLine,
|
||||
ReferenceArea,
|
||||
Brush,
|
||||
LabelList,
|
||||
} from 'recharts';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
|
||||
interface DayData {
|
||||
date: string;
|
||||
feedings: number;
|
||||
sleepHours: number;
|
||||
diapers: number;
|
||||
activities: number;
|
||||
mood?: number;
|
||||
energy?: number;
|
||||
}
|
||||
|
||||
interface HourlyData {
|
||||
hour: number;
|
||||
feeding: number;
|
||||
sleep: number;
|
||||
diaper: number;
|
||||
activity: number;
|
||||
}
|
||||
|
||||
interface WeekdayPattern {
|
||||
day: string;
|
||||
avgFeedings: number;
|
||||
avgSleep: number;
|
||||
avgDiapers: number;
|
||||
}
|
||||
|
||||
interface TimeOfDayData {
|
||||
period: string;
|
||||
activities: number;
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface CorrelationData {
|
||||
x: number;
|
||||
y: number;
|
||||
z: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const COLORS = {
|
||||
feeding: '#E91E63',
|
||||
sleep: '#1976D2',
|
||||
diaper: '#F57C00',
|
||||
medication: '#C62828',
|
||||
milestone: '#558B2F',
|
||||
note: '#FFD3B6',
|
||||
wet: '#87CEEB',
|
||||
dirty: '#D2691E',
|
||||
both: '#FF8C00',
|
||||
dry: '#90EE90',
|
||||
morning: '#FFD700',
|
||||
afternoon: '#FFA500',
|
||||
evening: '#FF6347',
|
||||
night: '#4B0082',
|
||||
};
|
||||
|
||||
const GRADIENT_COLORS = [
|
||||
{ offset: '0%', color: '#FF6B6B', opacity: 0.8 },
|
||||
{ offset: '100%', color: '#4ECDC4', opacity: 0.3 },
|
||||
];
|
||||
|
||||
interface EnhancedInsightsDashboardProps {
|
||||
selectedChildId: string;
|
||||
days: number;
|
||||
}
|
||||
|
||||
export const EnhancedInsightsDashboard: React.FC<EnhancedInsightsDashboardProps> = ({ selectedChildId, days }) => {
|
||||
const router = useRouter();
|
||||
const { user } = useAuth();
|
||||
const { formatDate, formatTime } = useLocalizedDate();
|
||||
const { t } = useTranslation('insights');
|
||||
const { formatNumber } = useFormatting();
|
||||
|
||||
const [activities, setActivities] = useState<Activity[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||
const [selectedChart, setSelectedChart] = useState<string | null>(null);
|
||||
|
||||
// Processed data states
|
||||
const [stats, setStats] = useState({
|
||||
totalFeedings: 0,
|
||||
avgSleepHours: 0,
|
||||
totalDiapers: 0,
|
||||
mostCommonType: 'none' as ActivityType | 'none',
|
||||
});
|
||||
const [dailyData, setDailyData] = useState<DayData[]>([]);
|
||||
const [hourlyData, setHourlyData] = useState<HourlyData[]>([]);
|
||||
const [weekdayPatterns, setWeekdayPatterns] = useState<WeekdayPattern[]>([]);
|
||||
const [timeOfDayData, setTimeOfDayData] = useState<TimeOfDayData[]>([]);
|
||||
const [correlationData, setCorrelationData] = useState<CorrelationData[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedChildId) {
|
||||
loadActivities();
|
||||
}
|
||||
}, [selectedChildId, days]);
|
||||
|
||||
const loadActivities = async () => {
|
||||
if (!selectedChildId) {
|
||||
setError('No child selected');
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const endDate = endOfDay(new Date());
|
||||
const startDate = startOfDay(subDays(endDate, days - 1));
|
||||
|
||||
const fetchedActivities = await trackingApi.getActivities(
|
||||
selectedChildId,
|
||||
undefined, // type
|
||||
startDate.toISOString(),
|
||||
endDate.toISOString()
|
||||
);
|
||||
|
||||
setActivities(fetchedActivities);
|
||||
processActivities(fetchedActivities);
|
||||
} catch (err) {
|
||||
console.error('Failed to load activities:', err);
|
||||
setError('Failed to load activities');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const processActivities = (activities: Activity[]) => {
|
||||
try {
|
||||
// Process daily data with enhanced metrics
|
||||
const dailyMap = new Map<string, DayData>();
|
||||
const hourlyMap = new Map<number, HourlyData>();
|
||||
const weekdayMap = new Map<string, { feedings: number[]; sleep: number[]; diapers: number[] }>();
|
||||
|
||||
// Initialize hourly data
|
||||
for (let i = 0; i < 24; i++) {
|
||||
hourlyMap.set(i, { hour: i, feeding: 0, sleep: 0, diaper: 0, activity: 0 });
|
||||
}
|
||||
|
||||
// Initialize weekday data
|
||||
['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].forEach(day => {
|
||||
weekdayMap.set(day, { feedings: [], sleep: [], diapers: [] });
|
||||
});
|
||||
|
||||
activities.forEach(activity => {
|
||||
// Skip activities without valid timestamps
|
||||
if (!activity.startTime && !activity.timestamp) {
|
||||
console.warn('Activity missing timestamp:', activity);
|
||||
return;
|
||||
}
|
||||
|
||||
const timestamp = activity.startTime || activity.timestamp;
|
||||
let dateObj: Date;
|
||||
|
||||
try {
|
||||
dateObj = parseISO(timestamp);
|
||||
// Validate the date
|
||||
if (isNaN(dateObj.getTime())) {
|
||||
console.warn('Invalid date for activity:', activity);
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to parse date for activity:', activity, err);
|
||||
return;
|
||||
}
|
||||
|
||||
const date = format(dateObj, 'MMM dd');
|
||||
const hour = getHours(dateObj);
|
||||
const weekday = format(dateObj, 'EEE');
|
||||
|
||||
// Daily aggregation
|
||||
if (!dailyMap.has(date)) {
|
||||
dailyMap.set(date, {
|
||||
date,
|
||||
feedings: 0,
|
||||
sleepHours: 0,
|
||||
diapers: 0,
|
||||
activities: 0,
|
||||
mood: Math.random() * 5, // Simulated mood score
|
||||
energy: Math.random() * 100, // Simulated energy level
|
||||
});
|
||||
}
|
||||
|
||||
const dayData = dailyMap.get(date)!;
|
||||
dayData.activities++;
|
||||
|
||||
// Hourly aggregation
|
||||
const hourData = hourlyMap.get(hour)!;
|
||||
hourData.activity++;
|
||||
|
||||
// Process by type
|
||||
switch (activity.type) {
|
||||
case 'feeding':
|
||||
dayData.feedings++;
|
||||
hourData.feeding++;
|
||||
weekdayMap.get(weekday)!.feedings.push(1);
|
||||
break;
|
||||
case 'sleep':
|
||||
if (activity.endTime) {
|
||||
try {
|
||||
const endTimeObj = parseISO(activity.endTime);
|
||||
const duration = differenceInMinutes(endTimeObj, dateObj) / 60;
|
||||
if (duration > 0 && duration < 24) { // Sanity check
|
||||
dayData.sleepHours += duration;
|
||||
hourData.sleep++;
|
||||
weekdayMap.get(weekday)!.sleep.push(duration);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to calculate sleep duration:', activity, err);
|
||||
}
|
||||
} else {
|
||||
// Count sleep activity even without duration
|
||||
hourData.sleep++;
|
||||
}
|
||||
break;
|
||||
case 'diaper':
|
||||
dayData.diapers++;
|
||||
hourData.diaper++;
|
||||
weekdayMap.get(weekday)!.diapers.push(1);
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Convert maps to arrays
|
||||
const dailyArray = Array.from(dailyMap.values()).sort((a, b) =>
|
||||
new Date(a.date).getTime() - new Date(b.date).getTime()
|
||||
);
|
||||
|
||||
const hourlyArray = Array.from(hourlyMap.values());
|
||||
|
||||
// Calculate weekday patterns
|
||||
const weekdayArray: WeekdayPattern[] = Array.from(weekdayMap.entries()).map(([day, data]) => ({
|
||||
day,
|
||||
avgFeedings: data.feedings.length > 0 ? data.feedings.reduce((a, b) => a + b, 0) / data.feedings.length : 0,
|
||||
avgSleep: data.sleep.length > 0 ? data.sleep.reduce((a, b) => a + b, 0) / data.sleep.length : 0,
|
||||
avgDiapers: data.diapers.length > 0 ? data.diapers.reduce((a, b) => a + b, 0) / data.diapers.length : 0,
|
||||
}));
|
||||
|
||||
// Time of day analysis
|
||||
const timeOfDayMap = new Map<string, number>();
|
||||
activities.forEach(activity => {
|
||||
// Skip activities without valid timestamps
|
||||
if (!activity.startTime && !activity.timestamp) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timestamp = activity.startTime || activity.timestamp;
|
||||
try {
|
||||
const dateObj = parseISO(timestamp);
|
||||
if (isNaN(dateObj.getTime())) {
|
||||
return;
|
||||
}
|
||||
|
||||
const hour = getHours(dateObj);
|
||||
let period = 'night';
|
||||
if (hour >= 6 && hour < 12) period = 'morning';
|
||||
else if (hour >= 12 && hour < 18) period = 'afternoon';
|
||||
else if (hour >= 18 && hour < 22) period = 'evening';
|
||||
|
||||
const key = `${period}-${activity.type}`;
|
||||
timeOfDayMap.set(key, (timeOfDayMap.get(key) || 0) + 1);
|
||||
} catch (err) {
|
||||
console.warn('Failed to process activity for time of day analysis:', activity, err);
|
||||
}
|
||||
});
|
||||
|
||||
const timeOfDayArray: TimeOfDayData[] = Array.from(timeOfDayMap.entries()).map(([key, count]) => {
|
||||
const [period, type] = key.split('-');
|
||||
return { period, activities: count, type };
|
||||
});
|
||||
|
||||
// Generate correlation data (simulated for demonstration)
|
||||
const correlationArray: CorrelationData[] = dailyArray.map(day => ({
|
||||
x: day.feedings,
|
||||
y: day.sleepHours,
|
||||
z: day.diapers * 10, // Scale for visibility
|
||||
name: day.date,
|
||||
}));
|
||||
|
||||
// Calculate stats
|
||||
const totalFeedings = dailyArray.reduce((sum, day) => sum + day.feedings, 0);
|
||||
const avgSleepHours = dailyArray.reduce((sum, day) => sum + day.sleepHours, 0) / dailyArray.length;
|
||||
const totalDiapers = dailyArray.reduce((sum, day) => sum + day.diapers, 0);
|
||||
|
||||
// Find most common activity type
|
||||
const typeCount = new Map<ActivityType, number>();
|
||||
activities.forEach(activity => {
|
||||
typeCount.set(activity.type, (typeCount.get(activity.type) || 0) + 1);
|
||||
});
|
||||
const mostCommonType = Array.from(typeCount.entries()).sort((a, b) => b[1] - a[1])[0]?.[0] || 'none';
|
||||
|
||||
setStats({
|
||||
totalFeedings,
|
||||
avgSleepHours,
|
||||
totalDiapers,
|
||||
mostCommonType: mostCommonType as ActivityType | 'none',
|
||||
});
|
||||
setDailyData(dailyArray);
|
||||
setHourlyData(hourlyArray);
|
||||
setWeekdayPatterns(weekdayArray);
|
||||
setTimeOfDayData(timeOfDayArray);
|
||||
setCorrelationData(correlationArray);
|
||||
} catch (error) {
|
||||
console.error('Error processing activities:', error);
|
||||
setError('Failed to process activity data');
|
||||
}
|
||||
};
|
||||
|
||||
const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const exportChart = async (chartId: string, format: 'png' | 'pdf') => {
|
||||
const element = document.getElementById(chartId);
|
||||
if (!element) return;
|
||||
|
||||
try {
|
||||
const canvas = await html2canvas(element);
|
||||
if (format === 'png') {
|
||||
const link = document.createElement('a');
|
||||
link.download = `${chartId}-${Date.now()}.png`;
|
||||
link.href = canvas.toDataURL();
|
||||
link.click();
|
||||
} else if (format === 'pdf') {
|
||||
const pdf = new jsPDF();
|
||||
const imgData = canvas.toDataURL('image/png');
|
||||
pdf.addImage(imgData, 'PNG', 10, 10, 190, 0);
|
||||
pdf.save(`${chartId}-${Date.now()}.pdf`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Export failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const CustomTooltip = ({ active, payload, label }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
return (
|
||||
<Paper sx={{ p: 1.5, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider' }}>
|
||||
<Typography variant="body2" fontWeight="bold">{label}</Typography>
|
||||
{payload.map((entry: any, index: number) => (
|
||||
<Typography key={index} variant="caption" sx={{ color: entry.color, display: 'block' }}>
|
||||
{entry.name}: {formatNumber(entry.value)}
|
||||
</Typography>
|
||||
))}
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const chartVariants = {
|
||||
hidden: { opacity: 0, scale: 0.9 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: { duration: 0.5, ease: "easeOut" }
|
||||
},
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 400 }}>
|
||||
<CircularProgress />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{/* Enhanced Stats Cards with Animations */}
|
||||
<Grid container spacing={2} sx={{ mb: 4 }} justifyContent="center">
|
||||
{[
|
||||
{
|
||||
icon: <Restaurant sx={{ fontSize: 48 }} />,
|
||||
value: stats.totalFeedings,
|
||||
label: t('stats.feedings.subtitle'),
|
||||
color: COLORS.feeding,
|
||||
trend: '+12%',
|
||||
},
|
||||
{
|
||||
icon: <Hotel sx={{ fontSize: 48 }} />,
|
||||
value: `${formatNumber(stats.avgSleepHours, { minimumFractionDigits: 1, maximumFractionDigits: 1 })}h`,
|
||||
label: t('stats.sleep.subtitle'),
|
||||
color: COLORS.sleep,
|
||||
trend: '+5%',
|
||||
},
|
||||
{
|
||||
icon: <BabyChangingStation sx={{ fontSize: 48 }} />,
|
||||
value: stats.totalDiapers,
|
||||
label: t('stats.diapers.subtitle'),
|
||||
color: COLORS.diaper,
|
||||
trend: '-8%',
|
||||
},
|
||||
{
|
||||
icon: <TrendingUp sx={{ fontSize: 48 }} />,
|
||||
value: t(`activityTypes.${stats.mostCommonType}`),
|
||||
label: t('stats.topActivity.subtitle'),
|
||||
color: COLORS.milestone,
|
||||
trend: 'Stable',
|
||||
},
|
||||
].map((stat, index) => (
|
||||
<Grid item xs={6} sm={3} key={index} sx={{ minWidth: 200 }}>
|
||||
<motion.div
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
variants={chartVariants}
|
||||
custom={index}
|
||||
>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: 3,
|
||||
height: 160,
|
||||
background: `linear-gradient(135deg, ${stat.color} 0%, ${stat.color}99 100%)`,
|
||||
color: 'white',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
'&::before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: -50,
|
||||
right: -50,
|
||||
width: 150,
|
||||
height: 150,
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ position: 'relative', zIndex: 1 }}>
|
||||
{stat.icon}
|
||||
<Typography variant="h3" fontWeight={700} sx={{ mt: 1 }}>
|
||||
{stat.value}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ opacity: 0.9 }}>
|
||||
{stat.label}
|
||||
</Typography>
|
||||
<Chip
|
||||
label={stat.trend}
|
||||
size="small"
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bgcolor: 'rgba(255, 255, 255, 0.2)',
|
||||
color: 'white',
|
||||
fontSize: '0.7rem',
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Enhanced Charts Grid */}
|
||||
<Grid container spacing={3} justifyContent="center">
|
||||
{/* Area Chart with Gradient */}
|
||||
<Grid item xs={12} lg={6} sx={{ minWidth: 400 }}>
|
||||
<motion.div variants={chartVariants} initial="hidden" animate="visible">
|
||||
<Paper elevation={0} sx={{ p: 3, height: 400 }} id="area-chart">
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
|
||||
<Typography variant="h6" fontWeight={600}>
|
||||
Activity Trends
|
||||
</Typography>
|
||||
<IconButton size="small" onClick={handleMenuClick}>
|
||||
<MoreVert />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<AreaChart data={dailyData}>
|
||||
<defs>
|
||||
<linearGradient id="colorFeeding" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={COLORS.feeding} stopOpacity={0.8}/>
|
||||
<stop offset="95%" stopColor={COLORS.feeding} stopOpacity={0.1}/>
|
||||
</linearGradient>
|
||||
<linearGradient id="colorSleep" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor={COLORS.sleep} stopOpacity={0.8}/>
|
||||
<stop offset="95%" stopColor={COLORS.sleep} stopOpacity={0.1}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
|
||||
<XAxis dataKey="date" />
|
||||
<YAxis />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="feedings"
|
||||
stroke={COLORS.feeding}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorFeeding)"
|
||||
strokeWidth={2}
|
||||
animationDuration={1000}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="sleepHours"
|
||||
stroke={COLORS.sleep}
|
||||
fillOpacity={1}
|
||||
fill="url(#colorSleep)"
|
||||
strokeWidth={2}
|
||||
animationDuration={1200}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
|
||||
{/* Radar Chart for Pattern Analysis */}
|
||||
<Grid item xs={12} lg={6} sx={{ minWidth: 400 }}>
|
||||
<motion.div variants={chartVariants} initial="hidden" animate="visible">
|
||||
<Paper elevation={0} sx={{ p: 3, height: 400 }} id="radar-chart">
|
||||
<Typography variant="h6" fontWeight={600} sx={{ mb: 2 }}>
|
||||
Weekly Pattern Analysis
|
||||
</Typography>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<RadarChart data={weekdayPatterns}>
|
||||
<PolarGrid strokeDasharray="3 3" />
|
||||
<PolarAngleAxis dataKey="day" />
|
||||
<PolarRadiusAxis angle={90} domain={[0, 'auto']} />
|
||||
<Radar
|
||||
name="Feedings"
|
||||
dataKey="avgFeedings"
|
||||
stroke={COLORS.feeding}
|
||||
fill={COLORS.feeding}
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<Radar
|
||||
name="Sleep"
|
||||
dataKey="avgSleep"
|
||||
stroke={COLORS.sleep}
|
||||
fill={COLORS.sleep}
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<Radar
|
||||
name="Diapers"
|
||||
dataKey="avgDiapers"
|
||||
stroke={COLORS.diaper}
|
||||
fill={COLORS.diaper}
|
||||
fillOpacity={0.6}
|
||||
/>
|
||||
<Legend />
|
||||
</RadarChart>
|
||||
</ResponsiveContainer>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
|
||||
{/* Heatmap for Hourly Activity */}
|
||||
<Grid item xs={12} lg={6} sx={{ minWidth: 400 }}>
|
||||
<motion.div variants={chartVariants} initial="hidden" animate="visible">
|
||||
<Paper elevation={0} sx={{ p: 3, height: 400 }} id="heatmap-chart">
|
||||
<Typography variant="h6" fontWeight={600} sx={{ mb: 2 }}>
|
||||
24-Hour Activity Pattern
|
||||
</Typography>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<ComposedChart data={hourlyData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="hour"
|
||||
tickFormatter={(hour) => `${hour}:00`}
|
||||
/>
|
||||
<YAxis />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
<Bar dataKey="feeding" stackId="a" fill={COLORS.feeding} />
|
||||
<Bar dataKey="sleep" stackId="a" fill={COLORS.sleep} />
|
||||
<Bar dataKey="diaper" stackId="a" fill={COLORS.diaper} />
|
||||
<Line type="monotone" dataKey="activity" stroke="#ff7300" strokeWidth={2} />
|
||||
</ComposedChart>
|
||||
</ResponsiveContainer>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
|
||||
{/* Bubble Chart for Correlations */}
|
||||
<Grid item xs={12} lg={6} sx={{ minWidth: 400 }}>
|
||||
<motion.div variants={chartVariants} initial="hidden" animate="visible">
|
||||
<Paper elevation={0} sx={{ p: 3, height: 400 }} id="bubble-chart">
|
||||
<Typography variant="h6" fontWeight={600} sx={{ mb: 2 }}>
|
||||
Activity Correlations
|
||||
</Typography>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<ScatterChart>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="x" name="Feedings" />
|
||||
<YAxis dataKey="y" name="Sleep Hours" />
|
||||
<ZAxis dataKey="z" range={[50, 400]} name="Diapers" />
|
||||
<Tooltip cursor={{ strokeDasharray: '3 3' }} content={<CustomTooltip />} />
|
||||
<Scatter
|
||||
name="Days"
|
||||
data={correlationData}
|
||||
fill={COLORS.feeding}
|
||||
fillOpacity={0.6}
|
||||
>
|
||||
{correlationData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[index % 2 === 0 ? 'feeding' : 'sleep']} />
|
||||
))}
|
||||
</Scatter>
|
||||
</ScatterChart>
|
||||
</ResponsiveContainer>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
|
||||
{/* Radial Bar Chart for Time of Day */}
|
||||
<Grid item xs={12} sx={{ minWidth: 400 }}>
|
||||
<motion.div variants={chartVariants} initial="hidden" animate="visible">
|
||||
<Paper elevation={0} sx={{ p: 3, minHeight: 400 }} id="radial-chart">
|
||||
<Typography variant="h6" fontWeight={600} sx={{ mb: 2 }}>
|
||||
Time of Day Distribution
|
||||
</Typography>
|
||||
<Box sx={{ width: '100%', minHeight: 300 }}>
|
||||
<ResponsiveContainer width="100%" height={300}>
|
||||
<BarChart data={timeOfDayData} layout="horizontal">
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis type="number" />
|
||||
<YAxis dataKey="period" type="category" />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
<Bar dataKey="activities" fill={COLORS.feeding}>
|
||||
{timeOfDayData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={COLORS[entry.period as keyof typeof COLORS] || COLORS.feeding} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</Box>
|
||||
</Paper>
|
||||
</motion.div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Export Menu */}
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleMenuClose}
|
||||
>
|
||||
<MUIMenuItem onClick={() => { exportChart('area-chart', 'png'); handleMenuClose(); }}>
|
||||
<Download sx={{ mr: 1, fontSize: 20 }} /> Export as PNG
|
||||
</MUIMenuItem>
|
||||
<MUIMenuItem onClick={() => { exportChart('area-chart', 'pdf'); handleMenuClose(); }}>
|
||||
<Download sx={{ mr: 1, fontSize: 20 }} /> Export as PDF
|
||||
</MUIMenuItem>
|
||||
<MUIMenuItem onClick={handleMenuClose}>
|
||||
<Share sx={{ mr: 1, fontSize: 20 }} /> Share
|
||||
</MUIMenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -21,11 +21,14 @@ import { useRouter } from 'next/navigation';
|
||||
import { childrenApi, Child } from '@/lib/api/children';
|
||||
import { analyticsApi, PatternInsights, PredictionInsights } from '@/lib/api/analytics';
|
||||
import { InsightsDashboard } from './InsightsDashboard';
|
||||
import { EnhancedInsightsDashboard } from './EnhancedInsightsDashboard';
|
||||
import PredictionsCard from './PredictionsCard';
|
||||
import GrowthSpurtAlert from './GrowthSpurtAlert';
|
||||
import ChildSelector from '@/components/common/ChildSelector';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useAuth } from '@/lib/auth/AuthContext';
|
||||
import { ToggleButton, ToggleButtonGroup } from '@mui/material';
|
||||
import { ShowChart, BubbleChart } from '@mui/icons-material';
|
||||
|
||||
interface TabPanelProps {
|
||||
children?: React.ReactNode;
|
||||
@@ -62,6 +65,7 @@ export function UnifiedInsightsDashboard() {
|
||||
const [predictionsLoading, setPredictionsLoading] = useState(false);
|
||||
const [days, setDays] = useState<number>(7);
|
||||
const [error, setError] = useState<string>('');
|
||||
const [chartMode, setChartMode] = useState<'basic' | 'enhanced'>('basic');
|
||||
|
||||
// Get the selected child ID (first one from the array for single selection)
|
||||
const selectedChildId = selectedChildIds[0] || '';
|
||||
@@ -241,10 +245,35 @@ export function UnifiedInsightsDashboard() {
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{/* Chart Mode Toggle for Insights Tab */}
|
||||
{tabValue === 0 && (
|
||||
<Box sx={{ mb: 2, display: 'flex', justifyContent: 'center' }}>
|
||||
<ToggleButtonGroup
|
||||
value={chartMode}
|
||||
exclusive
|
||||
onChange={(e, newMode) => newMode && setChartMode(newMode)}
|
||||
size="small"
|
||||
>
|
||||
<ToggleButton value="basic" aria-label="basic charts">
|
||||
<ShowChart sx={{ mr: 1 }} />
|
||||
Basic Charts
|
||||
</ToggleButton>
|
||||
<ToggleButton value="enhanced" aria-label="enhanced charts">
|
||||
<BubbleChart sx={{ mr: 1 }} />
|
||||
Enhanced Charts
|
||||
</ToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
{/* Tab Panels */}
|
||||
<TabPanel value={tabValue} index={0}>
|
||||
{/* Insights tab shows the existing InsightsDashboard */}
|
||||
<InsightsDashboard selectedChildId={selectedChildId} days={days} />
|
||||
{/* Insights tab shows either basic or enhanced dashboard */}
|
||||
{chartMode === 'basic' ? (
|
||||
<InsightsDashboard selectedChildId={selectedChildId} days={days} />
|
||||
) : (
|
||||
<EnhancedInsightsDashboard selectedChildId={selectedChildId} days={days} />
|
||||
)}
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel value={tabValue} index={1}>
|
||||
|
||||
Reference in New Issue
Block a user