データポータル コミュニティ コンポーネント(dscc)ライブラリのリファレンス

API の概要

データポータルのコミュニティ コンポーネント(dscc)は、データポータル向けのコミュニティ コンポーネントの構築を支援するライブラリです。ソースコードは GitHub にあります。

dscc では、getWidth()getHeight()subscribeToData() の 3 つの関数が公開されています。

getWidth()

名前 パラメータ 戻り値の型 説明
getWidth() なし number iframe の幅(ピクセル単位)を返します。

getWidth() の使用

// to get the width of the iframe
    var width = dscc.getWidth();
    

getHeight()

名前 パラメータ 戻り値の型 説明
getHeight() なし int iframe の高さ(ピクセル単位)を返します。

getHeight() の使用

// to get the height of the iframe
    var height = dscc.getHeight();
    

sendInteraction()

sendInteraction() 関数で、フィルタのデータとともにメッセージをデータポータルに送信します。

パラメータ:

名前 説明
actionID string 設定内の actionId に対応する文字列
interaction enum(InteractionType) インタラクションについてデータポータルに通知します
data object(InteractionData) インタラクションに必要なデータを提供します

InteractionType

現在、有効な InteractionTypeFILTER のみです。

名前 説明
dscc.InteractionType.FILTER Enum FILTER インタラクションについて説明します。

sendInteraction の使用


    // the actionID can either be hardcoded or parsed from the returned data
    var actionId = "interactionConfigId";

    // dscc provides enums for the interaction types
    var FILTER = dscc.InteractionType.FILTER;

    var fieldID = "qt_m9dtntutsb";
    var dataValue = "Asia";

    // sendInteraction expects data that tells you the concepts and the values of
    // those concepts to use in constructing a filter.
    var interactionData = {
      "concepts": [fieldId],
      "values": [[dataValue]]
    }

    dscc.sendInteraction(actionId, FILTER, interactionData);
    

interactionData

var interactionData = {
      "concepts": array(fieldId),
      "values": array(array(dataValue))
    }
    
フィールド 説明
concepts Array fieldIds の配列
values Array<Array> データ値のネストされた配列。各サブ配列は、concepts 配列の長さでなければなりません。サブ配列の各値は、ディメンション値に対応しています。

サンプル interactionData:

var interactionData = {
      "concepts": ["dim1Id", "dim2Id"],
      "values": [
        ["dim1Val1", "dim2Val1"],
        ["dim1Val2", "dim2Val2"]
        ]
    }
    

上記の interactionData での dscc.sendInteraction の使用は、次の SQL 文と同じです。

SELECT data WHERE
      (dim1 == dim1Val1 AND dim2 == dim2Val1)
      OR
      (dim1 == dim1Val2 AND dim2 == dim2Val2);
    

clearInteraction()

clearInteraction() 関数で、メッセージをデータポータルに送信して、このビジュアリゼーションで以前に設定したフィルタを消去します。

パラメータ:

名前 説明
actionID string 設定内の actionId に対応する文字列
interaction enum(InteractionType) インタラクションについてデータポータルに通知します

clearInteraction() の使用


    // the actionID can either be hardcoded or parsed from the returned data
    var actionId = "interactionConfigId";

    // dscc provides enums for the interaction types
    var FILTER = dscc.InteractionType.FILTER;

    dscc.clearInteraction(actionId, FILTER);
    

subscribeToData(callback, options)

subscribeToData() 関数で、データポータルからのメッセージをサブスクライブします。

パラメータ:

名前 説明
callback(data) function subscribeToData によって返されたデータを取得する関数。
options object 目的のデータ戻り値形式を定義します。

オプション オブジェクトは次のようになります。

{
      transform: dscc.tableTransform | dscc.objectTransform
    }
    

戻り値:

説明
function データポータルからの以降のメッセージからの callback をサブスクライブ解除します。

subscribeToData() の使用

// define and use a callback
    var unsubscribe = dscc.subscribeToData(function(data){
      // console.log the returned data
      console.log(data);
    }, {transform: dscc.tableTransform});

    // to unsubscribe

    unsubscribe();

    

data

これは、dscc.subscribeToData で登録された callback に渡されるオブジェクトです。次のフィールドは、dscc.objectFormatdscc.tableFormat 間で共有されます。

{
      fields: object(fieldsByConfigId),
      style: object(styleById),
      interactions: object(interactionsById),
      theme: object(themeStyle),
      tables: object(tablesById)
    }
    
フィールド 説明
fields object(fieldsByConfigId) configId によってインデックスに登録された fields を含むオブジェクト
style object(styleById) configId によってインデックスに登録された style オブジェクトを含むオブジェクト
interactions object(interactionsById) interaction オブジェクトを含むオブジェクト
theme themeStyle レポートのテーマスタイル情報を含む themeStyle オブジェクト
tables object(tablesById) tableObjects を含むオブジェクト

fieldsByConfigId

{
       configId: array(field)
    }
    

