Datenformat

Diagramm-Widgets

Jedes Diagramm verwendet dieselben Felder; welche der Felder x, y, d und r genutzt werden und welchen Spaltentyp jedes davon akzeptiert, hängt vom Diagrammtyp ab - jeder unterstützte Diagrammtyp wird unten in einem eigenen Unterabschnitt behandelt, mit einem Live-Beispiel, das aus einem kleinen, gemeinsam genutzten Beispieldatensatz gerendert wird.

• datasetId - der Datensatz, aus dem dieses Diagramm liest - muss dem Namen eines Datensatzes entsprechen.
• chartType - area, bar, cell, dot, hexbin or line.
• title - ein optionaler Diagrammtitel.
• dataFunction - die Aggregatfunktion, die auf d angewendet wird: count (default), sum, average, min, max, median or stddev. Lassen Sie d nicht gesetzt, wenn Sie count verwenden.
• x - die Spalte für die X-Dimension (bei jedem Diagrammtyp erforderlich).
• y - die Spalte für die Y-Dimension (nur bei cell, dot und hexbin - und dort erforderlich).
• d - die Spalte, die zur Werte-/Farbdimension des Diagramms aggregiert wird.
• r - die Spalte für die Radius-Dimension (nur bei dot - und dort erforderlich).
• seasonX / seasonY - gruppiert eine Zeitspalte in eine wiederkehrende Periode: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Dimensionsspalten werden anhand ihres deklarierten Typs als kategorisch, zeitbasiert oder kontinuierlich eingestuft - siehe den Abschnitt Datensatz-JSON weiter unten. Wenn dataFunction auf count steht, bleibt die d-Dimension nicht gesetzt - ein count benötigt keine Wertespalte. Jede andere Aggregatfunktion (sum, average, min, max, median or stddev) benötigt sie.

Die von einem Diagrammtyp benötigten Dimensionen müssen gefüllt sein: cell, dot und hexbin lassen sich ohne y nicht zeichnen, dot zusätzlich nicht ohne r. Eine Anfrage, die eine davon auslässt, wird abgelehnt. Enthält der Datensatz keine geeignete Spalte, wählen Sie daher einen Diagrammtyp, der sie nicht benötigt - area, bar und line kommen mit x aus, und hexbin stellt zwei Dimensionen ohne Radiusspalte dar.

Balken

Linie

Fläche

Zelle

Punkt

Hexbin

Weitere Widgets

Tabelle (dash_table)

Text (dash_text)

Bild (dash_image)

Abstandshalter (dash_spacer)

Stapel (dash_stacker_hor, dash_stacker_ver)

Datensatz-JSON

Ein Datensatz ist ein einzelnes JSON-Objekt mit einem Namen, typisierten Spalten und Zeilen:

{
  "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 - der Name des Datensatzes; Diagramme und Tabellen verweisen darauf über ihr datasetId-Feld.
• headers - die Spaltennamen, in derselben Reihenfolge wie jede Zeile in entries.
• types - ein Spaltentyp pro Header - siehe die Kategorien unten.
• entries - die Zeilen, jede ein Array von Werten in der Reihenfolge der Header.

Optional wählen row_start, row_end, col_start und col_end einen nullbasierten, inklusiven Teilbereich von entries für den Import aus - nützlich, wenn aus einer größeren Tabelle nur neue Zeilen angehängt werden sollen. Alle vier verwenden standardmäßig den vollständigen Bereich:

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

Jeder Spaltentyp wird als kategorisch, zeitbasiert oder kontinuierlich eingestuft, was bestimmt, für welche Diagrammdimensionen er verwendet werden kann - siehe die Diagramm-Widget-Abschnitte oben:

• Kategorisch - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Zeit - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Kontinuierlich - jeder andere Typ, zum Beispiel INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Spaltenverweise in einem Diagramm (x, y, d, r) müssen exakt und Groß-/Kleinschreibung-sensitiv mit einem Headernamen übereinstimmen.

Styling und Theme-Overrides

Farben auf Dashboard-Ebene werden einmal in config.style.widget festgelegt und gelten für jedes Widget, das sie nicht überschreibt:

• color - die Standardtextfarbe.
• backgroundColor - der Standard-Dashboard-Hintergrund.
• primaryColor - die Vordergrund-/Farbe der aktiven Serie, verwendet für Header und die kreuzgefilterte Datenreihe.
• primaryColorSubtle - das untere Ende des Farbverlaufs, der von cell-, dot- und hexbin-Diagrammen verwendet wird.
• secondaryColor - die Hintergrund-/Farbe der ungefilterten Serie.

Jedes Widget kann seine eigene Darstellung direkt in seinem JSON-Knoten überschreiben - backgroundColor, color, padding, borderRadius, borderWidth, borderColor und shadow. Das folgende Beispiel überschreibt die eigenen Farben und Ecken eines Diagramms, während der Rest des Dashboards das gemeinsame Theme beibehält:

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

Vollständiges Beispiel

Ein kleines Dashboard, das einen Header, zwei nebeneinander angeordnete Diagramme und eine Tabelle kombiniert, alle aus einem einzigen Datensatz gelesen:

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