Visualizar

Uma página exibida inline fica ao lado de uma resposta, no tema do leitor, e é lida em poucos segundos. Ela justifica seu lugar apenas por ser mais clara que o parágrafo que substitui. Essa habilidade é dona do que é particular a tal página. O trabalho de dados pertence a data-scientist e o trabalho de design a frontend: carregue essas habilidades para suas partes em vez de improvisá-las aqui.

O loop

Faça isso em ordem. Nunca mostre uma página que você não tenha olhado.

1. Dados: carregue data-scientist. Calcule cada figura com seus motores (DuckDB ou Polars), no nível de detalhe que o leitor precisa, e siga sua references/visualization.md para qual gráfico responde a qual pergunta. Mantenha a consulta: cada número na página deve rastreá-la.
2. Design: carregue frontend. Use-o para hierarquia, tipo, espaçamento e estados. As restrições desta página substituem seu sistema de design: a página não traz paleta ou fontes próprias e usa o tema que o host injeta (abaixo).
3. Construa uma página autocontida sob as restrições abaixo.
4. Visualize e olhe. Renderize com html_preview no modo escuro e claro, na largura da resposta e em 390 px. Leia a captura de tela e o console, corrija o que você vê e visualize novamente. Onde html_preview não for oferecido, abra o arquivo da página em um navegador através da habilidade browser e capture as mesmas quatro visualizações.
5. Mostre-a com show_html_page (OmO) ou html_render (outros hosts), com a altura que a visualização mediu. Em seguida, escreva apenas o que a página já não diz.

Restrições de uma página inline

• Sem rede. Inline todos os scripts, estilos, fontes e imagens (URIs data:); o sandbox bloqueia todas as requisições, então uma biblioteca CDN deixa um gráfico em branco. Desenhe com SVG escrito à mão quando uma biblioteca não puder ser inline.
• Tema do host. Colora apenas através das propriedades personalizadas injetadas: --background, --foreground, --muted, --muted-foreground, --card, --border, --primary, --accent, --destructive, --warning, --success, as cores da série --chart-1 a --chart-6, e --font-sans, --font-mono, --radius. Elas funcionam em ambos os temas e mudam ao vivo; uma cor literal não faz nem uma coisa nem outra. Uma página aberta fora do aplicativo recebe apenas algumas delas, então dê a cada uma um fallback para ambos os temas: var(--chart-2, light-dark(#0d9488, #2dd4bf)).
• Parte da resposta, não um cartão. Largura fluida, sem preenchimento externo, borda ou banner. Dê aos gráficos alturas fixas em pixels, não alturas que escalam com a largura. Um SVG fluido esticado com preserveAspectRatio="none" estica seu texto também, então coloque os rótulos dos eixos em HTML ao lado dele, posicionados por porcentagem.
• Legível sem scripts. Na web, uma página renderiza primeiro com scripts desativados, até que o leitor pressione "Executar página". Coloque a figura em si em marcação ou SVG, e use scripts apenas para interação.
• Rastreável. Mostre como os números foram computados em um bloco pequeno e discreto "Como isso foi computado" (a consulta ou agregação), e declare ressalvas perto da figura quando elas mudarem a forma como um número é lido: linhas descartadas, uma janela parcial, uma amostra pequena.
• Estados vazio e de erro projetados. Sem dados, ou uma consulta falha, é declarado na mesma linguagem visual, nunca como um quadro em branco.
• Links. Um link abre apenas depois que o leitor o confirma no aplicativo, que mostra seu endereço completo. Mantenha os dados fora dos endereços de link.

Antes de mostrá-la

• O título declara a descoberta, não o nome do conjunto de dados.
• Os rótulos dos eixos carregam unidades, os números usam algarismos tabulares e uma precisão sensata, e nada é cortado em 390 px.
• As cores da série se separam em ambos os temas, e o console está limpo.