Calculadora de projeção

Duas colunas. À esquerda, três faixas — patrimônio inicial, aporte mensal, horizonte — mais um chip de cenário e três leituras em número. À direita, um gráfico de área em SVG que se redesenha a cada ajuste: uma faixa entre dois cenários simulados, com a linha do ponto médio por dentro. Sem lib: a conta é juro composto mensal, o caminho é uma string d montada à mão e a contagem é requestAnimationFrame por tempo.

O problema editorial é o de sempre numa página de assessoria: quem chega quer saber "e no meu caso?" e a página só sabe falar de si. A ferramenta devolve a pergunta em forma de desenho e termina entregando a pessoa a uma conversa, não a um cadastro. A decisão que define a peça é a faixa. Uma linha única diria "seu dinheiro vai chegar aqui" — afirmação que a peça não pode fazer, nem tecnicamente nem legalmente. A faixa diz "o resultado mora nesta região, e a região é larga", e o chip de cenário não muda promessa nenhuma: muda a largura da região.

Quando usar

• Meio de página, depois da prova e antes do formulário. É a dobra que converte curiosidade em conversa: a pessoa mexe, entende a ordem de grandeza do próprio caso e chega ao conversao/cta-formulario-lead já com uma pergunta formada.
• Quando o argumento da casa é horizonte — "o plano acompanha a vida" —, e não produto: mover a faixa de anos e ver a área se abrir é o argumento, desenhado. Em campanha de captação isso basta para uma landing curta: cabeçalho, esta seção e um formulário.

Quando não usar

• Quando o cliente não tem premissas próprias, datadas e aprovadas. Os parâmetros de exemplo do script.js não são publicáveis. Sem premissas do cliente, a peça não entra no ar — veja ## Compliance.
• Quando o assunto é custo, não crescimento: comparar dois modelos de remuneração é o dados/comparador-cenarios, que resolve isso em duas faixas empilhadas sem projetar nada no futuro.
• Quando a pergunta é qualitativa ("qual perfil combina comigo") — aí o caminho é um assistente de passos, não três controles contínuos. E nunca acima da dobra: a peça pede intenção, e um gráfico parado num hero é decoração cara.
• Quando o número final é o argumento e ninguém vai mexer em nada. Aí é a prova/stats-contador-regua, que custa um décimo disto.

Padrão editorial

Especificação dos assets

Nenhum. Sem imagem, sem ícone de terceiro, sem fonte extra: o desenho é <path> e <text> num <svg> inline, com as cores saindo de --accent, --fg e --rule. O único "asset" da peça é a tabela de parâmetros no topo do script.js — e ela é conteúdo do cliente, não da biblioteca.

Compliance

Esta é a seção mais importante da ficha. Uma ferramenta que devolve número num site de assessoria pisa em terreno regulado.

O que o consumidor TEM de trocar antes de publicar:

1. A tabela CENARIOS do script.js. As taxas de exemplo (3–6%, 4–9%, 5–13% ao ano) são números escolhidos para dimensionar o gráfico. Substitua por premissas próprias, datadas, e ponha a data visível junto da ressalva.
2. O texto do .proj-nota, e a peça inteira, pela área de compliance do cliente. O modelo entregue atende ao piso; a redação final é dele — e a revisão inclui os rótulos, não só a ressalva.

O que a peça já garante e não deve ser desfeito:

• A faixa, e a largura dela. Aproximar piso e teto transforma a faixa em linha, e linha lê como promessa. Faixa é a ressalva desenhada.
• O vocabulário. Em nenhum lugar aparece "rentabilidade esperada", "você teria" ou "renderia". Os rótulos falam de cenário simulado e de intervalo; a linha do meio é "ponto médio do intervalo", nunca "resultado esperado".
• A ressalva ao lado do gráfico, não no rodapé da página. Quem lê o número lê a ressalva no mesmo movimento de olho. O CSS documenta isso; não mova o bloco.
• Os <!-- CONTEÚDO ILUSTRATIVO --> no markup e no script, em cada bloco que carrega número ou taxa de exemplo.
• Zero dado pessoal. A peça não coleta nome, e-mail nem telefone, e não grava nada — nem localStorage, nem cookie, nem requisição. Os valores vivem em memória e morrem no recarregamento, por dois motivos: são dados financeiros de alguém, e a captura é trabalho do conversao/cta-formulario-lead, para onde o botão aponta.

