Format Data

Widget Chart

Setiap chart memiliki field yang sama; field mana saja di antara x, y, d dan r yang digunakan, serta tipe kolom apa yang diterima masing-masing, tergantung pada jenis chart-nya - setiap jenis chart yang didukung dibahas dalam subbagiannya masing-masing di bawah ini, lengkap dengan contoh langsung yang dirender dari satu dataset sampel kecil yang sama.

• datasetId - dataset yang menjadi sumber data chart ini - harus sesuai dengan nama sebuah dataset.
• chartType - area, bar, cell, dot, hexbin or line.
• title - judul chart, bersifat opsional.
• dataFunction - fungsi agregat yang diterapkan pada d: count (default), sum, average, min, max, median or stddev. Biarkan d tidak diisi saat menggunakan count.
• x - kolom untuk dimensi X (wajib untuk semua tipe chart).
• y - kolom untuk dimensi Y (hanya untuk cell, dot dan hexbin, dan wajib pada ketiganya).
• d - kolom yang diagregasi ke dalam dimensi nilai/warna chart.
• r - kolom untuk dimensi radius (hanya untuk dot, dan wajib).
• seasonX / seasonY - mengelompokkan kolom waktu ke dalam periode berulang: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Kolom dimensi diklasifikasikan sebagai kategorikal, waktu, atau kontinu berdasarkan tipe yang dideklarasikan - lihat bagian JSON dataset di bawah. Saat dataFunction adalah count, dimensi d dibiarkan tidak diisi - count tidak memerlukan kolom nilai. Agregat lainnya (sum, average, min, max, median or stddev) memerlukannya.

Dimensi yang diwajibkan oleh sebuah tipe chart harus diisi: cell, dot, dan hexbin tidak dapat digambar tanpa y, dan dot tidak dapat digambar tanpa r. Permintaan yang menghilangkan salah satunya akan ditolak, jadi jika dataset tidak memiliki kolom yang sesuai, pilih tipe chart yang tidak membutuhkannya - area, bar, dan line hanya memerlukan x, dan hexbin menampilkan dua dimensi tanpa kolom radius.

Batang

Garis

Area

Sel

Titik

Hexbin

Widget Lainnya

Tabel (dash_table)

Teks (dash_text)

Gambar (dash_image)

Ruang Kosong (dash_spacer)

Penumpuk (dash_stacker_hor, dash_stacker_ver)

JSON Dataset

Sebuah dataset adalah satu objek JSON dengan nama, kolom bertipe, dan baris:

{
  "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 - nama dataset; chart dan tabel merujuknya melalui field datasetId masing-masing.
• headers - nama kolom, dengan urutan yang sama seperti setiap baris pada entries.
• types - satu tipe kolom untuk setiap header - lihat kategori di bawah.
• entries - baris data, masing-masing berupa array nilai sesuai urutan header.

Secara opsional, row_start, row_end, col_start dan col_end memilih sub-rentang entries yang akan diimpor, berbasis indeks nol dan inklusif - berguna saat hanya ingin menambahkan baris baru dari tabel yang lebih besar. Keempatnya secara default mencakup rentang penuh:

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

Setiap tipe kolom diklasifikasikan sebagai kategorikal, waktu, atau kontinu, yang menentukan dimensi chart mana yang bisa menggunakannya - lihat bagian widget chart di atas:

• Kategorikal - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Waktu - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Kontinu - tipe lainnya, misalnya INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Referensi kolom pada chart (x, y, d, r) harus sesuai persis dengan nama header, case-sensitive.

Styling dan Override Tema

Warna tingkat dashboard diatur sekali di config.style.widget dan berlaku untuk setiap widget yang tidak meng-override-nya:

• color - warna teks default.
• backgroundColor - latar belakang default dashboard.
• primaryColor - warna foreground/seri aktif, digunakan untuk header dan trace yang ter-cross-filter.
• primaryColorSubtle - ujung bawah gradien warna yang digunakan oleh chart cell, dot dan hexbin.
• secondaryColor - warna background/seri yang tidak difilter.

Widget apa pun dapat meng-override presentasinya sendiri langsung pada node JSON-nya - backgroundColor, color, padding, borderRadius, borderWidth, borderColor dan shadow. Contoh di bawah ini meng-override warna dan sudut satu chart tertentu, sementara bagian dashboard lainnya tetap menggunakan tema bersama:

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

Contoh Lengkap

Sebuah dashboard kecil yang menggabungkan header, dua chart berdampingan, dan satu tabel, semuanya membaca dari satu dataset yang sama:

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