Índice da vitrine

Ações

Formulários

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

Visitas por dia da semana: pico na sexta com 270 e vale na quinta com 80.

Origem do tráfego por mês; a soma cresce de janeiro a junho, com o app subindo mais.

Assuntos por interesse: UI lidera com 35 e SEO fecha com 9.

Linhas

Sessões e conversões de janeiro a junho; ambas sobem, com salto em maio.

Valor que muda em patamares, sem transição entre eles.

Quarenta dias com zoom por roda e por barra; a curva oscila em torno de uma tendência de alta.

Setores

Participação por tecnologia: Nuxt 1.048, Tailwind 735, TypeScript 580 e outros 300.

Seis fatias com raio proporcional ao valor, de 40 a 15.

Radar

Meta e realizado em cinco eixos; o realizado supera a meta em suporte e marketing.

Medidores

Ponteiro em 78 de 100.

Anel de progresso em 85 por cento, sem ponteiro.

Funil

Conversão em cinco etapas: de 100 visitas a 18 compras.

O mesmo funil invertido, do alcance de 100 aos 18 assinantes.

Dispersão

Onze pontos entre 4 e 14 no eixo x e 4 e 11 no y, com correlação positiva fraca.

O mesmo scatter com uma terceira dimensão no tamanho: a maior bolha vale 400.

Mapa de calor

Intensidade por dia e turno; os valores vão de 0 a 10.

Hierarquia e fluxo

Área proporcional: 42 ícones, 41 componentes divididos em quatro grupos, e 11 páginas.

Fluxo de origem até cadastro; a home concentra 65 e envia 35 adiante.

Estrutura de pastas do template, da raiz às folhas, aberta da esquerda para a direita.

Estatística

Oito períodos com abertura, fechamento, mínima e máxima; a maior queda é no quarto.

Quatro grupos com mínimo, quartis, mediana e máximo; D tem a maior dispersão.

Relacionais

Seis nós ligados por dependência; o template é o mais central. Rótulos que se sobrepõem são escondidos.

Quatro medidas antes e depois; depois tem menos peso e menos erro, com mais acessos.

Projeto

Cinco etapas do projeto entre fevereiro e abril; componentes é a mais longa, com seis semanas.

Agenda 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.

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

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>