Dataformaat

Grafiekwidgets

Elke grafiek deelt dezelfde velden; welke van x, y, d en r worden gebruikt, en welk kolomtype elk daarvan accepteert, hangt af van het grafiektype - elk ondersteund grafiektype wordt hieronder in een eigen subsectie behandeld, met een live voorbeeld dat wordt gerenderd vanuit één kleine gedeelde voorbeelddataset.

• datasetId - de dataset waaruit deze grafiek leest - moet overeenkomen met de naam van een dataset.
• chartType - area, bar, cell, dot, hexbin or line.
• title - een optionele grafiektitel.
• dataFunction - het aggregaat toegepast op d: count (default), sum, average, min, max, median or stddev. Laat d ongedefinieerd wanneer u count gebruikt.
• x - de kolom voor de X-dimensie (verplicht bij elk grafiektype).
• y - de kolom voor de Y-dimensie (alleen cell, dot en hexbin, en daar verplicht).
• d - de kolom die wordt geaggregeerd tot de waarde-/kleurdimensie van de grafiek.
• r - de kolom voor de straaldimensie (alleen dot, en daar verplicht).
• seasonX / seasonY - groepeert een tijdkolom in een terugkerende periode: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Dimensiekolommen worden geclassificeerd als categorisch, tijd of continu op basis van hun opgegeven type - zie de sectie Dataset-JSON hieronder. Wanneer dataFunction gelijk is aan count, blijft de d-dimensie ongedefinieerd - een count heeft geen waardekolom nodig. Elk ander aggregaat (sum, average, min, max, median or stddev) vereist deze wel.

De dimensies die een grafiektype nodig heeft, moeten ingevuld zijn: cell, dot en hexbin kunnen niet worden getekend zonder y, en dot niet zonder r. Een verzoek waarin er een ontbreekt, wordt geweigerd. Heeft de dataset geen geschikte kolom, kies dan een grafiektype dat deze niet nodig heeft - area, bar en line hebben genoeg aan x, en hexbin toont twee dimensies zonder straalkolom.

Staaf

Lijn

Vlak

Cel

Punt

Hexbin

Overige widgets

Tabel (dash_table)

Tekst (dash_text)

Afbeelding (dash_image)

Tussenruimte (dash_spacer)

Stapelaars (dash_stacker_hor, dash_stacker_ver)

Dataset-JSON

Een dataset is een enkel JSON-object met een naam, getypeerde kolommen en rijen:

{
  "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 - de naam van de dataset; grafieken en tabellen verwijzen ernaar via hun datasetId-veld.
• headers - de kolomnamen, in dezelfde volgorde als elke rij in entries.
• types - één kolomtype per header - zie de categorieën hieronder.
• entries - de rijen, elk een array van waarden in de volgorde van de headers.

Optioneel selecteren row_start, row_end, col_start en col_end een nulgebaseerd, inclusief subbereik van entries om te importeren - handig wanneer u alleen nieuwe rijen uit een grotere tabel wilt toevoegen. Alle vier staan standaard op het volledige bereik:

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

Elk kolomtype wordt geclassificeerd als categorisch, tijd of continu, wat bepaalt voor welke grafiekdimensies het kan worden gebruikt - zie de secties over grafiekwidgets hierboven:

• Categorisch - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Tijd - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Continu - elk ander type, bijvoorbeeld INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Kolomverwijzingen in een grafiek (x, y, d, r) moeten exact overeenkomen met een headernaam, hoofdlettergevoelig.

Styling en themaoverschrijvingen

Kleuren op dashboardniveau worden één keer ingesteld in config.style.widget en gelden voor elke widget die ze niet overschrijft:

• color - de standaard tekstkleur.
• backgroundColor - de standaard dashboardachtergrond.
• primaryColor - de voorgrond-/actieve-reekskleur, gebruikt voor koppen en de kruisgefilterde reeks.
• primaryColorSubtle - het lage uiteinde van het kleurverloop gebruikt door cell-, dot- en hexbin-grafieken.
• secondaryColor - de achtergrond-/ongefilterde-reekskleur.

Elke widget kan zijn eigen presentatie rechtstreeks op zijn JSON-node overschrijven - backgroundColor, color, padding, borderRadius, borderWidth, borderColor en shadow. Het onderstaande voorbeeld overschrijft de eigen kleuren en hoeken van één grafiek, terwijl de rest van het dashboard het gedeelde thema behoudt:

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

Volledig voorbeeld

Een klein dashboard dat een header, twee grafieken naast elkaar en een tabel combineert, allemaal lezend uit één 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" }
    ]
  }
}