diff --git a/CHANGELOG.md b/CHANGELOG.md index 50631f9..1a350ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -229,9 +229,12 @@ e este projeto adere ao [Semantic Versioning](https://semver.org/lang/pt-BR/). - Tooltip personalizado com informações detalhadas - Agrupamento automático por semana - Layout responsivo e adaptável + - Filtro de período com opções de 3, 6, 12 meses e todo período + - Visualização padrão dos últimos 12 meses ### Técnico - Implementação do Recharts para visualização de dados - Novo sistema de processamento de métricas semanais - Otimização do carregamento de dados com agrupamento eficiente - Integração com o tema existente do sistema +- Sistema de filtragem temporal com conversão de datas diff --git a/src/pages/student-dashboard/StudentDashboardPage.tsx b/src/pages/student-dashboard/StudentDashboardPage.tsx index 4494c54..b99db8b 100644 --- a/src/pages/student-dashboard/StudentDashboardPage.tsx +++ b/src/pages/student-dashboard/StudentDashboardPage.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Plus, BookOpen, Clock, TrendingUp, Award, Mic, Target, Brain, Gauge, Pause, XCircle, HelpCircle } from 'lucide-react'; +import { Plus, BookOpen, Clock, TrendingUp, Award, Mic, Target, Brain, Gauge, Pause, XCircle, HelpCircle, Calendar } from 'lucide-react'; import { useNavigate } from 'react-router-dom'; import { supabase } from '../../lib/supabase'; import type { Story, Student } from '../../types/database'; @@ -59,6 +59,14 @@ interface MetricConfig { color: string; } +type TimeFilter = '3m' | '6m' | '12m' | 'all'; + +interface TimeFilterOption { + value: TimeFilter; + label: string; + months: number | null; +} + const METRICS_CONFIG: MetricConfig[] = [ { key: 'fluency', name: 'Fluência', color: '#6366f1' }, { key: 'pronunciation', name: 'Pronúncia', color: '#f43f5e' }, @@ -67,6 +75,13 @@ const METRICS_CONFIG: MetricConfig[] = [ { key: 'wordsPerMinute', name: 'Palavras/Min', color: '#8b5cf6' } ]; +const TIME_FILTERS: TimeFilterOption[] = [ + { value: '3m', label: '3 meses', months: 3 }, + { value: '6m', label: '6 meses', months: 6 }, + { value: '12m', label: '12 meses', months: 12 }, + { value: 'all', label: 'Todo período', months: null }, +]; + export function StudentDashboardPage() { const navigate = useNavigate(); const [student, setStudent] = React.useState(null); @@ -89,6 +104,7 @@ export function StudentDashboardPage() { const [visibleMetrics, setVisibleMetrics] = React.useState>( new Set(METRICS_CONFIG.map(metric => metric.key)) ); + const [timeFilter, setTimeFilter] = React.useState('12m'); const processWeeklyMetrics = (recordings: Recording[]) => { const weeklyData = recordings.reduce((acc: { [key: string]: WeeklyData }, recording) => { @@ -149,6 +165,20 @@ export function StudentDashboardPage() { }); }; + const filterDataByTime = (data: WeeklyMetrics[]): WeeklyMetrics[] => { + if (timeFilter === 'all') return data; + + const months = TIME_FILTERS.find(f => f.value === timeFilter)?.months || 12; + const cutoffDate = new Date(); + cutoffDate.setMonth(cutoffDate.getMonth() - months); + + return data.filter(item => { + const [year, week] = item.week.split('-W').map(Number); + const itemDate = new Date(year, 0, 1 + (week - 1) * 7); + return itemDate >= cutoffDate; + }); + }; + React.useEffect(() => { const fetchDashboardData = async () => { try { @@ -310,6 +340,8 @@ export function StudentDashboardPage() { } const renderMetricsChart = () => { + const filteredData = filterDataByTime(weeklyMetrics); + return (
@@ -318,7 +350,26 @@ export function StudentDashboardPage() {

Evolução das Métricas por Semana

Acompanhe seu progresso ao longo do tempo

-
+
+ {/* Filtro de Período */} +
+ + {TIME_FILTERS.map(filter => ( + + ))} +
- +