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

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

  • Looker에서 쿼리를 빌드하기만 하면 되며 대시보드를 만들 필요가 없습니다.
  • query에서 허용하는 값(Query.client_id 또는 쿼리 ID)을 변경할 수 없습니다. 기본 모델이 변경되지 않으면 Looker 인스턴스가 변경되어도 삽입된 시각화는 영향을 받지 않습니다.

Looker UI 내의 변경사항에 응답하여 앱 개발자가 아닌 Looker 사용자가 업데이트할 수 있는 삽입 가능한 시각화를 만들려면 시각화 구성요소 및 대시보드 ID를 사용하여 단순한 시각화 렌더링 문서 페이지의 안내를 따르세요.

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

  1. Explore에서 쿼리를 빌드하고 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단계: Explore에서 쿼리 빌드 및 Query.client_id 값 복사

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

브라우저의 주소 표시줄에서 qid URL 속성을 찾습니다. 해당 속성에 할당된 영숫자 값은 Query.client_id입니다.

예를 들어 URL이 https://example.looker.com/explore/thelook/orders?qid=evomfl66xHx1jZk2Hzvv1R&toggle=fil,vis,vse이면 Query.client_id는 evomfl66xHx1jZk2Hzvv1R입니다.

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 속성에서 사용할 수 있는 하위 속성의 전체 목록은 시각화 및 쿼리 속성 테이블 참조 문서를 참조하세요.

다음 단계