Dados verificáveis, traços distintos.
O instrumento temporal cruza seis séries sintéticas com 24 horas. O desenho, o resumo e a matriz compartilham as mesmas 144 observações; nenhuma curva representa resultados reais da Chesslab.
Uma amostra, seis contratos de leitura.
O desenho separa origem, escala, traço, desvio, matriz e seleção. As linhas de chamada ligam cada índice ao seu elemento; a leitura visual complementa os valores exatos e não confirma um incidente.
-
Origem explícita
O cabeçalho informa dados sintéticos, unidade e janela. Eventos por hora descrevem a simulação, sem atribuir desempenho a clientes.
-
Escala sem ambiguidade
Absoluto usa origem zero. Índice divide cada valor pelo primeiro valor da série na janela e multiplica por 100; tabela e métricas permanecem absolutas.
-
Série reconhecível
Cor, nome e padrão de traço trabalham juntos. O recorte desenha Desenvolvimento e CRM com suas 24 observações; segmentos retos ligam amostras, sem suavização inventada.
-
Desvio inspecionável
O losango sinaliza um delta cujo z robusto supera 3,5. Um pulso pode marcar entrada e retorno: dois marcadores não significam dois incidentes.
-
Matriz preservada
As 144 células são a fonte do runtime. Valor ausente, não finito ou divergente da fórmula suspende cálculos e inspeção; a tabela continua consultável.
-
Seleção local
A faixa inferior representa janela, séries, formato e escala. Cada escolha afeta somente a própria instância: o teclado percorre horas e séries; a seleção vazia oferece Exibir todas.
Contratos de tokens CSS
Valor ou alias no tema claro, propriedade consumidora e limite de uso. Cores são apresentadas em RGB equivalente; a fonte continua no CSS de tokens. O inspetor mostra a resolução no tema escolhido.
| Token / expressão | Aplicação CSS | Regra |
|---|---|---|
--xq-grafico-fundo
rgb(252 252 247)
|
.xq-telemetria[data-xq-telemetria] .xq-telemetria__painel
background
|
Plano opaco do gráfico temporal e referência de preenchimento dos marcadores; preservar a distinção entre traço, grade e fundo nos seis temas. |
--xq-dados-1
rgb(40 75 60)
|
.xq-serie-1
stroke, color
|
Primeira série com traço contínuo. Preservar nome e posição na legenda ao mudar tema. |
--xq-dados-2
rgb(118 80 35)
|
.xq-serie-2
stroke, color
|
Segunda série usa também stroke-dasharray: 8 4; cor isolada não identifica a série. |
--xq-dados-3
rgb(36 93 145)
|
.xq-serie-3
stroke, color
|
Terceira série usa também stroke-dasharray: 2 4, inclusive nos exemplos. |
--xq-linha
rgb(198 205 194)
|
.xq-telemetria[data-xq-telemetria] .xq-telemetria__grade
stroke
|
Hairline de 1px com vector-effect: non-scaling-stroke. A grade orienta sem concorrer com as seis séries. |
--xq-linha-forte
rgb(97 115 104)
|
.xq-telemetria[data-xq-telemetria] .xq-telemetria__instrumento
border-color
|
Delimita o instrumento temporal com borda sólida de 1px; textura e cantoneiras não substituem seu limite. |
--xq-mono
'Xeque Mono', monospace
|
.xq-telemetria[data-xq-telemetria] .xq-telemetria__svg text
font-family
|
Eixos e valores usam Xeque Mono e números tabulares. Na folha temporal o tamanho dos eixos é 12px, sem derivar da fonte display. |
--xq-legenda
12px
|
.xq-telemetria[data-xq-telemetria] .xq-telemetria__series button
font-size
|
12px/1,5 na legenda operável; cada botão mantém nome, amostra do traço e aria-pressed. |
--xq-surface-inset
inset 0px 1px 0px 0px var(--xq-surface-specular), inset 0px -1px 0px 0px var(--xq-surface-shade)
|
.xq-telemetria[data-xq-telemetria] .xq-telemetria__instrumento
box-shadow
|
Sombra interna caracteriza a superfície opaca; não altera a escala nem a área útil do gráfico. |
--xq-focus-shadow
0px 0px 0px 2px var(--xq-focus-inner), 0px 0px 0px 4px var(--xq-focus-outer)
|
.xq-telemetria[data-xq-telemetria] :is(button, select, svg[tabindex], summary, [data-xq-tele-table-wrap]):focus-visible
box-shadow
|
Duplo anel para filtros, inspeção e tabela. Em forced-colors, o contorno de sistema preserva o alvo. |
--xq-controle
44px
|
.xq-telemetria[data-xq-telemetria] .xq-telemetria__controles select
min-height
|
Alvo mínimo de 44px nos filtros nativos. O respiro editorial não reduz a área de operação por toque. |
--xq-focus-offset
2px
|
.xq-telemetria[data-xq-telemetria] :is(button, select, svg[tabindex], summary, [data-xq-tele-table-wrap]):focus-visible
outline-offset
|
Afastamento de 2px entre controle e contorno externo da telemetria; o foco não deve ser cortado pelo instrumento. |
Uso correto × uso incorreto
Compare a mesma intenção em duas composições. Os exemplos são amostras de leitura; os controles operáveis ficam no playground.
LEGADO / DESENVOLVIMENTO / JAN–MAR
Amostra sintética · unidade: eventos
Total das três observações: 88
- Unidade, período e origem acompanham o gráfico.
- Os três valores e o total 88 são conferíveis.
- Segmentos retos e números tabulares preservam a leitura.
Seu negócio em alta!
+300%Crescimento extraordinário
- Percentual sem base nem intervalo verificável.
- Curva suave sugere amostras que não existem.
- Afirmação comercial substitui a origem do dado.
Ensaiar a leitura de uma matriz.
O ensaio abaixo representa estados locais de apresentação. Use o laboratório temporal acima para filtrar a matriz real da demonstração; nenhum controle deste ensaio altera suas observações.
MATRIZ SINTÉTICA / 24 × 6F1–F8
- Observações da matriz de referência
- 144
| Hora | Eventos |
|---|---|
| 08:00 | 62 |
| 09:00 | 35 |
144 observações disponíveis. A tabela preserva os valores absolutos.
Pronto. Altere um controle para inspecionar o contrato.
Ensaio local e determinístico. A ação percorre carregamento → sucesso; movimento reduzido entrega o estado final imediatamente. Repetir preserva os controles.
Inspecionar tokens resolvidos
--xq-grafico-fundo- rgb(252 252 247)
--xq-dados-1- rgb(40 75 60)
--xq-dados-2- rgb(118 80 35)
--xq-dados-3- rgb(36 93 145)
--xq-linha- rgb(198 205 194)
--xq-linha-forte- rgb(97 115 104)
--xq-mono- 'Xeque Mono', monospace
--xq-legenda- 12px
--xq-surface-inset- inset 0px 1px 0px 0px var(--xq-surface-specular), inset 0px -1px 0px 0px var(--xq-surface-shade)
--xq-focus-shadow- 0px 0px 0px 2px var(--xq-focus-inner), 0px 0px 0px 4px var(--xq-focus-outer)
--xq-controle- 44px
--xq-focus-offset- 2px
Aplicar o contrato
Distinguir índice de valor absoluto
O runtime temporal divide pela primeira observação da série na janela. As fixtures são positivas; ao adaptar o contrato a outra fonte, rejeitar base ausente ou zero antes da divisão. O resumo permanece em eventos.
const base = valores[0];
if (!Number.isFinite(base) || base === 0) {
throw new RangeError("A série precisa de uma base finita e diferente de zero.");
}
const indice = valores.map(valor => valor / base * 100);
// Tabela e resumo continuam usando os valores absolutos.
Validar antes de atualizar
Depois de alterar as células de uma matriz temporal, solicitar releitura ao módulo. Falha de integridade preserva o HTML e impede métricas enganadoras.
const painel = document.querySelector("[data-xq-telemetria]");
XequeTelemetria.refresh(painel);
const estado = XequeTelemetria.snapshot(painel);
Critérios de aceite
- Conferir 24 × 6 = 144 observações, total 9.027 e média 62,6875 na matriz temporal completa.
- Confirmar 36 observações, total 1.414 e pico 76 no contrato legado, sem misturar os dois conjuntos.
- Com o gráfico focado, percorrer horas com ←/→, séries com ↑/↓ e extremos com Home/End.
- Em 390px, rolar a tabela localmente; sem JS, consultar SVG, método, resumo e todos os valores.
- No recorte Desenvolvimento, conferir 08:00 = 62, 09:00 = 35 e 10:00 = 35; filtrar janela ou tema não altera essas células.