Format danych

Widżety wykresów

Każdy wykres współdzieli te same pola; to, których pól spośród x, y, d i r użyto oraz jaki typ kolumny przyjmuje każde z nich, zależy od typu wykresu - każdy z obsługiwanych typów wykresów omówiono w osobnej podsekcji poniżej, wraz z działającym przykładem wyrenderowanym na podstawie jednego małego, wspólnego przykładowego zbioru danych.

• datasetId - zbiór danych, z którego korzysta ten wykres - musi być zgodny z nazwą zbioru danych.
• chartType - area, bar, cell, dot, hexbin or line.
• title - opcjonalny tytuł wykresu.
• dataFunction - agregacja stosowana do d: count (default), sum, average, min, max, median or stddev. Gdy używasz count, pozostaw d nieustawione.
• x - kolumna dla wymiaru X (wymagana w każdym typie wykresu).
• y - kolumna dla wymiaru Y (tylko cell, dot i hexbin - i w tych trzech wymagana).
• d - kolumna agregowana do wymiaru wartości/koloru wykresu.
• r - kolumna dla wymiaru promienia (tylko dot - i tam wymagana).
• seasonX / seasonY - grupuje kolumnę czasową w powtarzający się okres: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Kolumny wymiarów są klasyfikowane jako kategoryczne, czasowe lub ciągłe na podstawie zadeklarowanego typu - patrz sekcja JSON zbioru danych poniżej. Gdy dataFunction ma wartość count, wymiar d pozostaje nieustawiony - zliczanie nie wymaga kolumny wartości. Każda inna agregacja (sum, average, min, max, median or stddev) jej wymaga.

Wymiary wymagane przez dany typ wykresu muszą zostać uzupełnione: cell, dot i hexbin nie da się narysować bez y, a dot dodatkowo bez r. Żądanie, w którym brakuje któregoś z nich, jest odrzucane, więc jeśli zbiór danych nie ma odpowiedniej kolumny, wybierz typ wykresu, który jej nie potrzebuje - area, bar i line wystarczy x, a hexbin przedstawia dwa wymiary bez kolumny promienia.

Słupkowy

Liniowy

Warstwowy

Komórkowy

Punktowy

Heksagonalny

Pozostałe widżety

Tabela (dash_table)

Tekst (dash_text)

Obraz (dash_image)

Odstęp (dash_spacer)

Kontenery (dash_stacker_hor, dash_stacker_ver)

JSON zbioru danych

Zbiór danych to pojedynczy obiekt JSON z nazwą, typowanymi kolumnami i wierszami:

{
  "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 - nazwa zbioru danych; wykresy i tabele odwołują się do niej za pomocą pola datasetId.
• headers - nazwy kolumn, w tej samej kolejności co wartości w każdym wierszu w entries.
• types - jeden typ kolumny na każdy nagłówek - patrz kategorie poniżej.
• entries - wiersze, każdy jako tablica wartości w kolejności nagłówków.

Opcjonalnie row_start, row_end, col_start i col_end pozwalają wybrać indeksowany od zera, obustronnie domknięty podzakres wpisów do zaimportowania - przydatne, gdy dodajesz tylko nowe wiersze z większej tabeli. Wszystkie cztery domyślnie obejmują pełny zakres:

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

Każdy typ kolumny jest klasyfikowany jako kategoryczny, czasowy lub ciągły, co określa, do których wymiarów wykresu może zostać użyty - patrz sekcje widżetów wykresów powyżej:

• Kategoryczny - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Czasowy - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Ciągły - każdy inny typ, na przykład INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Odwołania do kolumn w wykresie (x, y, d, r) muszą dokładnie odpowiadać nazwie nagłówka, z uwzględnieniem wielkości liter.

Stylowanie i nadpisywanie motywu

Kolory na poziomie dashboardu ustawia się raz w config.style.widget, a stosowane są do każdego widżetu, który ich nie nadpisuje:

• color - domyślny kolor tekstu.
• backgroundColor - domyślne tło dashboardu.
• primaryColor - kolor pierwszoplanowy/aktywnej serii, używany w nagłówkach i dla przebiegu podlegającego filtrowaniu krzyżowemu.
• primaryColorSubtle - dolny koniec gradientu kolorów używanego przez wykresy cell, dot i hexbin.
• secondaryColor - kolor tła/serii niepodlegającej filtrowaniu.

Każdy widżet może nadpisać własną prezentację bezpośrednio w swoim węźle JSON - backgroundColor, color, padding, borderRadius, borderWidth, borderColor i shadow. Poniższy przykład nadpisuje własne kolory i zaokrąglenia rogów jednego wykresu, podczas gdy reszta dashboardu zachowuje wspólny motyw:

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

Pełny przykład

Niewielki dashboard łączący nagłówek, dwa wykresy obok siebie oraz tabelę, wszystkie korzystające z jednego zbioru danych:

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