Định dạng dữ liệu

Các Widget Biểu Đồ

Mọi biểu đồ đều có chung các trường; trường nào trong số x, y, d và r được sử dụng, và loại cột mà mỗi trường chấp nhận, phụ thuộc vào loại biểu đồ - mỗi loại biểu đồ được hỗ trợ được trình bày trong một mục con riêng bên dưới, kèm theo ví dụ trực quan được dựng từ một dataset mẫu nhỏ dùng chung.

• datasetId - dataset mà biểu đồ này đọc dữ liệu - phải khớp với tên của một dataset.
• chartType - area, bar, cell, dot, hexbin or line.
• title - tiêu đề biểu đồ, không bắt buộc.
• dataFunction - hàm tổng hợp áp dụng cho d: count (default), sum, average, min, max, median or stddev. Không thiết lập d khi dùng count.
• x - cột cho chiều X (bắt buộc với mọi loại biểu đồ).
• y - cột cho chiều Y (chỉ áp dụng cho cell, dot và hexbin, và bắt buộc với ba loại này).
• d - cột được tổng hợp vào chiều giá trị/màu sắc của biểu đồ.
• r - cột cho chiều bán kính (chỉ áp dụng cho dot, và bắt buộc).
• seasonX / seasonY - nhóm một cột thời gian thành một chu kỳ lặp lại: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

Các cột chiều được phân loại là phân loại, thời gian hoặc liên tục dựa trên kiểu đã khai báo của chúng - xem phần JSON dataset bên dưới. Khi dataFunction là count, chiều d được để trống - count không cần cột giá trị. Bất kỳ hàm tổng hợp nào khác (sum, average, min, max, median or stddev) đều yêu cầu chiều đó.

Các chiều mà một loại biểu đồ yêu cầu đều phải được điền: cell, dot và hexbin không thể vẽ nếu thiếu y, còn dot không thể vẽ nếu thiếu r. Yêu cầu bỏ sót một trong số đó sẽ bị từ chối, vì vậy nếu dataset không có cột phù hợp, hãy chọn loại biểu đồ không cần đến chiều đó - area, bar và line chỉ cần x, còn hexbin thể hiện hai chiều mà không cần cột bán kính.

Cột

Đường

Vùng

Ô

Điểm

Hexbin

Các Widget Khác

Bảng (dash_table)

Văn Bản (dash_text)

Hình Ảnh (dash_image)

Khoảng Trống (dash_spacer)

Bộ Xếp Chồng (dash_stacker_hor, dash_stacker_ver)

Dataset JSON

Một dataset là một đối tượng JSON duy nhất gồm tên, các cột có kiểu và các dòng dữ liệu:

{
  "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 - tên dataset; các biểu đồ và bảng tham chiếu đến nó qua trường datasetId của chúng.
• headers - tên các cột, theo đúng thứ tự với mỗi dòng trong entries.
• types - một kiểu cột cho mỗi header - xem các nhóm bên dưới.
• entries - các dòng dữ liệu, mỗi dòng là một mảng giá trị theo thứ tự header.

Nếu muốn, row_start, row_end, col_start và col_end cho phép chọn một khoảng con của entries để nhập, được đánh chỉ số từ 0 và bao gồm cả hai đầu - hữu ích khi chỉ muốn thêm các dòng mới từ một bảng lớn hơn. Cả bốn tham số này mặc định là toàn bộ phạm vi:

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

Mỗi kiểu cột được phân loại là phân loại, thời gian hoặc liên tục, điều này quyết định cột đó có thể được dùng cho những chiều biểu đồ nào - xem các phần widget biểu đồ ở trên:

• Phân Loại - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• Thời Gian - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• Liên Tục - mọi kiểu khác, ví dụ INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

Các tham chiếu cột trong biểu đồ (x, y, d, r) phải khớp chính xác với tên header, phân biệt chữ hoa/thường.

Định Dạng và Ghi Đè Theme

Màu sắc ở cấp dashboard được thiết lập một lần trong config.style.widget và áp dụng cho mọi widget không ghi đè chúng:

• color - màu chữ mặc định.
• backgroundColor - màu nền mặc định của dashboard.
• primaryColor - màu tiền cảnh/chuỗi dữ liệu đang hoạt động, dùng cho tiêu đề và chuỗi dữ liệu được lọc chéo.
• primaryColorSubtle - đầu thấp của dải gradient màu dùng cho biểu đồ cell, dot và hexbin.
• secondaryColor - màu nền/chuỗi dữ liệu chưa lọc.

Bất kỳ widget nào cũng có thể ghi đè cách trình bày riêng của nó trực tiếp trên node JSON - backgroundColor, color, padding, borderRadius, borderWidth, borderColor và shadow. Ví dụ bên dưới ghi đè màu sắc và góc của riêng một biểu đồ, trong khi phần còn lại của dashboard vẫn giữ theme dùng chung:

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

Ví Dụ Đầy Đủ

Một dashboard nhỏ kết hợp phần tiêu đề, hai biểu đồ đặt cạnh nhau và một bảng, tất cả đều đọc dữ liệu từ một dataset:

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