Como usar

<link rel="stylesheet" href="core/tokens.css">
<link rel="stylesheet" href="core/temas/<projeto>.css">
<link rel="stylesheet" href="core/base.css">
<link rel="stylesheet" href="core/motion.css">
<link rel="stylesheet" href="componentes/conversao/calculadora-projecao/estilo.css">
<script src="core/motion.js"></script>
<script src="componentes/conversao/calculadora-projecao/script.js"></script>

Ganchos

Variações

Gotchas

• O SVG escrito no markup e o que o script produz TÊM de bater, e nada verifica isso por você. O d dos dois caminhos, o cy do ponto, o y dos dois rótulos do fim, o texto do teto do eixo, as quatro marcas, as três leituras e o --proj-fill inline: tudo é o estado que o script geraria para value="2500000", value="15000", value="15" e cenário equilibrado. Mudou um value, um min, um max, a geometria (PY0/PY1) ou a tabela CENARIOS? Regere. A receita: abra o preview.html, cole no console var r=document.querySelector('[data-proj]');['band','line'].map(k=>r.querySelector('[data-proj-'+k+']').getAttribute('d')) e leve os dois de volta ao markup — mais o cy, os y e os textos. Medido: com os dois em dia, a página sem JS mostra exatamente o mesmo desenho da página com JS.

• Sem JS a faixa continua arrastando e a leitura não acompanha. É o preço de manter os controles vivos (a alternativa seria entregá-los disabled e deixar o script habilitá-los — progressive enhancement clássico). Escolhemos o controle vivo porque o desenho e os números do markup são verdadeiros no carregamento e a divergência só existe se a pessoa arrastar. Se o seu público tem JS desligado a sério, inverta: disabled no markup, removeAttribute('disabled') na primeira linha do iniciar().

• input, nunca change. Num <input type="range">, change só dispara quando a pessoa solta o ponteiro. A peça inteira existe para responder durante o arrasto; com change ela viraria um formulário que responde depois.

• O listener não calcula: marca e acorda. Um input durante o arrasto chega dezenas de vezes por segundo, e o Chrome coalesce em um por quadro. Calcular dentro do listener seria fazer a conta N vezes para pintar uma. Medido no pior caso (horizonte 30, cenário arrojado, 31 pontos × 3 séries = 93 chamadas de futuro() por redesenho): 60 quadros seguidos de recálculo levaram 254 ms de ponta a ponta, 4,2 ms por quadro com o dispatch do evento e o rAF incluídos.

• aria-valuetext no range E aria-live no <output> dizem a mesma coisa, de propósito. Sem o valuetext, o leitor de tela anuncia "2500000" a cada seta; sem o aria-live, quem arrasta com o ponteiro e usa ampliação não recebe o valor formatado. Em alguns leitores isso vira anúncio duplicado. Se a auditoria do cliente reclamar, tire o aria-live do <output> — não o aria-valuetext. As três leituras de baixo não são live de propósito: quatro regiões vivas numa dobra são ruído, não acessibilidade.

• O SVG é aria-hidden="true" e isso não é descuido. O dado verdadeiro está nas três leituras em texto, ao lado. Quem usa leitor de tela recebe os números; anunciar "gráfico" não ajudaria ninguém. Corolário: nunca ponha no SVG uma informação que não exista em texto no DOM.

