Formato Dati

Widget dei grafici

Ogni grafico condivide gli stessi campi; quali tra x, y, d e r vengono utilizzati, e quale tipo di colonna ciascuno accetta, dipende dal tipo di grafico - ogni tipo di grafico supportato è trattato nella propria sottosezione qui sotto, con un esempio live generato da un unico piccolo dataset di esempio condiviso.

• datasetId - il dataset da cui il grafico legge i dati - deve corrispondere al nome di un dataset.
• chartType - area, bar, cell, dot, hexbin or line.
• title - un titolo del grafico facoltativo.
• dataFunction - l’aggregazione applicata a d: count (default), sum, average, min, max, median or stddev. Lascia d non impostato quando usi count.
• x - la colonna per la dimensione X (obbligatoria per tutti i tipi di grafico).
• y - la colonna per la dimensione Y (solo per cell, dot e hexbin, e obbligatoria per questi tre).
• d - la colonna aggregata nella dimensione di valore/colore del grafico.
• r - la colonna per la dimensione del raggio (solo per dot, e obbligatoria).
• seasonX / seasonY - raggruppa una colonna temporale in un periodo ricorrente: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Le colonne di dimensione sono classificate come categoriali, temporali o continue in base al tipo dichiarato - vedi la sezione JSON del dataset qui sotto. Quando dataFunction è count, la dimensione d viene lasciata non impostata - un conteggio (count) non richiede una colonna di valore. Qualsiasi altra aggregazione (sum, average, min, max, median or stddev) la richiede.

Le dimensioni richieste da un tipo di grafico devono essere valorizzate: cell, dot e hexbin non possono essere disegnati senza y, e dot non può esserlo senza r. Una richiesta che ne omette una viene rifiutata, quindi se il dataset non ha una colonna adatta, scegli un tipo di grafico che non la richieda - area, bar e line usano solo x, mentre hexbin rappresenta due dimensioni senza colonna del raggio.

Barre

Linee

Area

Celle

Punti

Hexbin

Altri widget

Tabella (dash_table)

Testo (dash_text)

Immagine (dash_image)

Spaziatore (dash_spacer)

Impilatori (dash_stacker_hor, dash_stacker_ver)

JSON del dataset

Un dataset è un singolo oggetto JSON con un nome, colonne tipizzate e righe:

{
  "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 - il nome del dataset; i grafici e le tabelle lo referenziano tramite il proprio campo datasetId.
• headers - i nomi delle colonne, nello stesso ordine di ogni riga in entries.
• types - un tipo di colonna per ogni intestazione - vedi le categorie qui sotto.
• entries - le righe, ciascuna un array di valori nell’ordine delle intestazioni.

Facoltativamente, row_start, row_end, col_start e col_end selezionano un sottointervallo di entries da importare, con indicizzazione a partire da zero e inclusivo - utile quando si aggiungono solo nuove righe da una tabella più grande. Tutti e quattro, per impostazione predefinita, coprono l’intero intervallo:

{
  "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
}

Ogni tipo di colonna è classificato come categoriale, temporale o continuo, il che determina per quali dimensioni del grafico può essere utilizzato - vedi le sezioni sui widget dei grafici qui sopra:

• Categoriale - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Temporale - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Continuo - ogni altro tipo, ad esempio INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

I riferimenti alle colonne in un grafico (x, y, d, r) devono corrispondere esattamente al nome di un’intestazione, con distinzione tra maiuscole e minuscole.

Stile e override del tema

I colori a livello di dashboard vengono impostati una sola volta in config.style.widget e si applicano a ogni widget che non li sovrascrive:

• color - il colore del testo predefinito.
• backgroundColor - lo sfondo predefinito della dashboard.
• primaryColor - il colore di primo piano/della serie attiva, utilizzato per le intestazioni e per la traccia filtrata in modo incrociato.
• primaryColorSubtle - l’estremità inferiore del gradiente di colore utilizzato dai grafici cell, dot e hexbin.
• secondaryColor - il colore di sfondo/della serie non filtrata.

Ogni widget può sovrascrivere la propria presentazione direttamente sul suo nodo JSON - backgroundColor, color, padding, borderRadius, borderWidth, borderColor e shadow. L’esempio seguente sovrascrive i colori e gli angoli di un singolo grafico, mentre il resto della dashboard mantiene il tema condiviso:

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

Esempio completo

Una piccola dashboard che combina un’intestazione, due grafici affiancati e una tabella, tutti che leggono da un unico 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" }
    ]
  }
}