Gráficos C
Dispersão
Pontos por categoria, com a legenda isolando uma e dica por ponto.
Exemplo
Dispersão
Tickets por tempo de resolução, coloridos por categoria. Passe o cursor numa categoria da legenda para isolá-la, ou num ponto para ver os detalhes.
<article class="u-chartc-card">
<div class="u-chartc-panel">
<div data-u="scatter" data-u-props='{
"label": "Tickets resolvidos",
"unit": "h",
"categories": [{"label": "Cobrança"}, {"label": "Acesso"}, {"label": "Bug"}],
"periods": [
{
"label": "Esta semana",
"delta": 6.8,
"data": [
[
[10, 4.2],
[9.8, 4.2],
[5.7, 3.8],
[6.3, 4.4],
[7.2, 3.6],
[11.5, 4.3],
[8.7, 4.3],
[5.9, 4.3],
[2.7, 4.9],
[10.3, 4.4],
[13, 4.8],
[2.2, 4.3],
[3.2, 4.4],
[3.3, 4.4],
[5.7, 4.7],
[3.5, 4.4]
],
[
[2.5, 4.5],
[2.4, 5],
[2.3, 4.3],
[6.5, 4.6],
[4.6, 4.8],
[3, 4.5],
[2.9, 4.3],
[3.9, 4.4],
[2.1, 4.4],
[3.4, 4.9],
[3.2, 4.6],
[1.4, 4.8]
],
[
[19.5, 3.2],
[10.5, 3.5],
[17.2, 3.1],
[21.7, 3.1],
[19, 2.6],
[20.3, 2.6],
[18.5, 2.8],
[14.1, 2.4],
[18.7, 2.7],
[41.2, 3]
]
]
},
{
"label": "Este mês",
"delta": 4.1,
"data": [
[
[4, 4.5],
[14.3, 4.3],
[9.1, 4.5],
[3.3, 3.7],
[4.2, 4.9],
[8.8, 3.9],
[4.7, 4.6],
[4.1, 4.6],
[6.3, 4.3],
[5, 4.2],
[8.2, 5],
[3.6, 3.3],
[8.5, 4.3],
[4.2, 4.7],
[3.8, 4.4],
[4.6, 3.4],
[2.6, 4.3],
[1.5, 4.8],
[4.1, 4.5],
[5.8, 4.6],
[8.7, 4.2],
[6, 4.3],
[2.7, 4.2],
[4.9, 4.3],
[12.5, 3.9],
[2.6, 4.3],
[11.4, 4.7],
[5.9, 5],
[20.9, 4.2],
[6.6, 4.7]
],
[
[3.2, 3.5],
[3.8, 4],
[2.6, 4.6],
[3.8, 4.8],
[2.2, 4.3],
[2.4, 4.6],
[3.3, 4.3],
[2.2, 3.7],
[1.5, 4.3],
[1.9, 4.6],
[2.7, 4.4],
[3.1, 4.3],
[3.7, 5],
[4.4, 4.4],
[2.6, 4.2],
[3.9, 3.8],
[6.7, 4.7],
[2.7, 3.9],
[2.6, 5],
[3.6, 4],
[1.5, 4.3],
[3.9, 4.6]
],
[
[8, 2.9],
[16.5, 2.9],
[24.8, 3],
[25.4, 2.7],
[11, 3.1],
[6.6, 3.8],
[15.6, 3.6],
[24.3, 3],
[33.2, 2.7],
[22.5, 3.5],
[25.9, 3.1],
[14.3, 3.4],
[12.3, 3.4],
[11, 3],
[17.8, 3.4],
[14.8, 2.8],
[31, 1.7],
[28.2, 2.7]
]
]
},
{
"label": "Trimestre",
"delta": 9.7,
"data": [
[
[5.3, 4.8],
[3.6, 4],
[19.6, 4.9],
[8.4, 4.5],
[2.6, 3.8],
[13.1, 4.1],
[13, 3.7],
[4.9, 3.8],
[6.7, 4.2],
[7.4, 4.7],
[1.4, 4.7],
[8.3, 4],
[3.8, 4],
[7.2, 4.3],
[5.5, 4.3],
[3.5, 4.5],
[7.6, 3.5],
[10.2, 4.3],
[4.7, 3.8],
[4.3, 4.4],
[6.7, 4.4],
[10.7, 4.5],
[1.9, 4.6],
[5.8, 4.8],
[7.3, 4],
[3.5, 3.4],
[6.6, 4.4],
[12.4, 4.3],
[5.2, 4.4],
[5, 4.4],
[6.4, 4.5],
[8.9, 4.2],
[10.4, 4.2],
[4.3, 3.7],
[2, 4.3],
[7.1, 4.5],
[2.9, 4.3],
[7.8, 3.6],
[4.8, 3.9],
[2.7, 4.5],
[14, 4.5],
[11.1, 3.6],
[1.9, 4.5],
[2.5, 4.9],
[8.5, 4.5],
[7.6, 5]
],
[
[3.3, 4.9],
[1.8, 4.4],
[4.3, 4.4],
[2, 4.8],
[4.5, 4.6],
[2.7, 4.4],
[2.5, 4.8],
[1.5, 4.5],
[1.9, 4.4],
[2.6, 5],
[1.8, 5],
[4.8, 4.6],
[3.5, 4.4],
[2.4, 4.4],
[3.3, 5],
[3.3, 4.5],
[8.9, 4.1],
[1.3, 4],
[2.9, 5],
[1.2, 4.7],
[2.8, 4.9],
[2.4, 4.7],
[3.4, 5],
[2.1, 4.1],
[3.9, 4.6],
[4.4, 3.8],
[3.7, 5],
[6.3, 4.3],
[2.6, 4.1],
[3.9, 3.6],
[4, 4.7],
[3.8, 3.7],
[3.9, 4.8],
[4.7, 4.3]
],
[
[14.8, 2.5],
[14.2, 3.1],
[17.7, 2.7],
[27.6, 1.5],
[43.1, 1.5],
[10.2, 3.8],
[9.2, 3.6],
[9.9, 3.4],
[39.4, 1.5],
[46, 2.3],
[16.4, 3],
[19.5, 2.9],
[23.6, 2.6],
[46, 2.5],
[21.3, 3.3],
[8.6, 3.7],
[26.3, 4],
[13.9, 2.8],
[9.6, 3.6],
[11.7, 3.3],
[16, 3.1],
[25.5, 2.9],
[35.1, 2.6],
[14.2, 2.8],
[29.8, 2.1],
[20.2, 3.1],
[18.2, 2.8],
[36.9, 2.2]
]
]
}
]
}'></div>
</div>
<h3 class="u-chartc-title">Dispersão</h3>
<p class="u-chartc-desc">Tickets por tempo de resolução, coloridos por categoria. Passe o cursor numa categoria da legenda para isolá-la, ou num ponto para ver os detalhes.</p>
</article>Instalação
Só este gráfico, com o core e os tokens:
curl -fsSL unslop.leallabs.dev/i | sh -s add scatterDependência Puxa junto a-chartc (casca dos gráficos C). O instalador baixa e já põe na ordem certa.
O card completo do exemplo, em HTML pronto pra colar:
curl -fsSL unslop.leallabs.dev/i | sh -s add chart-scatterFamília C: casca u-chartc-card > u-chartc-panel > o data-u, e depois h3.u-chartc-title e p.u-chartc-desc.
Props
Vão em data-u-props, como JSON. Cada item de periods vira uma opção do seletor e o gráfico reanima do dado antigo pro novo.
| Prop | Tipo | Padrão | O que faz |
|---|---|---|---|
label | string | sem padrão | Rótulo pequeno no topo do card. |
unit | string | h | Sufixo do eixo X. |
xmax | number | 48 | Fim do eixo X. |
categories | array | sem padrão | Lista de {label}. |
periods | array | sem padrão | Lista de {label, delta, data}. data[categoria] é uma lista de [x, y], com y de 1 a 5. |
period | number | 0 | Índice do período que abre selecionado. |
Acessibilidade e teclado
Estado e papéis
| Onde | Atributo | O que diz |
|---|---|---|
| svg do gráfico | role="img" e aria-label | "Rótulo por categoria". |
| lista de períodos | role="listbox", role="option" | Abre com aria-expanded e marca a opção em aria-selected. |
Teclado
| Tecla | Faz |
|---|---|
| Enter ou Espaço | abre a lista de períodos |
| Seta para cima e para baixo | anda pelas opções |
| Esc | fecha sem trocar |
| Tab | fecha e segue o foco |
Eventos e API
Nenhum evento público. A troca de período acontece dentro do card.