fieldsByConfigId オブジェクトには、ビジュアリゼーション設定で定義された「id」でインデックス登録された field オブジェクトの配列が含まれます。このオブジェクトには、設定で定義された各 dataField に対して 1 つのエントリがあります。

フィールド 説明
configId Array<field> dataField に関連付けられたフィールドの配列。

field

{
      id: fieldId,
      name: string,
      description: string,
      type: fieldType,
      concept: enum(conceptType)
    }
    

field オブジェクトは、ユーザーがプロパティ パネルで選択したフィールドに関する情報が提供されます。

フィールド 説明
id string データポータルで生成されたフィールドの ID
name string 人が読める形式のフィールド名
description string フィールドの説明
type enum(fieldType) フィールドの semanticType
concept enum(conceptType) フィールドの conceptType

styleById

{
       configId: styleValue
    }
    

styleById オブジェクトでは、ビジュアリゼーション設定で定義された「id」によってインデックス登録されたスタイル情報が提供されます。

フィールド 説明
configId styleValue スタイル値と設定で定義されたデフォルト スタイル値を含むオブジェクト

styleValue

{
      value: string | object | bool | number,
      defaultValue: string | object | bool | number
    }
    

styleValue オブジェクトでは、ユーザーが選択したスタイル値と、設定で定義されたデフォルト値の両方が提供されます。valuedefaultValue のタイプは、スタイル要素に依存します。

フィールド 説明
value string OR object OR bool OR number プロパティ パネルでユーザーが選択した設定から返されたスタイル要素の値
defaultValue string OR object OR bool OR number ビジュアリゼーション設定で定義されたスタイル要素のデフォルト値

interactionsById

{

    }
    

interactionsById オブジェクトでは、interactionId ビジュアリゼーション設定によってインデックス登録されたインタラクション データが提供されます。

索引 説明
configId interaction インタラクションに関連付けられたデータを含むオブジェクト

interactionField

{
      value: object(interactionValue),
      supportedActions: array(InteractionType)
    }
    

interactionField オブジェクトには、設定で定義された supportedActions の配列と、ユーザーが選択したインタラクションの値が含まれます。

フィールド 説明
value string OR object OR bool OR number プロパティ パネルでユーザーが選択した設定から返されたスタイル要素の値
supportedActions Array<InteractionType> 設定で定義された、このインタラクションによってサポートされるアクション

interactionValue

interactionValue オブジェクトでは、ユーザーが選択したインタラクション タイプの値が提供されます。data キーが存在する場合、InteractionData オブジェクトにはフィルタの現在の状態が反映されます。data キーが存在しない場合、ビジュアリゼーションは現在フィルタとして設定されていません。

{
      type: enum(InteractionType)
      data: object(interactionData) | None
    }
    
フィールド 説明
type enum(InteractionType) ユーザーが選択した InteractionType
data object(InteractionData) フィルタの現在の状態に関連付けられた data。フィルタが現在クリアされている場合、このキーは存在しません。

theme

{
      fillColor: {
        color: string,
        opacity: number
      },
      fontColor: {
        color: string,
        opacity: number
      },
      accentFillColor: {
        color: string,
        opacity: number
      },
      accentFontColor: {
        color: string,
        opacity: number
      },
      fontFamily: string,
      accentFontFamily: string,
      increaseColor: {
        color: string,
        opacity: number
      },
      decreaseColor: {
        color: string,
        opacity: number
      },
      gridColor: {
        color: string,
        opacity: number
      },
      seriesColor: [
        {
          color: string,
          opacity: number
        }
      ]
    }
    

themeStyle オブジェクトでは、レポートテーマ情報がビジュアリゼーションに渡されます。

フィールド 説明
fillColor object {color: string, opacity: number} 形式のオブジェクト
fontColor object {color: string, opacity: number} 形式のオブジェクト
accentFillColor object {color: string, opacity: number} 形式のオブジェクト
accentFontColor object {color: string, opacity: number} 形式のオブジェクト
fontFamily string フォント ファミリーを説明する文字列
accentFontFamily string アクセント用フォント ファミリーを説明する文字列
increaseColor object {color: string, opacity: number} 形式のオブジェクト
decreaseColor object {color: string, opacity: number} 形式のオブジェクト
gridColor object {color: string, opacity: number} 形式のオブジェクト
seriesColor Array<object> {color: string, opacity: number} 形式のオブジェクトの配列

tablesById

{
      "DEFAULT": object(tableObject),
      "COMPARISON": object(tableObject) | undefined
    }
    

tableObject では、各行の見出しとデータ情報が提供されます。"DEFAULT" では常にデータが返され、"COMPARISON" は、ユーザーが比較行を使用してデータを設定する場合にのみ入力されます。

dscc.tableFormatdscc.objectFormat では、tableObject の形式だけが異なります。

