COMO USAR O FINANCIAL CHART ============================

1) COMECE EM 3 CAMPOS
Arraste o elemento Financial Chart para a página e preencha:

• Tipo de gráfico: Barras, Barras Empilhadas, Linhas, Área, Área Empilhada,
 Misto (Barras + Linhas), Pizza ou Rosca (Donut).

• Rótulos dos grupos (eixo X): os períodos ou categorias, separados por vírgula.
 Exemplo: Seg, Ter, Qua, Qui, Sex
 Pode ser qualquer conjunto: Jan, Fev, Mar — ou Loja A, Loja B.

• Séries de dados: cada série no formato Nome: valores, separadas por ponto e vírgula.
 Exemplo: Receita: 1200, 1850, 1400, 2100, 1950; Despesa: 800, 950, 700, 1100, 900
 Regras: a ordem dos valores segue a ordem dos rótulos; decimais com PONTO (1234.56),
 pois a vírgula separa os valores; valores faltantes viram 0.

Só isso já renderiza. Os campos abaixo são refinamento.

2) MODO MISTO (BARRAS + LINHAS)
No campo "Tipos por série", diga o tipo de cada série na mesma ordem:
 barra, barra, linha
Se deixar vazio, a última série vira linha automaticamente (ex: Lucro em linha sobre as barras de Receita e Despesa).

3) PIZZA E ROSCA
Nesses dois tipos, cada RÓTULO vira uma fatia e a PRIMEIRA série fornece os valores:
 Rótulos:  Aluguel, Folha, Marketing, Impostos, Outros
 Séries:   Despesas: 3500, 8200, 2100, 4300, 1200
As fatias mostram o percentual, o tooltip mostra o valor formatado e a Rosca
exibe o total no centro. As cores seguem a ordem dos rótulos.

4) FORMATO DOS VALORES (seção Valores e formato)
• Prefixo do valor: ex "R$ " (com espaço) — aparece nos valores, tooltips e eixo.
• Sufixo do valor: ex " un" ou "%".
• Casas decimais: 0 a 3.
• Formato brasileiro: ligado, exibe 1.234,56; desligado, exibe 1234.56.
 (Vale só para EXIBIÇÃO — a entrada de dados sempre usa ponto decimal.)
• Mostrar valores: exibe o número sobre cada barra/ponto.
O eixo Y compacta sozinho: R$ 2.5k, R$ 1.2M.

5) VISUAL (seções Estilo, Legenda, Fontes e cores)
• Cores das séries: uma cor por série, na ordem, ex: #6366f1, #22c55e, #ef4444.
 Vazio = paleta profissional padrão (10 cores).
• Preenchimento degradê, arredondamento e largura das barras, espessura e curva
 da linha (suave / reta / degraus), orientação horizontal para rankings.
• Legenda: ligar/desligar e posição (top, bottom, left, right). Aparece com 2+ séries;
 clicar num item da legenda oculta/exibe a série.
• Fontes e cores de fundo/grade nas seções correspondentes.

6) META, TOTAL E MODO KPI (seção Meta e extras)
• Linha de meta (valor): desenha uma linha tracejada com rótulo, ex "Meta: R$ 2.000".
 Preencha só o número (2000). Vazio = sem linha. Em barras horizontais a linha
 fica vertical. Não se aplica a Pizza/Rosca.
• Rótulo da meta e Cor da meta: personalizam o texto e a cor dessa linha.
• Mostrar total (empilhado): exibe a soma no topo de cada barra empilhada.
• Modo compacto (KPI): esconde eixos, grade, legenda e título, deixando só o
 gráfico — ideal para mini-gráficos dentro de cards de indicadores.
 O tooltip continua funcionando.

7) ANIMAÇÃO E DARK MODE
• Animação: entrada gradual das séries e transição ao atualizar dados.
 Duração em ms (padrão 900) e tipo (easeinout, easeout, easein, linear).
• Dark Mode "Automático?": ligado, o gráfico adota tema escuro quando o
 dispositivo do usuário está em dark mode (fundo, fontes e grade se ajustam).

8) DADOS DINÂMICOS DO SEU BANCO
Monte o campo "Séries de dados" com expressões do Bubble:
 "Receita: " Search for Vendas:each item's Valor:join with ", "
Para mais séries, concatene com "; " entre elas:
 "Receita: " [busca 1] "; Despesa: " [busca 2]
E nos rótulos:
 Search for Vendas:each item's Data:formatted as 15/07:join with ", "
IMPORTANTE: use a mesma ordenação (ex: por data) em todas as buscas,
para cada valor cair no período certo.

9) CLIQUE E DRILL-DOWN
Evento de workflow: "um ponto é clicado" (funciona também nas fatias de Pizza/Rosca).
Estados expostos do elemento:
• clicked_label  — o rótulo clicado (ex: Seg)
• clicked_series — a série clicada (ex: Receita)
• clicked_value  — o valor clicado (ex: 1200)
• status         — situação do gráfico (útil para depurar; "Sem dados" indica
                  rótulos/séries vazios ou em formato errado)
Exemplo: no evento, filtre um Repeating Group por clicked_label para mostrar
o detalhe do dia clicado.

10) DICAS
• Trocar o "Tipo de gráfico" (inclusive por Conditional) redesenha na hora, animado.
• O gráfico ocupa 100% do elemento — controle o tamanho pelo próprio elemento.
• Não é preciso adicionar nada nos headers: a biblioteca é carregada automaticamente.

--------------------------------------------------------------------
ELEMENTO BAR CHART (legado)
Elemento simples de barras, de uma única série, mantido para compatibilidade
com apps que já o utilizam. Para projetos novos use o Financial Chart, que
cobre esse caso e vai além.