Gráficos C

Lista de barras

Ranking em barras horizontais, com o rótulo dentro da barra e o valor ao lado.

data-u="barlist"Família C

Exemplo

Páginas mais vistas

Lista de barras com o rótulo dentro da barra e o valor à direita. Passe o cursor numa linha e as outras esmaecem.

<article class="u-chartc-card">
  <div class="u-chartc-panel">
    <div data-u="barlist" data-u-props='{
      "label": "Visualizações",
      "periods": [
        {
          "label": "Hoje",
          "delta": 4.3,
          "total": 6940,
          "items": [
            {"label": "/precos", "value": 1820},
            {"label": "/docs", "value": 1310},
            {"label": "/blog", "value": 880},
            {"label": "/componentes", "value": 640},
            {"label": "/changelog", "value": 310}
          ],
          "stats": [
            {"label": "Visitantes únicos", "value": "3.912"},
            {"label": "Tempo médio", "value": "2min 48s"},
            {"label": "Rejeição", "value": "38, 2%"}
          ]
        },
        {
          "label": "7 dias",
          "delta": 12.8,
          "total": 48210,
          "items": [
            {"label": "/precos", "value": 12480},
            {"label": "/docs", "value": 9320},
            {"label": "/blog", "value": 6150},
            {"label": "/componentes", "value": 4870},
            {"label": "/changelog", "value": 2140}
          ],
          "stats": [
            {"label": "Visitantes únicos", "value": "21.640"},
            {"label": "Tempo médio", "value": "3min 05s"},
            {"label": "Rejeição", "value": "36, 9%"}
          ]
        },
        {
          "label": "30 dias",
          "delta": 9.1,
          "total": 198400,
          "items": [
            {"label": "/precos", "value": 51200},
            {"label": "/docs", "value": 38400},
            {"label": "/blog", "value": 24900},
            {"label": "/componentes", "value": 19700},
            {"label": "/changelog", "value": 9300}
          ],
          "stats": [
            {"label": "Visitantes únicos", "value": "84.370"},
            {"label": "Tempo médio", "value": "3min 12s"},
            {"label": "Rejeição", "value": "35, 4%"}
          ]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chartc-title">Páginas mais vistas</h3>
  <p class="u-chartc-desc">Lista de barras com o rótulo dentro da barra e o valor à direita. Passe o cursor numa linha e as outras esmaecem.</p>
</article>

Instalação

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

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

Dependê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-barlist

Famí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.
`periods`	array	sem padrão	Lista de `{label, delta, total, items: [{label, value}`], stats: `[{label, value}]`}. stats viram azulejos, com o valor já em texto.
`period`	number	0	Índice do período que abre selecionado.

Acessibilidade e teclado

Estado e papéis

Onde	Atributo	O que diz
lista	`role="list"`, `role="listitem"`	Cada barra é um item com `aria-label` de rótulo e valor.
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.