データ形式

チャートウィジェット

すべてのチャートは同じフィールドを共有していますが、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のみ。これら3つでは必須）。
• d - チャートの値・色の次元に集計される列です。
• r - 半径の次元に対応する列です（dotのみ。dotでは必須）。
• seasonX / seasonY - 時間列を周期的な単位でグループ化します。year, quarter, month, week, dayofyear, day, dayofweek, hour, minute or second のいずれかです。

次元の列は、宣言された型に基づいてカテゴリ型、時間型、連続型のいずれかに分類されます。詳細は後述のデータセットJSONのセクションを参照してください。dataFunctionがcountの場合、dの次元は未設定のままにします。カウントには値の列が不要だからです。それ以外の集計（sum, average, min, max, median or stddev）を使う場合はこれが必要です。

チャートタイプが必要とする次元は必ず指定してください。cell、dot、hexbinはyがないと描画できず、dotはさらにrがないと描画できません。いずれかが欠けたリクエストは拒否されるため、データセットに適した列がない場合は、その次元を必要としないチャートタイプを選んでください。area、bar、lineはxだけで描画でき、hexbinは半径の列なしで2つの次元を表現できます。

棒グラフ

折れ線グラフ

面グラフ

ヒートマップ

バブルチャート

ヘックスビン

その他のウィジェット

テーブル（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の中からゼロ始まりで両端を含む部分範囲を選択してインポートできます。より大きなテーブルから新しい行だけを追加する場合に便利です。これら4つはいずれもデフォルトで全範囲を対象とします。

{
  "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です。以下の例では、ダッシュボードの他の部分は共通テーマを維持したまま、1つのチャートだけ独自の色と角丸をオーバーライドしています。

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

完全な例

ヘッダー、横に並んだ2つのチャート、テーブルを組み合わせた小さなダッシュボードの例です。すべて1つのデータセットから読み込んでいます。

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