Formato de Datos

Widgets de gráficos

Todos los gráficos comparten los mismos campos; cuáles de x, y, d y r se utilizan, y qué tipo de columna acepta cada uno, depende del tipo de gráfico - cada uno de los tipos de gráfico admitidos se describe en su propia subsección más abajo, con un ejemplo en vivo generado a partir de un mismo dataset de muestra compartido.

• datasetId - el dataset del que lee este gráfico - debe coincidir con el nombre de un dataset.
• chartType - area, bar, cell, dot, hexbin or line.
• title - un título de gráfico opcional.
• dataFunction - el agregado aplicado a d: count (default), sum, average, min, max, median or stddev. Deja d sin definir cuando uses count.
• x - la columna para la dimensión X (obligatoria en todos los tipos de gráfico).
• y - la columna para la dimensión Y (solo cell, dot y hexbin, y obligatoria en esos tres).
• d - la columna agregada en la dimensión de valor/color del gráfico.
• r - la columna para la dimensión de radio (solo dot, y obligatoria).
• seasonX / seasonY - agrupa una columna de tiempo en un período recurrente: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Las columnas de dimensión se clasifican como categóricas, temporales o continuas según su tipo declarado - ver la sección JSON del dataset más abajo. Cuando dataFunction es count, la dimensión d se deja sin definir - un count no necesita columna de valor. Cualquier otro agregado (sum, average, min, max, median or stddev) sí la requiere.

Las dimensiones que exige cada tipo de gráfico deben rellenarse: cell, dot y hexbin no pueden dibujarse sin y, y dot tampoco sin r. Una solicitud que omita alguna se rechaza, así que si el dataset no tiene una columna adecuada, elige un tipo de gráfico que no la necesite - area, bar y line solo requieren x, y hexbin representa dos dimensiones sin columna de radio.

Barras

Líneas

Área

Celdas

Puntos

Hexagonal

Otros widgets

Tabla (dash_table)

Texto (dash_text)

Imagen (dash_image)

Espaciador (dash_spacer)

Apiladores (dash_stacker_hor, dash_stacker_ver)

JSON del dataset

Un dataset es un único objeto JSON con un nombre, columnas tipadas y filas:

{
  "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 - el nombre del dataset; los gráficos y las tablas lo referencian mediante su campo datasetId.
• headers - los nombres de columna, en el mismo orden que cada fila en las entradas.
• types - un tipo de columna por encabezado - ver las categorías más abajo.
• entries - las filas, cada una un array de valores en el orden de los encabezados.

Opcionalmente, row_start, row_end, col_start y col_end seleccionan un subrango inclusivo, indexado desde cero, de entradas a importar - útil cuando se agregan solo filas nuevas de una tabla más grande. Los cuatro tienen por defecto el rango 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 columna se clasifica como categórico, temporal o continuo, lo que determina para qué dimensiones de gráfico se puede utilizar - ver las secciones de widgets de gráficos más arriba:

• Categórica - 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
• Continua - cualquier otro tipo, por ejemplo INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Las referencias a columnas en un gráfico (x, y, d, r) deben coincidir exactamente con un nombre de encabezado, distinguiendo entre mayúsculas y minúsculas.

Estilos y anulaciones de tema

Los colores a nivel de dashboard se definen una vez en config.style.widget y se aplican a todos los widgets que no los anulen:

• color - el color de texto por defecto.
• backgroundColor - el fondo por defecto del dashboard.
• primaryColor - el color de primer plano/serie activa, utilizado para los encabezados y la traza con filtro cruzado.
• primaryColorSubtle - el extremo inferior del degradado de color utilizado por los gráficos cell, dot y hexbin.
• secondaryColor - el color de fondo/serie sin filtrar.

Cualquier widget puede anular su propia presentación directamente en su nodo JSON - backgroundColor, color, padding, borderRadius, borderWidth, borderColor y shadow. El siguiente ejemplo anula los colores y las esquinas propios de un gráfico, mientras que el resto del dashboard conserva el tema compartido:

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

Ejemplo completo

Un pequeño dashboard que combina un encabezado, dos gráficos uno junto al otro y una tabla, todos leyendo de un mismo 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" }
    ]
  }
}