Dataformat

Diagram-widgets

Alle diagrammer deler de samme feltene; hvilke av x, y, d og r som brukes, og hvilken kolonnetype hver av dem godtar, avhenger av diagramtypen - hver av de støttede diagramtypene gjennomgås i sitt eget underavsnitt nedenfor, med et levende eksempel generert fra ett lite, felles eksempeldatasett.

• datasetId - datasettet dette diagrammet leser fra - må samsvare med navnet på et datasett.
• chartType - area, bar, cell, dot, hexbin or line.
• title - en valgfri diagramtittel.
• dataFunction - aggregeringen som brukes på d: count (default), sum, average, min, max, median or stddev. La d stå ubrukt når count brukes.
• x - kolonnen for X-dimensjonen (påkrevd for alle diagramtyper).
• y - kolonnen for Y-dimensjonen (kun cell, dot og hexbin - og påkrevd for disse tre).
• d - kolonnen som aggregeres til diagrammets verdi-/fargedimensjon.
• r - kolonnen for radiusdimensjonen (kun dot, og påkrevd).
• seasonX / seasonY - grupperer en tidskolonne i en tilbakevendende periode: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Dimensjonskolonner klassifiseres som kategoriske, tidsbaserte eller kontinuerlige basert på den angitte typen - se avsnittet om datasett-JSON nedenfor. Når dataFunction er count, er d-dimensjonen utelatt - en telling trenger ingen verdikolonne. Enhver annen aggregering (sum, average, min, max, median or stddev) krever den.

Dimensjonene en diagramtype krever, må fylles ut: cell, dot og hexbin kan ikke tegnes uten y, og dot kan ikke tegnes uten r. En forespørsel som utelater en av dem, blir avvist, så hvis datasettet ikke har en egnet kolonne, velg en diagramtype som ikke trenger den - area, bar og line klarer seg med x, og hexbin viser to dimensjoner uten radiuskolonne.

Stolpe

Linje

Areal

Celle

Punkt

Hexbin

Andre widgets

Tabell (dash_table)

Tekst (dash_text)

Bilde (dash_image)

Mellomrom (dash_spacer)

Stablere (dash_stacker_hor, dash_stacker_ver)

Datasett-JSON

Et datasett er ett enkelt JSON-objekt med et navn, typede kolonner og rader:

{
  "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 - datasettets navn; diagrammer og tabeller refererer til det via sitt datasetId-felt.
• headers - kolonnenavnene, i samme rekkefølge som hver rad i entries.
• types - én kolonnetype per header - se kategoriene nedenfor.
• entries - radene, hver et array av verdier i header-rekkefølge.

Valgfritt kan row_start, row_end, col_start og col_end velge et null-indeksert, inkluderende underintervall av entries som skal importeres - nyttig når kun nye rader fra en større tabell skal legges til. Alle fire har som standard hele intervallet:

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

Hver kolonnetype klassifiseres som kategorisk, tidsbasert eller kontinuerlig, noe som avgjør hvilke diagramdimensjoner den kan brukes til - se avsnittene om diagram-widgets ovenfor:

• Kategorisk - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Tid - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Kontinuerlig - alle andre typer, for eksempel INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Kolonnereferanser i et diagram (x, y, d, r) må samsvare nøyaktig med et header-navn, med skille mellom store og små bokstaver.

Styling og temaoverstyringer

Farger på dashboard-nivå angis ett sted i config.style.widget og gjelder for alle widgets som ikke overstyrer dem:

• color - standard tekstfarge.
• backgroundColor - standard bakgrunn for dashboardet.
• primaryColor - forgrunns-/aktiv-seriefargen, brukt for overskrifter og den kryssfiltrerte serien.
• primaryColorSubtle - den lave enden av fargegradienten som brukes av cell-, dot- og hexbin-diagrammer.
• secondaryColor - bakgrunns-/ufiltrert-seriefargen.

Enhver widget kan overstyre sin egen presentasjon direkte på sin JSON-node - backgroundColor, color, padding, borderRadius, borderWidth, borderColor og shadow. Eksemplet nedenfor overstyrer ett diagrams egne farger og hjørner, mens resten av dashboardet beholder det felles temaet:

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

Komplett eksempel

Et lite dashboard som kombinerer en overskrift, to diagrammer side om side og en tabell, alle med data fra ett datasett:

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