Índice da vitrine

Início

Visão geral

Ações

Formulários

Navegação

Autenticação

Retorno

Retorno

Conteúdo

Dados e mídia

As quatro superfícies que trazem dependência: gráfico, mapa, carrossel e editor. Estão juntas de propósito, porque ver o peso reunido é o que torna a escolha visível.

Gráficos

ECharts em SVG, com as cores lidas dos tokens do tema e repintadas na virada. O resumo textual é obrigatório: o desenho fica aria-hidden, e para quem não o vê o resumo é a única coisa que existe.

Barras

Semana de 17 a 23 de agosto: 641 pedidos, com pico no sábado (144) e o domingo mais fraco (73). Use para comparar uma medida entre poucas categorias.

De março a agosto a receita vai de US$ 294 mil a US$ 396 mil, com pico em maio (US$ 435 mil, Dia das Mães); o app cresce mais, de 64 para 104. Empilhar mostra o total e a parte de cada canal ao mesmo tempo.

660 chamados: atraso na entrega lidera com 212, seguido de produto com defeito (143); cancelamento fecha com 38. Barras deitadas cabem rótulos longos e ordenadas viram ranking.

Linhas

Novos visitantes e recorrentes de março a agosto; os dois saltam em maio com a campanha do Dia das Mães (71,4 mil no total) e agosto fecha com 60,7 mil.

O estoque cai de 142 para 67 unidades até quinta, perto do mínimo de 60 (linha tracejada), e a reposição de sexta o leva a 180. Degraus mostram um valor que só muda em momentos definidos.

De 24/06 a 21/09 a latência oscila entre 150 e 240 ms, abaixo do SLO de 300 ms (linha tracejada), com um incidente em 20/08 que chega a 612 ms. Roda do mouse ou a barra de baixo aproximam o período.

Setores

2.780 pedidos: Pix 46% (1.279), cartão de crédito 38% (1.057), boleto 9% (250) e carteira digital 7% (194). Rosca para poucas partes de um todo.

Sudeste US$ 198 mil, Sul 84, Nordeste 57, Centro-Oeste 38 e Norte 19, somando US$ 396 mil. Na rosa o raio da fatia cresce com o valor, o que acentua a diferença entre as regiões.

Radar

Meta e realizado em cinco indicadores percentuais: o time supera a meta na resolução no 1º contato (81 contra 75) e em chamados sem reabertura (76 contra 70), e fica abaixo em resposta em até 1 h (72 contra 85) e SLA (69 contra 80).

Medidores

Ponteiro em 78% da meta do mês, com o mês ainda em andamento. Medidor para um único número contra uma escala conhecida.

Anel de progresso em 94%: dos pedidos de agosto, 94 em cada 100 chegaram dentro do prazo prometido.

Funil

Dos 4.800 leads captados em agosto, 1.920 foram qualificados pelo marketing (40%), 672 viraram oportunidade de venda (35%), 302 receberam proposta (45%) e 121 fecharam contrato (40%): 2,5% dos leads viram cliente. A maior perda é na passagem de MQL para SQL.

4.800 leads ativos: 2.640 frios na base, 1.380 mornos, 610 quentes e 170 prontos para venda no topo. A pirâmide é o funil em ordem crescente: a massa fria embaixo, os poucos que o comercial deve ligar hoje em cima.

Dispersão

Doze campanhas do ano: quanto maior o desconto, maior o aumento nas vendas, até cerca de 25%; acima disso o ganho para em torno de 23%. Dispersão para ver a relação entre duas medidas.

Sete produtos por preço e nota média, com o tamanho da bolha nas vendas de agosto: as cápsulas vendem mais (940) com nota 4,1, o kit presente tem a melhor nota (4,8) e vende 95, e a caneca térmica tem a pior (3,9).

Mapa de calor

A mesma semana das barras, aberta por turno: a noite concentra os pedidos e o sábado à noite é o pico (62); as manhãs de terça e quinta são as mais fracas (12).

Mais de 20 mil leituras (uma a cada meio metro num galpão de 100 × 50 m), de −90 a −30 dBm, desenhadas aos poucos para não travar a página: as manchas frias são zonas sem cobertura. Dados simulados, novos a cada visita.

Hierarquia e fluxo

Área proporcional à receita: cafés US$ 214 mil (especiais 118, tradicionais 58, cápsulas 38), equipamentos 96, assinaturas 64 e presentes 22.

1.310 sessões de um dia: Google traz 600, a página de produto recebe 1.130 e manda 390 ao carrinho; do carrinho, 170 compram e 220 abandonam. A espessura de cada faixa é o volume que passa por ela.

O catálogo da loja em quatro ramos (cafés, equipamentos, assinaturas e presentes) e suas subcategorias, aberto da esquerda para a direita; clique num nó para recolher.

Estatística

Dez pregões de 01/09 a 15/09 com abertura, fechamento, mínima e máxima: a saca sobe de US$ 2.180 para US$ 2.318, e a maior queda do dia é em 04/09 (de 2.231 para 2.190).

Mínimo, quartis, mediana e máximo por região: o Sudeste entrega em 3 dias na mediana, e o Norte em 8, com a maior dispersão (de 4 a 16 dias).

Relacionais

