Cores

Gráficos são cinza até você pedir uma cor

Todo widget de visualização de dados — chart, timeline, gantt-chart, treemap — é renderizado em tons de cinza neutros por padrão, e esses cinzas se adaptam sozinhos aos modos claro e escuro. Uma cor só aparece quando algo no dashboard.toml pede por ela.

Esse padrão é deliberado: um gráfico em que cada série tem um tom diferente gasta todo o seu orçamento de cor em decoração. Deixar as cores sem definir e fixar apenas a série que carrega significado ("jobs atrasados são vermelhos") é o que faz essa série se destacar.

Uma cor é um nome do Tailwind, nunca um hex

Onde quer que o dashboard.toml aceite uma cor, ele aceita uma de duas coisas:

• Um nome — <família>-<tom> (green-600, neutral-400), ou black / white. Usado como está nos modos claro e escuro.
• Um par de nomes { light, dark } — { light = "blue-700", dark = "blue-300" }. Cada tema recebe o seu, então a cor continua legível em qualquer um dos fundos.

Um valor hex ("#16a34a") não é aceito, e nem um nome que não esteja na paleta abaixo. Também não há inversão automática entre claro e escuro — se você quer um tom diferente por tema, informe os dois.

Onde uma cor se aplica

São dois lugares, e qual deles um widget oferece depende de como ele colore as coisas.

series[].color — uma cor por série

chart desenha uma linha, barra ou área por entrada em series (um line-chart ou bar-chart legado é lido como um chart), então a cor pertence à entrada:

[[widgets]]
type = "chart"
id = "cost-trend"
title = "Custo ao longo do tempo"
variant = "line"
data_key = "timeseries"
x_key = "label"
series = [
  { key = "cost", label = "Custo", color = "green-600" },
  { key = "budget", label = "Orçamento", color = { light = "neutral-500", dark = "neutral-400" } },
]

colors — fixando grupos específicos

timeline, gantt-chart e treemap não têm uma lista fixa de séries — eles colorem conforme os valores distintos que aparecem no campo nomeado por color_key. Uma tabela colors fixa valores escolhidos em cores escolhidas:

[[widgets]]
type = "timeline"
id = "schedule"
title = "Agenda das máquinas"
items_key = "schedule"
color_key = "status"

[widgets.colors]
"Late job" = "red-600"
"Unassigned" = { light = "neutral-400", dark = "neutral-600" }

Todo valor que você não fixar continua percorrendo os cinzas padrão — e o ciclo pula qualquer cor que uma fixação já tenha reivindicado, então um grupo fixado e um grupo colorido automaticamente nunca recebem a mesma cor.

Um chart também aceita colors, com chaves comparadas de outra forma: um pie ou donut compara suas chaves com o valor de x_key de cada fatia, e um gráfico com group_key as compara com os valores dos grupos, então você pode fixar a única fatia ou grupo que importa e deixar o resto cinza:

[[widgets]]
type = "chart"
id = "cost-share"
title = "Where the cost goes"
variant = "donut"
data_key = "cost_by_machine"
x_key = "machine"
series = [{ key = "cost", label = "Cost" }]

[widgets.colors]
"Machine 3" = "red-600"

Os cinzas padrão

Sem nada fixado, os grupos recebem estes seis em ordem de primeira aparição. Cada um é um par claro/escuro, e é por isso que um gráfico padrão mantém seu contraste quando você troca de tema:

Seis entradas significam que um widget com mais de seis grupos distintos começa a repetir cinzas. Fixe cores além desse ponto se a repetição confundir.

A paleta completa

Todo nome abaixo é válido em qualquer lugar onde o dashboard.toml aceita uma cor — 26 famílias com 11 tons cada (50 a 950), mais black e white. Clique em uma amostra para copiar o nome e cole no chat ou no seu TOML.

Verificando uma cor antes de commitar

harumi dashboard validate verifica um dashboard.toml real, incluindo a estrutura de uma entrada series e de uma tabela colors. Como uma cor não reconhecida é descartada em vez de gerar erro, a verificação mais segura da cor em si é o nome: ele precisa aparecer na paleta acima, escrito exatamente como está lá.