AreaComposedChart

Componente com gráfico integrado que remonta o histórico de progressão de funções do usuário.

Introdução

O componente AreaComposedChart é responsável por exibir graficamente o histórico de evolução do usuário, detalhando sua progressão de carreira em suas funções após realização do teste "Self Awareness"

Componente Gráfico: AreaComposedChart

A exibição de conteúdo ocorre por meio dos contexts user e specialtys.

Sobre: Mapeamento de dados para o gráfico

const mountUserData = () => {
    const data = user.results?.sort((a: any, b: any) => {
      return Number(a.createdAt) - Number(b.createdAt);
    });

    const dataToChart = data?.map((item: any) => {

      return {
        nextRole: item.nextRole,
        createdAt: `${new Date(item.createdAt).toLocaleDateString()}`,
        allSpecialities: [...speciality!],
      }
    });

    return dataToChart;
};

Componentes Integrados

• Recharts -> Gráfico de linha/área do histórico de funções.

Requisitos Funcionais

Descrição	Entradas	Saídas	Observações ⭐
Carregamento de dados pelos contexts	-	-	✅
Acessibilidade via Color Mode - White e Dark	Evento de clique no primeiro ícone do componente AsideMenu [☀ - 🌙]	Alteração na visualização de cores dentro de toda a aplicação	O controle do modo de cores ocorre através do context ToggleModeStyle.
Responsividade	-	-	✅

Caminho do arquivo: src\components\Graphics\AreaComposedChart.tsx