From 478ca2441d8c9f4dadbc3c88f066d56c3277de02 Mon Sep 17 00:00:00 2001 From: Lucas Santana Date: Thu, 6 Feb 2025 14:34:58 -0300 Subject: [PATCH] =?UTF-8?q?refactor:=20extrai=20componentes=20de=20m=C3=A9?= =?UTF-8?q?tricas=20do=20dashboard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Modulariza os cards de métricas em componentes reutilizáveis: - Cria componente MetricCard para cards individuais - Cria componente DashboardMetrics para agrupamento - Move configurações de métricas para constantes - Adiciona suporte a tooltips e ícones personalizados - Mantém responsividade e acessibilidade - Simplifica o StudentDashboardPage Mudanças técnicas: - Extrai lógica de renderização para componentes dedicados - Centraliza configuração de métricas em constantes - Melhora tipagem com interfaces dedicadas - Adiciona suporte a tooltips informativos - Mantém consistência visual com o design system - Reduz duplicação de código --- CHANGELOG.md | 6 + src/components/dashboard/DashboardMetrics.tsx | 160 ++++++++++++++ src/components/dashboard/MetricCard.tsx | 45 ++++ .../StudentDashboardPage.tsx | 196 +----------------- 4 files changed, 215 insertions(+), 192 deletions(-) create mode 100644 src/components/dashboard/DashboardMetrics.tsx create mode 100644 src/components/dashboard/MetricCard.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 314fa51..7106f4c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -244,3 +244,9 @@ e este projeto adere ao [Semantic Versioning](https://semver.org/lang/pt-BR/). - Estado interno gerenciado - Props minimalistas e bem tipadas - Componente reutilizável em outros contextos +- Componentes de métricas extraídos e modularizados + - Novo componente MetricCard para cards individuais + - Novo componente DashboardMetrics para agrupamento + - Configuração centralizada de métricas + - Suporte a tooltips e ícones personalizados + - Responsividade e acessibilidade melhoradas diff --git a/src/components/dashboard/DashboardMetrics.tsx b/src/components/dashboard/DashboardMetrics.tsx new file mode 100644 index 0000000..b62dd33 --- /dev/null +++ b/src/components/dashboard/DashboardMetrics.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { BookOpen, Clock, TrendingUp, Award, Mic, Target, Brain, Gauge, Pause, XCircle, HelpCircle } from 'lucide-react'; +import { MetricCard } from './MetricCard'; + +interface DashboardMetricsData { + totalStories: number; + averageReadingFluency: number; + totalReadingTime: number; + currentLevel: number; + averagePronunciation: number; + averageAccuracy: number; + averageComprehension: number; + averageWordsPerMinute: number; + averagePauses: number; + averageErrors: number; +} + +interface DashboardMetricsProps { + data: DashboardMetricsData; + className?: string; +} + +const MAIN_METRICS = [ + { + key: 'totalStories', + title: 'Total de Histórias', + getValue: (data: DashboardMetricsData) => data.totalStories, + icon: BookOpen, + iconColor: 'text-purple-600', + iconBgColor: 'bg-purple-100' + }, + { + key: 'averageReadingFluency', + title: 'Fluência Média', + getValue: (data: DashboardMetricsData) => `${data.averageReadingFluency}%`, + icon: TrendingUp, + iconColor: 'text-green-600', + iconBgColor: 'bg-green-100' + }, + { + key: 'totalReadingTime', + title: 'Tempo de Leitura', + getValue: (data: DashboardMetricsData) => `${data.totalReadingTime}min`, + icon: Clock, + iconColor: 'text-blue-600', + iconBgColor: 'bg-blue-100' + }, + { + key: 'currentLevel', + title: 'Nível Atual', + getValue: (data: DashboardMetricsData) => data.currentLevel, + icon: Award, + iconColor: 'text-yellow-600', + iconBgColor: 'bg-yellow-100' + } +]; + +const DETAILED_METRICS = [ + { + key: 'averagePronunciation', + title: 'Pronúncia Média', + getValue: (data: DashboardMetricsData) => `${data.averagePronunciation}%`, + icon: Mic, + iconColor: 'text-indigo-600', + iconBgColor: 'bg-indigo-100', + tooltip: 'Avalia a qualidade da sua pronúncia durante a leitura, considerando a clareza e correção dos sons das palavras' + }, + { + key: 'averageAccuracy', + title: 'Precisão na Leitura', + getValue: (data: DashboardMetricsData) => `${data.averageAccuracy}%`, + icon: Target, + iconColor: 'text-pink-600', + iconBgColor: 'bg-pink-100', + tooltip: 'Indica o quão preciso você é ao ler as palavras, sem trocas ou omissões de letras e sílabas' + }, + { + key: 'averageComprehension', + title: 'Compreensão do Texto', + getValue: (data: DashboardMetricsData) => `${data.averageComprehension}%`, + icon: Brain, + iconColor: 'text-orange-600', + iconBgColor: 'bg-orange-100', + tooltip: 'Avalia seu nível de entendimento do texto durante a leitura, baseado no ritmo e entonação adequados' + }, + { + key: 'averageWordsPerMinute', + title: 'Velocidade de Leitura', + getValue: (data: DashboardMetricsData) => `${data.averageWordsPerMinute} WPM`, + icon: Gauge, + iconColor: 'text-cyan-600', + iconBgColor: 'bg-cyan-100', + tooltip: 'Média de palavras lidas por minuto (WPM), indicando a velocidade e fluidez da sua leitura' + }, + { + key: 'averagePauses', + title: 'Pausas na Leitura', + getValue: (data: DashboardMetricsData) => data.averagePauses, + icon: Pause, + iconColor: 'text-amber-600', + iconBgColor: 'bg-amber-100', + tooltip: 'Média de pausas não planejadas durante a leitura, indicando momentos de hesitação' + }, + { + key: 'averageErrors', + title: 'Erros de Leitura', + getValue: (data: DashboardMetricsData) => data.averageErrors, + icon: XCircle, + iconColor: 'text-red-600', + iconBgColor: 'bg-red-100', + tooltip: 'Média de erros cometidos durante a leitura, como trocas, omissões ou adições de palavras' + } +]; + +export function DashboardMetrics({ data, className = '' }: DashboardMetricsProps) { + return ( +
+ {/* Métricas Principais */} +
+ {MAIN_METRICS.map(metric => ( + + ))} +
+ + {/* Métricas Detalhadas */} +
+
+

Métricas Detalhadas de Leitura

+
+ +
+
+ +
+ {DETAILED_METRICS.map(metric => ( + + ))} +
+
+
+ ); +} \ No newline at end of file diff --git a/src/components/dashboard/MetricCard.tsx b/src/components/dashboard/MetricCard.tsx new file mode 100644 index 0000000..718cf47 --- /dev/null +++ b/src/components/dashboard/MetricCard.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { LucideIcon } from 'lucide-react'; +import { HelpCircle } from 'lucide-react'; + +interface MetricCardProps { + title: string; + value: string | number; + icon: LucideIcon; + iconColor: string; + iconBgColor: string; + tooltip?: string; +} + +export function MetricCard({ + title, + value, + icon: Icon, + iconColor, + iconBgColor, + tooltip +}: MetricCardProps) { + return ( +
+
+
+ +
+
+
+

{title}

+ {tooltip && ( +
+ +
+ )} +
+

{value}

+
+
+
+ ); +} \ No newline at end of file diff --git a/src/pages/student-dashboard/StudentDashboardPage.tsx b/src/pages/student-dashboard/StudentDashboardPage.tsx index ba64934..3155076 100644 --- a/src/pages/student-dashboard/StudentDashboardPage.tsx +++ b/src/pages/student-dashboard/StudentDashboardPage.tsx @@ -1,9 +1,10 @@ import React from 'react'; -import { Plus, BookOpen, Clock, TrendingUp, Award, Mic, Target, Brain, Gauge, Pause, XCircle, HelpCircle } from 'lucide-react'; +import { Plus, BookOpen } from 'lucide-react'; import { useNavigate } from 'react-router-dom'; import { supabase } from '../../lib/supabase'; import type { Story, Student } from '../../types/database'; import { MetricsChart } from '@/components/dashboard/MetricsChart'; +import { DashboardMetrics } from '@/components/dashboard/DashboardMetrics'; interface DashboardMetrics { totalStories: number; @@ -316,197 +317,8 @@ export function StudentDashboardPage() { - {/* Métricas Principais */} -
-
-
-
- -
-
-

Total de Histórias

-

{metrics.totalStories}

-
-
-
- -
-
-
- -
-
-

Fluência Média

-

{metrics.averageReadingFluency}%

-
-
-
- -
-
-
- -
-
-

Tempo de Leitura

-

{metrics.totalReadingTime}min

-
-
-
- -
-
-
- -
-
-

Nível Atual

-

{metrics.currentLevel}

-
-
-
-
- - {/* Métricas Detalhadas */} -
-
-

Métricas Detalhadas de Leitura

-
- -
-
- -
- {/* Pronúncia */} -
-
-
- -
-
-
-

Pronúncia Média

-
- -
-
-

{metrics.averagePronunciation}%

-
-
-
- - {/* Precisão */} -
-
-
- -
-
-
-

Precisão na Leitura

-
- -
-
-

{metrics.averageAccuracy}%

-
-
-
- - {/* Compreensão */} -
-
-
- -
-
-
-

Compreensão do Texto

-
- -
-
-

{metrics.averageComprehension}%

-
-
-
- - {/* Velocidade */} -
-
-
- -
-
-
-

Velocidade de Leitura

-
- -
-
-

{metrics.averageWordsPerMinute} WPM

-
-
-
- - {/* Pausas */} -
-
-
- -
-
-
-

Pausas na Leitura

-
- -
-
-

{metrics.averagePauses}

-
-
-
- - {/* Erros */} -
-
-
- -
-
-
-

Erros de Leitura

-
- -
-
-

{metrics.averageErrors}

-
-
-
-
-
+ {/* Métricas */} + {/* Gráfico de Evolução */}