Format de données

Widgets graphiques

Chaque graphique partage les mêmes champs ; lesquels parmi x, y, d et r sont utilisés, ainsi que le type de colonne accepté par chacun, dépendent du type de graphique - chaque type de graphique pris en charge est détaillé dans sa propre sous-section ci-dessous, avec un exemple interactif généré à partir d’un même petit jeu de données d’exemple.

• datasetId - le jeu de données que ce graphique exploite - doit correspondre au nom d’un jeu de données.
• chartType - area, bar, cell, dot, hexbin or line.
• title - un titre de graphique facultatif.
• dataFunction - l’agrégat appliqué à d : count (default), sum, average, min, max, median or stddev. Laissez d non défini lorsque vous utilisez count.
• x - la colonne pour la dimension X (obligatoire pour tous les types de graphique).
• y - la colonne pour la dimension Y (cell, dot et hexbin uniquement, et obligatoire pour ces trois types).
• d - la colonne agrégée dans la dimension valeur/couleur du graphique.
• r - la colonne pour la dimension du rayon (dot uniquement, et obligatoire).
• seasonX / seasonY - regroupe une colonne temporelle selon une période récurrente : year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Les colonnes de dimension sont classées comme catégorielles, temporelles ou continues selon leur type déclaré - voir la section JSON du jeu de données ci-dessous. Lorsque dataFunction vaut count, la dimension d est laissée non définie - un count n’a besoin d’aucune colonne de valeur. Tout autre agrégat (sum, average, min, max, median or stddev) la nécessite.

Les dimensions requises par un type de graphique doivent être renseignées : cell, dot et hexbin ne peuvent pas être tracés sans y, et dot ne peut pas l’être sans r. Une requête qui en omet une est rejetée ; si le jeu de données ne contient pas de colonne adaptée, choisissez donc un type de graphique qui n’en a pas besoin - area, bar et line se contentent de x, et hexbin trace deux dimensions sans colonne de rayon.

Barres

Courbes

Aires

Cellules

Points

Hexagones

Autres widgets

Tableau (dash_table)

Texte (dash_text)

Image (dash_image)

Espaceur (dash_spacer)

Empileurs (dash_stacker_hor, dash_stacker_ver)

JSON du jeu de données

Un jeu de données est un unique objet JSON comportant un nom, des colonnes typées et des lignes :

{
  "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 - le nom du jeu de données ; les graphiques et les tableaux y font référence via leur champ datasetId.
• headers - les noms des colonnes, dans le même ordre que chaque ligne dans entries.
• types - un type de colonne par en-tête - voir les catégories ci-dessous.
• entries - les lignes, chacune étant un tableau de valeurs dans l’ordre des en-têtes.

Facultativement, row_start, row_end, col_start et col_end permettent de sélectionner une sous-plage de entries à importer, indexée à partir de zéro et incluse aux deux bornes - utile pour n’ajouter que les nouvelles lignes d’un tableau plus large. Les quatre valeurs couvrent la plage complète par défaut :

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

Chaque type de colonne est classé comme catégoriel, temporel ou continu, ce qui détermine les dimensions de graphique pour lesquelles il peut être utilisé - voir les sections sur les widgets graphiques ci-dessus :

• Catégoriel - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Temporel - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Continu - tout autre type, par exemple INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Les références de colonnes dans un graphique (x, y, d, r) doivent correspondre exactement au nom d’un en-tête, en respectant la casse.

Mise en forme et surcharges de thème

Les couleurs au niveau du tableau de bord sont définies une seule fois dans config.style.widget et s’appliquent à tous les widgets qui ne les surchargent pas :

• color - la couleur de texte par défaut.
• backgroundColor - l’arrière-plan par défaut du tableau de bord.
• primaryColor - la couleur de premier plan/de la série active, utilisée pour les en-têtes et la série affectée par le filtrage croisé.
• primaryColorSubtle - l’extrémité basse du dégradé de couleurs utilisé par les graphiques cell, dot et hexbin.
• secondaryColor - la couleur d’arrière-plan/de la série non filtrée.

Chaque widget peut surcharger sa propre présentation directement sur son nœud JSON - backgroundColor, color, padding, borderRadius, borderWidth, borderColor et shadow. L’exemple ci-dessous surcharge les couleurs et les angles d’un graphique, tandis que le reste du tableau de bord conserve le thème partagé :

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

Exemple complet

Un petit tableau de bord combinant un en-tête, deux graphiques côte à côte et un tableau, tous alimentés par le même jeu de données :

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