Vitrine — dashboards

Layout

Colunas, abas, cartões, barra lateral e formulários — e por que a área é um objeto.

A área é um objeto#

Em Python isto seria um with. A DataForge não tem bloco de contexto, e inventar um só para o layout significaria acrescentar uma palavra reservada à linguagem inteira para resolver um problema de um módulo.

A saída é o idioma que a linguagem já tem: a área é um objeto, e os componentes são métodos dele.

dataforge

colunas := V.colunas(3)
colunas[0].metrica("Vendas", "R$ 100K")
colunas[1].metrica("Clientes", "2.500")
colunas[2].metrica("Pedidos", "8.400")

Lê-se melhor, aninha sem indentação extra, e a área pode ser guardada numa variável e passada adiante — o que um with não permite:

dataforge

action cartao_de_metrica(area, rotulo, valor):
    caixa := area.cartao(rotulo)
    caixa.metrica(rotulo, valor)
    caixa.texto("atualizado agora")

colunas := V.colunas(2)
cartao_de_metrica(colunas[0], "Receita", "R$ 850K")
cartao_de_metrica(colunas[1], "Custo", "R$ 310K")

Toda área oferece os mesmos componentes que V, mais os layouts aninhados. Aprender um ensina todos.

Colunas#

dataforge

V.colunas(3)              // três iguais
V.colunas([2, 1])         // a primeira com o dobro da largura
V.colunas(2, espacamento := "grande")

Abaixo de 860 px cada coluna ocupa a largura inteira — o layout é responsivo sem que você faça nada.

Barra lateral#

V.lateral() devolve sempre a mesma área, chamada de onde for. É o lugar dos filtros:

dataforge

lado := V.lateral()
lado.cabecalho("Filtros", 4)
regiao := lado.escolha("Região", ["Sul", "Norte"])
de     := lado.data("De")
ate    := lado.data("Até")
lado.divisor()
given lado.botao("Limpar", tipo := "secundario"):
    V.estado.limpar()

Se nada for posto nela, a barra não aparece.

Abas#

dataforge

abas := V.abas(["Resumo", "Detalhe", "Sobre"])
abas[0].metrica("Total", 128400)
abas[1].frame(linhas)
abas[2].markdown("Feito com **Arcane.Vitrine**.")

Cartões, seções e containers#

dataforge

cartao := V.cartao("Vendas", subtitulo := "primeiro semestre")
cartao.metrica("Receita", "R$ 850K")

secao := V.expandir("Detalhes técnicos", aberto := no)
secao.codigo(consulta_sql, linguagem := "sql")

caixa := V.container(borda := yes, altura := 320)
cycle item in muitos:
    caixa.texto(item)

barra := V.linha(alinhar := "entre")
barra.texto("Resultados")
barra.botao("Exportar", tipo := "secundario")

V.expandir guarda o estado de aberto ou fechado entre execuções. V.linha põe os filhos lado a lado, e V.espacador() empurra o que vem depois para a outra ponta.

Espaço reservado#

V.vazio() reserva um lugar para ser preenchido depois — serve para escrever "Calculando…" e substituir pelo resultado sem que a página salte:

dataforge

lugar := V.vazio()
lugar.carregando("Consultando…")
dados := consulta_demorada()
lugar.frame(dados)