• O teto do eixo sobe em degraus, e o rótulo do topo existe para explicar o degrau. Sem teto redondo, o topo do desenho gruda no valor máximo e mover um controle vira mudança de escala, não de tamanho — a área nunca parece crescer. A escada tem 11 degraus por década (1 · 1,2 · 1,5 · 2 · 2,5 · 3 · 4 · 5 · 6 · 8 · 10) e não os quatro clássicos: com a escada grossa, o máximo caía em 73% da altura no estado inicial e sobrava um terço de caixa vazia. Com esta, o máximo fica sempre entre 83% e 100% do teto.

• Os extremos dos controles têm de caber na formatação. 30 milhões de inicial, 200 mil de aporte, 30 anos e cenário arrojado dão R$ 1,9 bi — sem o degrau "bi" a tela mostraria "R$ 1919 mi". Se você mexer nos max, refaça essa conta antes de publicar.

• Horizonte curto repete marca no eixo, e a resolução do traçado tem piso. Com 1 ano as quatro marcas caem em 0, 0, 1, 1; o script apaga as duplicadas — medido: 1 ano → ["0","","","1 ano"], 2 anos → ["0","1","","2 anos"], 3 anos → ["0","1","2","3 anos"]. Pela mesma razão a amostragem é max(anos, 16) passos por borda: um ponto por ano daria uma reta em 1 ano, e a curvatura do juro composto é o assunto. No teto são 31 pontos — o d da linha vai de 171 a 352 caracteres, o da faixa de 345 a 702.

• O tracejado da entrada tem de sair depois que a linha termina de desenhar. stroke-dasharray é fixado em getTotalLength() no carregamento; se ficasse, um caminho novo mais longo que aquele comprimento apareceria cortado. O script limpa o atributo 120 ms depois do fim — e limpa na hora se a pessoa mexer antes disso. Sem essa segunda saída, no mobile (colunas empilhadas, controles acima do gráfico) daria para arrastar uma faixa com o desenho ainda escondido, respondendo a um ajuste que ninguém vê.

• var sobe, valor não. A tabela de degraus do eixo mora no bloco de constantes do topo, e não junto da função que a usa: o laço que instancia os componentes roda antes da metade do arquivo, e daquela posição ela chegava undefined — pageerror limpo de sintoma, componente inteiro morto.

• O botão é irmão do painel, não filho dele. A ordem do DOM é painel › gráfico › botão, e o desktop devolve o botão para a coluna da esquerda por colocação explícita na grade. Dentro do painel, o mobile empilhava painel › botão › gráfico e a peça terminava num desenho órfão, depois da chamada.

• font-variant-numeric:tabular-nums nas leituras não é refinamento. O número muda a cada quadro do arrasto; sem avanço fixo por algarismo, ele treme lateralmente e puxa o rótulo junto. Mesma armadilha (e mesma saída) da prova/stats-contador-regua, cuja ficha traz o plano B para fonte display sem algarismo tabular.

• Repetir a peça na mesma página exige sufixar os id e o name dos rádios. O script não usa id nenhum — parte de [data-proj] e desce por data-proj-* —, mas o for dos rótulos e o agrupamento dos rádios são do HTML, e dois grupos com o mesmo name viram um grupo só.

Histórico

Origem. Não há referência única e não há uma linha copiada. O padrão — três controles contínuos, um gráfico que responde e um botão no fim — aparece em três famílias de site: o simulador de aposentadoria de gestora de patrimônio, a calculadora de aporte de corretora digital e o simulador de carteira de assessoria independente. Delas vêm a forma (controles à esquerda, desenho à direita), a proporção e o ritmo da resposta.

Decisões de tradução para o contrato:

Verificado: desktop 1440×900 e mobile 390×844 com overflowX: ok e console limpo; fluxo inteiro por ponteiro e só por teclado; --reduce sem contagem, sem traçado e com a faixa nascendo opaca; e a página sem o script.js mostrando o mesmo desenho do markup. Status externo: nunca rodou em produção — espere ajuste no primeiro uso real, provavelmente nos extremos dos controles (que dependem do público do cliente) e na redação da ressalva, que é decisão da área de compliance dele.