Cada nó é um produto, do tamanho das suas vendas, e cada ligação é quantos pedidos levaram os dois: Café 500 g é o centro, e o par mais forte é com filtro de papel (164 pedidos). Rótulos que se sobrepõem são escondidos.

Três fornecedores em quatro critérios: Caparaó tem a melhor nota (88) com o maior preço (US$ 96/kg) e prazo (12 dias); Cerrado é o mais barato e rápido, com a menor nota e o maior pedido mínimo.

Redes e matrizes

Grafo de força com 492 módulos do WebKit e 806 dependências, em cinco categorias (HTMLElement, WebGL, SVG, CSS e outros). Roda do mouse aproxima, arrastar move; o mapa no canto mostra a região visível.

Matriz 16×16 de compatibilidade entre tipos MBTI, agrupados nos quatro temperamentos (NF, NT, SJ, SP). A opacidade da célula e o percentual indicam o grau; a diagonal e os pares dentro do mesmo temperamento tendem aos valores mais altos.

3D

Uma fotografia transformada em superfície 3D com ECharts GL: cada pixel vira um ponto, com a altura dada pelo quão escuro ele é e a cor original, e o retrato surge em relevo. Arraste para girar e use a roda para aproximar.

Os pedidos de cada hora de cada dia em barras 3D translúcidas, coloridas pela contagem de 0 a 20: o pico fica no meio da tarde, de quarta a sexta. Arraste para girar.

Expectativa de vida de 19 países de 1800 a 2015, em barras 3D lidas direto de um dataset: a altura é a expectativa de vida e a cor, a população. As barras sobem em todos os países ao longo do século XX.

Uma grade de 21×21×21 sensores a cada meio metro numa câmara de 10 m, de 2 a 6 °C: tamanho, cor e opacidade seguem a temperatura, e os bolsões quentes aparecem como nuvens. Dados simulados, novos a cada visita.

Um levantamento de 51×51 pontos a cada 10 m, em barras 3D iluminadas com sombra: a altura é o desnível sobre o ponto mais baixo, de 100 a 300 m, colorido do frio ao quente. Dados simulados, novos a cada visita.

Superfície gerada por equação, z = sen(πx)·sen(πy): o deslocamento de uma placa de 2 m vibrando, com picos e vales alternados e um furo de fixação no centro. Arraste para girar.

Projeto

Cinco etapas entre fevereiro e abril, da pesquisa à pré-venda; receitas e testes é a mais longa, com seis semanas, e se sobrepõe às fotos e ao site.

Os turnos de torra de três pessoas, cada uma com blocos separados na mesma linha; Bruno tem três períodos.

QR e código de barras

Dois jeitos de levar um dado da tela para outro aparelho. O QR carrega texto qualquer (endereço, telefone, token); o código de barras é o do balcão, e cada padrão aceita um formato de valor.

<echo-qr-code>

Endereço desta página

https://template.echosistema.online/pt-BR/componentes/dados

Telefone

tel:+555431234567

Token do pedido

ECHO-7F3A-2K9D-4M1P

Aponte a câmera: o QR do endereço abre esta mesma página.

<echo-barcode>

SKU (CODE128)

EAN-13

Mapa

Leaflet com a camada do OpenStreetMap. A atribuição não é decoração: é exigência da licença dos dados. Os controles e o balão seguem o tema.

<echo-map> · OpenStreetMap

Mapa da tríplice fronteira, com marcadores em Foz do Iguaçu e Ciudad del Este.

<echo-map-google> · Google Maps

Mapa do Google centrado em Ciudad del Este, com os mesmos três marcadores do mapa ao lado.

Qual dos dois

O OpenStreetMap não custa nada, não pede conta e vem no pacote - é o padrão do template. O Google carrega os endereços e os nomes de lugar que um cliente reconhece, cobra por uso e pede chave. Um site derivado escolhe pela pergunta que a página faz, não pela aparência.

Os dois no tema

O Google não se veste por CSS: a paleta dele é um JSON, e o nosso é construído a partir dos tokens em tempo de execução - trocar de tema ou de paleta repinta o mapa. As telhas do OpenStreetMap são imagens prontas num jogo claro só, então no tema escuro elas passam por um filtro (inverter, girar o matiz de volta, baixar o contraste) aplicado apenas ao painel de telhas, para não inverter marcadores e popups.

Carrossel

Swiper com setas, paginação e laço. O autoplay para no hover e é desligado por completo para quem pediu menos movimento, porque um carrossel que anda sozinho é o caso clássico dessa preferência.

Tokens de marca

Tema claro e escuro

Três idiomas

Componentes nativos

Editor de texto rico

TipTap. O que o separa de um contenteditable cru é a colagem: texto vindo de outro editor traz marcação suja, e o TipTap a filtra contra um esquema. O conteúdo herda a tipografia do sistema pela classe es-prose.

HTML gerado

<h2>Escreva aqui</h2><p>O conteúdo herda a tipografia do sistema pela classe <code>.es-prose</code>.</p>

Para agentes de IA

Especificação desta página

Um arquivo Markdown com as tags, props, eventos e trechos desta família, copiáveis ipsis litteris, mais as regras que valem antes de qualquer linha. Entregue-o ao agente junto com a tarefa.

Baixar: Dados e mídia Baixar o guia completo Ler no navegador

/agents/data-media.md