Dados

Barras

Colunas que crescem ao entrar, com dica por coluna e total que conta no card.

data-u="bars"

Exemplo

Deploys

148 nesta semana

<article class="u-card u-wall" data-wall="steps">
  <div class="u-panel">
    <div class="u-head">
      <div><div class="u-label">Deploys</div><div class="u-big"><span data-bars-total>148</span> <small>nesta semana</small></div></div>
      <div data-u="period"></div>
    </div>
    <div style="flex:1;min-height:260px">
      <div data-u="bars" data-u-props='{
        "labels": ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"],
        "max": 32,
        "series": [
          [22, 14, 9, 27, 31, 24, 21],
          [18, 26, 21, 15, 30, 12, 8],
          [25, 19, 28, 22, 16, 20, 14],
          [10, 24, 29, 31, 18, 9, 17]
        ]
      }'></div>
    </div>
  </div>
</article>

Instalação

Barras vem no pacote completo, em unslop.css e unslop.js:

curl -fsSL unslop.leallabs.dev/i | sh

Um bloco pronto que usa barras:

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

Sem build O add por nome serve pra gráficos e blocos. Componentes com JS moram em unslop.js, que monta sozinho todo data-u da página.

Props

Vão em data-u-props, como JSON.

Prop	Tipo	Padrão	O que faz
`labels`	array	`[]`	Um rótulo por coluna.
`series`	array de arrays	sem padrão	Uma série por período. Um period no mesmo card troca a série.
`values`	array	sem padrão	Série única, quando não há period.
`max`	number	maior valor	Topo da escala.
`color`	string	var(--c3)	Cor das barras. Use um token, como var(--c1).
`start`	number	0	Série que abre.

Classes e variantes

Classe	O que faz
`[data-bars-total]`	Em qualquer elemento do card: recebe a soma da série, contando.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
cada coluna	`tabindex="0"`, `aria-label`	`"Seg: 22"`. A coluna focada mostra a dica.

Teclado

Tecla	Faz
Tab	anda pelas colunas e mostra o valor

Eventos e API

el._u.update(props) troca as props sem remontar.