데이터 형식

차트 위젯

모든 차트는 동일한 필드를 공유합니다. x, y, d, r 중 어떤 필드를 사용하는지, 그리고 각 필드가 어떤 유형의 컬럼을 받는지는 차트 유형에 따라 달라집니다. 지원되는 차트 유형은 아래에 각각 하위 항목으로 정리되어 있으며, 하나의 작은 공유 샘플 데이터셋으로 렌더링한 실제 예시도 함께 제공됩니다.

• datasetId - 이 차트가 참조하는 데이터셋입니다. 데이터셋의 name과 일치해야 합니다.
• chartType - area, bar, cell, dot, hexbin or line.
• title - 선택적으로 지정하는 차트 제목입니다.
• dataFunction - d에 적용되는 집계 방식입니다: count (default), sum, average, min, max, median or stddev. count를 사용할 때는 d를 설정하지 않습니다.
• x - X 차원에 사용되는 컬럼입니다(모든 차트 유형에서 필수).
• y - Y 차원에 사용되는 컬럼입니다(cell, dot, hexbin 전용이며 이 세 가지에서는 필수).
• d - 차트의 값/색상 차원으로 집계되는 컬럼입니다.
• r - 반지름 차원에 사용되는 컬럼입니다(dot 전용이며 필수).
• seasonX / seasonY - 시간 컬럼을 반복되는 주기로 그룹화합니다: year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second.

차원 컬럼은 선언된 타입에 따라 범주형, 시간형 또는 연속형으로 분류됩니다. 자세한 내용은 아래 데이터셋 JSON 섹션을 참고하십시오. dataFunction이 count인 경우 d 차원은 설정하지 않습니다. count는 값 컬럼이 필요하지 않기 때문입니다. 그 외의 집계 방식(sum, average, min, max, median or stddev)은 값 컬럼이 필요합니다.

차트 유형이 요구하는 차원은 반드시 채워야 합니다. cell, dot, hexbin은 y 없이 그릴 수 없고, dot은 여기에 더해 r 없이 그릴 수 없습니다. 이 중 하나라도 빠진 요청은 거부되므로, 데이터셋에 적합한 컬럼이 없다면 해당 차원이 필요 없는 차트 유형을 선택하십시오. area, bar, line은 x만 있으면 되고, hexbin은 반지름 컬럼 없이 두 개의 차원을 표현합니다.

막대형

선형

영역형

셀형

점형

육각비닝형

기타 위젯

테이블 (dash_table)

텍스트 (dash_text)

이미지 (dash_image)

스페이서 (dash_spacer)

스태커 (dash_stacker_hor, dash_stacker_ver)

데이터셋 JSON

데이터셋은 name, 타입이 지정된 컬럼, 행으로 구성된 하나의 JSON 객체입니다:

{
  "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 - 데이터셋 이름입니다. 차트와 테이블은 datasetId 필드를 통해 이 이름을 참조합니다.
• headers - 컬럼 이름이며, entries의 각 행과 동일한 순서로 지정합니다.
• types - 헤더별로 하나씩 지정하는 컬럼 타입입니다. 아래 분류를 참고하십시오.
• entries - 행 데이터이며, 각 행은 헤더 순서에 따른 값의 배열입니다.

선택적으로 row_start, row_end, col_start, col_end를 지정해 가져올 entries의 하위 범위를 0부터 시작하는 인덱스로, 양 끝을 포함하여 선택할 수 있습니다 - 더 큰 테이블에서 새로 추가된 행만 가져올 때 유용합니다. 네 값 모두 기본적으로 전체 범위로 설정됩니다:

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

모든 컬럼 타입은 범주형, 시간형 또는 연속형으로 분류되며, 이 분류에 따라 어떤 차트 차원에 사용할 수 있는지가 결정됩니다. 자세한 내용은 위의 차트 위젯 섹션을 참고하십시오:

• 범주형 - BIT, BITSTRING, BOOLEAN, BOOL, LOGICAL, BLOB, BYTEA, BINARY, VARBINARY, UUID, VARCHAR, CHAR, BPCHAR, TEXT, STRING
• 시간형 - DATE, TIME, TIMESTAMP, DATETIME, TIMESTAMP WITH TIME ZONE, TIMESTAMPTZ
• 연속형 - 그 외의 모든 타입입니다. 예: INTEGER, FLOAT, DOUBLE, BIGINT, DECIMAL

차트 내 컬럼 참조(x, y, d, r)는 대소문자를 구분하여 헤더 이름과 정확히 일치해야 합니다.

스타일 및 테마 재정의

대시보드 수준의 색상은 config.style.widget에서 한 번 설정하며, 이를 재정의하지 않는 모든 위젯에 적용됩니다:

• color - 기본 텍스트 색상입니다.
• backgroundColor - 기본 대시보드 배경색입니다.
• primaryColor - 전경/활성 시리즈 색상이며, 헤더와 교차 필터링된 트레이스에 사용됩니다.
• primaryColorSubtle - cell, dot, hexbin 차트에서 사용하는 색상 그라데이션의 낮은 쪽 끝 색상입니다.
• secondaryColor - 배경/필터링되지 않은 시리즈 색상입니다.

모든 위젯은 자신의 JSON 노드에서 직접 표시 방식을 재정의할 수 있습니다 - backgroundColor, color, padding, borderRadius, borderWidth, borderColor, shadow가 대상입니다. 아래 예시에서는 대시보드의 나머지 부분은 공유 테마를 그대로 유지하면서, 하나의 차트만 자체 색상과 모서리를 재정의합니다:

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

전체 예제

헤더 하나, 나란히 배치된 차트 두 개, 테이블 하나로 구성되며 모두 하나의 데이터셋을 참조하는 작은 대시보드입니다:

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