Veri Formatı

Grafik Widget’ları

Her grafik aynı alanları paylaşır; x, y, d ve r alanlarından hangilerinin kullanılacağı ve her birinin hangi sütun türünü kabul ettiği grafik türüne bağlıdır - desteklenen her grafik türü, ortak küçük bir örnek veri kümesinden oluşturulmuş canlı bir örnekle birlikte aşağıda kendi alt bölümünde ele alınmıştır.

• datasetId - bu grafiğin okuduğu veri kümesi - bir veri kümesinin adıyla eşleşmelidir.
• chartType - area, bar, cell, dot, hexbin or line.
• title - isteğe bağlı bir grafik başlığı.
• dataFunction - d’ye uygulanan toplama işlevi: count (default), sum, average, min, max, median or stddev. count kullanılırken d ayarlanmadan bırakılmalıdır.
• x - X boyutu için sütun (tüm grafik türlerinde zorunludur).
• y - Y boyutu için sütun (yalnızca cell, dot ve hexbin için; bu üçünde zorunludur).
• d - grafiğin değer/renk boyutuna göre toplanan sütun.
• r - yarıçap boyutu için sütun (yalnızca dot için; dot’ta zorunludur).
• seasonX / seasonY - bir zaman sütununu tekrarlayan bir döneme göre gruplandırır: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Boyut sütunları, bildirilen türlerine göre kategorik, zaman veya sürekli olarak sınıflandırılır - aşağıdaki veri kümesi JSON bölümüne bakın. dataFunction count olduğunda, d boyutu ayarlanmadan bırakılır - bir sayım için değer sütununa gerek yoktur. Diğer tüm toplama işlevleri (sum, average, min, max, median or stddev) bunu gerektirir.

Bir grafik türünün gerektirdiği boyutlar mutlaka doldurulmalıdır: cell, dot ve hexbin y olmadan çizilemez, dot ise ayrıca r olmadan çizilemez. Bunlardan birini atlayan istek reddedilir; bu nedenle veri kümesinde uygun bir sütun yoksa o boyuta ihtiyaç duymayan bir grafik türü seçin - area, bar ve line yalnızca x ile çalışır, hexbin ise yarıçap sütunu olmadan iki boyutu gösterir.

Çubuk

Çizgi

Alan

Hücre

Nokta

Altıgen Bölme

Diğer Widget’lar

Tablo (dash_table)

Metin (dash_text)

Görsel (dash_image)

Boşluk (dash_spacer)

Yığıcılar (dash_stacker_hor, dash_stacker_ver)

Veri Kümesi JSON’u

Bir veri kümesi; ada, türü belirlenmiş sütunlara ve satırlara sahip tek bir JSON nesnesidir:

{
  "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 - veri kümesinin adı; grafikler ve tablolar buna datasetId alanları üzerinden referans verir.
• headers - entries içindeki her satırla aynı sırada olan sütun adları.
• types - her başlık için bir sütun türü - aşağıdaki kategorilere bakın.
• entries - başlık sırasına göre değerlerden oluşan bir dizi olan her satır.

İsteğe bağlı olarak, row_start, row_end, col_start ve col_end, içe aktarılacak entries için sıfır tabanlı, dahil edici bir alt aralık seçer - daha büyük bir tablodan yalnızca yeni satırları eklerken kullanışlıdır. Dördü de varsayılan olarak tüm aralığı kapsar:

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

Her sütun türü kategorik, zaman veya sürekli olarak sınıflandırılır; bu sınıflandırma, sütunun hangi grafik boyutlarında kullanılabileceğini belirler - yukarıdaki grafik widget bölümlerine bakın:

• Kategorik - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Zaman - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Sürekli - diğer tüm türler, örneğin INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Bir grafikteki sütun referansları (x, y, d, r) bir başlık adıyla büyük/küçük harf duyarlı olarak birebir eşleşmelidir.

Stillendirme ve Tema Geçersiz Kılmaları

Dashboard düzeyindeki renkler config.style.widget içinde bir kez ayarlanır ve bunları geçersiz kılmayan her widget’a uygulanır:

• color - varsayılan metin rengi.
• backgroundColor - varsayılan dashboard arka planı.
• primaryColor - başlıklar ve çapraz filtrelenmiş iz için kullanılan ön plan/etkin seri rengi.
• primaryColorSubtle - cell, dot ve hexbin grafiklerinin kullandığı renk geçişinin alt ucu.
• secondaryColor - arka plan/filtrelenmemiş seri rengi.

Herhangi bir widget, kendi JSON düğümü üzerinde doğrudan kendi sunumunu geçersiz kılabilir - backgroundColor, color, padding, borderRadius, borderWidth, borderColor ve shadow. Aşağıdaki örnek, dashboard’un geri kalanı ortak temayı korurken bir grafiğin kendi renklerini ve köşelerini geçersiz kılar:

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

Tam Örnek

Bir başlık, yan yana iki grafik ve bir tabloyu birleştiren, tümü tek bir veri kümesinden okuyan küçük bir dashboard:

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