Components
Data Blocks
Default
The simplest form showing only an absolute data.
Favorites19Retweets100Conversions33
Progress
Use this variation when you need to show a data and its progress against a goal.
Chart
A central data with a graph showing a trend.
MRR (BRL)R$ 39.450,50Atualizado em MarçoVendas5Atualizado em Março
Comparison
When the central data is related to another, and it is necessary to see the difference between them,
you can use .info
with .increase
or .decrease
.
Users19 k 1,5%In comparison with the same day last week.Sections1,5 m 4,1%In comparison with last month.
States
You can show a loading spinner, while data has not been fetched from the server,
using .loading
with .data
.
Size
Use .slim
with .data-block
to make it smaller.
Visitantes73,79 mi 19,77%Leads3,27 mil 16,5%Leads Qualificados988 15,9%
Conceito
Data Blocks são usados para informar um dado numérico específico, podendo indicar tendência de modificação ao longo do tempo, comparação com o mesmo dado em um outro intervalo de tempo ou progresso em relação a uma meta. Um Data Block dá foco a um único dado e, por isso, não deve ser usado quando há um grande volume de informação. Um Data Block pode aparecer junto a outros Data Blocks para mostrar diferentes dados de uma mesma entidade. Deve-se usar no máximo 10 Data Blocks em uma única tela, sendo o máximo de 5 Data Blocks por linha (considerando uma tela Desktop).
Elementos de um Data Block
- Label: indica ao quê o dado central se refere.
- Number: é o dado central do componente.
- Help Icon (optional): possibilita à pessoa usuária saber ao que se refere o dado exibido.
- Additional data (optional): indica um dado adicional para relacionar com o dado central.
- Indicator Icon (optional): indica se o dado central está aumentando ou diminuindo.
- Unit - Prefix (optional): indica a unidade do dado central e fica alinhado à esquerda.
- Unit - Suffix (optional): indica a unidade do dado central e fica alinhado à direita.
- Graph or Progress Bar (optional): possibilita à pessoa usuária ver um gráfico simples baseado em dados históricos, ou checar o progresso do dado com relação a uma meta.
- Help Text (optional): indica um texto de apoio sobre o dado em questão. Pode trazer informações como intervalo de tempo.
- Tertiary Button (optional): possibilita à pessoa usuária saber mais a respeito do dado.
Tipos
Padrão (dado absoluto)
Usa-se quando há um dado a ser destacado. Neste caso, os elementos obrigatórios são Label e Number. Pode-se adicionar mais elementos conforme a necessidade:
- Help Icon (optional)
- Unit - Prefix (optional)
- Unit - Suffix (optional)
- Help Text (optional)
- Tertiary Button (optional)
Gráfico (tendência)
Usa-se quando o dado central está relacionado a um período de tempo e a intenção é mostrar a tendência deste dado. Neste caso usa-se um gráfico simples de tendência. Sempre que um gráfico é usado, é necessário mostrar qual o recorte do período de tempo, seja através de um texto de apoio (Help Text) ou título.
Barra de Progresso (parte de um total)
Usa-se quando o dado central é parte de um número total, por exemplo, uma meta. Além dos elementos obrigatórios e os usados nos casos comuns, adiciona-se uma barra de progresso e um elemento informativo com o número relativo ao dado central. O dado central, nestes casos, deve ser a porcentagem, enquanto o elemento informativo deve conter o cálculo dessa porcentagem (a parte do todo e o valor total).
Maior ou menor (relação entre dois dados)
Usa-se quando o dado central está relacionado a outro e é necessário ver a diferença entre eles (se é maior ou menor), por exemplo, uma meta ou a relação com o mesmo dado em outros períodos. Neste caso é adicionado um elemento informativo constando a diferença entre estes dados. Também deve ser usado um texto de apoio (Help Text) explicando qual o dado que está sendo comparado ao dado central.
Estados
Loading
Todos os Data Blocks devem ter o estado de carregamento.
Erro
Todos os Data Blocks devem ter o estado de erro, caso o dado não seja carregado ou dê erro de timeout. Neste caso, usa-se o elemento Help Text com um text-warning + icon.
Tamanhos
Todos os Data Block de um mesmo Data Blocks devem ter o mesmo tamanho.
Regular
Usa-se como padrão no sistema.
Slim
Usa-se dentro de listas ou outros componentes menores.
Large
Usa-se para dar destaque aos principais dados de uma entidade.
Quando usar Data Blocks
Pessoa precisa ver rapidamente um dado de grande relevância, trazendo análises pré-formatadas (comparações, tendências e relações).
Quando não usar Data Blocks
Situações:
Pessoa precisa visualizar dados de múltiplos itens, podendo executar ações em cada um, sem necessidade de comparação ou análise. Neste caso usar: List
Pessoa precisa escanear itens similares, a fim de comparar e analisar dados. Neste caso usar: Data Tables