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

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단계: 쿼리 작성 및 대시보드에 추가

탐색을 사용하여 Looker UI 내에서 쿼리를 빌드합니다. 탐색에 지원되는 시각화를 추가하고 원하는 경우 시각화의 설정 메뉴에서 설정을 구성합니다.

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

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

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

대시보드가 생성되면 대시보드를 확인합니다.

대시보드 URL에서 dashboards/ 뒤에 숫자 대시보드 ID가 표시됩니다. 다음 단계에서 사용할 수 있도록 이 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>
  )
}

확장 프로그램 또는 React 애플리케이션에서 시각화가 다음과 같이 표시됩니다.

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

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

수정 액세스 권한이 있으면 사용자에게 대시보드가 있는 폴더에 대한 액세스 관리, 수정 액세스 수준, 쿼리가 기반으로 하는 모델에 대한 모델 액세스 권한이 있어야 하며, 적절한 Looker 권한이 있어야 대시보드를 수정할 수 있습니다.

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

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

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

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

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

다음 단계