Gráficos B

Mapa de calor

Intensidade por dia em grade, com abas de semana, mês e ano.

data-u="heatmap"Família B

Exemplo

Mapa de calor

Grade de células arredondadas em cinco níveis do acento. As abas trocam a granularidade com transição e cada célula tem dica ao passar o mouse.

<article class="u-chartb-card">
  <div class="u-chartb-panel" data-u="heatmap" data-u-props="{&quot;label&quot;:&quot;Commits neste ano&quot;,&quot;noun&quot;:&quot;commits&quot;,&quot;periods&quot;:[{&quot;label&quot;:&quot;Este ano&quot;,&quot;total&quot;:1312,&quot;delta&quot;:9.2,&quot;seed&quot;:7,&quot;stats&quot;:[{&quot;v&quot;:&quot;41 dias&quot;,&quot;l&quot;:&quot;Maior sequência&quot;},{&quot;v&quot;:&quot;28&quot;,&quot;l&quot;:&quot;Commits no melhor dia&quot;},{&quot;v&quot;:&quot;6h 12m&quot;,&quot;l&quot;:&quot;Sessão mais longa&quot;},{&quot;v&quot;:&quot;186&quot;,&quot;l&quot;:&quot;Pull requests mesclados&quot;}]},{&quot;label&quot;:&quot;Ano passado&quot;,&quot;total&quot;:1203,&quot;delta&quot;:3.1,&quot;seed&quot;:19,&quot;stats&quot;:[{&quot;v&quot;:&quot;33 dias&quot;,&quot;l&quot;:&quot;Maior sequência&quot;},{&quot;v&quot;:&quot;24&quot;,&quot;l&quot;:&quot;Commits no melhor dia&quot;},{&quot;v&quot;:&quot;5h 40m&quot;,&quot;l&quot;:&quot;Sessão mais longa&quot;},{&quot;v&quot;:&quot;161&quot;,&quot;l&quot;:&quot;Pull requests mesclados&quot;}]},{&quot;label&quot;:&quot;Dois anos atrás&quot;,&quot;total&quot;:1046,&quot;delta&quot;:-2.4,&quot;seed&quot;:31,&quot;stats&quot;:[{&quot;v&quot;:&quot;27 dias&quot;,&quot;l&quot;:&quot;Maior sequência&quot;},{&quot;v&quot;:&quot;19&quot;,&quot;l&quot;:&quot;Commits no melhor dia&quot;},{&quot;v&quot;:&quot;4h 55m&quot;,&quot;l&quot;:&quot;Sessão mais longa&quot;},{&quot;v&quot;:&quot;132&quot;,&quot;l&quot;:&quot;Pull requests mesclados&quot;}]}]}"></div>
  <div class="u-chartb-copy">
    <h3>Mapa de calor</h3>
    <p>Grade de células arredondadas em cinco níveis do acento. As abas trocam a granularidade com transição e cada célula tem dica ao passar o mouse.</p>
  </div>
</article>

Instalação

Só este gráfico, com o core e os tokens:

curl -fsSL unslop.leallabs.dev/i | sh -s add heatmap

Dependência Puxa junto b-shell (casca dos gráficos B). 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-heatmap

Família B: casca u-chartb-card > o data-u com a classe u-chartb-panel, e depois div.u-chartb-copy com h3 e p.

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.
`noun`	string	contribuições	Palavra da contagem.
`tabs`	array	`[Semanal, Mensal, Anual]`	Abas de granularidade.
`tab`	number	0	Aba que abre.
`activity`	string	sem padrão	Título da barra de atividade.
`periods`	array	sem padrão	Lista de `{label, total, delta, seed, stats: [{v, l}`]}. As células saem de seed: é padrão visual, não dado por dia. Todos com o mesmo número de stats.
`period`	number	0	Índice do período que abre selecionado.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
abas	`role="tablist"`, `role="tab"`, `aria-selected`	Semanal, Mensal e Anual.
lista de períodos	`role="listbox"`, `role="option"`	Abre com `aria-expanded` e marca a opção em `aria-selected`.
grade	`aria-hidden="true"`	As células são decoração. Total e stats ficam em texto.

Teclado

Tecla	Faz
Seta para a esquerda e para a direita	trocam a aba
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.