시각화 구성은 시각화에 필요한 데이터 및 스타일 속성을 정의합니다.
구성은 다음과 같은 구조의 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
데이터 요소의 값은 다음 중 하나일 수 있습니다.
enum 값 | 설명 |
---|---|
측정항목 | 측정항목 필드 요소를 렌더링합니다. |
측정기준 | 크기 필드 요소를 렌더링합니다. |
MAX_RESULTS | 이 시각화에서 요청할 수 있는 최대 데이터 행을 정의합니다. |
DataElement 옵션
데이터 요소의 값은 다음 중 하나일 수 있습니다.
enum 값 | 옵션 유형 | 옵션 사용 가능 |
---|---|---|
측정항목 | 객체 | max: number - 최대 측정항목 수 최소: 숫자 - 필요한 최소 측정항목 수 |
측정기준 | 객체 | max: number - 지원되는 최대 측정기준 수입니다.
최소: 숫자: 필요한 최소 측정기준 수 supportedTypes: 지원되는 유형 목록 supportedTypes 에는 TIME , GEO , DEFAULT 가 포함될 수 있습니다.
|
MAX_RESULTS | 객체 | max: number - 시각화에서 요청할 수 있는 최대 행 수입니다. 기본값: 2500 |
StyleElement
스타일 요소의 값은 다음 중 하나일 수 있습니다.
enum 값 | 설명 | 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 | 글꼴 모음 선택기를 렌더링합니다. 유효한 값은 다음과 같습니다. 제공: | STRING |
STRING |
테마에 따라 결정됩니다. |
체크박스 | 체크박스를 렌더링합니다. | BOOLEAN |
BOOLEAN |
false |
텍스트 입력 | 텍스트 입력 상자를 렌더링합니다. | 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)
enum 값 | 옵션 객체 |
---|---|
SELECT_SINGLE | { label: `string`, value: `string` } |
SELECT_RADIO | { label: `string`, value: `string` } |
INTERVAL | { max: `number`, min: `number` } |
데이터 유형
객체<색상>
{
color: STRING<Color>,
opacity: NUMBER<Opacity>
}
문자열<색상>
16진수 색상 코드가 포함된 문자열 값입니다.
예
"color": "#0000ff"
NUMBER<Opacity>
0.10 단위로 표시되는 0에서 1까지의 숫자 값
예
"opacity": 0.2
InteractionType
InteractionTypes는 속성 패널의 Data
스타일에서 사용할 수 있는 상호작용 옵션을 구성합니다. 현재 "FILTER"
만 지원됩니다.
enum 값 | 설명 |
---|---|
"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
}
}