Looker Marketplace를 위한 커스텀 시각화 개발

이 페이지에서는 Looker Marketplace에 추가하고 다른 Looker 사용자가 액세스할 수 있는 커스텀 시각화 유형을 만드는 방법을 설명합니다. 또한 다른 Looker 고객이 사용할 수 있게 만들지 않고 프로젝트에서 직접 커스텀 시각화를 만들 수 있습니다.

Looker Marketplace에 콘텐츠를 제출할 수 있으려면 Looker Partner Network의 구성원 또는 Looker 고객이어야 합니다.

Looker Marketplace는 Looker Blocks™, 애플리케이션, 시각화, 기타 플러그인과 같은 여러 유형의 Looker 콘텐츠를 찾고, 배포, 관리할 수 있는 중앙 위치입니다.

Looker Marketplace 기능을 사용 설정하면 Looker 고객이 Looker의 네이티브 시각화 라이브러리에 추가할 시각화 유형이 포함된 Looker Marketplace 플러그인을 설치할 수 있습니다.

커스텀 시각화를 개발하고 Looker Marketplace를 통해 모든 Looker 고객이 사용할 수 있게 하려면 다음 단계를 수행합니다.

  1. 시각화 개발
  2. 시각화에 대한 Looker 프로젝트 만들기
  3. Looker 프로젝트를 Git 저장소에 푸시
  4. 시각화 기능 테스트
  5. Looker에 시각화 제출

시각화 유형 개발

개발하려는 시각화 유형을 식별합니다. (이 시각화가 Marketplace에 이미 나열되지 않았는지 또는 네이티브 Looker 시각화가 아닌지 확인하세요.)

JavaScript 환경에서 Looker 시각화 API를 사용하여 JavaScript로 커스텀 시각화를 개발합니다.

시각화에 대한 Looker 프로젝트 만들기

커스텀 시각화를 제공할 Looker 프로젝트를 만듭니다. 프로젝트에는 다음 파일이 포함됩니다.

  • 라이선스 파일: 텍스트를 사용해서 시각화가 배포되는 라이선스를 나열합니다.

    This Looker visualization is distributed with the following license:...

  • README.md 파일: 시각화 설명, 작동 방식, 추가 정보를 제공합니다.

  • JavaScript(.js) 파일: 시각화를 생성하는 데 사용한 JavaScript 코드의 축약된 버전이 포함됩니다. Marketplace에서 JS 파일은 프로젝트 내에 포함되어, 적절한 버전 관리 및 패키지 관리를 지원합니다.

  • 매니페스트(manifest.lkml) 파일: id(고유 식별자) 및 label(이 시각화에 대한Looker UI에 표시)을 지정합니다. 예를 들면 다음과 같습니다.

    constant: vis_id {
        value: "default_id"
        export: override_optional
    }
    constant: vis_label {
        value: "default_label"
        export: override_optional
    }
    visualization: {
        id: "@{vis_id}"
        label: "@{vis_label}"
        file: "my_local.js"
        sri_hash: "my_sri_hash"
        dependencies: []
    }
  • 목록(marketplace.json) 파일: 커스텀 시각화를 위한 Marketplace 목록을 구성하고, Marketplace에서 시각화가 표시되는 방법, image_uri의 위치, 시각화의 사용 사례를 설명하는 소개 문구에 대한 라벨을 포함하고, 설치 중 사용자가 입력하는 Marketplace 필드 제약조건을 정의합니다. 예를 들면 다음과 같습니다.
{
  "label": "Gauge Visualization",
  "category_label": "plug-ins",
  "branding": {
    "image_uri": "https://marketplace-api.looker.com/visualization-screenshots/gauge_icon.png",
    "tagline": "Use the Gauge visualization to display a measure and progress to a goal."
  },
   "constants": {
        "vis_label": {
            "label": "Visualization Label",
            "description": "This label will appear in the visualization selector in the Looker Explore UI."
        },
        "vis_id": {
            "label": "Visualization Id",
            "description": "This must be a unique ID across all visualizations.",
            "value_constraint": "visualization"
        }
    }
}

Git에 프로젝트 푸시

공개적으로 액세스할 수 있는 GitHub 저장소에 시각화 LookML을 호스팅합니다. Looker 프로젝트에서 시각화를 만들었다고 가정하고, 다음 단계에 따라 이를 새 저장소에 푸시합니다.

  1. 공개적으로 액세스할 수 있는 GitHub 저장소를 만듭니다.
  2. GitHub 저장소의 URL로 Looker 프로젝트의 저장소 URL을 설정합니다.
  3. Looker에서 Git 프롬프트에 따라 코드를 검증 및 커밋하고 프로덕션에 배포합니다.

시각화 기능 테스트

Looker 인스턴스에서 적절한 Explore 또는 Look에 적용하여 새 시각화를 테스트합니다.

  1. Look 또는 Explore로 이동합니다.
  2. Look의 경우 수정을 클릭하여 Look을 수정합니다.
  3. 시각화 유형 메뉴에서 점 3개 메뉴를 클릭하여 시각화 드롭다운 목록을 엽니다.
  4. 커스텀 시각화를 선택합니다.
  5. 저장을 클릭하여 변경사항을 Look에 저장합니다. 이 변경사항의 영향을 받을 수 있는 대시보드를 확인합니다.

Looker에서는 Looker Marketplace에서 제공되는 시각화에 대해 다음과 같은 함수가 필요합니다.

함수 필수
시각화 드릴다운 지원
Looker의 색상 팔레트 상속 기능
브라우저 및 화면 크기 응답
일관적인 글꼴 모음: font-family: Helvetica, Arial, sans-serif
글꼴 크기 조정
시각화 구성 패널에서 값 라벨축 라벨 전환 기능
피벗 데이터 시각화 예(적용 가능한 경우)
시각화는 updateAsync 함수 또는 is update function을 사용하는 사용자 상호작용성을 기반으로 업데이트됩니다.
명확한 오류 메시지(예: 이 시각화에는 1개의 측정기준과 2개의 측정값이 필요합니다.)
시각화 구성 패널의 모든 옵션을 통해 시각화를 변경합니다.
기본적으로 필드의 value 형식을 사용합니다. 예(적용 가능한 경우)
쿼리가 결과를 반환하지 않으면 오류가 발생합니다.

검토를 위해 시각화 제출

시각화를 제출한 준비가 되었으면 Looker Marketplace에 콘텐츠 제출의 안내에 따라 시각화에 대한 지원 문서를 만들고, 시각화를 검토하도록 Looker팀에 제출하고, 시각화를 Looker Marketplace에 게시합니다.