Dados & visualização
cosmemilton-ui/server

CmSignalBars

Barras crescentes de intensidade: Wi-Fi, qualidade de link, força de um sinal qualquer. É o indicador que o CmSignalList usa por dentro, exportado à parte porque ele aparece sozinho em tabela, cabeçalho e item de lista.

Import

tsx
import { CmSignalBars, cmSignalLevel } from "cosmemilton-ui/server";

A escala de 0 a 100

A conversão lado a lado — e a prova de que 12% acende uma barra, não nenhuma.

0%0 de 4
12%1 de 4
40%2 de 4
70%3 de 4
95%4 de 4

O piso é uma barra para qualquer sinal recebido: cmSignalLevel(12) = 1, e não zero. Só value 0, negativo ou não finito apaga todas as barras, porque uma rede fraca ainda dá para escolher na instalação e uma rede sem sinal nenhum, não.

Quantidade, nível direto e tamanho

bars, level, size e o label que transforma o indicador decorativo em anunciável.

bars — a escala não precisa ter quatro barras

Wi-Fi da secretaria (padrão, 4 barras)
Modem 4G do totem (6 barras)

level — barras acesas direto, sem converter porcentagem

O firmware do concentrador já reporta 2 de 4; com level informado, o value 95 é ignorado.

size — altura do indicador (número vira px, string vai literal)

10 (linha de tabela)
padrão 1rem
2rem (tela de diagnóstico)

label — quando o indicador deixa de ser decorativo

escola-lab-2 — barras decorativas, o nome da rede já está escrito
O mesmo indicador como ele iria para a coluna Sinal da tabela de equipamentos: sozinho na célula, sem nada escrito para o leitor de tela ler no lugar dele

API rápida

Props principais de cada peça exportada.

CmSignalBars

valuelevelbarssizelabel

cmSignalLevel(value, bars)

value: 0–100bars (padrão 4)

Notas

cmSignalLevel converte 0–100 em barras acesas com PISO 1 para qualquer sinal recebido: "uma barra" e "sem sinal" são coisas diferentes, e arredondar 12% para zero mostra uma rede que aparece na lista com o ícone de rede inexistente. Só value <= 0 (ou não finito) devolve 0.

level acende um número de barras direto e ignora value — use quando a sua fonte já entrega o nível, não a porcentagem.

Sem label o indicador é aria-hidden, ou seja, decorativo — o normal, porque o nome da rede já está do lado. Com label ele vira role="img" com nome acessível.

As alturas das barras vêm do componente (proporcionais à quantidade), então o desenho continua correto com qualquer valor de bars.

size aceita número (px) ou string e vira --cm-signal-bars-size. A cor acesa sai de --cm-signal-bars-color, que o CmSignalList troca para o primary na linha selecionada.

Server-safe: sem hooks, exportado de cosmemilton-ui/server (e presente também no bundle global).