FEAT: Create graph components for data controll #103
Description
🗂️ Task: Componente de representação de tabelas do backend com gráficos
📌 Descrição
Desenvolver um componente para representação gráfica dos dados das tabelas do backend, utilizando a biblioteca VueSakai para geração dos gráficos. O componente será reutilizável e deverá suportar dois modos de exibição:
- Primário: gráfico maior e mais detalhado, com largura expandida. Usado em páginas principais como Órgãos, Sistemas, etc.
- Secundário: gráfico compacto e com largura reduzida, utilizado em painéis menores ou dashboards.
Ambos os modos terão um botão de visualização que abre um pop-up fullscreen contendo o gráfico em tamanho completo e os dados brutos relacionados.
⚠️ Requisitos:
- Usar a biblioteca VueSakai para renderizar os gráficos
- Componente principal (modo primário):
- Gráfico grande, com largura total ou quase total da tela
- Usado em páginas como Órgãos e Sistemas
- Componente secundário:
- Gráfico menor, com largura reduzida
- Usado em dashboards e cards compactos
- Botão de visualização presente nos dois modos
- Ao clicar, exibir gráfico e dados completos em um pop-up (fullscreen ou modal centralizado)
- Componente reutilizável e parametrizável (tipo de gráfico, dados, título, cor etc.)
✅ Critérios de aceitação:
- Os dois modos de gráfico são exibidos corretamente e com dados recebidos via props
- O botão de visualização funciona e abre o pop-up com os dados completos
- Estilização consistente com o painel administrativo
- Componente responsivo e funcional em diferentes tamanhos de tela
- Não há bugs ou travamentos na troca de modo ou exibição em pop-up