커뮤니티 시각화 구성 참조

참고: 커뮤니티 시각화 기능은 '개발자 프리뷰'에 있습니다. 이 기간 동안 출시 예정인 기능과 개선사항에 관한 자세한 내용은 개발자 프리뷰 페이지를 참고하세요.

시각화 구성은 시각화에 필요한 데이터 및 스타일 속성을 정의합니다.

구성은 다음과 같은 구조의 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 탭에 표시되는 아이콘을 구성합니다.

참고: "SELECT_SINGLE" 및 "SELECT_RADIO"의 경우 드롭다운에서 선택할 요소를 정의해야 합니다.

스타일 요소 옵션

일부 스타일 요소는 옵션을 지원합니다.

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
  }
}