ビジュアル表示設定により、ビジュアル表示に必要なデータとスタイル属性が定義されます。
設定は、次の構造を持つ 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<Color>
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
}
}