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

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

設定は、次の構造を持つ 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))
  }],
  "features": {
   "enableComparisonDateRange": boolean
  }
}
フィールド名 タイプ 説明
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) 要素の options。SELECT_SINGLE および SELECT_RADIO のスタイル要素タイプにのみ有効です。
style[].elements[].defaultValue string OR object スタイル要素のデフォルト値。無効な値は無視されます。*
interactions[] Array(object) ビジュアル表示のインタラクション設定。この設定により、ビジュアル表示がフィルタとして機能できるかどうかが決定されます。
interactions[].id string インタラクション要素の ID。スペースを含まない、空でない文字列にします。
interactions[].supportedActions Array (enum(InteractionType) サポートされているインタラクション。
features object ビジュアリゼーションで有効または無効にする機能。
features.enableComparisonDateRange boolean [比較期間] を有効にします。指定しない場合のデフォルトは false です。

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

{
    color: `string`
}

DataElement

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

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

DataElement オプション

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

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

StyleElement

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

列挙値 説明 defaultValue データ型（構成） value データ型（メッセージ） デフォルト値
FONT_COLOR フォントの色選択ツールをレンダリングします。有効な値は 16 進数色コードです。 STRING | OBJECT<Color> STRING | OBJECT<Color> テーマによって決まります。
FONT_SIZE フォントサイズの選択ツールをレンダリングします。有効な値は、8、9、10、11、12、14、16、18、20、24、28、30、32、36、40、44、48、60、72、84、96 のピクセルです。 NUMBER NUMBER 12
FONT_FAMILY フォント ファミリーの選択ツールをレンダリングします。有効な値は、次のフォントです: Arial、Boogaloo、Robande Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto 、 Roboto Roboto 、 Roboto 、 Roboto 。 STRING STRING テーマによって決まります。
チェックボックス チェックボックスをレンダリングします。 BOOLEAN BOOLEAN false
TEXTINPUT テキスト入力ボックスをレンダリングします。 STRING STRING ""
TEXTAREA 大きなテキスト入力領域をレンダリングします。 STRING STRING ""
SELECT_SINGLE 事前定義された値を持つプルダウンをレンダリングします。 STRING（defaultValue、options.label、options.value） STRING 未定義
SELECT_RADIO 事前定義された値でラジオボタン選択ツールをレンダリングします。 STRING（defaultValue、options.label、options.value） STRING 未定義
FILL_COLOR 塗りつぶしの色選択ツールをレンダリングします。有効な値は 16 進数色コードです。 STRING | OBJECT<Color> OBJECT<Color> テーマによって決まります。
BORDER_COLOR 枠線の色選択ツールをレンダリングします。有効な値は 16 進数色コードです。 STRING | OBJECT<Color> OBJECT<Color> テーマによって決まります。
AXIS_COLOR 軸の色選択ツールをレンダリングします。有効な値は 16 進数色コードです。 STRING | OBJECT<Color> OBJECT<Color> テーマによって決まります。
GRID_COLOR グリッドの色選択ツールをレンダリングします。有効な値は 16 進数色コードです。 STRING | OBJECT<Color> OBJECT<Color> テーマによって決まります。
不透明度 不透明度セレクタをレンダリングします。単位は % です。有効な値は 0 から 1 で、0.1 単位で指定します。 NUMBER NUMBER 1
LINE_WEIGHT 線の太さ選択ツールをレンダリングします。有効な値は 0 ～ 5 です。0 は、プルダウンで None としてレンダリングされます。 NUMBER NUMBER
LINE_STYLE 線のスタイルの選択ツールをレンダリングします。使用できるデフォルト値: solid、dashed、dotted、double。 STRING STRING "solid"
BORDER_RADIUS 枠線の半径選択ツールをレンダリングします。有効な値: 0、1、2、3、4、5、10、15、20、25、30、40、50、60、70、80、90、100 NUMBER NUMBER テーマによって決まります。
INTERVAL 間隔セレクタをレンダリングします。値は整数です。 NUMBER NUMBER 0

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

スタイル要素のオプション

一部のスタイル要素はオプションをサポートしています

options: array(options)
列挙値 オプション オブジェクト
SELECT_SINGLE 
        {
            label: `string`,
            value: `string`
        }
       
SELECT_RADIO 
        {
            label: `string`,
            value: `string`
        }
       
INTERVAL 
        {
            max: `number`,
            min: `number`
        }
       

データ型

Object<Color>

{
  color: STRING<Color>,
  opacity: NUMBER<Opacity>
}

STRING&lt;Color&gt;

16 進数のカラーコードを含む文字列値。

例

"color": "#0000ff"

NUMBER<不透明度>

0.10 単位で指定する 0 ～ 1 の数値

例

"opacity": 0.2

InteractionType

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

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

設定のサンプル

{
  "data": [{
    "id": "concepts",
    "label": "concepts",
    "elements": [
      {
        "id": "dimension1",
        "label": "first dimension",
        "type": "DIMENSION",
        "options": {
          "min": 1,
          "max": 3,
          "supportedTypes": ["DEFAULT"]
        }
      },
      {
        "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": "Arial",
          "type": "FONT_FAMILY"
        }
      ]
    }
  ],
  "interactions": [
    {
      "id": "interactionsConfigId",
      "supportedActions": ["FILTER"]
    }
  ],
  "features": {
    "enableComparisonDateRange": false
  }
}