시각화 구성요소 및 대시보드 속성을 사용하여 간단한 시각화 렌더링

Query 시각화 구성요소의 dashboard 속성을 사용하면 Looker UI의 변경사항에 응답할 수 있는 삽입 가능한 시각화를 렌더링할 수 있습니다. query 속성과 반대로 dashboard 속성을 사용하면 다음과 같은 이점이 있습니다.

  • 대시보드에 대한 수정 액세스 권한이 있는 모든 Looker 사용자가 시각화를 업데이트할 수 있습니다.
  • 삽입된 시각화를 업데이트할 때는 배포된 확장 프로그램 또는 React 애플리케이션을 변경할 필요가 없습니다.

Looker UI 내의 변경사항에 응답하지 않는 삽입 가능한 시각화를 만들려면 시각화 구성요소 및 query 속성을 사용하여 간단한 시각화 렌더링 문서 페이지의 안내를 따르세요.

Looker 시각화 구성요소와 숫자 대시보드 ID를 사용하여 삽입 가능한 시각화를 렌더링하려면 설정이 요구사항을 충족하는지 확인한 후 다음 단계를 수행합니다.

  1. 쿼리를 빌드하고 대시보드에 추가
  2. 대시보드 ID를 사용하여 React 애플리케이션에 쿼리 삽입
  3. 필요한 경우 시각화 수정

요구사항

시작하기 전에 몇 가지 요소가 필요합니다.

  • Looker 인스턴스에 대한 액세스 권한이 있어야 합니다.
  • 확장 프로그램 프레임워크에서 빌드하든 독립 실행형 React 애플리케이션에서 빌드하든 상관없이 Looker의 API로 인증하고 Looker SDK 객체에 액세스할 수 있어야 합니다. 자세한 내용은 Looker API 인증 또는 확장 프로그램 프레임워크를 참조하세요.
  • Looker 시각화 구성요소 NPM 패키지 및 @looker/components-data NPM 패키지를 설치했는지 확인합니다. 시각화 구성요소 패키지 설치 및 사용에 대한 자세한 내용은 GitHub 및 NPM에서 제공되는 README 문서에서 찾을 수 있습니다.

1단계: 쿼리를 빌드하여 대시보드에 추가

Explore를 사용하여 Looker UI 내에서 쿼리를 빌드합니다. 지원되는 시각화를 Explore에 추가하고, 선택적으로 시각화의 설정 메뉴에서 설정을 구성합니다.

이 쿼리를 사용하여 새 대시보드를 만듭니다. 또는 이미 만든 빈 대시보드에 쿼리를 추가할 수도 있습니다.

Query 구성요소는 대시보드 레이아웃에서 타일이 표시되는 위치에 관계없이 항상 연결된 대시보드에 시간순으로 첫 번째로 추가된 타일에서 시각화를 로드합니다. 따라서 단일 타일 대시보드만 쿼리 참조로 사용하는 것이 좋습니다.

Query 구성요소는 타일 시각화만 표시합니다. 타일 제목, 대시보드 제목 또는 기타 대시보드 요소는 표시되지 않습니다. 타일에 적용된 대시보드 필터는 삽입된 시각화에 영향을 주지 않습니다.

대시보드가 생성되면 대시보드를 봅니다.

숫자 대시보드 ID는 대시보드 URL에 dashboards/ 다음에 표시됩니다. 다음 단계에서 사용할 수 있도록 이 ID를 복사합니다.

Query 구성요소의 dashboard 속성은 숫자 ID만 허용합니다. LookML 대시보드의 문자열 ID는 허용하지 않습니다.

2단계: 대시보드 ID를 사용하여 React 애플리케이션에 쿼리 삽입

이제 Query 구성요소의 dashboard 속성에 대시보드 ID를 전달하여 React 애플리케이션에 쿼리를 삽입할 수 있습니다.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query, Visualization } from '@looker/visualizations'

export const MyReactApp = () => {
  const { core40SDK } = useContext(ExtensionContext)

export const MyReactApp = ({ sdk: core40SDK }: Props) => {
  return (
    <DataProvider sdk={core40SDK}>
      <Query dashboard={61}>
        <Visualization />
      </Query>
    </DataProvider>
  )
}

3단계: 필요한 경우 시각화 수정

이제 대시보드에 대해 수정 액세스 권한이 있는 모든 Looker 사용자는 대시보드 내에 삽입된 시각화를 자유롭게 변경할 수 있으며 코드를 변경하지 않고도 변경사항이 React 애플리케이션 내에 표시됩니다.

수정 액세스의 경우 사용자는 대시보드가 있는 폴더의 액세스 관리, 수정 액세스 수준, 쿼리의 기반이 되는 모델에 대한 모델 액세스, 대시보드를 수정하기 위한 적절한 Looker 권한이 있어야 합니다.

삽입된 시각화를 수정하는 방법에는 두 가지가 있습니다.

  • 대시보드에서 쿼리 타일을 수정하거나
  • 대시보드에 새 쿼리 타일을 추가하고 원래 타일을 삭제합니다.

쿼리 타일을 수정하려면 사용자 정의 대시보드 수정 문서 페이지의 타일 수정 안내에 따라 변경사항을 저장하여 대시보드에서 수정 모드를 종료합니다.

새 타일을 추가하고 원래 타일을 삭제하려면 쿼리 타일 추가 안내에 따라 새 타일을 추가합니다. 그런 다음 타일 삭제 안내에 따라 원치 않는 시각화를 삭제합니다. 변경사항을 적용하려면 대시보드에 하나의 타일만 있는지 확인한 다음 변경사항을 저장하여 대시보드에서 수정 모드를 종료합니다.

대시보드를 수정하고 저장하면 코드를 변경하지 않아도 확장 프로그램 또는 React 애플리케이션에 시각화 변경사항이 표시됩니다.

다음 단계