Componentes
Gráficos
A forma pela pergunta, escala com números redondos, três séries validadas, rampa de um tom e estado com as cores de estado. Quem desenha é o produto.
Quando não usar
- rosca ou pizza
- grade tracejada
- texto abaixo de 12 px
- categoria zerada na legenda
Barra única e medidor
claro
Projetos por situação
- Em execução · 5
- Replanejando · 1
- Travado · 1
Horas extras do mês · 18 de 40
escuro
Projetos por situação
- Em execução · 5
- Replanejando · 1
- Travado · 1
Horas extras do mês · 18 de 40
<figure class="hx-chart">
<figcaption>Projetos por situação</figcaption>
<div class="hx-bar-stack" role="img" aria-label="5 em execução, 1 replanejando, 1 travado"><span class="hx-state-info" style="flex:5"></span><span class="hx-state-warning" style="flex:1"></span><span class="hx-state-danger" style="flex:1"></span></div>
<ul class="hx-legend"><li class="hx-state-info"><span class="hx-legend-key"></span>Em execução · 5</li><li class="hx-state-warning"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-triangle-alert"></use></svg>Replanejando · 1</li><li class="hx-state-danger"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-octagon-alert"></use></svg>Travado · 1</li></ul>
<p class="hx-stat-label">Horas extras do mês · 18 de 40</p>
<div class="hx-meter" role="img" aria-label="18 de 40 horas"><span style="width:45%"></span></div>
</figure>Pela pergunta
| Pergunta | Forma |
|---|---|
| Quanto, por período? | colunas (empilhadas se forem partes do total) |
| Como mudou com o tempo? | linha; em degraus quando o valor muda em instantes |
| Como se divide um todo? | barra única empilhada |
| Quanto de um limite? | medidor |
| A resposta é um número? | número de destaque, não gráfico |
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-chart, -grid, -axis, -label, -line, -point | contêiner e classes para o SVG |
.hx-series-1…3, .hx-ramp-1…5, .hx-state-* | cor pelo trabalho (fill no SVG) |
.hx-legend, .hx-legend-key | legenda |
.hx-bar-stack, .hx-meter | barra única e medidor em HTML |
.hx-chart-table | "Ver como tabela" em <details> |
Origem: cap. 06 §3.6 · ADR-0024 · desde a versão 0.1.0