コミュニティ由来ビジュアル表示の設定リファレンス

ビジュアリゼーション設定により、ビジュアリゼーションに必要なデータとスタイル属性が定義されます。

設定は、次の構造を持つ JSON ファイルとして想定されています。

{
      "data": [
        {
          "id": string,
          "label": string,
          "elements": [
            {
              "type": enum(DataElement),
              "id": string,
              "label": string,
              "options": object(DataElementOptions)
            }
          ]
        }
      ],
      "style": [
        {
          "id": string,
          "label": string,
          "elements": [
            {
              "type": enum(StyleElement),
              "id": string,
              "label": string,
              "defaultValue": string | object
            }
          ]
        }
      ]
      "interactions": [
        {
          "id": string,
          "supportedActions": array(enum(InteractionType))
        }
      ]
    }
    
フィールド名 説明
data[] Array(object) ビジュアル表示のデータ設定。この設定は、プロパティ パネルの [データ] ペインに影響します。
data[].id string データ セクションの ID。スペースを含まない、空でない文字列にします。
data[].label string データ セクションのラベル。
data[].elements[] string レンダリングするデータ要素。
data[].elements[].type string enum(DataElement) レンダリングするデータ要素タイプ。
data[].elements[].id string データ要素の ID。スペースを含まない、空でない文字列にします。
data[].elements[].label string データ要素のツールチップ ラベル。
data[].elements[].options object(DataElementOptions) 要素のデータ オプション。これは、データ要素タイプによって異なります。
style[] Array(object) ビジュアル表示に必要なスタイル設定。この設定は、プロパティ パネルの [スタイル] ペインに影響します。配列の各オブジェクトは、レンダリングするスタイル要素を表します。要素の順序によって、レンダリングされる順序が決まります。
style[].id string スタイル セクションの ID。スペースを含まない、空でない文字列にします。
style[].label string スタイル セクションのラベル。
style[].elements Array(object) レンダリングするスタイル要素。
style[].elements[].id string スタイル要素の ID。スペースを含まない、空でない文字列にします。
style[].elements[].type string enum(StyleElement) スタイル要素のタイプ(例: フォント選択ツール)。
style[].elements[].label string スタイル要素のツールチップまたはラベル。チェックボックス要素のラベルテキスト、および他の要素タイプのツールチップ テキストです。
style[].elements[].options Array(object) 要素の optionsSELECT_SINGLE および SELECT_RADIOスタイル要素タイプにのみ有効です。
style[].elements[].defaultValue string OR object スタイル要素のデフォルト値。無効な値は無視されます。*
interactions[] Array(object) ビジュアル表示のインタラクション設定。この設定により、ビジュアル表示がフィルタとして機能できるかどうかが決定されます。
interactions[].id string インタラクション要素の ID。スペースを含まない、空でない文字列にします。
interactions[].supportedActions Array (enum(InteractionType) サポートされているインタラクション。

*defaultValue は、色選択ツール以外のすべてに使用される文字列です。色選択ツールでは、defaultValue は、次の形式のオブジェクトになります。

{
        color: `string`
    }
    

DataElement

データ要素の値は次のいずれかです。

列挙値 説明
"METRIC" 指標フィールドの要素をレンダリングします。
"DIMENSION" ディメンション フィールド要素をレンダリングします。
"MAX_RESULTS" このビジュアリゼーションによってリクエストできるデータの最大行数を定義します

DataElement オプション

データ要素の値は次のいずれかです。

列挙値 オプション タイプ 設定可能なオプション
"METRIC" オブジェクト max: 数字 - サポートされる指標の最大数。
min: 数字 - 必要な指標の最小数。
"DIMENSION" オブジェクト max: 数字 - サポートされるディメンションの最大数。
min: 数字 - 必要なディメンションの最小数。
supportedTypes - サポートされるタイプのリスト。supportedTypes には、TIMEGEO、または DEFAULT を含めることができます。
"MAX_RESULTS" オブジェクト max: 数字 - ビジュアリゼーションがリクエストできる行の最大数。デフォルト値: 2500。

StyleElement

スタイル要素の値は次のいずれかです。

列挙値 説明
"FONT_COLOR" フォントの色の選択ツールをレンダリングします。
"FONT_SIZE" フォントサイズの選択ツールをレンダリングします。デフォルト値: 10px
"FONT_FAMILY" フォント ファミリーの選択ツールをレンダリングします。デフォルト値: auto
"CHECKBOX" チェックボックスをレンダリングします。デフォルト値: "false"
"TEXTINPUT" テキスト入力ボックスをレンダリングします。
"TEXTAREA" 大きなテキスト入力領域をレンダリングします。
"SELECT_SINGLE" 事前定義された値を持つプルダウンをレンダリングします。
"SELECT_RADIO" 事前定義された値でラジオボタン選択ツールをレンダリングします。
"FILL_COLOR" 塗りつぶしの色の選択ツールをレンダリングします。
"BORDER_COLOR" 枠線の色の選択ツールをレンダリングします。
"AXIS_COLOR" 軸の色の選択ツールをレンダリングします。
"GRID_COLOR" グリッドの色の選択ツールをレンダリングします。
"OPACITY" 不透明度の選択ツールをレンダリングします。
"LINE_WEIGHT" 線幅の選択ツールをレンダリングします。
"LINE_STYLE" 線のスタイルの選択ツールをレンダリングします。使用できるデフォルト値: soliddasheddotteddouble
"BORDER_RADIUS" 枠線の角丸半径の選択ツールをレンダリングします。
"INTERVAL" 間隔の選択ツールをレンダリングします。

スタイル要素により、プロパティ パネルの [Style] タブに表示されるアイコンが設定されます。

options: array(options)
    

オプション オブジェクト

{
        label: `string`,
        value: `string`
    }
    

InteractionType

InteractionTypes により、プロパティ パネルの Data スタイルで利用可能なインタラクション オプションが設定されます。現時点でサポートされているのは "FILTER" のみです。

列挙値 説明
"FILTER" ユーザーがビジュアル表示をフィルタとして使用できるようにします。

設定のサンプル

{
      "data": [
        {
          "id": "concepts",
          "label": "concepts",
          "elements": [
            {
              "id": "dimension1",
              "label": "first dimension",
              "type": "DIMENSION",
              "options": {
                "min": 1,
                "max": 3,
                "supportedTypes": ["GEO"]
              }
            },
            {
              "id": "metric",
              "label": "metric",
              "type": "METRIC",
              "options": {
                "min": 1,
                "max": 3
              }
            }
          ]
        }
      ],
      "style": [
        {
          "id": "colors",
          "label": "Highlight Colors",
          "elements": [
            {
              "id": "accentColor",
              "label": "Accent Color",
              "type": "SELECT_SINGLE",
              "defaultValue": "rain",
              "options": [
                {
                  "label": "Summer",
                  "value": "summer"
                },
                {
                  "label": "Fall",
                  "value": "fall"
                }
              ]
            },
            {
              "id": "reverseColor",
              "label": "Show reverse color",
              "defaultValue": "false",
              "type": "CHECKBOX"
            },
            {
              "id": "fillColor",
              "label": "Fill Color",
              "defaultValue": {
                "color": "#0000ff"
              },
              "type": "FILL_COLOR"
            },
            {
              "id": "textOpacity",
              "label": "Text Opacity",
              "defaultValue": "0.2",
              "type": "OPACITY"
            },
            {
              "id": "customText",
              "label": "Custom Text",
              "defaultValue": "0.2",
              "type": "TEXTINPUT"
            }
          ]
        },
        {
          "id": "text",
          "label": "Highlight Text",
          "elements": [
            {
              "id": "textFontSize",
              "label": "Font size",
              "defaultValue": "10",
              "type": "FONT_SIZE"
            },
            {
              "id": "font",
              "label": "Font family",
              "defaultValue": "auto",
              "type": "FONT_FAMILY"
            }
          ]
        }
      ],
      "interactions": [
        {
          "id": "interactionsConfigId",
          "supportedActions": ["FILTER"]
        }
      ]
    }