Gráficos C

Linha

Séries com curva suave que se desenham ao entrar e hover por instante.

data-u="line"Família C

Exemplo

Gráfico de linha

Duas séries com curva suave que se desenham ao entrar. Passe o cursor num ponto do tempo e título, número e azulejos mostram aquele instante.

<article class="u-chartc-card">
  <div class="u-chartc-panel">
    <div data-u="line" data-u-props='{
      "label": "Tempo de resposta",
      "unit": "ms",
      "series": [{"label": "p50 (mediana)"}, {"label": "p95"}],
      "periods": [
        {
          "label": "Últimas 24 h",
          "delta": -6.4,
          "labels": ["0h", "2h", "4h", "6h", "8h", "10h", "12h", "14h", "16h", "18h", "20h", "22h"],
          "data": [
            [172, 165, 158, 171, 189, 210, 205, 191, 186, 179, 176, 182],
            [410, 395, 388, 430, 492, 548, 521, 503, 487, 462, 449, 455]
          ]
        },
        {
          "label": "7 dias",
          "delta": -3.1,
          "labels": ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"],
          "data": [[188, 181, 176, 184, 195, 168, 159], [520, 498, 471, 505, 548, 447, 421]]
        },
        {
          "label": "30 dias",
          "delta": -9.2,
          "labels": ["3/10", "6/10", "9/10", "12/10", "15/10", "18/10", "21/10", "24/10", "27/10", "30/10"],
          "data": [
            [196, 201, 193, 188, 190, 184, 179, 183, 177, 181],
            [560, 575, 548, 531, 540, 512, 498, 507, 489, 494]
          ]
        }
      ]
    }'></div>
  </div>
  <h3 class="u-chartc-title">Gráfico de linha</h3>
  <p class="u-chartc-desc">Duas séries com curva suave que se desenham ao entrar. Passe o cursor num ponto do tempo e título, número e azulejos mostram aquele instante.</p>
</article>

Instalação

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

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

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-line

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.
`unit`	string	sem padrão	Sufixo dos valores, como ms. Com latência, queda é boa e o selo fica verde.
`series`	array	sem padrão	Lista de `{label}`.
`periods`	array	sem padrão	Lista de `{label, delta, labels, data}`. Cada período pode ter outro número de pontos.
`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 ao longo do período"`.
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.