]
Dashboard moderno e responsivo com gráficos interativos, análises em tempo real e múltiplos indicadores de performance para gestão empresarial eficiente.
Demo ao Vivo • Características • Instalação • Uso • Tecnologias
O Dashboard Empresarial é uma solução completa para visualização e análise de dados corporativos. Desenvolvido com foco em performance, usabilidade e design moderno, oferece uma experiência rica para tomada de decisões baseadas em dados.
- 📈 Gráficos Interativos - Visualizações dinâmicas com Chart.js
- 🌓 Tema Claro/Escuro - Alternância suave entre temas
- 📱 100% Responsivo - Otimizado para mobile, tablet e desktop
- ⚡ Atualizações em Tempo Real - Dados sincronizados a cada 5 segundos
- 📊 KPIs Inteligentes - Indicadores com tendências e sparklines
- 💾 Exportação CSV - Exporte seus dados facilmente
- 🎨 Interface Moderna - Design clean inspirado em dashboards profissionais
# Clone o repositório
git clone https://github.com/bimadevfull/dashboard-empresarial.git
# Acesse o diretório
cd dashboard-empresarial
# Abra o index.html no navegador
open index.htmlOu utilize um servidor local:
# Com Python 3
python -m http.server 8000
# Com Node.js (http-server)
npx http-server -p 8000Acesse: http://localhost:8000
| Gráfico | Tipo | Descrição |
|---|---|---|
| Receita | Linha | Evolução temporal da receita com preenchimento |
| Pagamentos | Donut | Distribuição percentual por método de pagamento |
| Categorias | Barra | Vendas por categoria de produto |
| Operações | Radar | Índices operacionais em 5 dimensões |
| Sparklines | Linha mini | Tendências rápidas nos KPIs |
- 💰 Receita Total - Com variação percentual
- 🛒 Pedidos - Volume de transações
- 📊 Taxa de Conversão - Performance de vendas
- 🎫 Ticket Médio - Valor médio por pedido
- Hoje - Últimas 24 horas (granularidade horária)
- 7 dias - Última semana (granularidade diária)
- 30 dias - Último mês (granularidade diária)
- 90 dias - Último trimestre (granularidade diária)
- ✅ Mean Reversion Algorithm - Dados sintéticos realistas que não colapsam
- ✅ Eixos Estáveis - Escalas Y inteligentes que evitam saltos visuais
- ✅ Transições Suaves - Animações otimizadas com
easeOutQuart - ✅ Persistência de Tema - LocalStorage salva preferência do usuário
- ✅ Toast Notifications - Feedback visual para ações
- ✅ Histórico de Atividades - Log em tempo real com até 50 eventos
| Tecnologia | Versão | Uso |
|---|---|---|
 |
5 | Estrutura |
|  | 3 | Estilização |
 |
ES6+ | Lógica |
 |
4.4.4 | Gráficos |
<!-- CDN Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>**Sem frameworks pesados! ** Vanilla JavaScript puro para máxima performance.
dashboard-empresarial/
│
├── index.html # Estrutura HTML principal
├── styles.css # Estilos e tema claro/escuro
├── app.js # Lógica JavaScript e gráficos
├── README.md # Documentação (você está aqui!)
└── assets/ # (opcional) Imagens e recursos
└── preview.png # Screenshot do dashboard
Edite as variáveis CSS em styles.css:
:root {
--brand: #4f8cff; /* Azul primário */
--accent: #22c55e; /* Verde secundário */
--warn: #f59e0b; /* Laranja de alerta */
--bg: #0d1117; /* Fundo escuro */
--card: #161b22; /* Cartões */
--text: #e6edf3; /* Texto principal */
--border: #223147; /* Bordas e grid */
}[data-theme="light"] {
--bg: #f6f8fa;
--card: #ffffff;
--text: #1f2328;
--border: #d0d7de;
}Ajuste em app.js (linha ~350):
timer = setInterval(()=>{
// ... lógica de atualização
}, 5000); // ← Mude para 3000 (3s), 10000 (10s), etc.- Navegador moderno (Chrome 90+, Firefox 88+, Safari 14+, Edge 90+)
- Conexão à internet (para CDN do Chart.js)
-
Clone o repositório
git clone https://github.com/bimadevfull/dashboard-empresarial. git cd dashboard-empresarial -
Abra o projeto
- Duplo clique em
index.html, ou - Use um servidor local (recomendado):
python -m http.server 8000
- Duplo clique em
-
Pronto! 🎉
- Alternar Tema - Clique no ícone ☀️/🌙 no topo
- Mudar Intervalo - Clique nos chips "Hoje", "7 dias", "30 dias", "90 dias"
- Atualizar Dados - Botão "Atualizar" ou aguarde 5 segundos
- Exportar - Botão "Exportar CSV" gera arquivo com dados
- Buscar - Digite no campo de busca (simulação)
- Sidebar - Clique em ☰ para recolher/expandir
ESC- Fecha sidebar no mobileCtrl + F- Foca campo de busca (padrão do navegador)
Gera séries temporais realistas que oscilam em torno de uma média, evitando crescimento/queda infinitos:
function meanRevertingSeries(len, start, targetBase, kappa=0.15, vol=0.08) {
// kappa: velocidade de retorno à média (0-1)
// vol: volatilidade (0-1)
// Formula: V(t+1) = V(t) + κ(μ - V(t)) + ε
}Vantagens:
- ✅ Não colapsa para zero
- ✅ Não explode para infinito
- ✅ Padrões sazonais naturais
- ✅ Volatilidade controlada
- Backend Real - Integração com API REST
- Autenticação - Login e controle de acesso
- Filtros Avançados - Por categoria, região, etc.
- Comparação Temporal - Ano anterior vs. atual
- Alertas - Notificações de metas atingidas
- Multi-idioma - Inglês e Espanhol
- PWA - Instalável como app nativo
- Exportar PDF - Relatórios em PDF
Contribuições são bem-vindas! Siga estes passos:
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/MinhaFeature) - Commit suas mudanças (
git commit -m 'Add: nova feature incrível') - Push para a branch (
git push origin feature/MinhaFeature) - Abra um Pull Request
Add:Nova funcionalidadeFix:Correção de bugUpdate:Atualização de código existenteDocs:DocumentaçãoStyle:Formatação, ponto-e-vírgula, etc.Refactor:Refatoração de códigoTest:Testes
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
MIT License
Copyright (c) 2025 bimadevfull
Permission is hereby granted, free of charge, to any person obtaining a copy...
bimadevfull
- Chart.js - Biblioteca de gráficos incrível
- GitHub - Inspiração no design do tema escuro
- Comunidade Open Source - Por todo o apoio
⭐ Se este projeto foi útil, considere deixar uma estrela!
Desenvolvido com ❤️ e ☕ por bimadevfull