Sistema de Dashboard ONDEVOU (App 0071)

Framework completo para criação de dashboards dinâmicos a partir de qualquer tabela da plataforma. Padrão adotado: Configuração declarativa no parameters['dashboard'] das tabelas. Destaque: Sistema de METRICA_AGRUPAMENTO para análises estatísticas avançadas.

🚀 Produção 📊 4+ Tabelas 📈 11 Fases 🏭 Cilindros 🚗 Veículos 📦 Dashboard 📄 PDF
4
Tipos de Gráfico
7
Granularidades
12
Formatos de Data
11
Métricas Agrupamento
10+
Filtros SQL-like
29
Arquivos JS

🏗️ Arquitetura do Sistema

Fluxo Completo do Dashboard
graph TB subgraph Configuracao["Configuração"] T[Tabela] --> P[parameters.dashboard] P --> H[Header] P --> S[Sections] P --> T2[Tables] end subgraph Renderizacao["Renderização"] S --> R[RENDER] R --> C[summary_cards_full] R --> G[summary_cards_grid] R --> V[visualization_section] R --> E[charts_grid_section] end subgraph Dados["Dados"] D[Dados] --> F[Filtros] F --> A[Agrupamentos] A --> M[METRICA_AGRUPAMENTO] A --> CA[SUM / COUNT / AVG / CALC] end subgraph Graficos["Gráficos"] CA --> B[Barras] CA --> P2[Pizza] CA --> L[Linha] CA --> EV[Evolução] B --> R2[Ranking] B --> V2[Vertical / Horizontal] end subgraph Exportacao["Exportação"] R2 --> PDF[PDF] V2 --> EXCEL[Excel / CSV] end

📁 Arquivos do Sistema

  • ondevou-dashboard.js — Core principal
  • ondevou-dashboard-format.js — Formatação (12 tipos)
  • ondevou-dashboard-templates.js — Estruturas HTML
  • ondevou-dashboard-chart-bar.js — Barras e Ranking
  • ondevou-dashboard-chart-pie.js — Pizza/Donut
  • ondevou-dashboard-chart-line.js — Linha (7 granularidades)
  • ondevou-dashboard-chart-evolution.js — Evolução
  • ondevou-dashboard-relatorio.js — PDF
  • ondevou-dashboard-export.js — Exportação
  • ondevou-dashboard.css — Estilos

🎯 Filosofia do Sistema

  • 📊 Configuração declarativa — Tudo no parameters da tabela
  • 🧩 Modular — Cada gráfico em seu arquivo
  • 📈 Análise estatística — METRICA_AGRUPAMENTO com 11 métricas
  • 🔍 Filtros em cascata — filters + filters_aggregation
  • 📅 Granularidade temporal — 7 níveis (diário a anual)
  • 🏆 Ranking automático — Top 3 com moda/segundo/terceiro
  • 🔄 Auto-refresh — Monitora mudanças nos dados

📋 Estrutura da Configuração

📝 Template Básico

// No arquivo ondevou-component-addtable-[tabela].js parameters['dashboard'] = { 'enabled': true, 'theme': 'modern', 'auto_refresh': false, 'header': dashboard_gerar_header( 'Título do Dashboard', 'Subtítulo explicativo' ), 'sections': { 'bloco1_resumo_executivo': { 'type': 'summary_cards_full', 'title': 'RESUMO EXECUTIVO', 'icon': '📊', 'config': { 'cards': [...] } }, 'bloco2_metricas_detalhadas': { 'type': 'summary_cards_grid', 'title': 'MÉTRICAS DETALHADAS', 'config': { 'sections': [ { 'title': 'CATEGORIA 1', 'cards': [...] }, { 'title': 'CATEGORIA 2', 'cards': [...] } ] } }, 'bloco3_graficos': { 'type': 'charts_grid_section', 'title': 'ANÁLISE VISUAL', 'config': { 'charts': [...] } } } };

🏷️ Tipos de Seção

Tipo Descrição Uso
summary_cards_full Cards grandes em linha KPIs principais
summary_cards_grid Grid de cards agrupados Métricas detalhadas
charts_grid_section Grid de gráficos Visualizações
table_section Tabela de dados Detalhamento

🎨 Cores Padrão

