커뮤니티 시각화 구성 참조

시각화 구성은 시각화입니다.

구성은 다음과 같은 구조의 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 (열거형(InteractionType) 지원되는 상호작용
features object 시각화에서 사용 설정 또는 사용 중지하려는 기능입니다.
features.enableComparisonDateRange boolean 비교 기간을 사용 설정합니다. 지정되지 않은 경우 기본값은 false입니다.

*defaultValue는 색상 선택기를 제외한 모든 항목의 문자열입니다. 대상 defaultValue는 다음 형식의 객체여야 합니다.

{
    color: `string`
}

DataElement

데이터 요소의 값은 다음 중 하나일 수 있습니다.

enum 값 설명
측정항목 측정항목 필드 요소를 렌더링합니다.
측정기준 크기 필드 요소를 렌더링합니다.
MAX_RESULTS 이 시각화에서 요청할 수 있는 데이터의 최대 행을 정의합니다.

DataElement 옵션

데이터 요소의 값은 다음 중 하나일 수 있습니다.

enum 값 옵션 유형 사용 가능한 옵션
측정항목 객체 max: number - 측정항목의 최대 개수
최솟값: 숫자 - 필요한 최소 측정항목 수
측정기준 객체 max: number - 지원되는 최대 차원 수입니다.
최솟값: number - 필요한 최소 차원 수
supportedType: 지원되는 유형의 목록입니다. 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
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은 드롭다운에서 없음으로 렌더링됩니다. 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>

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

STRING&lt;Color&gt;

16진수 색상 코드가 포함된 문자열 값입니다.

예

"color": "#0000ff"

숫자<불투명도>

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