フィールド 説明
"DEFAULT" object(tableObject) OR Array<objectRow> ユーザーがビジュアリゼーションに追加するデータに関連付けられた tableObject
"COMPARISON" object(tableObject) OR Array<objectRow> 日付比較データに関連付けられた tableObject(該当する場合)

tableFormat リファレンス

tableObject

{
      headers: array(object),
      rows: array(array)
    }
    
フィールド 説明
headers Array fields オブジェクトの配列。fields オブジェクトには、設定から取得した ID に対応する configId プロパティが追加されています。
rows Array<Array> 配列の配列: 各配列はデータの行

サンプル tableFormat データ

オプションの dscc.tableFormat とともに dscc.subscribeToData() を使用して返されるサンプル data を以下に示します。

{
      "tables": {
        "DEFAULT": {
          "headers": [{
            "id": "qt_ky8sltutsb",
            "name": "dimension",
            "type": "TEXT",
            "concept": "DIMENSION",
            "configId": "configId1"
          }, {
            "id": "qt_b5bvmtutsb",
            "name": "second dim",
            "type": "TEXT",
            "concept": "DIMENSION"
            "configId": "configId1"
          }, {
            "id": "qt_m9dtntutsb",
            "name": "metric",
            "type": "NUMBER",
            "concept": "METRIC",
            "configId": "configId2"
          }],
          "rows": [
            ["Week 4", "lm", 55]
          ]
        },
        "COMPARISON": {
          "headers": [{
            "id": "qt_ky8sltutsb",
            "name": "dimension",
            "type": "TEXT",
            "concept": "DIMENSION",
            "configId": "configId1"
          }, {
            "id": "qt_b5bvmtutsb",
            "name": "second dim",
            "type": "TEXT",
            "concept": "DIMENSION"
            "configId": "configId1"
          }, {
            "id": "qt_m9dtntutsb",
            "name": "metric",
            "type": "NUMBER",
            "concept": "METRIC",
            "configId": "configId2"
          }],
          "rows": [
            ["Week 5", "no", 123]
          ]
        }
      },
      "fields": {
        "configId1": [
          {
            "id": "qt_ky8sltutsb",
            "name": "week",
            "type": "TEXT",
            "concept": "DIMENSION"
          },
          {
            "id": "qt_b5bvmtutsb",
            "name": "textId",
            "type": "TEXT",
            "concept": "DIMENSION"
          }
        ],
        "configId2": [
          {
            "id": "qt_m9dtntutsb",
            "name": "orders",
            "type": "NUMBER",
            "concept": "METRIC"
          }
        ]
      },
      "style": {
        "nodeColor": {
          "value": {
            "color": "#000000"
          }
        }
      },
      "theme": {},
      "interactions": {
        "onClick": {
          "value": {
            "type": "FILTER",
            "data": {
              "concepts": [
                "qt_h6oibrb6wb",
                "qt_i6oibrb6wb"
              ],
              "values": [
                [
                  "Afternoon",
                  "Sunday"
                ],
                [
                  "Afternoon",
                  "Thursday"
                ],
                [
                  "Morning",
                  "Tuesday"
                ]
              ]
            }
          },
          "supportedActions": [
            "FILTER"
          ]
        }
      }
    }
    

objectFormat リファレンス

objectRow

{
      configId1: array(string | bool | number),
      configId2: array(string | bool | number)
    }
    
フィールド 説明
configId array 特定の設定 ID に関連付けられた値の配列

objectFormat のサンプルデータ

オプションの dscc.objectFormat とともに dscc.subscribeToData() を使用して返されるサンプル data を以下に示します。

{
      "tables": {
        "COMPARISON": [
          {
            "configId1": ["Week 5", "cd"],
            "configId2": [123]
          }
        ],
        "DEFAULT": [
          {
            "configId1": ["Week 1", "ab"],
            "configId2": [24]
          }
        ]
      },
      "fields": {
        "configId1": [
          {
            "id": "qt_h6oibrb6wb",
            "name": "time of day",
            "type": "TEXT",
            "concept": "DIMENSION"
          },
          {
            "id": "qt_i6oibrb6wb",
            "name": "day",
            "type": "TEXT",
            "concept": "DIMENSION"
          }
        ],
        "configId2": [
          {
            "id": "qt_m9dtntutsb",
            "name": "metric",
            "type": "NUMBER",
            "concept": "METRIC"
          }
        ]
      },
      "style": {
        "nodeColor": {
          "value": {
            "color": "#000000"
          }
        }
      },
      "theme": {},
      "interactions": {
        "onClick": {
          "value": {
            "type": "FILTER",
            "data": {
              "concepts": [
                "qt_h6oibrb6wb",
                "qt_i6oibrb6wb"
              ],
              "values": [
                [
                  "Afternoon",
                  "Sunday"
                ],
                [
                  "Afternoon",
                  "Thursday"
                ],
                [
                  "Morning",
                  "Tuesday"
                ]
              ]
            }
          },
          "supportedActions": [
            "FILTER"
          ]
        }
      }
    }