#3b82f6 - Azul #22c55e - Verde #ef4444 - Vermelho #a855f7 - Roxo #f97316 - Laranja #eab308 - Amarelo

📈 Sistema de Métricas - METRICA_AGRUPAMENTO

🎯 O Poder da Análise Estatística

A função dashboard_metrica_agrupamento() permite análises estatísticas completas sem SQL complexo!

📊 Estatísticas Básicas

  • total_grupos — Quantos grupos existem
  • soma — Soma dos valores
  • media — Média dos valores
  • menor — Menor valor
  • maior — Maior valor
  • mediana — Valor do meio

📊 Estatísticas Avançadas

  • acima_media — Grupos acima da média
  • abaixo_media — Grupos abaixo da média
  • moda — Valor mais frequente (🥇)
  • segundo — Segundo lugar (🥈)
  • terceiro — Terceiro lugar (🥉)
  • maior_grupo — Grupo com maior valor

📝 Exemplo de Uso

{ 'title': 'TOTAL DE LOTES', 'group_by': 'id_lote_producao', 'value': 'METRICA_AGRUPAMENTO:total_grupos', 'format': 'numero' }, { 'title': 'PRODUTO MAIS PRODUZIDO', 'group_by': 'nome_produto', 'value': 'METRICA_AGRUPAMENTO:moda', 'format': 'texto', 'icon': '🥇' }

🧮 Operações de Cálculo

➕ Operações Básicas

  • COUNT:campo — Contagem
  • SUM:campo — Soma
  • AVG:campo — Média
  • MAX:campo — Máximo
  • MIN:campo — Mínimo
  • COUNT_DISTINCT:campo — Valores únicos

🧮 Operações CALC

Expressões matemáticas completas:

// Média de cilindros por lote 'value': 'CALC:count(id)/count_distinct(id_lote_producao)' // Eficiência (km/L) 'value': 'CALC:sum(km_rodado)/sum(qtd_consumida)'

🎯 Filtros nas Operações

Todas as operações aceitam condições diretamente:

// COUNT com condição 'value': 'COUNT:id where dias_ate_validade IS NOT NULL' // SUM com condição 'value': 'SUM:kg where id_localizacao = 1' // CALC com múltiplas condições 'value': 'CALC:(count(id where cond1)/count(id where cond2))*100'

As condições usam a mesma sintaxe dos filtros.

📊 Exemplo Completo com Condições

{ 'title': '% COM VALIDADE', 'value': 'CALC:(count(id_cilindro where dias_ate_validade IS NOT NULL)/count(id_cilindro))*100', 'filters': 'ativo != "N"', 'format': 'numero', 'decimals': 1, 'suffix': '%' }

O que acontece:

  1. Filtro global: apenas ativos
  2. Primeiro COUNT: só quem tem validade
  3. Segundo COUNT: total de ativos
  4. Divide e multiplica por 100

📉 Tipos de Gráficos

📊 Gráfico de Barras (chart_bar_aggregated)

Layouts: vertical, horizontal, ranking, table

{ 'type': 'chart_bar_aggregated', 'config': { 'container_id': 'graf-produtos', 'data_config': { 'group_by': 'nome_produto', 'operation': 'SUM:valor' }, 'display_config': { 'title': '💰 Valor por Produto', 'layout': 'ranking', 'format': 'moeda', 'sort_order': 'DESC', 'limit': 10 } } }

🥧 Gráfico de Pizza (chart_pie)

Opções: donut, show_percentages, legend_position

{ 'type': 'chart_pie', 'config': { 'container_id': 'pie-distribuicao', 'data_config': { 'group_by': 'categoria', 'operation': 'SUM:valor' }, 'display_config': { 'title': '📊 Distribuição', 'donut': true, 'show_percentages': true } } }

📈 Gráfico de Linha (chart_line_evolution)

7 granularidades: diario, semanal, quinzenal, mensal, trimestral, semestral, anual

{ 'type': 'chart_line_evolution', 'config': { 'container_id': 'line-vendas', 'data_config': { 'campo_data': 'data_venda', 'operation': 'SUM:valor', 'granularidade': 'mensal' }, 'display_config': { 'title': '📈 Evolução de Vendas', 'show_points': true } } }

📊 Evolução (chart_bar_aggregated_evolution)

Barras temporais com mesma granularidade da linha

