Cartão de gráfico para telas de sinalização digital

Colunas, barras, linhas, áreas ou um donut são construídos para distância, com uma figura principal, poucas linhas de grade e rótulos diretos. Preenche toda a tela, fica em uma caixa no meio, se encaixa em um canto como um quadrado pequeno, roda como uma linha em um canto ou se estende como uma faixa ao longo de uma borda. Você escolhe colunas, barras, uma linha, uma área ou um donut, se as séries empilham, o herói como o valor mais recente, o total da primeira série ou seu pico, uma linha alvo horizontal e qual direção de mudança é boa.

Cartão ao vivo

Este cartão é desenhado no seu navegador pelo mesmo código que os Players executam, com dados de exemplo.

Categoria: Operações. Etiquetas: Gráficos e medidores, Números e métricas, Escritórios e locais de trabalho.

Layouts

Este cartão principal se encaixa em qualquer layout: tela cheia, centro, largo, canto, chip, faixa ou qualquer retângulo livre.

Layouts: cheio, centro, largo, canto, chip, faixa. Formas: paisagem, retrato, quadrado, faixa.

Layouts, temas e publicação de cartões. Veja os cartões.

Dados e privacidade

Este cartão usa suas propriedades configuradas e dados ao vivo do cartão.

Propriedades

Para tema, fundo, destaque e posição, veja Propriedades comuns.

Defina as propriedades estáticas nos params do cartão ao criá-lo. O documento de dados dele contém apenas propriedades dinâmicas. Linhas aninhadas descrevem o conteúdo da propriedade pai.

Propriedades estáticas

Nome	Tipo	Padrão	Valores e limites	Descrição
`title`	string	`""`	maxLength: `60`
`subtitle`	string	`""`	maxLength: `80`
`kind`	string	`"column"`	`"column"`, `"bar"`, `"line"`, `"area"`, `"donut"`	coluna: barras verticais; barra: barras horizontais; donut usa a primeira série.
`prefix`	string	`""`	maxLength: `3`	Antes de cada valor, por exemplo $.
`unit`	string	`""`	maxLength: `6`	Após cada valor, por exemplo % ou k.
`decimals`	integer	`0`	mínimo: `0`; máximo: `4`
`stacked`	boolean	`false`		Empilhar a série (coluna e barra).
`showValues`	boolean	`true`
`targetLabel`	string	`"Target"`	maxLength: `24`
`heroValue`	string	`"auto"`	`"auto"`, `"latest"`, `"total"`, `"max"`, `"none"`	A figura principal: o valor mais recente (o último total de uma pilha), o total da primeira série, seu pico, ou nenhum. auto é o valor mais recente, e o total para barras horizontais, cujas categorias não são uma sequência. O de um donut é seu total (sua maior fatia quando os valores são percentuais).
`showChange`	boolean	`true`		Mostrar a variação do valor mais recente em relação ao ponto anterior.
`goodWhen`	string	`"up"`	`"up"`, `"down"`	Qual direção da mudança é boa (queda para custos e tempos de espera).
`backgroundColor`	string, nulo	`null`	padrão: `"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"`	Substitui o fundo e a placa do cartão por uma cor plana ordenada por CSS. #RRGGBBAA fornece opacidade. background none tem precedência.
`textColor`	string, nulo	`null`	padrão: `"^#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$"`	Substitui as cores do texto principal e secundário. As cores de destaque e status semântico mantêm seus papéis.

Propriedades dinâmicas

Nome	Tipo	Padrão	Valores e limites	Descrição
`series`	array		minItems: `1`; maxItems: `4`; Obrigatório
`series[].name`	string	`""`	maxLength: `32`
`series[].values`	array		minItems: `1`; maxItems: `31`; Obrigatório
`labels`	array	`[]`	maxItems: `31`	Rótulos de categoria, um por valor.
`target`	número, nulo	`null`		Uma linha alvo horizontal.
`changedAt`	string, nulo	`null`		Instante ISO 8601 em que o ponto mais recente chegou. A partir desse instante, o herói conta do número anterior para o novo, em todas as telas simultaneamente.

Exemplo de tela

Salve as propriedades estáticas como params.json e crie o cartão. O resultado traz o id crd_ dele.

{
  "theme": "neomustard"
}

screenrig card create --type chart --major 1 --file params.json

Adicione este item aos primitives de uma página da playlist, com esse id no lugar do id do exemplo. Publique a playlist e atribua uma tela.

{
  "id": "chart",
  "primitive": "card",
  "card": "crd_01EXAMPLECARD000000000",
  "layout": "full",
  "content_fit": "fill"
}

Escrever dados ao vivo

Escreva o documento no cartão depois de criá-lo e depois substitua-o para atualizar a tela sem republicar. O cartão verifica cada gravação contra suas propriedades dinâmicas e recusa um documento que ele rejeita. Use o mesmo projeto da playlist.

Salve o documento como card-data.json. O CLI lê o documento em si, sem invólucro:

{
  "series": [
    {
      "values": [
        1
      ]
    }
  ],
  "labels": [],
  "target": null,
  "changedAt": null
}

screenrig card data put crd_01EXAMPLECARD000000000 --file card-data.json

Ou chame a API diretamente. A API envolve o mesmo documento em um campo document. Um token de agente já nomeia seu projeto, então nenhum cabeçalho de projeto é enviado; se você enviar ScreenRig-Project, ele deve corresponder ao projeto do token. Forneça sua autorização de API pelo ambiente; veja Autenticação da API.

curl --request PUT "https://api.screenrig.ai/api/cards/crd_01EXAMPLECARD000000000/data" \
  --header "Authorization: Bearer $SCREENRIG_TOKEN" \
  --header "Content-Type: application/json" \
  --data '{"document":{"series":[{"values":[1]}],"labels":[],"target":null,"changedAt":null}}'