feat: add tooltip long description over chat subtitle

domains/dashboard/components/Banner/Banner.tsx

@@ -17,10 +17,10 @@ const Banner: FC<Props> = (props): ReactNode => {
           Covid
           <strong className='text-slate-800'>&nbsp;Insights</strong>.
         </h1>
-        <span className='pt-2 block text-slate-500 font-semibold w-full max-w-fit'>
+        <p className='pt-2 block text-slate-500 font-semibold w-full max-w-fit'>
           Pesquisa entre <strong className='text-slate-950'>{startDate}</strong> e{' '}
           <strong className='text-slate-950'>{endDate}</strong>
-        </span>
+        </p>
       </section>
       {props.children}
     </section>

domains/dashboard/components/Chart/Chart.tsx

@@ -1,8 +1,10 @@
+import { Tooltip } from 'antd';
 import type { FC, HTMLAttributes, PropsWithChildren } from 'react';
 
 interface ChartProps extends HTMLAttributes<HTMLDivElement> {
   title: string;
   subtitle: string;
+  description?: string;
 }
 
 type Props = PropsWithChildren<ChartProps>;
@@ -15,7 +17,11 @@ const Chart: FC<Props> = (props) => {
       }`}
     >
       <h1 className='text-foreground font-sans font-semibold text-lg text-center'>{props.title}</h1>
-      <p className='text-foreground font-sans font-light text-lg text-center'>{props.subtitle}</p>
+      <p className='text-foreground font-sans font-light text-lg text-center'>
+        <Tooltip title={props.description} id={props.title} className='w-full'>
+          <span>{props.subtitle}</span>
+        </Tooltip>
+      </p>
       {props.children}
     </div>
   );

domains/dashboard/features/ClinicalTests/ClinicalTests.tsx

@@ -4,6 +4,7 @@ import { options, colors } from './options';
 import { Chart } from '@/domains/dashboard/components';
 import { type PatientsByDiagnosisCriteria } from '@/domains/dashboard/types';
 import { calculatePercentages } from '@/domains/dashboard/lib';
+import { data } from 'autoprefixer';
 
 interface ComponentProps {
   countPatientsByDiagnosisCriteria: PatientsByDiagnosisCriteria[];
@@ -36,6 +37,7 @@ const ClinicalTests: FC<ComponentProps> = ({ countPatientsByDiagnosisCriteria })
     <Chart
       title='Diagnósticos por testes'
       subtitle='Testes mais utilizados para diagnóstico de Covid-19'
+      description='Os gráfico mostra os tipos de testes mais utilizados para diagnóstico de Covid-19. Você pode passar o mouse sobre os dados para ver o número de testes realizados. Entre eles: Teste Clínico, Teste Epidemiolígico, Teste Cliníco-Imagem, Teste Rápido e RT-PCR.'
     >
       <Doughnut
         options={{

domains/dashboard/features/DeadGroupedByMonth/DeadGroupedByMonth.tsx

@@ -34,7 +34,11 @@ const DeadGroupedByMonth: FC<Props> = ({ deadGroupedByMonth }): ReactElement | n
   const percentages = calculatePercentages(deadGroupedByMonth.map((item) => item.count));
 
   return (
-    <Chart title='Óbitos por mês' subtitle='Óbitos que ocorreram por mês'>
+    <Chart
+      title='Óbitos por mês'
+      subtitle='Óbitos que ocorreram por mês'
+      description='O gráfico mostra o número de óbitos que ocorreram por mês. Você pode passar o mouse sobre os dados para ver o número de óbitos. Entre eles: Janeiro, Fevereiro, Março, Abril, Maio, Junho, Julho, Agosto, Setembro, Outubro, Novembro e Dezembro.'
+    >
       <Line
         options={{
           ...options,

domains/dashboard/features/PatientsByAge/PatientsByAge.tsx

@@ -45,6 +45,7 @@ const PatientsByAge: FC<IPatientsByAge> = ({ countPatientsByAge }) => {
     <Chart
       title='Idades dos pacientes'
       subtitle='Idades mais comuns entre pacientes diagnosticados com COVID-19'
+      description='O gráfico mostra as idades mais comuns entre os pacientes diagnosticados com COVID-19. Você pode passar o mouse sobre os dados para ver o número de pacientes. Entre eles: 0-1 meses, 1-04 anos, 05-09 anos, 10-14 anos, 15-19 anos, 20-29 anos, 30-39 anos, 40-49 anos, 50-59 anos, 60-69 anos, 70-79 anos e 80+ anos.'
     >
       <Bar
         options={{

domains/dashboard/features/Symptoms/Symptoms.tsx

@@ -37,7 +37,11 @@ const Symptoms: FC<ComponentProps> = ({ countPatientsSymptoms }) => {
   };
 
   return (
-    <Chart title='Sintomas de Covid-19' subtitle='Sintomas mais comuns entre os pacientes'>
+    <Chart
+      title='Sintomas de Covid-19'
+      subtitle='Sintomas mais comuns entre os pacientes'
+      description='Os gráfico mostra os sintomas mais comuns entre os pacientes. Você pode passar o mouse sobre os dados para ver o número de pacientes que apresentaram cada sintoma. Entre eles: Febre, Tosse, Dor de Garganta, Dispneia e outros sintomas.'
+    >
       <Pie
         options={{
           ...options,

domains/dashboard/store/useSlectedDateStore/useSlectedDateStore.ts

@@ -12,7 +12,7 @@ interface SelectedDateStore {
 const useSlectedDateStore = create<SelectedDateStore>((set, get) => ({
   selectedDate: {
     startDate: '2022-01-01T10:00:00Z',
-    endDate: '2022-03-30T10:00:00Z',
+    endDate: '2022-12-31T10:00:00Z',
   },
   setSelectedDate: (startDate: string, endDate: string) => {
     set({ selectedDate: { startDate, endDate } });

pages/dashboard.tsx

@@ -22,7 +22,7 @@ export const getStaticProps: GetStaticProps = async (): Promise<
       query: clinicalDataQuery,
       variables: {
         startDate: '2022-01-01T10:00:00Z',
-        endDate: '2022-03-30T10:00:00Z',
+        endDate: '2022-12-31T10:00:00Z',
       },
     });
 
@@ -50,7 +50,9 @@ export const getStaticProps: GetStaticProps = async (): Promise<
     };
   } catch (error) {
     return {
-      notFound: true,
+      props: {
+        data: undefined,
+      },
     };
   }
 };