Formato de Dados

Widgets de Gráfico

Todo gráfico compartilha os mesmos campos; quais de x, y, d e r são usados, e que tipo de coluna cada um aceita, depende do tipo de gráfico - cada um dos tipos de gráfico suportados é abordado em sua própria subseção abaixo, com um exemplo ao vivo renderizado a partir de um pequeno dataset de amostra compartilhado.

• datasetId - o dataset do qual este gráfico é lido - deve corresponder ao nome de um dataset.
• chartType - area, bar, cell, dot, hexbin or line.
• title - um título de gráfico opcional.
• dataFunction - o agregado aplicado a d: count (default), sum, average, min, max, median or stddev. Deixe d não definido ao usar count.
• x - a coluna para a dimensão X (obrigatória em todos os tipos de gráfico).
• y - a coluna para a dimensão Y (apenas cell, dot e hexbin, e obrigatória nesses três).
• d - a coluna agregada na dimensão de valor/cor do gráfico.
• r - a coluna para a dimensão de raio (apenas dot, e obrigatória).
• seasonX / seasonY - agrupa uma coluna de tempo em um período recorrente: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

As colunas de dimensão são classificadas como categóricas, temporais ou contínuas com base em seu tipo declarado - veja a seção de dataset JSON abaixo. Quando dataFunction é count, a dimensão d é deixada não definida - uma contagem não precisa de coluna de valor. Qualquer outro agregado (sum, average, min, max, median or stddev) requer isso.

As dimensões exigidas por cada tipo de gráfico precisam ser preenchidas: cell, dot e hexbin não podem ser desenhados sem y, e dot não pode ser desenhado sem r. Uma requisição que omita alguma delas é rejeitada, então, se o dataset não tiver uma coluna adequada, escolha um tipo de gráfico que não precise dela - area, bar e line usam apenas x, e hexbin plota duas dimensões sem coluna de raio.

Barra

Linha

Área

Célula

Ponto

Hexbin

Outros Widgets

Tabela (dash_table)

Texto (dash_text)

Imagem (dash_image)

Espaçador (dash_spacer)

Empilhadores (dash_stacker_hor, dash_stacker_ver)

Dataset JSON

Um dataset é um único objeto JSON com um nome, colunas tipadas e linhas:

{
  "name": "Orders",
  "headers": ["region", "category", "amount", "quantity"],
  "types": ["VARCHAR", "VARCHAR", "FLOAT", "INTEGER"],
  "entries": [
    ["North", "Electronics", 120.50, 2],
    ["South", "Clothing",     89.95, 1],
    ["North", "Furniture",   432.00, 5],
    ["South", "Electronics",  74.50, 1]
  ]
}

• name - o nome do dataset; gráficos e tabelas o referenciam através do campo datasetId.
• headers - os nomes das colunas, na mesma ordem de cada linha em entries.
• types - um tipo de coluna por cabeçalho - veja as categorias abaixo.
• entries - as linhas, cada uma um array de valores na ordem dos cabeçalhos.

Opcionalmente, row_start, row_end, col_start e col_end selecionam um subintervalo inclusivo, indexado a partir de zero, de entries para importar - útil ao anexar apenas linhas novas de uma tabela maior. Os quatro têm como padrão o intervalo completo:

{
  "name": "Orders",
  "headers": ["region", "amount"],
  "types": ["VARCHAR", "FLOAT"],
  "entries": [ ["North", 120.50], ["South", 89.95], ["North", 432.00], ["South", 74.50] ],
  "row_start": 0,
  "row_end": 1,
  "col_start": 0,
  "col_end": 1
}

Todo tipo de coluna é classificado como categórico, temporal ou contínuo, o que determina para quais dimensões de gráfico ele pode ser usado - veja as seções de widgets de gráfico acima:

• Categórico - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Temporal - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Contínuo - qualquer outro tipo, por exemplo INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

As referências de coluna em um gráfico (x, y, d, r) devem corresponder exatamente a um nome de cabeçalho, com diferenciação entre maiúsculas e minúsculas.

Estilização e Substituições de Tema

As cores em nível de dashboard são definidas uma vez em config.style.widget e se aplicam a todo widget que não as substitui:

• color - a cor de texto padrão.
• backgroundColor - o plano de fundo padrão do dashboard.
• primaryColor - a cor de primeiro plano/série ativa, usada para cabeçalhos e para o traço em destaque por filtro cruzado.
• primaryColorSubtle - a extremidade mais clara do gradiente de cores usado pelos gráficos cell, dot e hexbin.
• secondaryColor - a cor de fundo/série não filtrada.

Qualquer widget pode substituir sua própria apresentação diretamente em seu nó JSON - backgroundColor, color, padding, borderRadius, borderWidth, borderColor e shadow. O exemplo abaixo substitui as próprias cores e cantos de um gráfico, enquanto o restante do dashboard mantém o tema compartilhado:

{
  "type": "dash_chart",
  "datasetId": "Orders",
  "chartType": "hexbin",
  "x": "amount",
  "y": "quantity",
  "backgroundColor": "#F5F0FF",
  "borderRadius": "12px",
  "borderWidth": "1px",
  "borderColor": "#6E2BDC",
  "shadow": true
}

Exemplo Completo

Um pequeno dashboard combinando um cabeçalho, dois gráficos lado a lado e uma tabela, todos lendo de um único dataset:

{
  "config": {
    "type": "dashboard",
    "style": {
      "widget": {
        "color": "#000000",
        "backgroundColor": "#FFFFFF",
        "primaryColor": "#6E2BDC",
        "primaryColorSubtle": "#E2D5F8",
        "secondaryColor": "#CCCCCC"
      }
    }
  },
  "data": {
    "type": "dash",
    "children": [
      { "type": "dash_text", "text": "Orders Overview", "fontSize": "2vw", "justifyContent": "0" },
      {
        "type": "dash_stacker_hor",
        "children": [
          { "type": "dash_chart", "datasetId": "Orders", "chartType": "bar",  "x": "region", "dataFunction": "count" },
          { "type": "dash_chart", "datasetId": "Orders", "chartType": "cell", "x": "region", "y": "category", "dataFunction": "count" }
        ]
      },
      { "type": "dash_table", "datasetId": "Orders" }
    ]
  }
}