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

Query 시각화 구성요소의 query 속성을 사용하면 삽입 가능한 시각화를 Looker 시각화 구성요소로 렌더링하는 가장 간단한 방법이 됩니다. dashboard 속성과 달리 query 속성을 사용하면 다음과 같은 이점이 있습니다.

  • Looker에서 쿼리를 빌드하기만 하면 되며, 대시보드를 만들지 않아도 됩니다.
  • query에서 허용하는 값(Query.client_id 또는 쿼리 ID)은 변경할 수 없습니다. 기본 모델이 변경되지 않는 한 삽입된 인스턴스의 변경사항은 삽입된 시각화에 영향을 주지 않습니다.

앱 개발자 이외의 Looker 사용자가 업데이트할 수 있는 삽입 가능한 시각화를 만들려면 시각화 구성요소와 대시보드 ID를 사용하여 간단한 시각화 렌더링 문서 페이지의 안내를 따르세요.

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

  1. 탐색에서 쿼리를 작성하고 Query.client_id 값을 복사합니다.
  2. React 애플리케이션에 쿼리 삽입하기
  3. Visualization 구성요소를 추가합니다.
  4. config 속성으로 설정을 맞춤설정합니다.

요구사항

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

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

1단계: 탐색에서 쿼리 빌드 및 Query.client_id 값 복사

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

브라우저의 URL 입력란에서 qid URL 속성을 확인합니다. 해당 속성에 할당된 영숫자 값은 Query.client_id입니다.

Query.client_id는 쿼리 및 시각화 설정을 나타내는 고유 문자열입니다. 쿼리나 설정에서 변경하면 Query.client_id가 변경됩니다.

다음 단계에서 사용할 Query.client_id을 복사합니다.

2단계: React 애플리케이션에 쿼리 삽입

이제 Query.client_id를 가져와서 React 애플리케이션에 삽입할 수 있습니다.

다음은 가상의 React 애플리케이션용 코드입니다. 이 예시는 Looker 확장 프로그램 프레임워크에서 빌드되었으며 Looker SDK 객체는 확장 프로그램 컨텍스트 제공업체에서 가져왔습니다.

import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'

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

  return null
}

먼저 DataProvider 및 Query 구성요소를 사용해 보겠습니다. DataProvider는 컨텍스트에 SDK 참조를 저장하고 Query는 네트워크 요청을 전달하고 응답 렌더링의 형식을 지정합니다.

또한 다음 두 가지를 제공해야 합니다.

  • SDK 객체. SDK 객체를 확장 프로그램 컨텍스트에서 가져옵니다.
  • Query.client_id. Query.client_id는 query 속성에 할당됩니다.
import React, { useContext } from 'react'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { DataProvider } from '@looker/components-data'
import { Query } from '@looker/visualizations'

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

  return (
    {/* pass the sdk object to DataProvider */}
    <DataProvider sdk={core40SDK}>
      {/* the value referenced by the `query` prop is
          unique to your looker instance. */}
      <Query query="evomfl66xHx1jZk2Hzvv1R"></Query>
    </DataProvider>
  )
}

3단계: Visualization 구성요소 추가

다음으로 Query에서 반환된 데이터 및 구성 설정을 해석하여 예상 차트를 렌더링하는 Visualization 구성요소를 추가합니다.

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)

  return (
    <DataProvider sdk={core40SDK}>
      <Query query="evomfl66xHx1jZk2Hzvv1R">
        <Visualization />
      </Query>
    </DataProvider>
  )
}

이 단계에서는 다음 예와 같은 시각화를 출력합니다.

4단계: config 속성으로 설정 맞춤설정

Query 구성요소의 config 속성을 사용하여 SDK에서 반환된 시각화 설정을 재정의합니다. 이 속성은 시각화 유형부터 각 데이터 계열이 렌더링되는 방식에 이르기까지 지원되는 모든 특성을 변경할 수 있습니다.

아래의 샘플 코드에서 config 속성은 차트 유형을 sparkline으로 변경하고 데이터 계열에 새 색상을 할당합니다.

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)

  return (
    <DataProvider sdk={core40SDK}>
      <Query
        query={'evomfl66xHx1jZk2Hzvv1R'}
        config={{
          type: 'sparkline',
          series: [{ color: '#F4B400' }],
        }}
      >
        <Visualization />
      </Query>
    </DataProvider>
  )
}

이전 단계에서는 이 주황색 스파크라인을 렌더링합니다.

config 속성에서 사용할 수 있는 하위 속성의 전체 목록은 시각화 및 쿼리 속성 테이블 참조 문서를 참고하거나 시각화 구성요소 플레이그라운드에서 실제로 작동하는 속성을 확인하세요.

다음 단계