> ## Documentation Index > Fetch the complete documentation index at: https://docs.morada.ai/llms.txt > Use this file to discover all available pages before exploring further. # Monte um relatório que você pode explorar > Transforme números em uma página com resumo, comparação e filtros para conduzir uma conversa com os dados à vista. export const reportArtifact = { filename: "relatorio-interativo-vendas-ficticias.html", sha256: "12ba0d79c042e825a74f8eb35a4662be53e23130e1c153f4870f91413a6c163f", html: ["\n\n\n \n \n Relatório interativo de vendas — dados fictícios\n \n\n\n
\n
\n
\n

Reunião de vendas

\n

Desempenho comercial por região

\n

Visão comparativa de janeiro e fevereiro, com atualização conjunta dos indicadores, gráfico e tabela.

\n
\n
Dados fictícios
\n
\n\n
\n
\n Filtrar período\n Selecione uma opção para atualizar todo o relatório.\n
\n
\n \n \n \n
\n
\n\n
\n
\n

Total de vendas

\n

45

\n

Unidade: vendas

\n
\n
\n

Período

\n

Janeiro + fevereiro

\n

Recorte selecionado

\n
\n
\n

Regiões

\n

3

\n

Norte, Sul e Centro

\n
\n
\n\n
\n
↗
\n
\n

Resumo

\n

Nos dois meses, foram 45 vendas: Norte somou 18, Centro 16 e Sul 11.

\n
\n
\n\n
\n
\n
\n
\n

Comparação entre regiões

\n

Total de vendas por região no período selecionado.

\n
\n Janeiro + fevereiro\n
\n\n
\n
\n Norte\n
\n 18\n
\n
\n Centro\n
\n 16\n
\n
\n Sul\n
\n 11\n
\n
\n
\n \n
0591418
\n \n
\n

Unidade do gráfico: vendas. Valores agregados quando “Os dois” está selecionado.

\n
\n\n
\n
\n
\n

Dados do relatório

\n

Janeiro e fevereiro · unidade: vendas

\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PeríodoRegiãoVendas
JaneiroNorte8
JaneiroSul5
JaneiroCentro7
FevereiroNorte10
FevereiroSul6
FevereiroCentro9
Total do período45
\n
\n
\n
\n\n \n
\n\n \n\n\n"].join("") }; export const GeneratedArtifact = ({example, source, language = "pt"}) => { const [artifact, setArtifact] = useState(null); const [expanded, setExpanded] = useState(false); const [canExpand, setCanExpand] = useState(false); const [expandFailed, setExpandFailed] = useState(false); const id = `generated-artifact-${example}`; const labels = language === "en" ? { loading: "Opening the generated example…", expand: "Enlarge example", restore: "Exit full screen", download: "Download original file", title: "Complete generated example", expandError: "Full screen is unavailable in this browser. You can still explore the example below or download it.", note: "Complete file generated in a Morada OS test conversation with fictional data. Scroll inside the example to explore the whole page." } : { loading: "Abrindo o exemplo gerado…", expand: "Ampliar exemplo", restore: "Sair da tela cheia", download: "Baixar arquivo original", title: "Exemplo completo gerado", expandError: "Não foi possível ampliar neste navegador. Você pode explorar o exemplo abaixo ou baixar o arquivo.", note: "Arquivo completo gerado em uma conversa de teste do Morada OS, com dados fictícios. Role dentro do exemplo para explorar a página inteira." }; useEffect(() => { setExpandFailed(false); const escapes = { "&": "&", '"': """, "<": "<", ">": ">" }; const html = source.html.replace(/[&"<>]/g, character => escapes[character]); const policy = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; connect-src 'none'; base-uri 'none'; form-action 'none'; frame-src 'none'; worker-src 'none'; webrtc 'block'"; const srcDoc = ``; setArtifact({ filename: source.filename, html: source.html, srcDoc }); }, [source.html, source.filename, language]); useEffect(() => { setCanExpand(Boolean(document.fullscreenEnabled)); const changed = () => setExpanded(document.fullscreenElement?.id === id); document.addEventListener("fullscreenchange", changed); return () => document.removeEventListener("fullscreenchange", changed); }, [id]); const download = () => { if (!artifact) return; const url = URL.createObjectURL(new Blob([artifact.html], { type: "text/html;charset=utf-8" })); const anchor = document.createElement("a"); anchor.href = url; anchor.download = artifact.filename; document.body.appendChild(anchor); anchor.click(); anchor.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); }; const enlarge = () => { setExpandFailed(false); const action = expanded ? document.exitFullscreen() : document.getElementById(id)?.requestFullscreen(); action?.catch(() => setExpandFailed(true)); }; const css = ` .mo-artifact { --artifact-bg:#f8fafc; --artifact-ink:#1e293b; --artifact-line:#cbd5e1; --artifact-hover:#e2e8f0; margin:24px 0; border:1px solid var(--artifact-line); border-radius:16px; overflow:hidden; background:var(--artifact-bg); color:var(--artifact-ink); } .dark .mo-artifact { --artifact-bg:#18212e; --artifact-ink:#f1f5f9; --artifact-line:#475569; --artifact-hover:#334155; } .mo-artifact:fullscreen { width:100vw; height:100dvh; border:0; border-radius:0; margin:0; display:flex; flex-direction:column; } .mo-artifact .artifact-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:12px; border-bottom:1px solid var(--artifact-line); flex-shrink:0; } .mo-artifact .artifact-name { flex:1 1 180px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; } .mo-artifact button { min-height:44px; padding:8px 12px; border:1px solid var(--artifact-line); border-radius:8px; color:var(--artifact-ink); background:transparent; cursor:pointer; font:inherit; font-size:12px; } .mo-artifact button:hover { background:var(--artifact-hover); } .mo-artifact button:active { box-shadow:inset 0 0 0 2px var(--artifact-ink); } .mo-artifact button:focus-visible { outline:3px solid #2683eb; outline-offset:2px; } .mo-artifact button:disabled { cursor:default; opacity:.5; } .mo-artifact > iframe { display:block; width:100%; height:720px; border:0; background:white; } .mo-artifact:fullscreen > iframe { flex:1; min-height:0; height:100%; } .mo-artifact .artifact-status { padding:24px; font-size:14px; } .mo-artifact .artifact-note { margin:0; padding:12px; font-size:12px; line-height:1.6; color:var(--artifact-ink); border-top:1px solid var(--artifact-line); } .mo-artifact:fullscreen .artifact-note { display:none; } @media(max-width:600px) { .mo-artifact > iframe { height:640px; } .mo-artifact .artifact-name { flex-basis:100%; } } `; return
{artifact?.filename || labels.title} {canExpand && }
{artifact ?