{ 'type': 'chart_bar_aggregated_evolution', 'config': { 'container_id': 'evolucao-cilindros', 'data_config': { 'campo_data': 'data_inclusao', 'operation': 'COUNT:id' } } }

🏆 Layout Ranking (Especial!)

Visualização em lista com barras de progresso:

1 Produto A R$ 1.234
2 Produto B R$ 987
3 Produto C R$ 567
{ 'display_config': { 'layout': 'ranking', // ← Mágica! 'sort_order': 'DESC', 'limit': 10 } }

Destaques automáticos:

  • 🥇 Ouro (posição 1)
  • 🥈 Prata (posição 2)
  • 🥉 Bronze (posição 3)

📅 Formatos de Data

📆 Formatos de Mês

mes_extenso Janeiro
mes_abreviado Jan
mes_numero 01
mes_abreviado_ano_2_digitos Jan/25
mes_abreviado_ano_4_digitos Jan/2025
mes_numero_ano_2_digitos 01/25
mes_numero_ano_4_digitos 01/2025

📅 Ano + Mês

ano_mes_numero 2025/01
ano_mes_abreviado 2025/Jan
ano_2_digitos 25
ano_4_digitos 2025

📅 Dia

dia_semana Segunda
dia_mes 15
data 15/03/2025
data_hora 15/03/2025 14:30

🆔 Formatos de Documentos

📄 Documentos

  • cnpj — 00.000.000/0000-00
  • cpf — 000.000.000-00
  • placa — ABC-1234
  • renavam — 0000000000-0
  • chassi — 9BRBLWHEXG0100001

📞 Contato

  • telefone — (83) 99999-9999

📏 Números

  • numero — 1.234
  • decimal — 1.234,56
  • moeda — R$ 1.234,56
  • porcentagem — 45,5%

🏭 Exemplo: Cilindros Lote Produção (PADRÃO OFICIAL)

📋 Estrutura de Blocos

// NOVO PADRÃO (recomendado!) 'sections': { 'bloco1_resumo_executivo': { 'type': 'summary_cards_full', 'title': 'RESUMO EXECUTIVO', 'cards': [ ... ] // KPIs principais }, 'bloco2_metricas_detalhadas': { 'type': 'summary_cards_grid', 'title': 'MÉTRICAS DETALHADAS', 'sections': [ ... ] // Cards agrupados }, 'bloco3_analise_lotes': { 'type': 'summary_cards_grid', 'title': 'ANÁLISE POR LOTE', 'sections': [ ... ] // Múltiplas análises } }

📊 Bloco 1 - Resumo Executivo

'cards': [ { 'title': 'TOTAL CILINDROS', 'value': 'COUNT:id', 'format': 'numero', 'suffix': ' unidades', 'icon': '🏭', 'color': '#3b82f6' }, { 'title': 'TOTAL KG', 'value': 'SUM:kg', 'filters': 'kg > 0', 'format': 'numero', 'suffix': ' kg', 'color': '#f97316' } ]

📈 Bloco 2 - Métricas Detalhadas

'sections': [ { 'title': 'DIVERSIDADE', 'cards': [ { 'title': 'TIPOS DE GÁS', 'value': 'COUNT_DISTINCT:nome_tipo', 'format': 'numero' } ] }, { 'title': 'MÉDIAS', 'cards': [ { 'title': 'KG MÉDIO', 'value': 'AVG:kg', 'filters': 'kg > 0', 'format': 'numero', 'decimals': 1, 'suffix': ' kg' } ] } ]

🔢 Bloco 3 - Análise de Lotes (com METRICA_AGRUPAMENTO)

📊 Estatísticas Gerais

{ 'title': 'TOTAL DE LOTES', 'group_by': 'id_lote_producao', 'value': 'METRICA_AGRUPAMENTO:total_grupos' }, { 'title': 'MÉDIA CIL/LOTE', 'group_by': 'id_lote_producao', 'value': 'METRICA_AGRUPAMENTO:media' }, { 'title': 'MAIOR LOTE', 'group_by': 'id_lote_producao', 'value': 'METRICA_AGRUPAMENTO:maior' }

📊 Distribuição

{ 'title': 'LOTES PEQUENOS (< 15)' , 'group_by': 'id_lote_producao', 'filters_aggregation': 'valor < 15', 'value': 'METRICA_AGRUPAMENTO:total_grupos' }, { 'title': 'LOTES MÉDIOS (15-29)', 'group_by': 'id_lote_producao', 'filters_aggregation': 'valor >= 15 and valor < 30', 'value': 'METRICA_AGRUPAMENTO:total_grupos' }

🥇 Top Produtos

{ 'title': 'PRODUTO MAIS PRODUZIDO', 'group_by': 'nome_tipo,nome_aplicacao,nome_capacidade', 'value': 'METRICA_AGRUPAMENTO:moda', 'format': 'texto', 'icon': '🥇' }, { 'title': 'SEGUNDO LUGAR', 'group_by': 'nome_tipo,nome_aplicacao,nome_capacidade', 'value': 'METRICA_AGRUPAMENTO:segundo', 'format': 'texto', 'icon': '🥈' }

🚗 Exemplo: Veículos Abastecimentos

⛽ Cards de Abastecimento

{ 'title': 'TOTAL ABASTECIMENTOS', 'value': 'COUNT:id_abastecimento', 'format': 'numero', 'suffix': ' registros' }, { 'title': 'VALOR ABASTECIDO', 'value': 'SUM:valor_abastecimento', 'format': 'moeda' }, { 'title': 'LITROS ABASTECIDOS', 'value': 'SUM:qtd_abastecida', 'suffix': ' L' }

🗺️ Cards de Trajeto

{ 'title': 'TRAJETOS INFORMADOS', 'value': 'COUNT:id_abastecimento', 'filters': 'tem_trajeto = "SIM"', 'icon': '✅', 'color': '#27ae60' }, { 'title': 'DISTÂNCIA TOTAL', 'value': 'SUM:trajeto_distancia_km', 'filters': 'tem_trajeto = "SIM"', 'suffix': ' km' }, { 'title': 'CUSTO POR KM', 'value': 'CALC:sum(trajeto_valor_consumo)/sum(trajeto_distancia_km)', 'filters': 'tem_trajeto = "SIM"', 'format': 'moeda', 'suffix': '/km' }

🔍 Filtros Avançados

📋 filters (nos dados originais)

// Valores positivos 'filters': 'valor > 0' // Faixa específica 'filters': 'km_por_litro BETWEEN 1 AND 50' // Múltiplas condições 'filters': 'status = "ativo" AND tipo = "venda"' // IN com lista 'filters': 'cidade IN ("João Pessoa", "Campina Grande")'

📊 filters_aggregation (nos resultados)

// Filtra grupos por tamanho 'filters_aggregation': 'valor < 15' // Faixa nos resultados 'filters_aggregation': 'valor >= 15 and valor < 30' // Múltiplas condições 'filters_aggregation': 'valor >= 15 and valor < 30'

🎯 Exemplo Combinado

{ 'title': 'VEÍCULOS ACIMA DA MÉDIA', 'group_by': 'placa_veiculo', 'value': 'CALC:sum(km_rodado)/sum(qtd_consumida)', 'filters': 'km_rodado > 0 AND qtd_consumida > 0', // Filtra dados 'filters_aggregation': 'valor > 10', // Filtra resultados (>10 km/L) 'format': 'numero', 'decimals': 2, 'suffix': ' km/L' }

🔄 Auto-Refresh

⚙️ Configuração

parameters['dashboard'] = { 'auto_refresh': true, // Habilita monitoramento 'refresh_interval': 5000 // 5 segundos (padrão) }

🎨 Indicador Visual

Auto-On 15:23:45 5s

🎯 API Pública

📊 Dashboard Principal

// Iniciar dashboard a partir de tabela getViewDashboard(event) // Iniciar dashboard a partir de IA getViewDashboardFromIA(parametersTable, metadados, containerId) // Obter referência do dashboard atual dashboard_getCurrentDashboard() // Atualizar dados dashboard_refreshData() // Voltar para visualização de tabela voltarParaDadosFromDashboard()

📄 Exportação

// Gerar PDF gerarPDFDashboard(config) // Fechar modal PDF fecharModalPDF(modalId)

📛 Padrão de Nomenclatura

🏷️ Blocos

  • bloco1_resumo_executivo
  • bloco2_metricas_detalhadas
  • bloco3_analise_lotes
  • bloco4_evolucao_temporal

📊 Gráficos

  • graf-produto-cil
  • graf-produto-kg
  • evolucao-cilindros
  • pie-distribuicao

📋 Containers

  • cards-resumo-executivo
  • cards-metricas-detalhadas
  • analise-produto-grid

🏆 Propriedade Intelectual - ONDEVOU®

®

Marca Registrada

ONDEVOU® — Propriedade Intelectual Assegurada

A marca ONDEVOU está devidamente registrada no Instituto Nacional da Propriedade Industrial (INPI), garantindo exclusividade e proteção legal para todos os produtos e serviços da plataforma.

📋 Dados do Registro

Processo nº: 908765967
Titular (Registro): FMSI - SOLUCOES EM INFORMATICA EIRELI - ME
Titular (Atual): ONDEVOU TECNOLOGIA LTDA
Nome Fantasia: FMSI INFORMATICA
CNPJ: 17.058.605/0001-36
Data de Depósito: 16/12/2014
Data da Concessão: 08/05/2018
Fim da Vigência: 08/05/2028 (renovável)

🎯 Classificação e Especificação

NCL(10): Classe 42

CFE(4):

10.3.10 10.3.11 10.3.12 10.3.15 10.3.25

📌 Especificação:

  • Sites de busca — fornecimento de mecanismos de busca na Internet
  • Informação em — sites de busca
  • Consultoria em — sites de busca
  • Assessoria em — sites de busca

📜 Certificado Oficial

REPÚBLICA FEDERATIVA DO BRASIL
Ministério da Indústria, Comércio Exterior e Serviços
Instituto Nacional da Propriedade Industrial

Certificado de registro de marca

Processo nº: 908765967

🏛️ Linha do Tempo da Propriedade Intelectual

📝 2014 Depósito
✅ 2018 Concessão
🚀 2026 OndeVou Dashboard
📆 2028 Renovação

10 anos de proteção legal • Renovação automática por períodos iguais • Marca eterna! 🏆

📌 Nota: A empresa evoluiu de FMSI - SOLUCOES EM INFORMATICA EIRELI - ME para ONDEVOU TECNOLOGIA LTDA, mantendo o mesmo CNPJ 17.058.605/0001-36 e nome fantasia FMSI INFORMATICA. A marca ONDEVOU® continua protegida sob o processo INPI 908765967.

📝 Histórico de Alterações

// ====================================================================== // CHANGELOG - ONDEVOU Dashboard // ====================================================================== 2026-03-14: 🚀 v2.0.0 - Documentação Completa • 📚 Criação do ondevou-dashboard.html - Documentação técnica completa • 🎯 Padrão oficial definido - Baseado no cilindros_lote_producao • 📊 11 métricas de agrupamento - total_grupos, soma, media, moda, segundo, terceiro... • 📈 4 tipos de gráfico - Barras, Pizza, Linha, Evolução • 🏆 Layout Ranking - Top 3 com ouro/prata/bronze • 📅 7 granularidades - diário a anual • 🔍 Filtros em cascata - filters + filters_aggregation • 🏆 Seção da marca adicionada - Dados INPI e empresa 2026-03-10: ✨ Melhorias no sistema de PDF • 📄 GerarPDFDashboard() - Modal com dashboard expandido • 🎴 Card interativo - Visualizar, Download, WhatsApp, Copiar Link 2026-03-05: 📊 Adicionado gráfico de múltiplas séries • 📈 chart_bar_aggregated - Suporte a series array • 🎨 Legenda com totais - show_totals na legenda 2026-03-01: 🧮 Sistema METRICA_AGRUPAMENTO • 🔢 Função dashboard_metrica_agrupamento() • 📊 11 métricas estatísticas • 🎯 Exemplos no bloco3_analise_lotes // ---------------------------------------------------------------------- // 📌 PRÓXIMOS PASSOS PLANEJADOS // ---------------------------------------------------------------------- ✅ CONCLUÍDO: Documentação completa do Dashboard ✅ CONCLUÍDO: Seção da marca ONDEVOU® (INPI) ⏳ EM ANDAMENTO: Gráfico de radar para análise multidimensional 📋 PLANEJADO: Dashboard builder visual (drag & drop)