O que você recebe
- Um dashboard de KPIs completo em um único arquivo HTML, com visões de 7, 30 e 90 dias
- Um script que transforma exportações em CSV ou JSON nos dados do dashboard
- Um bloco React com recharts, além de uma versão do gráfico em ECharts
- Indicadores de variação, linhas do período anterior, tabela de detalhes e barras de meta
- Arte de cabeçalho do relatório do PopNow, opcional, cotada antes de rodar
Ideal para
- KPIs de produto, loja, suporte ou crescimento
- Páginas de relatório semanal e mensal de KPIs
- A tela de visão geral de uma ferramenta interna
Não é para
- Apps de administração completos com muitas telas
- Dados em tempo real por streaming
- Comparar muitas séries num mesmo gráfico
Como usar
No Claude ou no ChatGPT
Use a skill da PopNow “Modelo de dashboard de KPIs” (kpi-dashboard-template) para isto: Monte um dashboard de KPIs a partir de exports/orders.csv: pedidos, receita, visitantes e tempo da primeira resposta, detalhados por canal.
Em um agente de programação
/popnow-kpi-dashboard-template Monte um dashboard de KPIs a partir de exports/orders.csv: pedidos, receita, visitantes e tempo da primeira resposta, detalhados por canal.
Depois tente
Adicione uma meta de receita de 150.000 por mês e deixe os últimos 7 dias como padrão.
Me dê a versão em React para o nosso painel admin em Next.js.
O que ter em mãos
- Uma exportação em CSV ou JSON, ou o comando que a gera
- As quatro métricas e quais são melhores quando diminuem
- Opcional: metas e uma coluna para detalhar uma métrica
Skills parecidas
Ver todas →Criador de avatar 3D
+3Monte um personagem 3D fofo de pelúcia no navegador e salve como PNG transparente ou página 3D.
Calendário heatmap
+3Um ano de atividade diária em uma grade de calendário sombreada, com sequências, totais e navegação por teclado.
Landing page de SaaS com IA
+3Papel areia, trilhos finos e um quadro kanban ao vivo em que um assistente planeja tarefas.
Seção hero animada
+3Um hero de landing page com uma palavra do título que gira suavemente, dois botões e um quadro largo de imagem.
Site de agência com hero em shader
+3Hero de shader laranja ao vivo atrás de uma frase fixada, navegação em pílula e uma grade de cases.
Landing page SaaS escura
+3Um site de marketing escuro e cheio de movimento para um produto de software, entregue em um único arquivo HTML.
Site de portfólio de designer
+3Seis cartões inclinados em volta de um título sobre cinza calmo, um retrato em vermelho e cases editoriais.
Site de portfólio para desenvolvedor
+3Um site pessoal escuro para engenheiros, com cases, artigos, palestras, currículo e formulário de contato.
Site editorial de SaaS
+3Hero dividido em azul-marinho, título serifado ao lado de uma foto documental e um destaque azul-cobalto.
Modelo de site glassmorphism
+3Pílulas de vidro fosco sobre película quase preta, título serifado enorme e captura de e-mail.
Site de produto de hardware
+3Nomes de modelo enormes e finos sobre fotos prateadas, cartões de especificação e linha em escala.
Diagrama de arquitetura interativo
+3Um diagrama de sistema offline e clicável, feito a partir de um modelo JSON verificado, com a evidência por trás de cada caixa.
Hero interativo com grade
+3Uma grade escura de fios finos que se curva em direção ao cursor e lança um anel luminoso a cada clique.
Explorador de grafo de conhecimento
+3Transforme anotações de projeto em um grafo offline e pesquisável, em que cada afirmação leva à linha de origem.
Landing page a partir de mockups com IA
+3Veja três páginas completas antes, escolha uma, e o seu agente a constrói como código limpo e responsivo.
Template de site de revista
+3Um site de revista com qualidade de impresso, com artigos, temas, uma pequena loja e assinaturas, em um arquivo HTML.
Hero com animação de partículas
+3Texto em papel quente ao lado de uma esfera girando de pontos em tinta e azul-petróleo, que muda a cada ideia.
Site de marca pessoal
+3Um retrato esfumado sobre papel quente, sob um colchete fino, com afirmações claras e fortes de cada lado.
Página de lançamento de produto cinematográfica
+3Página quase preta com luz de cinema: título em serifa, cena noturna em letterbox e formulário de reserva.
Template de painel administrativo
+3Um painel de back-office funcional com gráficos, tabelas, kanban e calendário, em um único arquivo HTML offline.
Template de landing page SaaS
+3Um site de marketing claro e tranquilo para um produto de software, com console de produto funcional, preços e cadastro.
Site de portfólio estilo scrapbook
+3Um currículo online de várias páginas feito de objetos de papel, com cases e um currículo para imprimir.
Template de site de loja de tênis
+3Uma loja completa de calçados ou roupas, com catálogo, páginas de produto, sacola e checkout de demonstração em um arquivo HTML.
Landing page de automação de fluxos
+3Página grafite com título pequeno e um grafo de nós ao vivo que roda, tenta de novo e mostra logs.
Perguntas
De onde vêm os números?
Da sua própria exportação. O script incluso lê CSV ou JSON, com totais diários ou eventos brutos, e monta uma linha por dia para cada métrica, além de um detalhamento opcional, e grava isso na página.
Como o percentual de variação é calculado?
Os últimos 7, 30 ou 90 dias são comparados com o mesmo número de dias anteriores. Totais comparam somas, tempos e taxas comparam médias, e níveis como usuários ativos comparam o último valor. Uma métrica marcada como 'menor é melhor' mostra queda como algo bom.
Precisa de uma biblioteca de gráficos?
A versão HTML não precisa de nada e funciona offline. A versão React usa recharts, e há uma versão do gráfico em ECharts para projetos que já a usam.
O PopNow pode desenhar os gráficos?
Não, e não deve: modelos de imagem podem errar números. O PopNow só entra com um fundo opcional de cabeçalho ou de cartão de compartilhamento sem texto, e os números reais ficam por cima, em HTML.